/* ── Tokens (Herd web design system; muted text darkened to pass 4.5:1) ───────────── */
  /* Redesign 2026-10 "calm, deep, alive": same brand (blue, navy, Roboto); depth from soft layered shadows, cooler
     neutrals, larger radii. Every text colour below passes 4.5:1 on its surface in both modes. */
  :root {
    --blue: #4167F6; --blue-2: #3C84F5; --blue-deep: #3352D9; --sky: #5DCBFA; --light: #EAF0FE; --lighter: #F5F8FE;
    --bg: #F3F5FA; --surface: #FFFFFF; --surface-2: #F7F8FB; --border: #DDE2EA; --border-soft: #ECEFF4; --card-edge: rgba(16,24,40,.07);
    --title: #1E2F42; --body: #3D4553; --muted: #5C6574; --sidebar: #263A4E; --sidebar-2: #1A2A3A; --sidebar-text: rgba(255,255,255,.8);
    --ok-bg: #E6F6EC; --ok-fg: #1F6B3A; --warn-bg: #FEF2DF; --warn-fg: #7A4B00; --err-bg: #FDE9E7; --err-fg: #8F2418;
    --info-bg: #EAF0FE; --info-fg: #2647B8; --teal-bg: #E1F5F0; --teal-fg: #17634F; --neu-bg: #EEF1F5; --neu-fg: #434D5A;
    --error: #D96149; --success: #3FA36B;
    --shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.05);
    --shadow-lift: 0 2px 4px rgba(16,24,40,.06), 0 12px 28px rgba(16,24,40,.10);
    --shadow-pop: 0 24px 60px rgba(16,24,40,.22), 0 4px 12px rgba(16,24,40,.08);
    --glow: rgba(65,103,246,.18); --band-a: rgba(93,203,250,.20); --band-b: rgba(65,103,246,.16);
    --radius: 14px; --radius-sm: 10px; --skeleton: #E8ECF2; --link: #3352D9; /* brand blue is 4.3:1 on the page background */ --lane: #EBEFF6;
    --ease: cubic-bezier(.2, .8, .2, 1);
  }
  [data-theme="dark"] {
    --light: #1A2744; --lighter: #141E30; --bg: #0A0F17; --surface: #111925; --surface-2: #172131; --border: #263347;
    --border-soft: #1C2738; --card-edge: rgba(255,255,255,.06); --title: #EDF2F8; --body: #C6D0DC; --muted: #98A5B5;
    --sidebar: #0E1520; --sidebar-2: #070B12;
    --ok-bg: #12301F; --ok-fg: #8FE0AC; --warn-bg: #36280F; --warn-fg: #F6C878; --err-bg: #3A1A17; --err-fg: #F5ABA2;
    --info-bg: #1A2744; --info-fg: #AFC2FF; --teal-bg: #11302A; --teal-fg: #8DDDC8; --neu-bg: #1F2A3B; --neu-fg: #C3CDD8;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
    --shadow-lift: 0 4px 10px rgba(0,0,0,.5), 0 14px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(143,168,255,.12);
    --shadow-pop: 0 28px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06);
    --glow: rgba(143,168,255,.22); --band-a: rgba(93,203,250,.10); --band-b: rgba(65,103,246,.16);
    --skeleton: #1C2636; --link: #8FA8FF; /* brand blue is 3:1 on dark surfaces */ --lane: #0E1520;
  }
  * { box-sizing: border-box; }
  html, body, #root { margin: 0; height: 100%; }
  body { font-family: 'Roboto', system-ui, sans-serif; font-size: 13px; color: var(--body); background: var(--bg); }
  button, input, select, textarea { font: inherit; color: inherit; }
  a { color: var(--link); text-decoration: none; }
  a:hover { text-decoration: underline; }
  :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

  /* ── Shell ─────────────────────────────────────────────────────────────────────────── */
  .stage { height: 100%; }
  .stage.preview { background: #2A3E51; padding: 16px 0; overflow: auto; }
  .app { container-type: inline-size; container-name: app; height: 100%; display: flex; background: var(--bg); }
  .stage.preview .app { width: 390px; height: calc(100% - 0px); margin: 0 auto; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
  .sidebar { width: 220px; flex-shrink: 0; background: var(--sidebar); color: #fff; display: flex; flex-direction: column; }
  .brand { padding: 18px 16px 12px; font-weight: 700; font-size: 15px; letter-spacing: .2px; display: flex; gap: 10px; align-items: center; }
  .brand-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--sky), var(--blue)); display: grid; place-items: center; font-weight: 700; }
  .nav { padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; overflow-x: hidden; }
  .nav-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--sidebar-text);
              cursor: pointer; border: 0; background: transparent; text-align: left; width: 100%; }
  .nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
  .nav-item.active { background: rgba(65,103,246,.28); color: var(--sky); font-weight: 500; }
  .nav-item .count { margin-left: auto; background: var(--blue); color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
  .nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.62); padding: 12px 12px 4px; }
  .side-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.1); }
  .side-foot select { width: 100%; min-height: 40px; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 0 8px; }
  .side-foot select option { color: #000; }
  .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .topbar { height: 56px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; padding: 0 20px; }
  .topbar h1 { font-size: 18px; font-weight: 600; color: var(--title); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .crumb { color: var(--muted); font-size: 12px; white-space: nowrap; }
  .topbar .spacer { flex: 1; }
  .content { flex: 1; overflow-y: auto; padding: 20px 24px 32px; }
  .bottom-nav { display: none; }

  /* ── Building blocks ───────────────────────────────────────────────────────────────── */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 8px;
         border: 1px solid transparent; font-weight: 500; cursor: pointer; white-space: nowrap; }
  .btn:disabled { opacity: .5; cursor: not-allowed; }
  .btn-primary { background: var(--blue); color: #fff; }
  .btn-primary:hover:not(:disabled) { background: #3458e0; }
  .btn-secondary { background: var(--surface); color: var(--link); border-color: var(--link); }
  .btn-ghost { background: transparent; color: var(--body); border-color: var(--border); }
  .btn-danger { background: var(--surface); color: var(--err-fg); border-color: #E7A99C; }
  .btn-sm { min-height: 32px; padding: 0 10px; font-size: 12px; }
  .icon-btn { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: var(--muted); }
  .icon-btn:hover { background: var(--surface-2); color: var(--title); }
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
  .card-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
  .card-head h2, .card-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--title); }
  .card-head .sub { color: var(--muted); font-size: 12px; }
  .card-body { padding: 14px 16px; }
  .grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } /* minmax(0,…): wide tables scroll instead of widening the column */
  .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .stat { padding: 14px 16px; }
  .stat .label { font-size: 12px; color: var(--muted); }
  .stat .value { font-size: 22px; font-weight: 600; color: var(--blue); margin-top: 6px; line-height: 1.25; }
  .stat .value small { font-size: 13px; color: var(--muted); font-weight: 500; }
  .stat .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
  .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 500; white-space: nowrap; line-height: 18px; }
  .pill.ok { background: var(--ok-bg); color: var(--ok-fg); } .pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
  .pill.err { background: var(--err-bg); color: var(--err-fg); } .pill.info { background: var(--info-bg); color: var(--info-fg); }
  .pill.teal { background: var(--teal-bg); color: var(--teal-fg); } .pill.neu { background: var(--neu-bg); color: var(--neu-fg); }
  .muted { color: var(--muted); } .small { font-size: 12px; } .strong { font-weight: 600; color: var(--title); }
  .row { display: flex; align-items: center; gap: 8px; } .wrap { flex-wrap: wrap; } .between { justify-content: space-between; }
  .stack { display: flex; flex-direction: column; gap: 4px; }
  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; }
  .tab { min-height: 44px; padding: 0 14px; border: 0; background: transparent; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
  .card-menu { min-width: 32px; min-height: 32px; margin: -6px -8px 0 0; }
  .tab.active { color: var(--info-fg); border-bottom-color: var(--blue); }
  .tab .n { background: var(--neu-bg); color: var(--neu-fg); border-radius: 10px; padding: 0 7px; margin-left: 6px; font-size: 11px; }
  .filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
  .input, .select, textarea.input { min-height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--title); outline: none; }
  textarea.input { padding: 8px 10px; min-height: 72px; resize: vertical; }
  .input:focus, .select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(65,103,246,.15); }
  .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .field label { font-size: 12px; color: var(--muted); }
  .req { color: var(--err-fg); }   /* --error (#D96149) is 3.6:1 on white */
  .field .err, .err.small { color: var(--err-fg); font-size: 12px; }   /* --error is 3.6:1 on white */
  .field .input.bad, .field .select.bad { border-color: var(--error); }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .table { width: 100%; border-collapse: collapse; }
  .table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
  .table td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
  .table tr.click { cursor: pointer; } .table tr.click:hover td { background: var(--lighter); }
  .table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .table-wrap { overflow-x: auto; }
  .empty { text-align: center; padding: 36px 16px; color: var(--muted); }
  .empty .t { font-size: 14px; font-weight: 600; color: var(--title); margin-bottom: 6px; }
  .empty .ill { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 14px; background: var(--light); display: grid; place-items: center; color: var(--blue); }
  .skel { background: var(--skeleton); border-radius: 6px; height: 14px; position: relative; overflow: hidden; }
  .skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: shimmer 1.4s infinite; }
  @keyframes shimmer { to { transform: translateX(100%); } }
  .banner { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; display: flex; gap: 8px; align-items: flex-start; }
  .banner.info { background: var(--info-bg); color: var(--info-fg); } .banner.warn { background: var(--warn-bg); color: var(--warn-fg); }
  .banner.err { background: var(--err-bg); color: var(--err-fg); }
  .banner a { color: inherit; text-decoration: underline; font-weight: 500; } /* blue-on-tinted fails 4.5:1 */
  .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--light); color: var(--info-fg); display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
  .master-detail { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
  .list-item { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); cursor: pointer; display: flex; gap: 10px; min-height: 56px; }
  .list-item:hover { background: var(--lighter); } .list-item.active { background: var(--light); }
  .kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 10px; font-size: 13px; }
  .kv dt { color: var(--muted); } .kv dd { margin: 0; color: var(--title); min-width: 0; overflow-wrap: anywhere; }
  .section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 500; margin: 0 0 8px; }
  .progress { height: 8px; background: var(--neu-bg); border-radius: 6px; overflow: hidden; }
  .progress > span { display: block; height: 100%; background: var(--blue); }

  /* Pipeline board */
  .board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; scroll-snap-type: x proximity; }
  .col { flex: 0 0 260px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 230px); scroll-snap-align: start; }
  .col.drop { outline: 2px dashed var(--blue); outline-offset: -4px; }
  .col-head { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
  .col-head .name { font-weight: 600; color: var(--title); } .col-head .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .col-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 80px; }
  .deal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: grab; box-shadow: var(--shadow); }
  .deal-card:active { cursor: grabbing; } .deal-card .co { font-weight: 600; color: var(--title); }
  .deal-card .nm { color: var(--body); margin: 2px 0 6px; } .deal-card .amt { font-weight: 600; color: var(--title); font-variant-numeric: tabular-nums; }
  .closed-col { flex: 0 0 170px; } .drop-zone { margin: 8px; padding: 14px 10px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; color: var(--muted); }
  .drop-zone.won.drop { border-color: var(--success); background: var(--ok-bg); } .drop-zone.lost.drop { border-color: var(--error); background: var(--err-bg); }

  /* Stage stepper */
  .stepper { display: flex; gap: 6px; flex-wrap: wrap; }
  .step { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; }
  .step.done { background: var(--light); color: var(--info-fg); border-color: transparent; }
  .step.current { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 500; }

  /* Timeline */
  .tl-item { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
  .tl-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--light); color: var(--blue); }
  .tl-icon.wa { background: var(--ok-bg); color: var(--ok-fg); } .tl-icon.note { background: var(--warn-bg); color: var(--warn-fg); }
  .tl-body { white-space: pre-wrap; color: var(--body); margin-top: 3px; }
  .suggestion-preview { margin-top: 6px; color: var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .capture-line { padding: 6px 0; border-bottom: 1px solid var(--border-soft); } .capture-line:last-of-type { border-bottom: 0; }
  .capture-line code { font-size: 13px; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }

  /* Modal (bottom sheet on narrow screens) + toasts */
  .overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: grid; place-items: center; z-index: 50; padding: 16px; }
  .modal { background: var(--surface); border-radius: 12px; width: min(520px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
  .modal-head { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
  .modal-head h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--title); flex: 1; }
  .modal-body { padding: 16px; overflow-y: auto; }
  .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border-soft); }
  .sheet-handle { display: none; }
  .toasts { position: fixed; top: 14px; right: 14px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 28px)); }
  .toast { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: 8px; padding: 10px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.15); animation: slide .2s ease-out; }
  .toast.ok { border-left-color: var(--success); } .toast.err { border-left-color: var(--error); }
  @keyframes slide { from { transform: translateY(-6px); opacity: 0; } }
  .dev { position: fixed; right: 14px; bottom: 14px; z-index: 40; width: 300px; }
  .menu-item { display: flex; align-items: center; gap: 8px; min-height: 44px; width: 100%; padding: 0 10px; border: 0; background: transparent;
               border-radius: 8px; cursor: pointer; color: var(--title); text-align: left; }
  .menu-item:hover { background: var(--surface-2); }
  .md-only { display: none; }
  /* ── Live sign-in ── */
  .wa-reply { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 4px; }
  .wa-reply textarea { width: 100%; min-height: 72px; }
  .tick { display: inline-flex; align-items: center; gap: 2px; } .tick.read { color: var(--info-fg); font-weight: 500; } .tick.failed { color: var(--err-fg); font-weight: 500; }
  .nav-item .soon { color: rgba(255,255,255,.75); font-size: 11px; }
  .live-user { display: flex; flex-direction: column; gap: 8px; }
  .live-user .signout, .live-user .signout:hover:not(:disabled) { color: #fff; background: transparent; border-color: rgba(255,255,255,.35); align-self: flex-start; }
  .live-user .signout:hover:not(:disabled) { background: rgba(255,255,255,.1); }
  .signin-page { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); }
  .signin-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px; box-shadow: var(--shadow); }
  .btn.block { width: 100%; justify-content: center; min-height: 44px; }
  .signin-card .input { min-height: 44px; }   /* outside the app container, so the phone rules do not reach it */
  .boot { display: grid; place-items: center; height: 100%; text-align: center; color: var(--muted); }
  .boot-mark { margin: 0 auto 12px; color: #fff; }
  /* ── Performance ── */
  .perf-targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
  .perf-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .perf-period { min-width: 150px; text-align: center; }
  .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
  .seg button { min-height: 36px; padding: 0 12px; border: 0; background: transparent; color: var(--body); cursor: pointer; }
  .seg button + button { border-left: 1px solid var(--border); }
  .seg button[aria-pressed="true"] { background: var(--info-bg); color: var(--info-fg); font-weight: 600; }
  .linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
  .linkbtn:hover { color: var(--link); }
  .fc-bar { position: relative; display: flex; height: 8px; min-width: 90px; background: var(--neu-bg); border-radius: 6px; }
  .fc-bar span { display: block; height: 100%; } .fc-bar .won { background: var(--blue); border-radius: 6px 0 0 6px; }
  .fc-bar .commit { background: var(--sky); } .fc-bar .best { background: var(--light); box-shadow: inset 0 0 0 1px var(--blue); }
  .fc-bar i { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; background: var(--title); }
  .fc-bar + .pill { margin-top: 6px; }
  .list-item.chg { width: 100%; border: 0; border-bottom: 1px solid var(--border-soft); background: transparent; text-align: left; align-items: center; color: var(--body); min-height: 48px; }
  .chg-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--light); color: var(--info-fg); flex-shrink: 0; }
  .chg-icon.close_pushed, .chg-icon.value_changed { background: var(--warn-bg); color: var(--warn-fg); }
  .chg-icon.lost { background: var(--err-bg); color: var(--err-fg); } .chg-icon.moved_forward { background: var(--ok-bg); color: var(--ok-fg); }
  .target-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; }
  .target-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; }
  .target-row .input { width: 100%; min-width: 0; }
  .target-row .err { grid-column: 1 / -1; color: var(--err-fg); font-size: 12px; }
  .perf-cta { display: none; }
  /* ── Pipeline & deal ── */
  .flag-btn { border: 0; cursor: pointer; font: inherit; font-size: 11px; font-weight: 500; }
  .flag-btn:hover { filter: brightness(.96); }
  .bulk-bar { gap: 10px 14px; background: var(--light); border-bottom: 1px solid var(--border-soft); border-radius: var(--radius) var(--radius) 0 0; }
  .check-col { width: 44px; } .check-col input, .pick-list input { width: 20px; height: 20px; accent-color: var(--blue); }
  .step-days { font-size: 11px; opacity: .85; margin-left: 2px; }
  .pinned-step { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--light); color: var(--title); flex-wrap: wrap; }
  .pinned-step.overdue { background: var(--err-bg); color: var(--err-fg); } .pinned-step.empty { background: var(--warn-bg); color: var(--warn-fg); }
  .pinned-step .strong { color: inherit; }
  .tl-filters { gap: 6px; margin: 12px 0 4px; }
  .chip { min-height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--body); cursor: pointer; }
  .chip[aria-pressed="true"] { background: var(--info-bg); color: var(--info-fg); border-color: transparent; font-weight: 600; }
  .owner-pick .select { min-height: 30px; padding: 2px 8px; font-size: 12px; }
  .pick-list { border: 1px solid var(--border); border-radius: 8px; padding: 4px; margin-bottom: 10px; max-height: 240px; overflow-y: auto; }
  .deal-cta { display: none; }
  /* ── Lists: filters, chips, bulk ── */
  .chip-row { gap: 6px; margin: -4px 0 12px; }
  .chip.on { background: var(--info-bg); color: var(--info-fg); border-color: transparent; display: inline-flex; align-items: center; gap: 4px; }
  .filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
  .filter-grid .span-2 { grid-column: 1 / -1; }
  .rel-row { gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border-soft); }
  .list-meta { gap: 8px; border-bottom: 1px solid var(--border-soft); padding-top: 8px; padding-bottom: 8px; }
  .sticky-bulk { position: sticky; top: 0; z-index: 4; padding: 10px 14px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
  .picker { position: relative; display: inline-block; min-width: 200px; } .picker .input { width: 100%; }
  .form-grid .picker { display: block; } .form-grid .span-2 { grid-column: 1 / -1; }
  .new-company { padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
  .picker-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 6; padding: 4px; max-height: 240px; overflow-y: auto; }
  /* ── People ── */
  fieldset.plain { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  fieldset.plain legend { padding: 0; margin-bottom: 6px; color: var(--title); }
  fieldset.plain .err { color: var(--err-fg); font-size: 12px; }
  .choice { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 8px 0; cursor: pointer; }
  .choice input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--blue); }
  .line-pick { gap: 10px; min-height: 44px; }

  /* ── Import data ── */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .wizard-steps { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0 0 14px; margin: 0 0 16px; border-bottom: 1px solid var(--border-soft); font-size: 13px; color: var(--muted); }
  .wizard-steps li { display: flex; align-items: center; gap: 6px; }
  .wizard-steps .n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); font-size: 12px; }
  .wizard-steps li.now { color: var(--title); font-weight: 600; } .wizard-steps li.now .n { background: var(--blue); border-color: var(--blue); color: #fff; }
  .wizard-steps li.done .n { background: var(--info-bg); border-color: var(--info-bg); color: var(--info-fg); }
  .dropzone { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px 16px; border: 1.5px dashed var(--border); border-radius: 10px; cursor: pointer; color: var(--body); background: var(--surface); }
  .dropzone:hover, .dropzone:focus-within { border-color: var(--link); } .dropzone:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }
  .dropzone.has { border-style: solid; }
  .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .tile { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
  .tile .value { font-size: 22px; font-weight: 600; color: var(--title); margin-top: 4px; } .tile.warn { border-color: var(--warn-fg); } .tile.warn .small { color: var(--warn-fg); display: flex; gap: 4px; align-items: center; }
  .bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } .bar span { display: block; height: 100%; background: var(--blue); transition: width .2s; }
  .value-row .select { min-width: 200px; }
  @media (max-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .value-row .select { min-width: 0; width: 100%; } }
  @media (prefers-reduced-motion: reduce) { .bar span { transition: none; } }

  /* ── Invoices ── */
  .inv-stats { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .inv-tabs { overflow-x: auto; flex-wrap: nowrap; } .inv-tabs .tab { white-space: nowrap; }
  .inv-history { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
  @media (max-width: 900px) { .inv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ── Guides ── */
  .guide-ring { position: fixed; z-index: 45; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 3px var(--blue), 0 0 0 9999px rgba(15,23,42,.42); transition: all .2s; }
  .guide-card { position: fixed; z-index: 55; width: 340px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0,0,0,.22); }
  .guide-card.sheet { left: 12px; right: 12px; bottom: 76px; width: auto; }
  @media (min-width: 640px) { .guide-card.sheet { left: auto; right: 24px; bottom: 24px; width: 360px; } }
  .guide-card h3 { margin: 8px 0 4px; font-size: 15px; color: var(--title); } .guide-card p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
  .guide-dots { display: flex; gap: 5px; margin-top: 6px; } .guide-dots span { width: 18px; height: 4px; border-radius: 2px; background: var(--border); }
  .guide-dots span.done { background: var(--info-fg); } .guide-dots span.now { background: var(--blue); }
  .guide-offer { position: fixed; right: 20px; bottom: 20px; z-index: 44; width: 300px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
  .guide-help { font-weight: 700; font-size: 16px; } .guide-menu { position: absolute; right: 0; top: 44px; z-index: 20; min-width: 260px; padding: 6px; }
  @media (max-width: 767px) { .guide-offer { left: 12px; right: 12px; bottom: 76px; width: auto; } }
  @media (prefers-reduced-motion: reduce) { .guide-ring { transition: none; } }

  /* ── Pipelines & stages ── */
  .stage-table .input { min-width: 110px; } .stage-table .select { max-width: 132px; } .stage-table .input.num { width: 62px; min-width: 62px; text-align: right; }
  .stage-table th, .stage-table td { padding-left: 8px; padding-right: 8px; }
  .stage-table .input.bad { border-color: var(--error); } .stage-table .add-field { min-height: 32px; width: auto; }
  .stage-table td { vertical-align: top; } .stage-table .closed-stage td { background: var(--surface-2); }
  .chip-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: -6px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
  .chip-x:hover { background: rgba(0,0,0,.08); }
  .savebar { position: sticky; bottom: 12px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
  @media (max-width: 767px) {
    .savebar { position: fixed; left: 12px; right: 12px; bottom: 68px; z-index: 30; } .with-savebar { padding-bottom: 96px; }
    .stage-table .input { min-width: 0; width: 100%; } .stage-table .select { max-width: none; } .chip-x { width: 44px; height: 44px; margin: -10px -14px -10px -6px; }
  }

  /* ── Redesign layer: overrides the base rules above; the tablet / phone rules below still win ───────────────── */
  body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  .num, .stat .value, .tile .value, .amt, .kv dd, .table td { font-variant-numeric: tabular-nums; }
  /* Shell: deep navy sidebar, glowing active item, a soft brand band behind every page header (never behind data) */
  .sidebar { background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2)); box-shadow: inset -1px 0 0 rgba(255,255,255,.05); }
  .brand { padding: 20px 18px 14px; }
  .brand-mark { width: 32px; height: 32px; border-radius: 10px; box-shadow: 0 6px 18px rgba(65,103,246,.45), inset 0 1px 0 rgba(255,255,255,.35); }
  .nav { gap: 3px; padding: 6px 10px; }
  .nav-item { border-radius: 10px; transition: background .18s var(--ease), color .18s var(--ease); }
  .nav-item svg { opacity: .85; }
  .nav-item.active { background: linear-gradient(90deg, rgba(65,103,246,.6), rgba(65,103,246,.2)); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 18px rgba(65,103,246,.3); }
  .nav-item.active svg { opacity: 1; color: var(--sky); }
  .nav-item .count { background: linear-gradient(180deg, #5B7BFF, var(--blue-deep)); box-shadow: 0 2px 8px rgba(65,103,246,.5); }
  .side-foot select { border-radius: 10px; }
  .main { background: radial-gradient(900px 220px at 15% -80px, var(--band-a), transparent 70%),
                      radial-gradient(900px 260px at 85% -120px, var(--band-b), transparent 70%), var(--bg); }
  .topbar { height: 64px; background: transparent; border-bottom: 0; padding: 0 24px; }
  .topbar h1 { font-size: 22px; font-weight: 700; letter-spacing: -.2px; }
  .content { padding: 6px 24px 40px; }
  .content > * { animation: rise .26s var(--ease) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } }
  /* Surfaces: soft layered shadows instead of grey borders; lift on hover (shadow + 2px, never scale) */
  .card { border: 1px solid var(--card-edge); border-radius: var(--radius); box-shadow: var(--shadow); }
  .card-head { padding: 16px 18px 10px; border-bottom: 0; }
  .card-head h2, .card-head h3 { font-size: 15px; }
  .card-body { padding: 12px 18px 18px; }
  .btn { border-radius: var(--radius-sm); min-height: 38px; padding: 0 16px; transition: background .18s var(--ease), box-shadow .18s var(--ease), border-color .18s, color .18s; }
  .btn-primary { background: linear-gradient(180deg, var(--blue), var(--blue-deep)); box-shadow: 0 1px 2px rgba(51,82,217,.35), 0 6px 16px rgba(65,103,246,.26), inset 0 1px 0 rgba(255,255,255,.16); }
  .btn-primary:hover:not(:disabled) { background: var(--blue-deep); box-shadow: 0 2px 4px rgba(51,82,217,.35), 0 10px 24px rgba(65,103,246,.34); }
  .btn-secondary:hover:not(:disabled) { background: var(--light); }
  .btn-ghost { background: var(--surface); }
  .btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--title); }
  .btn-danger:hover:not(:disabled) { background: var(--err-bg); }
  .btn-sm { min-height: 32px; border-radius: 9px; padding: 0 12px; }
  .icon-btn { border-radius: 10px; transition: background .18s, color .18s; }
  .input, .select, textarea.input { border-radius: var(--radius-sm); min-height: 40px; padding: 0 12px; transition: border-color .18s, box-shadow .18s; }
  .input:focus, .select:focus { box-shadow: 0 0 0 4px var(--glow); }
  .pill { padding: 3px 10px; font-weight: 600; }
  .tabs { gap: 2px; border-bottom-color: var(--border-soft); }
  .tab { transition: color .18s; } .tab:hover { color: var(--title); } .tab.active { color: var(--title); border-bottom-width: 3px; }
  .table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; background: var(--surface-2); border-bottom-color: var(--border-soft); }
  .table tr.click td { transition: background .15s; } .table tbody tr:last-child td { border-bottom: 0; }
  .stat { padding: 18px 20px; }
  .stat .label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
  .stat .value { font-size: 28px; font-weight: 700; color: var(--title); letter-spacing: -.5px; }
  .empty .ill { width: 72px; height: 72px; border-radius: 22px; background: radial-gradient(circle at 30% 25%, var(--surface), var(--light) 70%);
    box-shadow: 0 10px 30px var(--glow), inset 0 0 0 1px var(--card-edge); }
  [data-theme="dark"] .skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
  .banner { border-radius: 12px; padding: 12px 16px; }
  .avatar { background: linear-gradient(135deg, #DCE6FF, #C6D6FF); color: #24409E; }
  [data-theme="dark"] .avatar { background: linear-gradient(135deg, #2A3D6B, #1B2948); color: #C9D6FF; }
  .list-item { transition: background .15s; } .list-item.active { box-shadow: inset 3px 0 0 var(--blue); }
  .progress > span { background: linear-gradient(90deg, var(--sky), var(--blue)); border-radius: 6px; }
  .overlay { background: rgba(10,15,25,.45); backdrop-filter: blur(4px); animation: fade .18s; }
  .modal { border-radius: 18px; box-shadow: var(--shadow-pop); animation: pop .22s var(--ease); }
  @keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
  @keyframes fade { from { opacity: 0; } }
  .modal-head { padding: 16px 20px; } .modal-body { padding: 18px 20px; } .modal-foot { padding: 14px 20px; }
  .toast { border-radius: 12px; border-color: var(--card-edge); box-shadow: var(--shadow-lift); }
  .seg { border-radius: 11px; padding: 3px; gap: 2px; background: var(--surface-2); border-color: var(--border-soft); }
  .seg button { border-radius: 8px; min-height: 32px; } .seg button + button { border-left: 0; }
  .seg button[aria-pressed="true"] { background: var(--surface); color: var(--title); box-shadow: var(--shadow); }
  .chip { transition: background .15s, color .15s; }
  .step { transition: background .18s, color .18s; } .step.current { background: linear-gradient(180deg, var(--blue), var(--blue-deep)); box-shadow: 0 4px 12px rgba(65,103,246,.3); }
  .pinned-step, .drop-zone, .new-company, .dropzone { border-radius: 12px; }
  /* Pipeline: soft lanes, a win-chance bar per stage (cool → warm), cards that lift, a gentle glow on deals needing you */
  .board { gap: 14px; }
  .col { background: var(--lane); border: 0; border-radius: 16px; }
  .col-head { border-bottom: 0; padding: 12px 14px 8px; }
  .wc { height: 4px; border-radius: 4px; margin-top: 10px; background: var(--neu-bg); overflow: hidden; } .wc > span { display: block; height: 100%; border-radius: 4px; }
  .col-body { padding: 4px 10px 12px; gap: 10px; }
  .deal-card { border: 1px solid var(--card-edge); border-radius: 12px; padding: 12px 14px; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
  .deal-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
  .deal-card.dragging { opacity: .5; transform: rotate(1deg); }
  .deal-card.attn { box-shadow: var(--shadow), 0 0 0 1px rgba(217,145,20,.45), 0 0 18px rgba(217,145,20,.16); }
  .deal-card .amt { font-size: 15px; font-weight: 700; }
  .col.drop { background: var(--light); }
  /* Record highlights + monograms */
  .highlights { display: flex; flex-wrap: wrap; gap: 1px; margin: 16px 0 0; background: var(--border-soft);
    border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; }
  .hl { flex: 1 1 118px; background: var(--surface); padding: 10px 14px; min-width: 0; }   /* the last row stretches: no empty cells */
  .hl dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
  .hl dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; color: var(--title); font-variant-numeric: tabular-nums; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .hl.wide { flex-grow: 2; flex-basis: 180px; }
  .hl.warn dd { color: var(--warn-fg); } .hl.err dd { color: var(--err-fg); }
  .mono { display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 10px; font-weight: 700; letter-spacing: .3px;
    color: hsl(var(--h) 60% 28%); background: hsl(var(--h) 75% 92%); box-shadow: inset 0 0 0 1px hsl(var(--h) 50% 80% / .6); }
  [data-theme="dark"] .mono { color: hsl(var(--h) 75% 84%); background: hsl(var(--h) 35% 22%); box-shadow: inset 0 0 0 1px hsl(var(--h) 40% 35% / .6); }
  .name-cell { display: flex; align-items: center; gap: 12px; min-width: 220px; }
  .name-cell .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .fold-sub { display: none; }
  .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
  .check-hit { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; margin: -10px -8px; cursor: pointer; }
  .check-col input, .check-hit input { width: 22px; height: 22px; flex-shrink: 0; margin: 0; }
  .sort-select { min-height: 34px; } .list-meta { align-items: center; }
  /* Laptop widths: optional list columns fold into the name's second line instead of scrolling the table sideways */
  @container app (min-width: 768px) and (max-width: 1240px) { .opt-col { display: none; } .fold-sub { display: block; } }
  /* Sidebar: a thin navy scrollbar, and items sized to fit a 720px-tall laptop screen */
  .nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
  .nav::-webkit-scrollbar { width: 6px; } .nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
  .nav-item { min-height: 40px; } .nav-label { padding-top: 10px; }
  /* Pipeline cards: the whole card opens the deal; the attention flag gets a full-size tap area without looking bigger */
  .deal-card { cursor: pointer; } .flag-btn { position: relative; } .flag-btn::after { content: ''; position: absolute; inset: -11px -4px; }
  .more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; padding: 6px; box-shadow: var(--shadow-lift); }
  .more-btn { min-width: 36px; padding: 0 8px; }
  .camp-table th, .camp-table td { padding-left: 8px; padding-right: 8px; }
  .menu-item.danger { color: var(--err-fg); } .menu-item.danger:hover { background: var(--err-bg); }
  /* Sparklines */
  .spark { display: block; width: 100%; height: 34px; margin-top: 10px; color: var(--blue); overflow: visible; }
  [data-theme="dark"] .spark { color: var(--link); }
  /* Ctrl+K command bar */
  .cmdk-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; min-width: 240px; padding: 0 8px 0 12px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); color: var(--muted); cursor: pointer; box-shadow: var(--shadow); transition: border-color .18s, color .18s; }
  .cmdk-btn:hover { border-color: var(--blue); color: var(--title); }
  .kbd { margin-left: auto; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
  .cmdk-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(10,15,25,.45); backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: flex-start;
    padding: 12vh 16px 16px; animation: fade .15s; }
  .cmdk { width: min(640px, 100%); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-pop); overflow: hidden; animation: pop .2s var(--ease); }
  .cmdk-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border-soft); color: var(--muted); }
  .cmdk-input input { flex: 1; min-height: 56px; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--title); }
  .cmdk-list { max-height: min(60vh, 440px); overflow-y: auto; padding: 6px 8px 8px; }
  .cmdk-group { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
  .cmdk-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--title); cursor: pointer; text-align: left; }
  .cmdk-item .sub { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
  .cmdk-item[aria-selected="true"] { background: var(--light); box-shadow: inset 3px 0 0 var(--blue); }
  .cmdk-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); flex-shrink: 0; }
  .cmdk-item[aria-selected="true"] .cmdk-ico { background: var(--surface); color: var(--blue); }
  .cmdk-foot { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 16px; border-top: 1px solid var(--border-soft); color: var(--muted); font-size: 12px; }
  .cmdk-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
  .cmdk-foot .kbd, .cmdk-input .kbd { margin-left: 0; }

  /* ── Tablet: icon-only sidebar ─────────────────────────────────────────────────────── */
  @container app (max-width: 1024px) {
    .sidebar { width: 64px; } .brand span, .nav-item .lbl, .nav-label, .side-foot .lbl { display: none; }
    .nav-item { justify-content: center; padding: 0; } .nav-item .count { position: absolute; margin: -18px 0 0 22px; }
    .nav-item { position: relative; } .side-foot { padding: 8px; } .split { grid-template-columns: minmax(0, 1fr) 280px; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmdk-btn { min-width: 170px; }
  }
  /* ── Mobile: bottom tab bar, single column, tables become cards, modals become sheets ── */
  @container app (max-width: 767px) {
    .sidebar { display: none; }
    .bottom-nav { display: flex; position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); }
    .bottom-nav button { flex: 1; min-height: 56px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--muted); cursor: pointer; }
    .bottom-nav button.active { color: var(--link); }
    .topbar { padding: 0 8px 0 14px; } .topbar .crumb, .topbar .hide-sm { display: none; }
    .content { padding: 14px 12px 20px; font-size: 14px; }
    .stats { grid-template-columns: 1fr 1fr; gap: 10px; } .stat .value { font-size: 18px; }
    .split, .master-detail { grid-template-columns: minmax(0, 1fr); } .form-grid { grid-template-columns: 1fr; }
    .md-hide-detail .detail-pane { display: none; } .md-show-detail .master-pane { display: none; }
    .table.cards thead { display: none; }
    .table.cards tr { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; padding: 10px 12px; }
    .table.cards td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
    .table.cards td::before { content: attr(data-label); color: var(--muted); font-size: 12px; text-align: left; }
    .table.cards td.primary { display: block; text-align: left; font-weight: 600; color: var(--title); font-size: 14px; } .table.cards td.primary::before { display: none; }
    .col { flex-basis: 86%; max-height: none; } .closed-col { flex-basis: 60%; }
    .overlay { place-items: end center; padding: 0; }
    .modal { width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }
    .sheet-handle { display: block; width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 8px auto 0; }
    .modal-foot .btn { flex: 1; min-height: 44px; } .btn { min-height: 44px; } .btn-sm { min-height: 44px; min-width: 44px; } .card-menu { min-width: 44px; min-height: 44px; } .input, .select, .step { min-height: 44px; }
    .kv { grid-template-columns: 110px minmax(0, 1fr); } .dev { left: 8px; right: 8px; width: auto; bottom: 64px; }
    .md-only { display: inline-grid; } .kbd-hint { visibility: hidden; }
    .perf-2 { grid-template-columns: minmax(0, 1fr); } .perf-targets { grid-template-columns: minmax(0, 1fr); }
    .seg button { min-height: 44px; } .linkbtn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: flex-end; }
    .perf-period { min-width: 0; } .perf-bar .hide-sm, .deal-page .hide-sm { display: none; }
    .deal-cta { display: flex; gap: 8px; position: sticky; bottom: -20px; margin-bottom: -20px; padding: 12px 0 20px; background: linear-gradient(transparent, var(--bg) 30%); }
    .filter-grid { grid-template-columns: minmax(0, 1fr); }
    .sticky-bulk { position: fixed; top: auto; left: 12px; right: 12px; bottom: 68px; z-index: 30; margin: 0; max-height: 50vh; overflow-y: auto; }
    .with-bulk { padding-bottom: 220px; }
    .picker { min-width: 0; width: 100%; }
    .cmdk-btn { min-width: 44px; min-height: 44px; padding: 0 12px; } .cmdk-btn .lbl, .cmdk-btn .kbd { display: none; }
    .name-cell { min-width: 0; } .nav-item { min-height: 44px; } .filters .select, .filters .input { max-width: 100%; }
    .table.cards td.check-col { width: auto; justify-content: space-between; } .table.cards td.check-col::before { align-self: center; }
    .topbar h1 { font-size: 18px; } .cmdk-overlay { padding-top: 8vh; } .stat .value { font-size: 20px; }
    .deal-cta .btn:first-child { flex: 1; } .chip { min-height: 44px; min-width: 44px; } .owner-pick .select { min-height: 44px; font-size: 14px; }
    .perf-cta { display: block; position: sticky; bottom: -20px; margin-bottom: -20px; padding: 14px 0 20px; background: linear-gradient(transparent, var(--bg) 30%); }
  }