:root{
  --bg:#080c14;--sf:#0f1520;--sf2:#161e2e;--sf3:#1d2638;
  --bd:#243044;--bd2:#2e3d58;
  --tx:#e8eef8;--tx2:#8a9ab8;--tx3:#4a5a78;
  --am:#f0a500;--am-bg:rgba(240,165,0,.1);--am-b:rgba(240,165,0,.25);
  --gn:#1db87a;--gn-bg:rgba(29,184,122,.1);--gn-b:rgba(29,184,122,.25);
  --rd:#e84545;--rd-bg:rgba(232,69,69,.1);--rd-b:rgba(232,69,69,.25);
  --bl:#3d8ef0;--bl-bg:rgba(61,142,240,.1);--bl-b:rgba(61,142,240,.25);
  --r:8px;--rs:6px;
  --font-display:'Sora',sans-serif;
  --font-body:'DM Sans',sans-serif;
}
[data-theme="light"]{
  --bg:#eef0f5;--sf:#ffffff;--sf2:#e8ecf4;--sf3:#dde2ee;
  --bd:#c4ccdc;--bd2:#aab5cb;
  --tx:#07101f;--tx2:#1a2840;--tx3:#3d4f6e;
  --am:#b87200;--am-bg:rgba(184,114,0,.1);--am-b:rgba(184,114,0,.28);
  --gn:#136b43;--gn-bg:rgba(19,107,67,.1);--gn-b:rgba(19,107,67,.28);
  --rd:#b52222;--rd-bg:rgba(181,34,34,.1);--rd-b:rgba(181,34,34,.28);
  --bl:#1a4fc4;--bl-bg:rgba(26,79,196,.1);--bl-b:rgba(26,79,196,.28);
}

/* ── LIGHT MODE LOGIN OVERRIDES ── */
[data-theme="light"] .lc select {
  background: #f0f2f7 !important;
  color: #1a1a2e !important;
  border-color: #b0b8c8 !important;
}
[data-theme="light"] .lc select option {
  background: #ffffff !important;
  color: #1a1a2e !important;
}
[data-theme="light"] .lc {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(184,114,0,0.25) !important;
  box-shadow: 0 0 0 1px rgba(184,114,0,0.08), 0 24px 48px rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .lc-brand h1 {
  color: #1a1a2e !important;
}
[data-theme="light"] .lc-brand p {
  color: #4a5a7a !important;
}
[data-theme="light"] .lc label {
  color: #2a3a5a !important;
}
[data-theme="light"] .lc-hint {
  color: #5a6a8a !important;
}
[data-theme="light"] .lc-roles {
  background: #e8ecf4 !important;
  border-color: #c4ccdc !important;
} 
[data-theme="light"] .lc-role-name {
  color: #b87200 !important;
}
[data-theme="light"] .lc-role-desc {
  color: #3d4f6e !important;
}
[data-theme="light"] #loginScreen {
  background: #eef0f5 !important;
}
[data-theme="light"] .login-bg-lines svg {
  opacity: 0.06 !important;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);background:var(--bg);color:var(--tx);min-height:100vh}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--sf)}
::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:3px}

/* THEME TOGGLE */
.theme-toggle{background:var(--sf2);border:1px solid var(--bd);border-radius:20px;padding:.28rem .65rem;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:.7rem;color:var(--tx2);transition:all .2s;letter-spacing:.03em}
.theme-toggle:hover{border-color:var(--am);color:var(--am);background:var(--am-bg)}
.theme-toggle .tog-icon{font-size:.85rem;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
[data-theme="light"] .theme-toggle .tog-icon{transform:rotate(360deg)}

/* LOGIN */
#loginScreen{display:flex;align-items:center;justify-content:center;min-height:100vh;position:relative;overflow:hidden;background:#060a11}
#loginScreen::before{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 60% at 20% 50%,rgba(240,165,0,.07) 0%,transparent 60%),
  radial-gradient(ellipse 60% 80% at 80% 30%,rgba(61,142,240,.06) 0%,transparent 60%),
  radial-gradient(ellipse 40% 40% at 50% 100%,rgba(29,184,122,.04) 0%,transparent 60%);
  z-index:0}
#loginScreen::after{content:'';position:absolute;inset:0;background-image:
  linear-gradient(rgba(240,165,0,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(240,165,0,.04) 1px,transparent 1px);
  background-size:48px 48px;z-index:0;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%)}
.login-bg-lines{position:absolute;inset:0;z-index:0;overflow:hidden}
.login-bg-lines svg{width:100%;height:100%;opacity:.08}
.lc{background:rgba(15,21,32,.92);border:1px solid rgba(240,165,0,.18);border-radius:16px;padding:2.5rem 2.25rem;width:420px;position:relative;z-index:1;
  box-shadow:0 0 0 1px rgba(240,165,0,.05),0 32px 64px rgba(0,0,0,.6),0 0 80px rgba(240,165,0,.05);
  animation:lc-in .5s cubic-bezier(.16,1,.3,1) both}
@keyframes lc-in{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.lc-brand{display:flex;align-items:center;gap:14px;margin-bottom:2rem}
.lc-logo{width:48px;height:48px;flex-shrink:0;position:relative}
.lc-logo svg{width:48px;height:48px;filter:drop-shadow(0 0 12px rgba(240,165,0,.5))}
.lc-brand h1{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--tx);line-height:1.2;letter-spacing:-.01em}
.lc-brand p{font-size:.6rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.14em;margin-top:2px}
.lc-divider{display:flex;align-items:center;gap:12px;margin-bottom:1.5rem}
.lc-divider::before,.lc-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--bd),transparent)}
.lc-divider span{font-size:.6rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.12em;white-space:nowrap}
.lc label{display:block;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);margin-bottom:7px;font-family:var(--font-display)}
.lc select{width:100%;padding:.7rem 1rem;background:rgba(22,30,46,.8);border:1px solid var(--bd2);border-radius:var(--rs);color:var(--tx);font-family:var(--font-body);font-size:.88rem;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%238a9ab8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:9px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.lc select:focus{border-color:var(--am);box-shadow:0 0 0 3px var(--am-bg)}
.lc select option{background:#0f1520;color:var(--tx)}
.lc-btn{width:100%;margin-top:1.4rem;padding:.75rem;background:linear-gradient(135deg,#f0a500,#e08c00);border:none;border-radius:var(--rs);color:#000;font-family:var(--font-display);font-weight:700;font-size:.9rem;cursor:pointer;transition:all .2s;letter-spacing:.02em;position:relative;overflow:hidden}
.lc-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);opacity:0;transition:opacity .2s}
.lc-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(240,165,0,.35)}
.lc-btn:hover::after{opacity:1}
.lc-btn:active{transform:translateY(0)}
.lc-hint{text-align:center;font-size:.65rem;color:var(--tx3);margin-top:.85rem;letter-spacing:.04em}
.lc-hint::before{content:'⚡ ';font-size:.7rem}
.lc-roles{margin-top:1.1rem;background:var(--sf2);border:1px solid var(--bd);border-radius:var(--rs);padding:.7rem .9rem}
.lc-role-row{display:flex;align-items:flex-start;gap:8px;padding:3px 0;font-size:.72rem}
.lc-role-name{color:var(--am);font-weight:600;min-width:90px}
.lc-role-desc{color:var(--tx3);line-height:1.4}

/* SHELL */
#mainApp{display:none}
.shell{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
.sb{background:linear-gradient(180deg,var(--sf) 0%,rgba(8,12,20,.98) 100%);border-right:1px solid var(--bd);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sb-hd{padding:1.1rem 1.2rem .9rem;border-bottom:1px solid var(--bd);background:linear-gradient(135deg,rgba(240,165,0,.04),transparent)}
.sb-brand{display:flex;align-items:center;gap:11px}
.sb-logo{width:34px;height:34px;flex-shrink:0}
.sb-logo svg{width:34px;height:34px;filter:drop-shadow(0 0 6px rgba(240,165,0,.4))}
.sb-brand h1{font-family:var(--font-display);font-size:.82rem;font-weight:700;color:var(--tx);line-height:1.2;letter-spacing:-.01em}
.sb-brand p{font-size:.55rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.12em;margin-top:1px}

/* ── LIGHT MODE SIDEBAR BRAND ── */
[data-theme="light"] .sb-brand h1 {
  color: #1a1a2e !important;
}
[data-theme="light"] .sb-brand p {
  color: #3d4f6e !important;
}
[data-theme="light"] .sb {
  background: #ffffff !important;
}
.sb-role{margin:.85rem 1.2rem;background:linear-gradient(135deg,rgba(240,165,0,.07),rgba(240,165,0,.03));border:1px solid rgba(240,165,0,.18);border-radius:var(--rs);padding:.55rem .8rem}
.sb-rl{font-size:.55rem;text-transform:uppercase;letter-spacing:.12em;color:var(--tx3);margin-bottom:2px;font-family:var(--font-display)}
.sb-rn{font-size:.82rem;font-weight:700;color:var(--am);font-family:var(--font-display)}
.sb-sec{padding:.75rem 1.2rem .2rem;font-size:.55rem;text-transform:uppercase;letter-spacing:.14em;color:var(--tx3);font-weight:600;font-family:var(--font-display)}
.ni{display:flex;align-items:center;gap:10px;padding:.5rem 1.2rem;font-size:.8rem;color:var(--tx2);cursor:pointer;transition:all .15s;border-left:2px solid transparent;margin:1px 0;font-family:var(--font-body)}
.ni:hover{background:var(--sf2);color:var(--tx);border-left-color:var(--bd2)}
.ni.act{background:linear-gradient(90deg,rgba(240,165,0,.12),rgba(240,165,0,.03));color:var(--am);border-left-color:var(--am);font-weight:600}

/* ── LIGHT MODE NAV ITEMS ── */
[data-theme="light"] .ni {
  color: #2a3a5a !important;
}
[data-theme="light"] .ni:hover {
  background: #eef0f5 !important;
  color: #1a1a2e !important;
  border-left-color: #b0b8c8 !important;
}
[data-theme="light"] .ni.act {
  background: linear-gradient(90deg, rgba(184,114,0,0.15), rgba(184,114,0,0.05)) !important;
  color: #b87200 !important;
  border-left-color: #b87200 !important;
}
.ni svg{width:14px;height:14px;flex-shrink:0}
.nbadge{margin-left:auto;background:var(--am);color:#000;font-size:.58rem;font-weight:700;border-radius:10px;padding:1px 7px;min-width:18px;text-align:center;font-family:var(--font-display)}
.sb-ft{margin-top:auto;padding:.9rem 1.2rem;border-top:1px solid var(--bd);display:flex;flex-direction:column;gap:6px}
.sbfbtn{padding:.45rem .75rem;background:transparent;border:1px solid var(--bd);border-radius:var(--rs);color:var(--tx2);font-family:var(--font-body);font-size:.74rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:7px;width:100%}
.sbfbtn:hover{border-color:var(--am);color:var(--am);background:var(--am-bg)}
.sbfbtn.logout:hover{border-color:var(--rd);color:var(--rd);background:var(--rd-bg)}

/* TOPBAR */
.mc{display:flex;flex-direction:column;overflow:hidden}
.tb{background:rgba(15,21,32,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd);padding:.7rem 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.tb-t{font-size:.95rem;font-weight:700;color:var(--tx);font-family:var(--font-display);letter-spacing:-.01em}
.tb-m{font-size:.65rem;color:var(--tx3);margin-top:2px;letter-spacing:.03em}
.tb-r{display:flex;align-items:center;gap:.65rem}
.tb-tag{font-size:.68rem;background:var(--sf2);border:1px solid var(--bd);border-radius:var(--rs);padding:.3rem .75rem;color:var(--tx2);font-family:var(--font-display);letter-spacing:.02em}
.tb-tag span{color:var(--am);font-weight:700}

/* ── LIGHT MODE TOPBAR OVERRIDES ── */
[data-theme="light"] .tb {
  background: rgba(255,255,255,0.95) !important;
  border-bottom-color: #c4ccdc !important;
}
[data-theme="light"] .tb-t {
  color: #1a1a2e !important;
}
[data-theme="light"] .tb-m {
  color: #3d4f6e !important;
}
[data-theme="light"] .tb-tag {
  background: #e8ecf4 !important;
  color: #1a2840 !important;
  border-color: #c4ccdc !important;
}
[data-theme="light"] .tb-tag span {
  color: #b87200 !important;
}
/* NOTIF */
.notif-wrap{position:relative}
.nbell{background:var(--sf2);border:1px solid var(--bd);border-radius:var(--rs);padding:.3rem .52rem;cursor:pointer;display:flex;align-items:center;color:var(--tx2);transition:.12s;position:relative}
.nbell:hover{border-color:var(--am);color:var(--am)}
.nbell svg{width:15px;height:15px}
.npip{position:absolute;top:3px;right:3px;width:7px;height:7px;background:var(--rd);border-radius:50%;border:2px solid var(--sf);display:none}
.npip.on{display:block}
.npanel{position:absolute;top:calc(100% + 8px);right:0;width:320px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);box-shadow:0 8px 30px rgba(0,0,0,.5);z-index:200;display:none}
.npanel.open{display:block}
.npanel-hd{padding:.65rem 1rem;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.npanel-hd span{font-size:.75rem;font-weight:600;color:var(--tx)}
.npanel-hd button{font-size:.65rem;color:var(--tx3);background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif}
.npanel-hd button:hover{color:var(--am)}
.nitem{padding:.6rem 1rem;border-bottom:1px solid var(--bd);cursor:pointer;transition:.1s;display:flex;gap:8px}
.nitem:last-child{border-bottom:none}
.nitem:hover{background:var(--sf2)}
.nitem.unread{border-left:3px solid var(--am);padding-left:calc(1rem - 3px)}
.nitem.read{border-left:3px solid transparent;padding-left:calc(1rem - 3px);opacity:.6}
.ndot{width:6px;height:6px;border-radius:50%;background:var(--am);flex-shrink:0;margin-top:5px}
.ndot.read{background:transparent}
.nmsg{font-size:.77rem;color:var(--tx);line-height:1.4}
.nts{font-size:.63rem;color:var(--tx3);margin-top:2px}
.n-empty{padding:1.5rem;text-align:center;color:var(--tx3);font-size:.78rem}

/* CONTENT */
.ca{flex:1;overflow-y:auto;padding:1.4rem}
.screen{display:none}.screen.act{display:block;animation:screen-in .25s cubic-bezier(.16,1,.3,1) both}
@keyframes screen-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* STATS */
.srow{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.4rem}
.sc{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:1.1rem 1.2rem;position:relative;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--am),transparent);opacity:0;transition:opacity .2s}
.sc:hover{border-color:var(--bd2);box-shadow:0 4px 20px rgba(0,0,0,.3)}
.sc:hover::before{opacity:1}
.sc-l{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);margin-bottom:6px;font-family:var(--font-display);font-weight:600}
.sc-v{font-size:1.75rem;font-weight:700;color:var(--tx);line-height:1;font-family:var(--font-display)}
.sc-s{font-size:.65rem;color:var(--tx3);margin-top:4px}

/* CARDS */
.crd{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;margin-bottom:1rem;transition:border-color .2s}
.crd-hd{padding:.85rem 1.1rem;border-bottom:1px solid var(--bd);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--tx2);display:flex;align-items:center;justify-content:space-between;gap:7px;font-family:var(--font-display)}
.crd-hd-l{display:flex;align-items:center;gap:7px}
.crd-hd svg{width:13px;height:13px;flex-shrink:0}

/* BADGES */
.badge{display:inline-flex;align-items:center;font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:20px}
.b-am{background:var(--am-bg);color:var(--am);border:1px solid var(--am-b)}
.b-gn{background:var(--gn-bg);color:var(--gn);border:1px solid var(--gn-b)}
.b-rd{background:var(--rd-bg);color:var(--rd);border:1px solid var(--rd-b)}
.b-bl{background:var(--bl-bg);color:var(--bl);border:1px solid var(--bl-b)}
.b-gy{background:var(--sf3);color:var(--tx2);border:1px solid var(--bd)}

/* BUTTONS */
.btn{padding:.45rem .9rem;border:1px solid var(--bd2);border-radius:var(--rs);font-family:var(--font-body);font-size:.77rem;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;letter-spacing:.02em}
.btn svg{width:13px;height:13px;flex-shrink:0}
.btn-am{background:var(--am);border-color:var(--am);color:#000}.btn-am:hover{background:#e09500}
.btn-gy{background:transparent;color:var(--tx2);border-color:var(--bd2)}.btn-gy:hover{background:var(--sf2);color:var(--tx)}
.btn-gn{background:var(--gn-bg);border-color:var(--gn);color:var(--gn)}.btn-gn:hover{background:var(--gn);color:#fff}
.btn-rd{background:var(--rd-bg);border-color:var(--rd);color:var(--rd)}.btn-rd:hover{background:var(--rd);color:#fff}
.btn-bl{background:var(--bl-bg);border-color:var(--bl);color:var(--bl)}.btn-bl:hover{background:var(--bl);color:#fff}
.btn-sm{padding:.3rem .65rem;font-size:.72rem}
.btn-print{background:var(--sf2);border-color:var(--bd2);color:var(--tx2)}.btn-print:hover{border-color:var(--tx2);color:var(--tx)}

/* ALERTS */
.ua{padding:.6rem .85rem;border-radius:var(--rs);font-size:.77rem;margin-bottom:.85rem;display:flex;align-items:flex-start;gap:8px;line-height:1.45}
.ua svg{width:13px;height:13px;flex-shrink:0;margin-top:2px}
.ua-am{background:var(--am-bg);border:1px solid var(--am-b);color:#c88000}
.ua-gn{background:var(--gn-bg);border:1px solid var(--gn-b);color:var(--gn)}
.ua-bl{background:var(--bl-bg);border:1px solid var(--bl-b);color:var(--bl)}
.ok-bar{display:flex;align-items:center;gap:8px;padding:.5rem .85rem;background:var(--gn-bg);border:1px solid var(--gn-b);border-radius:var(--rs);color:var(--gn);font-size:.77rem;font-weight:600}

/* FORMS */
.fg{margin-bottom:.8rem}
.fg label{display:block;font-size:.67rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--tx2);margin-bottom:5px}
.fg input,.fg select,.fg textarea{width:100%;background:var(--sf2);border:1px solid var(--bd2);border-radius:var(--rs);padding:.5rem .75rem;color:var(--tx);font-family:var(--font-body);font-size:.84rem;outline:none;transition:all .15s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--am);box-shadow:0 0 0 3px var(--am-bg)}
.fg select option{background:var(--sf2)}
.fg textarea{resize:vertical;min-height:58px;line-height:1.5}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem}

/* TABLES */
.mono{font-family:'Courier New',monospace;font-size:.78rem;color:var(--tx2)}
.tag{font-size:.6rem;background:var(--sf3);border:1px solid var(--bd);color:var(--tx2);padding:1px 7px;border-radius:3px;font-weight:600}
.tbl-row{display:grid;gap:10px;padding:.62rem 1rem;border-bottom:1px solid var(--bd);font-size:.8rem;align-items:center;transition:.1s}
.tbl-row:last-child{border-bottom:none}
.tbl-row:hover{background:var(--sf2)}
.tbl-row.clickable{cursor:pointer}
.tbl-hd{display:grid;gap:10px;padding:.5rem 1rem;background:var(--sf2)}
.tbl-hd span{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);font-weight:600}
.jobs-cols{grid-template-columns:90px 1fr 90px 120px 90px 110px}

/* PROGRESS */
.prog-w{background:var(--sf3);border-radius:3px;height:4px;overflow:hidden;margin-top:4px}
.prog-b{height:100%;background:var(--am);border-radius:3px;transition:width .4s}

/* JOB DETAIL */
.jd-hdr{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:1.1rem 1.25rem;margin-bottom:1rem;display:flex;align-items:flex-start;gap:1rem}
.jd-wo{font-family:'Courier New',monospace;font-size:1.1rem;font-weight:600;color:var(--am)}
.jd-lay{display:grid;grid-template-columns:1fr 320px;gap:1rem}

/* PIPELINE */
.pipe-step{display:flex;align-items:flex-start;gap:10px;padding:.55rem .75rem;border-radius:var(--rs);margin-bottom:2px}
.pipe-step:hover{background:var(--sf2)}
.pipe-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--bd2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.55rem;font-weight:700;margin-top:1px}
.pipe-dot.done{background:var(--gn);border-color:var(--gn);color:#fff}
.pipe-dot.active{background:var(--am);border-color:var(--am);color:#000;animation:pulse 2s ease-in-out infinite}
.pipe-dot.pending{border-color:var(--bd2);color:var(--tx3)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--am-bg)}50%{box-shadow:0 0 0 5px transparent}}
.pipe-info{flex:1;min-width:0}
.pipe-lbl{font-size:.8rem;font-weight:500}
.pipe-lbl.done{color:var(--tx2)}.pipe-lbl.active{color:var(--tx);font-weight:600}.pipe-lbl.pending{color:var(--tx3)}
.pipe-date{font-size:.67rem;color:var(--tx3);margin-top:1px}
.pipe-actions{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}

/* DOCUMENT CARDS (in job detail) */
.doc-card{background:var(--sf2);border:1px solid var(--bd);border-radius:var(--rs);padding:.75rem 1rem;margin-bottom:.6rem}
.doc-card-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.doc-card-icon{width:28px;height:28px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.8rem}
.doc-card-icon.generated{background:var(--bl-bg);border:1px solid var(--bl-b);color:var(--bl)}
.doc-card-icon.uploaded{background:var(--gn-bg);border:1px solid var(--gn-b);color:var(--gn)}
.doc-card-icon.pending{background:var(--sf3);border:1px solid var(--bd);color:var(--tx3)}
.doc-card-name{font-size:.82rem;font-weight:600;color:var(--tx);flex:1}
.doc-card-btns{display:flex;gap:5px;flex-wrap:wrap}

/* SCAN UPLOAD */
.scan-done{background:var(--gn-bg);border:1px solid var(--gn-b);border-radius:var(--rs);padding:.4rem .7rem;font-size:.72rem;color:var(--gn);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.scan-done strong{font-size:.72rem}
.scan-upload-label{display:inline-flex;align-items:center;gap:5px;padding:.3rem .65rem;background:transparent;border:1px solid var(--am-b);border-radius:var(--rs);color:var(--am);font-size:.72rem;font-weight:600;cursor:pointer;transition:.12s}
.scan-upload-label:hover{background:var(--am-bg)}

/* MODALS */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:100;align-items:center;justify-content:center}
.overlay.open{display:flex}
.modal{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:1.75rem;width:460px;max-height:90vh;overflow-y:auto}
.modal h3{font-size:.95rem;font-weight:600;color:var(--tx);margin-bottom:.25rem}
.modal p{font-size:.78rem;color:var(--tx2);margin-bottom:1.25rem}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:1.25rem;padding-top:.85rem;border-top:1px solid var(--bd)}

/* TOAST */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;z-index:300;padding:.6rem 1rem;border-radius:var(--r);font-size:.78rem;display:flex;align-items:center;gap:8px;box-shadow:0 4px 20px rgba(0,0,0,.4);animation:slu .2s ease;max-width:380px}
.toast svg{width:14px;height:14px;flex-shrink:0}
.toast-gn{background:#071a10;border:1px solid var(--gn-b);color:var(--gn);backdrop-filter:blur(8px)}
.toast-rd{background:#1a0707;border:1px solid var(--rd-b);color:var(--rd);backdrop-filter:blur(8px)}
.toast-am{background:#1a1000;border:1px solid var(--am-b);color:var(--am);backdrop-filter:blur(8px)}
@keyframes slu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* PAPER DOCS */
.paper{background:#fff;color:#000;font-family:Arial,sans-serif;font-size:9pt;padding:22px;border:1px solid #bbb;line-height:1.45}
.paper *{box-sizing:border-box}
.paper hr{border:none;border-top:1.5px solid #000;margin:6px 0}
.lh-t{width:100%;border-collapse:collapse;margin-bottom:7px}
.lh-t td{vertical-align:top;padding:1px 3px;font-size:9pt}
.lh-bpc{font-size:11pt;font-weight:bold}
.lh-addr{font-size:8.5pt;color:#222}
.lh-title{font-size:11pt;font-weight:bold;text-align:right}
.p-grey{background:#d9d9d9;padding:2px 6px;font-weight:bold;font-size:9pt;display:block;margin:7px 0 3px}
.hdt{width:100%;border-collapse:collapse;margin-bottom:4px}
.hdt td{padding:2px 5px;font-size:8.5pt;vertical-align:top}
.hdt .lbl{font-weight:bold;white-space:nowrap;width:160px}
.ef{display:inline-block;border:none;border-bottom:1px solid #aaa;background:transparent;font-family:Arial,sans-serif;font-size:8.5pt;color:#000;padding:0 2px;outline:none;min-width:60px}
.ef:focus{border-bottom-color:#0055cc;background:#fffce8}
.ef-b{color:#000}
.ef-c{color:#555;background:#f8f8f8;pointer-events:none;border-bottom:1px dotted #bbb}
.boq{width:100%;border-collapse:collapse;font-size:8.5pt;margin:4px 0}
.boq th{background:#d9d9d9;border:1px solid #999;padding:4px 5px;font-weight:bold;text-align:left;font-size:8pt}
.boq td{border:1px solid #bbb;padding:3px 5px;vertical-align:middle}
.boq td.r,.boq th.r{text-align:right}
.boq td.c,.boq th.c{text-align:center}
.boq .sr td{background:#f0f0f0;font-weight:bold;border-top:1.5px solid #999}
.boq .tr td{background:#d9d9d9;font-weight:bold;border-top:2px solid #000}
.boq .lrow td{background:#fffbe8}
/* sig area — blank lines for hand signing */
.sig-area{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:14px}
.sig-area-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;margin-top:14px}
.sig-box{border-top:1px solid #000;padding-top:4px}
.sig-lbl{font-size:8pt;font-weight:bold;margin-bottom:18px}
.sig-line{border-bottom:1px solid #aaa;margin-bottom:3px;height:22px}
.sig-sub{font-size:7.5pt;color:#666}
/* payment cert */
.pc-row{display:flex;padding:3px 5px;border-bottom:1px solid #e8e8e8;font-size:8.5pt}
.pc-row .n{width:25px;flex-shrink:0}
.pc-row .d{flex:1}
.pc-row .c{width:20px;text-align:right;flex-shrink:0}
.pc-row .v{width:95px;text-align:right;font-weight:bold;flex-shrink:0}
.pc-row.sub{background:#f0f0f0;font-weight:bold;border:none;border-top:1.5px solid #999;margin-top:2px}
.pc-row.fin{background:#d9d9d9;font-weight:bold;border:none;border-top:2px solid #000;margin-top:4px;font-size:9pt}
.pc-row.ded .v{color:#cc0000}
.pc-sec{background:#d9d9d9;font-weight:bold;padding:3px 5px;font-size:9pt;display:block;margin:5px 0 2px}
/* jobs table */
.jt{width:100%;border-collapse:collapse;font-size:7.5pt}
.jt th{background:#d9d9d9;border:1px solid #999;padding:3px 4px;font-weight:bold;text-align:center;font-size:7pt}
.jt td{border:1px solid #bbb;padding:3px 4px}
.jt .tot td{background:#f0f0f0;font-weight:bold;border-top:1.5px solid #999}
/* autocomplete */
.ac-wrap{position:relative;width:100%}
.ac-in{width:100%;border:none;border-bottom:1px solid #aaa;background:transparent;font-family:Arial,sans-serif;font-size:8.5pt;color:#000;padding:0 2px;outline:none}
.ac-in:focus{border-bottom-color:#0055cc;background:#fffce8}
.ac-dd{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #bbb;border-top:none;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:999;max-height:220px;overflow-y:auto;border-radius:0 0 4px 4px}
.ac-it{padding:5px 8px;cursor:pointer;border-bottom:1px solid #f0f0f0;font-family:Arial,sans-serif;font-size:8pt}
.ac-it:last-child{border-bottom:none}
.ac-it:hover{background:#fffce8}
.ac-desc{font-weight:600;color:#111;line-height:1.3}
.ac-meta{display:flex;gap:10px;margin-top:2px;font-size:7.5pt;color:#666}
.ac-rate{color:#0a5c2e;font-weight:600}
.ac-cat{background:#e8f0ff;color:#2a5aa0;padding:1px 5px;border-radius:2px;font-size:7pt;font-weight:600}
.ac-empty{padding:8px;font-size:8pt;color:#999;font-family:Arial,sans-serif;text-align:center}

@media print{
  body{background:#fff}
  .shell,.sb,.tb,.ca,.overlay{display:none!important}
  #printArea{display:block!important;padding:0}
  .paper{border:none;padding:15px}
  .ef-b{border-bottom:1px solid #000}
  .ef-c{background:none}
  .sig-line{border-bottom:1px solid #000}
}
#printArea{display:none}
/* ============================================================
   UI REFRESH (appended) — login role cards, hero polish,
   horizontal workflow pipeline. Visual only; no logic depends
   on these rules. Original pipe-step classes are restyled in
   place so the existing render code is untouched.
   ============================================================ */

/* ---- Login: role cards ---- */
.lc-divider{display:flex;align-items:center;gap:12px;margin:1.4rem 0 1.3rem}
.lc-divider::before,.lc-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--bd),transparent)}
.lc-divider span{font-size:.62rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.13em;white-space:nowrap}

.lc-roles{display:flex;flex-direction:column;gap:10px}
.role-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--sf2);border:1px solid var(--bd);border-radius:var(--rs);
  padding:.9rem 1rem;cursor:pointer;transition:transform .16s,border-color .16s,background .16s;color:var(--tx)}
.role-card:hover{border-color:var(--am);background:var(--am-bg);transform:translateX(4px)}
.role-card:focus-visible{outline:2px solid var(--am);outline-offset:2px}
.role-ico{width:40px;height:40px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;background:var(--am-bg);border:1px solid var(--am-b);color:var(--am)}
.role-ico svg{width:20px;height:20px}
.role-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.role-name{font-size:.95rem;font-weight:700;font-family:var(--font-display);color:var(--tx)}
.role-desc{font-size:.72rem;color:var(--tx3);line-height:1.35}
.role-cta{font-size:.72rem;color:var(--am);font-weight:600;flex-shrink:0;opacity:0;transition:opacity .16s;white-space:nowrap}
.role-card:hover .role-cta{opacity:1}
.lc-foot{text-align:center;font-size:.68rem;color:var(--tx3);margin-top:1.5rem;letter-spacing:.03em}
[data-theme="light"] .role-card{color:#1a1a2e}
[data-theme="light"] .role-name{color:#1a1a2e}
[data-theme="light"] .role-desc{color:#4a5a7a}

/* ---- Login hero: richer animated backdrop ---- */
#loginScreen{position:relative;overflow:hidden}
#loginScreen::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(ellipse 70% 55% at 18% 45%,var(--am-bg) 0%,transparent 60%),
  radial-gradient(ellipse 55% 70% at 82% 28%,rgba(61,142,240,.07) 0%,transparent 60%),
  radial-gradient(ellipse 40% 40% at 60% 100%,rgba(29,184,122,.05) 0%,transparent 60%)}
#loginScreen::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--am-bg) 1px,transparent 1px),linear-gradient(90deg,var(--am-bg) 1px,transparent 1px);
  background-size:46px 46px;opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,#000 25%,transparent 100%);
          mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,#000 25%,transparent 100%)}
.lc{position:relative;z-index:2}
.login-bg-lines{position:relative;z-index:1}
.lc-logo svg{filter:drop-shadow(0 0 14px rgba(240,165,0,.45))}

/* ============================================================
   WORKFLOW PIPELINE — horizontal stepped timeline
   (restyles existing .pipe-step / .pipe-dot / .pipe-info)
   ============================================================ */
#jdPipeline{display:flex;gap:0;overflow-x:auto;padding:1.4rem 1rem 1rem!important;scrollbar-width:thin}
#jdPipeline::-webkit-scrollbar{height:6px}

#jdPipeline .pipe-step{flex-direction:column;align-items:center;text-align:center;
  min-width:150px;flex:1;padding:0 6px;margin-bottom:0;position:relative;background:none}
#jdPipeline .pipe-step:hover{background:none}
/* connector line linking the dots */
#jdPipeline .pipe-step:not(:last-child)::after{content:'';position:absolute;top:15px;
  left:calc(50% + 17px);right:calc(-50% + 17px);height:2px;background:var(--bd2);z-index:0}

#jdPipeline .pipe-dot{width:32px;height:32px;font-size:.72rem;margin-top:0;z-index:1;
  background:var(--sf);position:relative;transition:transform .2s}
#jdPipeline .pipe-step:hover .pipe-dot{transform:scale(1.08)}
/* colour the connector once the step is done (dot has .done) */
#jdPipeline .pipe-step:has(.pipe-dot.done):not(:last-child)::after{background:var(--gn)}

#jdPipeline .pipe-info{flex:none;width:100%;margin-top:9px}
#jdPipeline .pipe-lbl{font-size:.7rem;line-height:1.3;max-width:140px;margin:0 auto}
#jdPipeline .pipe-date{font-size:.6rem}
#jdPipeline .pipe-actions{justify-content:center;margin-top:8px}

/* Active step gets a soft highlight card behind label + actions */
#jdPipeline .pipe-step:has(.pipe-dot.active) .pipe-info{
  background:var(--am-bg);border:1px solid var(--am-b);border-radius:var(--rs);padding:.6rem .5rem}

/* Stack vertically on narrow screens (restore a clean column flow) */
@media(max-width:820px){
  #jdPipeline{flex-direction:column;align-items:stretch;gap:0}
  #jdPipeline .pipe-step{flex-direction:row;align-items:flex-start;text-align:left;min-width:0;
    gap:12px;padding:.45rem 0}
  #jdPipeline .pipe-step:not(:last-child)::after{top:32px;bottom:-4px;left:15px;right:auto;
    width:2px;height:auto}
  #jdPipeline .pipe-info{margin-top:0;width:auto;flex:1}
  #jdPipeline .pipe-lbl{max-width:none;margin:0;font-size:.82rem}
  #jdPipeline .pipe-actions{justify-content:flex-start}
  #jdPipeline .pipe-step:has(.pipe-dot.active) .pipe-info{padding:.5rem .7rem}
}

/* ============================================================
   BUSINESS UI v2 (appended) — split-screen login with hero
   slideshow + dashboard hero banners. Presentational only.
   ============================================================ */

/* ---------- LOGIN: split screen ---------- */
#loginScreen{padding:0;min-height:100vh;display:block;background:var(--bg)}
/* Neutralize the older single-card login backdrop overlays */
#loginScreen::before,#loginScreen::after{display:none!important;content:none!important}
.login-split{display:grid;grid-template-columns:1.05fr .95fr;width:100%;height:100vh}

/* Left hero panel */
.login-hero{position:relative;overflow:hidden;height:100vh;display:flex;align-items:stretch}
.login-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.login-hero-bg svg{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.login-hero-bg .hwire{stroke-dasharray:7 5;animation:lhflow 4s linear infinite}
@keyframes lhflow{to{stroke-dashoffset:-24}}
.login-hero-content{position:relative;z-index:1;display:flex;flex-direction:column;
  justify-content:space-between;padding:3rem 3.2rem;width:100%}
.login-hero-brand{display:flex;align-items:center;gap:14px}
.login-hero-brand .lc-logo{width:46px;height:46px;flex-shrink:0}
.login-hero-brand .lc-logo svg{width:46px;height:46px;filter:drop-shadow(0 0 14px rgba(240,165,0,.5))}
.login-hero-name{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:#fff;letter-spacing:-.01em}
.login-hero-loc{font-size:.7rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.16em;margin-top:2px}

.login-slideshow{position:relative;margin:auto 0}
.login-slide{display:none;animation:lsfade .7s ease both}
.login-slide.active{display:block}
@keyframes lsfade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.login-slide h2{font-family:var(--font-display);font-weight:800;font-size:2.1rem;line-height:1.15;
  color:#fff;letter-spacing:-.02em;max-width:15ch}
.login-slide p{font-size:1rem;color:rgba(255,255,255,.7);margin-top:1rem;line-height:1.6;max-width:42ch}
.login-dots{display:flex;gap:8px;margin-top:2rem}
.login-dot{width:28px;height:4px;border-radius:2px;background:rgba(255,255,255,.2);cursor:pointer;transition:background .3s}
.login-dot.active{background:var(--am)}

.login-hero-foot{display:flex;gap:2.5rem}
.login-stat{display:flex;flex-direction:column}
.login-stat strong{font-family:var(--font-display);font-size:1.5rem;color:var(--am);font-weight:800;line-height:1}
.login-stat span{font-size:.68rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.1em;margin-top:4px}

/* Right form panel */
.login-form-wrap{background:var(--bg);display:flex;align-items:center;justify-content:center;
  padding:2rem;height:100vh;overflow-y:auto}
.login-form{width:100%;max-width:380px}
.login-form-head h1{font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:var(--tx);letter-spacing:-.02em}
.login-form-head p{font-size:.85rem;color:var(--tx2);margin-top:6px;margin-bottom:2rem}
.lf-label{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--tx2);margin-bottom:7px;margin-top:1.05rem}
.lf-select-wrap select{width:100%;background:var(--sf2);border:1.5px solid var(--bd2);border-radius:var(--rs);
  padding:.7rem .85rem;color:var(--tx);font-family:var(--font-body);font-size:.9rem;outline:none;
  cursor:pointer;transition:border-color .15s,box-shadow .15s;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a9ab8' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.2rem}
.lf-select-wrap select:focus{border-color:var(--am);box-shadow:0 0 0 3px var(--am-bg)}
.lf-input-wrap{position:relative;display:flex;align-items:center}
.lf-ico{position:absolute;left:.8rem;width:16px;height:16px;color:var(--tx3);pointer-events:none}
.lf-input-wrap input{width:100%;background:var(--sf2);border:1.5px solid var(--bd2);border-radius:var(--rs);
  padding:.7rem .85rem .7rem 2.4rem;color:var(--tx);font-family:var(--font-body);font-size:.9rem;
  outline:none;transition:border-color .15s,box-shadow .15s}
.lf-input-wrap input:focus{border-color:var(--am);box-shadow:0 0 0 3px var(--am-bg)}
.lf-hint{font-size:.72rem;color:var(--tx3);margin-top:.6rem;background:var(--am-bg);border:1px solid var(--am-b);
  border-radius:var(--rs);padding:.5rem .7rem;line-height:1.45}
.lf-btn{width:100%;margin-top:1.4rem;padding:.85rem;background:var(--am);color:#0a0f1c;border:none;
  border-radius:var(--rs);font-family:var(--font-display);font-weight:700;font-size:.92rem;cursor:pointer;
  transition:filter .15s,transform .1s,box-shadow .15s;letter-spacing:.01em}
.lf-btn:hover{filter:brightness(1.07);box-shadow:0 8px 22px rgba(240,165,0,.32)}
.lf-btn:active{transform:translateY(1px)}
.lf-quick{display:flex;align-items:center;gap:8px;margin-top:1.5rem;flex-wrap:wrap}
.lf-quick span{font-size:.72rem;color:var(--tx3)}
.lf-quick button{background:var(--sf2);border:1px solid var(--bd);border-radius:20px;padding:.3rem .8rem;
  font-size:.74rem;color:var(--tx2);cursor:pointer;transition:all .15s;font-family:var(--font-body)}
.lf-quick button:hover{border-color:var(--am);color:var(--am);background:var(--am-bg)}
.login-form-foot{font-size:.7rem;color:var(--tx3);text-align:center;margin-top:2.2rem}

@media(max-width:880px){
  .login-split{grid-template-columns:1fr}
  .login-hero{display:none}
  .login-form-wrap{min-height:100vh}
}

/* ---------- DASHBOARD HERO BANNERS ---------- */
.hero{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:1.25rem;
  min-height:150px;display:flex;align-items:center;border:1px solid var(--bd)}
.hero-scene{position:absolute;inset:0;z-index:0}
.hero-scene svg{width:100%;height:100%;display:block}
.hero-scene .hwire{stroke-dasharray:6 4;animation:lhflow 4s linear infinite}
.hero-copy{position:relative;z-index:1;padding:1.6rem 1.9rem;max-width:62%}
.hero-eyebrow{display:inline-block;font-family:var(--font-display);font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--am);background:rgba(240,165,0,.12);
  border:1px solid var(--am-b);border-radius:20px;padding:.25rem .75rem;margin-bottom:.7rem}
.hero-title{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:#fff;
  letter-spacing:-.02em;line-height:1.1}
.hero-sub{font-size:.84rem;color:rgba(255,255,255,.72);margin-top:.5rem;line-height:1.5;max-width:46ch}
.hero-finance .hero-eyebrow{color:#1db87a;background:rgba(29,184,122,.12);border-color:var(--gn-b)}
.hero-md .hero-eyebrow{color:#3d8ef0;background:rgba(61,142,240,.12);border-color:var(--bl-b)}
/* keep hero text light even in light theme (banners are dark scenes) */
[data-theme="light"] .hero-title{color:#fff}
[data-theme="light"] .hero-sub{color:rgba(255,255,255,.8)}
@media(max-width:680px){
  .hero-copy{max-width:100%}
  .hero-title{font-size:1.2rem}
  .hero-sub{display:none}
}

/* ============================================================
   INTER + CARD SYSTEM — copied from approved preview
   ============================================================ */
:root{--font-display:'Inter',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif}
body,button,input,select,textarea{font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}

/* Work order cards */
.cd-card{background:var(--sf);border:1px solid var(--bd);border-left:3px solid var(--ca,var(--bd));border-radius:14px;padding:18px 20px;cursor:pointer;display:flex;align-items:center;gap:16px;transition:border-color .15s,box-shadow .15s,transform .12s;margin-bottom:10px;position:relative;overflow:hidden}
.cd-card:last-child{margin-bottom:0}
.cd-card:hover{border-color:var(--ca);box-shadow:0 4px 20px rgba(0,0,0,.15);transform:translateX(3px)}
.cd-card-body{flex:1;min-width:0}
.cd-card-wo{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);margin-bottom:4px}
.cd-card-name{font-size:15px;font-weight:600;color:var(--tx);line-height:1.3}
.cd-card-loc{font-size:12px;color:var(--tx3);margin-top:3px}
.cd-card-stage{display:inline-block;font-size:11px;font-weight:500;color:var(--tx2);background:var(--sf2);border-radius:6px;padding:3px 8px;margin-top:8px;border:1px solid var(--bd)}
.cd-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0;min-width:130px}
.cd-card-val{font-size:15px;font-weight:700;color:var(--tx);letter-spacing:-.01em}
.cd-card-prog{width:100%;display:flex;align-items:center;gap:8px}
.cd-card-bar{flex:1;height:4px;background:var(--bd);border-radius:2px;overflow:hidden}
.cd-card-fill{height:100%;border-radius:2px;transition:width .4s}
.cd-card-pct{font-size:10px;font-weight:600;color:var(--tx3);white-space:nowrap}
.cd-card-btn{height:28px;padding:0 13px;border-radius:8px;border:1px solid var(--bd2);background:var(--sf2);font-size:12px;font-weight:500;color:var(--tx2);cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;white-space:nowrap}
.cd-card:hover .cd-card-btn{background:var(--ca-bg,var(--sf2));border-color:var(--ca);color:var(--ca)}

/* Doc pills */
.cd-dp-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.cd-dp{height:22px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:4px;border:none;cursor:pointer;font-family:'Inter',sans-serif}
.cd-dp-gn{background:var(--gn-bg);color:var(--gn)}
.cd-dp-bl{background:var(--bl-bg);color:var(--bl)}
.cd-dp-gy{background:var(--sf2);color:var(--tx2);border:1px solid var(--bd)}
.cd-dp-off{background:transparent;color:var(--tx3);border:1px solid var(--bd);opacity:.4;cursor:default}

/* Status cards — 2×2 grid with unique gradients */
.cd-sc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:16px 16px 8px}
.cd-sc{border-radius:16px;padding:22px 20px;cursor:pointer;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s}
.cd-sc:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.cd-sc-green{background:linear-gradient(145deg,#0a4a28 0%,#1a8a56 100%)}
.cd-sc-amber{background:linear-gradient(145deg,#6b3600 0%,#c47000 100%)}
.cd-sc-blue{background:linear-gradient(145deg,#0a2560 0%,#1a50b0 100%)}
.cd-sc-slate{background:linear-gradient(145deg,#18222e 0%,#2e4055 100%)}
.cd-sc-arrow{position:absolute;top:16px;right:18px;font-size:14px;color:rgba(255,255,255,.25);transition:color .18s,transform .18s}
.cd-sc:hover .cd-sc-arrow{color:rgba(255,255,255,.65);transform:translate(2px,-2px)}
.cd-sc-badge{display:inline-flex;height:20px;padding:0 9px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.04em;align-items:center;background:rgba(255,255,255,.18);color:#fff;margin-bottom:4px}
.cd-sc-num{font-size:52px;font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff;margin:10px 0 6px}
.cd-sc-lbl{font-size:14px;font-weight:600;color:#fff}
.cd-sc-sub{font-size:11px;color:rgba(255,255,255,.6);margin-top:3px;line-height:1.4}
.cd-sc-track{height:3px;border-radius:3px;background:rgba(255,255,255,.15);margin-top:16px;overflow:hidden}
.cd-sc-track i{display:block;height:100%;border-radius:3px;background:rgba(255,255,255,.55)}

/* Expand panels */
.cd-panel{background:var(--sf);border:1px solid var(--bd);border-radius:14px;margin:12px 16px 0;overflow:hidden}
.cd-panel-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--bd);font-size:14px;font-weight:600;color:var(--tx)}
.cd-panel-hd button{background:transparent;border:1px solid var(--bd);border-radius:8px;padding:4px 12px;font-size:12px;font-weight:500;color:var(--tx2);cursor:pointer;font-family:'Inter',sans-serif;transition:.12s}
.cd-panel-hd button:hover{border-color:var(--rd);color:var(--rd);background:var(--rd-bg)}
.cd-empty{padding:2rem;text-align:center;color:var(--tx3);font-size:.85rem}

/* Light mode */
[data-theme="light"] .cd-card{background:#fff;border-color:#e2e8f0}
[data-theme="light"] .cd-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.10)}
[data-theme="light"] .cd-card-wo{color:#64748b}
[data-theme="light"] .cd-card-name{color:#0f172a}
[data-theme="light"] .cd-card-loc{color:#475569}
[data-theme="light"] .cd-card-val{color:#0f172a}
[data-theme="light"] .cd-card-stage{background:#f1f5f9;color:#334155;border-color:#e2e8f0}
[data-theme="light"] .cd-card-pct{color:#475569}
[data-theme="light"] .cd-card-btn{color:#334155;background:#f1f5f9;border-color:#cbd5e1}
[data-theme="light"] .cd-panel{background:#fff;border-color:#e2e8f0}
[data-theme="light"] .cd-panel-hd{color:#0f172a;border-color:#e2e8f0}
[data-theme="light"] .cd-empty{color:#475569}
[data-theme="light"] .sc-v{color:#0f172a!important}
[data-theme="light"] .sc-l{color:#475569!important}
[data-theme="light"] .sc-s{color:#64748b!important}
[data-theme="light"] .crd-hd{color:#0f172a!important}
[data-theme="light"] .tb-t{color:#0f172a!important}
[data-theme="light"] .tb-m{color:#475569!important}
[data-theme="light"] .tx2-el{color:#334155!important}

@media(max-width:820px){.cd-sc-grid{grid-template-columns:1fr}.cd-sc-num{font-size:36px}}