/* GAMECELL · analysis workspaces. Screen-only: exports and public orders are unchanged. */
@media screen {
 #app #page:is([data-screen="dashboard"],[data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .metric-grid {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 18px;
 }
 #app #page:is([data-screen="dashboard"],[data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .metric {
  display:flex; flex-direction:column; align-items:stretch; min-width:0; min-height:126px; padding:17px 18px 15px;
  border:1px solid var(--ds-line); border-radius:var(--ds-radius); background:var(--ds-surface); color:var(--ds-text); box-shadow:0 1px 2px #17203304;
 }
 #app #page:is([data-screen="dashboard"],[data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .metric-label {
  display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--ds-muted); font-size:12px; font-weight:600; line-height:1.4;
 }
 #app #page:is([data-screen="dashboard"],[data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .metric-label .icon {
  flex:none; width:27px; height:27px; padding:6px; border-radius:8px; background:var(--ds-surface-alt); color:var(--ds-muted);
 }
 #app #page:is([data-screen="dashboard"],[data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .metric-value {
  display:block; margin:7px 0 6px; color:var(--ds-text); font-size:clamp(22px,2.2vw,30px); line-height:1.15; font-weight:650; letter-spacing:-.04em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
 }
 #app #page:is([data-screen="dashboard"],[data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .metric-foot {
  display:block; margin-top:auto; color:var(--ds-muted); font-size:11px; line-height:1.45; font-weight:400;
 }
 #app #page:is([data-screen="dashboard"],[data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .metric.featured {
  border-color:color-mix(in srgb,var(--ds-accent) 24%,var(--ds-line)); background:var(--ds-accent-soft); box-shadow:inset 0 3px 0 var(--ds-accent);
 }
 #app #page:is([data-screen="dashboard"],[data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .metric.featured .metric-label .icon {
  background:var(--ds-surface); color:var(--ds-accent);
 }
 #app #page[data-screen="dashboard"] .metric-action { text-align:left; white-space:normal; cursor:pointer; }
 #app #page[data-screen="dashboard"] .metric-action:hover { border-color:var(--ds-accent); background:var(--ds-surface-alt); }
 #app #page[data-screen="dashboard"] .metric-action:focus-visible { outline:3px solid var(--ds-accent); outline-offset:3px; }
 #app #page[data-screen="dashboard"] .dashboard-secondary {
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:stretch; gap:16px; margin-bottom:18px;
 }
 #app #page[data-screen="dashboard"] .dashboard-secondary>.panel { margin:0; }
 #app #page[data-screen="dashboard"] .dashboard-secondary>.panel:only-child { grid-column:1/-1; }
 #app #page[data-screen="dashboard"] .dashboard-commission {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 18px; align-content:start; padding:18px; border:1px solid var(--ds-line); background:var(--ds-surface);
 }
 #app #page[data-screen="dashboard"] .commission-heading { display:flex; align-items:flex-start; gap:10px; }
 #app #page[data-screen="dashboard"] .commission-heading>.icon {
  display:block; flex:none; width:34px; height:34px; padding:8px; border-radius:10px; background:var(--ds-accent-soft); color:var(--ds-accent);
 }
 #app #page[data-screen="dashboard"] .commission-heading h2 { margin:0 0 4px; color:var(--ds-text); font-size:14px; font-weight:650; }
 #app #page[data-screen="dashboard"] .commission-heading p { margin:0; color:var(--ds-muted); font-size:12px; line-height:1.45; }
 #app #page[data-screen="dashboard"] .commission-total { display:grid; align-content:start; justify-items:end; gap:5px; }
 #app #page[data-screen="dashboard"] .commission-total>span { color:var(--ds-muted); font-size:11px; }
 #app #page[data-screen="dashboard"] .commission-total>strong { color:var(--ds-text); font-size:23px; line-height:1.2; font-weight:650; letter-spacing:-.03em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
 #app #page[data-screen="dashboard"] .commission-breakdown { grid-column:1/-1; padding-top:12px; border-top:1px solid var(--ds-line); gap:7px 10px; color:var(--ds-muted); font-size:12px; }
 #app #page[data-screen="dashboard"] .commission-breakdown>small { color:var(--ds-muted); font-size:11px; line-height:1.45; }
 #app #page[data-screen="dashboard"] .expense-reminders .panel-header { padding:16px 18px; }
 #app #page[data-screen="dashboard"] .expense-reminders .panel-body { padding:12px 18px 16px; }
 #app #page[data-screen="dashboard"] .expense-reminders .panel-header h2 { color:var(--ds-text); font-size:14px; }
 #app #page[data-screen="dashboard"] .expense-reminders .panel-header h2>.icon { color:var(--ds-accent); }
 #app #page[data-screen="dashboard"] .two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
 #app #page:is([data-screen="dashboard"],[data-screen="closing"]) .row-stat { gap:16px; min-height:39px; padding-block:9px; border-color:var(--ds-line); font-size:13px; line-height:1.45; }
 #app #page:is([data-screen="dashboard"],[data-screen="closing"]) .row-stat>span:first-child { color:var(--ds-muted); }
 #app #page:is([data-screen="dashboard"],[data-screen="closing"]) .row-stat strong { font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
 #app #page:is([data-screen="dashboard"],[data-screen="closing"]) .stat-note { color:var(--ds-muted); font-size:12px; line-height:1.55; }

 /* Finance: one clear period bar, balanced summaries and scan-friendly records. */
 #app #page:is([data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .finance-period {
  display:flex; align-items:end; flex-wrap:wrap; gap:12px 18px; padding:14px 16px; margin:0 0 16px; border:1px solid var(--ds-line); border-radius:var(--ds-radius); background:var(--ds-surface);
 }
 #app #page:is([data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .finance-period .field { min-width:0; width:220px; max-width:100%; margin:0; }
 #app #page:is([data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"]) .period-help { flex:1 1 240px; margin:0; align-self:center; color:var(--ds-muted); font-size:12px; line-height:1.5; }
 #app #page:is([data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .finance-status { margin:0 0 16px; padding:0 2px; gap:7px 14px; color:var(--ds-muted); font-size:12px; line-height:1.5; }
 #app #page[data-screen="expenses"] .expense-visual { padding:14px 18px; border:1px solid var(--ds-line); border-radius:var(--ds-radius); background:var(--ds-surface); margin-bottom:12px; }
 #app #page[data-screen="expenses"] .expense-visual>div { color:var(--ds-muted); font-size:12px; line-height:1.5; font-variant-numeric:tabular-nums; }
 #app #page[data-screen="expenses"] .expense-visual>div>strong { color:var(--ds-text); font-weight:600; }
 #app #page[data-screen="expenses"] .expense-visual meter { display:block; width:100%; height:10px; margin:8px 0; border:0; border-radius:5px; accent-color:var(--ds-accent); }
 #app #page[data-screen="expenses"] .expense-visual meter::-webkit-meter-bar { border:0; border-radius:5px; background:var(--ds-surface-alt); }
 #app #page[data-screen="expenses"] .expense-visual meter::-webkit-meter-optimum-value { border-radius:5px; background:var(--ds-accent); }
 #app #page[data-screen="expenses"] .expense-visual meter::-moz-meter-bar { border-radius:5px; background:var(--ds-accent); }
 #app #page[data-screen="expenses"] :is(.expense-type-grid,.expense-dashboard-columns) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:16px; }
 #app #page[data-screen="expenses"] .expense-type-card { border-top:1px solid var(--ds-line); }
 #app #page[data-screen="expenses"] .expense-type-card h2>.icon { color:var(--ds-accent); }
 #app #page[data-screen="expenses"] .expense-type-total>strong { color:var(--ds-text); font-size:27px; line-height:1.2; font-weight:650; letter-spacing:-.03em; }
 #app #page[data-screen="expenses"] .expense-type-total>span { color:var(--ds-muted); font-size:12px; }
 #app #page[data-screen="expenses"] .expense-type-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0; padding:14px 0; border-block:1px solid var(--ds-line); }
 #app #page[data-screen="expenses"] .expense-type-details>div { gap:6px; font-size:13px; }
 #app #page[data-screen="expenses"] .expense-type-details span { color:var(--ds-muted); font-size:11px; }
 #app #page[data-screen="expenses"] .variable-expense-type-details { grid-template-columns:minmax(0,1fr); }
 #app #page[data-screen="expenses"] .expense-status-row { gap:10px; padding:13px 0; font-size:13px; border-color:var(--ds-line); }
 #app #page[data-screen="expenses-variable"] .variable-expense-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; }
 #app #page:is([data-screen="expenses-fixed"],[data-screen="expenses-variable"]) .expense-toolbar { padding:14px 16px; border-bottom:1px solid var(--ds-line); background:var(--ds-surface-alt); }
 #app #page:is([data-screen="expenses-fixed"],[data-screen="expenses-variable"]) .finance-search { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
 #app #page:is([data-screen="expenses-fixed"],[data-screen="expenses-variable"]) .finance-search>input { min-width:180px; flex:1 1 220px; min-height:40px; border-color:var(--ds-line); background:var(--ds-surface); color:var(--ds-text); }
 #app #page:is([data-screen="expenses-fixed"],[data-screen="expenses-variable"]) .finance-search>.select-control { flex:0 1 210px; min-width:170px; }
 #app #page[data-screen="expenses-variable"] .variable-expense-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:12px; padding:16px; }
 #app #page[data-screen="expenses-variable"] .variable-expense-card { gap:14px; padding:16px; border:1px solid var(--ds-line); border-radius:10px; background:var(--ds-surface); box-shadow:none; }
 #app #page[data-screen="expenses-variable"] .variable-expense-card-head { align-items:flex-start; gap:12px; }
 #app #page[data-screen="expenses-variable"] .variable-expense-card-head>div { display:grid; gap:6px; }
 #app #page[data-screen="expenses-variable"] .variable-expense-card-head>div>strong { color:var(--ds-text); font-size:14px; font-weight:600; }
 #app #page[data-screen="expenses-variable"] .variable-expense-amount { color:var(--ds-text); font-size:19px; letter-spacing:-.02em; font-weight:650; }
 #app #page[data-screen="expenses-variable"] .variable-expense-meta { padding-top:12px; border-color:var(--ds-line); gap:10px; }
 #app #page[data-screen="expenses-variable"] .variable-expense-meta dt { color:var(--ds-muted); font-size:11px; }
 #app #page[data-screen="expenses-variable"] .variable-expense-meta dd { color:var(--ds-text); font-size:13px; }
 #app #page[data-screen="expenses-catalogs"] .expense-category-catalog { gap:14px; padding:16px; }
 #app #page[data-screen="expenses-catalogs"] .expense-category-card { padding:18px; border-color:var(--ds-line); border-radius:10px; background:var(--ds-surface); box-shadow:none; }
 #app #page[data-screen="expenses-catalogs"] .subcategory-catalog { margin-top:16px; padding-top:14px; border-top:1px solid var(--ds-line); }
 #app #page[data-screen="expenses-catalogs"] .subcategory-row { padding-block:12px; gap:12px; border-color:var(--ds-line); }
 #app #page[data-screen="closing"] .finance-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
 #app #page[data-screen="closing"] .finance-result { margin:10px 0; padding:14px; border:1px solid var(--ds-line); border-radius:9px; background:var(--ds-accent-soft); color:var(--ds-text); }
 #app #page[data-screen="closing"] .finance-result>span:first-child { color:var(--ds-text); font-weight:600; }
 #app #page[data-screen="closing"] :is(.finance-explainer,.finance-footnote) { color:var(--ds-muted); font-size:12px; line-height:1.6; }
 #app #page[data-screen="closing"] .finance-close-button { margin-top:16px; }
 #app #page[data-screen="closing"] .closure-history { gap:8px; }

 /* Ranking shares the same analysis language instead of a separate gold theme. */
 #app #page[data-screen="ranking"] .ranking-page { max-width:none; gap:16px; }
 #app #page[data-screen="ranking"] .ranking-heading { padding:20px 22px; border:1px solid var(--ds-line); border-left:4px solid var(--ds-accent); border-radius:var(--ds-radius); background:var(--ds-surface); color:var(--ds-text); box-shadow:none; }
 #app #page[data-screen="ranking"] .ranking-heading::after { content:none; }
 #app #page[data-screen="ranking"] .ranking-kicker { color:var(--ds-accent); font-size:11px; font-weight:650; letter-spacing:.08em; }
 #app #page[data-screen="ranking"] .ranking-heading h1 { margin:5px 0; color:var(--ds-text); font-size:26px; letter-spacing:-.035em; }
 #app #page[data-screen="ranking"] .ranking-heading p { margin:0; color:var(--ds-muted); font-size:13px; }
 #app #page[data-screen="ranking"] .ranking-summary { gap:12px; }
 #app #page[data-screen="ranking"] .ranking-summary>div { justify-items:start; min-height:94px; padding:17px 20px; border-color:var(--ds-line); border-radius:var(--ds-radius); background:var(--ds-surface); text-align:left; }
 #app #page[data-screen="ranking"] .ranking-summary span { color:var(--ds-muted); font-size:12px; font-weight:500; }
 #app #page[data-screen="ranking"] .ranking-summary strong { color:var(--ds-text); font-size:25px; font-weight:650; letter-spacing:-.035em; overflow-wrap:anywhere; }
 #app #page[data-screen="ranking"] .ranking-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; padding:10px; border-color:var(--ds-line); border-radius:var(--ds-radius); background:var(--ds-surface); }
 #app #page[data-screen="ranking"] .ranking-tabs { gap:4px; padding:4px; border-radius:9px; background:var(--ds-surface-alt); }
 #app #page[data-screen="ranking"] .ranking-tabs button { min-width:0; flex:1; min-height:38px; padding:8px 12px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--ds-muted); font-size:13px; font-weight:550; box-shadow:none; }
 #app #page[data-screen="ranking"] .ranking-tabs button[aria-selected="true"] { color:var(--ds-accent); border-color:var(--ds-line); background:var(--ds-surface); box-shadow:0 1px 3px #1720330a; }
 #app #page[data-screen="ranking"] .ranking-metrics { gap:5px; padding:0; border:0; }
 #app #page[data-screen="ranking"] .ranking-metrics>span { color:var(--ds-muted); font-size:11px; }
 #app #page[data-screen="ranking"] .ranking-metrics button { min-height:34px; border-color:transparent; background:transparent; color:var(--ds-muted); font-size:12px; }
 #app #page[data-screen="ranking"] .ranking-metrics button[aria-pressed="true"] { border-color:transparent; background:var(--ds-accent-soft); color:var(--ds-accent); }
 #app #page[data-screen="ranking"] .ranking-panel { border-color:var(--ds-line); border-radius:var(--ds-radius); background:var(--ds-surface); box-shadow:none; }
 #app #page[data-screen="ranking"] .ranking-panel>header { padding:14px 18px; background:var(--ds-surface-alt); border-color:var(--ds-line); }
 #app #page[data-screen="ranking"] .ranking-panel>header h2 { color:var(--ds-text); font-size:14px; }
 #app #page[data-screen="ranking"] .ranking-count { min-height:25px; border-radius:6px; background:var(--ds-accent-soft); color:var(--ds-accent); font-size:11px; }
 #app #page[data-screen="ranking"] .ranking-list { padding:0 18px 6px; }
 #app #page[data-screen="ranking"] .ranking-row { grid-template-columns:38px minmax(0,1fr) minmax(300px,.85fr); min-height:70px; gap:12px; padding:12px 0; border-color:var(--ds-line); }
 #app #page[data-screen="ranking"] .ranking-position { width:32px; height:32px; border:1px solid var(--ds-line); border-radius:9px; background:var(--ds-surface-alt); color:var(--ds-muted); font-size:12px; font-weight:650; box-shadow:none; }
 #app #page[data-screen="ranking"] .ranking-position-1 { border-color:#5154d9; background:#5154d9; color:#fff; }
 #app #page[data-screen="ranking"] :is(.ranking-position-2,.ranking-position-3) { border-color:var(--ds-line); background:var(--ds-accent-soft); color:var(--ds-accent); }
 #app #page[data-screen="ranking"] .ranking-name { color:var(--ds-text); font-size:14px; line-height:1.45; font-weight:600; }
 #app #page[data-screen="ranking"] .ranking-values { gap:12px; }
 #app #page[data-screen="ranking"] .ranking-values>div { padding-left:12px; border-color:var(--ds-line); }
 #app #page[data-screen="ranking"] .ranking-values dt { color:var(--ds-muted); font-size:11px; line-height:1.45; }
 #app #page[data-screen="ranking"] .ranking-values dd { margin-top:4px; font-size:13px; line-height:1.4; font-weight:550; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
 #app #page[data-screen="ranking"] .ranking-values>div:not(.ranking-profit) dd { color:var(--ds-text); }
 #app #page[data-screen="ranking"] .ranking-row-unranked { background:var(--ds-surface-alt); }

 /* Calculator workbench only; the canvas/customer image is not styled here. */
 #app #page[data-screen="calculator"] .calculator-step-form { max-width:740px; }
 #app #page[data-screen="calculator"] .calculator-step-form .calculator-layout>.panel { width:100%; border-color:var(--ds-line); border-radius:var(--ds-radius); background:var(--ds-surface); }
 #app #page[data-screen="calculator"] #calculator-form { padding:24px; }
 #app #page[data-screen="calculator"] .calculator-fields { gap:18px; }
 #app #page[data-screen="calculator"] .calculator-fields .field { gap:7px; color:var(--ds-text); font-size:13px; }
 #app #page[data-screen="calculator"] .calculator-fields input:is([name="amount"],[name="entry"]) { min-height:54px; font-size:23px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
 #app #page[data-screen="calculator"] .calculator-fields input[name="amount"] { border-color:color-mix(in srgb,var(--ds-accent) 32%,var(--ds-line)); background:var(--ds-accent-soft); }
 #app #page[data-screen="calculator"] .calculator-interest-help { align-self:center; margin:0; padding:0; color:var(--ds-muted); font-size:12px; line-height:1.5; }
 #app #page[data-screen="calculator"] .calculator-method { margin:18px 0 0; padding-top:16px; border-top:1px solid var(--ds-line); color:var(--ds-muted); font-size:12px; line-height:1.5; }
 #app #page[data-screen="calculator"] .calculator-submit { min-height:44px; margin-top:18px; }
 #app #page[data-screen="calculator"] .calculator-internal-details { display:block; margin:8px auto 0; color:var(--ds-muted); background:transparent; border-color:transparent; }
 #app #page[data-screen="calculator"] .calculator-export-actions { gap:8px; }
 #app #page[data-screen="calculator"] .calculator-export-help { color:var(--ds-muted); }

 /* On notebooks the internal comparison stays compact; canvas export has its own layout. */
 @media (min-width:900px) {
  #app #page[data-screen="calculator"] .calculator-step-result .page-heading { margin:0 0 6px; }
  #app #page[data-screen="calculator"] .calculator-step-result .page-heading h1 { font-size:23px; line-height:1.2; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-export-actions button { min-height:38px; padding:7px 12px; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-export-help { margin:4px 0 8px; font-size:12px; line-height:1.4; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-sheet-header { padding:7px 16px; gap:14px; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-sheet-brand>svg { width:20px; height:20px; padding:8px; border-radius:9px; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-sheet-brand strong { font-size:16px; line-height:1.25; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-sheet-brand h2 { margin-top:2px; font-size:12px; line-height:1.3; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-sheet-amount strong { margin-top:2px; font-size:22px; line-height:1.2; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-sheet-body { padding:8px 14px 9px; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-sheet-brand-name { margin:0 0 5px; font-size:12px; line-height:1.3; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-entry-note { padding:5px 9px; margin:0 0 6px; font-size:12px; line-height:1.3; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-tables { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; flex:0 1 auto; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-table :is(th,td) { padding:4px 10px; font-size:13px; line-height:20px; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-table thead th { padding:5px 10px; font-size:10px; line-height:16px; letter-spacing:.02em; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-table tbody tr { height:30px; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-table tbody :is(th,strong) { font-size:14px; font-weight:600; }
  #app #page[data-screen="calculator"] .calculator-step-result .calculator-footnote { margin:7px 0 0; font-size:11px; line-height:1.4; }
 }

 @media (max-width:1100px) {
  #app #page[data-screen="dashboard"] .dashboard-secondary { grid-template-columns:minmax(0,1fr); }
  #app #page[data-screen="ranking"] .ranking-controls { grid-template-columns:minmax(0,1fr); gap:8px; }
  #app #page[data-screen="ranking"] .ranking-metrics { padding:2px 4px 4px; }
 }
 @media (max-width:900px) {
  #app #page:is([data-screen="dashboard"],[data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #app #page[data-screen="expenses"] .expense-dashboard-columns { grid-template-columns:minmax(0,1fr); gap:0; }
  #app #page[data-screen="closing"] .finance-columns { grid-template-columns:minmax(0,1fr); gap:0; }
 }
 @media (max-width:700px) {
  #app #page:is([data-screen="dashboard"],[data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .metric { min-height:103px; padding:13px; border-radius:10px; }
  #app #page:is([data-screen="dashboard"],[data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .metric-label { font-size:12px; gap:6px; }
  #app #page:is([data-screen="dashboard"],[data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .metric-value { font-size:22px; line-height:1.25; margin:7px 0 0; }
  #app #page[data-screen="dashboard"] .dashboard-secondary { gap:12px; margin-bottom:14px; }
  #app #page[data-screen="dashboard"] .dashboard-commission { padding:15px; gap:12px; }
  #app #page[data-screen="dashboard"] .commission-heading>.icon { display:none; }
  #app #page[data-screen="dashboard"] .commission-total>strong { font-size:20px; }
  #app #page[data-screen="dashboard"] .two-col { grid-template-columns:minmax(0,1fr); gap:0; }
  #app #page:is([data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .finance-period { display:flex; padding:12px; gap:10px; }
  #app #page:is([data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .finance-period>.field { flex:1 1 160px; width:auto; }
  #app #page:is([data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"]) .finance-period>.period-month:not([hidden]) { flex:1 1 160px; }
  #app #page:is([data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"]) .period-help { flex-basis:100%; font-size:11px; }
  #app #page[data-screen="expenses"] .expense-type-grid { grid-template-columns:minmax(0,1fr); gap:0; }
  #app #page[data-screen="expenses"] .expense-type-details { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:14px 0; padding:12px 0; }
  #app #page[data-screen="expenses"] .expense-type-details>div { display:grid; gap:5px; }
  #app #page[data-screen="expenses"] .variable-expense-type-details { grid-template-columns:minmax(0,1fr); }
  #app #page:is([data-screen="expenses-fixed"],[data-screen="expenses-variable"]) .expense-toolbar { padding:12px; }
  #app #page:is([data-screen="expenses-fixed"],[data-screen="expenses-variable"]) .finance-search { display:flex; gap:8px; }
  #app #page:is([data-screen="expenses-fixed"],[data-screen="expenses-variable"]) .finance-search>input { flex:1 1 160px; min-width:0; }
  #app #page:is([data-screen="expenses-fixed"],[data-screen="expenses-variable"]) .finance-search>.compact-search-details[open] { flex-basis:100%; }
  #app #page[data-screen="expenses-variable"] .variable-expense-list { grid-template-columns:minmax(0,1fr); gap:10px; padding:12px; }
  #app #page[data-screen="expenses-variable"] .variable-expense-card { padding:14px; gap:12px; }
  #app #page[data-screen="expenses-catalogs"] .expense-category-catalog { padding:12px; gap:12px; }
  #app #page[data-screen="ranking"] .ranking-page { gap:12px; }
  #app #page[data-screen="ranking"] .ranking-heading { padding:16px; }
  #app #page[data-screen="ranking"] .ranking-heading h1 { font-size:23px; }
  #app #page[data-screen="ranking"] .ranking-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  #app #page[data-screen="ranking"] .ranking-summary>div { min-height:82px; padding:13px; }
  #app #page[data-screen="ranking"] .ranking-summary>div:last-child:nth-child(odd) { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; min-height:54px; }
  #app #page[data-screen="ranking"] .ranking-summary strong { font-size:21px; }
  #app #page[data-screen="ranking"] .ranking-tabs button { min-height:44px; padding:8px; }
  #app #page[data-screen="ranking"] .ranking-metrics { flex-wrap:wrap; }
  #app #page[data-screen="ranking"] .ranking-metrics button { flex:1 1 80px; min-height:40px; padding:7px; font-size:12px; }
  #app #page[data-screen="ranking"] .ranking-list { padding:0 12px 4px; }
  #app #page[data-screen="ranking"] .ranking-row { grid-template-columns:32px minmax(0,1fr); gap:8px 10px; padding:14px 0; }
  #app #page[data-screen="ranking"] .ranking-position { grid-row:1 / span 2; }
  #app #page[data-screen="ranking"] .ranking-name { font-size:13px; }
  #app #page[data-screen="ranking"] .ranking-values { grid-column:2; gap:6px; }
  #app #page[data-screen="ranking"] .ranking-values>div { padding-left:6px; justify-items:start; }
  #app #page[data-screen="ranking"] .ranking-values>div:first-child { padding-left:0; border-left:0; }
  #app #page[data-screen="ranking"] .ranking-values dt { font-size:10px; }
  #app #page[data-screen="ranking"] .ranking-values dd { font-size:12px; white-space:normal; overflow:visible; text-overflow:clip; text-align:left; }
  #app #page[data-screen="calculator"] #calculator-form { padding:18px; }
  #app #page[data-screen="calculator"] .calculator-fields { gap:15px 12px; }
  #app #page[data-screen="calculator"] .calculator-fields input:is([name="amount"],[name="entry"]) { min-height:50px; font-size:22px; }
 }
 @media (max-width:380px) {
  #app #page:is([data-screen="dashboard"],[data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .metric { padding:11px; }
  #app #page:is([data-screen="dashboard"],[data-screen="expenses"],[data-screen="expenses-fixed"],[data-screen="expenses-variable"],[data-screen="closing"]) .metric-value { font-size:20px; }
  #app #page[data-screen="dashboard"] .dashboard-commission { grid-template-columns:minmax(0,1fr); }
  #app #page[data-screen="dashboard"] .commission-total { display:flex; align-items:baseline; justify-content:space-between; }
  #app #page[data-screen="calculator"] .calculator-fields { grid-template-columns:minmax(0,1fr); }
  #app #page[data-screen="ranking"] .ranking-values { grid-template-columns:minmax(0,1fr); gap:6px; }
  #app #page[data-screen="ranking"] .ranking-values>div { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:0; border:0; }
 }
}