/* =========================================================================
   Wakeel — Liner Agency Operating Platform
   Static mockup stylesheet. Jira / clean-admin aesthetic, light + dark.
   ========================================================================= */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  --brand: #2f6fed;
  --brand-strong: #2456c9;
  --brand-soft: #eaf1ff;

  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #fbfcfd;
  --sidebar: #ffffff;
  --line: #e7e9ee;
  --line-strong: #d8dbe2;

  --text: #1b2233;
  --text-soft: #5b6573;
  --text-faint: #8a93a3;

  --shadow-sm: 0 1px 2px rgba(20, 28, 46, .06);
  --shadow: 0 6px 24px rgba(20, 28, 46, .08);
  --shadow-lg: 0 18px 50px rgba(20, 28, 46, .18);

  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;

  /* status palette */
  --ok-bg:#e7f7ee; --ok-fg:#188150;
  --info-bg:#e8f0ff; --info-fg:#2456c9;
  --warn-bg:#fff3e0; --warn-fg:#b5731a;
  --danger-bg:#fdeaea; --danger-fg:#c23a3a;
  --muted-bg:#eef0f4; --muted-fg:#69707d;
  --purple-bg:#f0ebfe; --purple-fg:#6d44c9;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --brand: #4f86ff;
  --brand-strong: #6f9bff;
  --brand-soft: #18223b;

  --bg: #0e1320;
  --surface: #151b29;
  --surface-2: #111726;
  --sidebar: #121826;
  --line: #232c3e;
  --line-strong: #2c3650;

  --text: #e7ebf3;
  --text-soft: #a4adbf;
  --text-faint: #707a8e;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 8px 30px rgba(0,0,0,.45);
  --shadow-lg: 0 22px 60px rgba(0,0,0,.6);

  --ok-bg:#10301f; --ok-fg:#4fd08a;
  --info-bg:#15233f; --info-fg:#7aa6ff;
  --warn-bg:#352712; --warn-fg:#e3a44f;
  --danger-bg:#3a1a1a; --danger-fg:#f08585;
  --muted-bg:#1c2433; --muted-fg:#98a2b3;
  --purple-bg:#241a3c; --purple-fg:#b496f5;
}

/* ---- Reset -------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand); text-decoration: none; }
button { font-family: inherit; }
::selection { background: rgba(47,111,237,.2); }

/* default icon sizing — class-scoped rules below override via specificity */
svg { width: 18px; height: 18px; flex: none; }
.empty svg { width: 42px; height: 42px; }
.kpi-delta svg { width: 14px; height: 14px; }
.toast .ti svg, .alert svg, .notif svg { width: 18px; height: 18px; }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 20px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

/* =========================================================================
   LOGIN
   ========================================================================= */
.auth {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 100vh;
}
.auth__brandside {
  position: relative;
  background: radial-gradient(120% 120% at 0% 0%, #2f6fed 0%, #2456c9 55%, #1d3f93 100%);
  color: #fff;
  padding: 54px 60px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.auth__brandside::after {
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 26px 26px; opacity:.5;
}
.auth__logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; position:relative; z-index:1;}
.auth__logo .logo-badge { width:34px; height:34px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);}
.auth__eyebrow { margin-top:64px; letter-spacing:.16em; font-size:11px; text-transform:uppercase; opacity:.75; position:relative; z-index:1;}
.auth__title { font-size:40px; line-height:1.1; font-weight:800; margin:14px 0 18px; max-width:14ch; position:relative; z-index:1;}
.auth__lead { font-size:15.5px; line-height:1.6; max-width:46ch; color:rgba(255,255,255,.86); position:relative; z-index:1;}
.auth__points { list-style:none; padding:0; margin:30px 0 0; display:flex; flex-direction:column; gap:13px; position:relative; z-index:1;}
.auth__points li { display:flex; align-items:center; gap:11px; font-size:14.5px; color:rgba(255,255,255,.94);}
.auth__points .tick { width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; flex:0 0 auto; font-size:12px;}
.auth__flow { margin-top:auto; padding-top:38px; display:flex; flex-wrap:wrap; gap:8px 6px; align-items:center; position:relative; z-index:1;}
.auth__node { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:8px; padding:7px 11px; font-family:var(--mono); font-size:12px; white-space:nowrap;}
.auth__node.is-engine { background:#fff; color:var(--brand-strong); font-weight:700;}
.auth__arrow { opacity:.6; }
.auth__foot { margin-top:26px; font-size:12px; opacity:.6; position:relative; z-index:1;}

.auth__formside { display:flex; align-items:center; justify-content:center; padding:40px; background:var(--surface);}
.auth__form { width:100%; max-width:380px; }
.auth__form h2 { font-size:26px; margin:0 0 6px; font-weight:800;}
.auth__form p.sub { color:var(--text-soft); margin:0 0 26px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-soft); margin-bottom:7px; font-weight:600;}
.field .with-action { position:relative; }
.field .with-action .reveal { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--brand); font-size:12px; cursor:pointer; }
.input {
  width:100%; padding:11px 13px; border:1px solid var(--line-strong); background:var(--surface-2);
  border-radius:var(--radius-sm); color:var(--text); font-size:14px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,111,237,.15); background:var(--surface); }
.input::placeholder { color:var(--text-faint); }
.auth__row { display:flex; align-items:center; justify-content:space-between; margin:4px 0 22px; font-size:13px;}
.auth__row label { display:flex; align-items:center; gap:7px; color:var(--text-soft); }
.auth__hint { margin-top:22px; text-align:center; font-size:13px; color:var(--text-soft); }
.auth__demo { margin-top:18px; padding:11px 13px; background:var(--brand-soft); border:1px dashed var(--brand); border-radius:var(--radius-sm); font-size:12.5px; color:var(--text-soft);}
.auth__demo b { color:var(--text); }

/* =========================================================================
   APP SHELL
   ========================================================================= */
.shell { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }

.sidebar {
  background:var(--sidebar); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow:hidden;
}
.sidebar__brand { display:flex; align-items:center; gap:11px; padding:18px 18px 16px; border-bottom:1px solid var(--line);}
.logo-badge { width:36px; height:36px; border-radius:9px; background:var(--brand); display:grid; place-items:center; color:#fff; flex:0 0 auto; box-shadow:var(--shadow-sm);}
.logo-badge svg { width:20px; height:20px;}
.sidebar__brand .name { font-weight:800; font-size:15px; letter-spacing:-.01em;}
.sidebar__brand .sub { font-size:11px; color:var(--text-faint); }
.sidebar__nav { flex:1; overflow-y:auto; padding:12px 10px 20px; }
.nav-group { margin-top:14px; }
.nav-group:first-child { margin-top:2px; }
.nav-group__label { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); padding:6px 12px; font-weight:700;}
.nav-item {
  display:flex; align-items:center; gap:11px; padding:8.5px 12px; border-radius:8px; color:var(--text-soft);
  font-size:13.5px; font-weight:500; cursor:pointer; position:relative; transition:background .12s, color .12s; user-select:none;
}
.nav-item:hover { background:var(--surface-2); color:var(--text); }
.nav-item.active { background:var(--brand-soft); color:var(--brand-strong); font-weight:600; }
.nav-item .ic { width:18px; height:18px; flex:0 0 auto; display:grid; place-items:center; opacity:.9;}
.nav-item .ic svg { width:17px; height:17px; }
.nav-item .badge-count { margin-left:auto; background:var(--danger-bg); color:var(--danger-fg); font-size:11px; font-weight:700; border-radius:20px; padding:1px 7px;}
.sidebar__foot { border-top:1px solid var(--line); padding:12px; }
.userchip { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:9px; cursor:pointer;}
.userchip:hover { background:var(--surface-2); }
.avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--brand),#7aa6ff); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; flex:0 0 auto;}
.userchip .nm { font-size:13px; font-weight:600; }
.userchip .rl { font-size:11.5px; color:var(--text-faint); }

/* main */
.main { display:flex; flex-direction:column; min-width:0; }
.topbar {
  position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 24px; height:60px;
}
.topbar__title { font-size:16px; font-weight:700; }
.topbar__crumbs { font-size:12.5px; color:var(--text-faint); }
.topbar__search { margin-left:18px; flex:1; max-width:420px; position:relative; }
.topbar__search input { width:100%; padding:8px 12px 8px 34px; border:1px solid var(--line-strong); background:var(--surface-2); border-radius:8px; font-size:13px; color:var(--text); outline:none;}
.topbar__search input:focus { border-color:var(--brand); background:var(--surface); }
.topbar__search .si { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-faint); }
.topbar__spacer { flex:1; }
.topbar__right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.env-switch { display:flex; align-items:center; gap:7px; border:1px solid var(--line-strong); background:var(--surface); border-radius:8px; padding:7px 11px; font-size:12.5px; font-weight:600; cursor:pointer; position:relative;}
.env-switch .dot { width:8px; height:8px; border-radius:50%; background:#19a463; }
.env-switch.staging .dot { background:#d99b20; }
.env-switch.sandbox .dot { background:#7a7f8a; }
.icon-btn { width:38px; height:38px; border-radius:9px; border:1px solid var(--line-strong); background:var(--surface); color:var(--text-soft); display:grid; place-items:center; cursor:pointer; position:relative; transition:background .12s, color .12s;}
.icon-btn:hover { background:var(--surface-2); color:var(--text); }
.icon-btn .ping { position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%; background:#e5484d; border:2px solid var(--surface); }

.content { padding:26px 30px 70px; max-width:1500px; width:100%; }

/* =========================================================================
   PRIMITIVES
   ========================================================================= */
.page-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:22px; }
.page-head__main h1 { font-size:24px; margin:0 0 4px; font-weight:800; letter-spacing:-.01em;}
.page-head__main p { margin:0; color:var(--text-soft); font-size:13.5px; }
.page-head__actions { margin-left:auto; display:flex; gap:9px; flex-wrap:wrap; }

.btn {
  display:inline-flex; align-items:center; gap:7px; border-radius:8px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text); padding:9px 14px; font-size:13px; font-weight:600; cursor:pointer;
  transition:background .12s, border-color .12s, transform .04s; white-space:nowrap;
}
.btn:hover { background:var(--surface-2); }
.btn:active { transform:translateY(1px); }
.btn svg { width:16px; height:16px; }
.btn--primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn--primary:hover { background:var(--brand-strong); }
.btn--danger { background:var(--danger-fg); border-color:var(--danger-fg); color:#fff; }
.btn--ghost { background:transparent; border-color:transparent; }
.btn--ghost:hover { background:var(--surface-2); }
.btn--sm { padding:6px 10px; font-size:12px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card__head { display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line); }
.card__head h3 { margin:0; font-size:14.5px; font-weight:700; }
.card__head .count { color:var(--text-faint); font-weight:600; font-size:13px; }
.card__head .head-actions { margin-left:auto; display:flex; gap:8px; align-items:center;}
.card__body { padding:18px; }
.card__body.flush { padding:0; }

/* KPI cards */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:22px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;}
.kpi .kpi-ic { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; margin-bottom:12px; }
.kpi .kpi-label { font-size:12.5px; color:var(--text-soft); font-weight:600; }
.kpi .kpi-value { font-size:27px; font-weight:800; letter-spacing:-.02em; margin-top:2px; }
.kpi .kpi-delta { font-size:12px; font-weight:600; margin-top:6px; display:inline-flex; align-items:center; gap:5px;}
.kpi .kpi-delta.up { color:var(--ok-fg); }
.kpi .kpi-delta.down { color:var(--danger-fg); }
.kpi .kpi-delta.flat { color:var(--text-faint); }

/* Badges */
.badge {
  display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:20px;
  font-size:11.5px; font-weight:600; line-height:1.7; white-space:nowrap;
}
.badge .bdot { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }
.badge--ok { background:var(--ok-bg); color:var(--ok-fg); }
.badge--info { background:var(--info-bg); color:var(--info-fg); }
.badge--warn { background:var(--warn-bg); color:var(--warn-fg); }
.badge--danger { background:var(--danger-bg); color:var(--danger-fg); }
.badge--muted { background:var(--muted-bg); color:var(--muted-fg); }
.badge--purple { background:var(--purple-bg); color:var(--purple-fg); }
.pill { display:inline-flex; align-items:center; padding:1px 8px; border-radius:6px; font-size:11px; font-weight:600; background:var(--muted-bg); color:var(--text-soft);}

/* Tables */
.table-wrap { width:100%; overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl thead th {
  text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint);
  font-weight:700; padding:11px 16px; border-bottom:1px solid var(--line); background:var(--surface-2); position:sticky; top:0; white-space:nowrap;
}
.tbl tbody td { padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tbody tr { transition:background .1s; }
.tbl tbody tr.clickable { cursor:pointer; }
.tbl tbody tr.clickable:hover { background:var(--surface-2); }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl .strong { font-weight:700; color:var(--text); }
.tbl .muted { color:var(--text-faint); font-size:12px; }
.tbl .mono { font-family:var(--mono); font-size:12px; }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; }
.tbl .nowrap { white-space:nowrap; }
.cell-primary { display:flex; flex-direction:column; gap:1px; }
.cell-primary .sub { font-size:11.5px; color:var(--text-faint); }

.toolbar { display:flex; gap:10px; align-items:center; padding:13px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.toolbar .search { position:relative; flex:1; min-width:200px; max-width:320px; }
.toolbar .search input { width:100%; padding:8px 12px 8px 32px; border:1px solid var(--line-strong); background:var(--surface-2); border-radius:8px; font-size:13px; color:var(--text); outline:none;}
.toolbar .search input:focus { border-color:var(--brand); }
.toolbar .search .si { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-faint);}
.seg { display:inline-flex; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden; background:var(--surface);}
.seg button { border:none; background:transparent; padding:7px 12px; font-size:12.5px; font-weight:600; color:var(--text-soft); cursor:pointer; border-right:1px solid var(--line);}
.seg button:last-child { border-right:none; }
.seg button.active { background:var(--brand-soft); color:var(--brand-strong); }
select.input, select.mini { font-family:inherit; }
.mini { padding:7px 11px; border:1px solid var(--line-strong); background:var(--surface); border-radius:8px; font-size:12.5px; color:var(--text); cursor:pointer; outline:none;}

.empty { padding:48px 20px; text-align:center; color:var(--text-faint); }
.empty svg { width:42px; height:42px; opacity:.5; margin-bottom:10px; }

/* progress / meter */
.meter { height:8px; border-radius:20px; background:var(--muted-bg); overflow:hidden; }
.meter > span { display:block; height:100%; background:var(--brand); border-radius:20px; }
.meter.ok > span { background:var(--ok-fg);}
.meter.warn > span { background:var(--warn-fg);}
.meter.danger > span { background:var(--danger-fg);}

/* =========================================================================
   MODAL & DRAWER
   ========================================================================= */
.overlay { position:fixed; inset:0; background:rgba(15,20,32,.45); z-index:100; display:flex; opacity:0; transition:opacity .15s; }
.overlay.show { opacity:1; }
[data-theme="dark"] .overlay { background:rgba(0,0,0,.6); }

.modal { margin:auto; width:100%; max-width:560px; background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); transform:translateY(8px) scale(.99); transition:transform .15s; max-height:90vh; display:flex; flex-direction:column;}
.overlay.show .modal { transform:none; }
.modal--lg { max-width:780px; }
.modal__head { display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--line); }
.modal__head h3 { margin:0; font-size:17px; font-weight:800; }
.modal__head .sub { font-size:12.5px; color:var(--text-faint); }
.modal__close { margin-left:auto; }
.modal__body { padding:20px 22px; overflow-y:auto; }
.modal__foot { display:flex; gap:10px; justify-content:flex-end; padding:16px 22px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 var(--radius-lg) var(--radius-lg);}

.drawer { margin-left:auto; height:100vh; width:100%; max-width:720px; background:var(--surface); box-shadow:var(--shadow-lg); transform:translateX(20px); transition:transform .18s; display:flex; flex-direction:column; }
.overlay.show .drawer { transform:none; }
.drawer__head { padding:18px 24px; border-bottom:1px solid var(--line); }
.drawer__top { display:flex; align-items:center; gap:12px; }
.drawer__top h3 { margin:0; font-size:18px; font-weight:800; }
.drawer__top .mono { font-family:var(--mono); color:var(--text-faint); font-size:12.5px;}
.drawer__body { flex:1; overflow-y:auto; padding:20px 24px 40px; }
.drawer__foot { padding:14px 24px; border-top:1px solid var(--line); background:var(--surface-2); display:flex; gap:10px; flex-wrap:wrap; }

/* form bits */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.form-grid .full { grid-column:1 / -1; }
textarea.input { resize:vertical; min-height:74px; }
.help { font-size:11.5px; color:var(--text-faint); margin-top:5px; }

/* tabs */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto;}
.tabs button { border:none; background:none; padding:11px 14px; font-size:13.5px; font-weight:600; color:var(--text-soft); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;}
.tabs button:hover { color:var(--text); }
.tabs button.active { color:var(--brand-strong); border-bottom-color:var(--brand); }

/* definition grid */
.defs { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px 22px; }
.def label { font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); font-weight:700; display:block; margin-bottom:3px;}
.def .val { font-size:14px; font-weight:600; }

/* timeline */
.timeline { position:relative; margin:4px 0 0; padding-left:8px;}
.tl-item { position:relative; padding:0 0 18px 26px; }
.tl-item::before { content:""; position:absolute; left:6px; top:3px; width:11px; height:11px; border-radius:50%; background:var(--surface); border:2px solid var(--brand); z-index:1;}
.tl-item.done::before { background:var(--brand); }
.tl-item.pending::before { border-color:var(--line-strong); }
.tl-item:not(:last-child)::after { content:""; position:absolute; left:11px; top:14px; bottom:0; width:2px; background:var(--line); }
.tl-item .tl-title { font-weight:700; font-size:13.5px; }
.tl-item .tl-meta { font-size:12px; color:var(--text-faint); margin-top:1px;}
.tl-item .tl-desc { font-size:13px; color:var(--text-soft); margin-top:3px; }

/* lifecycle stepper */
.stepper { display:flex; flex-wrap:wrap; gap:6px; }
.step { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; padding:6px 11px; border-radius:20px; background:var(--muted-bg); color:var(--muted-fg);}
.step.done { background:var(--ok-bg); color:var(--ok-fg);}
.step.current { background:var(--info-bg); color:var(--info-fg); box-shadow:0 0 0 2px var(--brand) inset;}
.step .n { width:16px; height:16px; border-radius:50%; background:currentColor; color:var(--surface); font-size:9px; display:grid; place-items:center; font-weight:800;}

/* checklist */
.checklist { display:flex; flex-direction:column; gap:2px; }
.check { display:flex; align-items:center; gap:11px; padding:11px 4px; border-bottom:1px solid var(--line); }
.check:last-child { border-bottom:none; }
.check .cbox { width:20px; height:20px; border-radius:6px; border:2px solid var(--line-strong); display:grid; place-items:center; flex:0 0 auto;}
.check.ok .cbox { background:var(--ok-fg); border-color:var(--ok-fg); color:#fff;}
.check.blocked .cbox { background:var(--danger-bg); border-color:var(--danger-fg); color:var(--danger-fg);}
.check .ctext { font-size:13.5px; font-weight:600;}
.check .csub { font-size:12px; color:var(--text-faint); }
.check .cside { margin-left:auto; }

/* toasts */
.toast-root { position:fixed; bottom:22px; right:22px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.toast { min-width:280px; max-width:380px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:10px; box-shadow:var(--shadow-lg); padding:13px 15px; display:flex; gap:11px; align-items:flex-start; transform:translateX(20px); opacity:0; transition:all .2s;}
.toast.show { transform:none; opacity:1; }
.toast.ok { border-left-color:var(--ok-fg); }
.toast.warn { border-left-color:var(--warn-fg); }
.toast.danger { border-left-color:var(--danger-fg); }
.toast .ti { flex:0 0 auto; margin-top:1px; }
.toast .tt { font-weight:700; font-size:13.5px; }
.toast .td { font-size:12.5px; color:var(--text-soft); margin-top:1px; }

/* dropdown */
.menu { position:absolute; z-index:120; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lg); min-width:230px; overflow:hidden; }
.menu__item { display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:13px; cursor:pointer; color:var(--text);}
.menu__item:hover { background:var(--surface-2); }
.menu__item.danger { color:var(--danger-fg); }
.menu__sep { height:1px; background:var(--line); }
.menu__label { padding:9px 14px 5px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); font-weight:700;}
.notif { padding:11px 14px; border-bottom:1px solid var(--line); display:flex; gap:10px; cursor:pointer;}
.notif:hover { background:var(--surface-2); }
.notif .nd { width:8px; height:8px; border-radius:50%; margin-top:5px; flex:0 0 auto;}
.notif .ntitle { font-size:13px; font-weight:600;}
.notif .nmeta { font-size:11.5px; color:var(--text-faint); margin-top:2px;}

/* charts */
.bars { display:flex; align-items:flex-end; gap:10px; height:170px; padding-top:10px;}
.bars .bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end;}
.bars .bar-stack { width:60%; max-width:34px; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; height:100%;}
.bars .bar { width:100%; border-radius:4px 4px 0 0; }
.bars .bar.imp { background:var(--brand); }
.bars .bar.exp { background:#7aa6ff; }
.bars .bx { font-size:11px; color:var(--text-faint); }
.donut { width:150px; height:150px; border-radius:50%; }
.legend { display:flex; flex-direction:column; gap:9px; }
.legend .lg { display:flex; align-items:center; gap:9px; font-size:13px;}
.legend .sw { width:11px; height:11px; border-radius:3px; }
.legend .lv { margin-left:auto; font-weight:700; }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid-2-1 { display:grid; grid-template-columns:1.6fr 1fr; gap:18px; }

.list-clean { list-style:none; margin:0; padding:0; }
.list-clean li { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
.list-clean li:last-child { border-bottom:none; }

.alert { display:flex; gap:11px; padding:13px 15px; border-radius:10px; font-size:13px; align-items:flex-start; }
.alert--warn { background:var(--warn-bg); color:var(--warn-fg); }
.alert--danger { background:var(--danger-bg); color:var(--danger-fg); }
.alert--info { background:var(--info-bg); color:var(--info-fg); }
.alert b { font-weight:700; }

.kv-inline { display:flex; gap:6px; align-items:baseline; }
.kv-inline .k { color:var(--text-faint); font-size:12px; }
.kv-inline .v { font-weight:700; }

.tag-row { display:flex; gap:6px; flex-wrap:wrap; }

/* integration cards */
.integ-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.integ { border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; background:var(--surface); }
.integ__top { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.integ__logo { width:42px; height:42px; border-radius:10px; display:grid; place-items:center; font-weight:800; font-size:13px; color:#fff; flex:0 0 auto;}
.integ__name { font-weight:700; }
.integ__desc { font-size:12px; color:var(--text-faint); }
.integ__metrics { display:flex; gap:18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.integ__metric .m-l { font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em;}
.integ__metric .m-v { font-weight:700; font-size:15px; }

/* responsive */
@media (max-width:1100px){
  .grid-2,.grid-3,.grid-2-1 { grid-template-columns:1fr; }
}
@media (max-width:900px){
  .shell { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .auth { grid-template-columns:1fr; }
  .auth__brandside { display:none; }
}

.skeleton-line { height:12px; border-radius:6px; background:linear-gradient(90deg,var(--muted-bg),var(--surface-2),var(--muted-bg)); }
.text-soft { color:var(--text-soft); }
.text-faint { color:var(--text-faint); }
.mb0{margin-bottom:0}.mt0{margin-top:0}
.flex{display:flex}.between{justify-content:space-between}.aic{align-items:center}.gap8{gap:8px}.gap12{gap:12px}.wrap{flex-wrap:wrap}
.mono{font-family:var(--mono);}