/* ==========================================================================
   DashView — merged workspace (Overview + Data Studio in one shell)
   --------------------------------------------------------------------------
   Loaded after base.css / components.css / dashboard.css / studio-dash.css.
   Re-tints the whole product to DashView's violet/cyan identity, adds a
   proper light theme (previously only a dark theme existed), and supplies
   the shared shell chrome + view-switching used by dashboard.html.
   ========================================================================== */

/* ── Brand re-tint (DashView engineering-console: graphite + amber) ──── */
:root{
  --signal:#e8a33d; --signal-bright:#f0c06a;
  --signal-10:rgba(var(--sg,232,163,61),.10); --signal-20:rgba(var(--sg,232,163,61),.18);
  --accent2:#5b8fae; --accent2-10:rgba(91,143,174,.12);
  --emerald:#4fb477; --emerald-10:rgba(79,180,119,.12);
}
.btn-signal{ background:var(--signal); color:#191008; }
.btn-signal:hover{ background:var(--beacon-h,#d98f27); box-shadow:0 12px 28px -10px rgba(var(--sg,232,163,61),.5); }
.btn-primary:hover{ background:var(--signal); color:#191008; }
.eyebrow, .eyebrow::before{ color:var(--signal); }
.eyebrow::before{ background:var(--signal-bright); box-shadow:0 0 0 3px var(--signal-10); }

/* ── Real light theme (content surfaces flip; sidebar chrome stays dark
   graphite on purpose — see dashboard.css's own "dark chrome / light content"
   convention, kept consistent here instead of only half-implemented) ──── */
html[data-theme="light"]{
  --ink:#141813; --ink-70:rgba(20,24,19,.88); --ink-50:rgba(20,24,19,.74); --ink-30:rgba(20,24,19,.62);
  --paper:#ffffff; --paper-soft:#f2f3ef; --paper-alt:#f5f6f3;
  --line:rgba(184,115,22,.12); --line-strong:rgba(184,115,22,.24);
  --signal:#b87316; --signal-bright:#a9640f; --signal-10:rgba(184,115,22,.08); --signal-20:rgba(184,115,22,.15);
  --accent2:#3d7290; --accent2-10:rgba(61,114,144,.10);
  --beacon:#a9640f; --beacon-10:rgba(169,100,15,.10);
  --danger:#c7402a; --danger-10:rgba(199,64,42,.08);
  --emerald:#2f8f55; --emerald-10:rgba(47,143,85,.10);
  --shadow-sm:0 1px 2px rgba(20,24,19,.08);
  --shadow-md:0 8px 24px -8px rgba(20,24,19,.14);
  --shadow-lg:0 20px 50px -14px rgba(20,24,19,.18);
}
html[data-theme="light"] .studio-dropzone-icon,
html[data-theme="light"] .studio-privacy-note svg{ color:var(--signal); }

/* ── KPI value (Studio's dynamically-added KPIs set the class but the
   original stylesheet never sized it — fixing that here) ──────────────── */
.kpi-value{ font-family:var(--f-display); font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.02em; }
.kpi-card.c-accent2 .kpi-icon{ background:var(--accent2-10); color:var(--accent2); }
.kpi-card.c-emerald .kpi-icon{ background:var(--emerald-10); color:var(--emerald); }
.kpi-delta{ font-family:var(--f-mono); font-size:11px; margin-top:4px; display:flex; align-items:center; gap:4px; }
.kpi-delta.up{ color:var(--emerald); } .kpi-delta.down{ color:var(--danger); } .kpi-delta.neutral{ color:var(--ink-30); }

/* ── View switching ────────────────────────────────────────────────────── */
.view-panel{ display:none; }
.view-panel.active{ display:block; }

/* ── Sidebar: badges + collapse ───────────────────────────────────────── */
.dash-nav-link .badge.new{ background:var(--emerald-10); color:var(--emerald); }
.dash-shell.collapsed{ grid-template-columns:68px minmax(0,1fr); }
.dash-shell.collapsed .dash-side-brand span,
.dash-shell.collapsed .dash-nav-label,
.dash-shell.collapsed .dash-nav-link span:not(.badge),
.dash-shell.collapsed .dash-side-user-info{ display:none; }
.dash-shell.collapsed .dash-nav-link .badge{ display:none; }
.dash-shell.collapsed .dash-nav-link{ justify-content:center; }
.dash-side-collapse-btn{ width:30px; height:30px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--paper-on-navy-60); flex-shrink:0; margin-left:auto; }
.dash-side-collapse-btn:hover{ background:var(--navy-raised); color:var(--paper-on-navy); }
.dash-shell.collapsed .dash-side-collapse-btn svg{ transform:rotate(180deg); }

/* ── Topbar extras: theme toggle icon swap, notif dot, date range pill ─── */
.theme-toggle-btn{ position:relative; }
.theme-toggle-btn svg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:opacity .25s ease, transform .4s cubic-bezier(.16,1,.3,1); }
.theme-toggle-btn .icon-sun{ opacity:0; transform:translate(-50%,-50%) rotate(-70deg) scale(.4); }
.theme-toggle-btn .icon-moon{ opacity:1; transform:translate(-50%,-50%) rotate(0) scale(1); }
html[data-theme="light"] .theme-toggle-btn .icon-sun{ opacity:1; transform:translate(-50%,-50%) rotate(0) scale(1); }
html[data-theme="light"] .theme-toggle-btn .icon-moon{ opacity:0; transform:translate(-50%,-50%) rotate(70deg) scale(.4); }

.date-range{ display:flex; align-items:center; gap:0; background:var(--paper-soft); border:1px solid var(--line); border-radius:var(--r-full); padding:2px; }
.date-range button{ padding:6px 13px; border-radius:var(--r-full); font-size:.72rem; font-weight:600; color:var(--ink-30); }
.date-range button.active{ background:var(--signal-20); color:var(--signal); }
.date-range button:hover:not(.active){ color:var(--ink); }

/* ── Overview toolbar row (title + date range + actions) ──────────────── */
.ov-head-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ── Category badges (orders table) ───────────────────────────────────── */
.cat-badge{ display:inline-block; padding:3px 10px; border-radius:var(--r-full); font-size:.7rem; font-weight:600; }
.cat-Electronics{ background:var(--accent2-10); color:var(--accent2); }
.cat-Beauty{ background:rgba(154,149,82,.14); color:#9a9552; }
.cat-Home{ background:var(--emerald-10); color:var(--emerald); }
.cat-Toys{ background:var(--beacon-10); color:var(--beacon); }
.cat-Clothing{ background:var(--signal-10); color:var(--signal); }
.cat-Sports{ background:var(--danger-10); color:var(--danger); }

/* ── Studio in-content toolbar (replaces the old standalone dark topbar —
   Studio now lives inside the shared shell, so its controls sit in a slim
   bar at the top of the content column instead of their own header) ──── */
.studio-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.studio-toolbar-left{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.studio-toolbar-right{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.studio-workbook-name{ background:transparent; border:1px solid transparent; color:var(--ink); font-family:var(--f-display); font-size:var(--fs-base); font-weight:600; padding:6px 10px; border-radius:var(--r-sm); min-width:80px; max-width:260px; }
.studio-workbook-name:hover{ background:var(--paper-soft); }
.studio-workbook-name:focus{ outline:none; border-color:var(--signal-bright); background:var(--paper-soft); }
.studio-save-state{ font-family:var(--f-mono); font-size:10.5px; color:var(--ink-30); white-space:nowrap; flex-shrink:0; }
.studio-save-state.unsaved{ color:var(--beacon); }
.studio-dataset-tag{ font-family:var(--f-mono); font-size:10.5px; color:var(--ink-30); white-space:nowrap; }
.studio-divider-v{ width:1px; height:20px; background:var(--line-strong); flex-shrink:0; }
@media (max-width:820px){ .studio-workbook-name, .studio-save-state{ display:none; } }

/* Studio's own components assumed a full-height dark topbar for sticky
   offsets — recalculated now that it sits inside the merged content column. */
.studio-empty{ min-height:60vh; }
.studio-main{ min-height:60vh; align-items:flex-start; }
.studio-fields-rail{ top:0; height:auto; align-self:stretch; border:1px solid var(--line); border-radius:var(--r-md); margin-right:var(--sp-4); }
@media (max-width:900px){
  .studio-fields-rail{ position:fixed; top:0; z-index:240; margin-right:0; border-radius:0; }
}

/* ── Command palette ──────────────────────────────────────────────────── */
.cmd-overlay{ position:fixed; inset:0; background:rgba(5,6,14,.55); backdrop-filter:blur(14px); z-index:500; display:flex; align-items:flex-start; justify-content:center; padding-top:16vh; opacity:0; pointer-events:none; transition:.15s; }
.cmd-overlay.open{ opacity:1; pointer-events:all; }
.cmd-box{ background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--r-lg); width:100%; max-width:560px; overflow:hidden; box-shadow:var(--shadow-lg); transform:translateY(-10px); transition:.2s cubic-bezier(.16,1,.3,1); }
.cmd-overlay.open .cmd-box{ transform:translateY(0); }
.cmd-input-wrap{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); }
.cmd-input-wrap svg{ color:var(--ink-30); flex-shrink:0; }
.cmd-input-wrap input{ flex:1; background:none; border:none; outline:none; font-size:.9375rem; color:var(--ink); font-family:inherit; }
.cmd-list{ max-height:360px; overflow-y:auto; padding:8px; }
.cmd-group-label{ font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-30); padding:10px 12px 6px; }
.cmd-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-md); cursor:pointer; transition:.1s; }
.cmd-item:hover, .cmd-item.focused{ background:var(--signal-10); }
.cmd-item-icon{ width:30px; height:30px; border-radius:var(--r-sm); background:var(--paper-soft); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-30); flex-shrink:0; }
.cmd-item-label{ font-size:.875rem; color:var(--ink); flex:1; }
.cmd-item-hint{ font-size:.75rem; color:var(--ink-30); font-family:var(--f-mono); }
.cmd-footer{ padding:10px 20px; border-top:1px solid var(--line); display:flex; align-items:center; gap:14px; font-size:.7rem; color:var(--ink-30); }
.cmd-key{ font-family:var(--f-mono); background:var(--paper-soft); border:1px solid var(--line); border-radius:4px; padding:1px 6px; }

/* ── Notification panel ───────────────────────────────────────────────── */
.notif-panel{ position:fixed; top:64px; right:16px; width:320px; background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); z-index:200; overflow:hidden; transform:translateY(-8px) scale(.97); opacity:0; pointer-events:none; transition:.2s cubic-bezier(.16,1,.3,1); }
.notif-panel.open{ transform:none; opacity:1; pointer-events:all; }
.notif-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); }
.notif-header h4{ font-family:var(--f-display); font-size:.9rem; font-weight:600; }
.notif-list{ max-height:320px; overflow-y:auto; }
.notif-item{ display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); transition:.15s; cursor:pointer; }
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:var(--paper-soft); }
.notif-icon{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-body p{ font-size:.8125rem; color:var(--ink); line-height:1.4; margin-bottom:3px; }
.notif-body span{ font-size:.7rem; color:var(--ink-30); }
.notif-unread{ background:var(--signal); width:6px; height:6px; border-radius:50%; flex-shrink:0; margin-top:6px; }

/* ── Order table search / filter bits reused from Studio's data-search ── */
.ov-table-tools{ display:flex; align-items:center; gap:8px; }
.ov-table-tools .data-search{ min-width:200px; }

/* ── Overview chart-card header + legend ──────────────────────────────── */
.chart-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-2); gap:var(--sp-3); }
.chart-subtitle{ font-size:11px; color:var(--ink-30); font-family:var(--f-mono); margin-top:2px; }
.chart-actions{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.chart-type-btn{ width:28px; height:28px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--ink-30); }
.chart-type-btn.active, .chart-type-btn:hover{ background:var(--signal-10); color:var(--signal); }
.chart-legend{ display:flex; gap:16px; margin-top:14px; flex-wrap:wrap; }
.legend-item{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-30); }
.legend-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ── Overview orders table cells + pagination ─────────────────────────── */
.td-order{ font-family:var(--f-mono); color:var(--ink-30); font-size:.75rem; }
.td-customer{ font-weight:500; color:var(--ink); }
.td-rev{ font-family:var(--f-display); font-weight:600; color:var(--ink); }
.td-qty{ color:var(--ink-30); text-align:center; }
.pagination{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 0; margin-top:6px; border-top:1px solid var(--line); }
.pagination-info{ font-size:.75rem; color:var(--ink-30); }
.pagination-btns{ display:flex; gap:4px; }
.page-btn{ width:30px; height:30px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:.8125rem; color:var(--ink-70); }
.page-btn:hover, .page-btn.active{ background:var(--signal-10); color:var(--signal); }
.page-btn:disabled{ opacity:.35; pointer-events:none; }

/* ── Overview page head layout ────────────────────────────────────────── */
.ov-head{ display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-4); margin-bottom:var(--sp-6); }
.ov-head h1{ font-size:var(--fs-2xl); letter-spacing:-.03em; }
.ov-head p{ color:var(--ink-50); font-size:var(--fs-sm); margin-top:4px; }

/* ── Secondary insights row: Top Customers / Sales by Region / Goal ───── */
.dash-grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-5); margin-bottom:var(--sp-5); }

/* Top customers ranked list */
.rank-list{ display:flex; flex-direction:column; }
.rank-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.rank-row:last-child{ border-bottom:none; padding-bottom:0; }
.rank-num{ width:18px; flex-shrink:0; font-family:var(--f-mono); font-size:11px; color:var(--ink-30); text-align:center; }
.rank-avatar{ width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
.rank-main{ min-width:0; flex:1; display:flex; flex-direction:column; }
.rank-name{ font-size:var(--fs-sm); font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-sub{ font-size:11px; color:var(--ink-30); }
.rank-end{ display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; }
.rank-value{ font-family:var(--f-display); font-size:var(--fs-sm); font-weight:600; color:var(--ink); }

/* Sales by region */
.region-list{ display:flex; flex-direction:column; gap:14px; }
.region-row{ display:flex; align-items:center; }
.region-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-right:9px; }
.region-name{ font-size:var(--fs-sm); color:var(--ink-70); width:112px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.region-pct{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-30); width:34px; text-align:right; flex-shrink:0; }

/* Monthly goal ring */
.goal-panel{ display:flex; flex-direction:column; }
.goal-body{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:var(--sp-3) 0 var(--sp-2); flex:1; justify-content:center; }
.goal-ring{ width:132px; height:132px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-5); transition:background .4s ease; }
.goal-ring-inner{ width:104px; height:104px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-size:var(--fs-xl); font-weight:700; color:var(--ink); }
.goal-current{ font-size:var(--fs-sm); font-weight:600; color:var(--ink); margin-bottom:2px; }
.goal-remaining{ font-size:11.5px; color:var(--ink-30); font-family:var(--f-mono); }

@media (min-width: 1600px) {
  .dash-grid-3{ gap:var(--sp-6); }
}

/* ═══ Command palette v2 (Ctrl/⌘ + K) — clearer, springier, keyboard-friendly ═══ */
.cmd-overlay{ transition:opacity .2s ease; }
.cmd-box{ transform:translateY(-14px) scale(.97); transition:transform .3s cubic-bezier(.34,1.4,.64,1), opacity .2s ease; opacity:0; }
.cmd-overlay.open .cmd-box{ transform:none; opacity:1; }
.cmd-input-wrap{ position:relative; }
.cmd-input-wrap input:focus, .cmd-input-wrap input:focus-visible{ outline:none; box-shadow:none; border:none; }
.cmd-input-wrap::after{ content:""; position:absolute; left:20px; right:20px; bottom:-1px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--signal),var(--signal-bright)); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.cmd-input-wrap:focus-within::after{ transform:scaleX(1); }
.cmd-input-wrap:focus-within svg{ color:var(--signal); }
.cmd-list{ scroll-behavior:smooth; overscroll-behavior:contain; scrollbar-width:thin; }
.cmd-group-label{ position:sticky; top:-8px; z-index:1; background:var(--paper); }
.cmd-item{ position:relative; transition:background-color .12s, transform .15s cubic-bezier(.16,1,.3,1); }
.cmd-item.focused{ background:var(--signal-10); }
.cmd-item.focused::before{ content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:3px; background:var(--signal); }
.cmd-item.focused .cmd-item-icon{ color:var(--signal); border-color:var(--signal); background:var(--signal-10); }
.cmd-item.focused::after{ content:"\21B5"; position:absolute; right:12px; font:600 .72rem var(--f-mono); color:var(--signal); opacity:.9; }
.cmd-item.focused .cmd-item-hint{ opacity:0; }
.cmd-item-hint{ font-family:var(--f-body); font-size:.72rem; letter-spacing:.01em; padding:2px 9px; border-radius:99px; background:var(--paper-soft); border:1px solid var(--line); transition:opacity .12s; }
.cmd-empty{ padding:30px 12px; text-align:center; font-size:.85rem; color:var(--ink-30); }
.cmd-empty[hidden]{ display:none; }
@keyframes cmdItemIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.cmd-overlay.open .cmd-item{ animation:cmdItemIn .32s cubic-bezier(.16,1,.3,1) both; }
.cmd-overlay.open .cmd-item:nth-of-type(1){ animation-delay:.02s } .cmd-overlay.open .cmd-item:nth-of-type(2){ animation-delay:.05s }
.cmd-overlay.open .cmd-item:nth-of-type(3){ animation-delay:.08s } .cmd-overlay.open .cmd-item:nth-of-type(4){ animation-delay:.11s }
.cmd-overlay.open .cmd-item:nth-of-type(5){ animation-delay:.14s } .cmd-overlay.open .cmd-item:nth-of-type(6){ animation-delay:.17s }
.cmd-overlay.open .cmd-item:nth-of-type(n+7){ animation-delay:.2s }
.cmd-footer{ justify-content:flex-start; }
.cmd-footer span{ display:inline-flex; align-items:center; gap:6px; }
@media (prefers-reduced-motion:reduce){ .cmd-box,.cmd-overlay,.cmd-input-wrap::after{ transition:none; } .cmd-overlay.open .cmd-item{ animation:none; } }

/* ═══ iOS-style frosted glass for the command palette ═══ */
.cmd-overlay{ background:rgba(0,0,0,.22); -webkit-backdrop-filter:blur(10px) saturate(120%); backdrop-filter:blur(10px) saturate(120%); }
html[data-theme="dark"] .cmd-overlay{ background:rgba(0,0,0,.38); }
html body .cmd-box{
  background-color:rgba(255,255,255,.62) !important; background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 40%) !important;
  -webkit-backdrop-filter:blur(40px) saturate(190%); backdrop-filter:blur(40px) saturate(190%);
  border:.5px solid rgba(255,255,255,.7); border-radius:26px;
  box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.8) inset, 0 30px 80px -20px rgba(0,0,0,.35), 0 8px 24px -8px rgba(0,0,0,.18);
}
html[data-theme="dark"] body .cmd-box{
  background-color:rgba(36,36,40,.58) !important; background-image:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 38%) !important;
  border:.5px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 .5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.14) inset, 0 30px 80px -20px rgba(0,0,0,.7);
}
.cmd-input-wrap{ margin:10px 12px 0; padding:11px 14px; border:none; border-radius:12px; background:rgba(120,120,128,.14); }
html[data-theme="dark"] .cmd-input-wrap{ background:rgba(118,118,128,.24); }
.cmd-input-wrap::after{ left:14px; right:14px; bottom:0; }
.cmd-list{ padding:8px 10px 10px; }
.cmd-group-label{ background:transparent; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
.cmd-item{ border-radius:12px; }
.cmd-item.focused{ background:rgba(120,120,128,.16); }
html[data-theme="dark"] .cmd-item.focused{ background:rgba(255,255,255,.12); }
.cmd-item-icon{ background:rgba(255,255,255,.55); border:.5px solid rgba(0,0,0,.08); border-radius:9px; }
html[data-theme="dark"] .cmd-item-icon{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }
.cmd-item-hint{ background:rgba(120,120,128,.14); border:none; }
.cmd-footer{ border-top:.5px solid rgba(120,120,128,.28); background:transparent; }
.cmd-key{ background:rgba(120,120,128,.16); border:none; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html body .cmd-box{ background-color:var(--paper) !important; }
}
@media (prefers-reduced-transparency:reduce){
  .cmd-overlay{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  html body .cmd-box{ background-color:var(--paper) !important; background-image:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* ═══ v2.22 — command palette: final polish (same iOS glass, warm accent) ═══ */
.cmd-overlay{ padding:min(14vh,120px) 16px 0; }
.cmd-box{ max-width:600px; will-change:transform,opacity; }
.cmd-input-wrap{ gap:10px; min-height:48px; }
.cmd-input-wrap svg{ width:18px; height:18px; transition:color .2s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.cmd-input-wrap:focus-within svg{ transform:scale(1.08); }
.cmd-input-wrap input{ font-size:1rem; font-weight:500; letter-spacing:-.005em; caret-color:var(--signal); }
.cmd-input-wrap input::placeholder{ color:var(--ink-30); font-weight:400; }
.cmd-esc{ flex:none; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; opacity:.8; }

/* list: no clipped half-row at the bottom — soft fade instead, thin warm scrollbar */
.cmd-list{
  max-height:min(420px,56vh); padding:6px 10px 16px; scroll-padding:36px 0 24px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8px,#000 calc(100% - 30px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 8px,#000 calc(100% - 30px),transparent 100%);
  scrollbar-width:thin; scrollbar-color:rgba(150,140,130,.42) transparent;
}
.cmd-list::-webkit-scrollbar{ width:10px; }
.cmd-list::-webkit-scrollbar-track{ background:transparent; margin:14px 0; }
.cmd-list::-webkit-scrollbar-thumb{ background:rgba(150,140,130,.42); border-radius:10px; border:3px solid transparent; background-clip:padding-box; }
.cmd-list::-webkit-scrollbar-thumb:hover{ background:rgba(232,140,40,.6); background-clip:padding-box; }

.cmd-group-label{ font-size:.66rem; letter-spacing:.1em; padding:12px 12px 6px; }

/* rows */
.cmd-item{ min-height:46px; padding:7px 12px; gap:13px; transition:background-color .14s, transform .18s cubic-bezier(.16,1,.3,1); }
.cmd-item:active{ transform:scale(.985); }
.cmd-item-icon{ width:32px; height:32px; border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,.06); transition:color .15s, background-color .15s, border-color .15s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.cmd-item-icon svg{ width:15px; height:15px; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.cmd-item.focused .cmd-item-icon{ transform:scale(1.06); background:linear-gradient(145deg,rgba(255,176,80,.30),rgba(232,120,30,.14)); box-shadow:0 4px 12px -4px rgba(232,120,30,.45); }
.cmd-item.focused{ background:linear-gradient(90deg,rgba(232,140,40,.13),rgba(120,120,128,.12) 70%); }
html[data-theme="dark"] .cmd-item.focused{ background:linear-gradient(90deg,rgba(232,140,40,.20),rgba(255,255,255,.08) 70%); }
.cmd-item-label{ font-weight:550; letter-spacing:-.005em; }
.cmd-item-hint{ font-size:.7rem; font-weight:500; color:var(--ink-50,var(--ink-30)); white-space:nowrap; }
.cmd-item.focused::after{ right:14px; display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:rgba(232,120,30,.14); font-size:.8rem; }

/* footer */
.cmd-footer{ padding:10px 18px 12px; gap:16px; }
.cmd-footer-brand{ margin-left:auto; opacity:.7; }
.cmd-empty{ padding:36px 12px 30px; font-weight:500; }

/* focus visibility for keyboard users */
.cmd-item:focus-visible{ outline:2px solid var(--signal); outline-offset:-2px; }

@media (max-width:640px){
  .cmd-overlay{ padding-top:max(env(safe-area-inset-top),14px); }
  .cmd-box{ border-radius:22px; }
  .cmd-esc, .cmd-footer-brand{ display:none; }
  .cmd-item-hint{ display:none; }
  .cmd-list{ max-height:min(60vh,420px); }
}
@media (prefers-reduced-motion:reduce){
  .cmd-item,.cmd-item-icon,.cmd-input-wrap svg{ transition:none; }
  .cmd-item.focused .cmd-item-icon{ transform:none; }
}