*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:#0d1420;color:#e8edf5;min-height:100vh;line-height:1.6}

:root{
  --p900:#042d1f;--p800:#065c3a;--p700:#0a8c57;--p600:#0eab6a;
  --p500:#12ca7d;--p400:#3dd98f;--p200:#9ef0c8;--p100:#cef8e4;
  --s0:#0d1420;--s1:#111c2a;--s2:#162234;--s3:#1b293d;--s4:#213048;
  --bdr:#1a2f3f;--bhi:#254050;
  --tp:#e8edf5;--ts:#7fa8b4;--tm:#3d6070;
  --g-bg:#062a1c;--g-t:#3dd98f;--g-b:#0a3d28;
  --a-bg:#231a05;--a-t:#f0a732;--a-b:#3d2e08;
  --r-bg:#200f0f;--r-t:#f07070;--r-b:#3d1515;
  --n-bg:#0d1e2e;--n-t:#5fa3e8;--n-b:#1a3a58;
}

.nav{background:var(--s1);border-bottom:1px solid var(--bdr);padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:54px;position:sticky;top:0;z-index:100}
.logo-wrap{display:flex;align-items:center;gap:10px}
.logo-s360{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;color:var(--p400);letter-spacing:-.3px}
.logo-divider{width:1px;height:18px;background:var(--bdr)}
.logo-sub{font-size:10px;color:var(--tm);font-weight:400;letter-spacing:1.5px;text-transform:uppercase}
.nav-tabs{display:flex;gap:2px;background:var(--s3);border-radius:9px;padding:3px;border:1px solid var(--bdr)}
.tab{padding:5px 14px;font-size:11px;font-weight:500;border-radius:7px;cursor:pointer;color:var(--ts);border:none;background:transparent;font-family:'DM Sans',sans-serif;transition:all .15s}
.tab.active{background:var(--p800);color:var(--p100);border:1px solid var(--p700)}
.tab:hover:not(.active){color:var(--tp);background:var(--s4)}
.nav-user{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ts)}
.av{width:30px;height:30px;border-radius:50%;background:var(--p800);border:1px solid var(--p700);color:var(--p200);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600}

.cert-banner{background:linear-gradient(90deg,#042a1a 0%,#061e30 100%);border-bottom:1px solid var(--bdr);padding:5px 24px;font-size:11px;color:var(--p400);font-weight:500;letter-spacing:.3px}

.view{display:none;padding:20px 24px;max-width:1080px;margin:0 auto}
.view.active{display:block}

.welcome-screen{min-height:calc(100vh - 110px);display:flex;align-items:center;justify-content:center}
.welcome-box{background:var(--s1);border:1px solid var(--bdr);border-radius:16px;padding:40px 48px;max-width:560px;width:100%;text-align:center}
.welcome-box h2{font-family:'Playfair Display',serif;font-size:26px;color:var(--p200);margin-bottom:8px}
.welcome-box .tagline{font-size:13px;color:var(--ts);margin-bottom:28px;line-height:1.7}
.welcome-steps{display:flex;flex-direction:column;gap:8px;margin-bottom:28px;text-align:left}
.ws{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;background:var(--s2);border-radius:8px;border:1px solid var(--bdr)}
.ws-num{width:22px;height:22px;border-radius:50%;background:var(--p800);border:1px solid var(--p700);color:var(--p200);font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.ws-t{font-size:12px;color:var(--ts);line-height:1.5}
.ws-t strong{color:var(--tp);font-weight:500}

.greet h2{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;color:var(--p100);margin-bottom:3px}
.greet p{font-size:12px;color:var(--ts);margin-bottom:18px}

.prog-strip{background:linear-gradient(135deg,var(--p900) 0%,#071a2e 100%);border:1px solid var(--p800);border-radius:12px;padding:14px 18px;margin-bottom:16px}
.ps-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ps-title{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:var(--tm)}
.ps-gates{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ps-gate{display:flex;flex-direction:column;align-items:center;gap:4px}
.ps-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600}
.psd-done{background:var(--g-bg);color:var(--g-t);border:1px solid var(--g-b)}
.psd-active{background:var(--p800);color:var(--p200);border:1px solid var(--p700)}
.psd-lock{background:var(--s3);color:var(--tm);border:1px solid var(--bdr)}
.ps-label{font-size:9px;color:var(--tm);text-align:center;line-height:1.3}

.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}
.stat{background:var(--s2);border:1px solid var(--bdr);border-radius:10px;padding:12px 14px}
.stat-lbl{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--tm);margin-bottom:5px}
.stat-val{font-size:22px;font-weight:500;color:var(--p400);line-height:1}
.stat-val.amber{color:var(--a-t)}
.stat-val.green{color:var(--g-t)}
.stat-sub{font-size:10px;color:var(--tm);margin-top:3px}

.card{background:var(--s1);border:1px solid var(--bdr);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.card-title{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:var(--tm);margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--bdr)}
.two-col{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px}

.badge{display:inline-flex;align-items:center;font-size:10px;font-weight:500;padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.b-done{background:var(--g-bg);color:var(--g-t);border:1px solid var(--g-b)}
.b-prog{background:#0a2030;color:var(--p400);border:1px solid var(--p800)}
.b-lock{background:var(--s3);color:var(--tm);border:1px solid var(--bdr)}
.b-pend{background:var(--a-bg);color:var(--a-t);border:1px solid var(--a-b)}
.b-cert{background:#06281a;color:#3dd98f;border:1px solid #0a3d28;font-size:11px;padding:4px 12px}

.mod-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--bdr);cursor:pointer;transition:all .15s;border-radius:8px}
.mod-item:last-child{border-bottom:none}
.mod-item:hover{background:var(--s2);padding:11px 10px;margin:0 -10px}
.mod-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.mi-done{background:var(--g-bg);color:var(--g-t);border:1px solid var(--g-b)}
.mi-active{background:var(--p800);color:var(--p200);border:1px solid var(--p700)}
.mi-lock{background:var(--s3);color:var(--tm);border:1px solid var(--bdr)}
.mod-info{flex:1;min-width:0}
.mod-name{font-size:13px;font-weight:500;color:var(--tp);margin-bottom:2px}
.mod-meta{font-size:11px;color:var(--ts)}
.pbar{height:3px;background:var(--s4);border-radius:2px;margin-top:6px;overflow:hidden}
.pfill{height:100%;border-radius:2px;background:var(--p600)}
.pfill-g{height:100%;border-radius:2px;background:#1a9e6a}

.resume-box{background:linear-gradient(135deg,var(--p900) 0%,#061828 100%);border:1px solid var(--p800);border-radius:10px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.rb-title{font-size:13px;font-weight:500;color:var(--p100);margin-bottom:3px}
.rb-meta{font-size:11px;color:var(--ts)}

.reflink-box{background:var(--s2);border:1px solid var(--p800);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.rl-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:var(--p400);margin-bottom:8px}
.rl-url{font-family:monospace;font-size:13px;color:var(--p200);background:var(--s3);padding:8px 12px;border-radius:7px;border:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;gap:10px}
.rl-url span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-copy{background:var(--p700);color:var(--p100);border:none;border-radius:6px;padding:5px 12px;font-size:11px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap;transition:background .15s}
.rl-copy:hover{background:var(--p600)}
.rl-warning{font-size:11px;color:var(--a-t);margin-top:6px;line-height:1.5}

.cert-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--bdr)}
.cert-item:last-child{border-bottom:none}
.cert-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.ci-done{background:var(--g-bg);color:var(--g-t);border:1px solid var(--g-b)}
.ci-pend{background:var(--a-bg);color:var(--a-t);border:1px solid var(--a-b)}
.ci-lock{background:var(--s3);color:var(--tm);border:1px solid var(--bdr)}
.cert-name{font-size:13px;font-weight:500;color:var(--tp)}
.cert-sub{font-size:11px;color:var(--ts);margin-top:1px}

.ql{font-size:12px;color:var(--p400);cursor:pointer;padding:7px 0;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:7px;transition:color .1s}
.ql:last-child{border-bottom:none}
.ql:hover{color:var(--p100)}
.ql-dot{width:4px;height:4px;border-radius:50%;background:var(--p700);flex-shrink:0}

.cert-badge{background:linear-gradient(135deg,#042d1f 0%,#071a2e 100%);border:2px solid var(--p600);border-radius:16px;padding:24px;text-align:center;margin-bottom:14px}
.cb-title{font-family:'Playfair Display',serif;font-size:20px;color:var(--p200);margin-bottom:4px}
.cb-sub{font-size:12px;color:var(--ts);margin-bottom:16px}
.cb-name{font-size:18px;font-weight:600;color:var(--p400);margin-bottom:4px}
.cb-date{font-size:11px;color:var(--tm)}
.cb-seal{width:60px;height:60px;border-radius:50%;background:var(--p800);border:2px solid var(--p600);color:var(--p200);font-size:20px;display:flex;align-items:center;justify-content:center;margin:12px auto 0}

.btn{border-radius:8px;padding:8px 18px;font-size:12px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap;transition:all .15s;border:none}
.btn-green{background:var(--p700);color:var(--p100);border:1px solid var(--p600)}
.btn-green:hover{background:var(--p600)}
.btn-ghost{background:transparent;color:var(--p400);border:1px solid var(--bhi);padding:5px 12px;font-size:11px;border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s}
.btn-ghost:hover{border-color:var(--p700);color:var(--p200)}

.admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.adm-stat{background:var(--s2);border:1px solid var(--bdr);border-radius:10px;padding:12px 14px}
.adm-lbl{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--tm);margin-bottom:4px}
.adm-val{font-size:20px;font-weight:500;color:var(--p400)}
.assoc-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--bdr)}
.assoc-row:last-child{border-bottom:none}
.a-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-g{background:#1a9e6a}.dot-a{background:#c4861e}.dot-r{background:#c44040}
.a-name{font-size:13px;font-weight:500;color:var(--tp);flex:1}
.a-meta{font-size:11px;color:var(--ts);text-align:right}
.notif{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--bdr);align-items:flex-start}
.notif:last-child{border-bottom:none}
.n-dot{width:6px;height:6px;border-radius:50%;margin-top:4px;flex-shrink:0}
.n-text{font-size:12px;color:var(--tp);line-height:1.5}
.n-time{font-size:10px;color:var(--tm);margin-top:2px}

@media(max-width:768px){
  .nav{padding:8px 14px;flex-wrap:wrap;height:auto;gap:8px}
  .nav-tabs{order:3;width:100%;overflow-x:auto}
  .view{padding:14px}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .admin-grid{grid-template-columns:repeat(2,1fr)}
  .ps-gates{grid-template-columns:repeat(2,1fr)}
}