:root{--bg: #14181f;--bg-2: #1c222c;--bg-3: #242c38;--line: #313b4a;--text: #e8ecf2;--text-dim: #97a3b4;--amber: #f5b82e;--amber-dark: #c8920f;--green: #3ecf8e;--red: #f06a5d;--blue: #5aa9f0;--radius: 10px;--font-display: "Barlow Condensed", sans-serif;--font-body: "Barlow", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.5}#root{min-height:100%}h1,h2,h3,.display{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-weight:600}a{color:var(--amber)}button{font-family:var(--font-body);cursor:pointer;border:none;border-radius:var(--radius);font-size:15px;font-weight:600}input,select,textarea{font-family:var(--font-body);background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:9px 12px;font-size:15px;width:100%}input:focus,select:focus,textarea:focus{outline:2px solid var(--amber);outline-offset:1px}.topbar{display:flex;align-items:center;gap:14px;padding:12px 20px;background:var(--bg-2);border-bottom:3px solid var(--amber);position:sticky;top:0;z-index:50}.topbar .brand{font-family:var(--font-display);font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.topbar .brand span{color:var(--amber)}.topbar .spacer{flex:1}.topbar .user{font-size:13px;color:var(--text-dim);text-align:right}.page{max-width:1080px;margin:0 auto;padding:24px 16px 80px}.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px}.btn{padding:10px 18px;background:var(--bg-3);color:var(--text);border:1px solid var(--line)}.btn:hover{border-color:var(--amber)}.btn-primary{background:var(--amber);color:#14181f;border:none}.btn-primary:hover{background:#ffd35c}.btn-primary:disabled{background:var(--bg-3);color:var(--text-dim);cursor:not-allowed}.btn-danger{background:transparent;color:var(--red);border:1px solid var(--red)}.btn-sm{padding:6px 12px;font-size:13px}.chip{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.chip-done{background:#3ecf8e26;color:var(--green)}.chip-pending{background:#f5b82e26;color:var(--amber)}.chip-overdue{background:#f06a5d26;color:var(--red)}.chip-stale{background:#5aa9f026;color:var(--blue)}.sop-card{display:flex;align-items:center;gap:16px;background:var(--bg-2);border:1px solid var(--line);border-left:5px solid var(--amber);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px}.sop-card.done{border-left-color:var(--green)}.sop-card.overdue{border-left-color:var(--red)}.sop-card .code{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--amber);min-width:92px}.sop-card.done .code{color:var(--green)}.sop-card .meta{flex:1;min-width:0}.sop-card .meta .title{font-weight:600}.sop-card .meta .sub{font-size:13px;color:var(--text-dim)}.pdf-shell{background:#0d1015;border:1px solid var(--line);border-radius:var(--radius);height:70vh;overflow-y:auto;padding:12px}.pdf-shell canvas{max-width:100%;height:auto!important;margin:0 auto 12px;display:block;border-radius:4px}.react-pdf__Page{display:flex;justify-content:center}.read-hud{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin:12px 0;font-size:14px}.read-hud .ok{color:var(--green);font-weight:700}.read-hud .wait{color:var(--amber);font-weight:700}.steps{display:flex;gap:0;margin-bottom:18px}.steps .step{flex:1;text-align:center;font-family:var(--font-display);text-transform:uppercase;font-size:15px;letter-spacing:.05em;padding:8px 4px;border-bottom:3px solid var(--line);color:var(--text-dim)}.steps .step.active{border-color:var(--amber);color:var(--amber)}.steps .step.passed{border-color:var(--green);color:var(--green)}.quiz-q{margin-bottom:18px}.quiz-q .qtext{font-weight:600;margin-bottom:8px}.quiz-opt{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;cursor:pointer}.quiz-opt:hover{border-color:var(--amber)}.quiz-opt.selected{border-color:var(--amber);background:#f5b82e14}.quiz-opt input{width:auto;margin-top:3px}.sig-canvas-wrap{background:#fff;border-radius:var(--radius);border:2px dashed var(--amber);touch-action:none;position:relative}.sig-canvas-wrap canvas{display:block;width:100%;border-radius:8px;touch-action:none}.sig-hint{position:absolute;bottom:8px;left:0;right:0;text-align:center;color:#9aa;font-size:13px;pointer-events:none}.tbl{width:100%;border-collapse:collapse;font-size:14px}.tbl th{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:13px;color:var(--text-dim);text-align:left;padding:8px;border-bottom:2px solid var(--line)}.tbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}.tbl tr:hover td{background:#ffffff05}.tbl img.sig{background:#fff;border-radius:4px;height:34px}.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.tabs button{padding:9px 16px;background:var(--bg-2);border:1px solid var(--line);color:var(--text-dim);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:15px}.tabs button.active{background:var(--amber);color:#14181f;border-color:var(--amber)}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,transparent 0 38px,rgba(245,184,46,.05) 38px 56px),var(--bg)}.login-card{width:min(400px,92vw);background:var(--bg-2);border:1px solid var(--line);border-top:5px solid var(--amber);border-radius:var(--radius);padding:34px 28px;text-align:center}.login-card h1{font-size:30px;margin-bottom:4px}.login-card h1 span{color:var(--amber)}.login-card p{color:var(--text-dim);margin-bottom:24px;font-size:14px}.gbtn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#1f1f1f;padding:11px 22px;border-radius:8px;font-weight:600}.err{color:var(--red);margin-top:14px;font-size:14px}.field{margin-bottom:12px}.field label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:4px}.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1;min-width:140px}.muted{color:var(--text-dim);font-size:13px}.center{text-align:center}.mt{margin-top:14px}@media (max-width: 640px){.sop-card{flex-wrap:wrap}.pdf-shell{height:60vh}}