/* ============================================================
   MASTERY HUB — styles.css
   ============================================================ */
:root {
  --navy:#001F3F; --navy2:#002d5a;
  --ora:#FF8C00;  --ora2:#cc7000;
  --red:#dc3545;  --grn:#28a745;
  --g50:#f8f9fa; --g100:#f1f3f5; --g200:#e9ecef; --g300:#dee2e6;
  --g400:#ced4da; --g500:#adb5bd; --g600:#6c757d; --g700:#495057; --g900:#212529;
  --bg:#f0f2f5; --surface:#ffffff; --surface2:#f8f9fa;
  --border:#e9ecef; --text:#212529; --text2:#6c757d; --text3:#adb5bd;
  --sw:255px; --hh:60px; --r:10px;
  --sh:0 2px 10px rgba(0,0,0,.06); --shh:0 6px 28px rgba(0,0,0,.12);
  --font-h:'Space Grotesk',sans-serif; --font-b:'DM Sans',sans-serif;
}
body.dark {
  --bg:#0f172a; --surface:#1e293b; --surface2:#111827;
  --border:#334155; --text:#f1f5f9; --text2:#94a3b8; --text3:#475569;
  --g50:#1e293b; --g100:#111827; --g200:#1e293b; --g300:#334155;
  --g400:#475569; --g500:#64748b; --g600:#94a3b8; --g700:#cbd5e1; --g900:#f1f5f9;
  --navy:#1e3a5f; --navy2:#1d4ed8;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-b);background:var(--bg);color:var(--text);overflow-x:hidden;transition:background .2s,color .2s}
h1,h2,h3,h4{font-family:var(--font-h)}
a{text-decoration:none;color:inherit}

/* TOAST */
#toast-wrap{position:fixed;top:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{padding:11px 16px;border-radius:8px;color:#fff;font-size:13.5px;font-weight:500;
  min-width:260px;box-shadow:var(--shh);display:flex;align-items:center;gap:9px;
  animation:tin .25s ease;pointer-events:auto}
.toast.success{background:#28a745}.toast.error{background:#dc3545}.toast.info{background:var(--navy)}
@keyframes tin{from{transform:translateX(110%);opacity:0}to{transform:none;opacity:1}}

/* LAYOUT */
#app{display:flex;min-height:100vh}
#sb{width:var(--sw);background:var(--navy);min-height:100vh;position:fixed;left:0;top:0;
  z-index:200;transition:transform .3s;overflow-y:auto;display:flex;flex-direction:column}
.sb-brand{display:flex;align-items:center;gap:13px;padding:20px 16px;border-bottom:1px solid rgba(255,255,255,.08);
  cursor:pointer;position:sticky;top:0;background:var(--navy);z-index:1}
.brain{font-size:40px;animation:bf 3s ease-in-out infinite;display:block;filter:drop-shadow(0 0 10px rgba(255,140,0,.7))}
@keyframes bf{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
.sb-name{font-family:var(--font-h);font-weight:700;font-size:15px;color:#fff;letter-spacing:.6px}
.sb-sub{font-size:11px;color:var(--ora);letter-spacing:2.5px;margin-top:2px}
.sb-nav{padding:6px 0 24px;flex:1}
.sb-section{padding:12px 16px 5px;font-size:10px;font-weight:700;letter-spacing:1.6px;
  color:rgba(255,255,255,.25);text-transform:uppercase}
.ni{display:flex;align-items:center;gap:10px;padding:9px 16px;color:rgba(255,255,255,.5);
  cursor:pointer;transition:all .15s;border-left:3px solid transparent;font-size:14px;font-weight:500;user-select:none}
.ni:hover:not(.locked){background:rgba(255,255,255,.06);color:#fff;border-left-color:rgba(255,140,0,.4)}
.ni.active{background:rgba(255,140,0,.12);color:var(--ora);border-left-color:var(--ora);font-weight:600}
.ni.locked{opacity:.3;cursor:not-allowed}
.ni i.icon{width:16px;text-align:center;font-size:13px;flex-shrink:0}
.ni i.lock{margin-left:auto;font-size:9px;opacity:.5}
#main{margin-left:var(--sw);flex:1;display:flex;flex-direction:column;min-height:100vh}
#hdr{height:var(--hh);background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;
  position:sticky;top:0;z-index:100;box-shadow:0 1px 0 var(--border);transition:background .2s}
.hdr-l{display:flex;align-items:center;gap:12px}
#page-title{font-family:var(--font-h);font-size:18px;font-weight:700;color:var(--navy)}
body.dark #page-title{color:#f1f5f9}
.hdr-r{display:flex;align-items:center;gap:8px}
.menu-btn{display:none;background:none;border:none;font-size:20px;color:var(--text);cursor:pointer;padding:4px 8px}
#content{padding:24px;flex:1}
.page{display:none}.page.active{display:block;animation:fadeup .22s ease}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.gone{display:none!important}

/* PILL / HEADER */
.pill{display:flex;align-items:center;gap:7px;background:var(--surface2);padding:5px 12px;
  border-radius:50px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);transition:.15s}
.pill:hover{background:var(--g200)}
.pill-av{width:24px;height:24px;border-radius:50%;object-fit:cover;border:2px solid var(--ora)}
.pill-ph{width:24px;height:24px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--ora);border:2px solid var(--ora)}
.adm-badge{background:var(--ora);color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:50px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:8px;
  border:none;cursor:pointer;font-size:13px;font-weight:600;font-family:var(--font-b);transition:all .15s}
.btn-p{background:var(--ora);color:#fff}
.btn-p:hover{background:var(--ora2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,140,0,.3)}
.btn-s{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
.btn-s:hover{background:var(--g200)}
.btn-d{background:var(--red);color:#fff}.btn-d:hover{background:#c82333}
.btn-g{background:var(--grn);color:#fff}
.btn-or{background:transparent;color:var(--red);border:1.5px solid var(--red)}
.btn-or:hover{background:var(--red);color:#fff}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-block{width:100%;justify-content:center}
.btn-like{background:none;border:1.5px solid var(--border);color:var(--text2);padding:6px 14px;
  border-radius:50px;cursor:pointer;font-size:13px;font-weight:600;display:inline-flex;
  align-items:center;gap:6px;transition:all .15s;font-family:var(--font-b)}
.btn-like:hover,.btn-like.liked{background:rgba(255,140,0,.1);border-color:var(--ora);color:var(--ora)}

/* FORMS */
.fg{margin-bottom:14px}
.fg label{display:block;font-size:12.5px;font-weight:600;color:var(--text2);margin-bottom:4px}
.req{color:var(--ora)}
.iw{position:relative}
.iw i.ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:12px}
.iw input{padding-left:32px!important}
input,textarea,select{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;
  font-size:13.5px;font-family:var(--font-b);color:var(--text);background:var(--surface);
  transition:border-color .15s,background .2s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ora);box-shadow:0 0 0 3px rgba(255,140,0,.08)}
textarea{resize:vertical;min-height:80px;line-height:1.5}
.drop-z{border:2px dashed var(--border);border-radius:9px;padding:20px;text-align:center;
  cursor:pointer;transition:all .15s;background:var(--surface2)}
.drop-z:hover{border-color:var(--ora);background:rgba(255,140,0,.03)}
.drop-z i{font-size:24px;color:var(--ora);display:block;margin-bottom:6px}
.drop-z p{font-size:13px;color:var(--text);font-weight:500}
.drop-z small{font-size:12px;color:var(--text2)}
.fprev{margin-top:7px;padding:8px 12px;background:rgba(255,140,0,.07);border-radius:7px;
  font-size:12.5px;color:var(--ora2);display:flex;align-items:center;gap:7px;font-weight:500}
.info-box{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;
  background:rgba(0,31,63,.05);border-radius:8px;border-left:3px solid var(--navy);font-size:12.5px;color:var(--text2);line-height:1.5}
body.dark .info-box{background:rgba(255,255,255,.04)}

/* SURFACES */
.form-card{background:var(--surface);border-radius:var(--r);padding:22px;box-shadow:var(--sh);border:1px solid var(--border);transition:background .2s,border-color .2s}
.form-card h3{font-family:var(--font-h);font-size:17px;font-weight:700;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:8px}
body.dark .form-card h3{color:#93c5fd}
.my-panel{background:var(--surface);border-radius:var(--r);padding:20px;box-shadow:var(--sh);border:1px solid var(--border)}
.my-panel h3{font-family:var(--font-h);font-size:15px;font-weight:700;color:var(--navy);margin-bottom:12px;display:flex;align-items:center;gap:7px}
body.dark .my-panel h3{color:#93c5fd}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.ph{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.ph h2{font-family:var(--font-h);font-size:21px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:9px}
body.dark .ph h2{color:#f1f5f9}
.ph h2 i{color:var(--ora)}
.cnt-badge{background:var(--ora);color:#fff;font-size:11px;font-weight:700;padding:2px 9px;border-radius:50px}

/* AUTH */
.auth-wrap{max-width:520px;margin:0 auto}
.card-auth{background:var(--surface);border-radius:14px;padding:32px;box-shadow:var(--shh);border:1px solid var(--border)}
.auth-logo{display:flex;flex-direction:column;align-items:center;margin-bottom:14px}
.brain-lg{font-size:50px;animation:bf 3s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(255,140,0,.65));display:block;margin-bottom:6px}
.auth-logo span{font-family:var(--font-h);font-size:16px;font-weight:700;color:var(--navy);letter-spacing:2px}
body.dark .auth-logo span{color:#f1f5f9}
.auth-hd h2{font-family:var(--font-h);font-size:22px;font-weight:700;text-align:center;color:var(--navy);margin-bottom:4px}
body.dark .auth-hd h2{color:#f1f5f9}
.auth-hd p{text-align:center;color:var(--text2);font-size:13px;margin-bottom:22px}
.sw{text-align:center;margin-top:16px;font-size:13px;color:var(--text2)}
.sw a{color:var(--ora);cursor:pointer;font-weight:600}

/* PROFILE */
.p-hero{background:linear-gradient(135deg,#001428,var(--navy),#002d6e);padding:24px 28px;
  display:flex;align-items:center;gap:18px}
.p-av-wrap{position:relative;flex-shrink:0}
.p-av{width:88px;height:88px;border-radius:50%;border:3px solid var(--ora);
  display:flex;align-items:center;justify-content:center;font-size:32px;color:rgba(255,255,255,.5);
  background:#001428;background-size:cover;background-position:center}
.p-cam{position:absolute;bottom:2px;right:2px;width:26px;height:26px;background:var(--ora);
  border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:10px;color:#fff;border:2px solid #001428}
.p-info h2{font-family:var(--font-h);font-size:20px;font-weight:700;color:#fff}
.p-info p{color:rgba(255,255,255,.55);font-size:13px;margin-top:3px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-bottom:1px solid var(--border)}
.stat-box{text-align:center;padding:14px 8px;border-right:1px solid var(--border)}
.stat-box:last-child{border-right:none}
.stat-n{font-family:var(--font-h);font-size:22px;font-weight:700;color:var(--ora)}
.stat-l{font-size:11px;color:var(--text2);margin-top:2px}
.p-edit{padding:22px 28px;background:var(--surface)}
.p-edit h3{font-family:var(--font-h);font-size:15px;font-weight:700;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:7px}
body.dark .p-edit{background:var(--surface)}
body.dark .p-edit h3{color:#93c5fd}

/* LIST ROWS */
.list-wrap{display:flex;flex-direction:column;gap:9px}
.li-row{background:var(--surface);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh);
  border:1px solid var(--border);display:flex;align-items:center;gap:12px;transition:box-shadow .15s}
.li-row:hover{box-shadow:var(--shh)}
.li-ico{width:40px;height:40px;background:rgba(255,140,0,.1);border-radius:9px;
  display:flex;align-items:center;justify-content:center;color:var(--ora);font-size:16px;flex-shrink:0}
.li-inf{flex:1;min-width:0}
.li-nm{font-weight:600;font-size:14px;margin-bottom:2px;color:var(--text)}
.li-mt{font-size:12px;color:var(--text2);margin-top:2px}
.li-act{display:flex;gap:7px;flex-shrink:0}
.tag{display:inline-flex;align-items:center;padding:2px 9px;border-radius:50px;font-size:11px;font-weight:600}
.t-cat{background:rgba(0,31,63,.08);color:var(--navy)}
body.dark .t-cat{background:rgba(147,197,253,.1);color:#93c5fd}
.t-ora{background:var(--ora);color:#fff}
.mi{background:var(--surface2);border-radius:8px;padding:9px 11px;margin-bottom:7px;
  display:flex;align-items:center;gap:8px;border:1px solid var(--border)}
.mi .ic{color:var(--ora);font-size:14px;flex-shrink:0}
.mi-info{flex:1;min-width:0}
.mi-nm{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-dt{font-size:11px;color:var(--text2)}
.empty{text-align:center;padding:50px 20px}
.empty i{font-size:40px;margin-bottom:12px;opacity:.2;display:block;color:var(--text2)}
.empty p{font-family:var(--font-h);font-size:15px;font-weight:600;color:var(--text2)}
.empty small{font-size:12.5px;color:var(--text3);margin-top:4px;display:block}

/* RESUME INLINE VIEWER */
.resume-viewer-bar{display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:var(--navy);border-radius:9px 9px 0 0;margin-top:10px}
.resume-viewer-bar span{font-family:var(--font-h);font-size:14px;font-weight:600;color:#fff;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:12px}
.resume-close{background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:6px;
  padding:5px 11px;cursor:pointer;font-size:13px;font-weight:600;transition:.15s;display:flex;align-items:center;gap:6px}
.resume-close:hover{background:rgba(255,0,0,.4)}
.resume-iframe-wrap{border:2px solid var(--navy);border-top:none;border-radius:0 0 9px 9px;overflow:hidden;background:#f0f0f0}
.resume-iframe-wrap iframe{width:100%;height:820px;border:none;display:block}

/* PORTFOLIO CARDS */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.port-card{background:var(--surface);border-radius:12px;padding:18px;box-shadow:var(--sh);
  border:1px solid var(--border);border-top:3px solid var(--ora);cursor:pointer;transition:all .18s}
.port-card:hover{box-shadow:var(--shh);transform:translateY(-2px)}
.pc-title{font-family:var(--font-h);font-size:16px;font-weight:700;color:var(--navy);margin-bottom:7px}
body.dark .pc-title{color:#f1f5f9}
.pc-desc{font-size:13px;color:var(--text2);line-height:1.5;margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pc-meta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.pc-foot{display:flex;align-items:center;justify-content:space-between;padding-top:9px;border-top:1px solid var(--border)}
.pc-author{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text2)}
.pc-av{width:26px;height:26px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--ora);overflow:hidden;flex-shrink:0}
.pc-av img{width:100%;height:100%;object-fit:cover}
.pc-stats{display:flex;gap:9px;font-size:12px;color:var(--text3)}
.pc-stats span{display:flex;align-items:center;gap:4px}
.back-bar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.bc-sep{color:var(--text3)}
.bc-label{font-family:var(--font-h);font-size:15px;color:var(--navy)}
body.dark .bc-label{color:#f1f5f9}
.port-meta-card{background:var(--surface);border-radius:12px;padding:20px;box-shadow:var(--sh);border:1px solid var(--border)}
.pmc-title{font-family:var(--font-h);font-size:20px;font-weight:700;color:var(--navy);margin-bottom:6px}
body.dark .pmc-title{color:#f1f5f9}
.pmc-desc{font-size:13.5px;color:var(--text2);line-height:1.55;margin-bottom:10px}
.pmc-tags{display:flex;gap:7px;flex-wrap:wrap}

/* BLOG CARDS */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.blog-card{background:var(--surface);border-radius:12px;box-shadow:var(--sh);border:1px solid var(--border);
  overflow:hidden;cursor:pointer;transition:all .18s}
.blog-card:hover{box-shadow:var(--shh);transform:translateY(-2px)}
.bc-cover{width:100%;height:180px;object-fit:cover;display:block}
.bc-cover-ph{height:140px;background:linear-gradient(135deg,var(--navy),var(--navy2));
  display:flex;align-items:center;justify-content:center;font-size:44px}
.bc-body{padding:16px}
.bc-author{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text2);margin-bottom:9px}
.bc-av{width:28px;height:28px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ora);overflow:hidden;flex-shrink:0}
.bc-av img{width:100%;height:100%;object-fit:cover}
.bc-title{font-family:var(--font-h);font-size:17px;font-weight:700;color:var(--navy);margin-bottom:7px;line-height:1.3}
body.dark .bc-title{color:#f1f5f9}
.bc-excerpt{font-size:13px;color:var(--text2);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px}
.bc-foot{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--border)}
.bc-stats{display:flex;gap:10px;font-size:12px;color:var(--text3)}
.bc-read{font-size:13px;color:var(--ora);font-weight:600}

/* PROJECT FULL VIEW */
.pfv{max-width:760px;margin:0 auto}
.pfv-cover{width:100%;max-height:360px;object-fit:cover;border-radius:12px;margin-bottom:22px;display:block}
.pfv-title{font-family:var(--font-h);font-size:26px;font-weight:700;color:var(--navy);margin-bottom:12px;line-height:1.25}
body.dark .pfv-title{color:#f1f5f9}
.pfv-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.pfv-body{font-size:14.5px;line-height:1.85;color:var(--text2);word-break:break-word;margin-bottom:22px}
.pfv-files{background:var(--surface2);border-radius:10px;padding:14px;margin-bottom:22px;border:1px solid var(--border)}
.pfv-files h4{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.attach{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--border)}
.attach:last-child{border:none}
.attach-ic{font-size:18px;color:var(--ora);width:26px;text-align:center}
.attach-nm{font-size:13px;font-weight:500;flex:1;color:var(--text)}

/* ═══════════════════════════════════════════════
   PRESENTATION SLIDESHOW VIEWER  (1014 × 720)
═══════════════════════════════════════════════ */
.slide-show-wrap{
  width:100%;max-width:1014px;margin:0 auto;
  background:var(--surface);border-radius:12px;
  box-shadow:var(--shh);border:1px solid var(--border);overflow:hidden;
}
.slide-show-ctrl{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 18px;background:var(--navy);gap:12px;
}
.ssw-title{font-family:var(--font-h);font-size:14px;font-weight:700;color:#fff;
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssw-counter{font-size:13px;color:rgba(255,255,255,.6);font-weight:600;white-space:nowrap;padding:0 8px}
.ssw-btn{background:rgba(255,255,255,.12);border:none;color:#fff;border-radius:7px;
  padding:6px 13px;cursor:pointer;font-size:12.5px;font-weight:600;transition:.15s;
  display:flex;align-items:center;gap:6px;font-family:var(--font-b)}
.ssw-btn:hover{background:rgba(255,255,255,.22)}
.ssw-btn:disabled{opacity:.3;cursor:not-allowed}
.ssw-btn.close-btn:hover{background:rgba(255,60,60,.6)}
/* The actual slide stage */
.slide-stage{position:relative;width:100%;padding-bottom:0;height:0;overflow:hidden}
.slide-stage{height:auto}
.slide-canvas{
  width:1014px;height:720px;max-width:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:60px 70px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#001020 0%,#001f3f 55%,#002a60 100%);
}
.slide-canvas.hidden{display:none}
.slide-canvas::before{
  content:'';position:absolute;top:-100px;right:-100px;width:450px;height:450px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,140,0,.15),transparent 70%);pointer-events:none
}
.slide-canvas::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:var(--ora)}
.slide-num-badge{
  position:absolute;top:22px;right:26px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.4);font-size:10px;font-weight:700;letter-spacing:1.5px;
  padding:3px 10px;border-radius:50px;font-family:var(--font-h)
}
.slide-h1{font-family:var(--font-h);font-size:34px;font-weight:700;color:#fff;
  line-height:1.18;margin-bottom:24px;position:relative;z-index:1;
  text-shadow:0 2px 16px rgba(0,0,0,.5)}
.slide-bullets{position:relative;z-index:1;display:flex;flex-direction:column;gap:11px}
.slide-bullet{display:flex;gap:13px;font-size:16px;color:rgba(255,255,255,.82);line-height:1.6}
.slide-dot{color:var(--ora);font-size:22px;line-height:1.1;flex-shrink:0;font-weight:700;margin-top:-1px}
/* Progress bar under the slide */
.slide-progress-bar{height:4px;background:rgba(255,255,255,.1);margin:0}
.slide-progress-fill{height:100%;background:var(--ora);transition:width .3s ease}
/* Thumbnail strip */
.slide-thumbs{display:flex;gap:7px;padding:12px 16px;overflow-x:auto;background:var(--surface2);border-top:1px solid var(--border)}
.slide-thumb{width:90px;height:60px;flex-shrink:0;border-radius:5px;cursor:pointer;overflow:hidden;
  background:var(--navy);border:2px solid transparent;transition:all .15s;position:relative}
.slide-thumb:hover{border-color:var(--ora);opacity:.85}
.slide-thumb.active{border-color:var(--ora)}
.slide-thumb-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:4px 6px;background:linear-gradient(135deg,#001020,#001f3f)}
.slide-thumb-title{font-size:8px;color:rgba(255,255,255,.7);text-align:center;line-height:1.3;font-family:var(--font-h)}
.slide-thumb-n{position:absolute;bottom:2px;right:4px;font-size:8px;color:rgba(255,255,255,.3)}
/* No slides placeholder */
.no-slides{background:var(--navy);height:360px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.5)}
.no-slides i{font-size:48px;opacity:.3}
.no-slides p{font-family:var(--font-h);font-size:16px}
.no-slides small{font-size:13px;opacity:.6}

/* Presentation cards in list */
.pres-card{background:var(--surface);border-radius:12px;padding:18px;box-shadow:var(--sh);
  border:1px solid var(--border);border-left:4px solid var(--ora);display:flex;align-items:center;gap:14px;margin-bottom:12px;cursor:pointer;transition:all .18s}
.pres-card:hover{box-shadow:var(--shh);transform:translateX(3px)}
.pres-card-ico{width:46px;height:46px;background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ora);flex-shrink:0}
.pres-card-body{flex:1;min-width:0}
.pres-card-title{font-family:var(--font-h);font-size:15px;font-weight:700;color:var(--navy);margin-bottom:3px}
body.dark .pres-card-title{color:#f1f5f9}
.pres-card-desc{font-size:12.5px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pres-card-meta{font-size:11.5px;color:var(--text3);margin-top:3px;display:flex;align-items:center;gap:8px}
.pres-private-badge{background:rgba(255,140,0,.12);color:var(--ora2);font-size:10px;font-weight:700;
  padding:1px 7px;border-radius:50px;border:1px solid rgba(255,140,0,.3)}

/* COMMENTS */
.comments-box{background:var(--surface);border-radius:12px;padding:20px;box-shadow:var(--sh);border:1px solid var(--border);margin-top:20px}
.comments-box h4{font-family:var(--font-h);font-size:15px;font-weight:700;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:7px}
body.dark .comments-box h4{color:#93c5fd}
.cmt-input-row{display:flex;gap:9px;margin-bottom:16px}
.cmt-input-row textarea{border-radius:9px;min-height:52px;resize:none;font-size:13.5px}
.cmt-send{background:var(--ora);color:#fff;border:none;border-radius:9px;padding:9px 15px;
  cursor:pointer;font-size:13px;font-weight:600;font-family:var(--font-b);transition:.15s;align-self:flex-end;white-space:nowrap}
.cmt-send:hover{background:var(--ora2)}
.cmt-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.cmt-item:last-child{border:none}
.cmt-av{width:32px;height:32px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ora);flex-shrink:0;overflow:hidden}
.cmt-av img{width:100%;height:100%;object-fit:cover}
.cmt-body{flex:1}
.cmt-nm{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:2px}
body.dark .cmt-nm{color:#93c5fd}
.cmt-text{font-size:13.5px;color:var(--text2);line-height:1.5}
.cmt-date{font-size:11px;color:var(--text3);margin-top:2px}
.cmt-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:11px;padding:3px;transition:.15s}
.cmt-del:hover{color:var(--red)}
.no-cmts{text-align:center;padding:20px;color:var(--text2);font-size:13px}

/* MEMBERS */
.members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.mem-card{background:var(--surface);border-radius:12px;padding:20px;box-shadow:var(--sh);border:1px solid var(--border);text-align:center;transition:.18s}
.mem-card:hover{box-shadow:var(--shh);transform:translateY(-2px)}
.mem-av{width:64px;height:64px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--ora);
  margin:0 auto 11px;overflow:hidden;border:3px solid var(--border)}
.mem-av img{width:100%;height:100%;object-fit:cover}
.mem-nm{font-family:var(--font-h);font-weight:700;font-size:14px;color:var(--navy);margin-bottom:3px}
body.dark .mem-nm{color:#f1f5f9}
.mem-em{font-size:11.5px;color:var(--text2);margin-bottom:7px;word-break:break-all}
.mem-bio{font-size:12.5px;color:var(--text2);line-height:1.5;margin-bottom:7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mem-skills{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:7px}
.mem-skill{background:rgba(255,140,0,.1);color:var(--ora2);font-size:10.5px;padding:2px 7px;border-radius:50px;font-weight:600}
.mem-dt{font-size:11px;color:var(--text3)}

/* LEADERBOARD */
.ldr-item{background:var(--surface);border-radius:11px;padding:14px 18px;box-shadow:var(--sh);border:1px solid var(--border);display:flex;align-items:center;gap:14px;margin-bottom:9px}
.ldr-rank{font-family:var(--font-h);font-size:20px;font-weight:700;width:34px;text-align:center}
.r1{color:#FFD700}.r2{color:#C0C0C0}.r3{color:#CD7F32}.rn{color:var(--text3)}
.ldr-av{width:42px;height:42px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--ora);overflow:hidden;flex-shrink:0}
.ldr-av img{width:100%;height:100%;object-fit:cover}
.ldr-info{flex:1}
.ldr-nm{font-family:var(--font-h);font-weight:700;font-size:14px;color:var(--navy);margin-bottom:2px}
body.dark .ldr-nm{color:#f1f5f9}
.ldr-sub{font-size:12px;color:var(--text2)}
.ldr-pts{font-family:var(--font-h);font-size:17px;font-weight:700;color:var(--ora)}

/* ANNOUNCEMENTS */
.announce-card{background:var(--surface);border-radius:12px;padding:22px;box-shadow:var(--sh);border:1px solid var(--border);border-left:4px solid var(--ora);margin-bottom:14px}
.announce-badge{font-size:11px;font-weight:700;padding:2px 9px;background:rgba(255,140,0,.1);color:var(--ora2);border-radius:50px;display:inline-block;margin-bottom:9px}
.announce-card h3{font-family:var(--font-h);font-size:17px;font-weight:700;color:var(--navy);margin-bottom:6px}
body.dark .announce-card h3{color:#f1f5f9}
.announce-card p{font-size:13.5px;color:var(--text2);line-height:1.55}
.announce-dt{font-size:11px;color:var(--text3);margin-top:8px;display:block}
.announce-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}

/* RESOURCES */
.resources-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:24px}
.res-section-title{font-family:var(--font-h);font-size:13px;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:1px;margin:22px 0 10px;display:flex;align-items:center;gap:8px}
.res-section-title i{color:var(--ora)}
.rc{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:11px;
  padding:14px;box-shadow:var(--sh);border:1px solid var(--border);cursor:pointer;transition:.18s}
.rc:hover{box-shadow:var(--shh);transform:translateY(-2px);border-color:var(--ora)}
.rc-icon{width:42px;height:42px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:15px;color:#fff;font-family:var(--font-h);font-weight:700;flex-shrink:0}
.rc strong{font-family:var(--font-h);font-size:13px;font-weight:700;color:var(--text);display:block;margin-bottom:2px}
.rc p{font-size:11.5px;color:var(--text2);line-height:1.4}

/* SERVICES */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.svc-card{background:var(--surface);border-radius:12px;box-shadow:var(--sh);border:1px solid var(--border);
  overflow:hidden;transition:all .18s;display:flex;flex-direction:column}
.svc-card:hover{box-shadow:var(--shh);transform:translateY(-2px)}
.svc-img{width:100%;height:190px;object-fit:cover;display:block}
.svc-img-ph{height:190px;background:linear-gradient(135deg,var(--navy),var(--navy2));
  display:flex;align-items:center;justify-content:center;font-size:52px}
.svc-body{padding:18px;flex:1;display:flex;flex-direction:column}
.svc-title{font-family:var(--font-h);font-size:16px;font-weight:700;color:var(--navy);margin-bottom:7px}
body.dark .svc-title{color:#f1f5f9}
.svc-desc{font-size:13px;color:var(--text2);line-height:1.55;flex:1;margin-bottom:14px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svc-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.svc-price{font-family:var(--font-h);font-size:20px;font-weight:700;color:var(--ora)}
.svc-contact-btn{background:var(--navy);color:#fff;border:none;border-radius:8px;
  padding:7px 14px;cursor:pointer;font-size:12.5px;font-weight:600;transition:.15s;font-family:var(--font-b)}
.svc-contact-btn:hover{background:var(--ora)}
.svc-author{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text3);margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
/* Contact modal */
.svc-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:500;
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeup .2s}
.svc-modal{background:var(--surface);border-radius:14px;padding:28px;max-width:480px;width:100%;
  box-shadow:var(--shh);border:1px solid var(--border)}
.svc-modal h3{font-family:var(--font-h);font-size:19px;font-weight:700;color:var(--navy);margin-bottom:6px}
body.dark .svc-modal h3{color:#f1f5f9}
.svc-modal .price-big{font-family:var(--font-h);font-size:28px;font-weight:700;color:var(--ora);margin-bottom:14px}
.svc-modal .contact-info{background:rgba(255,140,0,.07);border-radius:10px;padding:16px;
  font-size:14px;color:var(--text);line-height:1.7;border:1px solid rgba(255,140,0,.2);white-space:pre-wrap;word-break:break-word}
.svc-modal-close{float:right;background:none;border:none;font-size:20px;cursor:pointer;color:var(--text3);margin-top:-4px}
.svc-modal-close:hover{color:var(--red)}

/* THEME SETTINGS */
.theme-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.theme-btns{display:flex;gap:8px}
.theme-btn{display:flex;align-items:center;gap:7px;padding:9px 18px;border-radius:50px;
  border:2px solid var(--border);background:var(--surface2);color:var(--text2);
  font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-b);transition:all .15s}
.theme-btn:hover{border-color:var(--ora);color:var(--ora)}
.theme-btn.active{border-color:var(--ora);background:rgba(255,140,0,.1);color:var(--ora)}

/* ADMIN TABLE */
.tbl-wrap{overflow-x:auto;border-radius:var(--r);box-shadow:var(--sh)}
#adm-tbl{width:100%;border-collapse:collapse;background:var(--surface)}
#adm-tbl th{background:var(--navy);color:#fff;padding:12px 14px;text-align:left;font-family:var(--font-h);font-size:12.5px;font-weight:600}
#adm-tbl td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle;color:var(--text)}
#adm-tbl tr:last-child td{border:none}
#adm-tbl tr:hover td{background:var(--surface2)}
.sbadge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:50px;font-size:11px;font-weight:600}
.s-on{background:rgba(40,167,69,.1);color:#28a745}.s-off{background:rgba(108,117,125,.1);color:var(--text2)}


/* ═══════════════════════════════════════════════════════
   PRESENTATION VIEWER  —  iframe 1080 × 600
   Vertical arrows on the right navigate pages
═══════════════════════════════════════════════════════ */

/* Card list grid */
.pres-cards-grid { display:flex; flex-direction:column; gap:10px; }
.pres-card-new {
  display:flex; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:16px 18px; cursor:pointer;
  transition:box-shadow .15s, border-color .15s; box-shadow:var(--sh);
}
.pres-card-new:hover { box-shadow:var(--shh); border-color:var(--ora); }
.pcn-icon {
  width:52px; height:52px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,#e74c3c,#c0392b);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:22px;
}
.pcn-body { flex:1; min-width:0; }
.pcn-title {
  font-family:var(--font-h); font-size:15px; font-weight:700;
  color:var(--navy); margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.dark .pcn-title { color:#f1f5f9; }
.pcn-desc {
  font-size:13px; color:var(--text2); line-height:1.5;
  overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.pcn-meta { font-size:11.5px; color:var(--text3); margin-top:5px; }
.pcn-btn  { flex-shrink:0; }

/* Viewer top bar */
.pres-viewer-bar {
  display:flex; align-items:center; gap:12px;
  max-width:1110px; margin:0 auto 0;
  padding:10px 16px;
  background:var(--navy); border-radius:10px 10px 0 0;
  color:#fff;
}
.pres-vback {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.15); color:#fff; border:none;
  padding:8px 16px; border-radius:6px; font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap; font-family:var(--font-h);
  transition:background .15s; flex-shrink:0;
}
.pres-vback:hover { background:var(--ora); }
#pres-bar-title {
  flex:1; font-family:var(--font-h); font-size:15px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pres-bar-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
#pres-bar-meta { font-size:11.5px; color:rgba(255,255,255,.6); white-space:nowrap; }

/* iframe wrapper */
.pres-iframe-wrap {
  max-width:1080px; margin:0 auto;
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  border-radius:0 0 10px 10px;
  overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.12);
}
#pres-iframe {
  display:block; width:100%; height:620px; border:none;
  background:#f5f5f5;
}

/* QUILL editor overrides */
.ql-custom-toolbar{
  border:1.5px solid var(--border)!important;border-radius:8px 8px 0 0!important;
  background:var(--surface2)!important;
}
body.dark .ql-custom-toolbar{background:var(--surface)!important;border-color:var(--border)!important}
.prj-editor-body{
  border:1.5px solid var(--border)!important;border-top:none!important;
  border-radius:0 0 8px 8px!important;min-height:260px;
  background:var(--surface)!important;font-size:14px;
}
.ql-toolbar.ql-snow{border:none!important;padding:6px 8px!important}
.ql-container.ql-snow{border:none!important}
.ql-editor{min-height:240px;font-family:var(--font-b)!important;font-size:14px!important;color:var(--text)!important;line-height:1.7!important}
.ql-editor.ql-blank::before{color:var(--text3)!important;font-style:normal!important}
body.dark .ql-toolbar button,.body.dark .ql-picker-label{color:#94a3b8!important}
body.dark .ql-toolbar .ql-stroke{stroke:#94a3b8!important}
body.dark .ql-toolbar .ql-fill{fill:#94a3b8!important}
/* Rendered rich content in project view */
.pfv-body h1,.pfv-body h2,.pfv-body h3{font-family:var(--font-h);color:var(--navy);margin:18px 0 8px}
body.dark .pfv-body h1,body.dark .pfv-body h2,body.dark .pfv-body h3{color:#93c5fd}
.pfv-body p{margin-bottom:10px}
.pfv-body ul,.pfv-body ol{padding-left:22px;margin-bottom:10px}
.pfv-body blockquote{border-left:3px solid var(--ora);padding-left:14px;color:var(--text2);margin:10px 0}
.pfv-body pre{background:var(--surface2);border-radius:6px;padding:12px;font-size:13px;overflow-x:auto;margin:10px 0}
.pfv-body a{color:var(--ora);text-decoration:underline}

/* MISSION PAGE */
.task-badge{background:var(--ora);color:#fff}
.ts-group{margin-bottom:26px}
.ts-group-title{display:flex;align-items:center;gap:8px;font-family:var(--font-h);
  font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px}
.ts-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ts-cnt{background:rgba(255,255,255,.15);color:inherit;font-size:10px;padding:1px 7px;border-radius:50px;border:1px solid currentColor}
.ts-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;margin-bottom:9px;box-shadow:var(--sh);transition:box-shadow .15s}
.ts-card:hover{box-shadow:var(--shh)}
.ts-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.ts-cat{font-size:11.5px;font-weight:600;color:var(--text2);display:flex;align-items:center;gap:4px}
.ts-date{font-size:11.5px;color:var(--text3);display:flex;align-items:center;gap:5px}
.ts-title{font-family:var(--font-h);font-size:15px;font-weight:700;color:var(--navy);margin-bottom:5px}
body.dark .ts-title{color:#f1f5f9}
.ts-desc{font-size:13px;color:var(--text2);line-height:1.55;margin-bottom:10px}
.ts-actions{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.ts-status-sel{flex:0 0 auto;width:auto;padding:5px 10px;font-size:12px;border-radius:6px;cursor:pointer}
/* Rocket glow on mission item */
.task-item.ni.active{background:rgba(255,140,0,.15);color:var(--ora)}
.task-item .icon{color:var(--ora)!important;opacity:.8}
.task-section{
  background:linear-gradient(135deg,rgba(255,140,0,.12),rgba(255,80,0,.08));
  border-left:2px solid var(--ora)!important;color:var(--ora)!important;
  font-weight:700!important;letter-spacing:.3px;
}
.task-priv-badge{
  margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.5px;
  background:rgba(255,140,0,.2);color:var(--ora);
  padding:2px 6px;border-radius:50px;text-transform:uppercase;flex-shrink:0;
}

/* ── ADMIN TABS ───────────────────────────────────────── */
.adm-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.adm-tab{
  display:flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text2);
  font-size:13px;font-weight:600;font-family:var(--font-h);
  cursor:pointer;transition:all .15s;
}
.adm-tab:hover{border-color:var(--ora);color:var(--ora)}
.adm-tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.adm-panel{}
.sbadge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:50px;font-size:11px;font-weight:700}
.s-on{background:rgba(40,167,69,.12);color:#28a745}
.s-off{background:rgba(220,53,69,.1);color:#dc3545}
.s-rej{background:rgba(108,117,125,.12);color:#6c757d}
.s-pend{background:rgba(255,140,0,.12);color:var(--ora)}

/* RESPONSIVE */
@media(max-width:960px){ .split,.settings-grid{grid-template-columns:1fr} }
@media(max-width:1160px){
  .pres-iframe-wrap{ max-width:100%; }
  #pres-iframe{ height:520px; }
}
@media(max-width:768px){
  #sb{transform:translateX(-100%)} .sb-open{transform:translateX(0)!important}
  #main{margin-left:0} .menu-btn{display:block}
  #content{padding:14px}
  .pres-viewer-bar{flex-wrap:wrap}
  #pres-iframe{height:400px}
  .pfv-title{font-size:20px} .p-hero{flex-direction:column;text-align:center}
  .pres-card-new{flex-wrap:wrap}
}
@media(max-width:480px){
  .cards-grid,.blog-grid,.members-grid,.resources-grid,.svc-grid{grid-template-columns:1fr}
  #pres-iframe{height:280px}
}