/* A connected index-card workspace; spreadsheet cells stay crisp. */
body { --workspace-paper: #fffaf0; --workspace-gutter: 20px; --workspace-inset: .8rem; background: #f1eee4; background-image: none; color: #243247; }
body::before { opacity: .18; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='3'%3E%3Cpath stroke='%23e89a32' d='M-90 160C240 20 260 320 36 400S150 670 280 900S640 1090 720 910'/%3E%3Cpath stroke='%232b3239' d='M1490 240C1190 100 1200 500 1390 560S1360 850 1090 1030'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat; }
body::after { opacity: .2; background: repeating-linear-gradient(145deg, transparent 0 190px, #b8792d0b 191px 192px, transparent 193px 420px); }
body header, body header[data-section] { box-sizing: border-box; width: calc(100% - var(--workspace-gutter) * 2); max-width: 1600px; height: 76px; margin: .5rem auto 0; padding: 0; gap: 1rem; background: transparent; border-bottom: 2px solid #b9b4a6; box-shadow: none; }
body header .brand-lockup { width: 250px; height: 68px; min-width: 0; background: transparent; border: 0; box-shadow: none; }
body header .brand-lockup img, body header .brand-image { display: block; width: 90%; height: 90%; background: transparent; }
body header .section-header-tabs { align-self: flex-end; align-items: flex-end; gap: .4rem; margin: 0 0 -2px; padding: 0; }
body header .section-header-tab, body header .section-header-tab[aria-current='page'] {
  box-sizing: border-box; position: relative; flex: 1 1 0; height: 46px; min-height: 46px; padding: .4rem .65rem;
  border: 2px solid color-mix(in srgb, var(--section-accent) 45%, #aba697); border-radius: 9px 9px 0 0; font-size: .85rem; font-weight: 650;
  background: color-mix(in srgb, var(--section-soft) 75%, #ede6d7); color: #43536a;
  box-shadow: none; transform: none; transition: background .12s, border-color .12s;
}
body header .section-header-tab[aria-current='page'] { background: var(--workspace-paper); color: var(--section-accent); border-color: color-mix(in srgb, var(--section-accent) 78%, #3b3a35); border-bottom-color: var(--workspace-paper); box-shadow: inset 0 3px color-mix(in srgb, var(--section-accent) 30%, var(--workspace-paper)); font-weight: 800; }
/* This small paper bridge erases only the seam under the selected tab. */
body header .section-header-tab[aria-current='page']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--workspace-paper); pointer-events: none; }
body header .section-header-tab:hover { background: var(--section-hover); color: var(--section-accent); }
body header .section-header-tab[aria-current='page']:hover { background: var(--workspace-paper); }
body header .section-header-tab .category-icon { width: 23px; height: 23px; border: 0; background: none; box-shadow: none; color: var(--section-accent); }
body header .section-header-tab .category-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body header .section-header-tab span { overflow: visible; font-size: inherit; }
body header #profileButton, body header #languageButton { border: 1px solid #b7b2a6; border-radius: 5px; background: #fffcf6; box-shadow: 2px 2px 0 #343a4020; transform: none; color: #344256; }
body header #profileButton:hover, body header #languageButton:hover { background: #f4f7fa; box-shadow: none; transform: none; }
body header .avatar { background: #eaf0f6; border: 1px solid #cdd6e1; color: #47617f; }
body header .profile .menu, body header .language-menu { border: 1px solid #dbe2ea; border-radius: 8px; box-shadow: 0 8px 28px #2532471c; }
body main, body main[data-section] { box-sizing: border-box; width: calc(100% - var(--workspace-gutter) * 2); max-width: 1600px; margin: .8rem auto 2rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body header[data-section='stock'] { --section-accent: #c76600; }
body header[data-section] { border-bottom: 2px solid color-mix(in srgb, var(--section-accent) 78%, #3b3a35); }
body main[data-section] { margin-top: 0; min-height: calc(100vh - 116px); padding: var(--workspace-inset); border: 2px solid color-mix(in srgb, var(--section-accent) 78%, #3b3a35); border-top: 0; border-radius: 0 0 9px 9px; background: var(--workspace-paper); box-shadow: 4px 4px 0 #343a4020; }
body main #access-banner { margin: 0 0 .6rem; padding: .3rem .65rem; border: 1px solid #d7d2c6; border-radius: 4px; background: #eeeade; color: #656052; font-size: .7rem; }
body main[data-section] #access-banner { margin: calc(-1 * var(--workspace-inset)) calc(-1 * var(--workspace-inset)) var(--workspace-inset); padding: .3rem var(--workspace-inset); border: 0; border-bottom: 1px solid #ded8ca; border-radius: 0; background: var(--workspace-paper); }
body main[data-section] #app > .card { padding: 0; border: 0; background: transparent; box-shadow: none; }
body #app .card { padding: 1rem; border: 1px solid #dbe2ea; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px #24324704; }
body #app > .card { margin: 0; }
body #app h2 { font-size: 1.05rem; letter-spacing: -.015em; }
body #app .muted { color: #68768a; font-size: .81rem; line-height: 1.5; }
body #app p:empty { display: none; }
body #app button { border: 1px solid #adafa9; border-radius: 4px; background: #f5f2e9; color: #344b68; padding: .5rem .75rem; font-weight: 600; box-shadow: 1px 2px 0 #34425618; transform: none; }
body #app button:hover:not(:disabled) { background: #edf2f8; border-color: #8da5bf; box-shadow: none; transform: none; }
body #app button:disabled { opacity: .45; cursor: default; }
body #app button:focus-visible, body #app a:focus-visible, body header a:focus-visible { outline: 2px solid #527fac; outline-offset: 3px; }
body #app input:not([type='checkbox']), body #app select { border: 1px solid #cdd6e1; border-radius: 6px; padding: .5rem .65rem; background: #fff; font-size: .86rem; color: #243247; box-shadow: none; }
body #app .toolbar { gap: .55rem; margin: .35rem 0 .7rem; align-items: center; }
body #app .toolbar label { font-size: .82rem; font-weight: 600; }
body #app .sales-product-panel, body #app .inventory-chart-panel, body #app .stock-list-panel { border: 1px solid #dbe2ea; border-radius: 8px; background: #fff; box-shadow: none; }
body #app .inventory-chart-panel { margin: 0 0 1rem; padding: .85rem; }
body #app .inventory-chart-heading h2 { margin: 0; }
body #app .inventory-chart-tabs { margin: .75rem -.85rem 0; padding: .4rem .85rem 0; background: #f8fafc; border-color: #dbe2ea; }
body #app .inventory-chart-placeholder, body #app .stock-list-placeholder { min-height: 96px; padding: 1rem; background: #fafbfc; font-size: .82rem; }
body #app .inventory-chart-placeholder strong, body #app .stock-list-placeholder strong { font-size: .9rem; }
body #app .inventory-chart-arrow, body #app .stock-placeholder-arrow { display: none; }
body #app .stock-list-heading, body #app .stock-tabs, body #app .sales-tabs { background: #f8fafc; border-color: #dbe2ea; }
body #app .stock-tabs, body #app .sales-tabs { gap: .25rem; padding: .5rem .75rem 0; }
body #app .stock-tabs a, body #app .sales-tabs a, body #app .sales-tabs button, body #app .inventory-chart-tab { margin: 0; padding: .55rem .85rem; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; background: transparent; color: #53667d; font-weight: 600; font-size: .85rem; box-shadow: none; transform: none; }
body #app .stock-tabs a[aria-current='page'], body #app .sales-tabs a[aria-current='page'], body #app .sales-tabs button[aria-current='page'], body #app .inventory-chart-tab[aria-selected='true'] { background: #fff; color: #25466c; border-color: #c7d3e2; box-shadow: inset 0 2px #6385ac; margin-bottom: -1px; }
body #app .sales-product-panel { margin-top: 1rem; padding: .85rem; }
body #app .sales-product-panel > h2 { margin: .15rem 0 .75rem; }
body #app .stock-date-actions { padding: .4rem .75rem; border-bottom: 1px solid #dbe2ea; }
body #app .stock-date-picker summary { border: 1px solid #cdd6e1; padding: .5rem .7rem; font-size: .83rem; font-weight: 600; }
body #app .stock-calendar { border: 1px solid #cdd6e1; box-shadow: 0 8px 28px #24324726; }
body #app .stock-refresh.needs-update, body #app .sales-refresh.is-dirty { background: #fff0cf; border-color: #d6a65a; color: #714c17; }
body #app .sales-overview-filters { padding: .75rem; margin: 0 0 .75rem; border: 1px solid #dbe2ea; border-radius: 7px; background: #f8fafc; }
body #app .sales-filter-bar { margin: .75rem 0; gap: .75rem; }
body #app .sales-chart-panel { margin: 1rem 0; padding: .85rem; border: 1px solid #dbe2ea; border-radius: 8px; box-shadow: none; }
body #app .report-block, body #app .sales-product-panel.report-block { padding: .8rem; border: 1px solid #adb7bf; border-top: 3px solid color-mix(in srgb, var(--section-accent) 70%, #d6cebd); border-radius: 7px; background: #fff; box-shadow: 2px 2px 0 #2532470a; }
body #app .report-block + .report-block { margin-top: 1rem; }
body #app .report-block .sales-overview-filters { background: #f7f6f2; border-color: #e0dfd7; }
body #app .report-block .sales-chart-panel { margin: .75rem 0 0; padding: .75rem 0 0; border: 0; border-top: 1px solid #dbe2ea; border-radius: 0; }
body #app .report-block .sales-tabs { background: #f7f6f2; }
body #app .development-warning { margin: 0 0 .85rem; padding: .8rem 1rem; border: 2px solid #8b1820; border-radius: 6px; background: #b4232b; color: #fff; font-size: .95rem; line-height: 1.5; }
body #app details { color: #607086; font-size: .78rem; line-height: 1.5; }
body #app details summary { cursor: pointer; }
body #app .export-table-actions { min-height: 2.8rem; padding: .35rem .6rem; background: #fafbfc; }
body #app .export-table-actions button { padding: .2rem; }
body #app table { font-size: .83rem; }
body #app table th, body #app table td { padding: .55rem .7rem; }
body #app table thead th { background: #f3f6f9; }
body #app table thead th button { border: 0; background: transparent; padding: .3rem .35rem; color: inherit; box-shadow: none; }
body #app .pages { gap: .5rem; padding: .65rem .75rem; font-size: .82rem; }
body #app .performance-page { padding: 0; }
body #app .performance-heading h1 { font-size: 1.5rem; }
body #app .performance-heading { margin-bottom: .75rem; }
body #app .performance-nav { margin: 0 0 1rem; }
body main[data-section='products'] .performance-eyebrow { display: none; }
body main[data-section='products'] h1 { font-size: 1.5rem; margin: .35rem 0 .85rem; }
body main[data-section='products'] .placeholder { padding: 2rem; border: 1px solid #dbe2ea; background: #fff; font-size: .9rem; }
body #login { max-width: 430px; margin: 3rem auto; padding: 1.5rem; border: 1px solid #dbe2ea; border-radius: 10px; box-shadow: 0 5px 24px #24324708; }
body #login h1 { margin: 0 0 1.25rem; font-size: 1.5rem; }
body #login input { display: block; width: 100%; margin-top: .35rem; border: 1px solid #cdd6e1; box-shadow: none; background: #fff; }
body #login button { border: 1px solid #284e77; border-radius: 6px; background: #284e77; color: #fff; box-shadow: none; transform: none; }
body #login button:hover { background: #1e3e62; }

/* Home dashboard: compact, independent snapshots, no duplicate navigation tiles. */
.dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .1rem 0 .6rem; }
body #app .dashboard-heading h1 { font-size: 1.25rem; letter-spacing: -.025em; margin: 0 0 .1rem; }
.dashboard-heading p { margin: 0; font-size: .76rem; color: #68768a; }
body #app .icon-action { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; padding: 8px; background: #fff; }
.icon-action svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; }
.dashboard-kpis > div { display: grid; grid-template-columns: 1fr auto; gap: .15rem .5rem; padding: .5rem .75rem; background: #fff9ed; border: 1px solid #d5c9b4; border-left: 3px solid #d7a763; border-radius: 6px; }
.dashboard-kpis > div:nth-child(2) { background: #f0f6f4; border-left-color: #689584; }
.dashboard-kpis > div:nth-child(3) { background: #f3f5f9; border-left-color: #7d91b0; }
.dashboard-kpis span { font-size: .73rem; font-weight: 600; color: #5a6b81; grid-column: 1 / -1; }
.dashboard-kpis strong { font-size: 1.3rem; font-weight: 700; letter-spacing: -.025em; }
.dashboard-kpis small { align-self: end; font-size: .67rem; color: #78869a; }
.dashboard-hero, .dashboard-pair, .dashboard-three { display: grid; gap: .65rem; align-items: stretch; }
.dashboard-hero { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) minmax(300px,1.12fr); }
.dashboard-pair { grid-template-columns: repeat(3,minmax(0,1fr)); }
.dashboard-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.dashboard-panel { min-width: 0; border: 1px solid #b9c0c4; border-radius: 7px; background: #fff; overflow: hidden; box-shadow: 2px 2px 0 #24324709; }
.dashboard-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .7rem; background: #faf9f5; border-bottom: 1px solid #e6e4dd; }
body #app .dashboard-panel-head h2 { margin: 0; font-size: .86rem; }
.dashboard-panel-head p { font-size: .68rem; color: #68768a; margin: .15rem 0 0; }
.dashboard-link { color: #47668d; font-size: .73rem; text-decoration: none; white-space: nowrap; }
.dashboard-link:hover { text-decoration: underline; }
.dashboard-page [data-detail] { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dashboard-panel[data-detail]:hover, .dashboard-kpis > [data-detail]:hover { border-color: #9b825c; box-shadow: 0 0 0 1px #9b825c35; }
.dashboard-detail-link { color: inherit; text-decoration: none; }
.dashboard-detail-link::after { content: ' ↗'; font-size: .75em; opacity: .6; }
.dashboard-detail-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.dashboard-detail-link:focus-visible { outline: 2px solid #b76b1d; outline-offset: 4px; border-radius: 2px; }
#repeat-panel { border-top: 2px solid #b39b73; }
#repeat-panel .dashboard-status { padding: 0 .7rem; }
.dashboard-total { display: block; font-size: 1.4rem; letter-spacing: -.03em; padding: .5rem .7rem 0; }
.dashboard-chart { padding: .15rem .4rem 0; }
.dashboard-chart svg { width: 100%; max-height: 162px; display: block; }
.dashboard-chart line { stroke: #e8edf3; }
.dashboard-chart text { fill: #708197; font-size: 11px; font-family: inherit; }
.dashboard-bar { fill: #829baf; }
.dashboard-bar-today { fill: #de913c; }
.dashboard-chart g:hover rect, .dashboard-chart g:focus rect { fill: #446b98; }
.dashboard-chart g:focus { outline: none; }
body #app .dashboard-panel table { margin: 0; width: 100%; border-left: 0; border-right: 0; font-size: .76rem; }
body #app .dashboard-panel th, body #app .dashboard-panel td { padding: .25rem .65rem; line-height: 1.35; }
body #app .dashboard-panel td:not(:first-child), body #app .dashboard-panel thead th:not(:first-child) { text-align: right; white-space: nowrap; }
body #app .dashboard-panel tbody th { text-align: left; max-width: 210px; overflow-wrap: anywhere; }
body #app .dashboard-panel tr:last-child > * { border-bottom: 0; }
body #app .dashboard-empty { color: #78869a; text-align: center; padding: 1.5rem .75rem; }
.dashboard-status { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .65rem; color: #68768a; min-height: 1.2rem; margin: .3rem 0 .2rem; }
.dashboard-status:empty { display: none; }
body #app .dashboard-retry { padding: .25rem .45rem; font-size: .73rem; }
.dashboard-footnote { font-size: .65rem; color: #68768a; line-height: 1.45; margin: .3rem 0; }
.dashboard-panel .dashboard-footnote { padding: 0 .7rem .3rem; }
.dashboard-method { margin: .7rem 0 .3rem; }
.dashboard-method p { max-width: 1100px; }
.dashboard-panel td small { display: block; font-size: .65rem; opacity: .8; }
.dashboard-panel .delta-winners { color: #217257; }
.dashboard-panel .delta-losers { color: #b04449; }
.platform-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .55rem; background: #8e9aae; }
.source-amazon { background: #da922e; }.source-otto { background: #d75a60; }.source-ebay { background: #648cbe; }.source-kaufland { background: #aa6971; }.source-shopify { background: #61a27e; }.source-jtlShop { background: #8578b9; }.source-tiktok { background: #435369; }.source-b2b { background: #409e9c; }
body #app .dashboard-panel tr.top-amazon > * { background: #fff8eb; }
body #app .dashboard-panel tr.top-otto > * { background: #fff1f2; }
.platform-badge { display: inline-block; border: 1px solid #d9c3a0; border-radius: 4px; padding: .1rem .35rem; font-size: .68rem; color: #835a20; }
.top-otto .platform-badge { border-color: #e7b6bc; color: #a5414c; }
.yesterday-panel { display: grid; place-items: center; min-width: 0; background: transparent; border: 0; box-shadow: none; }
.chilldex-device { position: relative; width: 100%; max-width: 470px; aspect-ratio: 595 / 455; margin: 0 auto; container-type: inline-size; }
.device-case { display: block; width: 100%; height: 100%; filter: drop-shadow(2px 3px 0 #302e2925); }
.device-screen { position: absolute; left: 11.8%; top: 10.8%; width: 78%; height: 64%; border-radius: 3px; background: #222b2b; color: #f4ecd7; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: .25rem; padding: .55rem; text-align: center; overflow: auto; scrollbar-width: thin; }
.device-heading { display: flex; justify-content: center; align-items: center; gap: .45rem; flex-shrink: 0; }
.device-book { width: 32px; height: 22px; flex-shrink: 0; }
body #app .device-heading h2 { margin: 0; font-size: clamp(.7rem,4.1cqw,.95rem); line-height: 1.2; color: #fff6de; letter-spacing: 0; }
.device-scope { margin: 0; font-size: clamp(.55rem,2.9cqw,.68rem); color: #c3cabe; line-height: 1.25; }
#yesterday-result { width: 100%; padding: .15rem 0; }
.device-product { display: block; font-size: clamp(1rem,6.7cqw,1.6rem); line-height: 1.1; overflow-wrap: anywhere; color: #ffb650; font-family: ui-monospace, Consolas, monospace; }
.device-units { display: block; font-size: clamp(.95rem,5.4cqw,1.3rem); line-height: 1.2; font-variant-numeric: tabular-nums; }
.device-caption, .device-message { font-size: .65rem; line-height: 1.3; display: block; }
.device-message { margin: 0 auto; max-width: 200px; }
.device-note { margin: 0; color: #d5d5bd; font-size: .58rem; line-height: 1.25; }
.device-note:not(:empty) { border-top: 1px solid #61706a; padding-top: .25rem; }
#winners-panel { border-top: 2px solid #81a18d; } #losers-panel { border-top: 2px solid #c58a85; }
#revenue-panel { border-top: 2px solid #d2a35e; } #today-panel { border-top: 2px solid #899eaf; }
@media(max-width:1150px) {
  body header, body header[data-section] { gap: .65rem; padding: 0; }
  body header .brand-lockup { width: 200px; }
  body header .section-header-tab, body header .section-header-tab[aria-current='page'] { font-size: .76rem; gap: .3rem; padding: .35rem; }
  .dashboard-three { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #top-panel { grid-column: 1 / -1; }
  .dashboard-hero { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
  .yesterday-panel { grid-column: 1 / -1; }
  .chilldex-device { max-width: 330px; }
}
@media(max-width:850px) {
  body { --workspace-gutter: 12px; }
  body header, body header[data-section] { height: auto; min-height: 68px; flex-wrap: wrap; padding: .25rem 0 0; }
  body header .brand-lockup { height: 60px; width: auto; max-width: 240px; flex: 1 1 0; }
  body header .section-header-tabs { order: 3; flex-basis: 100%; }
  body main[data-section] { margin-top: 0; }
  .dashboard-pair { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:600px) {
  .dashboard-kpis { gap: .5rem; grid-template-columns: minmax(0,1fr); }
  .dashboard-kpis > div { grid-template-columns: 1fr auto; padding: .65rem .85rem; }
  .dashboard-kpis span { grid-column: 1; align-self: center; }.dashboard-kpis strong { grid-column: 2; grid-row: 1 / 3; align-self: center; }.dashboard-kpis small { grid-column: 1; }
  .dashboard-three { grid-template-columns: minmax(0,1fr); }
  .dashboard-hero { grid-template-columns: minmax(0,1fr); }
  body { --workspace-inset: .5rem; }
  body header .section-header-tab .category-icon { display: none; }
  body header .section-header-tab, body header .section-header-tab[aria-current='page'] { font-size: .7rem; height: 38px; min-height: 38px; }
  .dashboard-heading p { font-size: .77rem; }
  body #app .card { padding: .7rem; }
}
@media(max-width:450px) {
  body header .section-header-tabs { gap: .2rem; }
  body header .section-header-tab, body header .section-header-tab[aria-current='page'] { padding-inline: .15rem; font-size: .66rem; }
}