/* ─── THEME TOKENS ───────────────────────────────────────────
     Every color in this app is a CSS custom property. To retheme,
     change values here (and in the dark-theme blocks below) —
     never hardcode a color anywhere else in this file. */
  :root, :root[data-theme="light"] {
    /* Surfaces — matched to the storefront's ink/paper palette */
    --bg: #f5f3ee;
    --bg2: #ffffff;
    --bg3: #f9f7f2;
    --bg4: #ece7db;
    --bg-translucent: rgba(245,243,238,0.92);
    /* Brand accent — storefront lime */
    --amber: #d8ff52;
    --amber2: #c3e83c;
    --amber-dim: rgba(216,255,82,0.18);
    --amber-dim2: rgba(216,255,82,0.09);
    --amber-shadow: rgba(216,255,82,0.4);
    --on-accent: #161714;
    /* Readable foreground version of the accent — the bright lime above
       is for fills/buttons (paired with --on-accent); text/icons/labels
       set directly in this color use this darker, legible variant instead. */
    --amber-text: #b45309;
    /* Ink */
    --text: #161714;
    --text2: #565a52;
    --text3: #6d7068;
    /* Semantic */
    --green: #3f6b34;
    --green-dim: rgba(63,107,52,0.14);
    --warning: #b45309;
    --red: #96402c;
    --red-dim: rgba(150,64,44,0.14);
    --blue: #3f6785;
    --blue-dim: rgba(63,103,133,0.14);
    /* Structure */
    --border: rgba(22,23,20,0.15);
    --border2: rgba(22,23,20,0.26);
    --scrim: rgba(22,23,20,0.55);
    --shadow-color: rgba(22,23,20,0.22);
    --radius: 12px;
    --radius-sm: 8px;
    --nav-h: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --font-serif: 'Source Serif 4', ui-serif, Georgia, serif;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --bg: #161714;
      --bg2: #1e201b;
      --bg3: #22241e;
      --bg4: #2b2e26;
      --bg-translucent: rgba(22,23,20,0.92);
      --amber: #d8ff52;
      --amber2: #e4ff70;
      --amber-dim: rgba(216,255,82,0.18);
      --amber-dim2: rgba(216,255,82,0.09);
      --amber-shadow: rgba(216,255,82,0.4);
      --on-accent: #161714;
      /* Bright lime reads fine as text on this near-black background,
         so no separate darkened variant is needed here (see light theme). */
      --amber-text: #d8ff52;
      --text: #f5f3ee;
      --text2: #b8b6ac;
      --text3: #86847a;
      --green: #74b85f;
      --green-dim: rgba(116,184,95,0.18);
      --warning: #d69a5f;
      --red: #cf8a6c;
      --red-dim: rgba(207,138,108,0.18);
      --blue: #7fa3c2;
      --blue-dim: rgba(127,163,194,0.18);
      --border: rgba(245,243,238,0.10);
      --border2: rgba(245,243,238,0.18);
      --scrim: rgba(10,11,9,0.6);
      --shadow-color: rgba(0,0,0,0.45);
    }
  }
  :root[data-theme="dark"] {
    --bg: #161714;
    --bg2: #1e201b;
    --bg3: #22241e;
    --bg4: #2b2e26;
    --bg-translucent: rgba(22,23,20,0.92);
    --amber: #d8ff52;
    --amber2: #e4ff70;
    --amber-dim: rgba(216,255,82,0.18);
    --amber-dim2: rgba(216,255,82,0.09);
    --amber-shadow: rgba(216,255,82,0.4);
    --on-accent: #161714;
    --amber-text: #d8ff52;
    --text: #f5f3ee;
    --text2: #b8b6ac;
    --text3: #86847a;
    --green: #74b85f;
    --green-dim: rgba(116,184,95,0.18);
    --warning: #d69a5f;
    --red: #cf8a6c;
    --red-dim: rgba(207,138,108,0.18);
    --blue: #7fa3c2;
    --blue-dim: rgba(127,163,194,0.18);
    --border: rgba(245,243,238,0.10);
    --border2: rgba(245,243,238,0.18);
    --scrim: rgba(10,11,9,0.6);
    --shadow-color: rgba(0,0,0,0.45);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; }
  .app { max-width: 430px; margin: 0 auto; min-height: 100vh; position: relative; }
  .mobile-app-bar { display: none; }
  .mobile-app-context { display: none; }
  .desktop-app-mark { display: none; }

  /* Theme-aware logo — pair a .theme-logo-light + .theme-logo-dark img
     for any brand mark so it stays visible against either background. */
  .theme-logo-dark { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-logo-light { display: none; }
    :root:not([data-theme]) .theme-logo-dark { display: block; }
  }
  :root[data-theme="dark"] .theme-logo-light { display: none; }
  :root[data-theme="dark"] .theme-logo-dark { display: block; }
  .official-wordmark { height: auto; object-fit: contain; vertical-align: middle; }
  .official-wordmark-dark { filter: none; }
  /* The supplied horizontal SVG retains its export canvas. Negative vertical
     margins remove only that transparent canvas from layout calculations. */
  .login-wordmark { width: 235px; max-width: 70%; margin: -29px auto -11px; }
  .dash-wordmark { width: 154px; margin-block: -19px; }

  /* NAV */
  .nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--bg-translucent); border-top: 0.5px solid var(--border2); backdrop-filter: blur(20px); display: flex; z-index: 100; padding-bottom: var(--safe-bottom); }
  .nav-brand { display: none; }
  .nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; cursor: pointer; border: none; background: none; color: var(--text3); font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.3px; transition: color 0.15s; }
  .nav-btn.active { color: var(--text); }
  .nav-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
  .nav-btn.active .nav-icon svg path, .nav-btn.active .nav-icon svg rect, .nav-btn.active .nav-icon svg circle { stroke: var(--text); }

  /* PAGES */
  .page { display: none; padding: 0 0 calc(var(--nav-h) + var(--safe-bottom) + 16px); min-height: 100vh; }
  .page.active { display: block; }

  /* HEADER */
  .header { padding: 56px 20px 20px; }
  .header-top { display: flex; align-items: flex-start; justify-content: space-between; }
  .header-label { font-size: 11px; font-weight: 500; letter-spacing: 1.5px; color: var(--text); text-transform: uppercase; margin-bottom: 4px; }
  #dash-header-label { display: flex; align-items: center; gap: 6px; }
  .dash-header-logo { width: 16px; height: 16px; flex-shrink: 0; }
  .header-title { font-size: 26px; font-weight: 600; letter-spacing: -0.5px; font-family: var(--font-serif); }
  .header-subtitle { font-size: 13px; color: var(--text2); margin-top: 2px; }
  .header-action { background: var(--amber); color: var(--on-accent); border: none; border-radius: 50%; width: 36px; height: 36px; font-size: 20px; font-weight: 300; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .header-actions { display: flex; align-items: center; gap: 8px; }
  .header-settings { border: 0.5px solid var(--border2); border-radius: 18px; padding: 9px 13px; background: var(--bg2); color: var(--text2); font: 500 12px 'DM Sans', sans-serif; cursor: pointer; }

  /* CARDS */
  .card { background: var(--bg2); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 0 16px 12px; }
  .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; margin-bottom: 12px; }
  .trend-wrap { padding: 0 16px; margin-bottom: 12px; }
  .trend-card { position: relative; background: var(--bg2); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 14px; height: 240px; }
  .chart-glass-tooltip {
    position: absolute;
    z-index: 6;
    min-width: 168px;
    max-width: calc(100% - 20px);
    padding: 11px 12px;
    border: .5px solid var(--chart-tooltip-border);
    border-radius: 13px;
    background: var(--chart-tooltip-bg);
    color: var(--text);
    box-shadow: 0 14px 34px rgba(38,35,25,.16),inset 0 1px 0 var(--glass-highlight);
    backdrop-filter: blur(30px) saturate(155%);
    -webkit-backdrop-filter: blur(30px) saturate(155%);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%,calc(-100% - 11px));
    transition: opacity .12s ease,transform .12s ease;
  }
  .chart-glass-tooltip.visible { opacity: 1; }
  .chart-glass-tooltip.below { transform: translate(-50%,11px); }
  .chart-glass-tooltip-title { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: -.01em; }
  .chart-glass-tooltip-row { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 7px; min-height: 22px; }
  .chart-glass-tooltip-dot { width: 8px; height: 8px; border-radius: 3px; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.34); }
  .chart-glass-tooltip-label { color: var(--text2); font-size: 11px; font-weight: 550; }
  .chart-glass-tooltip-value { margin-left: 8px; color: var(--text); font: 600 11px 'DM Mono',monospace; letter-spacing: -.025em; white-space: nowrap; }
  .metric-card { background: var(--bg2); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 10px 14px; min-width: 0; }
  .metric-label { font-size: 11px; color: var(--text3); font-weight: 500; letter-spacing: 0.5px; margin-bottom: 3px; }
  .metric-value { font-size: 18px; font-weight: 600; letter-spacing: -0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .metric-value.green { color: var(--green); }
  .metric-value.amber { color: var(--amber-text); }
  .metric-value.red { color: var(--red); }
  .metric-card.hero { grid-column: 1 / -1; background: var(--amber); border: none; padding: 14px 20px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .metric-card.hero .metric-label { color: color-mix(in srgb, var(--on-accent) 75%, transparent); }
  .metric-card.hero .metric-value { color: var(--on-accent); font-family: var(--font-serif); font-size: 26px; letter-spacing: -1px; position: relative; z-index: 1; }
  .metric-card.hero::after { content: ''; position: absolute; width: 130px; height: 130px; right: -20px; top: -20px; background-image: url('assets/brand/logo-final/Icon/tangy-nature-icon-black-corrected.svg'); background-size: contain; background-repeat: no-repeat; opacity: .14; pointer-events: none; }
  .hero-breakdown { display: flex; gap: 18px; position: relative; z-index: 1; flex-wrap: wrap; }
  .hero-stat span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: color-mix(in srgb, var(--on-accent) 70%, transparent); }
  .hero-stat strong { display: block; font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; color: var(--on-accent); margin-top: 3px; }

  /* BALANCES */
  .balance-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .balance-manage-btn, .balance-transfer-btn { height: 36px; padding: 0 13px; border-radius: 18px; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
  .balance-manage-btn { background: var(--bg2); color: var(--text2); border: 0.5px solid var(--border2); }
  .balance-transfer-btn { background: var(--amber); color: var(--on-accent); border: 0.5px solid var(--amber); }
  .balance-controls-row { margin: 0 16px 16px; display: flex; align-items: center; gap: 12px; }
  .balance-controls-row .balance-period-filter { min-width: 0; flex: 1; }
  .balance-controls-row .dash-period-toolbar { margin: 0; padding: 0; }
  .balance-period-panel { margin: 0 16px 16px; }
  .balance-period-label { color: var(--text3); font-size: 10px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; margin-bottom: 9px; }
  .balance-period-panel .tabs { padding: 0; margin-bottom: 8px; max-width: none; }
  .balance-period-panel .tabs:last-child { margin-bottom: 0; }
  .balance-summary { margin: 0 16px 24px; display: grid; grid-template-columns: 1fr; gap: 10px; }
  .balance-period-activity { min-width: 0; display: flex; flex-direction: column; }
  .balance-period-activity-label { margin: 0 2px 7px; color: var(--text3); font-size: 9px; font-weight: 650; letter-spacing: .09em; line-height: 1; text-transform: uppercase; }
  .balance-total-card, .balance-kpi-strip { border-radius: 16px; min-width: 0; }
  .balance-total-card { min-height: 88px; padding: 14px 18px; background: var(--amber); color: var(--on-accent); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
  .balance-total-card::after { content: ''; position: absolute; width: 150px; height: 150px; right: -30px; top: -28px; background: url('assets/brand/logo-final/Icon/tangy-nature-icon-black-corrected.svg') center / contain no-repeat; opacity: .12; pointer-events: none; }
  .balance-kpi-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: .5px solid var(--border); background: color-mix(in srgb,var(--bg2) 78%,transparent); box-shadow: inset 0 1px 0 var(--glass-highlight),0 8px 24px rgba(35,42,29,.045); backdrop-filter: blur(24px) saturate(135%); -webkit-backdrop-filter: blur(24px) saturate(135%); }
  .balance-summary-card { min-width: 0; min-height: 68px; padding: 11px 12px; display: flex; flex-direction: column; justify-content: center; }
  .balance-summary-card + .balance-summary-card { border-left: .5px solid var(--border); }
  .balance-summary-label { color: var(--text3); font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; line-height: 1.4; }
  .balance-total-card .balance-summary-label { margin-top: 7px; color: color-mix(in srgb, var(--on-accent) 72%, transparent); position: relative; z-index: 1; }
  .balance-total-value { font: 600 30px/1 'Source Serif 4', serif; letter-spacing: -1.2px; position: relative; z-index: 1; }
  .balance-activity-icon svg { margin: 0 !important; vertical-align: 0 !important; }
  .balance-summary-value { font: 600 18px/1.15 'DM Mono', monospace; letter-spacing: -.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .balance-summary-card .balance-summary-label { margin-top: 6px; font-size: 9px; letter-spacing: .55px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .balance-summary-value.green { color: var(--green); }
  .balance-summary-value.warning { color: var(--warning); }
  .balance-accounts-title { margin-top: 0; }
  .destination-inactive { opacity: .55; }
  .balance-account-category { display: inline-block; border-radius: 20px; padding: 2px 6px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
  .balance-account-category.source { background: var(--blue-dim); color: var(--blue); }
  .balance-account-category.destination { background: var(--green-dim); color: var(--green); }
  .balance-account-category.intermediate { background: var(--amber-dim); color: var(--amber-text); }
  .balance-account-value-label { color: var(--text3); font-size: 9px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; margin-top: 10px; }
  .balance-account-value { margin-top: 3px; font: 500 22px/1 'DM Mono', monospace; letter-spacing: -.8px; }
  .balance-account-value.negative { color: var(--red); }
  .balance-account-breakdown { margin-top: 10px; padding: 8px 0; border-top: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 6px; }
  .balance-account-breakdown span { display: block; color: var(--text3); font-size: 8px; line-height: 1.25; text-transform: uppercase; letter-spacing: .3px; }
  .balance-account-breakdown strong { display: block; margin-top: 3px; font: 500 10px 'DM Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .balance-account-breakdown strong.negative { color: var(--red); }
  .balance-share-track { height: 4px; background: var(--bg4); border-radius: 4px; overflow: hidden; margin-top: 10px; }
  .balance-share-track span { display: block; height: 100%; background: var(--green); border-radius: inherit; }
  .balance-account-foot { display: flex; justify-content: space-between; gap: 12px; color: var(--text3); font-size: 9.5px; margin-top: 6px; }
  .balance-account-foot span:last-child { text-align: right; }
  .balance-card-actions { display: flex; gap: 6px; margin-top: 10px; }
  .balance-card-actions button { flex: 1; min-width: 0; white-space: nowrap; border: 0; border-radius: 9px; background: var(--bg3); color: var(--text2); padding: 8px 6px; font: 600 10px 'DM Sans', sans-serif; cursor: pointer; }
  .balance-card-actions button:hover { background: var(--bg4); color: var(--text); }
  .destination-manage-balances { display: flex; flex-wrap: wrap; gap: 5px 10px; color: var(--text3); font-size: 10px; margin-top: 7px; }
  .destination-manage-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
  .destination-manage-actions button { border: 0.5px solid var(--border); border-radius: 8px; background: var(--bg3); color: var(--text2); padding: 5px 8px; font: 600 10px 'DM Sans', sans-serif; cursor: pointer; }
  .balance-activity-row { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 10px 0; }
  .balance-activity-row + .balance-activity-row { border-top: 0.5px solid var(--border); }
  .balance-activity-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .balance-activity-icon.release { background: var(--green-dim); color: var(--green); }
  .balance-activity-icon.transfer { background: var(--blue-dim); color: var(--blue); }
  .balance-activity-icon.income { background: var(--amber-dim); color: var(--amber-text); }
  .balance-activity-copy { flex: 1; min-width: 0; }
  .balance-activity-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .balance-activity-meta { color: var(--text3); font-size: 10.5px; line-height: 1.35; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .balance-activity-amount { flex-shrink: 0; font: 500 12.5px 'DM Mono', monospace; }
  .balance-activity-amount.positive { color: var(--green); }
  .balance-activity-trailing { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
  .balance-activity-edit { width: 30px; height: 30px; border: 0.5px solid var(--border); border-radius: 9px; background: var(--bg3); color: var(--text3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .balance-activity-edit:hover { background: var(--bg4); color: var(--text); }
  .balance-empty, .balance-loading { grid-column: 1 / -1; background: var(--bg2); border: 0.5px dashed var(--border2); border-radius: 14px; padding: 32px 20px; text-align: center; color: var(--text3); }
  .balance-empty button { margin-top: 14px; border: 0; border-radius: 10px; padding: 9px 13px; background: var(--amber); color: var(--on-accent); font: 600 12px 'DM Sans', sans-serif; cursor: pointer; }


  /* Dashboard two-column grid — inert on mobile (wrappers disappear via
     display:contents so section order stays exactly as it is on mobile
     today), becomes a real two-column layout at the desktop breakpoint. */
  .dashboard-col-main, .dashboard-col-side { display: contents; }

  /* DESKTOP LAYOUT (sidebar nav + wider pages) ─────────────── */
  @media (min-width: 760px) {
    .app { max-width: 1180px; }
    .page { margin-left: 254px; padding: 0 0 40px; min-height: auto; }
    .header { padding: 28px 28px 18px; }
    #dash-header-label { display: none; }
    .search-wrap, #summary-list, .tabs, [id$="-count"], .list-wrap, .card-grid { max-width: 900px; }
    .app .tabs { padding: 0 28px; }

    .nav { position: fixed; top: 24px; bottom: auto; left: max(24px, calc(50% - 590px)); transform: none;
      width: 220px; max-width: none; height: auto; flex-direction: column; align-items: stretch; gap: 3px;
      padding: 18px 10px; border: 0.5px solid var(--border); border-top: 0.5px solid var(--border); border-radius: 20px;
      box-shadow: 0 18px 46px var(--shadow-color); overflow-x: visible; overflow-y: auto; }
    .nav-brand { display: flex; align-items: center; gap: 8px; padding: 6px 10px 18px; color: var(--text); font-size: 10px; font-weight: 600; letter-spacing: 1.6px; }
    .nav-brand-logo { width: 20px; height: 20px; flex-shrink: 0; }
    .nav-btn { flex: 0; flex-direction: row; justify-content: flex-start; gap: 11px; min-height: 42px; padding: 9px 10px; border-radius: 10px; font-size: 12.5px; }
    .nav-btn.active { background: var(--amber-dim); }
    .nav-icon { width: 19px; height: 19px; }
    .card-grid { padding: 0 28px; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 1fr; max-width: none; }
    .trend-wrap { padding: 0 28px; max-width: none; }
    .metric-card.hero { grid-column: 1; grid-row: 1 / span 3; flex-direction: column; align-items: stretch; justify-content: space-between; }
    .metric-card.hero .metric-value { font-size: 30px; }
    .metric-card.hero .hero-breakdown { flex-direction: column; gap: 10px; border-top: 0.5px solid color-mix(in srgb, var(--on-accent) 20%, transparent); padding-top: 12px; }

    .dashboard-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: stretch; padding: 0 28px; }
    .dashboard-col-main, .dashboard-col-side { display: flex; min-width: 0; flex-direction: column; }
    .dashboard-grid .section-title, .dashboard-grid .list-wrap { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; max-width: none; }
    .dashboard-grid .section-title:first-child { margin-top: 0; }

    .balance-period-panel { margin: 0 28px 18px; }
    .app .balance-period-panel .tabs { padding: 0; }
    .balance-summary { margin: 0 28px 28px; grid-template-columns: minmax(0,1fr); align-items: stretch; }
    .balance-total-card { min-height: 104px; padding: 18px 20px; }
    .balance-total-value { font-size: 34px; }
    .balance-summary-card { min-height: 76px; padding: 12px 15px; }
    #balance-accounts { margin-left: 28px; margin-right: 28px; }
  }

  /* Purchases follows the Catalog control hierarchy: local navigation,
     one aligned query row, then a content-sized filter row. */
  #transactions-subnav .transaction-linked-action { margin-left: 4px; }
  #page-purchases .purchase-query-row .search-wrap,
  #page-purchases .purchase-query-row .dash-period-toolbar {
    margin: 0;
    padding: 0 !important;
  }
  #page-purchases .purchase-query-row .search-input,
  #page-purchases .purchase-query-row .dash-period-step,
  #page-purchases .purchase-query-row .dash-period-picker {
    height: 40px;
    min-height: 40px;
  }

  @media (min-width: 760px) {
    #page-purchases .purchase-filter-panel {
      flex-wrap: wrap;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #page-purchases .purchase-filter-panel > .record-filter-group:not(.record-filter-status-group) {
      flex: 0 1 190px;
      width: 190px;
    }
  }

  @media (min-width: 1180px) {
    #page-purchases .purchase-query-row {
      width: auto;
      max-width: none;
      grid-template-columns: minmax(300px,.8fr) minmax(560px,1.2fr);
      align-items: end;
    }
    #page-purchases .purchase-query-row .dash-period-toolbar {
      width: fit-content;
      max-width: 100%;
      justify-content: flex-start;
    }
    #page-purchases .purchase-query-row .dash-period-navigation { flex: none; }
    #page-purchases .purchase-filter-panel { flex-wrap: nowrap; }
  }

  @media (max-width: 759px) {
    #page-purchases .purchase-query-row { margin: 0 16px 14px; }
    #page-purchases .purchase-query-row .search-wrap { padding: 0 !important; }
    #page-purchases .transaction-period-filter { margin-top: 10px; }
  }

  /* Sales uses the same transaction hierarchy while keeping release status
     permanently visible as a compact operational summary. */
  #sales-transactions-subnav { max-width: none; }
  #sales-transactions-subnav .transaction-linked-action { margin-left: 4px; }
  #page-sales #release-summary {
    width: auto;
    min-width: max-content;
    height: 34px;
    min-height: 34px;
    margin: 0 0 0 auto;
    padding: 2px 4px 2px 10px;
    flex: none;
    grid-template-columns: auto auto auto auto;
    gap: 9px;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 var(--glass-highlight),0 4px 14px rgba(35,42,29,.04);
  }
  #page-sales #release-summary .pending-transfer-heading { font-size: 10.5px; line-height: 1; }
  #page-sales #release-summary .pending-transfer-dot { width: 7px; height: 7px; }
  #page-sales #release-summary .pending-transfer-total { font-size: 12.5px; }
  #page-sales #release-summary .pending-transfer-count { font-size: 9.5px; line-height: 1; }
  #page-sales #release-summary .pending-transfer-action { height: 28px; min-height: 0; padding: 0 9px; line-height: 1; }
  #page-sales .sale-query-row .search-wrap,
  #page-sales .sale-query-row .dash-period-toolbar {
    margin: 0;
    padding: 0 !important;
  }

  /* Expense navigation stays attached to its transaction tabs, while the
     category control remains a compact local filter below the summary. */
  #expenses-transactions-subnav .transaction-linked-action { margin-left: 4px; }

  @media (min-width: 760px) {
    #page-expenses .expense-filter-panel {
      width: fit-content;
      max-width: calc(100% - 68px);
      margin-right: auto;
      padding: 0;
      gap: 8px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #page-expenses .expense-filter-panel .record-filter-status-group { flex: 0 1 auto; }
  }
  #page-sales .sale-query-row .search-input,
  #page-sales .sale-query-row .dash-period-step,
  #page-sales .sale-query-row .dash-period-picker {
    height: 40px;
    min-height: 40px;
  }

  @media (min-width: 760px) {
    #page-sales .sale-filter-panel {
      flex-wrap: wrap;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #page-sales .sale-filter-panel > .record-filter-group:not(.record-filter-status-group) {
      flex: 0 1 190px;
      width: 190px;
    }
  }

  @media (min-width: 1180px) {
    #page-sales .sale-query-row {
      width: auto;
      max-width: none;
      grid-template-columns: minmax(300px,.8fr) minmax(560px,1.2fr);
      align-items: end;
    }
    #page-sales .sale-query-row .dash-period-toolbar {
      width: fit-content;
      max-width: 100%;
      justify-content: flex-start;
    }
    #page-sales .sale-query-row .dash-period-navigation { flex: none; }
    #page-sales .sale-filter-panel { flex-wrap: nowrap; }
  }

  @media (max-width: 759px) {
    #page-sales .sale-query-row { margin: 0 16px 14px; }
    #page-sales .sale-query-row .search-wrap { padding: 0 !important; }
    #page-sales .transaction-period-filter { margin-top: 10px; }
    #page-sales #release-summary .pending-transfer-heading,
    #page-sales #release-summary .pending-transfer-total,
    #page-sales #release-summary .pending-transfer-count,
    #page-sales #release-summary .pending-transfer-action {
      grid-column: auto;
      grid-row: auto;
    }
    #page-sales #release-summary .pending-transfer-action { width: 28px; padding: 0; font-size: 0; }
  }

  /* The catalog search previously inherited the standalone search block's
     reserved bottom gutter. Within the unified toolbar, every field shares
     one exact control baseline and height. */
  #page-sku .catalog-filter-stack .compact-search-wrap {
    margin: 0 !important;
    padding: 0 !important;
  }
  #page-sku .catalog-filter-stack .search-input,
  #page-sku .catalog-filter-primary .record-filter-select-wrap select {
    height: 40px;
    min-height: 40px;
  }

  /* Catalog controls use a deliberate two-level hierarchy: query controls
     first, then the faster product-type switcher. */
  .catalog-filter-stack {
    display: grid;
    grid-template-columns: minmax(260px,1fr) minmax(160px,210px) minmax(160px,210px) auto;
    align-items: end;
    column-gap: 12px;
    row-gap: 11px;
    margin: 0 16px 14px;
  }
  .catalog-mobile-filter-sheet,
  .catalog-filter-primary { display: contents; }
  .catalog-mobile-filter-header,
  .catalog-mobile-filter-footer,
  .catalog-mobile-filter-backdrop,
  .catalog-mobile-filter-trigger,
  .catalog-active-filters { display: none; }
  .catalog-search-filter { grid-column: 1; grid-row: 1; }
  .catalog-availability-filter { grid-column: 2; grid-row: 1; }
  .catalog-brand-filter { grid-column: 3; grid-row: 1; }
  #sku-filter-clear { grid-column: 4; grid-row: 1; }
  .catalog-filter-stack .search-wrap {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .catalog-filter-primary .record-filter-select-wrap { min-width: 0; }
  .catalog-type-filter { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .catalog-type-filter .record-filter-segments { max-width: 100%; }

  @media (min-width: 760px) {
    .catalog-filter-stack { margin-left: 34px; margin-right: 34px; }
    #page-sku .catalog-filter-stack .search-wrap { max-width: none; margin: 0; }
  }

  @media (max-width: 759px) {
    .catalog-filter-stack {
      display: block;
      margin: 8px 16px 10px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .catalog-search-filter > .record-filter-label { display: none; }
    #page-sku .catalog-filter-stack .search-input { height: 42px; min-height: 42px; }
    .catalog-mobile-filter-backdrop {
      position: fixed;
      inset: 0;
      z-index: 224;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      background: rgba(5,8,4,.32);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      display: block;
      transition: opacity .22s ease,visibility .22s ease;
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }
    .catalog-mobile-filter-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; }
    .catalog-mobile-filter-sheet {
      position: fixed;
      left: 50%;
      bottom: 0;
      z-index: 225;
      width: min(100%,520px);
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 10px 16px calc(16px + var(--safe-bottom));
      border: .5px solid var(--border);
      border-bottom: 0;
      border-radius: 24px 24px 0 0;
      background: color-mix(in srgb,var(--popover-surface) 90%,transparent);
      box-shadow: 0 -18px 54px rgba(8,12,7,.18),inset 0 1px 0 var(--glass-highlight);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate(-50%,calc(100% + 24px));
      transition: transform .28s cubic-bezier(.22,.8,.24,1),opacity .2s ease,visibility .28s ease;
      backdrop-filter: blur(48px) saturate(150%);
      -webkit-backdrop-filter: blur(48px) saturate(150%);
    }
    .catalog-mobile-filter-sheet.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%,0); }
    .catalog-mobile-filter-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; order: 0; padding: 2px 2px 1px; }
    .catalog-mobile-filter-header strong { display: block; color: var(--text); font-size: 16px; font-weight: 700; letter-spacing: -.025em; }
    .catalog-mobile-filter-header span:not(.admin-icon) { display: block; margin-top: 2px; color: var(--text3); font-size: 10.5px; }
    .catalog-mobile-filter-close {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      flex: none;
      padding: 0;
      border: .5px solid var(--border);
      border-radius: 50%;
      background: color-mix(in srgb,var(--bg2) 72%,transparent);
      color: var(--text2);
    }
    .catalog-type-filter { grid-column: auto; grid-row: auto; margin: 0; order: 1; }
    .catalog-type-filter .record-filter-mobile-status { display: block; }
    .catalog-filter-primary {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
      gap: 11px 10px;
      order: 2;
    }
    .catalog-availability-filter,
    .catalog-brand-filter,
    #sku-filter-clear { grid-column: auto; grid-row: auto; }
    .catalog-filter-primary .record-filter-clear {
      grid-column: 1 / -1;
      min-height: 32px;
      padding: 0;
      justify-self: start;
    }
    .catalog-mobile-filter-footer { display: block; order: 3; }
    .catalog-mobile-filter-done {
      width: 100%;
      min-height: 44px;
      border: 0;
      border-radius: 14px;
      background: var(--amber);
      color: #10120d;
      font: 700 13px 'DM Sans',sans-serif;
      box-shadow: 0 9px 24px color-mix(in srgb,var(--amber) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.46);
    }
    .catalog-mobile-filter-trigger {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 11px;
      border: .5px solid var(--border);
      border-radius: 11px;
      background: color-mix(in srgb,var(--bg2) 78%,transparent);
      color: var(--text2);
      font: 650 10.5px 'DM Sans',sans-serif;
      box-shadow: inset 0 1px 0 var(--glass-highlight);
    }
    .catalog-mobile-filter-trigger.has-filters { color: var(--text); border-color: color-mix(in srgb,var(--amber) 52%,var(--border)); }
    .catalog-mobile-filter-trigger b {
      min-width: 17px;
      height: 17px;
      display: inline-grid;
      place-items: center;
    }
    .catalog-mobile-filter-trigger b[hidden] { display: none; }
    .catalog-mobile-filter-trigger b:not([hidden]) {
      padding: 0 4px;
      border-radius: 999px;
      background: var(--amber);
      color: #10120d;
      font-size: 8px;
      line-height: 1;
    }
    .catalog-active-filters {
      min-height: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      overflow-x: auto;
      margin: 0 16px;
      padding: 0;
      scrollbar-width: none;
    }
    .catalog-active-filters::-webkit-scrollbar { display: none; }
    .catalog-active-filters.has-filters { margin-bottom: 10px; }
    .catalog-filter-chip {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: none;
      padding: 0 9px;
      border: .5px solid color-mix(in srgb,var(--amber) 42%,var(--border));
      border-radius: 999px;
      background: color-mix(in srgb,var(--amber-dim) 76%,transparent);
      color: var(--text2);
      font: 650 9.5px 'DM Sans',sans-serif;
    }
    .catalog-filter-chip span { color: var(--text3); font-size: 13px; line-height: 1; }
    body.catalog-filter-modal-open { overflow: hidden; }
    #page-sku .page-meta-row { padding-top: 0; }
    #page-sku .page-meta-tools { flex-wrap: nowrap; }

    /* Purchases follows the same mobile control hierarchy as Catalog:
       compact local navigation, high-value reporting controls, then a
       single utility row. Secondary filters live in the glass sheet. */
    #page-purchases .transaction-subnav {
      width: fit-content;
      max-width: calc(100% - 32px);
      min-height: 40px;
      margin: 7px 16px 12px;
      padding: 3px;
      gap: 2px;
      border: .5px solid var(--border);
      border-radius: 14px;
      background: color-mix(in srgb,var(--bg2) 64%,transparent);
      box-shadow: inset 0 1px 0 var(--glass-highlight);
      overflow-x: auto;
    }
    #page-purchases .transaction-subnav .tab {
      height: 34px;
      min-height: 34px;
      padding: 0 13px;
      border: 0;
      border-radius: 11px;
      background: transparent;
      box-shadow: none;
      font-size: 11.5px;
      font-weight: 650;
    }
    #page-purchases .transaction-subnav .tab.active {
      background: var(--amber);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.46),0 4px 13px color-mix(in srgb,var(--amber) 16%,transparent);
    }
    #page-purchases #transactions-subnav > .transaction-linked-action { display: none; }

    #page-purchases .transaction-period-row {
      margin: 0 16px 11px;
    }
    #page-purchases .transaction-period-filter { margin-top: 0; }
    #page-purchases .transaction-summary { margin-bottom: 11px; }
    #page-purchases .transaction-summary-item {
      min-height: 58px;
      padding: 8px 11px;
    }
    #page-purchases .transaction-summary-value { font-size: 16px; }
    #page-purchases .transaction-summary-label { margin-top: 4px; font-size: 8.5px; }
    #page-purchases .transaction-search-row { margin-bottom: 10px; }
    #page-purchases .transaction-search-filter > .record-filter-label { display: none; }
    #page-purchases .transaction-search-row .search-input { height: 42px; min-height: 42px; }

    #page-purchases .purchase-mobile-filter-sheet .catalog-mobile-filter-header { order: 0; }
    #page-purchases .purchase-mobile-filter-sheet .purchase-filter-panel {
      order: 1;
      width: auto;
      max-width: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
      gap: 11px 10px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #page-purchases .purchase-mobile-filter-sheet .record-filter-status-group,
    #page-purchases .purchase-mobile-filter-sheet #purchase-filter-clear { grid-column: 1 / -1; }
    #page-purchases .purchase-mobile-filter-sheet #purchase-filter-clear {
      min-height: 32px;
      padding: 0;
      justify-self: start;
    }
    #page-purchases .purchase-mobile-filter-footer {
      order: 2;
      display: grid;
      grid-template-columns: auto minmax(0,1fr);
      gap: 10px;
    }
    #page-purchases .purchase-mobile-linked-action {
      min-height: 44px;
      padding: 0 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: .5px solid var(--border);
      border-radius: 14px;
      background: color-mix(in srgb,var(--bg2) 74%,transparent);
      color: var(--text2);
      font: 650 11px 'DM Sans',sans-serif;
      box-shadow: inset 0 1px 0 var(--glass-highlight);
    }
    #page-purchases .page-meta-row { padding-top: 0; padding-bottom: 7px; }
    #page-purchases .page-meta-tools { flex-wrap: nowrap; }
    #page-purchases .page-compact-actions .compact-action {
      width: 34px;
      padding: 0;
      font-size: 0;
    }
    #page-purchases .purchase-active-filters.has-filters { margin-bottom: 9px; }

    #page-sales .transaction-subnav,
    #page-expenses .transaction-subnav {
      min-height: 40px;
      margin: 7px 16px 12px;
      padding: 3px;
      gap: 2px;
      border: .5px solid var(--border);
      border-radius: 14px;
      background: color-mix(in srgb,var(--bg2) 64%,transparent);
      box-shadow: inset 0 1px 0 var(--glass-highlight);
      overflow-x: auto;
    }
    #page-sales .transaction-subnav { width: calc(100% - 32px); max-width: none; }
    #page-expenses .transaction-subnav { width: fit-content; max-width: calc(100% - 32px); }
    #page-sales .transaction-subnav .tab,
    #page-expenses .transaction-subnav .tab {
      height: 34px;
      min-height: 34px;
      padding: 0 11px;
      border: 0;
      border-radius: 11px;
      background: transparent;
      box-shadow: none;
      font-size: 11px;
      font-weight: 650;
    }
    #page-sales .transaction-subnav .tab.active,
    #page-expenses .transaction-subnav .tab.active {
      background: var(--amber);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.46),0 4px 13px color-mix(in srgb,var(--amber) 16%,transparent);
    }
    #page-sales #sales-transactions-subnav > .transaction-linked-action,
    #page-expenses #expenses-transactions-subnav > .transaction-linked-action { display: none; }

    #page-sales #release-summary {
      width: auto;
      min-width: 0;
      height: 34px;
      min-height: 34px;
      margin: 0 0 0 auto;
      padding: 2px 4px 2px 8px;
      display: grid;
      grid-template-columns: auto auto auto;
      gap: 6px;
      border-radius: 11px;
    }
    #page-sales #release-summary .pending-transfer-heading { grid-column: auto; grid-row: auto; gap: 0; }
    #page-sales #release-summary .pending-transfer-heading > span:last-child { font-size: 0; }
    #page-sales #release-summary .pending-transfer-heading > span:last-child::after {
      content: 'Pending';
      margin-left: 5px;
      font-size: 9px;
      font-weight: 650;
    }
    #page-sales #release-summary .pending-transfer-count { display: none; }
    #page-sales #release-summary .pending-transfer-total { grid-column: auto; grid-row: auto; font-size: 11px; }
    #page-sales #release-summary .pending-transfer-action { grid-column: auto; grid-row: auto; width: 28px; height: 28px; }

    #page-sales .transaction-period-row,
    #page-expenses .transaction-period-row { margin: 0 16px 11px; }
    #page-sales .transaction-period-filter,
    #page-expenses .transaction-period-filter { margin-top: 0; }
    #page-sales .transaction-summary,
    #page-expenses .transaction-summary { margin-bottom: 11px; }
    #page-sales .transaction-summary-item,
    #page-expenses .transaction-summary-item {
      min-height: 58px;
      padding: 8px 11px;
    }
    #page-sales .transaction-summary-value,
    #page-expenses .transaction-summary-value { font-size: 16px; }
    #page-sales .transaction-summary-label,
    #page-expenses .transaction-summary-label { margin-top: 4px; font-size: 8.5px; }
    #page-sales .transaction-search-row,
    #page-expenses .transaction-search-row { margin-bottom: 10px; }
    #page-sales .transaction-search-filter > .record-filter-label,
    #page-expenses .transaction-search-filter > .record-filter-label { display: none; }
    #page-sales .transaction-search-row .search-input,
    #page-expenses .transaction-search-row .search-input { height: 42px; min-height: 42px; }

    #page-sales .sale-mobile-filter-sheet .catalog-mobile-filter-header,
    #page-expenses .expense-mobile-filter-sheet .catalog-mobile-filter-header { order: 0; }
    #page-sales .sale-mobile-filter-sheet .sale-filter-panel,
    #page-expenses .expense-mobile-filter-sheet .expense-filter-panel {
      order: 1;
      width: auto;
      max-width: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 11px 10px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #page-sales .sale-mobile-filter-sheet .sale-filter-panel { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    #page-expenses .expense-mobile-filter-sheet .expense-filter-panel { grid-template-columns: minmax(0,1fr); }
    #page-sales .sale-mobile-filter-sheet .record-filter-status-group,
    #page-sales .sale-mobile-filter-sheet #sale-filter-clear,
    #page-expenses .expense-mobile-filter-sheet .record-filter-status-group,
    #page-expenses .expense-mobile-filter-sheet #expense-filter-clear { grid-column: 1 / -1; }
    #page-sales .sale-mobile-filter-sheet #sale-filter-clear,
    #page-expenses .expense-mobile-filter-sheet #expense-filter-clear {
      min-height: 32px;
      padding: 0;
      justify-self: start;
    }
    #page-sales .sale-mobile-filter-footer,
    #page-expenses .expense-mobile-filter-footer {
      order: 2;
      display: grid;
      grid-template-columns: auto minmax(0,1fr);
      gap: 10px;
    }
    .transaction-mobile-linked-action {
      min-height: 44px;
      padding: 0 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: .5px solid var(--border);
      border-radius: 14px;
      background: color-mix(in srgb,var(--bg2) 74%,transparent);
      color: var(--text2);
      font: 650 11px 'DM Sans',sans-serif;
      box-shadow: inset 0 1px 0 var(--glass-highlight);
    }
    #page-sales .page-meta-row,
    #page-expenses .page-meta-row { padding-top: 0; padding-bottom: 7px; }
    #page-sales .page-meta-tools,
    #page-expenses .page-meta-tools { flex-wrap: nowrap; }
    #page-sales .sale-active-filters.has-filters,
    #page-expenses .expense-active-filters.has-filters { margin-bottom: 9px; }
  }

  @media (max-width: 390px) {
    .balance-manage-btn { width: 36px; padding: 0; font-size: 0; }
    .balance-manage-btn svg { width: 16px; height: 16px; }
    .balance-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .balance-summary-card { padding: 11px 12px; }
    .balance-summary-card:first-child { grid-column: 1 / -1; border-bottom: .5px solid var(--border); }
    .balance-summary-card:nth-child(2) { border-left: 0; }
    .balance-account-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 6px; }
  }

  /* SECTION */
  .section-title { font-size: 11px; font-weight: 500; letter-spacing: 1.2px; color: var(--text3); text-transform: uppercase; padding: 0 16px; margin-bottom: 10px; margin-top: 20px; }

  /* LIST ITEMS */
  .list-item { background: var(--bg2); border-bottom: 0.5px solid var(--border); padding: 14px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background 0.1s; }
  .list-item:first-child { border-radius: var(--radius) var(--radius) 0 0; }
  .list-item:last-child { border-bottom: none; border-radius: 0 0 var(--radius) var(--radius); }
  .list-item:only-child { border-radius: var(--radius); }
  .list-item:active { background: var(--bg3); }
  .list-wrap { margin: 0 16px 12px; border: 0.5px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .item-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
  .admin-icon { display: inline-block; flex: none; vertical-align: middle; }
  .icon-camera { background: var(--bg4); color: var(--blue); }
  .icon-lens { background: var(--bg4); color: var(--amber-text); }
  .icon-acc { background: var(--bg4); color: var(--green); }
  .icon-drone { background: var(--bg4); color: var(--red); }
  .icon-flash { background: var(--bg4); color: var(--amber-text); }
  .item-body { flex: 1; min-width: 0; }
  .item-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .item-sub { font-size: 12px; color: var(--text2); margin-top: 2px; }
  .item-right { text-align: right; flex-shrink: 0; }
  .item-amount { font-size: 15px; font-weight: 600; font-family: 'DM Mono', monospace; }
  .item-amount.green { color: var(--green); }
  .item-amount.red { color: var(--red); }
  .item-amount.amber { color: var(--amber-text); }
  .item-badge { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 20px; margin-top: 4px; display: inline-block; }
  .badge-sold { background: var(--green-dim); color: var(--green); }
  .badge-unsold { background: var(--amber-dim); color: var(--amber-text); }
  .badge-camera { background: var(--blue-dim); color: var(--blue); }
  .badge-lens { background: var(--amber-dim); color: var(--amber-text); }
  .badge-acc { background: var(--green-dim); color: var(--green); }

  /* MODAL / SHEET */
  .sheet-overlay { position: fixed; inset: 0; background: var(--scrim); z-index: 200; display: none; backdrop-filter: blur(4px); }
  .sheet-overlay.open { display: block; }
  .sheet { position: fixed; bottom: 0; left: 50%; transform: translate(-50%, 100%); width: 100%; max-width: 430px; background: var(--bg2); border-radius: 20px 20px 0 0; z-index: 201; padding: 0 0 calc(var(--safe-bottom) + 20px); max-height: 92vh; overflow-y: auto; transition: transform 0.3s ease; }
  .sheet-handle { width: 36px; height: 4px; background: var(--bg4); border-radius: 2px; margin: 12px auto 0; }
  .sheet-header { padding: 16px 20px 12px; display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; border-bottom: 0.5px solid var(--border); }
  .sheet-title { font-size: 17px; font-weight: 500; line-height: 1.35; font-family: var(--font-serif); }
  .sheet-close { background: var(--bg4); border: none; color: var(--text2); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .sheet-body { padding: 20px; }

  /* FORMS */
  .form-group { margin-bottom: 16px; }
  .form-label { font-size: 12px; font-weight: 500; color: var(--text2); letter-spacing: 0.3px; margin-bottom: 6px; display: block; }
  .form-input, .form-select, .form-textarea { width: 100%; background: var(--bg3); border: 0.5px solid var(--border2); border-radius: var(--radius-sm); padding: 11px 14px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 15px; outline: none; transition: border-color 0.15s; -webkit-appearance: none; }
  .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--amber); }
  .form-select option { background: var(--bg3); }
  .form-textarea { resize: none; min-height: 80px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .form-hint { font-size: 11px; color: var(--text3); margin-top: 4px; }

  /* MARKETPLACE IMAGE ORGANIZER */
  .listing-image-manager { display: grid; gap: 8px; margin-top: 12px; }
  .listing-image-empty { border: 0.5px dashed var(--border2); border-radius: var(--radius-sm); padding: 18px; text-align: center; color: var(--text3); font-size: 12px; }
  .listing-image-row { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 10px; align-items: center; background: var(--bg3); border: 0.5px solid var(--border); border-radius: 10px; padding: 7px; cursor: grab; }
  .listing-image-row.dragging { opacity: 0.42; }
  .listing-image-row.drag-over { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
  .listing-image-preview { width: 54px; height: 54px; border-radius: 7px; background: var(--bg2); object-fit: contain; }
  .listing-image-meta { min-width: 0; }
  .listing-cover-choice { display: flex; align-items: center; gap: 7px; color: var(--text2); font-size: 11px; cursor: pointer; }
  .listing-cover-choice input { accent-color: var(--amber); }
  .listing-image-name { margin-top: 5px; color: var(--text3); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .listing-image-actions { display: flex; gap: 4px; }
  .listing-image-actions button { width: 28px; height: 28px; display: grid; place-items: center; border: 0.5px solid var(--border2); border-radius: 7px; background: var(--bg2); color: var(--text2); cursor: pointer; }
  .listing-image-actions button:disabled { opacity: 0.3; cursor: default; }
  .listing-image-actions .remove { color: var(--red); }
  .listing-image-advanced { margin-top: 10px; }
  .listing-image-advanced summary { color: var(--text3); font-size: 11px; cursor: pointer; }
  .listing-image-advanced .form-textarea { margin-top: 7px; min-height: 64px; font-size: 11px; }
  #listing-sheet { overflow: hidden; padding-bottom: 0; display: flex; flex-direction: column; }
  #listing-sheet .sheet-handle, #listing-sheet .sheet-header, #listing-sheet .listing-savebar { flex: none; }
  #listing-sheet .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 22px; }
  .listing-sheet-subtitle { margin-top: 2px; color: var(--text3); font-size: 11px; }
  .listing-form-section + .listing-form-section { margin-top: 24px; padding-top: 20px; border-top: .5px solid var(--border); }
  .listing-section-title { color: var(--text3); font-size: 10px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
  .listing-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
  .listing-section-note { margin-top: 3px; color: var(--text3); font-size: 10.5px; }
  .listing-form-section > .listing-section-title { margin-bottom: 13px; }
  .listing-form-section .form-group:last-child { margin-bottom: 0; }
  .listing-value-row .form-group { margin-bottom: 16px; }
  .listing-input-affix { position: relative; }
  .listing-input-affix > span { position: absolute; left: 13px; top: 50%; z-index: 1; transform: translateY(-50%); color: var(--text3); font: 500 14px 'DM Mono',monospace; pointer-events: none; }
  .listing-input-affix .form-input { padding-left: 28px; font-family: 'DM Mono',monospace !important; }
  .listing-input-affix.suffix > span { left: auto; right: 13px; }
  .listing-input-affix.suffix .form-input { padding-left: 14px; padding-right: 46px; }
  .listing-description { min-height: 94px; line-height: 1.45; }
  .listing-inventory-select.is-locked { color: var(--text2); border-color: var(--border); background: color-mix(in srgb,var(--bg3) 64%,transparent); opacity: 1; }
  .listing-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
  .listing-add-photos { min-height: 32px; padding: 0 12px; border: .5px solid var(--border2); border-radius: 10px; background: var(--bg2); color: var(--text); font-size: 11px; font-weight: 650; cursor: pointer; box-shadow: inset 0 1px 0 var(--glass-highlight); }
  .listing-upload-selection { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; padding: 9px 10px 9px 12px; border-radius: 11px; background: var(--amber-dim); color: var(--text2); font-size: 10.5px; }
  .listing-upload-selection[hidden] { display: none; }
  .listing-upload-btn { min-height: 30px; padding: 0 11px; border: 0; border-radius: 9px; background: var(--amber); color: var(--on-accent); display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; cursor: pointer; }
  .listing-upload-btn:disabled { opacity: .65; cursor: wait; }
  .listing-image-manager { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 0; }
  .listing-image-empty { grid-column: 1 / -1; }
  .listing-image-row { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 8px 6px; padding: 7px; border-radius: 13px; cursor: grab; }
  .listing-image-preview { grid-column: 1 / -1; width: 100%; height: 112px; border-radius: 9px; }
  .listing-image-meta { align-self: center; }
  .listing-cover-choice { gap: 5px; font-size: 10px; font-weight: 600; }
  .listing-cover-choice input { width: 15px; height: 15px; flex: none; }
  .listing-image-name { display: none; }
  .listing-image-actions { gap: 3px; }
  .listing-image-actions button { width: 26px; height: 26px; border-color: var(--border); border-radius: 8px; background: transparent; font-size: 13px; }
  .listing-image-actions button:not(:disabled):hover { background: var(--bg4); }
  .listing-image-advanced { margin-top: 12px; }
  .listing-photo-hint { margin-top: 9px; }
  .listing-publishing { padding-bottom: 2px; }
  .listing-featured-control { min-height: 58px; padding: 11px 12px; border: .5px solid var(--border); border-radius: 12px; background: color-mix(in srgb,var(--bg3) 72%,transparent); display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
  .listing-featured-control span { min-width: 0; }
  .listing-featured-control strong { display: block; color: var(--text); font-size: 12px; font-weight: 600; }
  .listing-featured-control small { display: block; margin-top: 2px; color: var(--text3); font-size: 9.5px; line-height: 1.35; }
  .listing-featured-control input { position: absolute; opacity: 0; pointer-events: none; }
  .listing-featured-control i { width: 38px; height: 22px; padding: 2px; border-radius: 999px; background: var(--bg4); box-shadow: inset 0 0 0 .5px var(--border2); flex: none; transition: background .18s ease; }
  .listing-featured-control i::after { content: ''; display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--bg2); box-shadow: 0 1px 4px rgba(22,23,20,.2); transition: transform .18s ease; }
  .listing-featured-control input:checked + i { background: var(--amber); }
  .listing-featured-control input:checked + i::after { transform: translateX(16px); }
  .listing-featured-control input:focus-visible + i { outline: 3px solid var(--amber-dim); outline-offset: 2px; }
  .listing-savebar { padding: 11px 20px calc(var(--safe-bottom) + var(--browser-toolbar-clearance,0px) + 12px); border-top: .5px solid var(--border); background: var(--popover-surface,var(--bg2)); box-shadow: 0 -10px 28px rgba(22,23,20,.055); backdrop-filter: blur(36px) saturate(140%); -webkit-backdrop-filter: blur(36px) saturate(140%); }
  .listing-savebar .btn { min-height: 44px; padding: 11px 14px; border-radius: 12px; }

  /* SKU EDITOR */
  #sku-sheet { background: color-mix(in srgb,var(--bg2) 96%,transparent); }
  #sku-sheet .sheet-handle, #sku-sheet .sheet-header, #sku-sheet .sku-savebar { flex: none; }
  .sku-sheet-header { align-items: center; padding-top: 13px; padding-bottom: 13px; }
  .sku-sheet-subtitle { margin-top: 2px; color: var(--text3); font-size: 10.5px; line-height: 1.35; }
  #sku-sheet .sku-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px 22px; background: transparent; }
  .sku-form-section { margin: 0; }
  .sku-section-title { margin-bottom: 13px; color: var(--text3); font-size: 10px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
  .sku-form-section .form-group { margin-bottom: 14px; }
  .sku-form-section .form-input, .sku-form-section .form-select { min-height: 44px; padding: 10px 13px; background: color-mix(in srgb,var(--bg3) 88%,transparent); }
  .sku-form-section > .form-group:last-child, .sku-extra-details .form-row:last-child .form-group { margin-bottom: 0; }
  .sku-details-toggle { width: 100%; min-height: 55px; margin: 18px 0 0; padding: 9px 12px 9px 13px; border: .5px solid var(--border); border-radius: 12px; background: color-mix(in srgb,var(--bg3) 56%,transparent); color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; cursor: pointer; box-shadow: inset 0 1px 0 var(--glass-highlight); transition: background .16s ease,border-color .16s ease; }
  .sku-details-toggle:hover { background: color-mix(in srgb,var(--bg3) 82%,transparent); }
  .sku-details-toggle span { min-width: 0; }
  .sku-details-toggle strong { display: block; font-size: 12px; font-weight: 600; }
  .sku-details-toggle small { display: block; margin-top: 2px; color: var(--text3); font-size: 9.5px; line-height: 1.3; }
  .sku-details-toggle svg { flex: none; color: var(--text3); transition: transform .18s ease; }
  .sku-details-toggle.open svg { transform: rotate(90deg); }
  .sku-extra-details { margin-top: 18px; padding-top: 18px; border-top: .5px solid var(--border); }
  .sku-savebar { padding: 10px 20px calc(var(--safe-bottom) + var(--browser-toolbar-clearance,0px) + 11px); border-top: .5px solid var(--border); background: color-mix(in srgb,var(--popover-surface) 95%,transparent); box-shadow: 0 -8px 24px rgba(22,23,20,.045); backdrop-filter: blur(36px) saturate(135%); -webkit-backdrop-filter: blur(36px) saturate(135%); }
  .sku-savebar .btn { min-height: 44px; padding: 10px 14px; border-radius: 12px; }
  .homepage-crop-stage { width: 220px; height: 220px; margin: 0 auto 14px; border-radius: 50%; overflow: hidden; background: #fff; border: 0.5px solid var(--border); position: relative; cursor: grab; touch-action: none; }
  .homepage-crop-stage.dragging { cursor: grabbing; }
  .homepage-crop-stage img { position: absolute; top: 50%; left: 50%; max-width: none; max-height: none; user-select: none; -webkit-user-drag: none; transform-origin: center center; }
  .homepage-crop-controls { display: flex; align-items: center; gap: 10px; max-width: 220px; margin: 0 auto 12px; padding: 8px 0; }
  .homepage-crop-controls input[type=range] { flex: 1; accent-color: var(--amber); -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: var(--border2); }
  .homepage-crop-controls input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--amber); border: 2px solid var(--bg2); box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; }
  .homepage-crop-controls input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--amber); border: 2px solid var(--bg2); box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; }
  .homepage-crop-zoom-label { font-size: 18px; font-weight: 600; color: var(--text2); line-height: 1; flex-shrink: 0; width: 16px; text-align: center; }
  input[type=file] { width: 100%; font-size: 13px; color: var(--text2); }
  input[type=file]::file-selector-button { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); background: var(--bg4); border: 0.5px solid var(--border2); border-radius: 999px; padding: 8px 14px; margin-right: 10px; cursor: pointer; transition: background 0.15s; }
  input[type=file]::file-selector-button:hover { background: var(--border2); }

  /* BUTTONS */
  .btn { width: 100%; padding: 14px; border-radius: var(--radius); border: none; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s, transform 0.1s; }
  .btn:active { transform: scale(0.98); }
  .btn-primary { background: var(--amber); color: var(--on-accent); }
  .btn-secondary { background: var(--bg4); color: var(--text); }
  .btn-danger { background: var(--red-dim); color: var(--red); border: 0.5px solid var(--red); }
  .btn-row { display: flex; gap: 10px; }
  .btn-row .btn { flex: 1; }

  /* EMPTY STATE */
  .empty { text-align: center; padding: 48px 24px; }
  .empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; }
  .empty-text { font-size: 15px; color: var(--text2); }
  .empty-sub { font-size: 13px; color: var(--text3); margin-top: 4px; }

  /* SEARCH */
  .search-wrap { padding: 0 16px 12px; }
  .search-input { width: 100%; background: var(--bg2); border: 0.5px solid var(--border2); border-radius: 10px; padding: 10px 14px 10px 38px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px; outline: none; }
  .search-input:focus { border-color: var(--amber); }
  .search-wrap-inner { position: relative; }
  .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text3); font-size: 14px; pointer-events: none; }

  /* TABS */
  .tabs { display: flex; gap: 8px; padding: 0 16px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 6px 14px; border-radius: 20px; border: 0.5px solid var(--border); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; background: var(--bg2); color: var(--text2); transition: all 0.15s; }
  .tab.active { background: var(--amber); color: var(--on-accent); border-color: var(--amber); }
  .transaction-subnav { align-items: center; }
  .transaction-subnav .tab {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 34px;
  }
  .transaction-linked-action {
    min-width: 34px;
    min-height: 32px;
    margin-left: auto;
    padding: 0 11px;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: .5px solid var(--border);
    border-radius: 11px;
    background: color-mix(in srgb,var(--bg2) 76%,transparent);
    color: var(--text2);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
  }
  .transaction-linked-action:hover { color: var(--text); background: var(--bg2); }
  .transaction-linked-action:active { transform: scale(.97); }

  /* RECORD FILTERS — contextual controls, not loose tag pills */
  .record-filter-panel {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin: 0 16px 14px;
    padding: 11px 12px;
    border: .5px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb,var(--bg2) 62%,transparent);
    box-shadow: inset 0 1px 0 var(--glass-highlight),0 7px 24px rgba(35,42,29,.035);
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
  }
  .record-filter-group { min-width: 0; }
  .record-filter-panel > .record-filter-group:not(.record-filter-status-group) { flex: 0 1 220px; width: 220px; }
  .record-filter-status-group { flex: 1 1 auto; }
  .record-filter-label {
    display: block;
    margin: 0 0 6px 3px;
    color: var(--text3);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
  }
  .record-filter-segments {
    display: inline-flex;
    max-width: 100%;
    padding: 3px;
    border: .5px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb,var(--bg3) 68%,transparent);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .record-filter-segments::-webkit-scrollbar { display: none; }
  .record-filter-segment {
    min-height: 34px;
    padding: 0 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 11.5px 'DM Sans',sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
  }
  .record-filter-segment:hover { color: var(--text); background: color-mix(in srgb,var(--bg2) 70%,transparent); }
  .record-filter-segment:active { transform: scale(.98); }
  .record-filter-segment.active {
    background: var(--amber);
    color: var(--on-accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5),0 3px 10px rgba(130,155,35,.14);
  }
  .record-filter-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: color-mix(in srgb,var(--text2) 9%,transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: 9px;
    font-weight: 650;
  }
  .record-filter-segment.active .record-filter-count { background: color-mix(in srgb,var(--on-accent) 11%,transparent); }
  .record-filter-select-wrap { position: relative; min-width: 150px; }
  .record-filter-select-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--text3);
    border-bottom: 1.5px solid var(--text3);
    transform: translateY(-68%) rotate(45deg);
    pointer-events: none;
  }
  .record-filter-select-wrap select {
    width: 100%;
    min-height: 40px;
    padding: 0 34px 0 12px;
    border: .5px solid var(--border2);
    border-radius: 12px;
    appearance: none;
    -webkit-appearance: none;
    background: color-mix(in srgb,var(--bg2) 80%,transparent);
    color: var(--text);
    font: 600 12px 'DM Sans',sans-serif;
    cursor: pointer;
    outline: none;
    box-shadow: inset 0 1px 0 var(--glass-highlight);
  }
  .record-filter-select-wrap select:hover { background: var(--bg2); }
  .record-filter-select-wrap select:focus-visible,
  .record-filter-segment:focus-visible,
  .record-filter-clear:focus-visible { outline: 3px solid color-mix(in srgb,var(--amber) 56%,transparent); outline-offset: 2px; }
  .record-filter-mobile-status { display: none; }
  .record-filter-clear {
    min-height: 40px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--text3);
    font: 600 11px 'DM Sans',sans-serif;
    white-space: nowrap;
    cursor: pointer;
  }
  .record-filter-clear:hover { color: var(--text); }
  .record-filter-clear:disabled { color: var(--text3); opacity: .42; cursor: default; }
  .record-filter-clear:disabled:hover { color: var(--text3); }

  .pending-transfer-card {
    width: auto;
    min-height: 66px;
    margin: 0 16px 14px;
    padding: 12px 14px;
    border: .5px solid color-mix(in srgb,var(--amber) 62%,var(--border));
    border-radius: 16px;
    background: color-mix(in srgb,var(--bg2) 76%,transparent);
    display: grid;
    grid-template-columns: minmax(150px,1fr) auto auto auto;
    align-items: center;
    gap: 20px;
    box-shadow: inset 0 1px 0 var(--glass-highlight),0 8px 24px rgba(35,42,29,.045);
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
  }
  .pending-transfer-heading { display: flex; align-items: center; gap: 9px; color: var(--text); font-size: 12px; font-weight: 650; }
  .pending-transfer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-text); box-shadow: 0 0 0 4px color-mix(in srgb,var(--amber) 16%,transparent); }
  .pending-transfer-total { color: var(--green); font: 650 19px/1 'DM Mono',monospace; white-space: nowrap; }
  .pending-transfer-count { margin: 0; color: var(--text3); font-size: 11px; white-space: nowrap; }
  .pending-transfer-action { min-height: 36px; padding: 0 12px; border: .5px solid var(--border); border-radius: 11px; background: color-mix(in srgb,var(--bg2) 78%,transparent); color: var(--text); display: inline-flex; align-items: center; gap: 5px; font: 600 11px 'DM Sans',sans-serif; cursor: pointer; box-shadow: inset 0 1px 0 var(--glass-highlight); }
  .pending-transfer-action:hover { background: var(--bg2); }
  .pending-transfer-action.active { background: var(--amber-dim); border-color: color-mix(in srgb,var(--amber) 58%,var(--border)); }
  .pending-transfer-action:disabled { opacity: .38; cursor: default; }
  .pending-transfer-card.is-clear { border-color: var(--border); }
  .pending-transfer-card.is-clear .pending-transfer-dot { background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb,var(--green) 12%,transparent); }

  .transaction-period-row,
  .transaction-search-row {
    margin: 0 16px 14px;
  }
  .transaction-period-row { width: fit-content; max-width: calc(100% - 32px); }
  .transaction-period-row .dash-period-toolbar,
  .transaction-search-row .search-wrap { margin: 0; padding: 0 !important; }
  .transaction-search-row { width: min(760px,calc(100% - 32px)); }
  .transaction-summary { margin: 0 16px 14px; }
  .transaction-summary-panel {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    border: .5px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb,var(--bg2) 72%,transparent);
    overflow: hidden;
    box-shadow: inset 0 1px 0 var(--glass-highlight),0 8px 26px rgba(35,42,29,.045);
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
  }
  .transaction-summary-item {
    min-width: 0;
    min-height: 76px;
    padding: 11px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .transaction-summary-item + .transaction-summary-item { border-left: .5px solid var(--border); }
  .transaction-summary-item.is-primary { background: color-mix(in srgb,var(--amber-dim) 25%,transparent); }
  .purchase-summary-panel .transaction-summary-item.is-primary { background: color-mix(in srgb,var(--blue-dim) 32%,transparent); }
  .sale-summary-panel .transaction-summary-item.is-primary { background: color-mix(in srgb,var(--green-dim) 32%,transparent); }
  .expense-summary-panel .transaction-summary-item.is-primary { background: color-mix(in srgb,var(--red-dim) 30%,transparent); }
  .transaction-summary-value {
    color: var(--text);
    font: 650 20px/1.05 'DM Mono',monospace;
    letter-spacing: -.035em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .purchase-summary-panel .is-primary .transaction-summary-value { color: var(--blue); }
  .sale-summary-panel .is-primary .transaction-summary-value,
  .transaction-summary-positive { color: var(--green); }
  .transaction-summary-warning { color: var(--warning); }
  .transaction-summary-negative { color: var(--red); }
  .expense-summary-panel .is-primary .transaction-summary-value { color: var(--red); }
  .transaction-summary-accent { color: var(--amber-text); }
  .transaction-summary-label {
    margin-top: 6px;
    color: var(--text3);
    font-size: 9.5px;
    font-weight: 650;
    letter-spacing: .09em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  #exp-metrics { display: block; }
  .expense-summary-panel {
    display: grid;
    grid-template-columns: repeat(4,minmax(145px,1fr));
    border: .5px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb,var(--bg2) 72%,transparent);
    overflow: hidden;
    box-shadow: inset 0 1px 0 var(--glass-highlight),0 8px 26px rgba(35,42,29,.045);
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
  }
  .expense-summary-primary,
  .expense-summary-stat { min-width: 0; min-height: 76px; padding: 11px 15px; display: flex; flex-direction: column; justify-content: center; }
  .expense-summary-primary { background: color-mix(in srgb,var(--amber-dim) 32%,transparent); }
  .expense-summary-panel > * + * { border-left: .5px solid var(--border); }
  .expense-summary-label { color: var(--text3); font-size: 9.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
  .expense-summary-total,
  .expense-summary-value { color: var(--text); font: 650 20px/1.05 'DM Mono',monospace; letter-spacing: -.035em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .expense-summary-total { color: var(--red); font-size: 24px; }
  .expense-summary-panel .expense-summary-label { margin-top: 6px; }
  .expense-summary-number { color: var(--amber-text); }

  @media (min-width: 760px) {
    .transaction-period-row,
    .transaction-search-row,
    .transaction-summary { margin-left: 34px; margin-right: 34px; }
    .transaction-period-row { max-width: calc(100% - 68px); }
    .transaction-search-row { width: min(760px,calc(100% - 68px)); }
    .record-filter-panel { margin-left: 34px; margin-right: 34px; }
    .transaction-query-row .search-wrap { width: auto; max-width: 760px !important; margin: 0 34px; padding: 0 0 12px; }
    .compact-search-wrap { width: auto; max-width: 760px !important; margin: 0 34px; padding: 0 0 12px; }
    .transaction-filter-panel,
    .compact-filter-panel { width: fit-content; max-width: calc(100% - 68px); margin-right: auto; gap: 12px; }
    .transaction-filter-panel .record-filter-status-group,
    .compact-filter-panel .record-filter-status-group { flex: 0 1 auto; }
    .transaction-filter-panel > .record-filter-group:not(.record-filter-status-group),
    .compact-filter-panel > .record-filter-group:not(.record-filter-status-group) { flex: 0 0 220px; }
    .pending-transfer-card { margin-left: 34px; margin-right: 34px; }
    #page-sales .search-wrap,
    #page-purchases .search-wrap,
    #page-sku .search-wrap,
    #page-linked .search-wrap,
    #page-summary .search-wrap,
    #page-marketplace .search-wrap { max-width: none; }
  }
  @media (min-width: 1180px) {
    .transaction-query-row {
      width: calc(100% - 68px);
      max-width: 1260px;
      margin: 0 34px 14px;
      display: grid;
      grid-template-columns: minmax(280px, .8fr) minmax(520px, 1.2fr);
      align-items: center;
      gap: 18px;
    }
    .transaction-query-row .search-wrap { width: auto; max-width: none !important; margin: 0; padding: 0; }
    .transaction-query-row .dash-period-toolbar { margin: 0; padding: 0; }
  }
  @media (max-width: 759px) {
    .transaction-summary-panel { grid-template-columns: repeat(2,minmax(0,1fr)); border-radius: 16px; }
    .transaction-summary-item { min-height: 66px; padding: 10px 12px; }
    .transaction-summary-item + .transaction-summary-item { border-left: 0; }
    .transaction-summary-item:nth-child(even) { border-left: .5px solid var(--border); }
    .transaction-summary-item:nth-child(n+3) { border-top: .5px solid var(--border); }
    .transaction-summary-value { font-size: 17px; }
    .record-filter-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; padding: 12px; }
    .record-filter-panel > .record-filter-group:not(.record-filter-status-group) { width: auto; }
    .balance-summary-card .balance-summary-label { overflow: visible; line-height: 1.25; text-overflow: clip; white-space: normal; }
    .record-filter-segments { display: none; }
    .record-filter-mobile-status { display: block; }
    .record-filter-select-wrap { min-width: 0; }
    .record-filter-select-wrap select { min-height: 42px; font-size: 12.5px; }
    .record-filter-clear { grid-column: 1 / -1; min-height: 28px; padding: 0 4px; justify-self: start; }
    .pending-transfer-card { grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 12px 13px; }
    .pending-transfer-heading { grid-column: 1; grid-row: 1; }
    .pending-transfer-total { grid-column: 1; grid-row: 2; }
    .pending-transfer-count { grid-column: 1; grid-row: 3; }
    .pending-transfer-action { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
    .expense-summary-panel { grid-template-columns: repeat(2,minmax(0,1fr)); border-radius: 16px; }
    .expense-summary-primary,
    .expense-summary-stat { min-height: 66px; padding: 10px 12px; }
    .expense-summary-panel > * + * { border-left: 0; }
    .expense-summary-panel > *:nth-child(even) { border-left: .5px solid var(--border); }
    .expense-summary-panel > *:nth-child(n+3) { border-top: .5px solid var(--border); }
    .expense-summary-total { font-size: 22px; }
    .expense-summary-value { font-size: 16px; }
    .expense-filter-panel { grid-template-columns: minmax(0,1fr) auto; align-items: end; }
    .expense-filter-panel .record-filter-clear { grid-column: 2; grid-row: 1; min-height: 42px; padding: 0 8px; align-self: end; }
    .single-filter-panel { grid-template-columns: minmax(0,1fr) auto; align-items: end; }
    .single-filter-panel .record-filter-clear { grid-column: 2; grid-row: 1; min-height: 42px; padding: 0 8px; align-self: end; }
  }

  /* PROFIT BAR */
  .profit-bar { background: var(--bg3); border-radius: 4px; height: 4px; overflow: hidden; margin-top: 6px; }
  .profit-fill { height: 100%; border-radius: 4px; background: var(--green); transition: width 0.3s; }

  /* DIVIDER */
  .divider { height: 0.5px; background: var(--border); margin: 0 16px; }

  /* TOAST */
  .toast { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); background: var(--bg3); border: 0.5px solid var(--border2); border-radius: var(--radius); padding: 10px 18px; font-size: 14px; font-weight: 500; z-index: 300; display: none; white-space: nowrap; }
  .toast.show { display: block; animation: fadeInOut 2s ease forwards; }
  @keyframes fadeInOut { 0%{opacity:0;transform:translateX(-50%) translateY(-8px)} 15%{opacity:1;transform:translateX(-50%) translateY(0)} 75%{opacity:1} 100%{opacity:0} }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* DETAIL VIEW */
  .detail-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 0.5px solid var(--border); }
  .detail-row:last-child { border-bottom: none; }
  .detail-key { font-size: 13px; color: var(--text2); }
  .detail-val { font-size: 13px; font-weight: 500; text-align: right; max-width: 60%; }
  .mono { font-family: 'DM Mono', monospace; }

  .pwa-banner { background: var(--amber-dim); border: 0.5px solid var(--amber); border-radius: var(--radius); padding: 12px 16px; margin: 0 16px 16px; font-size: 13px; color: var(--amber-text); display: flex; gap: 10px; align-items: flex-start; }

  /* ─── MACOS 27-INSPIRED APPLICATION SHELL ───────────────────
     Speculative layered glass, system typography and restrained depth.
     Tangy Nature's lime remains the only primary accent. */
  :root, :root[data-theme="light"] {
    --bg: #f5f3ee; --bg2: rgba(255,254,249,.60); --bg3: rgba(249,247,240,.64); --bg4: rgba(82,76,55,.075);
    --bg-translucent: rgba(247,245,238,.82); --border: rgba(37,34,25,.095); --border2: rgba(37,34,25,.16);
    --shadow-color: rgba(30,38,22,.13); --radius: 18px; --radius-sm: 12px;
    --font-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
    --glass-highlight: rgba(255,255,252,.86); --glass-shadow: 0 18px 55px rgba(49,44,30,.09), 0 2px 8px rgba(49,44,30,.05);
    --nav-active-dot: #4f6b28;
    --nav-surface: rgba(250,249,243,.76);
    --popover-surface: rgba(251,250,244,.82);
    --login-surface: rgba(251,250,244,.72);
    --sheet-surface: rgba(248,248,239,.70);
    --chart-tooltip-bg: rgba(255,254,249,.76);
    --chart-tooltip-border: rgba(37,34,25,.20);
    --scrim: rgba(22,23,20,.32);
    --browser-toolbar-clearance: 0px;
  }
  :root[data-theme="dark"] {
    --bg: #0f120e; --bg2: rgba(31,35,29,.64); --bg3: rgba(38,42,35,.68); --bg4: rgba(255,255,255,.075);
    --bg-translucent: rgba(22,25,20,.74); --border: rgba(255,255,255,.085); --border2: rgba(255,255,255,.15);
    --shadow-color: rgba(0,0,0,.42); --glass-highlight: rgba(255,255,255,.08); --glass-shadow: 0 22px 65px rgba(0,0,0,.36), 0 2px 10px rgba(0,0,0,.22);
    --nav-active-dot: #d8ff52;
    --nav-surface: rgba(25,28,23,.82);
    --popover-surface: rgba(31,35,29,.86);
    --login-surface: rgba(31,35,29,.76);
    --sheet-surface: rgba(31,35,29,.72);
    --chart-tooltip-bg: rgba(31,35,29,.80);
    --chart-tooltip-border: rgba(245,243,238,.18);
    --browser-toolbar-clearance: 0px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --bg: #0f120e; --bg2: rgba(31,35,29,.64); --bg3: rgba(38,42,35,.68); --bg4: rgba(255,255,255,.075);
      --bg-translucent: rgba(22,25,20,.74); --border: rgba(255,255,255,.085); --border2: rgba(255,255,255,.15);
      --shadow-color: rgba(0,0,0,.42); --glass-highlight: rgba(255,255,255,.08); --glass-shadow: 0 22px 65px rgba(0,0,0,.36), 0 2px 10px rgba(0,0,0,.22);
      --nav-active-dot: #d8ff52;
      --nav-surface: rgba(25,28,23,.82);
      --popover-surface: rgba(31,35,29,.86);
      --login-surface: rgba(31,35,29,.76);
      --sheet-surface: rgba(31,35,29,.72);
      --chart-tooltip-bg: rgba(31,35,29,.80);
      --chart-tooltip-border: rgba(245,243,238,.18);
      --browser-toolbar-clearance: 0px;
    }
  }
  html { background: var(--bg); }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    background: radial-gradient(circle at 12% 8%, rgba(216,255,82,.20), transparent 28rem), radial-gradient(circle at 92% 92%, rgba(187,199,129,.13), transparent 32rem), var(--bg);
    background-attachment: fixed; letter-spacing: -.01em;
  }
  .page {
    position: relative;
    background-color: transparent;
    background-image:
      radial-gradient(circle at 8% 4%,rgba(216,255,82,.14),transparent 24rem),
      radial-gradient(circle at 96% 42%,rgba(196,213,128,.10),transparent 26rem);
    background-repeat: no-repeat;
    background-size: 100% min(560px,62vh);
  }
  /* Insights' dense translucent filter/table stack visually absorbs more of
     the shared top glow. Restore the missing lime contribution so its rendered
     header matches Transactions rather than falling back to the olive base. */
  #page-summary {
    background-image:
      radial-gradient(circle at 8% 4%,rgba(216,255,82,.26),transparent 24rem),
      radial-gradient(circle at 96% 42%,rgba(196,213,128,.10),transparent 26rem);
  }
  button, input, select, textarea { font-family: inherit !important; }
  button, .tab, .list-item { -webkit-user-select: none; user-select: none; }
  button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--amber) 56%, transparent); outline-offset: 2px; }
  .nav-section-label { display: none; }

  .card, .metric-card, .trend-card, .list-wrap, .balance-summary-card, .balance-period-panel, #release-summary, .pwa-banner {
    background-color: color-mix(in srgb,var(--bg2) 78%,transparent);
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 8px 28px rgba(35,42,29,.055);
    backdrop-filter: blur(34px) saturate(145%); -webkit-backdrop-filter: blur(34px) saturate(145%);
  }
  .metric-card, .trend-card, .card, .list-wrap { border-color: var(--border); }
  .header-title { font-family: var(--font-serif); font-weight: 650; letter-spacing: -.045em; }
  .header-label { color: var(--text3); font-weight: 650; letter-spacing: .09em; }
  .dashboard-heading { min-width: 0; flex: 1; }
  .dashboard-title-block {
    width: 100%;
    min-width: 0;
  }
  .header-action, .balance-transfer-btn, #log-btn { box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 6px 18px rgba(156,185,45,.22); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
  .dashboard-actions, .dashboard-primary-actions, .dashboard-utility-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .page > .header .header-label,
  .page > .header .header-title { display: none; }
  .page > .header .header-subtitle { margin-top: 0; }
  .quote-action { box-shadow: inset 0 1px 0 var(--glass-highlight); transition: transform .18s ease, background .18s ease, color .18s ease; }
  .quote-action:hover { background: var(--bg3) !important; color: var(--text) !important; transform: translateY(-1px); }
  .quote-action:active { transform: scale(.97); }
  .header-action:hover, .balance-transfer-btn:hover, #log-btn:hover { transform: translateY(-1px); filter: brightness(1.015); }
  .header-action:active, .balance-transfer-btn:active, #log-btn:active { transform: scale(.97); }
  .search-input { min-height: 42px; background: color-mix(in srgb, var(--bg2) 88%, transparent); box-shadow: inset 0 1px 1px rgba(0,0,0,.025), 0 1px 0 var(--glass-highlight); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
  .search-input:focus { background: var(--bg2); border-color: color-mix(in srgb, var(--amber) 70%, var(--border2)); box-shadow: 0 0 0 3px var(--amber-dim); }
  .tabs { gap: 6px; }
  .tab { background: color-mix(in srgb, var(--bg2) 74%, transparent); border-color: transparent; box-shadow: inset 0 0 0 .5px var(--border); transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease; }
  .tab:hover { background: var(--bg2); color: var(--text); }
  .tab.active { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 10px rgba(130,155,35,.13); }
  .list-item { background: transparent; transition: background .15s ease, transform .15s ease; }
  .list-item:hover { background: color-mix(in srgb, var(--bg4) 72%, transparent); }
  .item-icon { border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.32); }
  .metric-value, .item-amount { letter-spacing: -.035em; }
  .dashboard-list-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
  .dashboard-list-heading .section-title { margin:0; }
  .dashboard-view-all { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:.5px solid var(--border); border-radius:999px; background:color-mix(in srgb,var(--bg2) 72%,transparent); color:var(--text2); font-size:10.5px; font-weight:650; cursor:pointer; }
  .dashboard-view-all:hover { color:var(--text); background:var(--bg2); }
  .dashboard-view-all span { font-size:16px; line-height:.7; }
  .dashboard-preview-list { flex:1; overflow:hidden !important; }
  .dashboard-preview-list .list-item { height:100px; min-height:100px; box-sizing:border-box; }
  .dashboard-cost-label { margin-bottom:1px; color:var(--text3); font-size:8.5px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
  .dashboard-age { margin-top:2px; color:var(--text3); font-size:9.5px; font-weight:600; white-space:nowrap; }
  .dashboard-age.is-fresh { color:var(--green); }
  .dashboard-age.is-aging { color:var(--amber-text); }
  .dashboard-age.is-stale { color:var(--red); }
  .dashboard-recent-row { align-items:flex-start; padding:12px 14px; }
  .dashboard-recent-row .item-icon { margin-top:2px; }
  .recent-sale-financials { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 7px; padding-top: 7px; border-top: .5px solid var(--border); }
  .recent-sale-stat { min-width: 0; padding: 0 8px; }
  .recent-sale-stat:first-child { padding-left: 0; }
  .recent-sale-stat:last-child { padding-right: 0; }
  .recent-sale-stat + .recent-sale-stat { border-left: .5px solid var(--border); }
  .recent-sale-stat-label { margin-bottom: 3px; color: var(--text3); font-size: 9px; font-weight: 650; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
  .recent-sale-stat-value { overflow: hidden; color: var(--text); font: 600 12px/1.35 'DM Mono',monospace; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
  .recent-sale-stat-value.cost { color: var(--text2); }
  .recent-sale-stat-value.positive { color: var(--green); }
  .recent-sale-stat-value.negative { color: var(--red); }
  .trend-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  .trend-heading .section-title { padding: 0; margin: 0; }
  .trend-mode-toggle { display: inline-grid; grid-template-columns: repeat(2,1fr); padding: 2px; border: .5px solid var(--border); border-radius: 9px; background: color-mix(in srgb,var(--bg3) 88%,transparent); box-shadow: inset 0 1px 2px rgba(22,23,20,.035); }
  .trend-mode-toggle button { min-width: 54px; height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text3); font-size: 10.5px; font-weight: 600; line-height: 1; cursor: pointer; transition: background .16s ease,color .16s ease,box-shadow .16s ease; }
  .trend-mode-toggle button:hover { color: var(--text); }
  .trend-mode-toggle button.active { background: var(--bg2); color: var(--text); box-shadow: 0 1px 4px rgba(22,23,20,.12),inset 0 1px 0 var(--glass-highlight); }
  .metric-card.hero, .balance-total-card { background: linear-gradient(135deg,#d8ff52 0%,#c9f13d 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 12px 30px rgba(146,176,34,.2); }
  .sheet-overlay { backdrop-filter: blur(3px) saturate(108%); -webkit-backdrop-filter: blur(3px) saturate(108%); }
  .sheet {
    background: linear-gradient(145deg,rgba(255,255,252,.20),rgba(216,255,82,.025)),var(--sheet-surface);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    backdrop-filter: blur(48px) saturate(150%);
    -webkit-backdrop-filter: blur(48px) saturate(150%);
  }
  .sheet-overlay.open + .sheet { box-shadow: 0 -20px 70px rgba(0,0,0,.22); }
  .form-input, .form-select, .form-textarea { background: color-mix(in srgb, var(--bg3) 84%, transparent); min-height: 42px; }
  .form-input:focus, .form-select:focus, .form-textarea:focus { box-shadow: 0 0 0 3px var(--amber-dim); }
  .toast { background: color-mix(in srgb,var(--popover-surface) 88%,transparent); box-shadow: var(--glass-shadow); backdrop-filter: blur(32px) saturate(160%); -webkit-backdrop-filter: blur(32px) saturate(160%); }
  #user-menu, #log-menu {
    background: var(--popover-surface) !important;
    box-shadow: 0 18px 48px rgba(25,31,21,.18), inset 0 1px 0 var(--glass-highlight) !important;
    backdrop-filter: blur(48px) saturate(125%);
    -webkit-backdrop-filter: blur(48px) saturate(125%);
    isolation: isolate;
  }

  #login-screen { background: transparent !important; }
  #login-screen > div { border: .5px solid var(--border2) !important; border-radius: 26px !important; background: var(--login-surface) !important; box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight); backdrop-filter: blur(40px) saturate(160%); -webkit-backdrop-filter: blur(40px) saturate(160%); }
  #login-screen input { min-height: 46px; border-radius: 12px !important; }
  #login-btn { min-height: 46px; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 24px rgba(145,176,34,.22); }
  .login-theme-toggle {
    position: absolute;
    top: max(18px,calc(env(safe-area-inset-top) + 10px));
    right: max(18px,calc(env(safe-area-inset-right) + 18px));
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    border: .5px solid var(--border2);
    border-radius: 50%;
    background: color-mix(in srgb,var(--popover-surface) 78%,transparent);
    color: var(--text2);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 9px 24px rgba(38,35,25,.11),inset 0 1px 0 var(--glass-highlight);
    backdrop-filter: blur(26px) saturate(145%);
    -webkit-backdrop-filter: blur(26px) saturate(145%);
    transition: color .16s ease,background .16s ease,transform .16s ease;
  }
  .login-theme-toggle:hover { color: var(--text); background: color-mix(in srgb,var(--popover-surface) 90%,transparent); }
  .login-theme-toggle:active { transform: scale(.94); }
  .login-theme-toggle svg { width: 16px; height: 16px; }
  #global-loader {
    background: color-mix(in srgb,var(--bg-translucent) 78%,transparent) !important;
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
  }
  #sku-dropdown {
    background: color-mix(in srgb,var(--popover-surface) 86%,transparent) !important;
    border-color: var(--border) !important;
    box-shadow: 0 16px 38px rgba(38,35,25,.15),inset 0 1px 0 var(--glass-highlight) !important;
    backdrop-filter: blur(34px) saturate(145%);
    -webkit-backdrop-filter: blur(34px) saturate(145%);
    isolation: isolate;
  }
  .ptr-indicator {
    border: .5px solid var(--border2);
    background: color-mix(in srgb,var(--popover-surface) 84%,transparent);
    box-shadow: 0 9px 24px rgba(38,35,25,.15),inset 0 1px 0 var(--glass-highlight);
    backdrop-filter: blur(28px) saturate(145%);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
  }

  @media (min-width: 760px) {
    body { padding: 18px; overflow: hidden; }
    .app { max-width: 1380px; height: calc(100vh - 36px); min-height: 560px; margin: 0 auto; border: .5px solid var(--border2); border-radius: 28px; background: color-mix(in srgb,var(--bg-translucent) 84%,transparent); box-shadow: 0 28px 72px rgba(29,35,24,.14), 0 6px 18px rgba(29,35,24,.07), inset 0 1px 0 var(--glass-highlight); overflow: hidden; backdrop-filter: blur(28px) saturate(135%); -webkit-backdrop-filter: blur(28px) saturate(135%); }
    .page { margin-left: 258px; height: 100%; padding: 0 0 48px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: auto; }
    .header { padding: 34px 34px 22px; }
    .header-title { font-size: 34px; } .header-subtitle { font-size: 13px; margin-top: 5px; }
    .header-action { width: 38px; height: 38px; border-radius: 12px; }
    .header-settings, .balance-manage-btn { background: color-mix(in srgb,var(--bg2) 80%,transparent); box-shadow: inset 0 1px 0 var(--glass-highlight); }
    .nav { position: absolute; top: 0; bottom: 0; left: 0; transform: none; width: 258px; max-width: none; height: auto !important; border: 0; border-right: .5px solid var(--border); border-radius: 0; box-shadow: none; background: color-mix(in srgb,var(--bg3) 55%,transparent); padding: 24px 12px 14px; overflow-y: auto !important; overflow-x: hidden !important; backdrop-filter: blur(36px) saturate(145%); -webkit-backdrop-filter: blur(36px) saturate(145%); }
    .nav-brand { display: none; }
    .nav-brand-logo { width: 178px; height: auto; }
    .nav-section-label { display: block; padding: 5px 11px 8px; color: var(--text3); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    #nav-dashboard { margin-top: 27px; }
    .nav-btn { min-height: 40px; gap: 10px; margin-bottom: 2px; padding: 8px 10px; border-radius: 11px; color: color-mix(in srgb,var(--text2) 88%,var(--text3)); font-size: 12.5px; font-weight: 520; }
    .nav-btn:hover { color: var(--text); background: color-mix(in srgb,var(--bg4) 70%,transparent); }
    .nav-btn.active { width: calc(100% - 6px); align-self: flex-start; color: var(--text); background: var(--amber-dim); box-shadow: inset 0 0 0 .5px color-mix(in srgb,var(--amber) 32%,transparent); }
    .nav-btn.active::after { content: ''; width: 6px; height: 6px; margin-right: 3px; margin-left: auto; border-radius: 50%; background: var(--nav-active-dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nav-active-dot) 16%, transparent); }
    .nav-icon { width: 20px; height: 20px; }
    .card-grid { padding: 0 34px; gap: 12px; grid-template-columns: minmax(210px,1.18fr) repeat(2,minmax(150px,1fr)); }
    .metric-card { min-height: 86px; padding: 16px 17px; } .metric-label { font-size: 10px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; } .metric-value { margin-top: 6px; font-size: 22px; }
    .metric-card.hero { border-radius: 20px; padding: 20px; } .metric-card.hero .metric-value { font-size: 34px; }
    .trend-wrap { padding: 0 34px; } .trend-card { height: 310px; padding: 18px; }
    .dashboard-grid { padding: 0 34px; gap: 14px; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .section-title { font-size: 10px; font-weight: 650; letter-spacing: .09em; } .list-wrap { border-radius: 18px; } .list-item { padding: 13px 15px; }
    .search-wrap { padding: 0 34px 13px; } .app > .page > .tabs { padding-left: 34px; padding-right: 34px; }
    .app > .page > [id$="-count"] { padding-left: 34px !important; padding-right: 34px !important; }
    .page > .list-wrap { margin-left: 34px; margin-right: 34px; max-width: none; } #summary-list { padding-left: 34px !important; padding-right: 34px !important; max-width: none; }
    .balance-controls-row { margin-right: 34px; margin-left: 34px; }
    .balance-period-panel { margin-left: 34px; margin-right: 34px; padding: 14px; border: .5px solid var(--border); border-radius: 18px; background: color-mix(in srgb,var(--bg2) 58%,transparent); }
    .balance-summary { margin-left: 34px; margin-right: 34px; gap: 12px; } #balance-accounts { margin-left: 34px; margin-right: 34px; }
    .balance-accounts-title { padding-right: 34px; padding-left: 34px; }
    .sheet { max-width: 520px; left: calc(50% + 129px); border: .5px solid var(--border2); border-bottom: 0; border-radius: 24px 24px 0 0; }
  }

  @media (max-width: 759px) {
    /* Vertical anchor matches .app's own top glow below (both pushed off
       the status-bar/app-bar strip so Safari/Chrome's flat theme-color
       fill doesn't visibly seam against a brighter gradient hot-spot
       right under it) — .app sits on top with a transparent background,
       so this one shows straight through unless it's kept in sync. */
    body { background: radial-gradient(circle at 12% 20%,rgba(216,255,82,.18),transparent 24rem),radial-gradient(circle at 92% 92%,rgba(187,199,129,.12),transparent 28rem),var(--bg); } .app { max-width: 520px; }
    #login-screen { background: radial-gradient(circle at 0% 8%, rgba(216,255,82,.22), transparent 22rem), radial-gradient(circle at 100% 92%, rgba(187,199,129,.14), transparent 26rem), var(--bg) !important; }
    .header { padding-top: max(36px,calc(env(safe-area-inset-top) + 20px)); } .header-title { font-size: 28px; }
    #page-dashboard .header { padding-left: 20px; padding-right: 20px; padding-bottom: 18px; }
    .dashboard-header-top { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px 12px; }
    .dashboard-heading, .dashboard-actions { display: contents; }
    #dash-header-label { grid-column: 1; grid-row: 1; margin: 0; }
    .dash-wordmark { width: 176px; margin-block: -22px; }
    .dashboard-utility-actions { grid-column: 2; grid-row: 1; justify-self: end; }
    .dashboard-title-block { grid-column: 1; grid-row: 2; min-width: 0; }
    .dashboard-primary-actions { grid-column: 2; grid-row: 2; justify-self: end; }
    .dashboard-title-block .header-title { line-height: 1.04; letter-spacing: -.035em; }
    #page-balances .balance-controls-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; margin: 0 16px 16px; }
    #page-balances .balance-header-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 0; }
    #page-balances .balance-manage-btn, #page-balances .balance-transfer-btn { width: 100%; height: 42px; padding: 0 14px; border-radius: 14px; font-size: 13px; }
    #page-balances .balance-manage-btn svg { width: 15px; height: 15px; }
    #page-balances .balance-controls-row .dash-period-toolbar { padding: 0; }
    #page-balances .balance-period-panel { margin: 0 16px 20px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    #page-balances .balance-period-label { padding: 0 2px; margin-bottom: 10px; }
    .page { padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--browser-toolbar-clearance) + 26px); }
    .nav { width: calc(100% - 24px); max-width: 496px; bottom: calc(10px + var(--safe-bottom) + var(--browser-toolbar-clearance)); background: var(--nav-surface); border: .5px solid var(--border2); border-radius: 22px; padding: 5px 6px; box-shadow: 0 14px 44px rgba(25,31,21,.18), inset 0 1px 0 var(--glass-highlight); backdrop-filter: blur(48px) saturate(135%); -webkit-backdrop-filter: blur(48px) saturate(135%); overflow: hidden !important; }
    .nav-btn { min-width: 0; min-height: 50px; padding: 7px 3px 5px; border-radius: 16px; } .nav-btn.active { background: var(--amber-dim); color: var(--text); }
    .nav-btn.active .nav-icon { transform: translateY(-1px); } .nav-icon { transition: transform .16s ease; }
    .metric-card, .trend-card, .card, .list-wrap { border-radius: 16px; } .card-grid { gap: 9px; } .metric-card { padding: 13px 14px; } .metric-card.hero { border-radius: 19px; } .sheet { border-radius: 26px 26px 0 0; }
  }
  @supports (-webkit-touch-callout: none) {
    @media (max-width: 759px) {
      :root { --browser-toolbar-clearance: 24px; }
      .nav { width: 100%; max-width: none; bottom: calc(var(--safe-bottom) + var(--browser-toolbar-clearance)); border-left: 0; border-right: 0; border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 32px rgba(25,31,21,.12), inset 0 1px 0 var(--glass-highlight); }
    }
    @media (max-width: 759px) and (display-mode: standalone) {
      :root { --browser-toolbar-clearance: 0px; }
      .nav { width: calc(100% - 24px); max-width: 496px; bottom: calc(10px + var(--safe-bottom)); border: .5px solid var(--border2); border-radius: 22px; box-shadow: 0 14px 44px rgba(25,31,21,.18), inset 0 1px 0 var(--glass-highlight); }
    }
  }
  @media (max-width: 360px) { .quote-action { width: 32px; padding: 0 !important; justify-content: center; } .quote-action span { display: none; } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

  /* ─── ADMIN DESIGN-SYSTEM CONSOLIDATION ─────────────────── */
  .header-actions { display: flex; align-items: center; gap: 8px; }
  .header-utility, .compact-action {
    border: .5px solid var(--border);
    background: color-mix(in srgb,var(--bg2) 78%,transparent);
    color: var(--text2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    transition: color .16s ease,background .16s ease,transform .16s ease;
  }
  .header-utility { min-height: 36px; padding: 0 12px; border-radius: 12px; font-size: 11.5px; }
  .compact-action { min-height: 30px; padding: 0 10px; border-radius: 9px; font-size: 10.5px; }
  .header-utility:hover, .compact-action:hover { color: var(--text); background: var(--bg2); }
  .header-utility:active, .compact-action:active { transform: scale(.97); }
  .header-action svg, .header-utility svg, .compact-action svg, .header-settings svg { flex: none; }
  .header-settings { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; padding: 0 12px; }
  .page-meta-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 0 16px 8px; }
  .page-count { min-width: 0; color: var(--text3); font-size: 11px; }
  .page-meta-tools { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
  .catalog-view-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 34px;
    padding: 2px;
    border: .5px solid var(--border);
    border-radius: 11px;
    background: color-mix(in srgb,var(--bg3) 76%,transparent);
    box-shadow: inset 0 1px 1px rgba(22,23,20,.035),0 1px 0 var(--glass-highlight);
  }
  .catalog-view-switch button {
    min-height: 29px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text3);
    font: 650 10.5px 'DM Sans',sans-serif;
    cursor: pointer;
  }
  .catalog-view-switch button.active {
    background: color-mix(in srgb,var(--bg2) 90%,transparent);
    color: var(--text);
    box-shadow: 0 2px 7px rgba(25,31,21,.08),inset 0 1px 0 var(--glass-highlight);
  }
  .catalog-view-panel[hidden] { display: none !important; }
  .page-compact-actions { display: flex; gap: 6px; flex: none; }
  .page-sort-row { display: flex; align-items: center; gap: 9px; padding: 0 16px 10px; }
  .page-sort-row label { flex: none; color: var(--text3); font-size: 10.5px; }
  .sort-select { flex: 1; min-height: 34px; padding: 0 32px 0 11px; border: .5px solid var(--border); border-radius: 10px; background: color-mix(in srgb,var(--bg2) 78%,transparent); color: var(--text); font-size: 11.5px; cursor: pointer; -webkit-appearance: none; appearance: none; }
  .page-sort-control { position: relative; display: inline-flex; align-items: center; gap: 7px; color: var(--text3); font-size: 9px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
  .page-sort-control::after { content: ''; position: absolute; right: 11px; top: 50%; width: 5px; height: 5px; border-right: 1.5px solid var(--text3); border-bottom: 1.5px solid var(--text3); transform: translateY(-72%) rotate(45deg); pointer-events: none; }
  .page-sort-control .sort-select { flex: none; width: 142px; min-height: 32px; padding-left: 10px; font: 600 10.5px 'DM Sans',sans-serif; text-transform: none; letter-spacing: 0; box-shadow: inset 0 1px 0 var(--glass-highlight); }

  .sheet { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
  .sheet:focus { outline: none; }
  .sheet-handle, .sheet-header { flex: none; }
  .sheet-header { border-bottom-color: transparent; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sheet-handle { background: color-mix(in srgb,var(--text3) 34%,transparent); }
  .sheet-title { color: var(--text); font-family: inherit; font-size: 16px; font-weight: 650; letter-spacing: -.025em; }
  .sheet-subtitle, .sheet-header .sheet-title + div { margin-top: 3px; color: var(--text3); font-size: 10.5px; line-height: 1.35; }
  .sheet-close { width: 30px; height: 30px; background: color-mix(in srgb,var(--bg4) 72%,transparent); border: .5px solid var(--border); transition: background .16s ease,color .16s ease,transform .16s ease; }
  .sheet-close:hover { background: var(--bg4); color: var(--text); }
  .sheet-close:active { transform: scale(.94); }
  .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(var(--safe-bottom) + var(--browser-toolbar-clearance,0px) + 20px); }
  .form-group { margin-bottom: 15px; }
  .form-label { color: var(--text3); font-size: 10.5px; font-weight: 650; letter-spacing: .025em; }
  .form-hint { color: var(--text3); font-size: 10px; line-height: 1.45; }
  .form-input, .form-select, .form-textarea { border-color: var(--border); border-radius: 11px; background: color-mix(in srgb,var(--bg2) 91%,var(--amber-dim) 9%); box-shadow: inset 0 1px 1px rgba(22,23,20,.025),0 1px 0 var(--glass-highlight); }
  .form-input:disabled, .form-select:disabled { opacity: 1; color: var(--text2); background: color-mix(in srgb,var(--bg3) 62%,transparent); }
  .form-textarea { line-height: 1.45; }
  input[type="checkbox"] { accent-color: var(--amber); }
  .form-segment { display: flex; gap: 2px; margin-bottom: 8px; padding: 2px; border: .5px solid var(--border); border-radius: 10px; background: color-mix(in srgb,var(--bg3) 88%,transparent); box-shadow: inset 0 1px 2px rgba(22,23,20,.035); }
  .form-segment-button {
    flex: 1 !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text3) !important;
    box-shadow: none !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
  }
  .form-segment-button.active { background: var(--bg2) !important; color: var(--text) !important; box-shadow: 0 1px 5px rgba(22,23,20,.11),inset 0 1px 0 var(--glass-highlight) !important; }
  .form-segment-button.active-blue { background: var(--blue-dim) !important; color: var(--blue) !important; box-shadow: inset 0 0 0 .5px color-mix(in srgb,var(--blue) 45%,transparent) !important; }
  #purchase-tax-mode-auto, #purchase-tax-mode-pct, #purchase-tax-mode-amt, #purchase-tax-mode-none,
  #sale-tax-mode-auto, #sale-tax-mode-pct, #sale-tax-mode-amt, #sale-tax-mode-none,
  #sale-fee-mode-auto, #sale-fee-mode-manual, #sale-fee-mode-none,
  #expense-tax-mode-auto, #expense-tax-mode-pct, #expense-tax-mode-amt, #expense-tax-mode-none,
  #acq-cash, #acq-trade, #sale-type-cash, #sale-type-trade, #te-cash, #te-trade { min-width: 0; }
  #purchase-tax-mode-auto, #sale-tax-mode-auto, #expense-tax-mode-auto,
  #acq-cash, #sale-type-cash, #te-cash { margin-left: 2px; }
  #purchase-tax-mode-none, #sale-tax-mode-none, #expense-tax-mode-none,
  #sale-fee-mode-none, #acq-trade, #sale-type-trade, #te-trade { margin-right: 2px; }
  #purchase-tax-readout, #sale-tax-readout, #sale-fee-readout, #expense-tax-readout {
    border-color: var(--border) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb,var(--bg3) 68%,transparent) !important;
    color: var(--text2) !important;
    font-size: 11.5px !important;
    line-height: 1.4;
  }
  #purchase-sheet .card, #sale-sheet .card, #expense-sheet .card { border-color: var(--border); background: color-mix(in srgb,var(--bg3) 54%,transparent); box-shadow: inset 0 1px 0 var(--glass-highlight); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .detail-row { min-height: 35px; }
  .detail-key { color: var(--text3); font-size: 10.5px; }
  .detail-val { font-size: 11.5px; }
  .btn { min-height: 42px; border-radius: 11px; font-size: 12px; }
  .btn-secondary { border: .5px solid var(--border); background: color-mix(in srgb,var(--bg3) 78%,transparent); color: var(--text2); box-shadow: inset 0 1px 0 var(--glass-highlight); }
  .btn-danger { border-color: color-mix(in srgb,var(--red) 48%,transparent); background: var(--red-dim); }
  #homepage-sheet > .sheet-body > .btn-row:last-child,
  #purchase-sheet > .sheet-body > .btn-row:last-child,
  #sale-sheet > .sheet-body > .btn-row:last-child,
  #sale-trades-sheet > .sheet-body > .btn-row:last-child,
  #expense-sheet > .sheet-body > .btn-row:last-child,
  #password-sheet > .sheet-body > .btn-row:last-child,
  #release-sheet > .sheet-body > .btn-row:last-child,
  #transfer-sheet > .sheet-body > .btn-row:last-child,
  #income-sheet > .sheet-body > .btn-row:last-child,
  #destinations-sheet > .sheet-body > .btn-row:last-child,
  #shiplabel-sheet > .sheet-body > .btn-row:last-child {
    position: sticky;
    z-index: 5;
    bottom: calc(0px - var(--safe-bottom) - var(--browser-toolbar-clearance,0px) - 20px);
    margin: 18px -20px calc(0px - var(--safe-bottom) - var(--browser-toolbar-clearance,0px) - 20px);
    padding: 11px 20px calc(var(--safe-bottom) + var(--browser-toolbar-clearance,0px) + 12px);
    border-top: .5px solid var(--border);
    background: color-mix(in srgb,var(--sheet-surface) 94%,transparent);
    box-shadow: 0 -10px 28px rgba(22,23,20,.055);
    backdrop-filter: blur(36px) saturate(135%);
    -webkit-backdrop-filter: blur(36px) saturate(135%);
  }
  .homepage-file-actions { min-height: 48px; padding: 8px; border: .5px solid var(--border); border-radius: 12px; background: color-mix(in srgb,var(--bg3) 68%,transparent); display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; }
  .homepage-file-actions > span { overflow: hidden; color: var(--text3); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .homepage-file-actions .listing-upload-btn { min-height: 32px; }
  .empty { padding: 42px 24px; }
  .empty-icon { color: var(--text3); opacity: .7; }
  .empty-text { color: var(--text2); font-size: 13px; font-weight: 600; }
  .empty-sub { color: var(--text3); font-size: 11px; }
  .insight-card { border: .5px solid var(--border) !important; background: color-mix(in srgb,var(--bg2) 86%,transparent) !important; box-shadow: inset 0 1px 0 var(--glass-highlight),0 8px 28px rgba(35,42,29,.045); backdrop-filter: blur(24px) saturate(135%); -webkit-backdrop-filter: blur(24px) saturate(135%); }

  /* Linked Records is a traceability ledger rather than a stack of cards. */
  .linked-query-row {
    margin: 0 16px 12px;
    display: grid;
    grid-template-columns: auto minmax(0,760px) minmax(150px,190px);
    align-items: end;
    gap: 10px;
  }
  .linked-query-row .search-wrap { margin: 0; padding: 0 !important; }
  .linked-query-row .search-input,
  .linked-back-action,
  .linked-sort-control .sort-select { box-sizing: border-box; height: 42px; min-height: 42px; }
  .linked-back-action {
    height: 42px;
    padding: 0 12px;
    border: .5px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb,var(--bg2) 76%,transparent);
    color: var(--text2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: 600 11px 'DM Sans',sans-serif;
    cursor: pointer;
    box-shadow: inset 0 1px 0 var(--glass-highlight);
  }
  .linked-back-action:hover { color: var(--text); background: var(--bg2); }
  .linked-sort-control { align-self: end; display: block; }
  .linked-sort-control > span { display: block; margin: 0 0 6px 3px; line-height: 1; }
  .linked-sort-control .sort-select { width: 100%; font-size: 11px; }
  .linked-sort-control.page-sort-control::after { top: auto; bottom: 18px; }
  .linked-filter-panel { width: fit-content; }
  .linked-filter-panel .linked-type-filter { width: 190px; flex: 0 0 190px; }
  .linked-list { margin: 0 16px 12px; }
  .linked-ledger {
    overflow: hidden;
    border: .5px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb,var(--bg2) 76%,transparent);
    box-shadow: inset 0 1px 0 var(--glass-highlight),0 9px 30px rgba(35,42,29,.045);
    backdrop-filter: blur(26px) saturate(140%);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
  }
  .linked-ledger-head,
  .linked-ledger-row {
    display: grid;
    grid-template-columns: minmax(260px,1.8fr) minmax(150px,.85fr) minmax(150px,.85fr) minmax(170px,.95fr) 18px;
    align-items: center;
    gap: 14px;
  }
  .linked-ledger-head {
    min-height: 34px;
    padding: 0 15px;
    border-bottom: .5px solid var(--border);
    background: color-mix(in srgb,var(--bg3) 72%,transparent);
    color: var(--text3);
    font-size: 8.5px;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .linked-ledger-row {
    min-height: 76px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background .16s ease;
  }
  .linked-ledger-row + .linked-ledger-row { border-top: .5px solid var(--border); }
  .linked-ledger-row:hover { background: color-mix(in srgb,var(--bg4) 60%,transparent); }
  .linked-ledger-row:focus-visible { outline: 3px solid color-mix(in srgb,var(--amber) 55%,transparent); outline-offset: -3px; }
  .linked-product-cell { min-width: 0; display: flex; align-items: center; gap: 11px; }
  .linked-product-copy { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; }
  .linked-product-copy > strong { width: 100%; overflow: hidden; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
  .linked-product-copy > small { color: var(--text3); font-size: 10px; }
  .linked-record-note { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .linked-stage { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 7px; align-items: baseline; }
  .linked-stage > small { grid-column: 1 / -1; color: var(--text3); font-size: 8.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
  .linked-stage > strong { min-width: 0; overflow: hidden; font: 600 11px 'DM Mono',monospace; text-overflow: ellipsis; white-space: nowrap; }
  .linked-stage > span:not(.transaction-status) { justify-self: end; font: 500 11px 'DM Mono',monospace; white-space: nowrap; }
  .linked-stage > em { grid-column: 1 / -1; overflow: hidden; color: var(--text3); font-size: 9.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
  .linked-purchase-stage,
  .linked-sale-stage,
  .linked-outcome-stage,
  .linked-open-stage { padding-left: 13px; border-left: .5px solid var(--border); }
  .purchase-id { color: var(--amber-text); }
  .sale-id { color: var(--blue); }
  .linked-outcome-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .linked-outcome-stage > strong { margin-left: auto; font: 650 12px 'DM Mono',monospace; }
  .linked-outcome-stage > em { width: 100%; color: var(--text3); font-size: 9.5px; font-style: normal; }
  .linked-open-stage { grid-column: 3 / 5; display: flex; align-items: center; gap: 9px; }
  .linked-open-stage > strong { font-size: 11px; font-weight: 600; }
  .linked-trade-links { width: 100%; display: flex; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: none; }
  .linked-trade-links > span { color: var(--text3); font-size: 8.5px; font-weight: 650; white-space: nowrap; }
  .linked-trade-badge { padding: 3px 6px; border: .5px solid color-mix(in srgb,var(--blue) 28%,var(--border)); border-radius: 7px; background: var(--blue-dim); color: var(--blue); font: 600 9px 'DM Mono',monospace; cursor: pointer; white-space: nowrap; }
  .linked-row-chevron { color: var(--text3); display: inline-flex; align-items: center; justify-content: flex-end; }
  .linked-readonly-note { margin-bottom: 12px; padding: 8px 10px; border: .5px solid var(--border); border-radius: 10px; background: color-mix(in srgb,var(--bg3) 70%,transparent); color: var(--text3); font-size: 10px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
  @media (min-width: 760px) {
    .linked-query-row,
    .linked-list { margin-left: 34px; margin-right: 34px; }
    .linked-query-row { grid-template-columns: auto minmax(280px,760px) minmax(150px,190px); }
  }
  @media (max-width: 759px) {
    .linked-query-row { grid-template-columns: auto minmax(0,1fr); align-items: end; }
    .linked-back-action { width: 42px; padding: 0; }
    .linked-back-action span { display: none; }
    .linked-sort-control { grid-column: 1 / -1; width: fit-content; margin-left: auto; }
    .linked-ledger-head { display: none; }
    .linked-ledger-row {
      grid-template-columns: minmax(0,1fr) 16px;
      gap: 10px;
      min-height: 0;
      padding: 13px;
    }
    .linked-product-cell { grid-column: 1; }
    .linked-row-chevron { grid-column: 2; grid-row: 1; }
    .linked-purchase-stage,
    .linked-sale-stage { grid-column: 1; padding: 9px 0 0; border-top: .5px solid var(--border); border-left: 0; }
    .linked-outcome-stage,
    .linked-open-stage { grid-column: 1 / -1; padding: 9px 0 0; border-top: .5px solid var(--border); border-left: 0; }
    .linked-ledger-row.is-sold { grid-template-columns: minmax(0,1fr) 16px; }
    .linked-ledger-row.is-sold .linked-purchase-stage { grid-row: 2; }
    .linked-ledger-row.is-sold .linked-sale-stage { grid-row: 3; }
    .linked-ledger-row.is-sold .linked-outcome-stage { grid-row: 4; }
    .linked-ledger-row.is-unsold .linked-purchase-stage { grid-row: 2; }
    .linked-ledger-row.is-unsold .linked-open-stage { grid-row: 3; }
  }
  .insight-card { border-radius: 16px !important; }
  .insight-card-header, .insight-condition-header { background: color-mix(in srgb,var(--bg3) 62%,transparent) !important; }
  .insight-condition-row:last-child { border-bottom: 0 !important; }

  /* Dense catalog and analytics tables share one material language while
     retaining different actions: Catalog edits, Insights expands. */
  .catalog-data-head,
  .catalog-data-row {
    display: grid;
    grid-template-columns: minmax(280px,44%) minmax(78px,.45fr) minmax(150px,1fr) 170px 20px;
    align-items: center;
    gap: 14px;
  }
  .catalog-data-head {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 36px;
    padding: 0 14px;
    border-bottom: .5px solid var(--border);
    background: color-mix(in srgb,var(--popover-surface) 92%,transparent);
    color: var(--text3);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .09em;
    text-transform: uppercase;
    backdrop-filter: blur(30px) saturate(135%);
    -webkit-backdrop-filter: blur(30px) saturate(135%);
  }
  #page-sku .catalog-view-panel {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0 34px 100px;
    box-sizing: border-box;
  }
  #page-sku .catalog-data-table {
    border: .5px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb,var(--bg2) 76%,transparent);
    overflow: hidden;
    box-shadow: inset 0 1px 0 var(--glass-highlight),0 10px 30px rgba(35,42,29,.045);
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
  }
  .catalog-data-row {
    width: 100%;
    height: 68px;
    min-height: 68px;
    padding: 8px 14px;
    box-sizing: border-box;
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
    font: 400 13px/1.25 'DM Sans',sans-serif;
    font-synthesis: none;
    font-optical-sizing: auto;
    font-kerning: normal;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
  }
  .catalog-table-row {
    border: 0;
    box-shadow: inset 0 -.5px var(--border);
    background: transparent;
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
    transition: background .15s ease;
  }
  .catalog-table-row:last-child { box-shadow: none; }
  .catalog-table-row:hover { background: color-mix(in srgb,var(--bg4) 68%,transparent); }
  .catalog-table-row:focus-visible { position: relative; z-index: 1; outline: 3px solid color-mix(in srgb,var(--amber) 55%,transparent); outline-offset: -3px; }
  .catalog-product-cell { min-width: 0; display: flex; align-items: center; gap: 11px; }
  .catalog-product-cell .item-icon { width: 40px; height: 40px; flex: none; }
  .catalog-product-copy { min-width: 0; }
  .catalog-product-copy strong {
    display: block;
    overflow: hidden;
    font: 600 12.5px/1.25 'DM Sans',sans-serif;
    font-synthesis: none;
    font-optical-sizing: auto;
    font-kerning: normal;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .catalog-product-copy small,
  .catalog-inventory-cell small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text3);
    font: 400 9.5px/1.25 'DM Sans',sans-serif;
    font-synthesis: none;
    font-optical-sizing: auto;
    font-kerning: normal;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .catalog-type-cell,
  .catalog-spec-cell { overflow: hidden; color: var(--text2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .catalog-inventory-cell strong { display: block; color: var(--text); font-size: 11.5px; font-weight: 650; }
  .catalog-row-chevron { color: var(--text3); display: grid; place-items: center; }

  /* Use an inset divider so the Performance wrapper does not add a fractional
     pixel outside the shared fixed row height used by Inventory. */
  .insights-table-row { border-bottom: 0; box-shadow: inset 0 -.5px var(--border); }
  .insights-table-row:last-child { box-shadow: none; }
  .insights-summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    transition: background .15s ease;
  }
  .insights-summary::-webkit-details-marker { display: none; }
  @media (hover:hover) and (pointer:fine) {
    .insights-summary:hover { background: color-mix(in srgb,var(--bg4) 68%,transparent); }
  }
  .insights-summary:focus-visible { outline: 3px solid color-mix(in srgb,var(--amber) 55%,transparent); outline-offset: -3px; }
  .insights-product { min-width: 0; }
  .insights-cell small { display: block; margin-top: 3px; overflow: hidden; color: var(--text3); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
  .insights-cell { min-width: 0; color: var(--text2); }
  .insights-cell::before { display: none; }
  .insights-cell strong { display: block; overflow: hidden; font: 650 11.5px 'DM Sans',sans-serif; text-overflow: ellipsis; white-space: nowrap; }
  .insights-cell.positive strong { color: var(--green); }
  .insights-cell.negative strong { color: var(--red); }
  .insights-cell small.positive { color: var(--green); }
  .insights-cell small.negative { color: var(--red); }
  .insights-progress { width: 48px; height: 3px; margin-top: 5px; border-radius: 2px; background: var(--bg4); display: block; overflow: hidden; }
  .insights-progress i { height: 100%; border-radius: inherit; background: var(--green); display: block; }
  .insights-chevron { color: var(--text3); display: grid; place-items: center; transition: transform .16s ease; }
  .insights-table-row[open] .insights-chevron { transform: rotate(90deg); }
  .insights-detail { border-top: .5px solid var(--border); background: color-mix(in srgb,var(--bg3) 44%,transparent); }
  .insight-condition-head,
  .insight-condition-row { min-width: 560px; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr .7fr; align-items: center; gap: 10px; }
  .insight-condition-head { min-height: 30px; padding: 0 16px; border-bottom: .5px solid var(--border); color: var(--text3); font-size: 8.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
  .insight-condition-row { min-height: 48px; padding: 7px 16px; border-bottom: .5px solid var(--border); color: var(--text2); font: 600 11px 'DM Mono',monospace; }
  .insight-condition-row:last-child { border-bottom: 0; }
  .insight-condition-row strong { display: block; color: var(--text2); font: 650 10.5px 'DM Sans',sans-serif; }
  .insight-condition-row small { display: block; margin-top: 2px; color: var(--text3); font: 500 8.5px 'DM Sans',sans-serif; }
  .insight-condition-row .positive { color: var(--green); }
  .insight-condition-row .negative { color: var(--red); }
  .insights-no-sales { padding: 14px 16px; color: var(--text3); font-size: 10.5px; }
  .insights-query-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: end;
    gap: 16px;
    margin: 0 16px 12px;
  }
  .insights-query-row .search-wrap { width: auto; margin: 0; padding: 0; }
  .insights-search-filter { min-width: 0; }
  .insights-sort-control { width: 190px; }
  .insights-filter-panel { margin-bottom: 12px; }
  .marketplace-query-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: end;
    gap: 16px;
    margin: 0 16px 12px;
  }
  .marketplace-query-row .search-wrap { width: auto; margin: 0; padding: 0; }
  .marketplace-search-filter { min-width: 0; }
  .marketplace-sort-control { width: 190px; }
  .marketplace-filter-panel { margin-bottom: 12px; }
  .marketplace-homepage-action { min-height: 40px; align-self: flex-end; }
  .listing-row-thumb { width: 42px; height: 42px; border: .5px solid var(--border); border-radius: 11px; background: var(--bg3); display: grid; place-items: center; overflow: hidden; flex: none; }
  .listing-row-thumb img { display:block; width:100%; height:100%; padding:3px; box-sizing:border-box; object-fit:contain; object-position:center; }
  #listing-list .item-sub small { display: block; margin-top: 2px; color: var(--text3); font-size: 9px; }
  .listing-status { text-transform: capitalize; }
  .listing-status.published { background: var(--green-dim); color: var(--green); }
  .listing-status.draft { background: color-mix(in srgb,var(--text3) 10%,transparent); color: var(--text2); }
  .listing-status.archived { background: color-mix(in srgb,var(--text3) 7%,transparent); color: var(--text3); }
  .listing-status.sold { background: var(--blue-dim); color: var(--blue); }
  @media (min-width: 760px) {
    .insights-query-row { margin-right: 34px; margin-left: 34px; }
    .marketplace-query-row { margin-right: 34px; margin-left: 34px; }
  }

  /* Transaction ledgers use one dense, comparable structure across
     purchases, sales, and expenses. Each row remains a single edit target. */
  .transaction-ledger-head,
  .transaction-ledger-row {
    display: grid;
    align-items: center;
    gap: 12px;
  }
  .purchase-ledger .transaction-ledger-head,
  .purchase-ledger .transaction-ledger-row { grid-template-columns: minmax(260px,2fr) 98px 110px 118px minmax(145px,1fr) 108px 18px; }
  .sale-ledger .transaction-ledger-head,
  .sale-ledger .transaction-ledger-row { grid-template-columns: minmax(250px,2fr) 96px 106px 98px 98px 70px 126px 18px; }
  .expense-ledger .transaction-ledger-head,
  .expense-ledger .transaction-ledger-row { grid-template-columns: minmax(240px,2fr) 96px 125px minmax(100px,1fr) 94px 78px 104px 18px; }
  .transaction-ledger-head {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 36px;
    padding: 0 14px;
    border-bottom: .5px solid var(--border);
    background: color-mix(in srgb,var(--popover-surface) 92%,transparent);
    color: var(--text3);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .085em;
    text-transform: uppercase;
    backdrop-filter: blur(30px) saturate(135%);
    -webkit-backdrop-filter: blur(30px) saturate(135%);
  }
  .transaction-ledger-row {
    width: 100%;
    min-height: 66px;
    padding: 8px 14px;
    border: 0;
    border-bottom: .5px solid var(--border);
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease;
  }
  .transaction-ledger-row:last-child { border-bottom: 0; }
  .transaction-ledger-row:hover { background: color-mix(in srgb,var(--bg4) 68%,transparent); }
  .transaction-ledger-row:focus-visible { position: relative; z-index: 1; outline: 3px solid color-mix(in srgb,var(--amber) 55%,transparent); outline-offset: -3px; }
  .transaction-product-cell { min-width: 0; display: flex; align-items: center; gap: 11px; }
  .transaction-product-cell .item-icon { width: 40px; height: 40px; flex: none; }
  .transaction-product-copy { min-width: 0; }
  .transaction-product-copy strong { display: block; overflow: hidden; color: var(--text); font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
  .transaction-product-copy small,
  .transaction-date-cell small,
  .transaction-text-cell small,
  .transaction-amount-cell small { display: block; margin-top: 3px; overflow: hidden; color: var(--text3); font-size: 8.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .transaction-product-copy .transaction-mobile-meta,
  .transaction-mobile-status,
  .transaction-mobile-amount { display: none; }
  .transaction-date-cell,
  .transaction-text-cell { min-width: 0; overflow: hidden; color: var(--text2); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
  .transaction-money-cell { min-width: 0; overflow: hidden; color: var(--text); font: 600 11px 'DM Mono',monospace; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
  .transaction-money-cell.positive,
  .transaction-amount-cell.positive strong { color: var(--green); }
  .transaction-money-cell.negative,
  .transaction-amount-cell.negative strong { color: var(--red); }
  .transaction-status-cell { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 3px 5px; }
  .transaction-status { display: inline-flex; min-height: 20px; align-items: center; padding: 2px 7px; border-radius: 999px; font-size: 8.5px; font-weight: 650; line-height: 1; white-space: nowrap; }
  .transaction-status.is-complete { background: var(--green-dim); color: var(--green); }
  .transaction-status.is-pending { background: var(--amber-dim); color: var(--amber-text); }
  .transaction-status.is-warning { background: color-mix(in srgb,var(--amber-dim) 65%,var(--red-dim)); color: var(--amber-text); }
  .transaction-status.is-trade { background: var(--blue-dim); color: var(--blue); }
  .transaction-status.is-neutral { background: color-mix(in srgb,var(--bg4) 72%,transparent); color: var(--text3); }
  .transaction-condition { flex-basis: 100%; color: var(--text3); font-size: 8.5px; font-weight: 600; }
  .transaction-condition.positive { color: var(--green); }
  .transaction-condition.warning { color: var(--amber-text); }
  .transaction-condition.negative { color: var(--red); }
  .transaction-amount-cell { min-width: 0; text-align: right; }
  .transaction-amount-cell strong { display: block; overflow: hidden; color: var(--text); font: 650 12px 'DM Mono',monospace; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
  .transaction-chevron { color: var(--text3); display: grid; place-items: center; }

  @media (max-width: 1199px) {
    .transaction-ledger-head { display: none; }
    .purchase-ledger .transaction-ledger-row,
    .sale-ledger .transaction-ledger-row,
    .expense-ledger .transaction-ledger-row { grid-template-columns: minmax(0,1fr) auto; min-height: 76px; gap: 10px; padding: 9px 11px; }
    .transaction-desktop { display: none; }
    .transaction-desktop-meta { display: none !important; }
    .transaction-mobile-meta { display: block !important; }
    .transaction-mobile-status { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
    .transaction-mobile-status .transaction-condition { flex-basis: auto; }
    .transaction-mobile-amount { display: block; }
    .transaction-product-cell .item-icon { width: 42px; height: 42px; }
    .transaction-product-copy strong { font-size: 11.5px; }
    .transaction-amount-cell { align-self: center; }
    .transaction-amount-cell strong { font-size: 11.5px; }
    .transaction-amount-cell small { text-align: right; }
  }

  @media (max-width: 759px) {
    .insights-query-row { grid-template-columns: minmax(0,1fr); gap: 9px; margin: 0 16px 10px; }
    .insights-sort-control { width: 100%; }
    .insights-filter-panel { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .marketplace-query-row { grid-template-columns: minmax(0,1fr); gap: 9px; margin: 0 16px 10px; }
    .marketplace-sort-control { width: 100%; }
    .marketplace-homepage-action { width: 100%; min-height: 42px; }
    .catalog-table-head { display: none; }
    .catalog-table-row { grid-template-columns: minmax(0,1fr) auto; height: 104px; min-height: 104px; gap: 10px; padding: 9px 11px; }
    .catalog-type-cell,.catalog-spec-cell,.catalog-row-chevron { display: none; }
    .catalog-product-cell .item-icon { width: 40px; height: 40px; }
    .catalog-product-copy strong { font-size: 11.5px; }
    .catalog-product-copy small { font-size: 8.5px; }
    .catalog-inventory-cell { text-align: right; }
    .catalog-inventory-cell strong { font-size: 10.5px; }
    .catalog-inventory-cell small { max-width: 108px; font-size: 8px; }
    #page-sku .catalog-view-panel { padding: 0 16px 100px; }
    #page-sku .catalog-data-table { border-radius: 16px; }
    .insights-table-head { display: none; }
    .insights-summary { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px 8px; height: 104px; min-height: 104px; padding: 9px 11px 10px; }
    .insights-product { grid-column: 1 / -1; min-height: 36px; padding-right: 24px; gap: 10px; }
    .insights-product .item-icon { width: 40px; height: 40px; }
    .insights-product strong {
      display: -webkit-box;
      overflow: hidden;
      font-size: 11.5px;
      line-height: 1.22;
      text-overflow: clip;
      white-space: normal;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .insights-product small { margin-top: 2px; color: color-mix(in srgb,var(--text3) 74%,var(--text2)); font-size: 8.5px; }
    .insights-cell::before { content: attr(data-label); display: block; margin-bottom: 2px; color: color-mix(in srgb,var(--text3) 78%,var(--text2)); font: 650 7px 'DM Sans',sans-serif; letter-spacing: .07em; text-transform: uppercase; }
    .insights-cell strong { font-size: 10px; line-height: 1.2; }
    .insights-cell small { margin-top: 2px; color: color-mix(in srgb,var(--text3) 74%,var(--text2)); font-size: 7px; }
    .insights-sell-through { display: grid; grid-template-columns: auto minmax(28px,44px); align-items: center; justify-content: start; column-gap: 6px; }
    .insights-sell-through::before { grid-column: 1 / -1; }
    /* The velocity value reads "N% sell-through" now (previously just "N%"),
       too long for this column's share of the 3-up mobile card at a fixed
       line — let it wrap instead of truncating mid-word. */
    .insights-sell-through strong { overflow: visible; white-space: normal; text-overflow: clip; }
    .insights-progress { width: 100%; max-width: 44px; margin-top: 0; }
    .insights-chevron { position: absolute; top: 20px; right: 11px; }
    .insights-detail { overflow-x: auto; }
    #page-sku .page-meta-tools { flex-wrap: wrap; width: 100%; margin-left: 0; justify-content: space-between; }
    #page-sku .catalog-view-switch { order: -1; width: 100%; }
    #page-sku .catalog-view-switch button { flex: 1; min-height: 32px; }
  }

  /* SKU's disclosure is unique, but its material uses the same shared
     surface and input tokens as every other editor. */
  #sku-sheet .sku-details-toggle {
    background: color-mix(in srgb,var(--bg2) 70%,var(--amber-dim) 30%);
  }
  #sku-sheet .sku-details-toggle:hover {
    background: color-mix(in srgb,var(--bg2) 58%,var(--amber-dim) 42%);
  }
  /* Every editor is a single warm material instead of stacked white/gray
     bands. Dedicated save bars retain separation through a hairline only. */
  .sheet .sheet-body { background: transparent; }
  .listing-savebar, .sku-savebar {
    background: color-mix(in srgb,var(--sheet-surface) 82%,transparent);
    border-top-color: color-mix(in srgb,var(--amber) 14%,var(--border));
    backdrop-filter: blur(36px) saturate(140%);
    -webkit-backdrop-filter: blur(36px) saturate(140%);
  }
  .sheet .card,
  .sheet .listing-image-row,
  .sheet .listing-featured-control,
  .sheet .homepage-file-actions {
    background: color-mix(in srgb,var(--bg2) 72%,var(--amber-dim) 28%);
  }

  /* Glass must be translucent to work. This normalizes the remaining page
     surfaces and controls that previously rendered as opaque warm blocks. */
  .list-item,
  .balance-summary-card,
  .balance-empty,
  .balance-loading {
    background: color-mix(in srgb,var(--bg2) 78%,transparent);
  }
  .search-input,
  .sort-select,
  .header-utility,
  .compact-action,
  .header-settings,
  .balance-manage-btn,
  .quote-action,
  #theme-toggle-btn {
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
  }
  #user-menu, #log-menu, .nav {
    backdrop-filter: blur(42px) saturate(140%);
    -webkit-backdrop-filter: blur(42px) saturate(140%);
  }

  @media (min-width: 760px) {
    /* Keep Catalog's controls stationary and return scrolling to the shared
       Inventory/Performance table surface. Both views retain the same table
       box, row geometry, and typography. */
    #page-sku.active {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #page-sku .catalog-filter-stack,
    #page-sku .page-meta-row,
    #page-sku .catalog-active-filters { flex: 0 0 auto; }
    #page-sku .catalog-view-panel:not([hidden]) {
      display: flex;
      flex: 1 1 auto;
      min-height: 0;
      padding-bottom: 24px;
    }
    #page-sku .catalog-data-table {
      width: 100%;
      max-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .page-meta-row, .page-sort-row { padding-left: 34px; padding-right: 34px; }
    .compact-search-wrap { padding: 0 0 12px !important; }
    .compact-filter-panel {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    /* Desktop uses one continuous canvas beneath navigation, app chrome, and
       content. The sidebar remains a darker glass plane, not a separate slab. */
    .app {
      background:
        radial-gradient(circle at 8% 4%,rgba(216,255,82,.20),transparent 32rem),
        radial-gradient(circle at 96% 42%,rgba(196,213,128,.10),transparent 34rem),
        color-mix(in srgb,var(--bg-translucent) 84%,transparent);
      background-repeat: no-repeat;
    }
    .page,
    #page-summary { background-image: none; }
    .nav {
      border-radius: 28px;
      border-right-color: color-mix(in srgb,var(--border) 58%,transparent);
      background: color-mix(in srgb,var(--bg3) 42%,transparent);
      box-shadow: inset -1px 0 0 color-mix(in srgb,var(--glass-highlight) 42%,transparent);
    }
    .sheet { max-height: calc(100vh - 54px); }
    .mobile-app-bar {
      position: absolute;
      z-index: 120;
      top: 0;
      right: 0;
      left: 258px;
      display: flex;
      min-height: 76px;
      align-items: center;
      justify-content: space-between;
      padding: 16px 34px;
      overflow: hidden;
      border-radius: 28px;
      background: transparent;
      transition: background .18s ease,box-shadow .18s ease,backdrop-filter .18s ease;
    }
    .mobile-app-context {
      display: block;
      min-width: 0;
      margin-right: auto;
      overflow: hidden;
      color: var(--text);
      font-family: var(--font-serif);
      font-size: 28px;
      font-weight: 650;
      letter-spacing: -.04em;
      line-height: 1.15;
      padding-bottom: 2px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .desktop-app-mark {
      width: 34px;
      height: 34px;
      display: flex;
      flex: none;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }
    .desktop-app-mark img { width: 34px; height: 34px; object-fit: contain; }
    .mobile-app-bar.is-scrolled {
      border-radius: 28px;
      background: color-mix(in srgb,var(--bg-translucent) 58%,transparent);
      box-shadow: inset 0 -1px 0 color-mix(in srgb,var(--border) 34%,transparent),0 8px 24px rgba(0,0,0,.045);
      backdrop-filter: blur(38px) saturate(145%);
      -webkit-backdrop-filter: blur(38px) saturate(145%);
    }
    .mobile-app-brand { display: none; }
    .mobile-app-actions { display: flex; align-items: center; gap: 7px; }
    .mobile-app-icon-action,
    .mobile-app-theme,
    .mobile-app-avatar {
      width: 40px;
      height: 40px;
      display: grid;
      flex: none;
      place-items: center;
      border-radius: 50%;
      cursor: pointer;
    }
    .mobile-app-icon-action,
    .mobile-app-theme {
      padding: 0;
      border: .5px solid var(--border2);
      background: color-mix(in srgb,var(--bg2) 74%,transparent);
      color: var(--text2);
      box-shadow: inset 0 1px 0 var(--glass-highlight);
      backdrop-filter: blur(22px) saturate(135%);
      -webkit-backdrop-filter: blur(22px) saturate(135%);
    }
    .mobile-app-theme svg { width: 17px; height: 17px; }
    .mobile-app-avatar {
      border: 0;
      background: var(--amber);
      color: var(--on-accent);
      font: 650 14px 'DM Sans',sans-serif;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.48),0 6px 18px rgba(156,185,45,.20);
    }
    .page > .header { padding-top: 80px; padding-bottom: 14px; }
    #page-dashboard > .header,
    #page-summary > .header,
    #page-sku > .header,
    #page-purchases > .header,
    #page-sales > .header,
    #page-expenses > .header { padding-bottom: 0; }
    #page-dashboard .dashboard-primary-actions,
    #page-dashboard .dashboard-utility-actions { display: none !important; }
    .app > #user-menu { top: 88px !important; right: 30px !important; z-index: 160 !important; }
    .app > #log-menu { top: 88px !important; right: 120px !important; z-index: 160 !important; }
  }
  @media (max-width: 759px) {
    /* One continuous mobile canvas: the persistent app bar and every page
       share the same glow instead of starting independent gradient layers.
       The glow's vertical anchor is pushed down to ~16% (rather than
       flush with the top) so it clears the status bar / app-bar strip —
       Safari/Chrome color that strip flat from theme-color's meta value,
       which can't blend with a gradient, so keeping the glow's brightest
       point off that strip avoids a visible seam between browser chrome
       and page content. */
    .app {
      background-color: transparent;
      background-image:
        radial-gradient(circle at 8% 16%,rgba(216,255,82,.20),transparent 24rem),
        radial-gradient(circle at 96% 42%,rgba(196,213,128,.10),transparent 26rem);
      background-repeat: no-repeat;
      background-size: 100% min(560px,62vh);
    }
    .page,
    #page-summary { background-image: none; }
    .mobile-app-bar {
      position: sticky;
      z-index: 120;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: calc(62px + env(safe-area-inset-top,0px));
      padding: max(10px,env(safe-area-inset-top,0px)) 20px 12px;
      overflow: hidden;
      border-radius: 22px;
      border-bottom: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      transition: background .18s ease,box-shadow .18s ease,backdrop-filter .18s ease;
    }
    .mobile-app-bar.is-scrolled {
      border-radius: 22px;
      background: color-mix(in srgb,var(--bg-translucent) 58%,transparent);
      box-shadow: inset 0 -1px 0 color-mix(in srgb,var(--border) 34%,transparent),0 8px 24px rgba(0,0,0,.06);
      backdrop-filter: blur(38px) saturate(145%);
      -webkit-backdrop-filter: blur(38px) saturate(145%);
    }
    /* Match desktop: icon mark + page title on one row, full wordmark
       dropped (it already lives on the sidebar there; here it just isn't
       shown at all, matching the icon-only top-bar treatment). */
    .mobile-app-brand { display: none; }
    .desktop-app-mark { display: flex; width: 30px; height: 30px; flex: none; align-items: center; justify-content: center; margin-right: 10px; }
    .desktop-app-mark img { width: 30px; height: 30px; object-fit: contain; }
    .mobile-app-context {
      display: block;
      min-width: 0;
      margin-right: auto;
      overflow: hidden;
      color: var(--text);
      font-family: var(--font-serif);
      font-size: 22px;
      font-weight: 650;
      letter-spacing: -.04em;
      line-height: 1.15;
      padding-bottom: 2px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-app-actions { display: flex; align-items: center; gap: 6px; }
    .mobile-app-icon-action,
    .mobile-app-theme,
    .mobile-app-avatar {
      width: 36px;
      height: 36px;
      display: grid;
      flex: none;
      place-items: center;
      border-radius: 50%;
      cursor: pointer;
    }
    .mobile-app-icon-action,
    .mobile-app-theme {
      border: .5px solid var(--border2);
      background: color-mix(in srgb,var(--bg2) 74%,transparent);
      color: var(--text2);
      box-shadow: inset 0 1px 0 var(--glass-highlight);
      backdrop-filter: blur(22px) saturate(135%);
      -webkit-backdrop-filter: blur(22px) saturate(135%);
    }
    .mobile-app-icon-action { padding: 0; color: var(--text2); }
    .mobile-app-icon-action:active,
    .mobile-app-theme:active { transform: scale(.96); }
    .mobile-app-theme svg { width: 17px; height: 17px; }
    .mobile-app-avatar {
      border: 0;
      background: var(--amber);
      color: var(--on-accent);
      font: 650 14px 'DM Sans',sans-serif;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.48),0 6px 18px rgba(156,185,45,.20);
    }
    .app > #user-menu {
      position: fixed !important;
      z-index: 160 !important;
      top: calc(max(10px,env(safe-area-inset-top,0px)) + 54px) !important;
      right: max(14px,calc((100vw - 520px)/2 + 14px)) !important;
    }
    .app > #log-menu {
      position: fixed !important;
      z-index: 160 !important;
      top: calc(max(10px,env(safe-area-inset-top,0px)) + 54px) !important;
      right: max(58px,calc((100vw - 520px)/2 + 58px)) !important;
    }
    .header { padding-top: 18px; }
    #page-dashboard > .header,
    #page-summary > .header,
    #page-sku > .header,
    #page-purchases > .header,
    #page-sales > .header,
    #page-expenses > .header { display: none; }
    .transaction-linked-action { width: 34px; padding: 0; }
    .transaction-linked-action span { display: none; }
    #page-dashboard .dashboard-utility-actions,
    #page-dashboard .dashboard-primary-actions,
    #page-dashboard #dash-header-label { display: none !important; }
    #page-dashboard .dashboard-title-block { grid-row: 1; }
    .header-utility { width: 36px; padding: 0; }
    .header-utility svg { margin: 0; }
    .header-utility { font-size: 0; }
    .sheet { max-height: 92dvh; }
    .form-row { gap: 10px; }
    .homepage-file-actions { grid-template-columns: auto minmax(0,1fr); }
    .homepage-file-actions .listing-upload-btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
    .nav-label { min-width: 0; max-width: 100%; overflow: hidden; font-size: 0; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
    .nav-label::after { content: attr(data-mobile); font-size: 9px; letter-spacing: 0; }
  }

  /* Dashboard information hierarchy: financial cause-and-effect first,
     operational outcomes second. All values are rendered from the active
     dashboard period in dashboard.js. */
  #dash-metrics {
    display: block;
    max-width: none;
    padding: 0 16px;
  }
  .dash-metrics-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 2px 9px;
  }
  .dash-metrics-kicker {
    color: var(--text3);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .11em;
    text-transform: uppercase;
  }
  .dash-financial-summary {
    overflow: hidden;
    overflow: clip;
    border: .5px solid color-mix(in srgb,var(--amber2) 78%,var(--border));
    border-radius: 21px;
    background: linear-gradient(135deg,var(--amber) 0%,var(--amber2) 100%);
    color: var(--on-accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62),0 13px 30px rgba(146,176,34,.18);
    position: relative;
    isolation: isolate;
  }
  .dash-financial-summary::after {
    content: '';
    position: absolute;
    width: 122px;
    height: 122px;
    right: -22px;
    top: -28px;
    background: url('assets/brand/logo-final/Icon/tangy-nature-icon-black-corrected.svg') center / contain no-repeat;
    opacity: .07;
    pointer-events: none;
  }
  .dash-profit-topline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 16px 18px 15px;
    position: relative;
    z-index: 1;
  }
  .dash-profit-main { width: 100%; min-width: 0; }
  .dash-profit-label,
  .dash-flow-metric span,
  .dash-margin-summary span {
    display: block;
    color: color-mix(in srgb,var(--on-accent) 68%,transparent);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .dash-profit-label {
    font-size: 11px;
    letter-spacing: .01em;
    text-transform: none;
  }
  .dash-profit-value {
    margin-top: 5px;
    overflow: hidden;
    color: var(--on-accent);
    font-family: var(--font-serif);
    font-size: clamp(28px,7vw,42px);
    font-weight: 650;
    letter-spacing: -.045em;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dash-profit-value-row {
    display: block;
    min-width: 0;
  }
  .dash-margin-summary {
    position: absolute;
    z-index: 2;
    top: auto;
    bottom: 15px;
    right: clamp(105px,13vw,145px);
    transform: none;
    min-width: 0;
    padding: 5px 8px;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    text-align: left;
    border: .5px solid rgba(22,23,20,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
    margin-top: 0;
  }
  .dash-margin-summary strong {
    display: inline;
    margin-top: 0;
    color: var(--on-accent);
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -.035em;
  }
  .dash-margin-summary span {
    margin-top: 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
  }
  .dash-margin-summary strong.negative { color: #7b281d; }
  .dash-financial-flow {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    align-items: center;
    gap: 10px;
    padding: 11px 18px 13px;
    border-top: .5px solid color-mix(in srgb,var(--on-accent) 13%,transparent);
    border-radius: 0 0 20px 20px;
    background: rgba(255,255,255,.27);
    position: relative;
    z-index: 1;
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
  }
  .dash-flow-metric { min-width: 0; }
  .dash-flow-metric strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--on-accent);
    font: 600 13px/1.25 'DM Mono',monospace;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dash-operations-heading { margin-top: 16px; }
  .dash-operation-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    overflow: hidden;
    border: .5px solid var(--border);
    border-radius: 17px;
    background: color-mix(in srgb,var(--bg2) 78%,transparent);
    box-shadow: inset 0 1px 0 var(--glass-highlight),0 8px 25px rgba(35,42,29,.045);
    backdrop-filter: blur(30px) saturate(140%);
    -webkit-backdrop-filter: blur(30px) saturate(140%);
  }
  .dash-operation-metric {
    min-width: 0;
    min-height: 64px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .dash-operation-metric + .dash-operation-metric { border-left: .5px solid var(--border); }
  .dash-operation-label {
    margin-top: 5px;
    color: var(--text3);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: -.01em;
  }
  .dash-operation-value {
    margin-top: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -.04em;
    line-height: 1.05;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dash-operation-value.items { color: var(--amber-text); }

  @media (min-width: 760px) {
    #dash-metrics { padding: 0 34px; }
    .dash-profit-topline { padding: 22px 22px 20px; }
    .dash-margin-summary { bottom: 20px; }
    .dash-financial-flow { padding: 16px 22px 18px; }
    .dash-operation-grid { grid-template-columns: 1.35fr 1fr 1fr; }
    .dash-operation-metric { min-height: 76px; padding: 16px 14px; }
    .dash-operation-value { font-size: 22px; }
  }

  @media (max-width: 520px) {
    .dash-financial-flow { gap: 9px; }
    .dash-flow-metric strong { font-size: 12px; }
  }

  @media (max-width: 420px) {
    .dash-margin-summary {
      position: static;
      transform: none;
      margin-top: 8px;
    }
    .dash-operation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .dash-operation-metric:first-child { grid-column: 1 / -1; }
    .dash-operation-metric:nth-child(2) { border-left: 0; border-top: .5px solid var(--border); }
    .dash-operation-metric:nth-child(3) { border-top: .5px solid var(--border); }
  }

  @media (max-width: 380px) {
    .dash-profit-topline { gap: 10px; }
    .dash-profit-value { font-size: 27px; }
    .dash-margin-summary { min-width: 0; }
    .dash-financial-flow { gap: 7px; }
    .dash-flow-metric strong { font-size: 11px; }
  }

  /* macOS-style overlay scrollbars: no permanent gutter or track. The thumb
     becomes visible only while the user is actively scrolling. */
  html,
  .page,
  .nav,
  .sheet-body,
  .list-wrap,
  .catalog-data-table,
  #sku-dropdown {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  html::-webkit-scrollbar,
  .page::-webkit-scrollbar,
  .nav::-webkit-scrollbar,
  .sheet-body::-webkit-scrollbar,
  .list-wrap::-webkit-scrollbar,
  .catalog-data-table::-webkit-scrollbar,
  #sku-dropdown::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  html::-webkit-scrollbar-track,
  .page::-webkit-scrollbar-track,
  .nav::-webkit-scrollbar-track,
  .sheet-body::-webkit-scrollbar-track,
  .list-wrap::-webkit-scrollbar-track,
  .catalog-data-table::-webkit-scrollbar-track,
  #sku-dropdown::-webkit-scrollbar-track {
    background: transparent;
  }
  html::-webkit-scrollbar-thumb,
  .page::-webkit-scrollbar-thumb,
  .nav::-webkit-scrollbar-thumb,
  .sheet-body::-webkit-scrollbar-thumb,
  .list-wrap::-webkit-scrollbar-thumb,
  .catalog-data-table::-webkit-scrollbar-thumb,
  #sku-dropdown::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: transparent;
    background-clip: padding-box;
  }
  html.is-scrolling,
  .page.is-scrolling,
  .nav.is-scrolling,
  .sheet-body.is-scrolling,
  .list-wrap.is-scrolling,
  .catalog-data-table.is-scrolling,
  #sku-dropdown.is-scrolling {
    scrollbar-color: color-mix(in srgb,var(--text3) 48%,transparent) transparent;
  }
  html.is-scrolling::-webkit-scrollbar-thumb,
  .page.is-scrolling::-webkit-scrollbar-thumb,
  .nav.is-scrolling::-webkit-scrollbar-thumb,
  .sheet-body.is-scrolling::-webkit-scrollbar-thumb,
  .list-wrap.is-scrolling::-webkit-scrollbar-thumb,
  .catalog-data-table.is-scrolling::-webkit-scrollbar-thumb,
  #sku-dropdown.is-scrolling::-webkit-scrollbar-thumb {
    background: color-mix(in srgb,var(--text3) 48%,transparent);
    background-clip: padding-box;
  }

  /* Contextual dashboard period control. One active period replaces the
     previous year, quarter, and month rows while keeping every level close. */
  .dash-period-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    margin: 0 0 16px;
    position: relative;
    z-index: 20;
  }
  .dash-period-modes {
    display: none;
    grid-template-columns: repeat(4,1fr);
    padding: 3px;
    border: .5px solid var(--border);
    border-radius: 13px;
    background: color-mix(in srgb,var(--bg3) 76%,transparent);
    box-shadow: inset 0 1px 2px rgba(22,23,20,.035);
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
  }
  .dash-period-modes button,
  .dash-period-menu-mode {
    min-height: 32px;
    padding: 0 13px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text3);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
  }
  .dash-period-modes button:hover,
  .dash-period-menu-mode:hover { color: var(--text); }
  .dash-period-modes button.active,
  .dash-period-menu-mode.active {
    background: var(--amber);
    color: var(--on-accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55),0 3px 10px rgba(146,176,34,.15);
  }
  .dash-period-navigation {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 38px;
    align-items: center;
    gap: 7px;
    width: 100%;
    position: relative;
  }
  .dash-period-step,
  .dash-period-picker {
    height: 38px;
    border: .5px solid var(--border);
    background: color-mix(in srgb,var(--bg2) 78%,transparent);
    color: var(--text2);
    box-shadow: inset 0 1px 0 var(--glass-highlight),0 5px 18px rgba(35,42,29,.05);
    backdrop-filter: blur(24px) saturate(138%);
    -webkit-backdrop-filter: blur(24px) saturate(138%);
    cursor: pointer;
    transition: color .16s ease,background .16s ease,transform .16s ease,opacity .16s ease;
  }
  .dash-period-step {
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
  }
  .dash-period-step svg { width: 15px; height: 15px; }
  .dash-period-step:disabled { opacity: .28; cursor: default; }
  .dash-period-step:not(:disabled):hover,
  .dash-period-picker:hover { background: var(--bg2); color: var(--text); }
  .dash-period-step:not(:disabled):active,
  .dash-period-picker:active { transform: scale(.96); }
  .dash-period-picker {
    min-width: 0;
    padding: 0 13px;
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
  }
  .dash-period-picker > svg:first-child { width: 15px; height: 15px; color: var(--text3); flex: none; }
  .dash-period-picker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dash-period-chevron { width: 12px; height: 12px; color: var(--text3); flex: none; transition: transform .16s ease; }
  .dash-period-picker[aria-expanded="true"] .dash-period-chevron { transform: rotate(180deg); }
  .dash-period-menu[hidden] { display: none !important; }
  .dash-period-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 190;
    max-height: min(430px,calc(100dvh - 190px));
    overflow-y: auto;
    padding: 12px;
    border: .5px solid var(--border2);
    border-radius: 22px;
    background: var(--popover-surface);
    box-shadow: 0 20px 60px rgba(25,31,21,.22),inset 0 1px 0 var(--glass-highlight);
    backdrop-filter: blur(48px) saturate(150%);
    -webkit-backdrop-filter: blur(48px) saturate(150%);
  }
  .dash-period-menu-modes {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 3px;
    padding: 3px;
    border: .5px solid var(--border);
    border-radius: 13px;
    background: color-mix(in srgb,var(--bg3) 80%,transparent);
  }
  .dash-period-menu-mode { min-width: 0; padding: 0 7px; }
  .dash-period-menu-choices { margin-top: 12px; }
  .dash-period-empty {
    padding: 20px 12px;
    color: var(--text3);
    font-size: 11px;
    text-align: center;
  }
  .dash-period-choice-group + .dash-period-choice-group { margin-top: 12px; padding-top: 12px; border-top: .5px solid var(--border); }
  .dash-period-choice-year {
    margin: 0 2px 7px;
    color: var(--text3);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .dash-period-choice-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
  .dash-period-choice-grid.months { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dash-period-choice {
    min-height: 36px;
    padding: 0 9px;
    border: .5px solid var(--border);
    border-radius: 11px;
    background: color-mix(in srgb,var(--bg2) 75%,transparent);
    color: var(--text2);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease,background .15s ease,border-color .15s ease,transform .15s ease;
  }
  .dash-period-choice:hover { color: var(--text); background: var(--bg2); }
  .dash-period-choice:active { transform: scale(.97); }
  .dash-period-choice.active {
    border-color: color-mix(in srgb,var(--amber) 70%,var(--border));
    background: var(--amber);
    color: var(--on-accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5),0 3px 10px rgba(146,176,34,.14);
  }

  @media (min-width: 760px) {
    .dash-period-toolbar { padding: 0 34px; }
    .dash-period-modes { display: grid; }
    .dash-period-navigation { grid-template-columns: 34px minmax(126px,auto) 34px; width: auto; }
    .dash-period-step,.dash-period-picker { height: 34px; }
    .dash-period-picker { border-radius: 17px; }
    .dash-period-menu {
      position: absolute;
      top: 43px;
      right: 0;
      bottom: auto;
      left: auto;
      width: 360px;
      max-height: min(430px,calc(100vh - 180px));
      border-radius: 18px;
    }
  }

  /* Mobile Dashboard benchmark
     Keep the finished desktop composition untouched. This establishes the
     mobile rhythm that the remaining admin pages can adopt later. */
  @media (max-width: 759px) {
    /* Shared mobile chrome: retain the generous launch state, then collapse
       the sticky bar once content begins moving so it does not dominate the
       working viewport. */
    .mobile-app-bar,
    .mobile-app-bar .desktop-app-mark,
    .mobile-app-bar .desktop-app-mark img,
    .mobile-app-bar .mobile-app-context,
    .mobile-app-bar .mobile-app-icon-action,
    .mobile-app-bar .mobile-app-theme,
    .mobile-app-bar .mobile-app-avatar {
      transition: min-height .18s ease,padding .18s ease,width .18s ease,height .18s ease,font-size .18s ease,margin .18s ease,background .18s ease,box-shadow .18s ease,backdrop-filter .18s ease;
    }
    .mobile-app-bar.is-scrolled {
      min-height: calc(46px + env(safe-area-inset-top,0px));
      padding: max(6px,env(safe-area-inset-top,0px)) 16px 6px;
      border-radius: 18px;
      background: color-mix(in srgb,var(--bg-translucent) 76%,transparent);
      box-shadow: inset 0 -1px 0 color-mix(in srgb,var(--border) 42%,transparent),0 7px 22px rgba(0,0,0,.07);
      backdrop-filter: blur(44px) saturate(150%);
      -webkit-backdrop-filter: blur(44px) saturate(150%);
    }
    .mobile-app-bar.is-scrolled .desktop-app-mark,
    .mobile-app-bar.is-scrolled .desktop-app-mark img {
      width: 26px;
      height: 26px;
    }
    .mobile-app-bar.is-scrolled .desktop-app-mark { margin-right: 8px; }
    .mobile-app-bar.is-scrolled .mobile-app-context {
      padding-bottom: 1px;
      font-size: 19px;
    }
    .mobile-app-bar.is-scrolled .mobile-app-actions { gap: 5px; }
    .mobile-app-bar.is-scrolled .mobile-app-icon-action,
    .mobile-app-bar.is-scrolled .mobile-app-theme,
    .mobile-app-bar.is-scrolled .mobile-app-avatar {
      width: 34px;
      height: 34px;
    }
    .mobile-app-bar.is-scrolled .mobile-app-icon-action svg,
    .mobile-app-bar.is-scrolled .mobile-app-theme svg {
      width: 15px;
      height: 15px;
    }
    .mobile-app-bar.is-scrolled .mobile-app-avatar { font-size: 12px; }

    /* A quieter tab bar preserves 44px+ touch targets while revealing more
       content and using enough material density to separate overlaid text. */
    .nav {
      padding: 4px 5px;
      background: color-mix(in srgb,var(--bg2) 82%,transparent);
      box-shadow: 0 12px 36px rgba(25,31,21,.16),inset 0 1px 0 var(--glass-highlight);
      backdrop-filter: blur(56px) saturate(150%);
      -webkit-backdrop-filter: blur(56px) saturate(150%);
    }
    .nav-btn {
      min-height: 46px;
      gap: 3px;
      padding: 5px 2px 4px;
      border-radius: 15px;
      font-size: 9.5px;
    }
    .nav-icon { width: 20px; height: 20px; }

    #page-dashboard {
      padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--browser-toolbar-clearance) + 44px);
    }

    #page-dashboard .dash-period-toolbar {
      margin: 8px 0 18px;
      padding: 0 16px;
    }
    #page-dashboard .dash-period-navigation {
      grid-template-columns: 36px minmax(0,1fr) 36px;
      gap: 6px;
    }
    #page-dashboard .dash-period-step,
    #page-dashboard .dash-period-picker { height: 38px; }

    #page-dashboard #dash-metrics { padding: 0 16px; }
    #page-dashboard .dash-metrics-heading {
      margin: 0 3px 9px;
    }
    #page-dashboard .dash-operations-heading { margin-top: 18px; }
    #page-dashboard .dash-financial-summary,
    #page-dashboard .dash-operation-grid { border-radius: 20px; }

    #page-dashboard #dash-trend-wrap {
      margin-top: 20px;
      margin-bottom: 20px;
      padding: 0 16px;
    }
    #page-dashboard .trend-heading { margin-bottom: 9px; }
    #page-dashboard .trend-card {
      height: 220px;
      padding: 11px 10px 9px;
      border-radius: 20px;
    }
    #page-dashboard .trend-mode-toggle button {
      min-width: 50px;
      height: 28px;
      padding: 0 9px;
    }

    #page-dashboard .dashboard-grid {
      display: block;
      padding: 0 16px;
    }
    #page-dashboard .dashboard-col-main,
    #page-dashboard .dashboard-col-side {
      display: flex;
      min-width: 0;
      flex-direction: column;
    }
    #page-dashboard .dashboard-col-side { margin-top: 22px; }
    #page-dashboard .dashboard-list-heading {
      min-height: 30px;
      margin: 0 2px 8px;
    }
    #page-dashboard .dashboard-list-heading .section-title {
      padding: 0;
      font-size: 10.5px;
      font-weight: 650;
      letter-spacing: .11em;
    }
    #page-dashboard .dashboard-view-all {
      min-height: 28px;
      padding: 0 10px;
      font-size: 10.5px;
    }
    #page-dashboard .dashboard-preview-list {
      width: 100%;
      margin: 0;
      border-radius: 20px;
    }
    #page-dashboard .dashboard-preview-list .list-item {
      height: 108px;
      min-height: 108px;
      padding: 13px 14px;
      gap: 11px;
    }
    #page-dashboard .dashboard-preview-list .item-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
    }
    #page-dashboard .dashboard-preview-list .item-name {
      font-size: 13.5px;
      font-weight: 600;
      line-height: 1.22;
    }
    #page-dashboard .dashboard-unsold-row .item-name {
      display: -webkit-box;
      overflow: hidden;
      white-space: normal;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    #page-dashboard .dashboard-preview-list .item-sub {
      display: -webkit-box;
      margin-top: 4px;
      overflow: hidden;
      color: var(--text2);
      font-size: 10.5px;
      line-height: 1.35;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    #page-dashboard .dashboard-unsold-row .item-right {
      width: 92px;
      min-width: 92px;
    }
    #page-dashboard .dashboard-preview-list .dashboard-unsold-row {
      height: 96px;
      min-height: 96px;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    #page-dashboard .dashboard-unsold-row .item-amount { font-size: 13.5px; }
    #page-dashboard .dashboard-age { font-size: 9px; }

    #page-dashboard .dashboard-recent-row { align-items: flex-start; }
    #page-dashboard .dashboard-recent-row .item-icon { margin-top: 0; }
    #page-dashboard .recent-sale-financials {
      gap: 0;
      margin-top: 7px;
      padding-top: 6px;
    }
    #page-dashboard .recent-sale-stat { padding: 0 6px; }
    #page-dashboard .recent-sale-stat-label {
      margin-bottom: 2px;
      font-size: 8px;
    }
    #page-dashboard .recent-sale-stat-value { font-size: 10.5px; }
  }

/* Mobile bottom navigation — continuous floating capsule.
   This final override keeps Safari, browser tabs and installed PWAs on the
   same complete rounded silhouette instead of attaching to the viewport. */
@media (max-width: 759px) {
  .nav {
    width: max-content;
    max-width: calc(100% - 28px);
    bottom: calc(10px + var(--safe-bottom) + var(--browser-toolbar-clearance));
    justify-content: center;
    padding: 6px 14px;
    border: .5px solid var(--border2);
    border-radius: 999px;
    box-shadow: 0 15px 42px rgba(25,31,21,.18), inset 0 1px 0 var(--glass-highlight);
    overflow: hidden !important;
  }
  .nav-btn {
    flex: 0 1 68px;
    width: 68px;
    min-width: 48px;
    min-height: 50px;
    border-radius: 999px;
  }
  .nav-btn.active {
    border-radius: 999px;
    box-shadow: inset 0 1px 0 color-mix(in srgb,var(--glass-highlight) 78%,transparent);
  }
}

/* ─── ENVIRONMENT BANNER ──────────────────────────────────────
   Persistent, high-visibility indicator whenever this admin app isn't
   talking to production (see js/app.js applyEnvironmentBanner). Sticky so
   it stays visible while scrolling, deliberately loud (red) so it can't be
   mistaken for a normal UI element. */
#env-banner {
  position: sticky;
  top: 0;
  /* Highest z-index anywhere in this file (everything else tops out at
     500, e.g. #login-screen) -- found via live testing that a tied
     z-index let #login-screen's opaque mobile background (see its
     @media (max-width: 759px) rule) paint over this banner and hide it
     completely on mobile, since it's position:fixed and comes later in
     DOM order. This must always win, on every page/state. */
  z-index: 1000;
  width: 100%;
  padding: 6px 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--red);
}