:root{
  --ink:#0b1020;--surface:#f6f7fb;--card:#fff;--text:#131a2b;--muted:#5b6678;--line:#e6e8ef;
  --primary:#c2620a;--primary-2:#d97706;--primary-soft:#fff3e0;--success:#16a34a;--success-soft:#ecfdf3;
  --amber:#b45309;--amber-soft:#fffbeb;--danger:#dc2626;--blue:#2563eb;
  --grad:linear-gradient(135deg,#f59e0b,#d97706);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Inter",system-ui,sans-serif;color:var(--text);background:var(--surface);-webkit-font-smoothing:antialiased;line-height:1.5}
h1,h2,h3,h4,.disp{font-family:"Space Grotesk","Inter",sans-serif;letter-spacing:-0.02em}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}

/* shell */
header.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topwrap{width:min(1080px,calc(100% - 36px));margin:0 auto;display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk";font-weight:700;font-size:16px}
.logo{height:30px;width:30px;border-radius:8px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px}
.brand small{display:block;font-family:"Inter";font-weight:600;font-size:11px;color:var(--muted);letter-spacing:.02em}
.toggle{margin-left:auto;display:flex;background:#eef0f5;border-radius:10px;padding:3px}
.toggle button{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted)}
.toggle button.on{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.me{display:flex;align-items:center;gap:9px}
.signout{font-size:12.5px;color:var(--muted);font-weight:600;padding:6px 10px;border-radius:8px}
.signout:hover{background:#eef0f5;color:var(--text)}
.av{height:34px;width:34px;border-radius:999px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;font-family:"Space Grotesk";flex:none;overflow:hidden}
.av img{height:100%;width:100%;object-fit:cover}
.av.lg{height:64px;width:64px;font-size:22px}
.av.sm{height:28px;width:28px;font-size:11px}

main{width:min(1080px,calc(100% - 36px));margin:26px auto 70px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--primary)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.card+.card,.row+.row{margin-top:16px}
.muted{color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:999px;padding:4px 10px;letter-spacing:.02em}
.pill.done{background:var(--success-soft);color:var(--success)}
.pill.now{background:var(--primary-soft);color:var(--primary)}
.pill.wait{background:var(--amber-soft);color:var(--amber)}
.pill.lock{background:#f1f2f6;color:#9aa3b2}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:11px 18px;font-size:14px;font-weight:600;border:1px solid transparent;transition:.15s}
.btn-grad{background:var(--grad);color:#141414;box-shadow:0 8px 18px rgba(217,119,6,.26)}
.btn-grad[disabled]{opacity:.5;box-shadow:none;cursor:not-allowed}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:#c9cde0}
.btn-sm{padding:8px 13px;font-size:13px;border-radius:9px}
.btn-ok{background:var(--success);color:#fff}
.btn-warn{background:#fff;border:1px solid #fde68a;color:var(--amber)}
input,textarea,select{font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;width:100%;background:#fff;color:var(--text)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
label{font-size:12.5px;font-weight:600;display:block;margin-bottom:5px}

/* login */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.authcard{width:min(420px,100%);text-align:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:38px 30px;box-shadow:0 24px 60px rgba(16,24,40,.10)}
.authcard .logo{height:44px;width:44px;font-size:17px;margin:0 auto 18px}
.authcard h1{font-size:24px;margin-bottom:8px}
.authcard p{color:var(--muted);font-size:14.5px;margin-bottom:24px}
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 18px;border:1px solid var(--line);border-radius:12px;font-weight:600;font-size:14.5px;background:#fff}
.gbtn:hover{border-color:#c9cde0;box-shadow:0 2px 8px rgba(16,24,40,.06)}
.gbtn.primary{background:var(--grad);border-color:transparent;color:#141414;box-shadow:0 8px 18px rgba(217,119,6,.26)}
.gbtn.primary:hover{box-shadow:0 10px 22px rgba(217,119,6,.32)}
.gbtn[disabled]{opacity:.6;cursor:not-allowed}
.gbtn svg{height:18px;width:18px}
.ordiv{display:flex;align-items:center;gap:10px;margin:18px 0 14px;color:var(--muted);font-size:12px}
.ordiv::before,.ordiv::after{content:"";flex:1;height:1px;background:var(--line)}
.authfoot{margin-top:18px;font-size:12px;color:var(--muted)}

/* trainee header */
.thead{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.thead h1{font-size:clamp(22px,3vw,28px)}
.trackbadge{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600}
.trackbadge .dot{height:7px;width:7px;border-radius:999px;background:var(--grad)}
.progwrap{margin-left:auto;text-align:right}
.progwrap b{font-family:"Space Grotesk";font-size:26px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.progwrap span{display:block;font-size:11.5px;color:var(--muted)}

/* journey stepper */
.journey{display:flex;gap:0;margin-top:6px;overflow-x:auto;padding-bottom:4px}
.jstep{flex:1;min-width:120px;text-align:center;position:relative;padding-top:30px}
.jstep::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:3px;background:var(--line)}
.jstep:first-child::before{display:none}
.jstep.done::before,.jstep.now::before{background:var(--grad)}
.jdot{position:absolute;top:4px;left:50%;transform:translateX(-50%);height:22px;width:22px;border-radius:999px;background:#fff;border:3px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:800}
.jstep.done .jdot{background:var(--success);border-color:var(--success)}
.jstep.now .jdot{background:var(--primary);border-color:var(--primary);box-shadow:0 0 0 5px var(--primary-soft)}
.jstep b{font-size:12.5px;display:block}
.jstep span{font-size:11px;color:var(--muted)}

/* next-step hero */
.next{background:linear-gradient(120deg,#fff,#fff7ed);border:1px solid #fde9c8}
.next .eyebrow{margin-bottom:6px}
.next h2{font-size:20px;margin-bottom:6px}
.next p{color:var(--muted);font-size:14.5px;max-width:560px}
.next .act{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}

.grid2{display:grid;grid-template-columns:1.3fr .85fr;gap:16px;align-items:start}
.ms{display:flex;gap:14px;align-items:flex-start}
.ms .ic{height:40px;width:40px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--primary-soft);color:var(--primary)}
.ms .ic.done{background:var(--success-soft);color:var(--success)}
.ms .ic.lock{background:#f1f2f6;color:#9aa3b2}
.ms h4{font-size:15px;display:flex;align-items:center;gap:8px}
.ms .desc{font-size:13.5px;color:var(--muted);margin:3px 0 0}
.submitbox{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.feedback{margin-top:11px;background:#fafbff;border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:10px;padding:11px 13px;font-size:13px}
.feedback b{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.feedback.warn{border-left-color:var(--amber);background:var(--amber-soft)}

/* attendance */
.att{display:flex;flex-direction:column;gap:9px}
.att .a{display:flex;align-items:center;gap:10px;font-size:13.5px}
.att .tick{height:20px;width:20px;border-radius:6px;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;background:var(--success)}
.att .tick.no{background:#fff;border:1.5px solid var(--line);color:transparent}

/* profile editor + preview */
.pf-field{margin-bottom:12px}
.photo-up{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.photo-box{height:74px;width:74px;border-radius:14px;border:2px dashed var(--line);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;color:var(--muted);font-size:11px;text-align:center;flex:none;background:#fafbff;overflow:hidden}
.photo-box img{height:100%;width:100%;object-fit:cover}
.preview-card{position:sticky;top:78px}
.pc{border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center;background:linear-gradient(180deg,#fff,#fafbff)}
.pc b{font-size:15px;display:block;margin-top:10px}
.pc .role{color:var(--primary);font-size:12.5px;font-weight:600}
.pc .bio{color:var(--muted);font-size:12.5px;margin-top:8px;line-height:1.5}
.pc .cert{margin-top:11px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--success);background:var(--success-soft);border-radius:999px;padding:3px 9px;display:inline-block}
.pc .cert.pending{color:var(--muted);background:#f1f2f6}
.hint{font-size:12px;color:var(--muted);margin-top:10px;text-align:center}

/* certified banner */
.cbanner{background:var(--ink);color:#fff;border-radius:16px;padding:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cbanner h2{color:#fff;font-size:20px}
.cbanner p{color:#aeb6c8;font-size:14px;margin-top:3px}

/* track picker (enroll) */
.tracks{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.tcard{border:1px solid var(--line);border-radius:14px;padding:18px;cursor:pointer;transition:.15s;background:#fff;text-align:left}
.tcard:hover{border-color:var(--primary);box-shadow:0 8px 20px rgba(217,119,6,.12);transform:translateY(-1px)}
.tcard h3{font-size:16px;margin-bottom:5px}
.tcard p{font-size:13px;color:var(--muted)}
.tcard .lead{font-size:12px;color:var(--primary);font-weight:600;margin-top:10px}

/* leader view */
.lstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.lstat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.lstat b{font-family:"Space Grotesk";font-size:26px;display:block}
.lstat span{font-size:11.5px;color:var(--muted)}
.qrow{display:flex;align-items:center;gap:14px;padding:14px 4px;border-top:1px solid var(--line);flex-wrap:wrap}
.qrow:first-of-type{border-top:none}
.qrow .who{min-width:160px;display:flex;align-items:center;gap:10px}
.qrow .who b{font-size:14px;display:block}
.qrow .who span{font-size:12px;color:var(--muted)}
.qrow .stage{font-size:12.5px;color:var(--muted);min-width:130px}
.qrow .pending{flex:1;min-width:180px;font-size:13px}
.qrow .acts{display:flex;gap:8px;flex-wrap:wrap}
.review-link{color:var(--blue);font-size:13px;font-weight:600}
.upbox{border:2px dashed var(--line);border-radius:14px;padding:26px;text-align:center;cursor:pointer;transition:.15s;background:#fafbff}
.upbox:hover,.upbox.drag{border-color:var(--primary);background:var(--primary-soft)}
.upbox b{font-size:14px}
.empty{text-align:center;color:var(--muted);padding:30px;font-size:14px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.fchip{font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;transition:.12s}
.fchip:hover{border-color:var(--primary);color:var(--primary)}
.fchip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.shots{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.shot{height:66px;width:66px;border-radius:10px;border:1px solid var(--line);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;background:#fafbff;flex:none}
.shot img{height:100%;width:100%;object-fit:cover}
.shot.add{cursor:pointer;font-size:24px;color:var(--muted);border-style:dashed;font-weight:600}
.shot.add:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.shotx{position:absolute;top:3px;right:3px;height:18px;width:18px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.casecard{margin-top:14px}
.casehead{display:flex;align-items:center;gap:9px}
.crit{display:block;margin-top:6px;font-size:12px;color:var(--success);background:var(--success-soft);border-radius:8px;padding:5px 9px}
.mdef{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;background:#fafbff}
.mdef-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mdef-head b{font-size:13px}
.mtrack{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.mdot{height:22px;width:22px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:1.5px solid var(--line);color:var(--muted);background:#fff;flex:none}
.mdot.ok{background:var(--success);border-color:var(--success);color:#fff}
.mdot.rev{background:var(--amber-soft);border-color:#fbbf24;color:var(--amber)}
.mdot.chg{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}
.mlegend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.mlegend .mdot{margin-left:6px}

/* misc */
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;margin:80px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;font-size:13.5px;font-weight:600;opacity:0;transition:.25s;z-index:80;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--danger)}

@media(max-width:820px){.grid2{grid-template-columns:1fr}.lstats{grid-template-columns:repeat(2,1fr)}.tracks{grid-template-columns:1fr}.preview-card{position:static}}