/* Deck Hub / interior design system */
:root { --bg:#0c1015; --panel:#141b23; --panel-2:#1b2530; --field:#10171f; --ink:#edf2f7; --muted:#9baaba; --line:#283442; --brand:#e9a367; --brand-strong:#f4b984; --brand-soft:#30281f; --side:#111820; --side-ink:#adbbc9; --row-hover:#1b2531; --radius:14px; --shadow:0 4px 20px rgb(0 0 0 / 7%); }
:root[data-theme="claro"] { --bg:#eef2f6; --panel:#fff; --panel-2:#f1f5f9; --field:#fff; --ink:#182b3e; --muted:#5c6e80; --line:#dbe3eb; --brand:#a3531d; --brand-strong:#874117; --brand-soft:#fcf0e5; --side:#fff; --side-ink:#55677a; --row-hover:#f6f9fc; }
body { font-size:14px; line-height:1.6; }
.app { grid-template-columns:252px minmax(0,1fr); }
.sidebar { margin:16px 0 16px 16px; width:224px; height:calc(100vh - 32px); top:16px; background:var(--side); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.brand { padding:25px 20px 24px; gap:11px; }
.brand .mark { width:35px; height:35px; border-radius:10px; background:var(--brand-soft); border:1px solid #725033; color:var(--brand); }
.brand .mark .icon { width:21px; height:21px; }
.brand .name { font-size:21px; letter-spacing:-.05em; font-weight:650; }
.brand .name em { font-style:normal; font-weight:400; color:var(--muted); }
.brand small { text-transform:none; letter-spacing:.02em; font-size:10px; margin-top:2px; }
.nav { padding:0 12px 16px; overflow-y:auto; scrollbar-width:thin; flex:1; }
.nav-section { margin:0 0 9px; }
.nav-section summary { list-style:none; cursor:pointer; padding:12px 11px; font-size:11px; font-weight:650; letter-spacing:.06em; color:var(--muted); display:flex; justify-content:space-between; align-items:center; }
.nav-section summary::-webkit-details-marker { display:none; }
.nav-section summary::after { content:'›'; font-size:17px; font-weight:400; transform:rotate(0); }
.nav-section[open] summary::after { transform:rotate(90deg); }
.nav-section summary:hover { color:var(--ink); }
.nav-items { display:grid; gap:3px; }
.nav a { padding:11px 12px; margin:0; min-height:43px; font-size:12px; border:1px solid transparent; }
.nav a.active { background:var(--panel-2); border-color:var(--line); color:var(--ink); }
.nav a.active .icon { color:var(--brand); }
.nav a.active::after { background:var(--brand); width:4px; height:16px; right:0; border-radius:3px 0 0 3px; }
.userbox { padding:17px 18px; background:var(--side); }
.userbox .links { gap:5px; }
.userbox button { font-size:10px; padding:7px; }
.user-profile .avatar { background:var(--panel-2); color:var(--brand); border-radius:11px; }
.main { padding-right:8px; }
.topbar { height:73px; background:transparent; border-bottom:0; padding:0 32px; }
.breadcrumb { font-size:12px; }
.breadcrumb > span:first-child { color:var(--muted); }
.topbar-date { border:1px solid var(--line); border-radius:7px; padding:6px 10px; font-size:11px; }
.page-heading { padding:22px 32px 28px; align-items:center; }
.page-heading .eyebrow { color:var(--muted); font-size:10px; letter-spacing:.16em; margin-bottom:7px; }
.page-heading h1 { font-size:34px; letter-spacing:-.045em; font-weight:650; }
.page-heading p { font-size:13px; margin-top:7px; }
.view { padding:0 32px 44px; }
.heading-action { min-height:41px; font-size:12px; }
.btn { font-size:13px; min-height:42px; border-radius:8px; }
.btn.primary { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); box-shadow:none; }
.btn.primary:hover { background:var(--brand-strong); }
.btn.sm { font-size:12px; min-height:34px; }
.card { border-color:var(--line); border-radius:14px; }
.card-head h2, .chart-heading h2 { font-size:18px; font-weight:600; letter-spacing:-.025em; }
.card-head { margin-bottom:22px; }
th { font-size:11px; padding:13px 14px; text-transform:none; letter-spacing:.02em; }
td { font-size:13px; padding:17px 14px; }
label.field > span { font-size:12px; color:var(--muted); }
.filters { gap:16px; }
.filters input, .filters select { min-height:43px; }
.tabs { width:fit-content; max-width:100%; padding:5px; border:1px solid var(--line); background:var(--field); }
.tabs button { padding:10px 16px; font-size:12px; }
.tabs button.active { background:var(--panel-2); box-shadow:none; }
.business-dashboard .card { padding:24px; box-shadow:none; }
.dashboard-toolbar { padding:15px; border:1px solid var(--line); border-radius:12px; background:var(--panel); margin-bottom:12px; gap:12px; }
.period-presets { background:var(--field); border:0; }
.period-chip { font-size:12px; padding:8px 12px; }
.period-chip.selected { background:var(--panel-2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.dashboard-date-fields input,.dashboard-date-fields select { font-size:12px; background:var(--field); }
.dashboard-date-fields label { font-size:11px; }
.data-context { font-size:11px; margin:15px 2px 20px; gap:8px 13px; }
.source-tag { font-weight:500; }
.business-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.business-kpi { padding:21px; border-radius:12px; box-shadow:none; }
.business-kpi.featured { background:linear-gradient(135deg,var(--panel-2),var(--panel)); border:1px solid #76583d; color:var(--ink); box-shadow:none; }
.featured .business-kpi-head,.featured .metric-note { color:var(--muted); }
.featured .business-kpi-head .icon { color:var(--brand); }
.business-kpi-head { font-size:12px; min-height:36px; align-items:start; }
.business-kpi-head .icon { width:20px; height:20px; }
.business-kpi-value { font-size:clamp(24px,2.3vw,34px); font-weight:600; margin:12px 0 13px; }
.metric-note { font-size:11px; line-height:1.5; }
.metric-change { background:var(--ok-bg); color:var(--ok); }
.metric-change.down { background:var(--bad-bg); color:var(--bad); }
.business-chart-grid { grid-template-columns:minmax(0,1.9fr) minmax(265px,1fr); gap:18px; margin-bottom:18px; }
.business-detail-grid { gap:18px; margin-bottom:18px; }
.chart-heading .eyebrow { font-size:10px; color:var(--muted); }
.chart-heading p,.chart-total span { font-size:12px; }
.chart-switch { background:var(--field); }
.chart-switch button { font-size:11px; min-height:30px; }
.chart-total strong { font-size:31px; font-weight:600; }
.plot-legend > span { font-size:11px; }
.plot-current { stroke:#8ebcd7; }
.plot-point { stroke:#8ebcd7; }
.plot-point:hover { fill:#8ebcd7; }
.legend-current { background:#8ebcd7; }
.plot-grid { opacity:.7; }
.plot-label { font-size:12px; }
.chart-footnote { font-size:11px; color:var(--muted); }
.chart-data summary { font-size:12px; }
.channel-name,.channel-row > b { font-size:13px; }
.channel-row small { font-size:11px; }
.channel-donut { width:142px; height:142px; padding:13px; }
.channel-chart { gap:22px; }
.channel-list { gap:14px; }
.product-ranking { gap:18px; }
.ranking-info > div:first-child { font-size:12px; }
.ranking-info > span { font-size:11px; }
.ranking-number { border-radius:7px; color:var(--brand); font-size:11px; }
.ranking-track { height:3px; margin-top:10px; }
.ranking-track i { background:#8ebcd7; }
.sales-mini-stats span { font-size:11px; }
.hour-track i { background:#8ebcd7; }
.dashboard-notes { background:var(--panel); border-radius:10px; }
.dashboard-notes p { font-size:11px; }
.dashboard-notes b { font-size:12px; }
.coverage-link { font-size:12px; }
.text-link { font-size:12px; }
.hub-welcome { display:flex; align-items:center; gap:28px; justify-content:space-between; margin-bottom:24px; padding:25px 27px; border:1px solid #3e5365; border-radius:14px; background:linear-gradient(115deg,var(--panel-2),var(--panel)); }
.hub-tag { color:#9fbfd4; font-size:10px; font-weight:600; letter-spacing:.12em; }
:root[data-theme="claro"] .hub-tag { color:#426582; }
.hub-welcome h2 { font-size:24px; letter-spacing:-.035em; font-weight:600; margin:8px 0; }
.hub-welcome p { color:var(--muted); font-size:13px; margin:0; }
.hub-onboarding-actions { display:grid; gap:8px; min-width:235px; }
.hub-onboarding-actions a { display:flex; gap:14px; align-items:center; color:var(--muted); font-size:11px; padding:9px 12px; background:var(--field); border:1px solid var(--line); border-radius:8px; }
.hub-onboarding-actions a span { flex:1; color:var(--ink); font-size:12px; }
.hub-onboarding-actions a:hover { border-color:var(--brand); }
.insight-empty { min-height:160px; }
.insight-empty b { font-size:14px; }
.insight-empty p { font-size:12px; }
.empty-orbit { border:1px solid var(--line); background:transparent; color:#9fbfd4; }
.operation-tile { border-radius:12px; }
.operation-tile > span { font-size:12px; }
.operation-tile small { font-size:11px; }
.operations-links a { font-size:12px; }
.section-heading p { font-size:12px; }
.modal { border-radius:15px; }
.modal-head { padding:22px 24px; }
.modal-head h2 { font-size:19px; }
.login-brand h1 { letter-spacing:-.05em; font-size:27px; }
@media (max-width:1200px) {
 .business-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .business-chart-grid { grid-template-columns:minmax(0,1fr); }
 .business-detail-grid { grid-template-columns:minmax(0,1fr); }
 .hub-welcome { align-items:start; flex-direction:column; gap:20px; }
 .hub-onboarding-actions { grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; min-width:0; }
}
@media (max-width:900px) {
 .app { grid-template-columns:minmax(0,1fr); }
 .sidebar { margin:0; width:270px; height:100vh; height:100dvh; top:0; border-radius:0 18px 18px 0; }
 .main { padding-right:0; }
 .topbar { height:65px; padding:0 20px; }
 .page-heading { padding:20px 24px 26px; }
 .view { padding:0 24px 40px; }
}
@media (max-width:640px) {
 .topbar { padding:0 14px; }
 .page-heading { padding:17px 18px 25px; }
 .page-heading h1 { font-size:29px; }
 .view { padding:0 18px 35px; }
 .dashboard-toolbar { padding:12px; }
 .dashboard-date-fields input,.dashboard-date-fields select { font-size:16px; }
 .business-kpi { padding:16px 13px; }
 .business-kpi-head { font-size:11px; }
 .business-kpi-value { font-size:25px; }
 .metric-note { font-size:11px; }
 .business-dashboard .card { padding:18px; }
 .hub-welcome { padding:20px; gap:17px; }
 .hub-welcome h2 { font-size:23px; }
 .hub-onboarding-actions { grid-template-columns:1fr; }
 .trend-svg { min-width:0; width:100%; }
 .plot-label { font-size:17px; }
 .hour-column > span { font-size:10px; }
 .data-context { font-size:11px; }
 .business-kpis { gap:10px; }
 .chart-total span { font-size:11px; }
 .chart-data .table-wrap { margin:0 -18px; padding:0 18px; }
}