/* ============================================================
   17. FILM BET ADMIN PANEL — platform admin surface skin
   Full-bleed shell rendered by 36-admin.js (views: admin-*).

   Strict local-data isolation: this layer styles platform
   telemetry, license keys, and feature flags ONLY.

   Token contract (no hardcoded colors — every rule reads the
   [data-interface] / [data-accent] token system from
   00-tokens.css so all themes restate the surface):
     --bg-primary      -> var(--bg)          --text-muted  -> var(--ink3)
     --bg-surface      -> var(--panel)       --border-subtle -> var(--line)
     --accent-primary  -> var(--accent-color)
     hover tint        -> var(--hov) / var(--panel2)
   ============================================================ */

/* ---------- LOGIN SCREEN ---------- */
.adm-login-shell{display:grid;place-items:center;min-height:calc(100vh - 46px);padding:32px 20px;background:linear-gradient(rgba(9,10,12,.68),rgba(9,10,12,.82)),url('../assets/images/film_collage.png') center/cover no-repeat;}
.adm-login-panel{width:min(440px, calc(100vw - 40px));padding:32px 28px 28px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-3)}
.adm-login-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px}
.adm-login-mark{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);box-shadow:0 0 16px var(--accent-glow);color:var(--ink);overflow:hidden}
.adm-login-mark .adm-brand-svg{width:36px;height:36px;display:block}
.adm-login-brand-copy{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.adm-login-brand-copy b{font:700 15px var(--sans);letter-spacing:.18em;color:var(--ink)}
.adm-login-brand-copy em{font:700 9px var(--mono);letter-spacing:.32em;color:var(--accent-color);font-style:normal}
.adm-login-header{text-align:center;margin-bottom:24px}
.adm-login-header .adm-panel-note{display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px;font:700 9px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-color)}
.adm-login-header h1{font:700 30px var(--disp);letter-spacing:.04em;color:var(--ink);text-transform:uppercase;line-height:1.1}
.adm-login-header p{margin-top:8px;font:500 12px var(--sans);color:var(--ink3)}
.adm-login-form{display:flex;flex-direction:column;gap:18px}
.adm-login-field{position:relative;display:flex;flex-direction:column;gap:8px}
.adm-login-field label{font:600 12px var(--sans);color:var(--ink2)}
.adm-login-field input{width:100%;height:42px;padding:0 14px;background:var(--bg);border:1px solid var(--line2);border-radius:var(--radius-sm);color:var(--ink);font:500 13px var(--sans);outline:none;transition:border-color .12s ease, box-shadow .12s ease}
.adm-login-field input::placeholder{color:var(--ink3)}
.adm-login-field input:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--accent-bg)}
.adm-login-field-error:not([hidden]){position:absolute;left:0;top:calc(100% + 5px);z-index:2;max-width:100%;padding:8px 10px;border:1px solid var(--danger);border-radius:var(--radius-xs);background:var(--panel);box-shadow:var(--shadow-2);color:var(--danger);font:600 10px/1.4 var(--mono)}
.adm-login-field input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 20%,transparent)}
.adm-login-submit,.adm-login-back{width:100%;justify-content:center;height:42px;border-radius:var(--radius-sm);font:700 12px var(--sans);letter-spacing:.08em;text-transform:uppercase}
.adm-login-back{background:var(--panel2);border:1px solid var(--line2);color:var(--ink2)}
.adm-login-back:hover{background:var(--hov);border-color:var(--accent-border);color:var(--ink)}
.adm-login-error{min-height:18px;font:600 11px var(--mono);color:var(--danger);letter-spacing:.04em}

/* ---------- SHELL ---------- */
.adm{height:calc(100vh - 46px);display:flex;flex-direction:column;background:var(--bg);color:var(--ink);min-width:0}

/* ---------- TOP NAVIGATION BAR ---------- */
.adm-top{height:52px;flex:none;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.adm-brand{display:flex;align-items:center;gap:10px;flex:none}
.adm-logo-mark{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--ink);overflow:hidden}
.adm-logo-mark .adm-brand-svg{width:28px;height:28px;display:block}
.adm-logo-text{display:flex;flex-direction:column;line-height:1.1}
.adm-logo-text b{font:700 11.5px var(--sans);letter-spacing:.16em;color:var(--ink)}
.adm-logo-text em{font:700 8.5px var(--mono);font-style:normal;letter-spacing:.3em;color:var(--accent-color)}
.adm-env-badge{height:24px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--danger-border);border-radius:var(--radius-xs);background:var(--danger-subtle);color:var(--danger);font:700 8.5px var(--mono);letter-spacing:.18em;cursor:pointer;flex:none}
.adm-env-badge.staging{border-color:var(--warning-border);background:var(--warning-subtle);color:var(--warning)}
.adm-env-badge i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.adm-env-badge:hover{filter:brightness(1.05)}
/* center: global admin search (Ctrl+K) */
.adm-search{flex:1;max-width:520px;margin:0 auto;height:34px;display:inline-flex;align-items:center;gap:9px;padding:0 10px 0 12px;background:var(--bg);border:1px solid var(--line2);border-radius:var(--radius-xs);color:var(--ink3);font:500 11.5px var(--sans);cursor:pointer;text-align:left;min-width:180px}
.adm-search:hover{border-color:var(--accent-border);color:var(--ink2)}
.adm-search .ic{width:13px;height:13px;flex:none}
.adm-search span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-search kbd{font:600 8.5px var(--mono);letter-spacing:.1em;padding:3px 6px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:3px;color:var(--ink3);background:var(--panel2);flex:none}

/* right cluster: bell / api status / clock / profile */
.adm-top-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.adm-icon-btn{position:relative;width:32px;height:32px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;background:transparent;color:var(--ink3);border-radius:var(--radius-xs);cursor:pointer}
.adm-icon-btn:hover{background:var(--hov);color:var(--ink)}
.adm-icon-btn .ic{width:16px;height:16px}
.adm-bell-badge{position:absolute;top:2px;right:2px;min-width:14px;height:14px;padding:0 3px;border-radius:999px;background:var(--danger);color:var(--danger-contrast);font:700 8px/14px var(--mono);text-align:center;letter-spacing:0}
.adm-api{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border:1px solid var(--success-border);border-radius:2px;background:var(--success-subtle);color:var(--success);font:700 8.5px var(--mono);letter-spacing:.16em;cursor:pointer;flex:none}
.adm-api.warn{border-color:var(--warning-border);background:var(--warning-subtle);color:var(--warning)}
.adm-api i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent);flex:none}
.adm-api:hover{filter:brightness(1.06)}
.adm-clock{font:600 10px var(--mono);letter-spacing:.1em;color:var(--ink3);padding:0 4px;flex:none}
.adm-top-div{width:1px;height:22px;background:var(--line);flex:none}
/* admin profile dropdown */
.adm-user{position:relative;flex:none}
.adm-user-btn{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 9px;background:transparent;border:1px solid var(--line2);border-radius:var(--radius-xs);color:var(--ink2);cursor:pointer}
.adm-user-btn:hover{background:var(--hov);border-color:var(--accent-border);color:var(--ink)}
.adm-user-ava{width:22px;height:22px;border-radius:50%;background:var(--accent-color);color:var(--accent-contrast);display:flex;align-items:center;justify-content:center;font:800 10px var(--disp);flex:none}
.adm-user-copy{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.adm-user-copy b{font:600 11px var(--sans);color:var(--ink)}
.adm-user-copy span{font:600 7.5px var(--mono);letter-spacing:.18em;color:var(--ink3)}
.adm-user-btn .ic{width:12px;height:12px;color:var(--ink3)}
.adm-user-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:9000;width:230px;padding:6px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius-sm);box-shadow:var(--shadow-2)}
.adm-user-menu[hidden]{display:none}
.adm-menu-head{padding:8px 10px 9px;border-bottom:1px solid var(--line);margin-bottom:5px}
.adm-menu-head b{display:block;font:600 12px var(--sans);color:var(--ink)}
.adm-menu-head span{font:500 9px var(--mono);letter-spacing:.12em;color:var(--ink3);text-transform:uppercase}
.adm-menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;background:none;border-radius:var(--radius-xs);color:var(--ink2);font:500 12px var(--sans);text-align:left;cursor:pointer}
.adm-menu-item:hover{background:var(--hov);color:var(--ink)}
.adm-menu-item .ic{width:14px;height:14px;flex:none;color:var(--ink3)}
.adm-menu-item.danger{color:var(--danger)}
.adm-menu-item.danger .ic{color:var(--danger)}
.adm-menu-div{height:1px;background:var(--line);margin:5px 4px}
/* ---------- SIDEBAR (collapsible icon rail) ---------- */
.adm-body{flex:1;display:flex;min-height:0}
.adm-side{width:280px;flex:none;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;overflow-x:hidden;position:relative;z-index:20}
.adm-side.collapsed{width:60px}
.adm-side.collapsed .adm-item-label,.adm-side.collapsed .adm-item .adm-count,.adm-side.collapsed .adm-group-label,.adm-side.collapsed .adm-privacy-copy{display:none}
.adm-side.collapsed .adm-item{justify-content:center;padding:10px 0;margin:2px 10px}
.adm-side.collapsed .adm-privacy{justify-content:center;padding:10px 8px;margin:0 10px}
.adm-group-label{font:700 9px var(--mono);letter-spacing:.2em;color:var(--ink3);text-transform:uppercase;padding:18px 20px 8px}
.adm-side.collapsed .adm-group-label{height:14px;padding:0}
.adm-item{display:flex;align-items:center;gap:13px;width:calc(100% - 16px);margin:2px 8px;padding:11px 14px;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink2);font:500 14px var(--sans);text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden}
.adm-item .ic{width:18px;height:18px;flex:none}
.adm-item:hover{background:var(--hov);color:var(--ink)}
.adm-item.active{background:var(--accent-bg);color:var(--accent-color);box-shadow:inset 3px 0 0 var(--accent-color)}
.adm-item.active .ic{color:var(--accent-color)}
.adm-count{margin-left:auto;font:700 8.5px var(--mono);letter-spacing:.06em;padding:2px 7px;border-radius:2px;background:var(--panel2);border:1px solid var(--line2);color:var(--ink3);flex:none}
.adm-count.hot{background:var(--danger-subtle);border-color:var(--danger-border);color:var(--danger)}

/* privacy-secured footer badge */
.adm-privacy{display:flex;align-items:center;gap:9px;margin:14px 10px 8px;padding:10px 12px;border:1px dashed var(--success-border);border-radius:var(--radius-xs);background:var(--success-subtle)}
.adm-privacy .ic{width:15px;height:15px;color:var(--success);flex:none}
.adm-privacy-copy{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.adm-privacy-copy b{font:700 8px var(--mono);letter-spacing:.18em;color:var(--success)}
.adm-privacy-copy span{font:500 9.5px var(--sans);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-side-foot{margin-top:auto;flex:none;border-top:1px solid var(--line);padding:6px 8px}
.adm-side-toggle{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:0;background:none;border-radius:var(--radius-xs);color:var(--ink3);font:600 10px var(--mono);letter-spacing:.14em;cursor:pointer}
.adm-side-toggle:hover{background:var(--hov);color:var(--ink)}
.adm-side-toggle .ic{width:14px;height:14px;flex:none}
.adm-side.collapsed .adm-side-toggle-label{display:none}
.adm-side.collapsed .adm-side-toggle{justify-content:center;padding:9px 0}
/* ---------- MAIN COLUMN ---------- */
.adm-main{flex:1;min-width:0;display:flex;flex-direction:column}
.adm-main-head{flex:none;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 26px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.adm-crumb{display:flex;align-items:center;gap:9px;font:500 13px var(--sans);letter-spacing:.01em;text-transform:none;color:var(--ink3)}
.adm-crumb i{font-style:normal;opacity:.55}
.adm-crumb b{color:var(--accent-color);font-weight:600}
.adm-main-title{font:700 24px var(--disp);letter-spacing:.02em;text-transform:none;color:var(--ink);line-height:1;margin-top:7px}
.adm-main-sub{font:500 11px var(--sans);color:var(--ink3);margin-top:6px;max-width:640px}
.adm-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adm-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--radius-sm);color:var(--ink);font:600 12px var(--sans);letter-spacing:.01em;text-transform:none;cursor:pointer;white-space:nowrap}
.adm-btn:hover{border-color:var(--accent-border);color:var(--ink)}
.adm-btn .ic{width:14px;height:14px}
.adm-btn-accent{background:var(--accent-color);border-color:var(--accent-color);color:var(--accent-contrast)}
.adm-btn-accent:hover{background:var(--accent-color);color:var(--accent-contrast);filter:brightness(1.08)}
.adm-btn-danger{color:var(--danger);border-color:var(--danger-border)}
.adm-btn-danger:hover{background:var(--danger-subtle);border-color:var(--danger-border);color:var(--danger)}
.adm-main-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px 26px 26px}
.adm-foot{flex:none;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:8px 26px;border-top:1px solid var(--line);background:var(--panel);font:600 8.5px var(--mono);letter-spacing:.16em;color:var(--ink3)}
.adm-foot-privacy{display:inline-flex;align-items:center;gap:7px;color:var(--success)}
.adm-foot-privacy .ic{width:12px;height:12px}
.adm-foot-spacer{flex:1}
/* ---------- EXECUTIVE METRIC CARDS ---------- */
.adm-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.adm-grid2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:start}
.adm-metric{position:relative;min-width:0;padding:18px 20px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;gap:2px}
.adm-metric::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--metric-accent,var(--accent-color))}
.adm-metric-label{display:flex;align-items:center;gap:8px;font:500 11.5px/1.35 var(--sans);letter-spacing:.01em;text-transform:none;color:var(--ink3);min-height:16px}
.adm-metric-label .ic{width:14px;height:14px;flex:none}
.adm-metric-value{display:flex;align-items:baseline;gap:8px;margin-top:10px;font:800 clamp(22px,2vw,28px)/1.05 var(--disp);letter-spacing:.02em;color:var(--ink);white-space:nowrap;min-width:0}
.adm-metric-value small{font:600 10.5px var(--mono);color:var(--ink3);letter-spacing:.08em;flex:none}
.adm-metric-row{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;flex-wrap:wrap;min-height:22px}
.adm-trend{display:inline-flex;align-items:center;gap:4px;font:700 9px var(--mono);letter-spacing:.1em;padding:2px 7px;border-radius:2px}
.adm-trend .ic{width:10px;height:10px}
.adm-trend.up{color:var(--success);background:var(--success-subtle);border:1px solid var(--success-border)}
.adm-trend.down{color:var(--danger);background:var(--danger-subtle);border:1px solid var(--danger-border)}
.adm-trend.good-down{color:var(--success);background:var(--success-subtle);border:1px solid var(--success-border)}
.adm-metric-sub{font:500 9px/1.6 var(--mono);letter-spacing:.1em;color:var(--ink3);text-transform:uppercase;overflow-wrap:anywhere}
.adm-pill{display:inline-flex;align-items:center;gap:6px;font:700 8px var(--mono);letter-spacing:.16em;padding:3px 9px;border-radius:2px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink2);text-transform:uppercase;white-space:nowrap}
.adm-pill i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.adm-pill.ok{color:var(--success);border-color:var(--success-border);background:var(--success-subtle)}
.adm-pill.warn{color:var(--warning);border-color:var(--warning-border);background:var(--warning-subtle)}
.adm-pill.err{color:var(--danger);border-color:var(--danger-border);background:var(--danger-subtle)}
.adm-pill.info{color:var(--info);border-color:var(--info-border);background:var(--info-subtle)}
/* ---------- PANELS ---------- */
.adm-panel{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm)}
.adm-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--line)}
.adm-panel-title{font:600 14.5px var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);display:flex;align-items:center;gap:10px}
.adm-panel-title .ic{width:16px;height:16px;color:var(--accent-color)}
.adm-panel-note{font:500 9px var(--mono);letter-spacing:.1em;color:var(--ink3);text-transform:uppercase}
.adm-panel-body{padding:16px 18px}

/* live service health grid */
.adm-svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.adm-svc{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 13px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-xs)}
.adm-svc-top{display:flex;align-items:center;gap:8px;min-width:0}
.adm-dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}
.adm-dot.ok{background:var(--success);color:var(--success)}
.adm-dot.warn{background:var(--warning);color:var(--warning)}
.adm-dot.err{background:var(--danger);color:var(--danger)}
.adm-svc-name{font:600 12px var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.adm-svc-meta{display:flex;align-items:center;gap:10px;font:500 9px var(--mono);letter-spacing:.08em;color:var(--ink3);text-transform:uppercase;flex-wrap:wrap}
.adm-meter{height:4px;border-radius:999px;background:var(--line);overflow:hidden;flex:none}
.adm-meter i{display:block;height:100%;border-radius:999px;background:var(--accent-color)}
.adm-meter.ok i{background:var(--success)}
.adm-meter.warn i{background:var(--warning)}

/* error frequency timeline (div bar chart) */
.adm-chart{display:flex;align-items:flex-end;gap:3px;height:140px;padding:12px 14px 0;background:
  repeating-linear-gradient(to top,transparent 0 27px,var(--line) 27px calc(27px + 1px))}
.adm-chart-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.adm-chart-bar{width:100%;border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--danger) 38%,transparent);min-height:2px}
.adm-chart-bar.hot{background:var(--danger)}
.adm-chart-axis{display:flex;justify-content:space-between;padding:6px 14px 12px;font:500 8px var(--mono);letter-spacing:.12em;color:var(--ink3)}
/* ---------- TABLES ---------- */
.adm-table{width:100%;border-collapse:collapse}
.adm-table th{padding:11px 14px;text-align:left;font:700 8.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line);white-space:nowrap}
.adm-table td{padding:13px 14px;border-bottom:1px solid var(--line);font:500 13px var(--sans);color:var(--ink2);vertical-align:middle}
.adm-table tbody tr:hover td{background:var(--panel2)}
.adm-table tbody tr:last-child td{border-bottom:0}
.adm-table .mono{font:600 10.5px var(--mono);letter-spacing:.04em;color:var(--ink)}
.adm-table .strong{color:var(--ink);font-weight:600}
.adm-table .dim{color:var(--ink3);font-size:11px}
.adm-mini{border:0;background:none;padding:4px 7px;border-radius:var(--radius-xs);color:var(--ink3);cursor:pointer;font:600 8.5px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.adm-mini:hover{background:var(--hov);color:var(--ink)}
.adm-mini.danger{color:var(--danger)}
.adm-mini.danger:hover{background:var(--danger-subtle)}

/* ---------- FEATURE FLAG SWITCH (button-based) ---------- */
.adm-switch{position:relative;width:34px;height:18px;flex:none;border-radius:999px;border:1px solid var(--line2);background:var(--bg-input-recessed,var(--bg));cursor:pointer;padding:0}
.adm-switch::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--ink3)}
.adm-switch.on{border-color:var(--accent-border);background:var(--accent-bg)}
.adm-switch.on::after{left:18px;background:var(--accent-color)}
.adm-switch:hover{border-color:var(--accent-border)}
.adm-flag-row{display:flex;align-items:center;gap:11px;padding:10px 16px;border-bottom:1px solid var(--line)}
.adm-flag-row:last-child{border-bottom:0}
.adm-flag-row:hover{background:var(--panel2)}
.adm-flag-copy{flex:1;min-width:0}
.adm-flag-copy b{display:block;font:600 12px var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-flag-copy span{display:block;font:500 10px var(--mono);letter-spacing:.06em;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- COMMAND PALETTE (Ctrl+K) ---------- */
.adm-palette-wrap{position:fixed;inset:0;z-index:60000;display:flex;justify-content:center;align-items:flex-start;padding:12vh 20px 20px;background:color-mix(in srgb,var(--bg) 55%,transparent)}
.adm-palette-wrap[hidden]{display:none}
.adm-palette{width:min(640px,94vw);background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius-sm);box-shadow:var(--shadow-3);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.adm-pal-input-row{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);flex:none}
.adm-pal-input-row .ic{width:15px;height:15px;color:var(--ink3);flex:none}
.adm-pal-input{flex:1;border:0;background:none;color:var(--ink);font:500 14px var(--sans);outline:none;min-width:0}
.adm-pal-input::placeholder{color:var(--ink3)}
.adm-pal-esc{font:600 8px var(--mono);letter-spacing:.14em;padding:3px 7px;border:1px solid var(--line2);border-radius:3px;color:var(--ink3);background:var(--panel2);flex:none}
.adm-pal-list{flex:1;min-height:0;overflow-y:auto;padding:6px}
.adm-pal-group{font:700 8px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);padding:10px 10px 5px}
.adm-pal-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;border-radius:var(--radius-xs);background:none;color:var(--ink2);cursor:pointer;text-align:left}
.adm-pal-item .adm-pal-ic{width:15px;height:15px;flex:none;color:var(--ink3);display:inline-flex}
.adm-pal-item .adm-pal-ic .ic{width:15px;height:15px}
.adm-pal-label{font:500 12.5px var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-pal-hint{margin-left:auto;font:500 9px var(--mono);letter-spacing:.1em;color:var(--ink3);text-transform:uppercase;white-space:nowrap;flex:none}
.adm-pal-item.active{background:var(--accent-bg)}
.adm-pal-item.active .adm-pal-label{color:var(--accent-color)}
.adm-pal-empty{padding:26px 16px;text-align:center;font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.adm-pal-foot{flex:none;display:flex;align-items:center;gap:14px;padding:9px 14px;border-top:1px solid var(--line);font:500 8.5px var(--mono);letter-spacing:.12em;color:var(--ink3)}
.adm-pal-foot b{color:var(--ink2)}
/* ---------- misc view bits ---------- */
.adm-kv{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line)}
.adm-kv:last-child{border-bottom:0}
.adm-kv span{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.adm-kv b{font:600 12px var(--sans);color:var(--ink)}
.adm-kv b.mono{font:600 10.5px var(--mono);letter-spacing:.06em}
.adm-grid-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.adm-empty{padding:26px 16px;text-align:center;font:600 9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.adm-inp{height:32px;padding:0 11px;background:var(--bg);border:1px solid var(--line2);border-radius:var(--radius-xs);color:var(--ink);font:500 12px var(--sans);outline:none;min-width:0}
.adm-inp:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--accent-bg)}
.adm-inp::placeholder{color:var(--ink3)}
.adm-chip-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.adm-chip{height:26px;padding:0 11px;border:1px solid var(--line2);border-radius:2px;background:transparent;color:var(--ink3);font:600 8.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.adm-chip:hover{border-color:var(--accent-border);color:var(--ink)}
.adm-chip.active{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent-color)}
.adm-hl{background:color-mix(in srgb,var(--accent-color) 16%,transparent);border:1px solid var(--accent-border)}
.adm-heat{display:flex;flex-direction:column;gap:4px}
.adm-heat-row{display:flex;align-items:center;gap:9px;min-width:0}
.adm-heat-row>span{width:130px;flex:none;font:500 10.5px var(--mono);color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.adm-heat-cells{flex:1;display:flex;gap:3px;min-width:0}
.adm-heat-cell{flex:1;height:14px;border-radius:2px;min-width:0}

/* ---------- USAGE ANALYTICS DASHBOARD ---------- */
/* 24-col hourly sparkline cell inside the top-apps table */
.adm-hcell{display:inline-block;flex:1;min-width:2px;border-radius:1px;background:color-mix(in srgb,var(--accent-color) 42%,transparent)}
.adm-hcell:first-child{margin-left:0}
/* horizontal share bar for ranked apps */
.adm-appbar{display:block;height:6px;border-radius:var(--radius-xs);background:var(--line);overflow:hidden;min-width:90px}
.adm-appbar i{display:block;height:100%;border-radius:var(--radius-xs);background:var(--accent-color)}
/* 24-bar per-app sparkline strip */
.adm-spark{display:flex;align-items:flex-end;gap:2px;height:26px;min-width:220px}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1240px){.adm-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.adm-grid2{grid-template-columns:1fr}.adm-svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1040px){.adm-clock{display:none}.adm-search kbd{display:none}}
@media(max-width:860px){.adm-side{width:60px}.adm-side .adm-item-label,.adm-side .adm-item .adm-count,.adm-side .adm-group-label,.adm-side .adm-privacy-copy{display:none}.adm-side .adm-item{justify-content:center;padding:10px 0;margin:2px 10px}.adm-side .adm-side-toggle-label{display:none}.adm-side .adm-side-toggle{justify-content:center;padding:9px 0}.adm-user-copy{display:none}}
@media(max-width:640px){.adm-grid4{grid-template-columns:1fr}.adm-svc-grid{grid-template-columns:1fr}.adm-main-head,.adm-main-scroll,.adm-foot{padding-left:16px;padding-right:16px}.adm-search span{display:none}}

/* NOTE: 00-tokens.css intentionally disables transitions/animations inside
   #app (synchronous view mounting). This skin therefore relies on instant
   state changes and token-derived hover tints only — no keyframes defined
   here by design. prefers-reduced-motion users get the identical surface. */

/* ---------- LIVE SUBSCRIPTIONS (overview heartbeat strip + conn pill) ---------- */
.adm-livebar{display:flex;align-items:center;gap:10px;padding:10px 16px;margin-bottom:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);font:700 8.5px var(--mono);letter-spacing:.16em;color:var(--ink3);text-transform:uppercase;flex-wrap:wrap}
.adm-livebar b{font:800 13px var(--disp);letter-spacing:.04em;color:var(--ink)}
.adm-live-div{width:1px;height:16px;background:var(--line);flex:none}
.adm-conn{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:2px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink3);font:700 8px var(--mono);letter-spacing:.16em;cursor:pointer;flex:none}
.adm-conn i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.adm-conn.ok{border-color:var(--success-border);background:var(--success-subtle);color:var(--success)}
.adm-conn.seed{border-color:var(--warning-border);background:var(--warning-subtle);color:var(--warning)}
.adm-conn:hover{filter:brightness(1.06)}
.adm-dot.off{background:var(--ink3);color:var(--ink3)}