/* ============================================================
   NEXORA DESIGN SYSTEM — edit these tokens to rebrand the kit
   ============================================================ */
:root{
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#fbfbfc; --surface-3:#f1f2f6;
  --border:#e5e7ee; --border-strong:#d8dae4;
  --text:#16171d; --text-2:#3f4450; --muted:#6e7686; --faint:#9aa1b1;
  --accent:#6366f1; --accent-hover:#4f46e5; --accent-soft:#eef0ff; --accent-text:#4f46e5;
  --success:#159947; --success-soft:#e8f7ee;
  --warning:#b97909; --warning-soft:#fdf3e0;
  --danger:#dc3545; --danger-soft:#fdecec;
  --info:#2273d1; --info-soft:#e8f1fd;
  --radius:12px; --radius-lg:16px;
  --shadow:0 1px 2px rgba(16,18,27,.05),0 1px 3px rgba(16,18,27,.04);
  --shadow-lg:0 12px 32px -8px rgba(16,18,27,.18),0 4px 12px -4px rgba(16,18,27,.08);
  --sidebar-w:264px; --header-h:64px;
  --chart-grid:#e8eaf0; --chart-tick:#8a91a3;
}
[data-theme="dark"]{
  --bg:#0e1014; --surface:#171a21; --surface-2:#1c202a; --surface-3:#232833;
  --border:#262b37; --border-strong:#333a49;
  --text:#f2f3f7; --text-2:#c9cedb; --muted:#98a0b3; --faint:#6d7689;
  --accent-soft:#252547; --accent-text:#a5a8ff;
  --success-soft:#12301f; --warning-soft:#38290e; --danger-soft:#3a171b; --info-soft:#142c47;
  --shadow:0 1px 2px rgba(0,0,0,.35);
  --shadow-lg:0 16px 40px -8px rgba(0,0,0,.6);
  --chart-grid:#232833; --chart-tick:#7c8499;
}
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"cv02","cv03","cv04","cv11"}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3{letter-spacing:-.01em}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- surfaces & components ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.card-hover{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.card-hover:hover{border-color:var(--border-strong);box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.t-muted{color:var(--muted)} .t-2{color:var(--text-2)} .t-faint{color:var(--faint)}
.bdr{border-color:var(--border)} .bg-2{background:var(--surface-2)} .bg-3{background:var(--surface-3)}
.divide-bdr>:not([hidden])~:not([hidden]){border-color:var(--border)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:550;font-size:.875rem;line-height:1;border-radius:10px;padding:.6rem 1rem;min-height:38px;cursor:pointer;border:1px solid transparent;transition:all .16s ease;white-space:nowrap;user-select:none}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(79,70,229,.35)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:var(--surface);border-color:var(--border-strong);color:var(--text)}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--faint)}
.btn-outline{background:transparent;border-color:var(--border-strong);color:var(--text-2)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-3);color:var(--text)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(.92)}
.btn-danger-outline{background:transparent;border-color:var(--danger);color:var(--danger)}
.btn-danger-outline:hover{background:var(--danger-soft)}
.btn-sm{padding:.42rem .75rem;min-height:32px;font-size:.8125rem;border-radius:8px}
.btn-lg{padding:.75rem 1.35rem;min-height:44px;font-size:.9375rem}
.btn-icon{padding:.5rem;min-height:38px;width:38px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.input,.select,textarea.input{width:100%;background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;padding:.58rem .8rem;font-size:.875rem;color:var(--text);transition:border-color .15s,box-shadow .15s;min-height:38px}
.input::placeholder{color:var(--faint)}
.input:focus,.select:focus,textarea.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input-error{border-color:var(--danger)!important;box-shadow:0 0 0 3px var(--danger-soft)!important}
.label{display:block;font-size:.8125rem;font-weight:550;color:var(--text-2);margin-bottom:.4rem}
.err-msg{display:none;font-size:.75rem;color:var(--danger);margin-top:.35rem}
.err-msg.show{display:block}
.hint{font-size:.75rem;color:var(--muted);margin-top:.35rem}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a91a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;padding-right:2rem;cursor:pointer}

.switch{position:relative;width:42px;height:24px;flex:none;cursor:pointer}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .track{position:absolute;inset:0;background:var(--border-strong);border-radius:99px;transition:.2s}
.switch .track:before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked + .track{background:var(--accent)}
.switch input:checked + .track:before{transform:translateX(18px)}
.switch input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:2px}
.check,.radio{width:17px;height:17px;accent-color:var(--accent);cursor:pointer;flex:none}

.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:600;padding:.22rem .55rem;border-radius:99px;line-height:1.25;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.b-success{background:var(--success-soft);color:var(--success)}
.b-warning{background:var(--warning-soft);color:var(--warning)}
.b-danger{background:var(--danger-soft);color:var(--danger)}
.b-info{background:var(--info-soft);color:var(--info)}
.b-accent{background:var(--accent-soft);color:var(--accent-text)}
.b-neutral{background:var(--surface-3);color:var(--muted)}

.tbl{width:100%;border-collapse:collapse;min-width:640px}
.tbl th{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);font-weight:650;text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap}
.tbl td{padding:.85rem 1rem;font-size:.875rem;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody tr:last-child td{border-bottom:none}
.th-sort{cursor:pointer;user-select:none}
.th-sort:hover{color:var(--text-2)}

.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-weight:650;color:#fff;flex:none;letter-spacing:.01em}
.progress{height:8px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.progress > div{height:100%;border-radius:99px;background:var(--accent);transition:width .7s cubic-bezier(.22,1,.36,1)}
.alert{display:flex;gap:.75rem;padding:.85rem 1rem;border-radius:var(--radius);font-size:.875rem;border:1px solid}
.alert svg{width:18px;height:18px;flex:none;margin-top:1px}
.alert-success{background:var(--success-soft);color:var(--success);border-color:transparent}
.alert-danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.alert-warning{background:var(--warning-soft);color:var(--warning);border-color:transparent}
.alert-info{background:var(--info-soft);color:var(--info);border-color:transparent}
[data-theme="dark"] .alert{border-color:var(--border)}

.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:99px;border:1px solid var(--border-strong);font-size:.8125rem;font-weight:550;color:var(--text-2);cursor:pointer;background:var(--surface);transition:.15s;min-height:34px}
.chip:hover{border-color:var(--accent);color:var(--accent-text)}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}

.skeleton{position:relative;overflow:hidden;background:var(--surface-3);border-radius:8px}
.skeleton:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:shimmer 1.4s infinite;transform:translateX(-100%)}
[data-theme="dark"] .skeleton:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ---------- layout / sidebar ---------- */
#sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);transition:width .22s ease,transform .25s ease}
#mainWrap{transition:margin .22s ease}
@media(min-width:1024px){
  #mainWrap{margin-left:var(--sidebar-w)}
  body.sb-collapsed #sidebar{width:80px}
  body.sb-collapsed #mainWrap{margin-left:80px}
  body.sb-collapsed .nav-label,body.sb-collapsed .sb-label,body.sb-collapsed .sb-brand-text,body.sb-collapsed .sb-plan{display:none!important}
  body.sb-collapsed .nav-item{justify-content:center;padding-left:0;padding-right:0}
  body.sb-collapsed .sb-head{justify-content:center}
}
@media(max-width:1023.5px){
  #sidebar{transform:translateX(-105%)}
  body.mobile-open #sidebar{transform:translateX(0);box-shadow:var(--shadow-lg)}
}
.nav-item{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border-radius:9px;font-size:.875rem;font-weight:520;color:var(--text-2);cursor:pointer;transition:.14s;min-height:38px;border:1px solid transparent}
.nav-item svg{width:18px;height:18px;flex:none}
.nav-item:hover{background:var(--surface-3);color:var(--text)}
.nav-item.active{background:var(--accent-soft);color:var(--accent-text);font-weight:600;border-color:transparent}
.nav-item.active svg{color:var(--accent)}

/* ---------- dialogs, dropdowns, toasts ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(10,11,16,.55);backdrop-filter:blur(3px);z-index:80;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .18s}
.modal-backdrop.open{opacity:1;pointer-events:auto}
.modal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-height:calc(100vh - 2rem);overflow-y:auto;transform:translateY(8px) scale(.98);transition:transform .18s}
.modal-backdrop.open .modal-card{transform:none}
.dropdown{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:70;opacity:0;transform:translateY(-4px);pointer-events:none;transition:.15s;min-width:210px}
.dropdown.open{opacity:1;transform:none;pointer-events:auto}
.dd-item{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.55rem .8rem;font-size:.85rem;color:var(--text-2);cursor:pointer;border-radius:7px;transition:.12s}
.dd-item:hover{background:var(--surface-3);color:var(--text)}
.dd-item svg{width:15px;height:15px}
.dd-item.danger{color:var(--danger)} .dd-item.danger:hover{background:var(--danger-soft)}
#toastRoot{position:fixed;bottom:1.25rem;right:1.25rem;z-index:100;display:flex;flex-direction:column;gap:.6rem;max-width:min(92vw,360px)}
.toast{display:flex;gap:.7rem;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.8rem .95rem;font-size:.85rem;animation:toastIn .25s cubic-bezier(.22,1,.36,1)}
.toast.success{border-left-color:var(--success)} .toast.error{border-left-color:var(--danger)} .toast.warning{border-left-color:var(--warning)}
@keyframes toastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.tooltip{position:relative}
.tooltip:hover:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#17181f;color:#fff;font-size:.7rem;font-weight:550;padding:.35rem .55rem;border-radius:6px;white-space:nowrap;z-index:90;pointer-events:none;box-shadow:var(--shadow-lg)}

/* ---------- density & motion ---------- */
body[data-density="compact"] .card{border-radius:12px}
body[data-density="compact"] .tbl td{padding:.55rem 1rem}
body[data-density="compact"] .nav-item{min-height:34px;padding-top:.4rem;padding-bottom:.4rem}
body[data-density="compact"] .page-pad{padding:1.1rem}
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.page-section{display:none}
.page-section.active{display:block;animation:pageIn .28s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.tab-btn{padding:.55rem 1rem;font-size:.875rem;font-weight:550;color:var(--muted);border-radius:9px;cursor:pointer;transition:.14s;white-space:nowrap}
.tab-btn:hover{color:var(--text);background:var(--surface-3)}
.tab-btn.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow);border:1px solid var(--border)}
.kbd{font-family:ui-monospace,monospace;font-size:.68rem;background:var(--surface-3);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:5px;padding:.1rem .35rem;color:var(--muted)}
pre.code{background:#14151c;color:#d7dae6;border-radius:var(--radius);padding:1rem 1.1rem;font-size:.78rem;line-height:1.65;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#activityFeed:before{content:"";position:absolute;left:15px;top:10px;bottom:10px;width:1px;background:var(--border)}
.tbl th.text-right,.tbl td.text-right{text-align:right}
.w-4\.5{width:1.125rem}.h-4\.5{height:1.125rem}