/* Shared paint tokens. Layout, formulas and data are independent of appearance. */
:root {
  --panel:var(--surface); --card:var(--surface); --purple:var(--accent);
  --table-head:#272830; --table-total:#34303f; --table-group:#25262e;
  --on-accent:#241a39; --accent-hover:#cbbaff; --overlay:#080910a6;
  --grid:#ffffff12; --neutral-tint:#ffffff04; --selection:#635083;
  --shadow:0 3px 14px #08090c18;
  --plot-income:#69b9ff; --plot-cost:#ef9c65; --plot-profit:#75b996; --plot-loss:#f17878;
  /* Current is lime. History progresses from warm orange to cool teal; line weight and stroke pattern also encode age. */
  --chart-current:#d2f78c; --chart-yesterday:#ffb16b; --chart-week:#ef7caa;
  --chart-two-weeks:#b699f3; --chart-month:#79b8f4; --chart-year:#5dbcb0;
  --table-amount-rgb:105,185,255; --table-cost-rgb:239,156,101;
  --table-profit-rgb:117,185,150; --table-loss-rgb:241,120,120;
}
:root[data-theme=light] {
  color-scheme:light;
  --bg:#f5f6f8; --nav:#ffffff; --surface:#ffffff; --surface-raised:#f0f1f5;
  --surface-subtle:#f9fafc; --hover:#e9ecf2; --ink:#202735; --text:#202735;
  --muted:#596375; --subtle:#677386; --line:#e0e4eb; --border:#c7ceda;
  --accent:#6246ad; --blue:#6246ad; --focus:#7154bd; --accent-bg:#ece7f8;
  --on-accent:#ffffff; --accent-hover:#533a98;
  --good:#19724f; --good-bg:#e7f4ec; --bad:#b62b48; --bad-bg:#fcebef;
  --warning:#8a540d; --warning-bg:#fff3df; --info:#2864a0; --info-bg:#eaf2fc;
  --table-head:#f0f2f6; --table-total:#e9e5f1; --table-group:#f6f7fa;
  --overlay:#18203160; --grid:#26364d16; --neutral-tint:#1b2d4504; --selection:#ded6f5;
  --shadow:0 3px 14px #18213c08;
  --chart-current:#527c0c; --chart-yesterday:#ad570c; --chart-week:#b83873;
  --chart-two-weeks:#794fc1; --chart-month:#286bb3; --chart-year:#187e79;
  --plot-income:#287ca8; --plot-cost:#b76821; --plot-profit:#28865e; --plot-loss:#c44557;
  --table-amount-rgb:45,130,190; --table-cost-rgb:192,106,35;
  --table-profit-rgb:34,135,91; --table-loss-rgb:196,55,77;
  /* Compatibility roles for older screens. Dark fallbacks stay in their rules;
     new components use the shared semantic tokens directly. */
  --theme-surface:var(--surface); --theme-surface-raised:var(--surface-raised);
  --theme-ink:var(--ink); --theme-muted:var(--muted); --theme-on-accent:var(--on-accent);
  --theme-accent:var(--accent); --theme-info:var(--info); --theme-good:var(--good);
  --theme-bad:var(--bad); --theme-warning:var(--warning);
  --theme-accent-bg:var(--accent-bg); --theme-info-bg:var(--info-bg);
  --theme-good-bg:var(--good-bg); --theme-bad-bg:var(--bad-bg); --theme-warning-bg:var(--warning-bg);
  --theme-border:var(--border); --theme-accent-border:#c4b6e4; --theme-info-border:#b5cee5;
  --theme-good-border:#a8d2bd; --theme-bad-border:#e7b4be; --theme-warning-border:#e3c89d;
  --theme-neutral-tint:var(--neutral-tint); --theme-grid:var(--grid);
  --theme-overlay:var(--overlay); --theme-shadow-color:#18213c14;
}
html,body{background:var(--bg);color:var(--ink)}
body .boot-content{color:var(--ink)}
body .boot-caption{color:var(--muted)}
.boot-track{background:var(--accent-bg)}
.boot-track::after{background:var(--accent)}
.button.primary{color:var(--on-accent)}
.button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.upload-progress progress::-webkit-progress-value{background:var(--accent)}
.upload-progress progress::-moz-progress-bar{background:var(--accent)}
.local-label .dot{background:var(--good)}
.delivery-term-step{--term-color:var(--good)}
.delivery-term-step.caution,.delivery-term-step.warning{--term-color:var(--warning)}
.delivery-term-step.danger{--term-color:var(--bad)}
::selection{background:var(--selection);color:var(--ink)}
*{scrollbar-color:var(--border) transparent}
.desktop-top-nav{background:var(--nav);border-color:var(--line)}
.mobile-bottom-nav{background:var(--nav)}
input,select,textarea{color-scheme:inherit}
.appearance-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;margin-left:auto;padding:0;border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.appearance-toggle:hover{background:var(--hover);color:var(--ink)}
.appearance-toggle+.top-account{margin-left:0}
.appearance-settings{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;margin-bottom:12px;max-width:900px}
.appearance-settings h2{font-size:16px;margin:0}
.appearance-settings p{font-size:12px;color:var(--muted);margin:4px 0 0}
.appearance-settings label{display:flex;align-items:center;gap:10px;white-space:nowrap}
@media(max-width:720px){.appearance-toggle{width:40px;height:40px}.appearance-settings{flex-wrap:wrap;padding:12px}.appearance-settings label{width:100%;justify-content:space-between}}
/* One consistent surface for sticky/cloned headers and all calculation windows. */
.page-table-header{background:var(--table-head)}
.page-table-header th{background:var(--table-head)}
.finance-calculation-dialog,.analysis-explanation,dialog{color:var(--ink);background:var(--surface)}
.finance-calculation-dialog::backdrop,dialog::backdrop{background:var(--overlay)}
.analysis-dialog-layer{background:var(--overlay)}
.finance-calculation-inputs dd{font-variant-numeric:tabular-nums}
.finance-calculation-inputs>div{gap:10px;min-width:0}
.finance-calculation-inputs dt{min-width:0;overflow-wrap:anywhere}
.finance-calculation-inputs dd{flex:none;white-space:nowrap}
/* The product table owns its cell layout. Global small/button styles must not
   turn amount, share and quality into unrelated flex items or add line margins. */
.compact-shell .unified-products-table{table-layout:fixed;border-collapse:separate;border-spacing:0;--product-name-width:188px}
.compact-shell .unified-products-table :is(th,td){box-sizing:border-box;font-size:12px;line-height:1.35;vertical-align:top}
.compact-shell .unified-products-table thead th{height:auto;padding:7px 3px;background:var(--table-head);color:var(--muted);font-size:11px;font-weight:500;white-space:normal;overflow-wrap:normal;word-break:normal;vertical-align:top}
.compact-shell .unified-products-table thead th.number{text-align:right}
.compact-shell .unified-products-table thead th small{display:block;margin:2px 0 0;font-size:10px;line-height:1.2;font-weight:400}
.compact-shell .unified-products-table thead th small:empty{display:block;min-height:12px}
.compact-shell .unified-products-table tbody :is(th,td){padding:5px 3px}
.compact-shell .unified-products-table :is(th,td):first-child{padding-left:8px;padding-right:8px;width:var(--product-name-width);min-width:var(--product-name-width);max-width:var(--product-name-width);white-space:normal;overflow-wrap:anywhere;background:var(--surface);z-index:2}
.compact-shell .unified-products-table thead th:first-child{z-index:4;background:var(--table-head)}
.compact-shell .unified-products-table tbody .analysis-total>:is(th,td){background:var(--table-total);font-weight:600}
/* Override the common first-column rule as well as the financial table rule. */
.compact-shell .main-content .unified-products-table thead th:first-child:not([colspan]){z-index:4;background:var(--table-head)}
.compact-shell .main-content .unified-products-table .analysis-total>:first-child:not([colspan]){background:var(--table-total)}
.compact-shell .unified-products-table .finance-cell-value{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;justify-items:end;gap:4px;width:100%;min-width:0;min-height:32px;margin:0;padding:0;border:0;border-radius:2px;background:transparent;color:inherit;font:inherit;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.compact-shell .unified-products-table .finance-cell-value:hover{background:var(--neutral-tint)}
.compact-shell .unified-products-table .finance-cell-amount{display:block;min-width:0;line-height:16px;white-space:nowrap}
.compact-shell .unified-products-table .finance-cell-secondary{display:block;margin:0;padding:0;line-height:12px;font-size:10px;font-weight:400;color:var(--muted);opacity:1}
.compact-shell .unified-products-table .unified-partial{max-width:100%;white-space:normal;overflow-wrap:anywhere;color:var(--warning)}
.compact-shell .unified-products-table .analysis-family-toggle{display:flex;align-items:flex-start;gap:5px;min-width:0;min-height:32px;width:100%;margin:0;padding:0;line-height:1.35;font-size:12px;text-align:left}
.compact-shell .unified-products-table .analysis-family-toggle>span:first-child{flex:none;padding-top:1px}
.compact-shell .unified-products-table .analysis-family-toggle>span:last-child{flex:1;min-width:0}
.compact-shell .unified-products-table tbody th strong{font-weight:500;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
.compact-shell .unified-products-table tbody th small{display:block;margin:3px 0 0;font-size:10px;line-height:1.3;font-weight:400;color:var(--muted)}
.compact-shell .unified-products-table tbody th .product-sale-tag{display:inline-block;margin:0 0 0 4px;padding:0 3px;font-size:9px;line-height:1.3;border:1px solid var(--border);border-radius:3px}
.compact-shell .unified-products-table .analysis-size>th{padding-left:22px;background:var(--surface-subtle)}
@media(max-width:720px){
 .compact-shell .unified-products-table{--product-name-width:144px}
 .compact-shell .unified-products-table .finance-cell-value,.compact-shell .unified-products-table .analysis-family-toggle{min-height:36px}
}
/* Keep mobile tables as tables. Page scrolling is the only vertical scrolling. */
.page-table-scroll{max-height:none!important;height:auto!important;overflow-x:auto;overscroll-behavior-x:contain}
.page-table-scroll>table{display:table}
.page-table-scroll>table>thead{display:table-header-group}
.page-table-scroll>table>tbody{display:table-row-group}
.page-table-scroll>table>tfoot{display:table-footer-group}
.page-table-scroll>table> :is(thead,tbody,tfoot)>tr{display:table-row}
.page-table-scroll>table> :is(thead,tbody,tfoot)>tr> :is(th,td){display:table-cell}
/* Legends are controls, not decorative cards; dates/method remain in the tooltip. */
.comparison-entry{border-radius:2px}
.comparison-entry:focus-within{outline:2px solid var(--focus);outline-offset:3px}
.comparison-entry:hover .comparison-name{color:var(--ink)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}

/* Stable comparison headers and a compact product identity column. */
.table-sort-button{position:relative;display:block;width:100%;min-width:0;margin:0;padding:0;border:0;border-radius:2px;background:none;color:inherit;font:inherit;line-height:inherit;white-space:inherit;text-align:inherit;cursor:pointer}
.table-sort-button:hover{color:var(--ink);background:var(--neutral-tint)}
.table-sort-button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
th[aria-sort=descending]>.table-sort-button::after,th[aria-sort=ascending]>.table-sort-button::after{position:absolute;right:0;bottom:-5px;color:var(--accent);font-size:10px;line-height:10px;content:'↓'}
th[aria-sort=ascending]>.table-sort-button::after{content:'↑'}
.compact-shell .unified-products-table thead th.number{vertical-align:top}
.compact-shell .unified-products-table .finance-heading-label{display:block;min-height:39px;line-height:13px}
.compact-shell .unified-products-table .finance-heading-label .plan-column-kind{display:block;margin:0;line-height:13px;font-size:inherit;font-weight:400;color:var(--muted)}
.compact-shell .unified-products-table .product-name-actions{display:grid;grid-template-columns:12px minmax(0,1fr);gap:3px;align-items:start}
.compact-shell .unified-products-table .product-size-toggle{width:12px;min-height:27px;line-height:16px;font-size:11px;margin-top:-5px}
.compact-shell .unified-products-table .product-name-content{min-width:0}
.compact-shell .unified-products-table .product-history-link{display:block;width:100%;font-size:12px;line-height:16px}
.compact-shell .unified-products-table .product-name-content>:is(.product-history-link,strong){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:32px;max-height:32px;line-height:16px;font-weight:500}
.compact-shell .unified-products-table tbody th .product-row-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 5px;margin:2px 0 0;line-height:12px;font-size:10px}
.compact-shell .unified-products-table tbody th .product-row-meta .product-sale-tag{margin:0;padding:0;border:0;border-radius:0;font-size:9px;color:var(--muted);white-space:nowrap}
.compact-shell .unified-products-table .finance-margin-heading.is-pair-start,.compact-shell .unified-products-table .finance-margin-amount{border-left:1px solid var(--border)}
.compact-shell .unified-products-table .finance-margin-percent{font-size:11px}
.compact-shell .unified-products-table .finance-margin-percent .finance-cell-value{font-size:11px}
.compact-shell .finance-month-table thead th{vertical-align:top}
.compact-shell .finance-month-table .table-sort-button>span:first-child{display:block;min-height:39px;line-height:13px}
.compact-shell .finance-month-table .table-sort-button>small{display:block;min-height:12px}