/* ====================================================================
   SearchDaddy Admin — styles (scoped per page; shared shell scoped .admin-shell)
   ==================================================================== */

/* Unified site logo — shared across all layouts */
.site-logo {
  max-height: 34px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}


/* ====================================================================
   SHARED SHELL   (scope: .admin-shell)
   ==================================================================== */
:root.admin-shell {--ring:oklch(0.54 0.19 30);--ring-w:2px;--ring-off:2px;--bg:#F4EFE6;--bg-2:#EBE4D6;--paper:#FBF8F2;--paper-2:#F7F2E8;--ink:#1A1814;--ink-2:#2C2823;--muted:#6B6258;--muted-2:#746C62;--hair:rgba(26,24,20,0.10);--hair-2:rgba(26,24,20,0.18);--hair-3:rgba(26,24,20,0.30);--tomato:oklch(0.54 0.19 30);--tomato-soft:oklch(0.54 0.19 30 / .10);--forest:oklch(0.46 0.10 150);--forest-soft:oklch(0.46 0.10 150 / .12);--gold:oklch(0.74 0.13 75);--gold-soft:oklch(0.74 0.13 75 / .18);--violet:oklch(0.55 0.14 290);--violet-soft:oklch(0.55 0.14 290 / .12);--blue:oklch(0.55 0.14 250);--blue-soft:oklch(0.55 0.14 250 / .12);--rose:oklch(0.92 0.04 30);--shadow-card:0 1px 0 rgba(26,24,20,.04), 0 12px 28px -22px rgba(26,24,20,.18);--shadow-pop:0 4px 0 rgba(26,24,20,.04), 0 32px 60px -20px rgba(26,24,20,.32);--serif:"Instrument Serif",Georgia,serif;--sans:"Geist",sans-serif;--mono:"JetBrains Mono",monospace;--sidebar-w:240px;--topbar-h:56px}
.admin-shell *, .admin-shell *::before, .admin-shell *::after {box-sizing:border-box}
html.admin-shell, .admin-shell body {margin:0;padding:0}
.admin-shell body {background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
.admin-shell a {color:inherit;text-decoration:none}
.admin-shell button {font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
.admin-shell input, .admin-shell select, .admin-shell textarea {font:inherit;color:inherit}
.admin-shell ::selection {background:var(--ink);color:var(--bg)}
.admin-shell :focus-visible {outline:2px solid var(--tomato);outline-offset:2px;border-radius:6px}
.admin-shell .tnum {font-variant-numeric:tabular-nums}
.admin-shell .mono {font-family:var(--mono);font-feature-settings:"tnum"}
.admin-shell .app {display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;grid-template-areas:"side topbar" "side main";min-height:100vh}

.admin-shell .sidebar {grid-area:side;background:var(--paper);border-right:1px solid var(--hair);display:flex;flex-direction:column;padding:14px 12px 12px;position:sticky;top:0;height:100vh}
.admin-shell .brand {display:flex;align-items:center;gap:9px;padding:6px 8px 12px;border-bottom:1px solid var(--hair);margin-bottom:12px}
.admin-shell .brand-mark {width:28px;height:28px;border-radius:7px;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:17px;font-style:italic;letter-spacing:-.02em;position:relative;flex-shrink:0}
.admin-shell .brand-mark::after {content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold);transform:translate(9px,-9px)}
.admin-shell .brand-stack {display:flex;flex-direction:column;line-height:1.05;min-width:0}
.admin-shell .brand-name {font-family:var(--serif);font-size:19px;letter-spacing:-0.01em}
.admin-shell .brand-name em {font-style:italic;color:var(--tomato)}
.admin-shell .brand-sub {font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:1px}
.admin-shell .nav-group-label {font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);padding:10px 10px 5px}
.admin-shell .nav-list {display:flex;flex-direction:column;gap:1px}
.admin-shell .nav-item {display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:7px;font-size:13px;color:var(--ink-2);transition:background .15s,color .15s}
.admin-shell .nav-item:hover {background:var(--bg-2);color:var(--ink)}
.admin-shell .nav-item.active {background:var(--ink);color:var(--bg)}
.admin-shell .nav-icon {width:14px;height:14px;color:var(--muted);flex-shrink:0}
.admin-shell .nav-item:hover .nav-icon, .admin-shell .nav-item.active .nav-icon {color:currentColor}
.admin-shell .nav-badge {margin-left:auto;font-family:var(--mono);font-size:9.5px;background:var(--tomato);color:#fff;padding:1px 5px;border-radius:99px}
.admin-shell .nav-item.active .nav-badge {background:var(--gold);color:var(--ink)}
.admin-shell .nav-kbd {margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--muted-2);border:1px solid var(--hair);padding:1px 4px;border-radius:3px;letter-spacing:.05em}
.admin-shell .nav-item.active .nav-kbd {border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.6)}
.admin-shell .side-foot {margin-top:auto;padding-top:10px;border-top:1px solid var(--hair)}
.admin-shell .user-row {display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:7px;cursor:pointer;width:100%;text-align:left}
.admin-shell .user-row:hover {background:var(--bg-2)}
.admin-shell .user-avatar {width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,oklch(.62 .15 30),oklch(.5 .14 20));color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;flex-shrink:0}
.admin-shell .user-meta {flex:1;line-height:1.2;min-width:0}
.admin-shell .user-name {font-size:12.5px;font-weight:500}
.admin-shell .user-role {font-size:10.5px;color:var(--muted);font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase}
.admin-shell .topbar {grid-area:topbar;background:var(--bg);border-bottom:1px solid var(--hair);display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:14px;position:sticky;top:0;z-index:40;backdrop-filter:saturate(140%) blur(10px)}
.admin-shell .topbar-left {display:flex;align-items:center;gap:14px;min-width:0}
.admin-shell .crumbs {display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.admin-shell .crumbs .sep {color:var(--hair-3)}
.admin-shell .crumbs .here {color:var(--ink);background:var(--paper);border:1px solid var(--hair);padding:3px 8px;border-radius:5px;font-weight:500;letter-spacing:.04em}
.admin-shell .search {position:relative;width:300px;max-width:100%}
.admin-shell .search input {width:100%;padding:7px 10px 7px 32px;background:var(--paper);border:1px solid var(--hair);border-radius:8px;font-size:12.5px}
.admin-shell .search input:focus {outline:none;border-color:var(--ink-2);background:var(--paper-2)}
.admin-shell .search .si {position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);width:13px;height:13px}
.admin-shell .search .kbd {position:absolute;right:7px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;color:var(--muted-2);border:1px solid var(--hair);padding:1px 5px;border-radius:4px;background:var(--bg-2)}
.admin-shell .topbar-right {display:flex;align-items:center;gap:7px}
.admin-shell .notif {position:relative}
.admin-shell .notif-pop {position:absolute;top:calc(100% + 6px);right:0;width:320px;max-width:calc(100vw - 24px);background:var(--paper);border:1px solid var(--hair);border-radius:10px;box-shadow:var(--shadow-pop);z-index:60;overflow:hidden}
.admin-shell .notif-pop-head {display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--hair)}
.admin-shell .notif-pop-title {font-size:12.5px;font-weight:600;color:var(--ink)}
.admin-shell .notif-pop-count {font-family:var(--mono);font-size:11px;color:var(--muted)}
.admin-shell .notif-pop-list {max-height:min(60vh,360px);overflow-y:auto}
.admin-shell .notif-pop-item {display:flex;gap:9px;padding:10px 12px;text-decoration:none;border-bottom:1px solid var(--hair)}
.admin-shell .notif-pop-item:last-child {border-bottom:0}
.admin-shell .notif-pop-item:hover {background:var(--bg-2)}
.admin-shell .notif-pop-item .dot {flex:none;width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--ink)}
.admin-shell .notif-pop-item.ok .dot {background:var(--forest)}
.admin-shell .notif-pop-item.danger .dot {background:var(--tomato)}
.admin-shell .notif-pop-body {display:flex;flex-direction:column;gap:2px;min-width:0}
.admin-shell .notif-pop-who {font-size:12.5px;font-weight:600;color:var(--ink)}
.admin-shell .notif-pop-msg {font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.admin-shell .notif-pop-meta {font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:1px}
.admin-shell .notif-pop-empty {padding:22px 12px;font-size:12.5px;color:var(--muted);text-align:center}
.admin-shell .notif-pop-foot {display:block;padding:10px 12px;text-align:center;font-size:12px;font-weight:600;color:var(--ink);text-decoration:none;border-top:1px solid var(--hair);background:var(--bg-2)}
.admin-shell .notif-pop-foot:hover {background:var(--ink);color:var(--bg)}
.admin-shell .tb-btn {display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:7px;border:1px solid var(--hair);background:var(--paper);font-size:12.5px;color:var(--ink-2);transition:background .15s,border-color .15s;white-space:nowrap}
.admin-shell .tb-btn:hover {background:var(--bg-2);border-color:var(--hair-2)}
.admin-shell .tb-btn.is-loading {pointer-events:none;opacity:.55}
.admin-shell .tb-btn.is-loading .ic {animation:sd-spin .7s linear infinite}
@keyframes sd-spin {to {transform:rotate(360deg)}}
.admin-shell .tb-btn.icon-only {padding:6px;width:30px;height:30px;justify-content:center;position:relative}
.admin-shell .tb-btn .dot {position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--tomato);box-shadow:0 0 0 2px var(--bg)}
.admin-shell .tb-btn-primary {background:var(--ink);color:var(--bg);border-color:var(--ink)}
.admin-shell .tb-btn-primary:hover {background:var(--tomato);border-color:var(--tomato)}
.admin-shell .menu-btn {display:none;width:32px;height:32px;border:1px solid var(--hair);border-radius:7px;align-items:center;justify-content:center;background:var(--paper)}

.admin-shell .main {grid-area:main;padding:22px 26px 60px;max-width:1640px;width:100%}
@media(max-width:900px) {
.admin-shell .main {padding:16px 14px 50px}
}
.admin-shell .page-head {display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin:4px 0 18px}
.admin-shell .page-head h1 {font-family:var(--serif);font-size:clamp(28px,3.6vw,40px);letter-spacing:-.02em;line-height:1;margin:5px 0 0;font-weight:400}
.admin-shell .page-head h1 em {font-style:italic;color:var(--tomato)}
.admin-shell .page-head .eyebrow {font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.admin-shell .page-head .head-act {display:flex;gap:7px;align-items:center; flex-wrap:wrap}
.admin-shell .stat-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
@media(max-width:1100px) {
.admin-shell .stat-grid {grid-template-columns:repeat(2,1fr)}
}
.admin-shell .stat {background:var(--paper);border:1px solid var(--hair);border-radius:11px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s,box-shadow .2s,transform .25s;position:relative;overflow:hidden}
.admin-shell .stat:hover {border-color:var(--hair-2);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.admin-shell .stat-top {display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.admin-shell .stat-lab {font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.admin-shell .stat .delta {font-family:var(--mono);font-size:10.5px;padding:2px 6px;border-radius:4px;display:inline-flex;align-items:center;gap:3px;letter-spacing:.04em}
.admin-shell .stat .delta.up {color:var(--forest);background:var(--forest-soft)}
.admin-shell .stat .delta.dn {color:var(--tomato);background:var(--tomato-soft)}
.admin-shell .stat .delta.flat {color:var(--muted);background:var(--bg-2)}
.admin-shell .stat-num {font-family:var(--serif);font-size:38px;letter-spacing:-.03em;font-weight:400;line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:5px}
.admin-shell .stat-num small {font-size:14px;color:var(--muted);font-family:var(--sans);letter-spacing:0;font-weight:400}
.admin-shell .stat-sub {font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.04em}
.admin-shell .section {background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.admin-shell .section-head {display:flex;justify-content:space-between;align-items:flex-end;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.admin-shell .section-head h2 {font-family:var(--serif);font-size:22px;letter-spacing:-.015em;line-height:1.05;font-weight:400}
.admin-shell .section-head h2 em {font-style:italic;color:var(--tomato)}
.admin-shell .section-head .sub {font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
/* Shared data table — pages may override in their own scope (later rules win). */
.admin-shell .t-wrap {background:var(--paper);border:1px solid var(--hair);border-radius:11px;overflow:hidden}
.admin-shell .t {width:100%;border-collapse:collapse;font-size:12.5px}
.admin-shell .t thead th {background:var(--paper-2);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair);white-space:nowrap}
.admin-shell .t tbody tr {border-bottom:1px solid var(--hair);transition:background .15s}
.admin-shell .t tbody tr:hover {background:var(--bg-2)}
.admin-shell .t tbody tr:last-child {border-bottom:0}
.admin-shell .t tbody td {padding:11px 12px;vertical-align:middle}
.admin-shell .cell-muted {color:var(--muted);font-size:12px}
.admin-shell .cell-mono {font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.admin-shell .cell-bad {color:var(--tomato)}
.admin-shell .ns {display:flex;flex-direction:column;line-height:1.2;min-width:0}
.admin-shell .ns b {font-size:13px;font-weight:500}
.admin-shell .ns span {font-family:var(--mono);font-size:11px;color:var(--muted)}
.admin-shell .plan-pill, .admin-shell .status-pill {display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:99px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;font-weight:500}
.admin-shell .plan-pill.pro {background:var(--ink);color:var(--bg)}
.admin-shell .plan-pill.free {background:var(--bg-2);color:var(--muted);border:1px solid var(--hair)}
.admin-shell .status-pill .dot {width:5px;height:5px;border-radius:50%;background:currentColor}
.admin-shell .status-pill.active {background:var(--forest-soft);color:var(--forest)}
.admin-shell .status-pill.cancel {background:var(--tomato-soft);color:var(--tomato)}
.admin-shell .filter-bar {background:var(--paper);border:1px solid var(--hair);border-radius:10px;padding:8px 10px;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.admin-shell .filter-left {display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.admin-shell .fchip {display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:var(--paper-2);border:1px solid var(--hair);border-radius:99px;font-size:11.5px;color:var(--ink-2);transition:background .15s,border-color .15s;cursor:pointer}
.admin-shell .fchip:hover {background:var(--bg-2);border-color:var(--hair-2)}
.admin-shell .fchip.active {background:var(--ink);color:var(--bg);border-color:var(--ink)}
.admin-shell .fchip .ct {font-family:var(--mono);font-size:10px;color:var(--muted-2);background:var(--bg-2);padding:0 5px;border-radius:99px;margin-left:1px}
.admin-shell .fchip.active .ct {background:rgba(255,255,255,.18);color:rgba(255,255,255,.7)}
.admin-shell .fchip-divider {width:1px;height:18px;background:var(--hair);margin:0 4px}
.admin-shell .tab-row {display:inline-flex;background:var(--bg-2);padding:3px;border-radius:7px;border:1px solid var(--hair)}
.admin-shell .tab-row .tab {padding:5px 10px;border-radius:5px;font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.04em}
.admin-shell .tab-row .tab.active {background:var(--paper);color:var(--ink)}
.admin-shell .drawer-scrim {position:fixed;inset:0;background:rgba(26,24,20,.36);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
.admin-shell .drawer-scrim.open {opacity:1;pointer-events:auto}
.admin-shell .drawer {position:fixed;top:0;right:0;bottom:0;width:520px;max-width:92vw;background:var(--paper);border-left:1px solid var(--hair);box-shadow:var(--shadow-pop);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);z-index:51;display:flex;flex-direction:column;overflow:hidden}
.admin-shell .drawer.open {transform:translateX(0)}
/* Forms wrap drawer-body + drawer-foot; without this the form breaks the flex
   height chain and drawer-body clips instead of scrolling. */
.admin-shell .drawer > form {display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.admin-shell .drawer-head {padding:18px 22px 14px;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.admin-shell .drawer-head h2 {font-family:var(--serif);font-size:26px;letter-spacing:-.015em;line-height:1.05;font-weight:400}
.admin-shell .drawer-head h2 em {font-style:italic;color:var(--tomato)}
.admin-shell .drawer-head .meta-row {display:flex;gap:10px;align-items:center;margin-top:5px;font-family:var(--mono);font-size:11px;color:var(--muted);flex-wrap:wrap}
.admin-shell .drawer-close {width:30px;height:30px;border-radius:7px;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;background:var(--paper)}
.admin-shell .drawer-close:hover {background:var(--ink);color:var(--bg);border-color:var(--ink)}
.admin-shell .drawer-body {flex:1;min-height:0;overflow-y:auto;padding:18px 22px}
.admin-shell .drawer-section {margin-bottom:22px}
.admin-shell .drawer-section h3 {font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.admin-shell .drawer-section h3 a {font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--ink);border-bottom:1px solid var(--hair-3);padding-bottom:1px}
.admin-shell .field {display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.admin-shell .field label {font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.admin-shell .input {background:var(--paper-2);border:1px solid var(--hair);border-radius:7px;padding:9px 11px;font-size:13px;font-family:var(--sans);color:var(--ink);transition:border-color .15s}
.admin-shell .field .input {width:100%}
.admin-shell .input:focus {outline:none;border-color:var(--ink)}
.admin-shell .input.mono {font-family:var(--mono);font-size:12px}
.admin-shell .input::placeholder {color:var(--muted-2)}
.admin-shell select.input {cursor:pointer}
.admin-shell textarea.input {min-height:110px;line-height:1.5;resize:vertical}
.admin-shell .kv {display:grid;grid-template-columns:120px 1fr;gap:10px;font-size:13px;padding:6px 0}
.admin-shell .kv b {font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.admin-shell .kv span {color:var(--ink)}
.admin-shell .audit-mini {display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.admin-shell .audit-mini-cell {background:var(--paper-2);border:1px solid var(--hair);border-radius:7px;padding:9px 10px}
.admin-shell .audit-mini-cell .lab {font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.admin-shell .audit-mini-cell .v {font-family:var(--serif);font-size:22px;letter-spacing:-.02em;line-height:1;font-weight:400;font-variant-numeric:tabular-nums;margin-top:3px}
.admin-shell .audit-mini-cell.fail .v {color:var(--tomato)}
.admin-shell .audit-mini-cell.warn .v {color:oklch(.46 .12 75)}
.admin-shell .audit-mini-cell.pass .v {color:var(--forest)}
.admin-shell .thread {display:flex;flex-direction:column;gap:8px}
.admin-shell .msg {display: block;margin-bottom: 10px; padding:8px 10px;border:1px solid var(--hair);border-radius:8px;background:var(--paper-2)}
.admin-shell .msg .ava {width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,oklch(.55 .14 250),oklch(.42 .14 260));color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600}
.admin-shell .msg .ava.ext {background:linear-gradient(135deg,oklch(.62 .15 30),oklch(.5 .14 20))}
.admin-shell .msg .ava.sys {background:var(--ink);font-family:var(--serif);font-style:italic}
.admin-shell .msg .who {font-size:12.5px;font-weight:500;display:flex;justify-content:space-between;gap:8px}
.admin-shell .msg .who .when {font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:400}
.admin-shell .msg .text {font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.admin-shell .drawer-foot {padding:14px 22px;border-top:1px solid var(--hair);display:flex;gap:6px;background:var(--paper-2);flex-wrap:wrap}
.admin-shell .drawer-foot .tb-btn {flex:1;justify-content:center;min-width:90px}
.admin-shell .ic {width:13px;height:13px;stroke-width:1.7;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.admin-shell .ic-15 {width:15px;height:15px}
.admin-shell .ic-18 {width:18px;height:18px}
.admin-shell .reveal {opacity:0;transform:translateY(8px);transition:opacity .55s,transform .65s cubic-bezier(.2,.8,.2,1)}
.admin-shell .reveal.in {opacity:1;transform:none}
@media(prefers-reduced-motion:reduce) {
.admin-shell *, .admin-shell *::before, .admin-shell *::after {animation:none!important;transition:none!important}
}
@media print {
.admin-shell .sidebar, .admin-shell .topbar {display:none}
.admin-shell .main {padding:0}
}
.admin-shell :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {outline:var(--ring-w) solid var(--ring);outline-offset:var(--ring-off)}
.admin-shell .on-ink, .admin-shell footer {--ring:var(--gold)}

/* ====================================================================
   PAGE: admin/index   (scope: .page-admin-index)
   ==================================================================== */
:root.page-admin-index {
      --ring: oklch(0.54 0.19 30);
      --ring-w: 2px;
      --ring-off: 2px;
      --bg: #F4EFE6;
      --bg-2: #EBE4D6;
      --paper: #FBF8F2;
      --paper-2: #F7F2E8;
      --ink: #1A1814;
      --ink-2: #2C2823;
      --muted: #6B6258;
      --muted-2: #746C62;
      --hair: rgba(26, 24, 20, 0.10);
      --hair-2: rgba(26, 24, 20, 0.18);
      --hair-3: rgba(26, 24, 20, 0.30);
      --tomato: oklch(0.54 0.19 30);
      --tomato-soft: oklch(0.54 0.19 30 / .10);
      --forest: oklch(0.46 0.10 150);
      --forest-soft: oklch(0.46 0.10 150 / .12);
      --gold: oklch(0.74 0.13 75);
      --gold-soft: oklch(0.74 0.13 75 / .18);
      --slate: oklch(0.42 0.04 250);
      --slate-soft: oklch(0.42 0.04 250 / .10);
      --violet: oklch(0.55 0.14 290);
      --violet-soft: oklch(0.55 0.14 290 / .12);
      --blue: oklch(0.55 0.14 250);
      --blue-soft: oklch(0.55 0.14 250 / .12);
      --rose: oklch(0.92 0.04 30);
      --shadow-card: 0 1px 0 rgba(26, 24, 20, .04), 0 12px 28px -22px rgba(26, 24, 20, .18);
      --shadow-pop: 0 1px 0 rgba(26, 24, 20, .06), 0 24px 48px -28px rgba(26, 24, 20, .28);
      --serif: "Instrument Serif", Georgia, serif;
      --sans: "Geist", sans-serif;
      --mono: "JetBrains Mono", monospace;
      --sidebar-w: 240px;
      --topbar-h: 56px
    }
.page-admin-index *, .page-admin-index *::before, .page-admin-index *::after {
      box-sizing: border-box
    }
html.page-admin-index, .page-admin-index body {
      margin: 0;
      padding: 0
    }
.page-admin-index body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 13.5px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      font-feature-settings: "ss01", "cv11"
    }
.page-admin-index a {
      color: inherit;
      text-decoration: none
    }
.page-admin-index button {
      font: inherit;
      color: inherit;
      cursor: pointer;
      border: 0;
      background: none;
      padding: 0
    }
.page-admin-index input, .page-admin-index select, .page-admin-index textarea {
      font: inherit;
      color: inherit
    }
.page-admin-index ::selection {
      background: var(--ink);
      color: var(--bg)
    }
.page-admin-index :focus-visible {
      outline: 2px solid var(--tomato);
      outline-offset: 2px;
      border-radius: 6px
    }
.page-admin-index .tnum {
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum"
    }
.page-admin-index .mono {
      font-family: var(--mono);
      font-feature-settings: "tnum"
    }
.page-admin-index .app {
      display: grid;
      grid-template-columns: var(--sidebar-w) 1fr;
      grid-template-rows: var(--topbar-h) 1fr;
      grid-template-areas: "side topbar" "side main";
      min-height: 100vh
    }

.page-admin-index .sidebar {
      grid-area: side;
      background: var(--paper);
      border-right: 1px solid var(--hair);
      display: flex;
      flex-direction: column;
      padding: 14px 12px 12px;
      position: sticky;
      top: 0;
      height: 100vh
    }
.page-admin-index .brand {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 6px 8px 12px;
      border-bottom: 1px solid var(--hair);
      margin-bottom: 12px
    }
.page-admin-index .brand-mark {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      background: var(--ink);
      color: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif);
      font-size: 17px;
      font-style: italic;
      letter-spacing: -.02em;
      position: relative;
      flex-shrink: 0
    }
.page-admin-index .brand-mark::after {
      content: "";
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--gold);
      transform: translate(9px, -9px)
    }
.page-admin-index .brand-stack {
      display: flex;
      flex-direction: column;
      line-height: 1.05;
      min-width: 0
    }
.page-admin-index .brand-name {
      font-family: var(--serif);
      font-size: 19px;
      letter-spacing: -0.01em
    }
.page-admin-index .brand-name em {
      font-style: italic;
      color: var(--tomato)
    }
.page-admin-index .brand-sub {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 1px
    }
.page-admin-index .nav-group-label {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted-2);
      padding: 10px 10px 5px
    }
.page-admin-index .nav-list {
      display: flex;
      flex-direction: column;
      gap: 1px;
      margin-bottom: 4px
    }
.page-admin-index .nav-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 6px 10px;
      border-radius: 7px;
      font-size: 13px;
      color: var(--ink-2);
      transition: background .15s, color .15s;
      position: relative
    }
.page-admin-index .nav-item:hover {
      background: var(--bg-2);
      color: var(--ink)
    }
.page-admin-index .nav-item.active {
      background: var(--ink);
      color: var(--bg)
    }
.page-admin-index .nav-icon {
      width: 14px;
      height: 14px;
      color: var(--muted);
      flex-shrink: 0
    }
.page-admin-index .nav-item:hover .nav-icon, .page-admin-index .nav-item.active .nav-icon {
      color: currentColor
    }
.page-admin-index .nav-badge {
      margin-left: auto;
      font-family: var(--mono);
      font-size: 9.5px;
      background: var(--tomato);
      color: #fff;
      padding: 1px 5px;
      border-radius: 99px;
      font-weight: 500
    }
.page-admin-index .nav-item.active .nav-badge {
      background: var(--gold);
      color: var(--ink)
    }
.page-admin-index .nav-kbd {
      margin-left: auto;
      font-family: var(--mono);
      font-size: 9.5px;
      color: var(--muted-2);
      border: 1px solid var(--hair);
      padding: 1px 4px;
      border-radius: 3px;
      letter-spacing: .05em
    }
.page-admin-index .nav-item.active .nav-kbd {
      border-color: rgba(255, 255, 255, .2);
      color: rgba(255, 255, 255, .6)
    }
.page-admin-index .side-foot {
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid var(--hair)
    }
.page-admin-index .user-row {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 7px 6px;
      border-radius: 7px;
      cursor: pointer;
      width: 100%;
      text-align: left
    }
.page-admin-index .user-row:hover {
      background: var(--bg-2)
    }
.page-admin-index .user-avatar {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: linear-gradient(135deg, oklch(.62 .15 30), oklch(.5 .14 20));
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10.5px;
      font-weight: 600;
      flex-shrink: 0
    }
.page-admin-index .user-meta {
      flex: 1;
      line-height: 1.2;
      min-width: 0
    }
.page-admin-index .user-name {
      font-size: 12.5px;
      font-weight: 500
    }
.page-admin-index .user-role {
      font-size: 10.5px;
      color: var(--muted);
      font-family: var(--mono);
      letter-spacing: .04em;
      text-transform: uppercase
    }
.page-admin-index .topbar {
      grid-area: topbar;
      background: var(--bg);
      border-bottom: 1px solid var(--hair);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 22px;
      gap: 14px;
      position: sticky;
      top: 0;
      z-index: 40;
      backdrop-filter: saturate(140%) blur(10px)
    }
.page-admin-index .topbar-left {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0
    }
.page-admin-index .crumbs {
      display: flex;
      align-items: center;
      gap: 7px;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap
    }
.page-admin-index .crumbs .sep {
      color: var(--hair-3)
    }
.page-admin-index .crumbs .here {
      color: var(--ink);
      background: var(--paper);
      border: 1px solid var(--hair);
      padding: 3px 8px;
      border-radius: 5px;
      font-weight: 500;
      letter-spacing: .04em
    }
.page-admin-index .search {
      position: relative;
      width: 340px;
      max-width: 100%
    }
.page-admin-index .search input {
      width: 100%;
      padding: 7px 10px 7px 32px;
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 8px;
      font-size: 12.5px;
      font-family: var(--sans);
      transition: border-color .15s, background .15s
    }
.page-admin-index .search input:focus {
      outline: none;
      border-color: var(--ink-2);
      background: var(--paper-2)
    }
.page-admin-index .search .si {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      width: 13px;
      height: 13px
    }
.page-admin-index .search .kbd {
      position: absolute;
      right: 7px;
      top: 50%;
      transform: translateY(-50%);
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted-2);
      border: 1px solid var(--hair);
      padding: 1px 5px;
      border-radius: 4px;
      background: var(--bg-2)
    }
.page-admin-index .topbar-right {
      display: flex;
      align-items: center;
      gap: 7px
    }
.page-admin-index .tb-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 7px;
      border: 1px solid var(--hair);
      background: var(--paper);
      font-size: 12.5px;
      color: var(--ink-2);
      transition: background .15s, border-color .15s;
      white-space: nowrap
    }
.page-admin-index .tb-btn:hover {
      background: var(--bg-2);
      border-color: var(--hair-2)
    }
.page-admin-index .tb-btn.icon-only {
      padding: 6px;
      width: 30px;
      height: 30px;
      justify-content: center;
      position: relative
    }
.page-admin-index .tb-btn .dot {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--tomato);
      box-shadow: 0 0 0 2px var(--bg)
    }
.page-admin-index .tb-btn-primary {
      background: var(--ink);
      color: var(--bg);
      border-color: var(--ink)
    }
.page-admin-index .tb-btn-primary:hover {
      background: var(--tomato);
      border-color: var(--tomato)
    }
.page-admin-index .menu-btn {
      display: none;
      width: 32px;
      height: 32px;
      border: 1px solid var(--hair);
      border-radius: 7px;
      align-items: center;
      justify-content: center;
      background: var(--paper)
    }

.page-admin-index .main {
      grid-area: main;
      padding: 22px 26px 60px;
      width: 100%
    }
@media(max-width:900px) {
.page-admin-index .main {
        padding: 16px 14px 50px
      }
}
.page-admin-index .page-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 18px;
      margin: 4px 0 18px
    }
.page-admin-index .page-head h1 {
      font-family: var(--serif);
      font-size: clamp(28px, 3.6vw, 40px);
      letter-spacing: -.02em;
      line-height: 1;
      margin: 5px 0 0;
      font-weight: 400
    }
.page-admin-index .page-head h1 em {
      font-style: italic;
      color: var(--tomato)
    }
.page-admin-index .page-head .eyebrow {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted)
    }
.page-admin-index .page-head .head-act {
      display: flex;
      gap: 7px;
      align-items: center
    }
.page-admin-index .daterange {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border: 1px solid var(--hair);
      border-radius: 7px;
      background: var(--paper);
      font-family: var(--mono);
      font-size: 11px;
      color: var(--ink-2)
    }
.page-admin-index .daterange .led {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--forest)
    }
.page-admin-index .stat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 18px
    }
@media(max-width:1100px) {
.page-admin-index .stat-grid {
        grid-template-columns: repeat(2, 1fr)
      }
}
.page-admin-index .stat {
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 11px;
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: border-color .2s, box-shadow .2s, transform .25s;
      position: relative;
      overflow: hidden
    }
.page-admin-index .stat:hover {
      border-color: var(--hair-2);
      transform: translateY(-2px);
      box-shadow: var(--shadow-card)
    }
.page-admin-index .stat-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px
    }
.page-admin-index .stat-lab {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted)
    }
.page-admin-index .stat .delta {
      font-family: var(--mono);
      font-size: 10.5px;
      padding: 2px 6px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      letter-spacing: .04em
    }
.page-admin-index .stat .delta.up {
      color: var(--forest);
      background: var(--forest-soft)
    }
.page-admin-index .stat .delta.dn {
      color: var(--tomato);
      background: var(--tomato-soft)
    }
.page-admin-index .stat .delta.flat {
      color: var(--muted);
      background: var(--bg-2)
    }
.page-admin-index .stat-num {
      font-family: var(--serif);
      font-size: 38px;
      letter-spacing: -.03em;
      font-weight: 400;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      display: flex;
      align-items: baseline;
      gap: 5px
    }
.page-admin-index .stat-num small {
      font-size: 14px;
      color: var(--muted);
      font-family: var(--sans);
      letter-spacing: 0;
      font-weight: 400
    }
.page-admin-index .stat-sub {
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--muted);
      letter-spacing: .04em
    }
.page-admin-index .stat-spark {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 130px;
      height: 48px;
      opacity: .85;
      pointer-events: none
    }
.page-admin-index .stat-spark svg {
      width: 100%;
      height: 100%;
      display: block
    }
.page-admin-index .section {
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 12px;
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 14px
    }
.page-admin-index .section-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--hair)
    }
.page-admin-index .section-head h2 {
      font-family: var(--serif);
      font-size: 22px;
      letter-spacing: -.015em;
      line-height: 1.05;
      font-weight: 400
    }
.page-admin-index .section-head h2 em {
      font-style: italic;
      color: var(--tomato)
    }
.page-admin-index .section-head .sub {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 3px
    }
.page-admin-index .section-head .right {
      display: flex;
      gap: 6px;
      align-items: center
    }
.page-admin-index .tab-row {
      display: inline-flex;
      background: var(--bg-2);
      padding: 3px;
      border-radius: 7px;
      border: 1px solid var(--hair)
    }
.page-admin-index .tab-row .tab {
      padding: 5px 10px;
      border-radius: 5px;
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--muted);
      letter-spacing: .04em
    }
.page-admin-index .tab-row .tab.active {
      background: var(--paper);
      color: var(--ink)
    }
.page-admin-index .two-col {
      display: grid;
      grid-template-columns: 3fr 2fr;
      gap: 14px;
      margin-bottom: 18px
    }
@media(max-width:1100px) {
.page-admin-index .two-col {
        grid-template-columns: 1fr
      }
}
.page-admin-index .attn-list {
      display: flex;
      flex-direction: column;
      gap: 1px;
      margin: -4px -4px
    }
.page-admin-index .attn {
      display: grid;
      grid-template-columns: 24px 1fr auto auto;
      gap: 12px;
      align-items: center;
      padding: 10px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: background .15s
    }
.page-admin-index .attn:hover {
      background: var(--bg-2)
    }
.page-admin-index .attn .icn {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }
.page-admin-index .attn.crit .icn {
      background: var(--tomato-soft);
      color: var(--tomato)
    }
.page-admin-index .attn.warn .icn {
      background: var(--gold-soft);
      color: oklch(.5 .12 75)
    }
.page-admin-index .attn.info .icn {
      background: var(--blue-soft);
      color: var(--blue)
    }
.page-admin-index .attn .body {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0
    }
.page-admin-index .attn .body b {
      font-size: 13px;
      font-weight: 500;
      color: var(--ink);
      line-height: 1.35
    }
.page-admin-index .attn .body span {
      font-size: 11.5px;
      color: var(--muted);
      font-family: var(--mono)
    }
.page-admin-index .attn .sla {
      font-family: var(--mono);
      font-size: 10.5px;
      padding: 2px 6px;
      border-radius: 4px;
      letter-spacing: .04em;
      flex-shrink: 0;
      white-space: nowrap
    }
.page-admin-index .attn .sla.over {
      background: var(--tomato-soft);
      color: var(--tomato)
    }
.page-admin-index .attn .sla.soon {
      background: var(--gold-soft);
      color: oklch(.46 .12 75)
    }
.page-admin-index .attn .sla.ok {
      background: var(--forest-soft);
      color: var(--forest)
    }
.page-admin-index .attn .act {
      padding: 5px 9px;
      border: 1px solid var(--hair-2);
      border-radius: 6px;
      font-size: 11.5px;
      color: var(--ink);
      background: var(--paper);
      transition: background .15s, color .15s, border-color .15s;
      flex-shrink: 0;
      white-space: nowrap
    }
.page-admin-index .attn .act:hover {
      background: var(--ink);
      color: var(--bg);
      border-color: var(--ink)
    }
.page-admin-index .attn-divider {
      height: 1px;
      background: var(--hair);
      margin: 0 12px
    }
.page-admin-index .mini-kan {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: -2px
    }
.page-admin-index .mini-kan-row {
      display: grid;
      grid-template-columns: 130px 1fr 60px;
      gap: 10px;
      align-items: center;
      padding: 9px 10px;
      border-radius: 8px;
      background: var(--paper-2);
      border: 1px solid var(--hair);
      transition: border-color .2s, background .15s;
      cursor: pointer
    }
.page-admin-index .mini-kan-row:hover {
      border-color: var(--hair-2);
      background: var(--paper)
    }
.page-admin-index .mini-kan-row.bottleneck {
      border-color: var(--tomato);
      background: linear-gradient(90deg, var(--tomato-soft), transparent 50%)
    }
.page-admin-index .mini-kan-row.bottleneck .kn {
      color: var(--tomato);
      font-weight: 500
    }
.page-admin-index .mini-kan-row .kn {
      font-size: 12.5px;
      color: var(--ink-2);
      display: flex;
      align-items: center;
      gap: 6px
    }
.page-admin-index .mini-kan-row .stage-num {
      font-family: var(--mono);
      font-size: 9.5px;
      color: var(--muted-2);
      background: var(--bg-2);
      padding: 1px 5px;
      border-radius: 3px;
      letter-spacing: .04em
    }
.page-admin-index .mini-kan-row .bar {
      position: relative;
      height: 6px;
      background: var(--bg-2);
      border-radius: 99px;
      overflow: hidden
    }
.page-admin-index .mini-kan-row .bar>i {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: var(--ink);
      border-radius: 99px;
      display: block
    }
.page-admin-index .mini-kan-row.bottleneck .bar>i {
      background: var(--tomato)
    }
.page-admin-index .mini-kan-row .ct {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 500;
      color: var(--ink);
      text-align: right;
      font-variant-numeric: tabular-nums
    }
.page-admin-index .activity {
      display: flex;
      flex-direction: column;
      gap: 0
    }
.page-admin-index .act-row {
      display: grid;
      grid-template-columns: 12px 1fr auto;
      gap: 14px;
      padding: 10px 0;
      border-bottom: 1px solid var(--hair);
      align-items: center;
      cursor: pointer;
      transition: background .15s;
      padding-left: 8px;
      padding-right: 8px;
      border-radius: 6px;
      border-bottom: 1px solid var(--hair)
    }
.page-admin-index .act-row:hover {
      background: var(--bg-2)
    }
.page-admin-index .act-row:last-child {
      border-bottom: 0
    }
.page-admin-index .act-row .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--ink);
      box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--hair-2);
      justify-self: center
    }
.page-admin-index .act-row.win .dot {
      background: var(--forest);
      box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--forest-soft)
    }
.page-admin-index .act-row.lead .dot {
      background: var(--tomato);
      box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--tomato-soft)
    }
.page-admin-index .act-row.audit .dot {
      background: var(--blue);
      box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--blue-soft)
    }
.page-admin-index .act-row.signup .dot {
      background: var(--violet);
      box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--violet-soft)
    }
.page-admin-index .act-row .body {
      display: flex;
      align-items: baseline;
      gap: 6px;
      flex-wrap: wrap;
      min-width: 0
    }
.page-admin-index .act-row .who {
      font-size: 12.5px;
      color: var(--ink);
      font-weight: 500
    }
.page-admin-index .act-row .verb {
      font-size: 12.5px;
      color: var(--muted)
    }
.page-admin-index .act-row .obj {
      font-size: 12.5px;
      color: var(--ink)
    }
.page-admin-index .act-row .obj b {
      font-weight: 500
    }
.page-admin-index .act-row .meta {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted-2);
      letter-spacing: .04em;
      white-space: nowrap
    }
.page-admin-index .q-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 18px
    }
@media(max-width:900px) {
.page-admin-index .q-strip {
        grid-template-columns: 1fr
      }
}
.page-admin-index .q {
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 10px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 14px
    }
.page-admin-index .q .led {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      position: relative
    }
.page-admin-index .q .led::after {
      content: "";
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      background: currentColor;
      opacity: .18;
      animation: page-admin-index__pulse 2.4s ease-in-out infinite
    }
.page-admin-index .q.green .led {
      background: var(--forest);
      color: var(--forest)
    }
.page-admin-index .q.amber .led {
      background: var(--gold);
      color: var(--gold)
    }
.page-admin-index .q.red .led {
      background: var(--tomato);
      color: var(--tomato)
    }
.page-admin-index .q .body {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0
    }
.page-admin-index .q .body b {
      font-size: 13px;
      font-weight: 500
    }
.page-admin-index .q .body span {
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--muted);
      letter-spacing: .04em
    }
.page-admin-index .q .stat-mini {
      font-family: var(--mono);
      font-size: 14px;
      font-weight: 500;
      color: var(--ink);
      font-variant-numeric: tabular-nums
    }
.page-admin-index .q .stat-mini small {
      font-size: 10.5px;
      color: var(--muted);
      font-weight: 400;
      margin-left: 3px
    }
@keyframes page-admin-index__pulse {

      0%,
      100% {
        transform: scale(1);
        opacity: .18
      }

      50% {
        transform: scale(1.4);
        opacity: 0
      }
    }
.page-admin-index .ic {
      width: 13px;
      height: 13px;
      stroke-width: 1.7;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round
    }
.page-admin-index .ic-15 {
      width: 15px;
      height: 15px
    }
.page-admin-index .ic-18 {
      width: 18px;
      height: 18px
    }
.page-admin-index .reveal {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .55s, transform .65s cubic-bezier(.2, .8, .2, 1)
    }
.page-admin-index .reveal.in {
      opacity: 1;
      transform: none
    }
.page-admin-index .stagger>* {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .55s, transform .6s cubic-bezier(.2, .8, .2, 1)
    }
.page-admin-index .stagger.in>* {
      opacity: 1;
      transform: none
    }
.page-admin-index .stagger.in>*:nth-child(1) {
      transition-delay: .04s
    }
.page-admin-index .stagger.in>*:nth-child(2) {
      transition-delay: .08s
    }
.page-admin-index .stagger.in>*:nth-child(3) {
      transition-delay: .12s
    }
.page-admin-index .stagger.in>*:nth-child(4) {
      transition-delay: .16s
    }
.page-admin-index .stagger.in>*:nth-child(5) {
      transition-delay: .20s
    }
.page-admin-index .stagger.in>*:nth-child(6) {
      transition-delay: .24s
    }
.page-admin-index .stagger.in>*:nth-child(7) {
      transition-delay: .28s
    }
.page-admin-index .stagger.in>*:nth-child(8) {
      transition-delay: .32s
    }
@media(prefers-reduced-motion:reduce) {
.page-admin-index *, .page-admin-index *::before, .page-admin-index *::after {
        animation: none !important;
        transition: none !important
      }
}
@media print {
.page-admin-index .sidebar, .page-admin-index .topbar {
        display: none
      }
.page-admin-index .main {
        padding: 0
      }
}
.page-admin-index :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
      outline: var(--ring-w) solid var(--ring);
      outline-offset: var(--ring-off)
    }
.page-admin-index .on-ink, .page-admin-index footer {
      --ring: var(--gold)
    }

/* ====================================================================
   PAGE: admin/login   (scope: .page-admin-login)
   ==================================================================== */
:root.page-admin-login {
      --ring: oklch(0.54 0.19 30);
      --ring-w: 2px;
      --ring-off: 2px;
      --bg: #F4EFE6;
      --bg-2: #EBE4D6;
      --paper: #FBF8F2;
      --paper-2: #F7F2E8;
      --ink: #1A1814;
      --ink-2: #2C2823;
      --muted: #6B6258;
      --muted-2: #746C62;
      --hair: rgba(26, 24, 20, .10);
      --hair-2: rgba(26, 24, 20, .18);
      --tomato: oklch(.54 .19 30);
      --tomato-soft: oklch(.54 .19 30 / .10);
      --forest: oklch(.46 .10 150);
      --forest-soft: oklch(.46 .10 150 / .12);
      --gold: oklch(.74 .13 75);
      --shadow-pop: 0 4px 0 rgba(26, 24, 20, .04), 0 32px 60px -20px rgba(26, 24, 20, .32);
      --serif: "Instrument Serif", Georgia, serif;
      --sans: "Geist", sans-serif;
      --mono: "JetBrains Mono", monospace
    }
.page-admin-login *, .page-admin-login *::before, .page-admin-login *::after {
      box-sizing: border-box
    }
html.page-admin-login, .page-admin-login body {
      margin: 0;
      padding: 0
    }
.page-admin-login body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 14px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      font-feature-settings: "ss01", "cv11";
      min-height: 100vh;
      overflow-x: hidden
    }
.page-admin-login .tnum {
      font-variant-numeric: tabular-nums
    }
.page-admin-login ::selection {
      background: var(--ink);
      color: var(--bg)
    }
.page-admin-login .page {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1fr 1fr
    }
@media(max-width:960px) {
.page-admin-login .page {
        grid-template-columns: 1fr
      }
}
.page-admin-login .stage {
      position: relative;
      background: var(--ink);
      color: var(--paper);
      padding: 36px 44px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 100vh
    }
@media(max-width:960px) {
.page-admin-login .stage {
        min-height: auto;
        padding: 28px 24px 36px
      }
}
.page-admin-login .stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 1px 1px, rgba(246, 244, 239, .05) 1px, transparent 0);
      background-size: 32px 32px;
      pointer-events: none
    }
.page-admin-login .stage-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      z-index: 2
    }
.page-admin-login .brand {
      display: flex;
      align-items: center;
      gap: 10px
    }
.page-admin-login .brand-mark {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--paper);
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif);
      font-size: 19px;
      font-style: italic;
      letter-spacing: -.02em;
      position: relative
    }
.page-admin-login .brand-mark::after {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
      transform: translate(11px, -11px)
    }
.page-admin-login .brand-name {
      font-family: var(--serif);
      font-size: 21px;
      letter-spacing: -.01em;
      line-height: 1;
      margin-bottom: 2px
    }
.page-admin-login .brand-name em {
      font-style: italic;
      color: var(--tomato)
    }
.page-admin-login .brand-sub {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(246, 244, 239, .55)
    }
.page-admin-login .stage-meta {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(246, 244, 239, .45);
      text-align: right;
      line-height: 1.6
    }
.page-admin-login .stage-meta b {
      color: var(--paper);
      font-weight: 400
    }
.page-admin-login .stage-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 60px 0;
      position: relative;
      z-index: 2;
      max-width: 520px
    }
@media(max-width:960px) {
.page-admin-login .stage-body {
        padding: 40px 0 24px
      }
}
.page-admin-login .eyebrow {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px
    }
.page-admin-login .eyebrow .pulse {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
      animation: page-admin-login__p 2s infinite
    }
@keyframes page-admin-login__p {
      0% {
        box-shadow: 0 0 0 0 var(--gold)
      }

      70% {
        box-shadow: 0 0 0 8px transparent
      }

      100% {
        box-shadow: 0 0 0 0 transparent
      }
    }
.page-admin-login .headline {
      font-family: var(--serif);
      font-size: clamp(40px, 5.5vw, 68px);
      letter-spacing: -.02em;
      line-height: 1.02;
      font-weight: 400;
      margin: 0
    }
.page-admin-login .headline em {
      font-style: italic;
      color: var(--tomato)
    }
.page-admin-login .dek {
      font-family: var(--serif);
      font-size: 21px;
      font-style: italic;
      color: rgba(246, 244, 239, .7);
      margin-top: 18px;
      line-height: 1.4;
      max-width: 46ch
    }
.page-admin-login .ticker {
      margin-top: 36px;
      padding: 14px 16px;
      background: rgba(246, 244, 239, .04);
      border: 1px solid rgba(246, 244, 239, .10);
      border-radius: 11px;
      display: flex;
      flex-direction: column;
      gap: 9px
    }
.page-admin-login .ticker-head {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(246, 244, 239, .55);
      padding-bottom: 9px;
      border-bottom: 1px dashed rgba(246, 244, 239, .10)
    }
.page-admin-login .ticker-head .ld {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--forest);
      box-shadow: 0 0 0 0 var(--forest);
      animation: page-admin-login__p 2s infinite;
      --gold: var(--forest)
    }
.page-admin-login .tk-row {
      display: grid;
      grid-template-columns: 60px 1fr auto;
      gap: 12px;
      font-family: var(--mono);
      font-size: 11.5px;
      align-items: baseline
    }
.page-admin-login .tk-row .ts {
      color: rgba(246, 244, 239, .45);
      letter-spacing: .04em
    }
.page-admin-login .tk-row .ev {
      color: var(--paper);
      letter-spacing: .01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }
.page-admin-login .tk-row .ev em {
      color: var(--gold);
      font-style: normal
    }
.page-admin-login .tk-row .ev b {
      color: var(--tomato);
      font-weight: 400
    }
.page-admin-login .tk-row .vl {
      color: rgba(246, 244, 239, .7);
      font-variant-numeric: tabular-nums
    }
.page-admin-login .stage-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .06em;
      color: rgba(246, 244, 239, .4);
      position: relative;
      z-index: 2
    }
.page-admin-login .stage-foot a {
      color: rgba(246, 244, 239, .7)
    }
.page-admin-login .stage-foot a:hover {
      color: var(--paper)
    }
.page-admin-login .form-side {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 36px 44px;
      min-height: 100vh;
      position: relative
    }
@media(max-width:960px) {
.page-admin-login .form-side {
        min-height: auto;
        padding: 28px 24px 36px
      }
}
.page-admin-login .form-side::before {
      content: "01 / 03 — auth";
      position: absolute;
      top: 36px;
      right: 44px;
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .14em;
      color: var(--muted);
      text-transform: uppercase
    }
.page-admin-login .form-card {
      max-width: 420px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 24px
    }
.page-admin-login .form-h {
      font-family: var(--serif);
      font-size: 36px;
      letter-spacing: -.015em;
      line-height: 1.1;
      font-weight: 400;
      margin: 0
    }
.page-admin-login .form-h em {
      font-style: italic;
      color: var(--tomato)
    }
.page-admin-login .form-sub {
      font-size: 14px;
      color: var(--muted);
      max-width: 42ch
    }
.page-admin-login .form-sub a {
      color: var(--ink);
      border-bottom: 1px solid var(--hair-2)
    }
.page-admin-login .form-sub a:hover {
      border-bottom-color: var(--ink)
    }
.page-admin-login .field {
      display: flex;
      flex-direction: column;
      gap: 6px
    }
.page-admin-login .field label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      display: flex;
      justify-content: space-between;
      align-items: center
    }
.page-admin-login .field label a {
      color: var(--ink);
      font-weight: 500;
      letter-spacing: .04em;
      text-transform: none;
      font-size: 11px;
      border-bottom: 1px solid var(--hair-2)
    }
.page-admin-login .input {
      background: var(--paper);
      border: 1px solid var(--hair-2);
      border-radius: 9px;
      padding: 13px 14px;
      font-size: 14.5px;
      font-family: var(--sans);
      transition: border-color .15s, box-shadow .15s, background .15s;
      width: 100%
    }
.page-admin-login .input:focus {
      outline: none;
      border-color: var(--ink);
      background: var(--paper-2);
      box-shadow: 0 0 0 4px rgba(26, 24, 20, .06)
    }
.page-admin-login .input.mono {
      font-family: var(--mono);
      font-size: 13.5px
    }
.page-admin-login .pw-wrap {
      position: relative
    }
.page-admin-login .pw-wrap .toggle-eye {
      position: absolute;
      right: 11px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: 0;
      color: var(--muted);
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 5px
    }
.page-admin-login .pw-wrap .toggle-eye:hover {
      color: var(--ink);
      background: var(--bg-2)
    }
.page-admin-login .pw-wrap .toggle-eye svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      stroke-width: 1.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round
    }
.page-admin-login .row-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      color: var(--muted)
    }
.page-admin-login .checkbox {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer
    }
.page-admin-login .checkbox input {
      position: absolute;
      opacity: 0;
      pointer-events: none
    }
.page-admin-login .checkbox .cb {
      width: 16px;
      height: 16px;
      border: 1.5px solid var(--hair-2);
      border-radius: 4px;
      background: var(--paper);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s, border-color .15s;
      flex-shrink: 0
    }
.page-admin-login .checkbox .cb svg {
      width: 11px;
      height: 11px;
      stroke: var(--paper);
      stroke-width: 3;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;
      transition: opacity .15s
    }
.page-admin-login .checkbox input:checked+.cb {
      background: var(--ink);
      border-color: var(--ink)
    }
.page-admin-login .checkbox input:checked+.cb svg {
      opacity: 1
    }
.page-admin-login .btn-primary {
      background: var(--ink);
      color: var(--paper);
      border: 1px solid var(--ink);
      border-radius: 9px;
      padding: 14px 18px;
      font-size: 14.5px;
      font-weight: 500;
      font-family: var(--sans);
      cursor: pointer;
      transition: background .15s, transform .12s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px
    }
.page-admin-login .btn-primary:hover {
      background: var(--tomato);
      border-color: var(--tomato)
    }
.page-admin-login .btn-primary:active {
      transform: translateY(1px)
    }
.page-admin-login .btn-primary svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round
    }
.page-admin-login .divider {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted-2)
    }
.page-admin-login .divider::before, .page-admin-login .divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--hair)
    }
.page-admin-login .sso-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
    }
.page-admin-login .btn-ghost {
      background: var(--paper);
      border: 1px solid var(--hair-2);
      border-radius: 9px;
      padding: 11px 14px;
      font-size: 13px;
      font-family: var(--sans);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--ink-2);
      transition: background .15s, border-color .15s
    }
.page-admin-login .btn-ghost:hover {
      background: var(--bg-2);
      border-color: var(--ink-2)
    }
.page-admin-login .btn-ghost svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0
    }
.page-admin-login .security {
      padding: 13px 14px;
      background: var(--bg-2);
      border: 1px solid var(--hair);
      border-radius: 10px;
      display: flex;
      align-items: flex-start;
      gap: 11px;
      font-size: 12.5px;
      color: var(--ink-2)
    }
.page-admin-login .security svg {
      width: 15px;
      height: 15px;
      color: var(--forest);
      stroke: currentColor;
      stroke-width: 1.7;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
      margin-top: 1px
    }
.page-admin-login .security b {
      display: block;
      font-weight: 500;
      margin-bottom: 1px
    }
.page-admin-login .security .meta {
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--muted);
      letter-spacing: .04em;
      margin-top: 3px
    }
.page-admin-login .legal {
      font-size: 12px;
      color: var(--muted);
      text-align: center;
      line-height: 1.6;
      margin-top: 8px
    }
.page-admin-login .legal a {
      color: var(--ink-2);
      border-bottom: 1px solid var(--hair)
    }
.page-admin-login .alert {
      padding: 11px 13px;
      background: var(--tomato-soft);
      border: 1px solid var(--tomato);
      border-radius: 9px;
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: 13px;
      color: oklch(.32 .15 30)
    }
.page-admin-login .alert b {
      display: block;
      font-weight: 500
    }
.page-admin-login .alert svg {
      width: 15px;
      height: 15px;
      color: var(--tomato);
      stroke: currentColor;
      stroke-width: 1.8;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
      margin-top: 1px
    }
.page-admin-login .alert .meta {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .04em;
      margin-top: 3px;
      color: oklch(.42 .12 35)
    }
.page-admin-login :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
      outline: var(--ring-w) solid var(--ring);
      outline-offset: var(--ring-off)
    }
.page-admin-login .on-ink, .page-admin-login footer {
      --ring: var(--gold)
    }
@media (prefers-reduced-motion:reduce) {
.page-admin-login *, .page-admin-login *::before, .page-admin-login *::after {
        animation: none !important;
        transition: none !important
      }
.page-admin-login .reveal {
        opacity: 1;
        transform: none
      }
}

/* ====================================================================
   PAGE: admin/pipeline   (scope: .page-admin-pipeline)
   ==================================================================== */
:root.page-admin-pipeline {
      --ring: oklch(0.54 0.19 30);
      --ring-w: 2px;
      --ring-off: 2px;
      --bg: #F4EFE6;
      --bg-2: #EBE4D6;
      --paper: #FBF8F2;
      --paper-2: #F7F2E8;
      --ink: #1A1814;
      --ink-2: #2C2823;
      --muted: #6B6258;
      --muted-2: #746C62;
      --hair: rgba(26, 24, 20, 0.10);
      --hair-2: rgba(26, 24, 20, 0.18);
      --hair-3: rgba(26, 24, 20, 0.30);
      --tomato: oklch(0.54 0.19 30);
      --tomato-soft: oklch(0.54 0.19 30 / .10);
      --forest: oklch(0.46 0.10 150);
      --forest-soft: oklch(0.46 0.10 150 / .12);
      --gold: oklch(0.74 0.13 75);
      --gold-soft: oklch(0.74 0.13 75 / .18);
      --violet: oklch(0.55 0.14 290);
      --violet-soft: oklch(0.55 0.14 290 / .12);
      --blue: oklch(0.55 0.14 250);
      --blue-soft: oklch(0.55 0.14 250 / .12);
      --rose: oklch(0.92 0.04 30);
      --shadow-card: 0 1px 0 rgba(26, 24, 20, .04), 0 12px 28px -22px rgba(26, 24, 20, .18);
      --shadow-pop: 0 4px 0 rgba(26, 24, 20, .04), 0 32px 60px -20px rgba(26, 24, 20, .32);
      --serif: "Instrument Serif", Georgia, serif;
      --sans: "Geist", sans-serif;
      --mono: "JetBrains Mono", monospace;
      --sidebar-w: 240px;
      --topbar-h: 56px
    }
.page-admin-pipeline *, .page-admin-pipeline *::before, .page-admin-pipeline *::after {
      box-sizing: border-box
    }
html.page-admin-pipeline, .page-admin-pipeline body {
      margin: 0;
      padding: 0
    }
.page-admin-pipeline body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 13.5px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      font-feature-settings: "ss01", "cv11"
    }
.page-admin-pipeline a {
      color: inherit;
      text-decoration: none
    }
.page-admin-pipeline button {
      font: inherit;
      color: inherit;
      cursor: pointer;
      border: 0;
      background: none;
      padding: 0
    }
.page-admin-pipeline input, .page-admin-pipeline select, .page-admin-pipeline textarea {
      font: inherit;
      color: inherit
    }
.page-admin-pipeline ::selection {
      background: var(--ink);
      color: var(--bg)
    }
.page-admin-pipeline :focus-visible {
      outline: 2px solid var(--tomato);
      outline-offset: 2px;
      border-radius: 6px
    }
.page-admin-pipeline .tnum {
      font-variant-numeric: tabular-nums
    }
.page-admin-pipeline .mono {
      font-family: var(--mono);
      font-feature-settings: "tnum"
    }
.page-admin-pipeline .app {
      display: grid;
      grid-template-columns: var(--sidebar-w) 1fr;
      grid-template-rows: var(--topbar-h) 1fr;
      grid-template-areas: "side topbar" "side main";
      min-height: 100vh
    }

.page-admin-pipeline .sidebar {
      grid-area: side;
      background: var(--paper);
      border-right: 1px solid var(--hair);
      display: flex;
      flex-direction: column;
      padding: 14px 12px 12px;
      position: sticky;
      top: 0;
      height: 100vh
    }
.page-admin-pipeline .brand {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 6px 8px 12px;
      border-bottom: 1px solid var(--hair);
      margin-bottom: 12px
    }
.page-admin-pipeline .brand-mark {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      background: var(--ink);
      color: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif);
      font-size: 17px;
      font-style: italic;
      letter-spacing: -.02em;
      position: relative;
      flex-shrink: 0
    }
.page-admin-pipeline .brand-mark::after {
      content: "";
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--gold);
      transform: translate(9px, -9px)
    }
.page-admin-pipeline .brand-stack {
      display: flex;
      flex-direction: column;
      line-height: 1.05;
      min-width: 0
    }
.page-admin-pipeline .brand-name {
      font-family: var(--serif);
      font-size: 19px;
      letter-spacing: -0.01em
    }
.page-admin-pipeline .brand-name em {
      font-style: italic;
      color: var(--tomato)
    }
.page-admin-pipeline .brand-sub {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 1px
    }
.page-admin-pipeline .nav-group-label {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted-2);
      padding: 10px 10px 5px
    }
.page-admin-pipeline .nav-list {
      display: flex;
      flex-direction: column;
      gap: 1px
    }
.page-admin-pipeline .nav-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 6px 10px;
      border-radius: 7px;
      font-size: 13px;
      color: var(--ink-2);
      transition: background .15s, color .15s
    }
.page-admin-pipeline .nav-item:hover {
      background: var(--bg-2);
      color: var(--ink)
    }
.page-admin-pipeline .nav-item.active {
      background: var(--ink);
      color: var(--bg)
    }
.page-admin-pipeline .nav-icon {
      width: 14px;
      height: 14px;
      color: var(--muted);
      flex-shrink: 0
    }
.page-admin-pipeline .nav-item:hover .nav-icon, .page-admin-pipeline .nav-item.active .nav-icon {
      color: currentColor
    }
.page-admin-pipeline .nav-badge {
      margin-left: auto;
      font-family: var(--mono);
      font-size: 9.5px;
      background: var(--tomato);
      color: #fff;
      padding: 1px 5px;
      border-radius: 99px
    }
.page-admin-pipeline .nav-item.active .nav-badge {
      background: var(--gold);
      color: var(--ink)
    }
.page-admin-pipeline .nav-kbd {
      margin-left: auto;
      font-family: var(--mono);
      font-size: 9.5px;
      color: var(--muted-2);
      border: 1px solid var(--hair);
      padding: 1px 4px;
      border-radius: 3px;
      letter-spacing: .05em
    }
.page-admin-pipeline .nav-item.active .nav-kbd {
      border-color: rgba(255, 255, 255, .2);
      color: rgba(255, 255, 255, .6)
    }
.page-admin-pipeline .side-foot {
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid var(--hair)
    }
.page-admin-pipeline .user-row {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 7px 6px;
      border-radius: 7px;
      cursor: pointer;
      width: 100%;
      text-align: left
    }
.page-admin-pipeline .user-row:hover {
      background: var(--bg-2)
    }
.page-admin-pipeline .user-avatar {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: linear-gradient(135deg, oklch(.62 .15 30), oklch(.5 .14 20));
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10.5px;
      font-weight: 600;
      flex-shrink: 0
    }
.page-admin-pipeline .user-meta {
      flex: 1;
      line-height: 1.2;
      min-width: 0
    }
.page-admin-pipeline .user-name {
      font-size: 12.5px;
      font-weight: 500
    }
.page-admin-pipeline .user-role {
      font-size: 10.5px;
      color: var(--muted);
      font-family: var(--mono);
      letter-spacing: .04em;
      text-transform: uppercase
    }
.page-admin-pipeline .topbar {
      grid-area: topbar;
      background: var(--bg);
      border-bottom: 1px solid var(--hair);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 22px;
      gap: 14px;
      position: sticky;
      top: 0;
      z-index: 40;
      backdrop-filter: saturate(140%) blur(10px)
    }
.page-admin-pipeline .topbar-left {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0
    }
.page-admin-pipeline .crumbs {
      display: flex;
      align-items: center;
      gap: 7px;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted)
    }
.page-admin-pipeline .crumbs .sep {
      color: var(--hair-3)
    }
.page-admin-pipeline .crumbs .here {
      color: var(--ink);
      background: var(--paper);
      border: 1px solid var(--hair);
      padding: 3px 8px;
      border-radius: 5px;
      font-weight: 500
    }
.page-admin-pipeline .search {
      position: relative;
      width: 300px;
      max-width: 100%
    }
.page-admin-pipeline .search input {
      width: 100%;
      padding: 7px 10px 7px 32px;
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 8px;
      font-size: 12.5px
    }
.page-admin-pipeline .search input:focus {
      outline: none;
      border-color: var(--ink-2);
      background: var(--paper-2)
    }
.page-admin-pipeline .search .si {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      width: 13px;
      height: 13px
    }
.page-admin-pipeline .search .kbd {
      position: absolute;
      right: 7px;
      top: 50%;
      transform: translateY(-50%);
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted-2);
      border: 1px solid var(--hair);
      padding: 1px 5px;
      border-radius: 4px;
      background: var(--bg-2)
    }
.page-admin-pipeline .topbar-right {
      display: flex;
      align-items: center;
      gap: 7px
    }
.page-admin-pipeline .tb-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 7px;
      border: 1px solid var(--hair);
      background: var(--paper);
      font-size: 12.5px;
      color: var(--ink-2);
      transition: background .15s, border-color .15s;
      white-space: nowrap
    }
.page-admin-pipeline .tb-btn:hover {
      background: var(--bg-2);
      border-color: var(--hair-2)
    }
.page-admin-pipeline .tb-btn.icon-only {
      padding: 6px;
      width: 30px;
      height: 30px;
      justify-content: center;
      position: relative
    }
.page-admin-pipeline .tb-btn .dot {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--tomato);
      box-shadow: 0 0 0 2px var(--bg)
    }
.page-admin-pipeline .tb-btn-primary {
      background: var(--ink);
      color: var(--bg);
      border-color: var(--ink)
    }
.page-admin-pipeline .tb-btn-primary:hover {
      background: var(--tomato);
      border-color: var(--tomato)
    }
.page-admin-pipeline .menu-btn {
      display: none;
      width: 32px;
      height: 32px;
      border: 1px solid var(--hair);
      border-radius: 7px;
      align-items: center;
      justify-content: center;
      background: var(--paper)
    }

.page-admin-pipeline .main {
      grid-area: main;
      padding: 18px 26px 60px;
      width: 100%;
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - var(--topbar-h));
      overflow: hidden;
    }
@media(max-width:900px) {
.page-admin-pipeline .main {
        padding: 14px 14px 50px
      }
}
.page-admin-pipeline .page-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 18px;
      margin: 4px 0 14px
    }
.page-admin-pipeline .page-head h1 {
      font-family: var(--serif);
      font-size: clamp(28px, 3.6vw, 40px);
      letter-spacing: -.02em;
      line-height: 1;
      margin: 5px 0 0;
      font-weight: 400
    }
.page-admin-pipeline .page-head h1 em {
      font-style: italic;
      color: var(--tomato)
    }
.page-admin-pipeline .page-head .eyebrow {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted)
    }
.page-admin-pipeline .page-head .head-act {
      display: flex;
      gap: 7px;
      align-items: center
    }
.page-admin-pipeline .filter-bar {
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      flex-wrap: wrap
    }
.page-admin-pipeline .filter-left {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap
    }
.page-admin-pipeline .fchip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 10px;
      background: var(--paper-2);
      border: 1px solid var(--hair);
      border-radius: 99px;
      font-size: 11.5px;
      color: var(--ink-2);
      transition: background .15s, border-color .15s;
      font-family: var(--sans);
      cursor: pointer
    }
.page-admin-pipeline .fchip:hover {
      background: var(--bg-2);
      border-color: var(--hair-2)
    }
.page-admin-pipeline .fchip.active {
      background: var(--ink);
      color: var(--bg);
      border-color: var(--ink)
    }
.page-admin-pipeline .fchip .ct {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted-2);
      background: var(--bg-2);
      padding: 0 5px;
      border-radius: 99px;
      margin-left: 1px
    }
.page-admin-pipeline .fchip.active .ct {
      background: rgba(255, 255, 255, .18);
      color: rgba(255, 255, 255, .7)
    }
.page-admin-pipeline .fchip-divider {
      width: 1px;
      height: 18px;
      background: var(--hair);
      margin: 0 4px
    }
.page-admin-pipeline .view-switcher, .page-admin-funnel .view-switcher {
      display: inline-flex;
      background: var(--bg-2);
      padding: 3px;
      border-radius: 7px;
      border: 1px solid var(--hair)
    }
.page-admin-pipeline .view-switcher .vs, .page-admin-funnel .view-switcher .vs {
      padding: 5px 9px;
      border-radius: 5px;
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--muted);
      letter-spacing: .04em;
      display: inline-flex;
      gap: 5px;
      align-items: center
    }
.page-admin-pipeline .view-switcher .vs.active, .page-admin-funnel .view-switcher .vs.active {
      background: var(--paper);
      color: var(--ink)
    }
.page-admin-pipeline .kanban-wrap, .page-admin-funnel .kanban-wrap {
      flex: 1;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 14px;
      margin: 0 -26px;
      padding-left: 26px;
      padding-right: 26px
    }
.page-admin-pipeline .kanban, .page-admin-funnel .kanban {
      display: grid;
      grid-template-columns: repeat(8, 272px) 200px 200px;
      gap: 10px;
      align-items: start;
      padding-top: 2px
    }
.page-admin-pipeline .col, .page-admin-funnel .col {
      background: transparent;
      border-radius: 11px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 520px
    }
.page-admin-pipeline .col.collapsed, .page-admin-funnel .col.collapsed {
      background: var(--paper-2);
      border: 1px solid var(--hair);
      padding: 10px;
      width: 200px
    }
.page-admin-pipeline .col-head, .page-admin-funnel .col-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 4px 6px 10px;
      border-bottom: 1px solid var(--hair);
      position: sticky;
      top: 0;
      background: var(--bg);
      z-index: 5
    }
.page-admin-pipeline .col-head .lh, .page-admin-funnel .col-head .lh {
      display: flex;
      align-items: center;
      gap: 8px
    }
.page-admin-pipeline .col-head .stage-num, .page-admin-funnel .col-head .stage-num {
      font-family: var(--mono);
      font-size: 9.5px;
      color: var(--muted-2);
      background: var(--paper);
      border: 1px solid var(--hair);
      padding: 1px 5px;
      border-radius: 3px;
      letter-spacing: .04em
    }
.page-admin-pipeline .col-head h3, .page-admin-funnel .col-head h3 {
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: -.01em;
      font-weight: 400;
      line-height: 1
    }
.page-admin-pipeline .col-head .ct, .page-admin-funnel .col-head .ct {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      font-variant-numeric: tabular-nums
    }
.page-admin-pipeline .col-head .add, .page-admin-funnel .col-head .add {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s, color .15s
    }
.page-admin-pipeline .col-head .add:hover, .page-admin-funnel .col-head .add:hover {
      background: var(--paper);
      color: var(--ink)
    }
.page-admin-pipeline .col-head.bottleneck, .page-admin-funnel .col-head.bottleneck {
      position: relative
    }
.page-admin-pipeline .col-head.bottleneck::after, .page-admin-funnel .col-head.bottleneck::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--tomato)
    }
.page-admin-pipeline .col.bottleneck .col-head h3, .page-admin-funnel .col.bottleneck .col-head h3 {
      color: var(--tomato)
    }
.page-admin-pipeline .col-body, .page-admin-funnel .col-body {
      display: flex;
      flex-direction: column;
      gap: 7px;
      padding: 6px 2px 0
    }
.page-admin-pipeline .card, .page-admin-funnel .card {
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 9px;
      padding: 11px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      cursor: grab;
      transition: border-color .2s, box-shadow .2s, transform .2s;
      position: relative
    }
.page-admin-pipeline .card:hover, .page-admin-funnel .card:hover {
      border-color: var(--hair-2);
      box-shadow: var(--shadow-card);
      transform: translateY(-1px)
    }
.page-admin-pipeline .card:focus-visible, .page-admin-funnel .card:focus-visible {
      border-color: var(--tomato);
      box-shadow: 0 0 0 3px var(--tomato-soft)
    }
.page-admin-pipeline .card.dragging, .page-admin-funnel .card.dragging {
      opacity: .5;
      cursor: grabbing
    }
.page-admin-pipeline .card.hot, .page-admin-funnel .card.hot {
      border-color: rgba(168, 57, 30, .3)
    }
.page-admin-pipeline .card.hot::before, .page-admin-funnel .card.hot::before {
      content: "";
      position: absolute;
      top: 0;
      left: 12px;
      right: 12px;
      height: 2px;
      background: linear-gradient(90deg, var(--tomato), transparent);
      border-radius: 99px
    }
.page-admin-pipeline .card .top, .page-admin-funnel .card .top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px
    }
.page-admin-pipeline .card h4, .page-admin-funnel .card h4 {
      font-family: var(--serif);
      font-size: 17px;
      letter-spacing: -.005em;
      line-height: 1.1;
      font-weight: 400
    }
.page-admin-pipeline .card .domain, .page-admin-funnel .card .domain {
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--muted);
      margin-top: 2px;
      letter-spacing: .02em
    }
.page-admin-pipeline .card .flags, .page-admin-funnel .card .flags {
      display: flex;
      gap: 3px;
      flex-shrink: 0;
      font-size: 11px
    }
.page-admin-pipeline .card .flags span, .page-admin-funnel .card .flags span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 5px;
      background: var(--bg-2);
      font-size: 10px
    }
.page-admin-pipeline .card .row, .page-admin-funnel .card .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px
    }
.page-admin-pipeline .card .source, .page-admin-funnel .card .source {
      font-family: var(--mono);
      font-size: 9.5px;
      color: var(--muted);
      background: var(--bg-2);
      padding: 1px 6px;
      border-radius: 4px;
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap
    }
.page-admin-pipeline .card .source.funnel, .page-admin-funnel .card .source.funnel {
      background: var(--blue-soft);
      color: var(--blue)
    }
.page-admin-pipeline .card .source.fix, .page-admin-funnel .card .source.fix {
      background: var(--tomato-soft);
      color: var(--tomato)
    }
.page-admin-pipeline .card .source.brief, .page-admin-funnel .card .source.brief {
      background: var(--violet-soft);
      color: var(--violet)
    }
.page-admin-pipeline .card .source.ref, .page-admin-funnel .card .source.ref {
      background: var(--gold-soft);
      color: oklch(.46 .12 75)
    }
.page-admin-pipeline .card .quote, .page-admin-funnel .card .quote {
      font-family: var(--mono);
      font-size: 13px;
      color: var(--ink);
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      letter-spacing: -.01em
    }
.page-admin-pipeline .card .meta, .page-admin-funnel .card .meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--muted);
      padding-top: 6px;
      border-top: 1px solid var(--hair)
    }
.page-admin-pipeline .card .meta .age, .page-admin-funnel .card .meta .age {
      display: inline-flex;
      align-items: center;
      gap: 4px
    }
.page-admin-pipeline .card .sla, .page-admin-funnel .card .sla {
      font-family: var(--mono);
      font-size: 9.5px;
      padding: 2px 6px;
      border-radius: 4px;
      letter-spacing: .04em
    }
.page-admin-pipeline .card .sla.over, .page-admin-funnel .card .sla.over {
      background: var(--tomato-soft);
      color: var(--tomato)
    }
.page-admin-pipeline .card .sla.soon, .page-admin-funnel .card .sla.soon {
      background: var(--gold-soft);
      color: oklch(.46 .12 75)
    }
.page-admin-pipeline .card .sla.ok, .page-admin-funnel .card .sla.ok {
      background: var(--forest-soft);
      color: var(--forest)
    }
.page-admin-pipeline .card .assignee, .page-admin-funnel .card .assignee {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 600;
      flex-shrink: 0
    }
.page-admin-pipeline .card .assignee.j, .page-admin-funnel .card .assignee.j {
      background: linear-gradient(135deg, oklch(.55 .14 250), oklch(.42 .14 260))
    }
.page-admin-pipeline .card .assignee.a, .page-admin-funnel .card .assignee.a {
      background: linear-gradient(135deg, var(--forest), oklch(.38 .12 160))
    }
.page-admin-pipeline .card .assignee.m, .page-admin-funnel .card .assignee.m {
      background: linear-gradient(135deg, oklch(.62 .15 30), oklch(.5 .14 20))
    }
.page-admin-pipeline .col.collapsed h3, .page-admin-funnel .col.collapsed h3 {
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 400
    }
.page-admin-pipeline .col.collapsed .col-head, .page-admin-funnel .col.collapsed .col-head {
      position: static;
      background: transparent;
      border-bottom: 1px dashed var(--hair-2);
      padding: 0 0 8px
    }
.page-admin-pipeline .col.collapsed .col-body, .page-admin-funnel .col.collapsed .col-body {
      gap: 5px
    }
.page-admin-pipeline .col.collapsed .mini-card, .page-admin-funnel .col.collapsed .mini-card {
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 7px;
      padding: 7px 9px;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      display: flex;
      justify-content: space-between;
      align-items: center
    }
.page-admin-pipeline .col.collapsed .mini-card b, .page-admin-funnel .col.collapsed .mini-card b {
      font-family: var(--sans);
      color: var(--ink-2);
      font-weight: 500;
      font-size: 12px
    }
.page-admin-pipeline .empty, .page-admin-funnel .empty {
      padding: 24px 14px;
      text-align: center;
      border: 1px dashed var(--hair-2);
      border-radius: 8px;
      color: var(--muted);
      font-family: var(--mono);
      font-size: 11px;
      background: var(--paper-2)
    }
.page-admin-pipeline .col.drop-target .col-body, .page-admin-funnel .col.drop-target .col-body {
      outline: 2px dashed var(--tomato);
      outline-offset: 4px;
      border-radius: 9px;
      background: var(--tomato-soft)
    }
.page-admin-pipeline .drawer-scrim, .page-admin-funnel .drawer-scrim {
      position: fixed;
      inset: 0;
      background: rgba(26, 24, 20, .36);
      backdrop-filter: blur(2px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
      z-index: 50
    }
.page-admin-pipeline .drawer-scrim.open, .page-admin-funnel .drawer-scrim.open {
      opacity: 1;
      pointer-events: auto
    }
.page-admin-pipeline .drawer, .page-admin-funnel .drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 520px;
      max-width: 92vw;
      background: var(--paper);
      border-left: 1px solid var(--hair);
      box-shadow: var(--shadow-pop);
      transform: translateX(100%);
      transition: transform .28s cubic-bezier(.2, .8, .2, 1);
      z-index: 51;
      display: flex;
      flex-direction: column;
      overflow: hidden
    }
.page-admin-pipeline .drawer.open, .page-admin-funnel .drawer.open {
      transform: translateX(0)
    }
.page-admin-pipeline .drawer-head, .page-admin-funnel .drawer-head {
      padding: 18px 22px 14px;
      border-bottom: 1px solid var(--hair);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px
    }
.page-admin-pipeline .drawer-head h2, .page-admin-funnel .drawer-head h2 {
      font-family: var(--serif);
      font-size: 26px;
      letter-spacing: -.015em;
      line-height: 1.05;
      font-weight: 400
    }
.page-admin-pipeline .drawer-head h2 em, .page-admin-funnel .drawer-head h2 em {
      font-style: italic;
      color: var(--tomato)
    }
.page-admin-pipeline .drawer-head .meta-row, .page-admin-funnel .drawer-head .meta-row {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-top: 5px;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted)
    }
.page-admin-pipeline .drawer-close, .page-admin-funnel .drawer-close {
      width: 30px;
      height: 30px;
      border-radius: 7px;
      border: 1px solid var(--hair);
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--paper);
      transition: background .15s, color .15s
    }
.page-admin-pipeline .drawer-close:hover, .page-admin-funnel .drawer-close:hover {
      background: var(--ink);
      color: var(--bg);
      border-color: var(--ink)
    }
.page-admin-pipeline .drawer-body, .page-admin-funnel .drawer-body {
      flex: 1;
      overflow-y: auto;
      padding: 18px 22px
    }
.page-admin-pipeline .drawer-section, .page-admin-funnel .drawer-section {
      margin-bottom: 22px
    }
.page-admin-pipeline .drawer-section h3, .page-admin-funnel .drawer-section h3 {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center
    }
.page-admin-pipeline .drawer-section h3 a, .page-admin-funnel .drawer-section h3 a {
      font-family: var(--sans);
      text-transform: none;
      letter-spacing: 0;
      font-size: 11.5px;
      color: var(--ink);
      border-bottom: 1px solid var(--hair-3);
      padding-bottom: 1px
    }
.page-admin-pipeline .kv, .page-admin-funnel .kv {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 10px;
      font-size: 13px;
      padding: 6px 0
    }
.page-admin-pipeline .kv b, .page-admin-funnel .kv b {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      font-weight: 500;
      letter-spacing: .04em;
      text-transform: uppercase
    }
.page-admin-pipeline .kv span, .page-admin-funnel .kv span {
      color: var(--ink)
    }
.page-admin-pipeline .audit-mini, .page-admin-funnel .audit-mini {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px
    }
.page-admin-pipeline .audit-mini-cell, .page-admin-funnel .audit-mini-cell {
      background: var(--paper-2);
      border: 1px solid var(--hair);
      border-radius: 7px;
      padding: 9px 10px
    }
.page-admin-pipeline .audit-mini-cell .lab, .page-admin-funnel .audit-mini-cell .lab {
      font-family: var(--mono);
      font-size: 9.5px;
      color: var(--muted);
      letter-spacing: .06em;
      text-transform: uppercase
    }
.page-admin-pipeline .audit-mini-cell .v, .page-admin-funnel .audit-mini-cell .v {
      font-family: var(--serif);
      font-size: 22px;
      letter-spacing: -.02em;
      line-height: 1;
      font-weight: 400;
      font-variant-numeric: tabular-nums;
      margin-top: 3px
    }
.page-admin-pipeline .audit-mini-cell.fail .v, .page-admin-funnel .audit-mini-cell.fail .v {
      color: var(--tomato)
    }
.page-admin-pipeline .audit-mini-cell.warn .v, .page-admin-funnel .audit-mini-cell.warn .v {
      color: oklch(.46 .12 75)
    }
.page-admin-pipeline .audit-mini-cell.pass .v, .page-admin-funnel .audit-mini-cell.pass .v {
      color: var(--forest)
    }
.page-admin-pipeline .thread, .page-admin-funnel .thread {
      display: flex;
      flex-direction: column;
      gap: 8px
    }
.page-admin-pipeline .msg, .page-admin-funnel .msg {
      display: grid;
      grid-template-columns: 24px 1fr;
      gap: 10px;
      padding: 8px 10px;
      border: 1px solid var(--hair);
      border-radius: 8px;
      background: var(--paper-2)
    }
.page-admin-pipeline .msg .ava, .page-admin-funnel .msg .ava {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: linear-gradient(135deg, oklch(.55 .14 250), oklch(.42 .14 260));
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 600
    }
.page-admin-pipeline .msg .ava.ext, .page-admin-funnel .msg .ava.ext {
      background: linear-gradient(135deg, oklch(.62 .15 30), oklch(.5 .14 20))
    }
.page-admin-pipeline .msg .ava.sys, .page-admin-funnel .msg .ava.sys {
      background: var(--ink);
      font-family: var(--serif);
      font-style: italic
    }
.page-admin-pipeline .msg .who, .page-admin-funnel .msg .who {
      font-size: 12.5px;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      gap: 8px
    }
.page-admin-pipeline .msg .who .when, .page-admin-funnel .msg .who .when {
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--muted);
      font-weight: 400
    }
.page-admin-pipeline .msg .text, .page-admin-funnel .msg .text {
      font-size: 12.5px;
      color: var(--ink-2);
      margin-top: 3px;
      line-height: 1.45
    }
.page-admin-pipeline .drawer-foot, .page-admin-funnel .drawer-foot {
      padding: 14px 22px;
      border-top: 1px solid var(--hair);
      display: flex;
      gap: 6px;
      background: var(--paper-2)
    }
.page-admin-pipeline .drawer-foot .tb-btn, .page-admin-funnel .drawer-foot .tb-btn {
      flex: 1;
      justify-content: center
    }

/* Table / Calendar views (view switcher) -------------------------- */
.page-admin-pipeline [data-view-panel][hidden] {
      display: none
    }
.page-admin-pipeline .pipe-table-wrap {
      flex: 1;
      overflow: auto;
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 11px
    }
.page-admin-pipeline .pipe-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px
    }
.page-admin-pipeline .pipe-table thead th {
      position: sticky;
      top: 0;
      background: var(--paper-2);
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 500;
      text-align: left;
      padding: 10px 14px;
      border-bottom: 1px solid var(--hair);
      white-space: nowrap;
      z-index: 1
    }
.page-admin-pipeline .pipe-table thead th.num {
      text-align: right
    }
.page-admin-pipeline .pipe-table tbody tr {
      border-bottom: 1px solid var(--hair);
      cursor: pointer;
      transition: background .15s
    }
.page-admin-pipeline .pipe-table tbody tr:last-child {
      border-bottom: 0
    }
.page-admin-pipeline .pipe-table tbody tr:hover {
      background: var(--bg-2)
    }
.page-admin-pipeline .pipe-table tbody td {
      padding: 11px 14px;
      vertical-align: middle;
      white-space: nowrap
    }
.page-admin-pipeline .pipe-table td.co {
      font-weight: 500;
      color: var(--ink)
    }
.page-admin-pipeline .pipe-table td.num {
      text-align: right;
      font-variant-numeric: tabular-nums
    }
.page-admin-pipeline .pipe-table td.dim {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 11px
    }
.page-admin-pipeline .pipe-table .pl-stage {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 99px;
      background: var(--bg-2);
      border: 1px solid var(--hair);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .04em;
      color: var(--ink)
    }
.page-admin-pipeline .pipe-table .source {
      font-family: var(--mono);
      font-size: 9.5px;
      color: var(--muted);
      background: var(--bg-2);
      padding: 1px 6px;
      border-radius: 4px;
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap
    }
.page-admin-pipeline .pipe-table .source.funnel {
      background: var(--blue-soft);
      color: var(--blue)
    }
.page-admin-pipeline .pipe-table .source.fix {
      background: var(--tomato-soft);
      color: var(--tomato)
    }
.page-admin-pipeline .pipe-table .source.brief {
      background: var(--violet-soft);
      color: var(--violet)
    }
.page-admin-pipeline .pipe-table .source.ref {
      background: var(--gold-soft);
      color: oklch(.46 .12 75)
    }
.page-admin-pipeline .pipe-cal-wrap {
      flex: 1;
      display: flex;
      flex-direction: column
    }
.page-admin-pipeline .pipe-cal-head {
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 10px
    }
.page-admin-pipeline .pipe-cal-head h3 {
      font-size: 16px;
      font-weight: 500
    }
.page-admin-pipeline .pipe-cal-head .dim {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 11px
    }
.page-admin-pipeline .pipe-cal {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 1px;
      background: var(--hair);
      border: 1px solid var(--hair);
      border-radius: 11px;
      overflow: hidden
    }
.page-admin-pipeline .pipe-cal-dow {
      background: var(--paper-2);
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      text-align: center;
      padding: 8px 0
    }
.page-admin-pipeline .pipe-cal-cell {
      background: var(--paper);
      min-height: 104px;
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 4px
    }
.page-admin-pipeline .pipe-cal-cell.muted {
      background: var(--paper-2)
    }
.page-admin-pipeline .pipe-cal-cell.muted .dn {
      color: var(--muted-2)
    }
.page-admin-pipeline .pipe-cal-cell .dn {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      font-variant-numeric: tabular-nums
    }
.page-admin-pipeline .pipe-cal-cell.today .dn {
      color: var(--paper);
      background: var(--ink);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: flex-start
    }
.page-admin-pipeline .pipe-cal-ev {
      font-size: 11px;
      line-height: 1.3;
      padding: 3px 6px;
      border-radius: 6px;
      background: var(--bg-2);
      border-left: 3px solid var(--muted);
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: background .15s
    }
.page-admin-pipeline .pipe-cal-ev:hover {
      background: var(--hair)
    }
.page-admin-pipeline .pipe-cal-ev .t {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted)
    }
.page-admin-pipeline .pipe-cal-ev.fix {
      border-left-color: var(--tomato)
    }
.page-admin-pipeline .pipe-cal-ev.brief {
      border-left-color: var(--violet)
    }
.page-admin-pipeline .pipe-cal-ev.funnel {
      border-left-color: var(--blue)
    }
.page-admin-pipeline .pipe-cal-ev.ref {
      border-left-color: var(--forest)
    }

.page-admin-pipeline .ic, .page-admin-funnel .ic {
      width: 13px;
      height: 13px;
      stroke-width: 1.7;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round
    }
.page-admin-pipeline .ic-15, .page-admin-funnel .ic-15 {
      width: 15px;
      height: 15px
    }
.page-admin-pipeline .ic-18, .page-admin-funnel .ic-18 {
      width: 18px;
      height: 18px
    }
.page-admin-pipeline .reveal, .page-admin-funnel .reveal {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .55s, transform .65s cubic-bezier(.2, .8, .2, 1)
    }
.page-admin-pipeline .reveal.in, .page-admin-funnel .reveal.in {
      opacity: 1;
      transform: none
    }
@media(prefers-reduced-motion:reduce) {
.page-admin-pipeline *, .page-admin-pipeline *::before, .page-admin-pipeline *::after {
        animation: none !important;
        transition: none !important
      }
}
@media print {
.page-admin-pipeline .sidebar, .page-admin-pipeline .topbar, .page-admin-pipeline .filter-bar {
        display: none
      }
.page-admin-pipeline .main, .page-admin-funnel .main {
        padding: 0
      }
}
.page-admin-pipeline .kanban-wrap::-webkit-scrollbar, .page-admin-funnel .kanban-wrap::-webkit-scrollbar {
      height: 10px
    }
.page-admin-pipeline .kanban-wrap::-webkit-scrollbar-track, .page-admin-funnel .kanban-wrap::-webkit-scrollbar-track {
      background: var(--bg-2);
      border-radius: 99px
    }
.page-admin-pipeline .kanban-wrap::-webkit-scrollbar-thumb, .page-admin-funnel .kanban-wrap::-webkit-scrollbar-thumb {
      background: var(--hair-3);
      border-radius: 99px
    }
.page-admin-pipeline .kanban-wrap::-webkit-scrollbar-thumb:hover, .page-admin-funnel .kanban-wrap::-webkit-scrollbar-thumb:hover {
      background: var(--ink)
    }
.page-admin-pipeline :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
      outline: var(--ring-w) solid var(--ring);
      outline-offset: var(--ring-off)
    }
.page-admin-pipeline .on-ink, .page-admin-pipeline footer {
      --ring: var(--gold)
    }

/* ====================================================================
   PAGE: admin/funnel   (scope: .page-admin-funnel)
   Kanban/view-switcher/cards are co-scoped onto the pipeline rules above;
   this block covers only what differs: h2 column titles and the table view.
   ==================================================================== */
.page-admin-funnel .kanban {grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:272px}
.page-admin-funnel .col-head h2 {font-family:var(--serif);font-size:16px;letter-spacing:-.01em;font-weight:400;line-height:1;margin:0}
.page-admin-funnel .card h4 a {color:inherit}
.page-admin-funnel .t-wrap {background:var(--paper);border:1px solid var(--hair);border-radius:11px;overflow:hidden}
.page-admin-funnel .t {width:100%;border-collapse:collapse;font-size:12.5px}
.page-admin-funnel .t thead th {background:var(--paper-2);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair);white-space:nowrap}
.page-admin-funnel .t tbody tr {border-bottom:1px solid var(--hair);transition:background .15s}
.page-admin-funnel .t tbody tr:hover {background:var(--bg-2)}
.page-admin-funnel .t tbody tr:last-child {border-bottom:0}
.page-admin-funnel .t tbody td {padding:11px 12px;vertical-align:middle}

/* ====================================================================
   PAGE: admin/customer-analytics   (scope: .page-admin-customer-analytics)
   Stats + tables come from the shared shell; this block styles the
   per-workspace analysis sections (ca-*).
   ==================================================================== */
.page-admin-customer-analytics .ca-section {background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:18px 20px;margin-bottom:14px}
.page-admin-customer-analytics .ca-section-head {display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.page-admin-customer-analytics .ca-ws-name {font-family:var(--serif);font-size:21px;letter-spacing:-.015em;font-weight:400;line-height:1.1;display:flex;align-items:center;gap:8px}
.page-admin-customer-analytics .ca-default-tag {font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--bg-2);border:1px solid var(--hair);border-radius:99px;padding:2px 8px}
.page-admin-customer-analytics .ca-ws-meta {font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px}
.page-admin-customer-analytics .ca-metrics {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.page-admin-customer-analytics .ca-metric {background:var(--paper-2);border:1px solid var(--hair);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:7px}
.page-admin-customer-analytics .ca-metric--alert {border-color:oklch(0.54 0.19 30 / .35);background:var(--tomato-soft)}
.page-admin-customer-analytics .ca-metric-label {font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.page-admin-customer-analytics .ca-metric-value {display:flex;align-items:baseline;gap:3px}
.page-admin-customer-analytics .ca-score-num {font-family:var(--serif);font-size:34px;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.page-admin-customer-analytics .ca-score-denom {font-family:var(--mono);font-size:12px;color:var(--muted)}
.page-admin-customer-analytics .ca-big-num {font-family:var(--serif);font-size:30px;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.page-admin-customer-analytics .ca-big-num--ok {color:var(--forest)}
.page-admin-customer-analytics .ca-big-num--bad {color:var(--tomato)}
.page-admin-customer-analytics .ca-score-bar {height:5px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.page-admin-customer-analytics .ca-score-fill {height:100%;border-radius:99px;background:var(--forest);transition:width .4s}
.page-admin-customer-analytics .ca-metric--warn .ca-score-fill {background:oklch(.74 .13 75)}
.page-admin-customer-analytics .ca-metric--crit .ca-score-fill {background:var(--tomato)}
.page-admin-customer-analytics .ca-metric-sub {font-size:11.5px;color:var(--muted)}
.page-admin-customer-analytics .ca-metric-sub--ok {color:var(--forest)}
.page-admin-customer-analytics .ca-metric-sub--warn {color:oklch(.46 .12 75)}
.page-admin-customer-analytics .ca-metric-sub--crit {color:var(--tomato)}
.page-admin-customer-analytics .ca-sev-row {display:flex;gap:5px;flex-wrap:wrap}
.page-admin-customer-analytics .ca-sev {font-family:var(--mono);font-size:10px;letter-spacing:.05em;border-radius:99px;padding:2px 8px}
.page-admin-customer-analytics .ca-sev--high {background:var(--tomato-soft);color:var(--tomato)}
.page-admin-customer-analytics .ca-sev--med {background:var(--gold-soft);color:oklch(.46 .12 75)}
.page-admin-customer-analytics .ca-sev--low {background:var(--bg-2);color:var(--muted)}
.page-admin-customer-analytics .ca-clean {display:flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid oklch(0.46 0.10 150 / .3);border-radius:9px;background:var(--forest-soft);color:var(--forest);font-size:12.5px}
.page-admin-customer-analytics .ca-table-block {margin-top:14px}
.page-admin-customer-analytics .ca-table-label {font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.page-admin-customer-analytics .ca-rule-name {font-size:12.5px;font-weight:500}
.page-admin-customer-analytics .ca-rule-key {font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:2px}
.page-admin-customer-analytics .ca-sev-pill {display:inline-flex;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.05em;border-radius:99px;padding:2px 8px}
.page-admin-customer-analytics .ca-sev-pill--high {background:var(--tomato-soft);color:var(--tomato)}
.page-admin-customer-analytics .ca-sev-pill--medium {background:var(--gold-soft);color:oklch(.46 .12 75)}
.page-admin-customer-analytics .ca-sev-pill--low {background:var(--bg-2);color:var(--muted);border:1px solid var(--hair)}
.page-admin-customer-analytics .ca-issues-row td {padding:0 12px 12px;background:var(--paper-2)}
.page-admin-customer-analytics .ca-issues {border:1px solid var(--hair);border-radius:9px;background:var(--paper);padding:12px 14px}
.page-admin-customer-analytics .ca-issues-head {font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px;margin-bottom:9px}
.page-admin-customer-analytics .ca-issues-count {font-size:10px;background:var(--bg-2);border-radius:99px;padding:0 7px;color:var(--muted-2)}
.page-admin-customer-analytics .ca-issues-list {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.page-admin-customer-analytics .ca-issue {display:flex;align-items:flex-start;gap:9px}
.page-admin-customer-analytics .ca-issue-flag {flex-shrink:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:5px;padding:2px 7px;margin-top:1px}
.page-admin-customer-analytics .ca-issue-flag--fail {background:var(--tomato-soft);color:var(--tomato)}
.page-admin-customer-analytics .ca-issue-flag--warn {background:var(--gold-soft);color:oklch(.46 .12 75)}
.page-admin-customer-analytics .ca-issue-label {font-size:12.5px}
.page-admin-customer-analytics .ca-issue-fix {font-size:12px;color:var(--muted);margin-top:2px}
.page-admin-customer-analytics .ca-err-msg {max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.page-admin-customer-analytics .ca-status-pill {display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;border-radius:99px;padding:2px 8px}
.page-admin-customer-analytics .ca-status-dot {width:5px;height:5px;border-radius:50%;background:currentColor}
.page-admin-customer-analytics .ca-status-pill--open {background:var(--tomato-soft);color:var(--tomato)}
.page-admin-customer-analytics .ca-status-pill--resolved {background:var(--forest-soft);color:var(--forest)}
.page-admin-customer-analytics .ca-empty {color:var(--muted);font-size:13px;text-align:center;padding:18px 0;margin:0}
@media (max-width:900px) {
.page-admin-customer-analytics .ca-metrics {grid-template-columns:1fr}
}

/* ====================================================================
   PAGE: admin/audits   (scope: .page-admin-audits)
   ==================================================================== */
.page-admin-audits .t-wrap {
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 11px;
      overflow: hidden
    }
.page-admin-audits .t {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px
    }
.page-admin-audits .t thead th {
      position: sticky;
      top: 0;
      background: var(--paper-2);
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 500;
      text-align: left;
      padding: 10px 12px;
      border-bottom: 1px solid var(--hair);
      white-space: nowrap
    }
.page-admin-audits .t tbody tr {
      transition: background .15s;
      cursor: pointer;
      border-bottom: 1px solid var(--hair)
    }
.page-admin-audits .t tbody tr:hover {
      background: var(--bg-2)
    }
.page-admin-audits .t tbody tr:last-child {
      border-bottom: 0
    }
.page-admin-audits .t tbody td {
      padding: 11px 12px;
      vertical-align: middle
    }
.page-admin-audits .dom {
      display: flex;
      align-items: center;
      gap: 8px
    }
.page-admin-audits .dom .lb {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: var(--bg-2);
      border: 1px solid var(--hair);
      font-family: var(--serif);
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center
    }
.page-admin-audits .dom span {
      font-family: var(--mono);
      font-size: 12px
    }
.page-admin-audits .score {
      font-family: var(--serif);
      font-size: 18px;
      font-variant-numeric: tabular-nums;
      line-height: 1
    }
.page-admin-audits .band {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 8px;
      border-radius: 99px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .05em
    }
.page-admin-audits .band.crit {
      background: var(--tomato-soft);
      color: var(--tomato)
    }
.page-admin-audits .band.risk {
      background: var(--gold-soft);
      color: oklch(.46 .12 75)
    }
.page-admin-audits .band.fair {
      background: var(--blue-soft);
      color: var(--blue)
    }
.page-admin-audits .band.good {
      background: var(--forest-soft);
      color: var(--forest)
    }
.page-admin-audits .spill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 8px;
      border-radius: 99px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .05em
    }
.page-admin-audits .spill.pend {
      background: var(--bg-2);
      color: var(--muted)
    }
.page-admin-audits .spill.rend {
      background: var(--blue-soft);
      color: var(--blue)
    }
.page-admin-audits .spill.sent {
      background: var(--forest-soft);
      color: var(--forest)
    }
.page-admin-audits .spill.fail {
      background: var(--tomato-soft);
      color: var(--tomato)
    }
.page-admin-audits .spill .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor
    }
.page-admin-audits .spill.rend .dot {
      animation: page-admin-audits__pulse2 1.4s ease-in-out infinite
    }
@keyframes page-admin-audits__pulse2 {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .3
      }
    }
.page-admin-audits .cell-mono {
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--ink-2);
      font-variant-numeric: tabular-nums
    }
.page-admin-audits .cell-muted {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      font-variant-numeric: tabular-nums
    }
@media (prefers-reduced-motion:reduce) {
.page-admin-audits *, .page-admin-audits *::before, .page-admin-audits *::after {
        animation: none !important;
        transition: none !important
      }
.page-admin-audits .reveal {
        opacity: 1;
        transform: none
      }
}

/* ====================================================================
   PAGE: admin/bookings   (scope: .page-admin-bookings)
   ==================================================================== */
.page-admin-bookings .cal {
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 11px;
      padding: 14px;
      margin-bottom: 14px;
      overflow: hidden
    }
.page-admin-bookings .cal-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px
    }
.page-admin-bookings .cal-head .nav {
      display: flex;
      gap: 5px;
      align-items: center
    }
.page-admin-bookings .cal-head h2 {
      font-family: var(--serif);
      font-size: 22px;
      letter-spacing: -.015em;
      font-weight: 400
    }
.page-admin-bookings .cal-head h2 em {
      font-style: italic;
      color: var(--tomato)
    }
.page-admin-bookings .cal-grid {
      display: grid;
      grid-template-columns: 50px repeat(5, 1fr);
      border-top: 1px solid var(--hair);
      border-left: 1px solid var(--hair);
      border-radius: 8px;
      overflow: hidden;
      background: var(--paper-2);
      min-height: 560px
    }
.page-admin-bookings .cal-grid .h {
      background: var(--paper);
      padding: 8px;
      border-right: 1px solid var(--hair);
      border-bottom: 1px solid var(--hair);
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .06em;
      color: var(--muted);
      text-align: center;
      font-weight: 500
    }
.page-admin-bookings .cal-grid .h.day {
      padding: 10px 8px
    }
.page-admin-bookings .cal-grid .h.day b {
      font-family: var(--serif);
      font-size: 18px;
      color: var(--ink);
      font-weight: 400;
      display: block;
      margin-top: 2px;
      letter-spacing: -.01em
    }
.page-admin-bookings .cal-grid .h.day.today {
      background: var(--ink);
      color: var(--bg)
    }
.page-admin-bookings .cal-grid .h.day.today b {
      color: var(--bg)
    }
.page-admin-bookings .cal-grid .t {
      background: var(--paper);
      padding: 6px 6px 0;
      border-right: 1px solid var(--hair);
      border-bottom: 1px solid var(--hair);
      font-family: var(--mono);
      font-size: 9.5px;
      color: var(--muted-2);
      text-align: right;
      min-height: 64px;
      position: relative
    }
.page-admin-bookings .cal-grid .c {
      background: var(--paper);
      padding: 5px;
      border-right: 1px solid var(--hair);
      border-bottom: 1px solid var(--hair);
      min-height: 64px;
      position: relative
    }
.page-admin-bookings .cal-grid .c.today {
      background: var(--paper-2)
    }
.page-admin-bookings .evt {
      display: block; /* the event is an <a>; inline boxes fragment around the block <b> inside */
      background: var(--paper-2);
      border: 1px solid var(--hair);
      border-left: 3px solid var(--blue);
      border-radius: 6px;
      padding: 5px 7px;
      font-size: 11px;
      line-height: 1.3;
      cursor: pointer;
      transition: transform .15s, box-shadow .15s;
      margin-bottom: 3px
    }
.page-admin-bookings .evt:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-card)
    }
.page-admin-bookings .evt.confirmed {
      border-left-color: var(--forest);
      background: var(--forest-soft)
    }
.page-admin-bookings .evt.pending {
      border-left-color: var(--gold);
      background: var(--gold-soft)
    }
.page-admin-bookings .evt.completed {
      border-left-color: var(--muted);
      opacity: .6
    }
.page-admin-bookings .evt.no-show {
      border-left-color: var(--tomato);
      background: var(--tomato-soft)
    }
.page-admin-bookings .evt.resched {
      border-left-color: var(--blue);
      background: var(--blue-soft)
    }
.page-admin-bookings .evt.cancelled {
      border-left-color: var(--muted);
      opacity: .5
    }
.page-admin-bookings .evt b {
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 400;
      display: block;
      letter-spacing: -.005em
    }
.page-admin-bookings .evt .when {
      font-family: var(--mono);
      font-size: 9.5px;
      color: var(--muted);
      letter-spacing: .04em
    }
.page-admin-bookings .t-wrap {
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 11px;
      overflow: hidden
    }
.page-admin-bookings .t {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px
    }
.page-admin-bookings .t thead th {
      background: var(--paper-2);
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 500;
      text-align: left;
      padding: 10px 12px;
      border-bottom: 1px solid var(--hair);
      white-space: nowrap
    }
.page-admin-bookings .t tbody tr {
      transition: background .15s;
      cursor: pointer;
      border-bottom: 1px solid var(--hair)
    }
.page-admin-bookings .t tbody tr:hover {
      background: var(--bg-2)
    }
.page-admin-bookings .t tbody tr:last-child {
      border-bottom: 0
    }
.page-admin-bookings .t tbody td {
      padding: 11px 12px;
      vertical-align: middle
    }
.page-admin-bookings .bk-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 8px;
      border-radius: 99px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .05em
    }
.page-admin-bookings .bk-status .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor
    }
.page-admin-bookings .bk-status.confirmed {
      background: var(--forest-soft);
      color: var(--forest)
    }
.page-admin-bookings .bk-status.pending {
      background: var(--gold-soft);
      color: oklch(.46 .12 75)
    }
.page-admin-bookings .bk-status.completed {
      background: var(--bg-2);
      color: var(--muted)
    }
.page-admin-bookings .bk-status.no-show {
      background: var(--tomato-soft);
      color: var(--tomato)
    }
.page-admin-bookings .bk-status.resched {
      background: var(--blue-soft);
      color: var(--blue)
    }
.page-admin-bookings .cell-mono {
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--ink-2)
    }
.page-admin-bookings .cell-muted {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted)
    }
@media (prefers-reduced-motion:reduce) {
.page-admin-bookings *, .page-admin-bookings *::before, .page-admin-bookings *::after {
        animation: none !important;
        transition: none !important
      }
.page-admin-bookings .reveal {
        opacity: 1;
        transform: none
      }
}

/* ====================================================================
   PAGE: admin/customers   (scope: .page-admin-customers)
   ==================================================================== */
.page-admin-customers .t-wrap {
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 11px;
      overflow: hidden
    }
.page-admin-customers .t {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px
    }
.page-admin-customers .t thead th {
      position: sticky;
      top: 0;
      background: var(--paper-2);
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 500;
      text-align: left;
      padding: 10px 12px;
      border-bottom: 1px solid var(--hair);
      white-space: nowrap;
      cursor: pointer;
      user-select: none
    }
.page-admin-customers .t thead th:hover {
      color: var(--ink)
    }
.page-admin-customers .t thead th .so {
      margin-left: 4px;
      color: var(--muted-2)
    }
.page-admin-customers .t thead th.sorted {
      color: var(--ink)
    }
.page-admin-customers .t tbody tr {
      transition: background .15s;
      cursor: pointer;
      border-bottom: 1px solid var(--hair)
    }
.page-admin-customers .t tbody tr:hover {
      background: var(--bg-2)
    }
.page-admin-customers .t tbody tr:last-child {
      border-bottom: 0
    }
.page-admin-customers .t tbody td {
      padding: 11px 12px;
      vertical-align: middle
    }
.page-admin-customers .t-name {
      display: flex;
      align-items: center;
      gap: 10px
    }
.page-admin-customers .logo-bubble {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      background: var(--bg-2);
      border: 1px solid var(--hair);
      font-family: var(--serif);
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ink-2);
      flex-shrink: 0;
      letter-spacing: -.02em
    }
.page-admin-customers .t-name .ns {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
      min-width: 0
    }
.page-admin-customers .t-name b {
      font-size: 13px;
      font-weight: 500
    }
.page-admin-customers .t-name span {
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--muted)
    }
.page-admin-customers .plan-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 8px;
      border-radius: 99px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .05em;
      font-weight: 500
    }
.page-admin-customers .plan-pill.pro {
      background: var(--ink);
      color: var(--bg)
    }
.page-admin-customers .plan-pill.ent {
      background: var(--gold-soft);
      color: oklch(.4 .12 75);
      border: 1px solid oklch(.74 .13 75 / .35)
    }
.page-admin-customers .plan-pill.trial {
      background: var(--blue-soft);
      color: var(--blue)
    }
.page-admin-customers .plan-pill.free {
      background: var(--bg-2);
      color: var(--muted);
      border: 1px solid var(--hair)
    }
.page-admin-customers .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 8px;
      border-radius: 99px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .05em
    }
.page-admin-customers .status-pill.active {
      background: var(--forest-soft);
      color: var(--forest)
    }
.page-admin-customers .status-pill.trial {
      background: var(--blue-soft);
      color: var(--blue)
    }
.page-admin-customers .status-pill.past {
      background: var(--tomato-soft);
      color: var(--tomato)
    }
.page-admin-customers .status-pill.cancel {
      background: var(--bg-2);
      color: var(--muted)
    }
.page-admin-customers .status-pill .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor
    }
.page-admin-customers .sov-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 140px
    }
.page-admin-customers .sov-bar .v {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      width: 36px;
      text-align: right;
      font-variant-numeric: tabular-nums
    }
.page-admin-customers .sov-bar .bar {
      flex: 1;
      height: 5px;
      background: var(--bg-2);
      border-radius: 99px;
      position: relative;
      overflow: hidden;
      min-width: 60px
    }
.page-admin-customers .sov-bar .bar>i {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: var(--ink);
      border-radius: 99px
    }
.page-admin-customers .sov-bar.warn .bar>i {
      background: var(--gold)
    }
.page-admin-customers .sov-bar.crit .bar>i {
      background: var(--tomato)
    }
.page-admin-customers .cell-mono {
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--ink-2);
      font-variant-numeric: tabular-nums
    }
.page-admin-customers .cell-muted {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      font-variant-numeric: tabular-nums
    }
@media (prefers-reduced-motion:reduce) {
.page-admin-customers *, .page-admin-customers *::before, .page-admin-customers *::after {
        animation: none !important;
        transition: none !important
      }
.page-admin-customers .reveal {
        opacity: 1;
        transform: none
      }
}

/* ====================================================================
   PAGE: admin/queues   (scope: .page-admin-queues)
   ==================================================================== */
.page-admin-queues .q-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.page-admin-queues .q-card {background:var(--paper);border:1px solid var(--hair);border-radius:11px;padding:14px;position:relative;overflow:hidden}
.page-admin-queues .q-card.alarm {border-color:var(--tomato);background:linear-gradient(135deg,var(--paper) 0%,var(--tomato-soft) 100%)}
.page-admin-queues .q-card.warm {border-color:var(--gold)}
.page-admin-queues .q-card .q-name {font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.page-admin-queues .q-card .q-name .pulse {width:6px;height:6px;border-radius:50%;background:var(--forest);box-shadow:0 0 0 0 var(--forest);animation:page-admin-queues__p 2s infinite}
.page-admin-queues .q-card.alarm .q-name .pulse {background:var(--tomato);box-shadow:0 0 0 0 var(--tomato);animation:page-admin-queues__p 1.2s infinite}
@keyframes page-admin-queues__p {0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.page-admin-queues .q-card .q-num {font-family:var(--serif);font-size:32px;letter-spacing:-.02em;line-height:1;font-weight:400}
.page-admin-queues .q-card .q-num em {font-style:italic;color:var(--tomato)}
.page-admin-queues .q-card .q-meta {font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:6px}
.page-admin-queues .q-card .q-bar {height:4px;background:var(--bg-2);border-radius:99px;overflow:hidden;margin-top:10px}
.page-admin-queues .q-card .q-bar i {display:block;height:100%;background:var(--ink);border-radius:99px}
.page-admin-queues .q-card.alarm .q-bar i {background:var(--tomato)}
.page-admin-queues .q-card.warm .q-bar i {background:var(--gold)}
.page-admin-queues .split {display:grid;grid-template-columns:1.6fr 1fr;gap:12px}
.page-admin-queues .panel {background:var(--paper);border:1px solid var(--hair);border-radius:11px;overflow:hidden}
.page-admin-queues .panel-head {padding:12px 14px;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center}
.page-admin-queues .panel-head h3 {font-family:var(--serif);font-size:18px;font-weight:400;letter-spacing:-.01em}
.page-admin-queues .panel-head h3 em {font-style:italic;color:var(--tomato)}
.page-admin-queues .panel-head .right {display:flex;gap:6px;align-items:center}
.page-admin-queues .panel-head .right .live {display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--forest);text-transform:uppercase}
.page-admin-queues .panel-head .right .live .dot {width:6px;height:6px;border-radius:50%;background:var(--forest);animation:page-admin-queues__p 2s infinite}
.page-admin-queues .t {width:100%;border-collapse:collapse;font-size:12.5px}
.page-admin-queues .t thead th {background:var(--paper-2);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;padding:9px 12px;border-bottom:1px solid var(--hair)}
.page-admin-queues .t tbody tr {border-bottom:1px solid var(--hair)}
.page-admin-queues .t tbody tr:last-child {border-bottom:0}
.page-admin-queues .t tbody td {padding:9px 12px;vertical-align:middle}
.page-admin-queues .cell-mono {font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.page-admin-queues .cell-muted {font-family:var(--mono);font-size:11px;color:var(--muted)}
.page-admin-queues .j-status {display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:99px;font-family:var(--mono);font-size:10px;letter-spacing:.05em}
.page-admin-queues .j-status .dot {width:5px;height:5px;border-radius:50%;background:currentColor}
.page-admin-queues .j-status.run {background:var(--blue-soft);color:var(--blue)}
.page-admin-queues .j-status.run .dot {animation:page-admin-queues__p 1.5s infinite}
.page-admin-queues .j-status.ok {background:var(--forest-soft);color:var(--forest)}
.page-admin-queues .j-status.fail {background:var(--tomato-soft);color:var(--tomato)}
.page-admin-queues .j-status.queued {background:var(--bg-2);color:var(--muted)}
.page-admin-queues .j-status.retry {background:var(--gold-soft);color:oklch(.46 .12 75)}
.page-admin-queues .log {background:#1a1814;color:#f6f4ef;font-family:var(--mono);font-size:11.5px;line-height:1.6;padding:12px 14px;height:380px;overflow-y:auto;border-radius:0}
.page-admin-queues .log .ln {padding:1px 0;white-space:pre;display:flex;gap:10px}
.page-admin-queues .log .ts {color:#7a716a;flex-shrink:0}
.page-admin-queues .log .lvl {flex-shrink:0;width:48px}
.page-admin-queues .log .lvl.i {color:#69b6ff}
.page-admin-queues .log .lvl.o {color:#7fc88f}
.page-admin-queues .log .lvl.w {color:#e9b54a}
.page-admin-queues .log .lvl.e {color:#e07262}
.page-admin-queues .log .msg {color:#000;white-space:pre-wrap;word-break:break-word}
.page-admin-queues .log .msg em {color:#e9b54a;font-style:normal}
.page-admin-queues .log .msg strong {color:#7fc88f;font-weight:400}
.page-admin-queues .workers {display:flex;flex-direction:column;gap:7px;padding:12px 14px}
.page-admin-queues .worker {display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--paper-2);border:1px solid var(--hair);border-radius:8px}
.page-admin-queues .worker .wd {width:8px;height:8px;border-radius:50%}
.page-admin-queues .worker .wd.up {background:var(--forest);animation:page-admin-queues__p 2s infinite}
.page-admin-queues .worker .wd.idle {background:var(--muted-2)}
.page-admin-queues .worker .wd.bsy {background:var(--blue);animation:page-admin-queues__p 1.5s infinite}
.page-admin-queues .worker .wd.dn {background:var(--tomato)}
.page-admin-queues .worker .wn {font-family:var(--mono);font-size:12px;color:var(--ink)}
.page-admin-queues .worker .wm {margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.04em}
@media (prefers-reduced-motion:reduce) {
.page-admin-queues *, .page-admin-queues *::before, .page-admin-queues *::after {animation:none !important;transition:none !important}
.page-admin-queues .reveal {opacity:1;transform:none}
}

/* ====================================================================
   PAGE: admin/settings   (scope: .page-admin-settings)
   ==================================================================== */
.page-admin-settings .settings-grid {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 18px;
      align-items: start
    }
.page-admin-settings .set-nav {
      position: sticky;
      top: 74px;
      display: flex;
      flex-direction: column;
      gap: 1px;
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 11px;
      padding: 6px;
      font-family: var(--mono);
      font-size: 11.5px
    }
.page-admin-settings .set-nav a {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 11px;
      border-radius: 7px;
      color: var(--ink-2);
      text-decoration: none;
      letter-spacing: .04em;
      transition: background .15s
    }
.page-admin-settings .set-nav a:hover {
      background: var(--bg-2)
    }
.page-admin-settings .set-nav a.active {
      background: var(--ink);
      color: var(--bg)
    }
.page-admin-settings .set-nav a .num {
      margin-left: auto;
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted-2);
      letter-spacing: .06em
    }
.page-admin-settings .set-nav a.active .num {
      color: var(--bg);
      opacity: .55
    }
.page-admin-settings .section {
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 11px;
      padding: 22px 24px;
      margin-bottom: 14px;
      scroll-margin-top: 80px
    }
.page-admin-settings .section header {
      margin-bottom: 18px;
      padding-bottom: 14px;
      border-bottom: 1px dashed var(--hair)
    }
.page-admin-settings .section header h2 {
      font-family: var(--serif);
      font-size: 24px;
      letter-spacing: -.015em;
      font-weight: 400;
      line-height: 1.2
    }
.page-admin-settings .section header h2 em {
      font-style: italic;
      color: var(--tomato)
    }
.page-admin-settings .section header p {
      font-size: 13px;
      color: var(--muted);
      margin-top: 4px;
      max-width: 62ch;
      line-height: 1.5
    }
.page-admin-settings .row {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 24px;
      padding: 14px 0;
      border-bottom: 1px dashed var(--hair)
    }
.page-admin-settings .row:last-of-type {
      border-bottom: 0;
      padding-bottom: 0
    }
.page-admin-settings .row .lab {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .06em;
      color: var(--ink-2)
    }
.page-admin-settings .row .lab small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 10.5px;
      letter-spacing: .04em;
      line-height: 1.5
    }
.page-admin-settings .row .ctrl {
      display: flex;
      flex-direction: column;
      gap: 7px
    }
.page-admin-settings .input {
      background: var(--paper-2);
      border: 1px solid var(--hair);
      border-radius: 7px;
      padding: 9px 11px;
      font-size: 13px;
      font-family: var(--sans);
      width: 100%;
      transition: border-color .15s
    }
.page-admin-settings .input:focus {
      outline: none;
      border-color: var(--ink)
    }
.page-admin-settings .input.mono {
      font-family: var(--mono);
      font-size: 12px
    }
.page-admin-settings .swatchrow {
      display: flex;
      gap: 8px;
      align-items: center
    }
.page-admin-settings .swatch {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid var(--hair);
      cursor: pointer;
      position: relative;
      transition: transform .15s
    }
.page-admin-settings .swatch:hover {
      transform: scale(1.06)
    }
.page-admin-settings .swatch.on::after {
      content: "";
      position: absolute;
      inset: -3px;
      border: 2px solid var(--ink);
      border-radius: 11px
    }
.page-admin-settings .toggle {
      position: relative;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      gap: 11px
    }
.page-admin-settings .toggle input {
      position: absolute;
      opacity: 0;
      pointer-events: none
    }
.page-admin-settings .toggle .tk {
      width: 38px;
      height: 22px;
      background: var(--bg-2);
      border: 1px solid var(--hair);
      border-radius: 99px;
      position: relative;
      transition: background .2s, border-color .2s;
      flex-shrink: 0
    }
.page-admin-settings .toggle .tk::before {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 16px;
      height: 16px;
      background: var(--paper);
      border-radius: 50%;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
      transition: transform .2s
    }
.page-admin-settings .toggle input:checked+.tk {
      background: var(--ink);
      border-color: var(--ink)
    }
.page-admin-settings .toggle input:checked+.tk::before {
      transform: translateX(16px)
    }
.page-admin-settings .toggle .tlab {
      font-size: 13px
    }
.page-admin-settings .toggle .tlab small {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-family: var(--mono);
      letter-spacing: .04em;
      margin-top: 2px
    }
.page-admin-settings .intg-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 13px 14px;
      background: var(--paper-2);
      border: 1px solid var(--hair);
      border-radius: 9px;
      margin-bottom: 8px
    }
.page-admin-settings .intg-row:last-child {
      margin-bottom: 0
    }
.page-admin-settings .intg-logo {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: var(--paper);
      border: 1px solid var(--hair);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif);
      font-size: 18px;
      letter-spacing: -.02em;
      flex-shrink: 0
    }
.page-admin-settings .intg-row b {
      font-family: var(--sans);
      font-size: 13.5px;
      display: block;
      font-weight: 500
    }
.page-admin-settings .intg-row p {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      letter-spacing: .04em;
      margin-top: 2px
    }
.page-admin-settings .intg-row .right {
      margin-left: auto;
      display: flex;
      gap: 8px;
      align-items: center
    }
.page-admin-settings .intg-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 99px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .06em
    }
.page-admin-settings .intg-status.on {
      background: var(--forest-soft);
      color: var(--forest)
    }
.page-admin-settings .intg-status.off {
      background: var(--bg-2);
      color: var(--muted)
    }
.page-admin-settings .intg-status .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor
    }
.page-admin-settings .key-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 14px;
      border: 1px solid var(--hair);
      border-radius: 9px;
      background: var(--paper-2);
      margin-bottom: 8px;
      font-family: var(--mono);
      font-size: 12px
    }
.page-admin-settings .key-row:last-child {
      margin-bottom: 0
    }
.page-admin-settings .key-row b {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 500;
      width: 120px;
      flex-shrink: 0
    }
.page-admin-settings .key-row code {
      flex: 1;
      color: var(--muted-2);
      font-size: 11.5px;
      letter-spacing: .04em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }
.page-admin-settings .key-row .meta {
      font-size: 10.5px;
      color: var(--muted);
      width: 100px;
      text-align: right;
      flex-shrink: 0
    }
.page-admin-settings .danger {
      background: var(--tomato-soft);
      border-color: var(--tomato)
    }
.page-admin-settings .danger header h2 em {
      color: oklch(.32 .15 30)
    }
.page-admin-settings .danger header p {
      color: oklch(.42 .12 35)
    }
.page-admin-settings .foot-cta {
      position: sticky;
      bottom: 18px;
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 11px;
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: var(--shadow-pop);
      margin-top: 14px;
      z-index: 5
    }
.page-admin-settings .foot-cta .l {
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--muted);
      letter-spacing: .04em
    }
.page-admin-settings .foot-cta .l b {
      font-family: var(--sans);
      color: var(--ink);
      font-weight: 500
    }
@media (prefers-reduced-motion:reduce) {
.page-admin-settings *, .page-admin-settings *::before, .page-admin-settings *::after {
        animation: none !important;
        transition: none !important
      }
.page-admin-settings .reveal {
        opacity: 1;
        transform: none
      }
}

/* ====================================================================
   PAGE: admin/subscribers   (scope: .page-admin-subscribers)
   ==================================================================== */
.page-admin-subscribers .t-wrap {
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 11px;
      overflow: hidden
    }
.page-admin-subscribers .t {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px
    }
.page-admin-subscribers .t thead th {
      background: var(--paper-2);
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 500;
      text-align: left;
      padding: 10px 12px;
      border-bottom: 1px solid var(--hair)
    }
.page-admin-subscribers .t tbody tr {
      border-bottom: 1px solid var(--hair);
      transition: background .15s
    }
.page-admin-subscribers .t tbody tr:hover {
      background: var(--bg-2)
    }
.page-admin-subscribers .t tbody tr:last-child {
      border-bottom: 0
    }
.page-admin-subscribers .t tbody td {
      padding: 11px 12px;
      vertical-align: middle
    }
.page-admin-subscribers .sub-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 8px;
      border-radius: 99px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .05em
    }
.page-admin-subscribers .sub-status .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor
    }
.page-admin-subscribers .sub-status.conf {
      background: var(--forest-soft);
      color: var(--forest)
    }
.page-admin-subscribers .sub-status.pend {
      background: var(--gold-soft);
      color: oklch(.46 .12 75)
    }
.page-admin-subscribers .sub-status.unsub {
      background: var(--bg-2);
      color: var(--muted)
    }
.page-admin-subscribers .sub-status.bnc {
      background: var(--tomato-soft);
      color: var(--tomato)
    }
.page-admin-subscribers .cell-mono {
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--ink-2)
    }
.page-admin-subscribers .cell-muted {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted)
    }
.page-admin-subscribers .modal-scrim {
      position: fixed;
      inset: 0;
      background: rgba(26, 24, 20, .36);
      backdrop-filter: blur(2px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px
    }
.page-admin-subscribers .modal-scrim.open {
      opacity: 1;
      pointer-events: auto
    }
/* "Send next issue" composer — a centered modal dialog (sibling of the scrim). */
.page-admin-subscribers .composer {position:fixed;top:50%;left:50%;transform:translate(-50%,calc(-50% + 10px));width:640px;max-width:calc(100vw - 48px);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);border:1px solid var(--hair);border-radius:14px;box-shadow:var(--shadow-pop);z-index:51;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s}
.page-admin-subscribers .composer.open {opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.page-admin-subscribers .composer-head {padding:18px 22px 4px;display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.page-admin-subscribers .composer-head h2 {font-family:var(--serif);font-size:24px;letter-spacing:-.015em;font-weight:400;line-height:1.05}
.page-admin-subscribers .composer-head h2 em {font-style:italic;color:var(--tomato)}
.page-admin-subscribers .composer-sub {padding:0 22px 14px;border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:11px;color:var(--muted)}
.page-admin-subscribers .composer form {display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.page-admin-subscribers .composer-body {flex:1;min-height:0;overflow-y:auto;padding:18px 22px}
.page-admin-subscribers .composer-foot {padding:14px 22px;border-top:1px solid var(--hair);background:var(--paper-2);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.page-admin-subscribers .modal {
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 14px;
      box-shadow: var(--shadow-pop);
      width: 640px;
      max-width: 100%;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      transform: translateY(8px);
      transition: transform .25s
    }
.page-admin-subscribers .modal-scrim.open .modal {
      transform: none
    }
.page-admin-subscribers .modal-head {
      padding: 18px 22px;
      border-bottom: 1px solid var(--hair);
      display: flex;
      justify-content: space-between;
      align-items: flex-start
    }
.page-admin-subscribers .modal-head h2 {
      font-family: var(--serif);
      font-size: 24px;
      letter-spacing: -.015em;
      font-weight: 400
    }
.page-admin-subscribers .modal-head h2 em {
      font-style: italic;
      color: var(--tomato)
    }
.page-admin-subscribers .modal-head p {
      font-size: 12.5px;
      color: var(--muted);
      margin: 3px 0 0;
      font-family: var(--mono);
      letter-spacing: .04em
    }
.page-admin-subscribers .modal-body {
      padding: 18px 22px;
      overflow-y: auto;
      flex: 1
    }
.page-admin-subscribers .field {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 14px
    }
.page-admin-subscribers .field label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted)
    }
.page-admin-subscribers .field input, .page-admin-subscribers .field textarea {
      background: var(--paper-2);
      border: 1px solid var(--hair);
      border-radius: 7px;
      padding: 9px 11px;
      font-size: 13px;
      font-family: var(--sans);
      transition: border-color .15s
    }
.page-admin-subscribers .field input:focus, .page-admin-subscribers .field textarea:focus {
      outline: none;
      border-color: var(--ink)
    }
.page-admin-subscribers .field textarea {
      min-height: 120px;
      font-family: var(--mono);
      font-size: 12px;
      line-height: 1.5;
      resize: vertical
    }
.page-admin-subscribers .modal-foot {
      padding: 14px 22px;
      border-top: 1px solid var(--hair);
      display: flex;
      justify-content: space-between;
      gap: 8px;
      background: var(--paper-2);
      align-items: center
    }
.page-admin-subscribers .modal-foot .left {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted)
    }
@media (prefers-reduced-motion:reduce) {
.page-admin-subscribers *, .page-admin-subscribers *::before, .page-admin-subscribers *::after {
        animation: none !important;
        transition: none !important
      }
.page-admin-subscribers .reveal {
        opacity: 1;
        transform: none
      }
}

/* ====================================================================
   PAGE: admin/team   (scope: .page-admin-team)
   ==================================================================== */
.page-admin-team .team-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 14px
    }
.page-admin-team .tcard {
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 11px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
      transition: transform .15s, box-shadow .15s
    }
.page-admin-team .tcard:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-card)
    }
.page-admin-team .tcard .top {
      display: flex;
      align-items: flex-start;
      gap: 12px
    }
.page-admin-team .tcard .av {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif);
      font-size: 22px;
      color: var(--paper);
      font-weight: 400;
      flex-shrink: 0;
      letter-spacing: -.01em
    }
.page-admin-team .tcard .who h3 {
      font-family: var(--serif);
      font-size: 20px;
      letter-spacing: -.015em;
      font-weight: 400;
      line-height: 1.15
    }
.page-admin-team .tcard .who h3 em {
      font-style: italic;
      color: var(--tomato)
    }
.page-admin-team .tcard .who p {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      letter-spacing: .04em;
      margin-top: 3px
    }
.page-admin-team .tcard .stats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      padding-top: 12px;
      border-top: 1px dashed var(--hair)
    }
.page-admin-team .tcard .stat-mini .lab {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted-2);
      margin-bottom: 3px
    }
.page-admin-team .tcard .stat-mini .val {
      font-family: var(--serif);
      font-size: 22px;
      line-height: 1;
      letter-spacing: -.015em
    }
.page-admin-team .tcard .role {
      position: absolute;
      top: 14px;
      right: 14px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 99px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .06em
    }
.page-admin-team .tcard .role.owner {
      background: var(--ink);
      color: var(--bg)
    }
.page-admin-team .tcard .role.admin {
      background: var(--tomato);
      color: var(--paper)
    }
.page-admin-team .tcard .role.staff {
      background: var(--bg-2);
      color: var(--ink-2)
    }
.page-admin-team .tcard .pres {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--muted);
      letter-spacing: .04em
    }
.page-admin-team .tcard .pres .pdot {
      width: 6px;
      height: 6px;
      border-radius: 50%
    }
.page-admin-team .tcard .pres .pdot.on {
      background: var(--forest)
    }
.page-admin-team .tcard .pres .pdot.off {
      background: var(--muted-2)
    }
.page-admin-team .tcard .acts {
      display: flex;
      gap: 6px;
      margin-top: auto
    }
.page-admin-team .tcard .acts .tb-btn {
      flex: 1;
      justify-content: center
    }
.page-admin-team .split2 {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 12px
    }
.page-admin-team .panel {
      background: var(--paper);
      border: 1px solid var(--hair);
      border-radius: 11px;
      overflow: hidden
    }
.page-admin-team .panel-head {
      padding: 12px 14px;
      border-bottom: 1px solid var(--hair);
      display: flex;
      justify-content: space-between;
      align-items: center
    }
.page-admin-team .panel-head h3 {
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 400;
      letter-spacing: -.01em
    }
.page-admin-team .panel-head h3 em {
      font-style: italic;
      color: var(--tomato)
    }
.page-admin-team .t {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px
    }
.page-admin-team .t thead th {
      background: var(--paper-2);
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 500;
      text-align: left;
      padding: 9px 12px;
      border-bottom: 1px solid var(--hair)
    }
.page-admin-team .t tbody tr {
      border-bottom: 1px solid var(--hair)
    }
.page-admin-team .t tbody tr:last-child {
      border-bottom: 0
    }
.page-admin-team .t tbody td {
      padding: 9px 12px;
      vertical-align: middle
    }
.page-admin-team .cell-mono {
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--ink-2)
    }
.page-admin-team .cell-muted {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted)
    }
.page-admin-team .perm-tbl td {
      padding: 10px 14px;
      border-bottom: 1px solid var(--hair);
      font-size: 12.5px;
      vertical-align: middle
    }
.page-admin-team .perm-tbl tr:last-child td {
      border-bottom: 0
    }
.page-admin-team .perm-tbl thead th {
      background: var(--paper-2);
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 500;
      text-align: center;
      padding: 10px 14px;
      border-bottom: 1px solid var(--hair)
    }
.page-admin-team .perm-tbl thead th:first-child {
      text-align: left
    }
.page-admin-team .perm-tbl tbody td:not(:first-child) {
      text-align: center;
      font-family: var(--mono);
      font-size: 13px
    }
.page-admin-team .perm-tbl .ok {
      color: var(--forest)
    }
.page-admin-team .perm-tbl .no {
      color: var(--muted-2)
    }
.page-admin-team .perm-tbl .lab {
      font-weight: 500
    }
.page-admin-team .perm-tbl .lab small {
      display: block;
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted);
      font-weight: 400;
      margin-top: 2px;
      letter-spacing: .04em
    }
@media (prefers-reduced-motion:reduce) {
.page-admin-team *, .page-admin-team *::before, .page-admin-team *::after {
        animation: none !important;
        transition: none !important
      }
.page-admin-team .reveal {
        opacity: 1;
        transform: none
      }
}

/* ====================================================================
   RESPONSIVE — navbar/sidebar collapse @ max-width:1200px
   (relocated to cascade after base layout rules so the collapse wins)
   ==================================================================== */
@media(max-width:1200px) {
.admin-shell .app {grid-template-columns:1fr;grid-template-areas:"topbar" "main"}
.admin-shell .sidebar {display:none}
.admin-shell .sidebar.open {display:flex;position:fixed;inset:0;z-index:60;width:280px}
}
@media(max-width:1200px) {
.admin-shell .menu-btn {display:flex}
.admin-shell .topbar {padding:0 14px}
.admin-shell .search {display:none}
}
@media(max-width:1200px) {
.page-admin-index .app {
        grid-template-columns: 1fr;
        grid-template-areas: "topbar" "main"
      }
.page-admin-index .sidebar {
        display: none
      }
.page-admin-index .sidebar.open {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 60;
        width: 280px
      }
}
@media(max-width:1200px) {
.page-admin-index .menu-btn {
        display: flex
      }
.page-admin-index .topbar {
        padding: 0 14px
      }
.page-admin-index .search {
        display: none
      }
}
@media(max-width:1200px) {
.page-admin-pipeline .app {
        grid-template-columns: 1fr;
        grid-template-areas: "topbar" "main"
      }
.page-admin-pipeline .sidebar {
        display: none
      }
.page-admin-pipeline .sidebar.open {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 60;
        width: 280px
      }
}
@media(max-width:1200px) {
.page-admin-pipeline .menu-btn {
        display: flex
      }
.page-admin-pipeline .topbar {
        padding: 0 14px
      }
.page-admin-pipeline .search {
        display: none
      }

 .t-wrap {
    overflow-x: scroll !important;
}
.page-admin-customers .t-wrap, .page-admin-bookings .t-wrap, .page-admin-queues .panel, .page-admin-team .panel {
    overflow-x: scroll;
}
.page-admin-team .team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
}


/* ====================================================================
   MOBILE — sidebar close button + backdrop, compact top header
   (additive; desktop > 1200px is unaffected)
   ==================================================================== */
.sidebar-close { display: none; }
.sidebar-backdrop { display: none; }
@media (max-width: 1200px) {
  .sidebar-close {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 34px; height: 34px; padding: 0;
    border: 1px solid var(--hair); border-radius: 8px;
    background: var(--paper); color: var(--ink); cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .sidebar-close:hover { background: var(--bg-2); border-color: var(--hair-2); }
  .sidebar-backdrop {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(26, 24, 20, .45);
    -webkit-tap-highlight-color: transparent;
  }
  body:has(#sidebar.open) .sidebar-backdrop { display: block; }
  /* keep wide tables/boards from stretching the page (and the sticky header) on mobile */
  .main { min-width: 0; overflow-x: auto; }
}
@media (max-width: 768px) {
  .topbar { padding: 0 12px; gap: 8px; min-width: 0; }
  .crumbs span:not(.here), .crumbs .sep { display: none; }
  .topbar-left { min-width: 0; flex: 1 1 auto; }
  .crumbs { min-width: 0; overflow: hidden; }
  .crumbs .here { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-right { gap: 6px; }
  .topbar-right .tb-btn { font-size: 0; padding: 6px; min-width: 32px; width: 32px; height: 32px; justify-content: center; }
  .daterange { display: none; }
  .page-admin-queues .split, .page-admin-team .split2 {
    display: block;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
}
.page-admin-team .team-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.page-admin-settings .settings-grid {
    display: block;
}
}
@media (max-width: 575px) {
.daterange {
  font-size: 0 !important;
}
.page-admin-index .stat {
    width: 100%;
}
.page-admin-index .stat-grid {
    display: flex;
    flex-wrap: wrap;
}
.page-admin-index .attn, .page-admin-index .section-head, .page-admin-index .section-head .right{
    display: flex;
    flex-wrap: wrap;
}
.admin-shell .stat-grid, .page-admin-queues .q-grid, .page-admin-queues .log .ln {
      display: flex;
    flex-wrap: wrap;
}
.admin-shell .stat, .page-admin-queues .q-card {
    width: 100%;
}
.page-admin-bookings .cal-grid {
    overflow-x: scroll;
}
.page-admin-settings .row, .page-admin-settings .intg-row, .page-admin-settings .key-row {
        display: flex;
    flex-wrap: wrap;
}


}

.page-head {
  flex-wrap: wrap;
  gap: 12px;
}

/* PAGE: admin/customer-profile */
.page-admin-customer-profile .profile-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:4px 0 20px;flex-wrap:wrap}
.page-admin-customer-profile .profile-hero-left{display:flex;align-items:center;gap:18px}
.page-admin-customer-profile .profile-avatar{width:56px;height:56px;border-radius:14px;background:var(--ink);color:var(--bg);font-family:var(--serif);font-size:22px;font-style:italic;letter-spacing:-.03em;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-card)}
.page-admin-customer-profile .profile-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.page-admin-customer-profile .profile-name{font-family:var(--serif);font-size:clamp(24px,3vw,36px);letter-spacing:-.02em;line-height:1;font-weight:400;margin:0 0 8px}
.page-admin-customer-profile .profile-name em{font-style:italic;color:var(--tomato)}
.page-admin-customer-profile .profile-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.page-admin-customer-profile .profile-email{font-family:var(--mono);font-size:12px;color:var(--muted)}
.page-admin-customer-profile .profile-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.page-admin-customer-profile .profile-pill .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.page-admin-customer-profile .profile-pill.active{background:var(--forest-soft);color:var(--forest)}
.page-admin-customer-profile .profile-pill.inactive{background:var(--tomato-soft);color:var(--tomato)}
.page-admin-customer-profile .profile-pill.staff{background:var(--violet-soft);color:var(--violet)}
.page-admin-customer-profile .profile-pill.plan{background:var(--ink);color:var(--bg)}
.page-admin-customer-profile .status-banner{margin-bottom:14px;padding:10px 14px;border:1px solid var(--forest);border-radius:8px;background:var(--forest-soft);font-size:13px}
.page-admin-customer-profile .text-forest{color:var(--forest)}
.page-admin-customer-profile .text-tomato{color:var(--tomato)}
.page-admin-customer-profile .two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
@media(max-width:900px){.page-admin-customer-profile .two-col{grid-template-columns:1fr}}
.page-admin-customer-profile .ws-card{background:var(--paper-2);border:1px solid var(--hair);border-radius:10px;padding:14px 16px;margin-bottom:8px;transition:border-color .15s}
.page-admin-customer-profile .ws-card:last-child{margin-bottom:0}
.page-admin-customer-profile .ws-card:hover{border-color:var(--hair-2)}
.page-admin-customer-profile .ws-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.page-admin-customer-profile .ws-title{display:flex;align-items:center;gap:7px;font-size:14px}
.page-admin-customer-profile .ws-default-badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:99px;font-size:9.5px;font-family:var(--mono);background:var(--violet-soft);color:var(--violet);letter-spacing:.05em}
.page-admin-customer-profile .ws-counts{display:flex;gap:10px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.page-admin-customer-profile .ws-sites-label{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.page-admin-customer-profile .ws-empty{font-size:12px;color:var(--muted);padding:2px 0}
.page-admin-customer-profile .site-row{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:7px;background:var(--paper);border:1px solid var(--hair);margin-bottom:4px;font-size:12.5px;transition:background .12s}
.page-admin-customer-profile .site-row:last-child{margin-bottom:0}
.page-admin-customer-profile .site-row:hover{background:var(--bg-2)}
.page-admin-customer-profile .site-row-left{display:flex;align-items:center;gap:8px;min-width:0}
.page-admin-customer-profile .site-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--bg-2);border:1px solid var(--hair);font-family:var(--mono);font-size:11px;font-weight:500;color:var(--muted);flex-shrink:0}
.page-admin-customer-profile .site-info{display:flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap}
.page-admin-customer-profile .site-info b{font-weight:500}
.page-admin-customer-profile .site-url{font-family:var(--mono);font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.page-admin-customer-profile .site-row-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.page-admin-customer-profile .site-badge{font-family:var(--mono);font-size:10px;color:var(--muted);background:var(--bg-2);padding:1px 6px;border-radius:4px}
.page-admin-customer-profile .site-live{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--forest)}
.page-admin-customer-profile .t-wrap{background:var(--paper);border:1px solid var(--hair);border-radius:11px;overflow:hidden}
.page-admin-customer-profile .t{width:100%;border-collapse:collapse;font-size:12.5px}
.page-admin-customer-profile .t thead th{background:var(--paper-2);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair);white-space:nowrap}
.page-admin-customer-profile .t tbody tr{transition:background .15s;border-bottom:1px solid var(--hair)}
.page-admin-customer-profile .t tbody tr:hover{background:var(--bg-2)}
.page-admin-customer-profile .t tbody tr:last-child{border-bottom:0}
.page-admin-customer-profile .t tbody td{padding:11px 12px;vertical-align:middle}
.page-admin-customer-profile .t-name{display:flex;align-items:center;gap:10px}
.page-admin-customer-profile .logo-bubble{width:28px;height:28px;border-radius:7px;background:var(--bg-2);border:1px solid var(--hair);font-family:var(--serif);font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);flex-shrink:0;letter-spacing:-.02em}
.page-admin-customer-profile .t-name .ns{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.page-admin-customer-profile .t-name b{font-size:13px;font-weight:500}
.page-admin-customer-profile .t-name span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.page-admin-customer-profile .cell-muted{font-family:var(--mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.page-admin-customer-profile .cell-mono{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.page-admin-customer-profile .status-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:99px;font-family:var(--mono);font-size:10px;letter-spacing:.05em}
.page-admin-customer-profile .status-pill.active{background:var(--forest-soft);color:var(--forest)}
.page-admin-customer-profile .status-pill.trial{background:var(--blue-soft);color:var(--blue)}
.page-admin-customer-profile .status-pill .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.page-admin-customer-profile .plan-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;font-weight:500}
.page-admin-customer-profile .plan-pill.pro{background:var(--ink);color:var(--bg)}
.page-admin-customer-profile .plan-pill.free{background:var(--bg-2);color:var(--muted);border:1px solid var(--hair)}
.page-admin-customer-profile .audit-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:12.5px}
.page-admin-customer-profile .audit-item:last-child{border-bottom:0}
.page-admin-customer-profile .audit-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--muted)}
.page-admin-customer-profile .audit-dot.good{background:var(--forest)}
.page-admin-customer-profile .audit-dot.fair{background:var(--gold)}
.page-admin-customer-profile .audit-dot.risk,.page-admin-customer-profile .audit-dot.crit{background:var(--tomato)}
.page-admin-customer-profile .audit-body{flex:1;min-width:0;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.page-admin-customer-profile .audit-score{font-size:11px;color:var(--muted)}
.page-admin-customer-profile .activity-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--hair);font-size:12.5px}
.page-admin-customer-profile .activity-item:last-child{border-bottom:0}
.page-admin-customer-profile .activity-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--muted)}
.page-admin-customer-profile .activity-dot.danger{background:var(--tomato)}
.page-admin-customer-profile .activity-dot.ok{background:var(--forest)}
.page-admin-customer-profile .activity-body{flex:1;min-width:0;display:flex;gap:4px;align-items:baseline;flex-wrap:wrap}
.page-admin-customer-profile .activity-who{font-weight:500}
.page-admin-customer-profile .activity-verb{color:var(--muted)}
.page-admin-customer-profile .item-meta{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex-shrink:0}
.page-admin-customer-profile .band{display:inline-flex;align-items:center;padding:2px 6px;border-radius:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;font-weight:500;text-transform:uppercase}
.page-admin-customer-profile .band.good{background:var(--forest-soft);color:var(--forest)}
.page-admin-customer-profile .band.fair{background:var(--gold-soft);color:oklch(.46 .12 75)}
.page-admin-customer-profile .band.risk,.page-admin-customer-profile .band.crit{background:var(--tomato-soft);color:var(--tomato)}
.page-admin-customer-profile .empty-state{font-size:13px;color:var(--muted);padding:10px 0}
@media(max-width:700px){.page-admin-customer-profile .profile-hero{flex-direction:column;align-items:flex-start}.page-admin-customer-profile .profile-avatar{width:44px;height:44px;border-radius:11px;font-size:18px}.page-admin-customer-profile .site-url{display:none}}
/* customer-profile polish patch */
.page-admin-customer-profile .section{box-shadow:var(--shadow-card);margin-bottom:14px}
.page-admin-customer-profile .section:last-child{margin-bottom:0}
.page-admin-customer-profile .two-col .section{margin-bottom:0}
.page-admin-customer-profile .ws-card{background:var(--bg);border-color:var(--hair-2);transition:border-color .18s,box-shadow .18s}
.page-admin-customer-profile .ws-card:hover{border-color:var(--hair-3);box-shadow:0 2px 12px -6px rgba(26,24,20,.12)}
.page-admin-customer-profile .ws-title{font-weight:500}
.page-admin-customer-profile .ws-default-badge{padding:2px 8px;letter-spacing:.06em;font-weight:500}
.page-admin-customer-profile .ws-empty{font-size:12.5px;font-style:italic;padding:4px 0}
.page-admin-customer-profile .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 20px;text-align:center;color:var(--muted);font-size:13px}
.page-admin-customer-profile .empty-state svg{width:28px;height:28px;opacity:.3;flex-shrink:0}
.page-admin-customer-profile .empty-state span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}