@import url("../tokens.css");

:root { --web-sidebar:216px; --web-sidebar-compact:72px; --manage-content-max:920px; }
body { overflow-x:hidden; background:var(--color-surface); }
button,a,input,select,textarea { color:inherit; }
a { text-decoration:none; }
button { cursor:pointer; }
.web-shell { min-height:100vh; display:grid; grid-template-columns:var(--web-sidebar) minmax(0,1fr); transition:grid-template-columns var(--motion-base) var(--ease-out); }
.web-shell[data-nav-state="collapsed"] { grid-template-columns:var(--web-sidebar-compact) minmax(0,1fr); }
.web-sidebar { position:sticky; top:0; z-index:10; height:100vh; min-width:0; padding:18px 12px 14px; border-right:1px solid var(--color-divider); background:#fbfbfb; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.web-sidebar-head { min-width:0; min-height:46px; padding:0 4px 16px; border-bottom:1px solid var(--color-divider); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.web-brand { min-width:0; display:flex; align-items:center; gap:9px; white-space:nowrap; overflow:hidden; font-size:var(--text-md); font-weight:700; }
.web-brand-copy { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.web-brand-mark { flex:0 0 34px; width:34px; height:34px; border-radius:10px; background:var(--color-text); color:var(--color-text-inverse); display:grid; place-items:center; }
.icon-button { flex:0 0 36px; width:36px; height:36px; padding:0; border:0; border-radius:var(--radius-sm); background:transparent; display:grid; place-items:center; }
.icon-button:hover { background:var(--color-surface-subtle); }
.icon { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.web-nav { min-height:0; padding-top:18px; display:grid; align-content:start; gap:4px; }
.web-nav-link { min-width:0; min-height:42px; padding:0 10px; border-radius:var(--radius-sm); color:var(--color-text-muted); display:flex; align-items:center; gap:12px; white-space:nowrap; overflow:hidden; font-weight:600; }
.web-nav-link:hover { background:#eeeeee; color:var(--color-text); }
.web-nav-link[aria-current="page"] { background:#e9e9e9; color:var(--color-text); }
.web-nav-label { overflow:hidden; text-overflow:ellipsis; }
.web-sidebar-foot { padding:14px 4px 0; border-top:1px solid var(--color-divider); }
.web-user { min-width:0; display:flex; align-items:center; gap:10px; overflow:hidden; }
.web-avatar { flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:#e8e8e8; display:grid; place-items:center; font-size:var(--text-xs); font-weight:700; }
.web-user-copy { min-width:0; display:grid; white-space:nowrap; }
.web-user-copy small { color:var(--color-text-muted); }
.web-shell[data-nav-state="collapsed"] .web-brand-copy,.web-shell[data-nav-state="collapsed"] .web-nav-label,.web-shell[data-nav-state="collapsed"] .web-user-copy { display:none; }
.web-shell[data-nav-state="collapsed"] .web-sidebar-head,.web-shell[data-nav-state="collapsed"] .web-user { justify-content:center; }
.web-shell[data-nav-state="collapsed"] .web-nav-link { padding:0; justify-content:center; }
.web-shell[data-nav-state="collapsed"] .nav-toggle svg { transform:rotate(180deg); }
.nav-toggle svg { transition:transform var(--motion-base) var(--ease-out); }
.mobile-menu-button,.mobile-nav-layer { display:none; }

.web-main { min-width:0; background:var(--color-surface); }
.web-page-head { min-height:92px; padding:22px clamp(22px,4vw,56px); border-bottom:1px solid var(--color-divider); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.web-page-head h1 { margin:0; font-size:var(--text-2xl); line-height:var(--leading-tight); }
.page-description { margin-top:5px; color:var(--color-text-muted); }
.page-actions,.inline-actions,.filter-row { display:flex; align-items:center; gap:8px; }
.button { min-height:40px; padding:0 14px; border:0; border-radius:8px; background:var(--color-surface-subtle); font-weight:600; transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out); }
.button:hover { background:#e5e5e5; }
.button:active { background:#dcdedd; }
.button.primary { background:var(--color-text); color:var(--color-text-inverse); }
.button.primary:hover { background:#303230; }
.button.danger { color:var(--color-danger); background:var(--color-danger-soft); }
.button.quiet { background:transparent; }
.button:disabled { opacity:.45; cursor:not-allowed; }
:where(a,button,input,select,textarea):focus-visible { outline:2px solid var(--color-focus); outline-offset:2px; }
.button .icon { margin-right:7px; vertical-align:-4px; }
.page-content { padding:26px clamp(22px,4vw,56px) 64px; }
.content-limit { width:min(100%,var(--content-max)); margin-inline:auto; }
.demo-note { color:var(--color-text-muted); font-size:var(--text-xs); }
.toolbar { min-height:60px; padding:9px 0 12px; border-bottom:1px solid var(--color-divider); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.search { width:min(340px,100%); min-height:40px; padding:0 12px; border:1px solid var(--color-divider); border-radius:10px; background:var(--color-surface); }
.select,.input,.textarea { width:100%; min-height:40px; padding:0 12px; border:1px solid var(--color-divider); border-radius:8px; background:#fdfdfd; transition:border-color var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-out); }
.select:hover,.input:hover,.textarea:hover { border-color:var(--color-border-strong); }
.select:focus,.input:focus,.textarea:focus { border-color:var(--color-text); background:var(--color-surface); }
.textarea { min-height:82px; padding-block:10px; resize:vertical; }
.filter { min-height:36px; padding:0 11px; border:1px solid var(--color-divider); border-radius:9px; background:var(--color-surface); font-weight:500; }
.filter:hover { border-color:var(--color-border-strong); }
.segment { display:flex; align-items:center; gap:3px; padding:3px; border-radius:10px; background:var(--color-surface-subtle); }
.segment button { min-height:34px; padding:0 12px; border:0; border-radius:8px; background:transparent; color:var(--color-text-muted); font-weight:600; }
.segment button[aria-pressed="true"],.segment button[aria-selected="true"] { background:var(--color-surface); color:var(--color-text); box-shadow:0 1px 3px rgba(23,25,24,.1); }
.status { display:inline-flex; align-items:center; gap:7px; color:var(--color-text-muted); font-size:var(--text-sm); white-space:nowrap; }
.status::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.status.success { color:var(--color-success); }.status.warning { color:var(--color-warning); }.status.danger { color:var(--color-danger); }
.muted { color:var(--color-text-muted); }

.data-table { width:100%; border-collapse:collapse; background:var(--color-surface); }
.data-table th { height:42px; padding:0 14px; border-bottom:1px solid var(--color-divider); color:var(--color-text-muted); text-align:left; font-size:var(--text-xs); font-weight:600; white-space:nowrap; }
.data-table td { height:62px; padding:9px 14px; border-bottom:1px solid var(--color-divider); vertical-align:middle; }
.data-table tbody tr { transition:background var(--motion-fast) var(--ease-out); }
.data-table tbody tr:hover,.data-table tbody tr[aria-selected="true"],.data-table tbody tr.selected-row { background:#f7f7f7; }
.data-table tbody tr[data-select-row]:focus-visible { outline:2px solid var(--color-focus); outline-offset:-2px; }
.data-table tbody tr:last-child td { border-bottom:0; }
.table-frame { border-top:1px solid var(--color-divider); border-bottom:1px solid var(--color-divider); overflow:auto; }
.row-button { min-height:36px; padding:0 10px; border:0; border-radius:8px; background:transparent; font-weight:600; }
.row-button:hover { background:var(--color-surface-subtle); }
.entity-cell { display:flex; align-items:center; gap:11px; min-width:200px; }
.entity-thumb { flex:0 0 40px; width:40px; height:40px; border-radius:9px; background:var(--tone,#ececec); display:grid; place-items:center; color:var(--color-text-muted); font-size:10px; }
.entity-copy { min-width:0; display:grid; }
.entity-copy small { margin-top:2px; color:var(--color-text-muted); }

.workbench { min-height:calc(100vh - 153px); display:grid; grid-template-columns:minmax(440px,1fr) minmax(340px,40%); }
.workbench-list { min-width:0; border-right:1px solid var(--color-divider); padding:0 clamp(18px,3vw,38px) 48px; }
.workbench-inspector { min-width:0; background:#fafafa; }
.inspector-head { min-height:82px; padding:18px 22px; border-bottom:1px solid var(--color-divider); display:flex; align-items:start; justify-content:space-between; gap:16px; }
.inspector-head h2 { margin:0; font-size:var(--text-xl); }
.inspector-body { padding:20px 22px 40px; }
.detail-section + .detail-section { margin-top:24px; padding-top:22px; border-top:1px solid var(--color-divider); }
.detail-section h3 { margin:0 0 12px; font-size:var(--text-lg); }
.detail-row { min-height:38px; display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.detail-row > * { min-width:0; }
.detail-row > :first-child { color:var(--color-text-muted); }
.detail-row > :first-child { overflow-wrap:anywhere; }
.detail-row strong:last-child,.detail-row span:last-child { text-align:right; }

.page-tabs { min-height:50px; padding:0 clamp(22px,4vw,56px); border-bottom:1px solid var(--color-divider); display:flex; align-items:end; gap:24px; overflow:auto; }
.page-tab { height:50px; padding:0 1px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--color-text-muted); white-space:nowrap; font-weight:600; }
.page-tab[aria-selected="true"],.page-tab[aria-current="page"] { border-color:var(--color-text); color:var(--color-text); }
[data-panel][hidden] { display:none !important; }

.summary-strip { display:grid; grid-template-columns:1.7fr repeat(3,1fr); padding:24px 0; border-top:1px solid var(--color-divider); border-bottom:1px solid var(--color-divider); }
.summary-metric { min-height:88px; padding:4px 22px; display:grid; align-content:center; gap:10px; }
.summary-metric + .summary-metric { border-left:1px solid var(--color-divider); }
.summary-metric span { color:var(--color-text-muted); }
.summary-metric strong { font-size:var(--text-xl); letter-spacing:-.025em; }
.summary-metric.lead { padding-left:22px; }
.summary-metric.lead strong { font-size:3rem; line-height:1; letter-spacing:-.035em; }
.analytics-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr); border-bottom:1px solid var(--color-divider); }
.analytics-section { min-width:0; padding:26px 22px 30px; }
.analytics-section + .analytics-section { border-left:1px solid var(--color-divider); }
.section-head { margin-bottom:20px; display:flex; align-items:baseline; justify-content:space-between; gap:18px; }
.section-head h2 { margin:0; font-size:var(--text-lg); }
.sales-chart { height:248px; display:grid; grid-template-columns:repeat(7,1fr); gap:12px; align-items:end; border-bottom:1px solid var(--color-divider); }
.chart-column { height:100%; display:grid; grid-template-rows:1fr auto; gap:10px; align-items:end; }
.chart-bar-wrap { height:100%; display:flex; align-items:end; }
.chart-bar { width:100%; min-height:3px; height:var(--value); background:#2f3331; transform-origin:bottom; animation:bar-in 520ms var(--ease-out) both; }
.chart-label { color:var(--color-text-muted); font-size:var(--text-xs); text-align:center; }
.breakdown-list { display:grid; }
.breakdown-row { min-height:48px; border-bottom:1px solid var(--color-divider); display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; }
.breakdown-row:last-child { border-bottom:0; }
.breakdown-row small { color:var(--color-text-muted); }
.rank { width:24px; color:var(--color-text-muted); }
.payment-line { display:grid; grid-template-columns:minmax(110px,1fr) 1.7fr auto; gap:12px; align-items:center; min-height:46px; }
.payment-track { height:4px; background:#ededed; }
.payment-fill { height:100%; width:var(--value); background:var(--color-text); }
.heatmap-section { padding:26px 22px 30px; border-bottom:1px solid var(--color-divider); }
.heatmap-scroll { overflow-x:auto; padding-bottom:4px; }
.sales-heatmap { min-width:680px; display:grid; grid-template-columns:66px repeat(7,minmax(68px,1fr)); gap:5px; align-items:center; }
.heatmap-axis { min-height:28px; display:grid; place-items:center; color:var(--color-text-muted); font-size:var(--text-xs); }
.heatmap-day { justify-items:start; font-weight:600; color:var(--color-text); }
.heat-cell { min-height:38px; border-radius:6px; display:grid; place-items:center; background:rgba(31,34,32,var(--heat)); color:var(--color-text); font-size:var(--text-xs); font-variant-numeric:tabular-nums; }
.heat-cell[data-level="4"],.heat-cell[style*="--heat:.62"],.heat-cell[style*="--heat:.66"] { color:var(--color-text-inverse); }
.heatmap-legend { margin-top:14px; display:flex; align-items:center; justify-content:flex-end; gap:7px; color:var(--color-text-muted); font-size:var(--text-xs); }
.heatmap-legend-cell { width:24px; height:8px; border-radius:3px; background:rgba(31,34,32,var(--heat)); }

.manage-workspace { min-height:calc(100vh - 92px); display:block; }
body[data-route="manage"] .web-page-head { display:none; }
body[data-route="manage"] .manage-workspace { min-height:100vh; }
.manage-nav { min-height:56px; padding-inline:max(clamp(22px,4vw,54px),calc((100% - var(--manage-content-max))/2)); border-bottom:1px solid var(--color-divider); background:var(--color-surface); display:flex; align-items:end; gap:26px; overflow-x:auto; scrollbar-width:none; }
.manage-nav::-webkit-scrollbar { display:none; }
.manage-link { flex:0 0 auto; min-height:56px; padding:0 1px; border-bottom:2px solid transparent; color:var(--color-text-muted); display:flex; align-items:center; gap:8px; white-space:nowrap; font-weight:600; }
.manage-link .icon { display:none; }
.manage-link:hover { color:var(--color-text); }
.manage-link[aria-current="page"] { border-color:var(--color-text); color:var(--color-text); }
.manage-content { min-width:0; padding:28px clamp(22px,4vw,54px) 72px; }
.manage-content-inner { width:100%; max-width:var(--manage-content-max); margin-inline:auto; }
.manage-title { margin-bottom:28px; }
.manage-title h1 { margin:0; font-size:var(--text-2xl); }
.manage-title p { margin:6px 0 0; color:var(--color-text-muted); }
.settings-section { display:grid; grid-template-columns:minmax(180px,240px) minmax(0,620px); gap:38px; padding:28px 0; border-top:1px solid var(--color-divider); }
.settings-copy h2 { margin:0; font-size:var(--text-lg); }
.settings-copy p { max-width:26ch; margin:7px 0 0; color:var(--color-text-muted); line-height:var(--leading-body); }
.settings-fields { min-width:0; }
.field { display:grid; gap:6px; }
.field + .field { margin-top:16px; }
.field label { font-size:var(--text-sm); font-weight:500; }
.field small { color:var(--color-text-muted); }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field + .field-grid,.field-grid + .field,.field-grid + .field-grid { margin-top:16px; }
.field-actions { margin-top:18px; display:flex; justify-content:flex-end; gap:8px; }
.field-actions .button:not(.primary) { background:transparent; }
.field-actions .button:not(.primary):hover { background:var(--color-surface-subtle); }
.switch-row { min-height:62px; padding:7px 0; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--color-divider); }
.switch-row:last-child { border-bottom:0; }
.switch-copy { display:grid; gap:2px; }
.switch-copy strong { font-weight:600; }
.switch-copy small { color:var(--color-text-muted); }
.switch { position:relative; flex:0 0 44px; width:44px; height:36px; padding:0; border:0; background:transparent; }
.switch::before { content:""; position:absolute; inset:5px 0; border-radius:999px; background:#d0d0d0; transition:background var(--motion-fast) var(--ease-out); }
.switch::after { content:""; position:absolute; top:8px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform var(--motion-fast) var(--ease-out); }
.switch[aria-checked="true"]::before { background:var(--color-text); }
.switch[aria-checked="true"]::after { transform:translateX(18px); }
.permission-note { margin-top:16px; padding:12px 0; border-top:1px solid var(--color-divider); border-radius:0; background:transparent; color:var(--color-text-muted); font-size:var(--text-sm); }
.settings-fields > .detail-row { min-height:52px; padding:7px 0; border-bottom:1px solid var(--color-divider); align-items:center; }
.settings-fields > .detail-row:last-child { border-bottom:0; }
.secret-value { padding:12px; border:1px solid var(--color-divider); background:#fafafa; display:flex; justify-content:space-between; gap:16px; font-family:inherit; }

.dialog { width:min(560px,calc(100vw - 40px)); max-height:calc(100vh - 40px); padding:0; border:0; border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-overlay); overflow:auto; overscroll-behavior:contain; opacity:0; transform:translateY(16px); transition:opacity var(--motion-base) var(--ease-out),transform var(--motion-overlay) var(--ease-out),display var(--motion-overlay) allow-discrete,overlay var(--motion-overlay) allow-discrete; }
.dialog[open] { opacity:1; transform:none; }
.dialog::backdrop { background:rgba(23,25,24,.3); backdrop-filter:blur(4px); }
.dialog-head { position:sticky; top:0; z-index:2; min-height:64px; padding:14px 18px; border-bottom:1px solid var(--color-divider); background:var(--color-surface); display:flex; align-items:center; justify-content:space-between; gap:18px; }
.dialog-head h2 { margin:0; font-size:var(--text-xl); }
.dialog-body { padding:22px; }
.dialog-actions { position:sticky; bottom:0; z-index:2; padding:14px 18px; border-top:1px solid var(--color-divider); background:var(--color-surface); display:flex; justify-content:flex-end; gap:8px; }
@starting-style { .dialog[open] { opacity:0; transform:translateY(16px); } }

.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(280px,.82fr) minmax(420px,1.18fr); background:var(--color-surface); }
.auth-context { padding:42px clamp(28px,5vw,72px); border-right:1px solid var(--color-divider); background:#f6f6f6; display:flex; flex-direction:column; justify-content:space-between; }
.auth-context h1 { max-width:10ch; margin:44px 0 0; font-size:2.6rem; line-height:1.08; letter-spacing:-.035em; }
.auth-context p { max-width:40ch; color:var(--color-text-muted); line-height:var(--leading-body); }
.auth-panel { padding:42px clamp(28px,7vw,96px); display:grid; place-items:center; }
.auth-form { width:min(100%,420px); }
.auth-form h2 { margin:0; font-size:var(--text-2xl); }
.auth-form > p { margin:7px 0 26px; color:var(--color-text-muted); }
.auth-form .button.primary { width:100%; min-height:44px; margin-top:20px; }
.auth-meta { margin-top:20px; color:var(--color-text-muted); font-size:var(--text-sm); text-align:center; }

.toast { position:fixed; left:50%; bottom:24px; z-index:40; min-height:42px; padding:0 15px; border-radius:10px; background:var(--color-text); color:var(--color-text-inverse); display:flex; align-items:center; opacity:0; transform:translate(-50%,10px); pointer-events:none; transition:opacity var(--motion-fast) var(--ease-out),transform var(--motion-base) var(--ease-out); }
.toast.visible { opacity:1; transform:translate(-50%,0); }
@keyframes bar-in { from { transform:scaleY(.15); opacity:.35; } }
@keyframes panel-in { from { opacity:0; transform:translateX(10px); clip-path:inset(0 0 0 12px); } }
.panel-reveal { animation:panel-in var(--motion-overlay) var(--ease-out) both; }

@media (max-width:1050px) {
  .web-shell { --web-sidebar:var(--web-sidebar-compact); }
  .web-brand-copy,.web-nav-label,.web-user-copy { display:none; }
  .web-sidebar-head,.web-user { justify-content:center; }
  .web-nav-link { padding:0; justify-content:center; }
  .nav-toggle { display:none; }
  .workbench { grid-template-columns:minmax(380px,1fr) minmax(320px,44%); }
  .summary-strip { grid-template-columns:1fr 1fr; }
  .summary-metric:nth-child(3) { border-left:0; border-top:1px solid var(--color-divider); }
  .summary-metric:nth-child(4) { border-top:1px solid var(--color-divider); }
  .analytics-grid { grid-template-columns:1fr; }
  .analytics-section + .analytics-section { border-left:0; border-top:1px solid var(--color-divider); }
  .settings-section { grid-template-columns:190px minmax(0,1fr); gap:28px; }
}
@media (max-width:820px) {
  .web-shell { grid-template-columns:var(--web-sidebar-compact) minmax(0,1fr); }
  .web-brand-copy,.web-nav-label,.web-user-copy { display:none; }
  .web-sidebar-head,.web-user { justify-content:center; }
  .web-nav-link { padding:0; justify-content:center; }
  .nav-toggle { display:none; }
  .workbench { grid-template-columns:1fr; }
  .workbench-list { border-right:0; }
  .workbench-inspector { display:block; border-top:1px solid var(--color-divider); }
  .settings-section { grid-template-columns:1fr; gap:16px; }
  .summary-strip { grid-template-columns:1fr 1fr; }
  .summary-metric:nth-child(3) { border-left:0; border-top:1px solid var(--color-divider); }
  .summary-metric:nth-child(4) { display:grid; border-top:1px solid var(--color-divider); }
}
@media (max-width:640px) {
  body { overflow:auto; }
  body.mobile-nav-open { overflow:hidden; }
  .web-shell { display:block; }
  .web-sidebar { position:sticky; height:auto; min-height:64px; padding:10px 14px; border-right:0; border-bottom:1px solid var(--color-divider); display:block; }
  .web-sidebar-head { width:100%; min-height:42px; padding:0; border:0; justify-content:flex-start; }
  .mobile-menu-button { display:grid; }
  .web-sidebar-head .web-brand { margin-right:auto; }
  .web-brand-copy { display:inline; }
  .web-nav,.nav-toggle { display:none; }
  .web-sidebar-foot { display:none; }
  .mobile-nav-layer { position:fixed; inset:0; z-index:50; display:block; pointer-events:none; }
  .mobile-nav-layer[hidden] { display:none; }
  .mobile-nav-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(23,25,24,.34); opacity:0; transition:opacity var(--motion-base) var(--ease-out); }
  .mobile-nav-drawer { position:absolute; inset:0 auto 0 0; width:min(320px,calc(100vw - 32px)); padding:0 14px 16px; border-right:1px solid var(--color-divider); background:var(--color-surface); box-shadow:var(--shadow-overlay); overflow:auto; overscroll-behavior:contain; transform:translateX(-100%); transition:transform var(--motion-overlay) var(--ease-out); display:flex; flex-direction:column; }
  .mobile-nav-layer.is-open { pointer-events:auto; }
  .mobile-nav-layer.is-open .mobile-nav-backdrop { opacity:1; }
  .mobile-nav-layer.is-open .mobile-nav-drawer { transform:none; }
  .mobile-nav-head { min-height:64px; padding:10px 0; border-bottom:1px solid var(--color-divider); display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .mobile-nav-list { padding-top:12px; display:grid; gap:4px; }
  .mobile-nav-link { min-height:46px; padding:0 12px; border-radius:10px; color:var(--color-text-muted); display:flex; align-items:center; gap:12px; font-weight:600; }
  .mobile-nav-link:hover { background:#eeeeee; color:var(--color-text); }
  .mobile-nav-link[aria-current="page"] { background:#e9e9e9; color:var(--color-text); }
  .mobile-nav-user { margin-top:auto; padding:16px 4px 0; border-top:1px solid var(--color-divider); display:flex; align-items:center; gap:10px; }
  .mobile-nav-user .web-user-copy { display:grid; }
  .web-page-head { min-height:unset; padding:18px 18px; align-items:start; }
  .web-page-head .page-description { display:none; }
  .page-content { padding:18px 18px 48px; }
  .page-tabs { padding-inline:18px; }
  .page-actions { flex-wrap:wrap; justify-content:flex-end; }
  .toolbar { align-items:stretch; flex-direction:column; }
  .filter-row { overflow:auto; padding-bottom:2px; }
  .summary-strip { grid-template-columns:repeat(3,minmax(0,1fr)); padding:0; }
  .summary-metric { min-height:92px; padding:14px 10px; gap:7px; }
  .summary-metric strong { font-size:var(--text-lg); }
  .summary-metric.lead { grid-column:1 / -1; min-height:112px; padding:18px 14px; border-bottom:1px solid var(--color-divider); }
  .summary-metric.lead strong { font-size:2.5rem; }
  .summary-metric:nth-child(2) { border-left:0; }
  .summary-metric:nth-child(3) { border-top:0; border-left:1px solid var(--color-divider); }
  .summary-metric:nth-child(4) { border-top:0; }
  .analytics-section { padding-inline:0; }
  .heatmap-section { padding-inline:0; }
  .heatmap-scroll { margin-right:-18px; padding-right:18px; }
  .sales-chart { gap:6px; }
  .data-table,.data-table tbody,.data-table tr,.data-table td { display:block; }
  .data-table thead { display:none; }
  .data-table tr { padding:12px 0; border-bottom:1px solid var(--color-divider); }
  .data-table td { height:auto; min-height:34px; padding:5px 0; border:0; display:grid; grid-template-columns:110px minmax(0,1fr); align-items:center; }
  .data-table td::before { content:attr(data-label); color:var(--color-text-muted); font-size:var(--text-xs); }
  .entity-cell { min-width:0; }
  .manage-workspace { display:block; }
  .manage-nav { position:sticky; top:63px; z-index:5; padding:10px 18px; border-right:0; border-bottom:1px solid var(--color-divider); background:rgba(250,250,250,.96); display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
  .manage-nav::-webkit-scrollbar { display:none; }
  .manage-link { flex:0 0 auto; min-height:36px; padding:0 14px; border:1px solid var(--color-divider); border-radius:999px; background:var(--color-surface); color:var(--color-text-muted); justify-content:center; gap:0; white-space:nowrap; }
  .manage-link .icon { display:none; }
  .manage-link[aria-current="page"] { border-color:var(--color-text); background:var(--color-text); color:var(--color-text-inverse); }
  .manage-content { padding:22px 18px 56px; }
  .field-grid { grid-template-columns:1fr; }
  .auth-shell { display:block; }
  .auth-context { min-height:180px; padding:26px; border-right:0; border-bottom:1px solid var(--color-divider); }
  .auth-context h1 { max-width:14ch; margin:28px 0 0; font-size:2rem; }
  .auth-context p { display:none; }
  .auth-panel { padding:34px 22px 56px; }
}
@media (max-width:360px) {
  .web-sidebar .web-brand-copy { display:inline; }
  .web-sidebar { padding-inline:10px; }
  .web-page-head { padding-left:16px; padding-right:16px; flex-direction:column; align-items:stretch; gap:12px; }
  .web-page-head .page-actions { justify-content:flex-start; }
  .page-content,.manage-content,.manage-nav { padding-left:16px; padding-right:16px; }
  .heatmap-scroll { margin-right:-16px; padding-right:16px; }
  .auth-context { padding:22px; }
  .auth-panel { padding-left:18px; padding-right:18px; }
  .dialog { width:calc(100vw - 24px); }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .chart-bar,.panel-reveal { animation:none; }
  .dialog,.mobile-nav-drawer { transform:none; transition:none; }
  .dialog { transition:opacity 100ms linear,display 100ms allow-discrete,overlay 100ms allow-discrete; transition-duration:100ms !important; }
  .dialog::backdrop,.mobile-nav-backdrop { transition:opacity 100ms linear; transition-duration:100ms !important; }
  .toast,.toast.visible { transform:translate(-50%,0); transition:opacity 100ms linear; transition-duration:100ms !important; }
}