:root{
  --bg:#EDEFF1; --surface:#FFFFFF; --surface2:#F5F7F8; --surface3:#E7EBEE;
  --line:#D7DDE2; --line2:#C3CCD3;
  --ink:#141B21; --ink2:#39454F; --muted:#63707B;
  --accent:#0F4C4A; --accent2:#0C6B66; --accent-soft:#DBEAE8; --on-accent:#F2FAF9;
  --ok:#15693F; --ok-soft:#DBEEE3;
  --bad:#A02C26; --bad-soft:#F5DEDC;
  --warn:#8C5A12; --warn-soft:#F4E7D2;
  --info:#27509B; --info-soft:#DCE5F5;
  --shadow:0 1px 2px rgba(17,29,38,.06),0 6px 18px -8px rgba(17,29,38,.18);
  --shadow-lg:0 20px 50px -20px rgba(17,29,38,.35);
  --r:10px; --r-sm:7px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1418; --surface:#181F25; --surface2:#1F282F; --surface3:#26313A;
    --line:#2C363E; --line2:#3A4650;
    --ink:#E7EEF2; --ink2:#BAC7D0; --muted:#8B99A4;
    --accent:#5FB8AF; --accent2:#7FCFC6; --accent-soft:#14322F; --on-accent:#07211F;
    --ok:#5CC48C; --ok-soft:#11301F;
    --bad:#EE8B81; --bad-soft:#38201D;
    --warn:#DFAE60; --warn-soft:#33260F;
    --info:#8DB2F0; --info-soft:#17233A;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px -8px rgba(0,0,0,.6);
    --shadow-lg:0 20px 50px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#0F1418; --surface:#181F25; --surface2:#1F282F; --surface3:#26313A;
  --line:#2C363E; --line2:#3A4650;
  --ink:#E7EEF2; --ink2:#BAC7D0; --muted:#8B99A4;
  --accent:#5FB8AF; --accent2:#7FCFC6; --accent-soft:#14322F; --on-accent:#07211F;
  --ok:#5CC48C; --ok-soft:#11301F;
  --bad:#EE8B81; --bad-soft:#38201D;
  --warn:#DFAE60; --warn-soft:#33260F;
  --info:#8DB2F0; --info-soft:#17233A;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px -8px rgba(0,0,0,.6);
  --shadow-lg:0 20px 50px -20px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:"Karla","Segoe UI",system-ui,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Archivo","Segoe UI",system-ui,sans-serif;margin:0;text-wrap:balance;letter-spacing:-.015em}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent2)}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;
  border-radius:var(--r-sm);font-weight:600;font-size:14px;background:var(--surface2);
  border:1px solid var(--line2);transition:.14s;text-decoration:none}
.btn:hover{background:var(--surface3)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent2)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface2);color:var(--ink)}
.btn.sm{padding:6px 11px;font-size:13px}
.btn[disabled]{opacity:.45;pointer-events:none}
.field{width:100%;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line2);
  background:var(--surface);color:var(--ink)}
select.field{padding:9px 10px;cursor:pointer}
.field:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px var(--accent-soft)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.lbl{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:700;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.info{background:var(--info-soft);color:var(--info)}
.pill.mut{background:var(--surface3);color:var(--muted)}
.pill.risk{background:var(--bad-soft);color:var(--bad)}
.pill.acc{background:var(--accent-soft);color:var(--accent)}
.row{display:flex;align-items:center;gap:10px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}

.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 90% at 100% 0%,var(--accent-soft) 0%,transparent 55%),var(--bg)}
.login{width:100%;max-width:392px;padding:30px 28px 26px;border-radius:14px}
.brandmark{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.brandmark .dot{width:34px;height:34px;border-radius:9px;background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-family:"Archivo";font-weight:700;font-size:15px;flex:none}
.brandmark h1{font-size:19px;font-weight:700}
.brandmark p{margin:1px 0 0;font-size:12px;color:var(--muted)}
.login .grp{margin-bottom:13px}
.login .grp .lbl{display:block;margin-bottom:5px}
.err{margin-top:12px;padding:9px 11px;border-radius:var(--r-sm);background:var(--bad-soft);
  color:var(--bad);font-size:13px;font-weight:600}
.hintbox{margin-top:20px;padding:11px 13px;border-radius:var(--r-sm);background:var(--surface2);
  border:1px solid var(--line);font-size:12.5px;color:var(--muted)}

.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh}
.side .brandmark{padding:18px 18px 0;margin-bottom:14px}
.nav{display:flex;flex-direction:column;gap:2px;padding:0 10px;flex:1;overflow:auto}
.nav .sec{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:13px 11px 5px}
.nav button{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;color:var(--ink2);text-align:left;width:100%}
.nav button .n{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);
  font-family:"IBM Plex Mono",monospace}
.nav button:hover{background:var(--surface2)}
.nav button.on{background:var(--accent-soft);color:var(--accent)}
.nav button.on .n{color:var(--accent)}
.nav button .alert{margin-left:auto;background:var(--bad);color:#fff;border-radius:999px;
  font-size:11px;font-weight:700;padding:1px 7px}
.side-foot{padding:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.who{font-size:12.5px;color:var(--muted);line-height:1.35}
.who b{display:block;color:var(--ink);font-size:14px}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:13px 26px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.topbar h2{font-size:20px;font-weight:700}
.topbar .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.datebar{margin-left:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.datebar+.datebar{margin-left:0}
.datebar .lbl{white-space:nowrap}
.content{padding:22px 26px 70px;max-width:1280px;width:100%}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:12px}
.stat{padding:15px 16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--stripe,var(--line2));box-shadow:var(--shadow)}
.stat .v{font-family:"Archivo";font-size:29px;font-weight:700;line-height:1.05;
  font-variant-numeric:tabular-nums;margin-top:7px}
.stat .d{font-size:12px;color:var(--muted);margin-top:4px}
.bar{height:7px;border-radius:99px;background:var(--surface3);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:9px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{text-align:left;padding:10px 12px;background:var(--surface2);border-bottom:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface2)}
td.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.tablewrap table.wide{min-width:1080px}
.addr{min-width:230px;max-width:320px;font-size:12.5px;color:var(--ink2);line-height:1.4}
.itm{min-width:200px;max-width:270px;font-size:12.5px;color:var(--ink2);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.search{position:relative;flex:1;min-width:190px;max-width:320px}
.search .field{padding-left:32px}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted)}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);
  font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap}
.chip .c{font-family:"IBM Plex Mono",monospace;font-size:12px;opacity:.7;margin-left:4px}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pager{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.pager .info{font-size:12.5px;color:var(--muted);font-family:"IBM Plex Mono",monospace}

.empgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.empsel{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--r);
  border:1px solid var(--line2);background:var(--surface);cursor:pointer;transition:.14s}
.empsel:hover{border-color:var(--accent2)}
.empsel.on{border-color:var(--accent);background:var(--accent-soft)}
.empsel input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.empsel .nm{font-weight:700;font-size:14px}
.empsel .un{font-size:12px;color:var(--muted);font-family:"IBM Plex Mono",monospace}
.empsel .load{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);font-family:"IBM Plex Mono",monospace}
.callout{padding:13px 15px;border-radius:var(--r);background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);font-size:13.5px;color:var(--ink2)}
.callout.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}

.podium{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:16px}
.pod{padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.pod .who2{font-family:"Archivo";font-size:19px;font-weight:700;margin-top:6px}
.pod .figs{display:flex;gap:16px;margin-top:11px;flex-wrap:wrap}
.pod .figs div{font-size:12px;color:var(--muted)}
.pod .figs b{display:block;font-family:"Archivo";font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums}
.pod.good{border-left:3px solid var(--ok)}
.pod.poor{border-left:3px solid var(--warn)}

.flagrow{padding:13px 15px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
  margin-bottom:10px;border-left:3px solid var(--stripe,var(--warn))}
.flagrow .ttl{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.flagrow ul{margin:9px 0 0;padding-left:18px;font-size:13px;color:var(--ink2)}
.flagrow li{margin-bottom:4px}
.sev{font-family:"Archivo";font-size:22px;font-weight:700;margin-left:auto;font-variant-numeric:tabular-nums}

.emp-shell{max-width:820px;margin:0 auto;padding:0 14px 100px}
.emp-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.emp-head .row{flex:1;min-width:180px}
.brand-dot{width:34px;height:34px;border-radius:8px;background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-family:"Archivo";font-weight:700;font-size:13px;flex:none}
.emp-name{font-family:"Archivo";font-weight:700;font-size:16px;line-height:1.1}
.emp-progress{font-size:12.5px;color:var(--muted);margin-top:2px}
.emp-progress b{color:var(--ink);font-variant-numeric:tabular-nums}
.emp-head .btn.primary{padding:8px 14px;font-size:14px}

.emp-stats-details{margin-top:8px;border-radius:var(--r-sm);background:var(--surface2);border:1px solid var(--line)}
.emp-stats-details summary{list-style:none;cursor:pointer;padding:8px 12px;display:flex;align-items:center;
  gap:10px;font-size:12.5px;user-select:none}
.emp-stats-details summary::-webkit-details-marker{display:none}
.emp-stats-details summary > span:first-child{font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;font-size:11px;flex:none}
.emp-stats-details summary .stat-line{flex:1;color:var(--ink2);font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emp-stats-details summary .stat-line b{font-variant-numeric:tabular-nums}
.emp-stats-details summary .chev{font-size:14px;color:var(--muted);transition:.2s}
.emp-stats-details[open] summary .chev{transform:rotate(180deg)}
.emp-stats-details[open] summary .stat-line{display:none}
.emp-stats-details > .myperf,.emp-stats-details > .row{padding:0 12px 12px}
.myperf.compact{margin-top:4px;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:6px}
.myperf.compact div{padding:6px 8px}
.myperf.compact b{font-size:16px}
.myperf.compact span{font-size:10.5px}

@media (max-width:520px){
  .emp-head .btn.primary{width:100%;order:3}
}

.emp-top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 93%,transparent);
  backdrop-filter:blur(8px);padding:12px 0 11px;border-bottom:1px solid var(--line);margin-bottom:14px}
.emp-top .datebar{margin-left:0;margin-top:10px}
.prog-line{display:flex;align-items:baseline;gap:8px;margin:9px 0 7px}
.prog-line .big{font-family:"Archivo";font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.prog-line .of{font-size:13px;color:var(--muted)}
.myperf{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;margin-top:10px}
.myperf div{padding:8px 10px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);text-align:center}
.myperf b{display:block;font-family:"Archivo";font-size:19px;font-variant-numeric:tabular-nums}
.myperf span{font-size:11px;color:var(--muted)}

.ocard{border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  margin-bottom:11px;overflow:hidden;border-left:3px solid var(--stripe,var(--line2))}
.ocard .hd{display:flex;align-items:center;gap:8px;padding:11px 14px 0;flex-wrap:wrap}
.ocard .ono{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600;color:var(--muted)}
.ocard .amt{margin-left:auto;font-family:"Archivo";font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.ocard .nm{font-family:"Archivo";font-size:17px;font-weight:600;padding:6px 14px 0}
.ocard .ph{display:flex;align-items:center;gap:9px;padding:8px 14px 0;flex-wrap:wrap}
.ocard .ph .num{font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:600;
  text-decoration:none;color:var(--ink)}
.ocard .ph .num:hover{color:var(--accent2)}
.ocard .meta{padding:9px 14px 0;font-size:13px;color:var(--ink2);line-height:1.45}
.ocard .meta .k{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:13px}
.acts button{padding:11px 4px;background:var(--surface2);font-size:12.5px;font-weight:700;color:var(--ink2);transition:.12s}
.acts button:hover{background:var(--surface3)}
.acts button.on.ok{background:var(--ok);color:#fff}
.acts button.on.bad{background:var(--bad);color:#fff}
.acts button.on.warn{background:var(--warn);color:#fff}
.acts button.on.info{background:var(--info);color:#fff}
.reasons{padding:11px 14px;border-top:1px solid var(--line);background:var(--bad-soft)}
.reasons .chips{margin-top:7px}
.reasons .chip{background:var(--surface);border-color:var(--line2)}
.notebox{padding:11px 14px;border-top:1px solid var(--line);background:var(--surface2)}
.notebox textarea{width:100%;min-height:52px;resize:vertical;padding:8px 10px;border-radius:var(--r-sm);
  border:1px solid var(--line2);background:var(--surface)}

.callmode{position:fixed;inset:0;z-index:80;background:var(--bg);overflow:auto;padding:20px}
.cm-inner{max-width:1180px;margin:0 auto}
.cm-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cm-pos{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--muted)}
.cm-card{padding:26px;border-radius:16px;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
.cm-left, .cm-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.cm-left .nm{font-family:"Archivo";font-size:32px;font-weight:700;margin-top:4px;line-height:1.15}
.cm-left .num{font-family:"IBM Plex Mono",monospace;font-size:38px;font-weight:600;
  display:block;margin:8px 0 4px;text-decoration:none;color:var(--ink);letter-spacing:.02em}
.cm-amt{margin-left:auto;font-family:Archivo;font-weight:700;font-size:24px}
.cm-info{padding:14px 16px;border-radius:12px;background:var(--surface2);border:1px solid var(--line)}
.cm-info .lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  font-weight:700;display:block;margin-bottom:6px}
.cm-info-body{font-size:16px;line-height:1.55;color:var(--ink)}
.cm-note{min-height:70px;font-size:14px}
@media (min-width:880px){
  .cm-card{grid-template-columns:1.15fr 1fr;gap:32px;padding:32px}
  .cm-left{gap:16px}
  .cm-left .nm{font-size:36px}
  .cm-left .num{font-size:42px}
  .cm-info-body{font-size:17px}
  .cm-amt{font-size:28px}
}
@media (min-width:1200px){
  .cm-card{grid-template-columns:1.2fr .95fr;gap:40px;padding:36px 40px}
  .cm-left .nm{font-size:40px}
  .cm-info-body{font-size:17.5px}
}
.cm-acts{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:18px}
.cm-acts button{padding:16px 10px;border-radius:var(--r);font-weight:700;font-size:15px;
  border:1px solid var(--line2);background:var(--surface2)}
.cm-acts button .kb{display:block;font-size:11px;font-weight:600;opacity:.6;margin-top:2px}
.cm-acts button.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.cm-acts button.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.cm-acts button.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.cm-acts button.info{background:var(--info-soft);color:var(--info);border-color:transparent}

/* Expanded call-mode outcomes: Confirmed / Call Back / NP 1-5 / Switch Off / Wrong Number / Cancelled */
.cm-actions{margin-top:6px;display:flex;flex-direction:column;gap:10px}
.cm-actions button{padding:11px 8px;border-radius:var(--r);font-weight:700;font-size:14px;
  border:1px solid var(--line2);background:var(--surface2);cursor:pointer;transition:transform .06s;
  line-height:1.15}
.cm-actions button:active{transform:scale(.97)}
.cm-actions button .kb{display:block;font-size:10.5px;font-weight:600;opacity:.55;margin-top:2px}
.cm-actions button.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.cm-actions button.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.cm-actions button.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.cm-actions button.info{background:var(--info-soft);color:var(--info);border-color:transparent}
.cm-row-primary{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cm-row-primary button{padding:13px 8px;font-size:15px}
.cm-group{padding:10px 12px;border-radius:10px;background:var(--surface2);border:1px solid var(--line)}
.cm-glbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  font-weight:700;margin-bottom:6px}
.cm-np{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.cm-np button{padding:9px 2px;font-size:12.5px}
.cm-other{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cm-row-cancel button.wide{width:100%;padding:12px 8px;font-size:14.5px}
.cm-reason{margin-top:6px;padding:14px;border-radius:10px;background:var(--surface2);
  border:1px solid var(--line)}
.cm-reason-chips{display:flex;flex-wrap:wrap;gap:7px}
.cm-reason-chips .chip{padding:9px 12px;font-size:13px;font-weight:600;cursor:pointer}
.cm-reason-chips .chip.skip{background:var(--line);color:var(--muted)}

.toast{position:fixed;right:16px;bottom:16px;z-index:90;padding:9px 15px;border-radius:999px;
  font-size:12.5px;font-weight:700;box-shadow:var(--shadow-lg);background:var(--surface);
  border:1px solid var(--line2);color:var(--muted);display:flex;align-items:center;gap:7px;
  opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none}
.toast.show{opacity:1;transform:none}
.toast.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.toast.err{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.toast .spin{width:11px;height:11px;border-radius:50%;border:2px solid currentColor;
  border-right-color:transparent;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.offline{position:fixed;left:0;right:0;top:0;z-index:95;padding:8px 14px;text-align:center;
  background:var(--bad);color:#fff;font-size:13px;font-weight:700}

.empty{padding:46px 20px;text-align:center;color:var(--muted)}
.empty h3{font-size:16px;color:var(--ink2);margin-bottom:5px}
.sechead{margin:24px 0 10px;font-size:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.skel{padding:40px;text-align:center;color:var(--muted);font-size:13px}

@media (max-width:880px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}
  .nav{flex-direction:row;overflow-x:auto;padding:0 12px 12px;gap:6px;align-items:center}
  .nav .sec{display:none}
  .nav button{white-space:nowrap;width:auto}
  .nav button .n,.nav button .alert{margin-left:6px}
  .side-foot{flex-direction:row;align-items:center;justify-content:space-between}
  .content,.topbar{padding-left:16px;padding-right:16px}
  .datebar{margin-left:0;width:100%}
}
@media (max-width:520px){
  .acts{grid-template-columns:repeat(2,1fr)}
  .cm-acts{grid-template-columns:1fr}
  .cm-np{grid-template-columns:repeat(5,1fr);gap:5px}
  .cm-np button{padding:11px 2px;font-size:13px}
  .cm-other{grid-template-columns:1fr}
}