/* appview.css — the CRM App View (phones & tablets ≤ 900px, the Android/iOS apps).
   From the design "CRM App View" (Bayut&Co - Co-working CRM/CRM app view redesign):
   flat Ant-style surfaces — #f5f5f5 ground, white cards with a 1px #f0f0f0 line and
   12px radius, Lato, 44px header controls, a 5-tab bottom bar with line icons and a
   "More" sheet. Desktop (> 900px) is untouched: every rule here is inside one query. */
@media (max-width: 900px) {
  :root {
    --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-disp: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --av-line: #f0f0f0; --av-line2: #d9d9d9; --av-ink: rgba(0,0,0,.88); --av-mute: rgba(0,0,0,.65); --av-dim: rgba(0,0,0,.45);
    --av-green: #249f62; --av-green-h: #28b16d; --av-green-d: #1c7c4c; --av-green-bg: #e9f7f0; --av-deep: #0c3520;
    --av-red: #cf1322; --av-red-bg: #fff1f0; --av-gold: #d48806; --av-gold-bg: #fffbe6; --av-amber: #faad14;
    --shadow: none; --shadow-sm: none; --shadow-lift: none; --glow: none;
    --r-lg: 12px; --r-md: 12px; --r-sm: 8px;
  }
  body, .main, .content { background: #f5f5f5 !important; color: var(--av-ink); }
  body { font-size: 14px; }

  /* ── header: menu · search · + · bell · avatar, one 44px row ─────────── */
  .topbar { flex-wrap: nowrap !important; gap: 8px !important; padding: 10px 16px !important; background: #fff !important; border-bottom: 1px solid var(--av-line) !important; box-shadow: none !important; backdrop-filter: none !important; min-height: 0 !important; }
  .topbar::before, .topbar::after { display: none !important; }
  .topbar .crumb, .topbar .view-switch, .topbar .btn.t-hide-sm, .topbar .grow, .topbar .gs-kbd, .topbar .btn.primary .lbl { display: none !important; }
  .navtoggle { width: 44px !important; height: 44px !important; border: 1px solid var(--av-line2) !important; border-radius: 8px !important; margin: 0 !important; padding: 0 12px !important; gap: 5px !important; }
  .navtoggle span { background: var(--av-ink) !important; }
  .topbar .gsearch { flex: 1 1 auto !important; max-width: none !important; width: auto !important; order: 0 !important; margin: 0 !important; }
  .topbar .gsearch input { height: 44px !important; border: 1px solid var(--av-line2) !important; border-radius: 8px !important; background: #fff !important; font-size: 14px !important; box-shadow: none !important; padding-inline-start: 34px !important; }
  .topbar .gsearch .gs-ic { inset-inline-start: 11px !important; color: var(--av-dim) !important; }
  .topbar > .btn, .topbar div > .btn { width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; border-radius: 8px !important; display: inline-flex !important; align-items: center; justify-content: center; border: 1px solid var(--av-line2) !important; background: #fff !important; box-shadow: none !important; }
  .topbar .btn.primary { background: var(--av-green) !important; border-color: var(--av-green) !important; color: #fff !important; }
  .topbar .btn svg { width: 20px; height: 20px; }
  .topbar #nbadge { position: absolute; top: -6px; right: -6px; }
  .topbar #nbadge:not(:empty) { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ff4d4f; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .user-chip { padding: 0 !important; border: none !important; background: none !important; box-shadow: none !important; gap: 0 !important; }
  .user-chip > div:last-child { display: none !important; }
  .user-chip .avatar { width: 44px !important; height: 44px !important; border-radius: 22px !important; background: var(--av-green) !important; border: 2px solid #bee7d3 !important; font-size: 14px !important; color: #fff !important; box-shadow: none !important; }

  /* the drawer's edge highlight is a fixed 1px line at 245px — it showed through every phone screen */
  .sider:not(.open)::after { display: none !important; }

  /* a narrower drawer on phones — 246px covered ~60% of a 400px screen */
  .sider { width: 220px !important; }
  .sider::after { left: 219px; }
  .sider-logo { padding: 20px 16px 16px; gap: 10px; }
  .sider-logo .mark { width: 32px; height: 32px; }
  .sider-logo .wm { height: 15px; }
  .sider-brand { margin-inline: 16px; }
  .nav-group { padding-inline: 10px; }
  /* short menu names (NAV_SHORT in app.js) */
  .sider .lf { display: none; }
  .sider .ls { display: inline; }

  /* ── surfaces ─────────────────────────────────────────────────────────── */
  .content { padding: 16px 16px 96px !important; }
  .card, .kpi, .ops, .td, .tkt, .dcard, .acc-card, .prod-card { background: #fff !important; border: 1px solid var(--av-line) !important; border-radius: 12px !important; box-shadow: none !important; }
  .card { padding: 16px !important; margin-bottom: 0; }
  .card:hover, .kpi:hover, .ops:hover, .td:hover { transform: none !important; box-shadow: none !important; }
  .card h3 { font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0 !important; margin-bottom: 12px !important; }
  .card h3::before { width: 4px !important; height: 18px !important; border-radius: 2px !important; background: var(--av-green) !important; box-shadow: none !important; }
  .card h3 .rt { display: inline !important; font-size: 13px !important; color: var(--av-green) !important; font-weight: 700 !important; }
  .screen-head { margin-bottom: 16px !important; align-items: center !important; }
  .screen-title, .sec-title { font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.3px !important; font-family: var(--font) !important; }
  .screen-sub, .sec-sub { display: none !important; }
  .grid, .dash-row2, .grid2 { gap: 16px !important; }
  .grid[style*="fr"] { grid-template-columns: 1fr !important; }
  .card + .card, .grid + .grid, .card + .grid { margin-top: 16px; }

  /* buttons, chips, tags, segments — flat */
  .btn { border-radius: 8px !important; border: 1px solid var(--av-line2) !important; background: #fff !important; color: var(--av-ink) !important; font-weight: 700 !important; font-size: 14px !important; box-shadow: none !important; height: 40px; min-height: 40px !important; padding: 0 14px !important; }
  .btn.sm { height: 36px; min-height: 36px !important; font-size: 13px !important; padding: 0 12px !important; }
  .btn.primary { background: var(--av-green) !important; border-color: var(--av-green) !important; color: #fff !important; filter: none !important; }
  .btn.danger { color: var(--av-red) !important; border-color: rgba(207,19,34,.35) !important; }
  .btn:hover, .btn:active { transform: none !important; box-shadow: none !important; }
  .chip, .bktc, .amchip, .qc { height: 36px !important; min-height: 36px !important; padding: 0 14px !important; border-radius: 18px !important; border: 1px solid var(--av-line2) !important; background: #fff !important; color: var(--av-mute) !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: none !important; transform: none !important; --bg: #fff; --fg: var(--av-mute); }
  .chip.on, .bktc.on, .amchip.on, .qc.now { border-color: var(--av-green) !important; background: var(--av-green-bg) !important; color: var(--av-green-d) !important; }
  .chip b, .bktc b { color: inherit !important; opacity: .7; }
  .tag { border-radius: 4px !important; font-size: 11px !important; font-weight: 700 !important; padding: 2px 8px !important; }
  .seg, .ld-seg, .view-switch, .segwrap, .amchips { display: inline-flex !important; gap: 3px !important; padding: 3px !important; border: 1px solid var(--av-line2) !important; border-radius: 8px !important; background: #fff !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .segb, .view-switch button, .segwrap .chip, .amchips .chip { flex: 1 0 auto !important; height: 38px !important; min-height: 38px !important; border: none !important; border-radius: 6px !important; background: transparent !important; color: var(--av-mute) !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: none !important; padding: 0 12px !important; }
  .segb.on, .view-switch button.on, .segwrap .chip.on, .amchips .chip.on { background: var(--av-green) !important; color: #fff !important; }
  .ai-brief { border: 1px solid var(--av-line) !important; background: #fff !important; }
  .empty { padding: 26px 8px !important; font-size: 14px !important; color: var(--av-dim) !important; }
  .mut, .mut2 { color: var(--av-dim) !important; }
  input.finput, select.finput, .finput { height: 44px !important; border: 1px solid var(--av-line2) !important; border-radius: 8px !important; background: #fff !important; font-size: 14px !important; box-shadow: none !important; }

  /* KPI tiles: a left colour bar, 22px figure */
  .kpis { gap: 12px !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; margin-bottom: 16px !important; }
  .kpi { padding: 14px 16px !important; border-left: 4px solid var(--av-green) !important; }
  .kpi::after { display: none !important; }
  .kpi .k-l { font-size: 11px !important; letter-spacing: 1px !important; text-transform: uppercase; color: var(--av-dim) !important; font-weight: 700 !important; }
  .kpi .k-v { font-size: 22px !important; letter-spacing: -.3px !important; margin: 2px 0 !important; font-family: var(--font) !important; font-weight: 700 !important; }
  .kpi .k-s { font-size: 12px !important; color: var(--av-dim) !important; }
  .kpi.warn, .kpi:has(.warn) { border-left-color: var(--av-gold) !important; }
  .kpi.bad, .kpi:has(.bad) { border-left-color: var(--av-red) !important; }
  .ops-strip { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: 12px !important; overflow: visible !important; margin-bottom: 16px !important; }
  .ops { flex: none !important; padding: 14px 16px !important; }
  .ops b { font-size: 26px !important; font-family: var(--font) !important; letter-spacing: 0 !important; }
  .ops span { font-size: 13px !important; color: var(--av-mute) !important; }
  .ops.warn b { color: var(--av-gold) !important; } .ops.bad b { color: var(--av-red) !important; }

  /* the phone toolbar: primary + a couple, the rest behind ⋯ */
  .screen-actions .btn.m-acts-t { width: 40px; padding: 0 !important; font-weight: 900 !important; }
  .m-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; margin: -6px 0 14px; background: #fff; border: 1px solid var(--av-line); border-radius: 12px; }
  /* leads: the design's three figures */
  .ops-strip .ops:nth-child(n+4) { display: none !important; }

  /* ── home ─────────────────────────────────────────────────────────────── */
  #content:has(> .hero) { display: flex; flex-direction: column; gap: 16px; }
  #content:has(> .hero) > * { margin: 0 !important; }
  .m-h1 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; order: -10; }
  .m-h1 h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.3px; }
  .m-h1 span { font-size: 14px; color: var(--av-dim); }
  .hero { order: -9; background: var(--av-deep) !important; animation: none !important; border-radius: 12px !important; padding: 16px !important; grid-template-columns: 1fr !important; gap: 16px !important; }
  .hero::before, .hero::after, .hero-greet, .ticker { display: none !important; }
  .hero-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .hs { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 8px !important; padding: 12px !important; box-shadow: none !important; }
  .hs-l { font-size: 11px !important; letter-spacing: 1px !important; text-transform: uppercase; color: rgba(255,255,255,.65) !important; font-weight: 700 !important; }
  .hs b { font-size: 22px !important; font-family: var(--font) !important; letter-spacing: -.3px !important; white-space: nowrap; }
  /* Labels reserve two lines, so "Revenue · September 2026" wrapping beside "MRR · as per
     pipeline" no longer drops one card's figure below its neighbour's. */
  .hs-l { display: block !important; line-height: 1.35 !important; min-height: 2.7em; }
  .hs-s { font-size: 12px !important; color: rgba(255,255,255,.65) !important; }
  .hs-bad { color: #ffa39e !important; }
  .hero-r { max-width: none !important; padding: 4px !important; gap: 20px !important; border-radius: 0 !important; }
  .hero-r:hover { background: none !important; }
  .ringwrap svg.ring { width: 112px !important; height: 112px !important; }
  .ringtxt b { font-size: 26px !important; font-family: var(--font) !important; }
  .ringtxt span { font-size: 10px !important; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.65) !important; }
  .ringmeta > div:first-child { font-size: 20px !important; }
  .ringmeta > div:first-child > b { font-size: 28px !important; }
  .ringmeta .mut2 { font-size: 13px !important; color: rgba(255,255,255,.65) !important; }
  .hs::before, .hs::after, .hero-l::before, .hero-l::after, .hero-stats::before, .hero-stats::after { display: none !important; }
  .today { order: -8; display: flex !important; flex-direction: column; gap: 0 !important; background: #fff; border: 1px solid var(--av-line); border-radius: 12px; padding: 4px 16px !important; }
  .today::before { content: attr(data-title); display: flex; align-items: center; justify-content: space-between; padding: 12px 0 8px; font-size: 16px; font-weight: 700; }
  .td { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 0 !important; border: none !important; border-top: 1px solid var(--av-line) !important; border-radius: 0 !important; background: none !important; min-height: 48px; }
  .td i { display: none !important; }
  .td b { flex: none; width: 44px; font-size: 22px !important; font-family: var(--font) !important; letter-spacing: 0 !important; text-align: left; }
  .td.warn b { color: var(--av-gold); } .td.bad b { color: var(--av-red); }
  .td span { flex: 1; font-size: 14px !important; color: var(--av-ink) !important; text-align: left; }
  .td::after { content: '›'; color: rgba(0,0,0,.25); font-size: 20px; line-height: 1; }
  .ai-brief { order: -7; }
  .card.lx, .card.lp { order: -6; display: block !important; }
  .card.lp .lp-top { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .card.lp .lp-grid { grid-template-columns: 1fr !important; }
  .dash-row2 { order: -5; display: grid !important; grid-template-columns: 1fr !important; }
  .brief-item { font-size: 14px !important; line-height: 1.5 !important; color: rgba(0,0,0,.75) !important; }
  .qs-row b { font-size: 28px !important; font-family: var(--font) !important; }
  .qs-row span { font-size: 11px !important; letter-spacing: 1px; text-transform: uppercase; color: var(--av-dim) !important; font-weight: 700 !important; }

  /* ── leads ────────────────────────────────────────────────────────────── */
  .ld-toolbar { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .ld-toolbar .finput[placeholder] { order: -2; width: 100% !important; flex: 1 1 100% !important; }
  /* v195: this used to be `order: -1`, which on the phone pulled every segment control ABOVE the
     label of its own group — "Owner" read under Everyone/Mine, "Interest" under Any/70%+. The
     grouped toolbar already puts each label first; nothing needs reordering. */
  .ld-toolbar .ld-seg { order: 0; }
  .ld-toolbar select.finput { width: auto !important; }
  .ld-toolbar .bulkbar { width: 100%; }
  .bkt-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .bkt-row > * { flex: none; }
  .m-leads { background: #fff; border: 1px solid var(--av-line); border-radius: 12px; overflow: hidden; }
  .m-lead { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--av-line); cursor: pointer; min-height: 72px; }
  .m-lead:first-child { border-top: none; }
  .m-lead .sc { flex: none; width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; border: 3px solid var(--av-amber); color: var(--av-amber); }
  .m-lead .sc.hi { border-color: var(--av-green); color: var(--av-green); } .m-lead .sc.lo { border-color: #ff4d4f; color: #ff4d4f; }
  .m-lead .sc { font-size: 12.5px; }
  .m-lead .sc.un { border-color: var(--av-line); color: var(--av-dim); }
  .m-lead .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .m-lead .nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .m-lead .nm b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-lead .nm .tag { flex: none; }
  .m-lead .nm .pct-tag { flex: none; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
  /* the interest % is set from the card itself — a 40px target, not a tap-through */
  .m-lead-pct { margin-top: 2px; }
  .m-lead-pct select { height: 32px; min-width: 74px; font-size: 13px; font-weight: 700; padding: 0 6px;
    border: 1px solid var(--av-line); border-radius: 8px; background: var(--av-card, #fff); color: inherit; }
  .m-lead .meta { font-size: 13px; color: var(--av-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-lead .rt { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
  .m-lead .rt b { font-size: 13px; font-weight: 700; color: var(--av-mute); } .m-lead .rt b.none { color: var(--av-gold); }
  .m-lead .rt span { font-size: 12px; color: var(--av-dim); }
  .m-lead-acts { padding: 10px 16px 12px; border-top: 1px solid var(--av-line); display: flex; gap: 8px; flex-wrap: wrap; background: #fafafa; }

  /* ── pipeline ─────────────────────────────────────────────────────────── */
  .m-stages { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 16px; }
  .m-stage { flex: none; width: 150px; background: #fff; border: 1px solid var(--av-line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; border-top: 3px solid var(--av-green); }
  .m-stage .h { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; }
  .m-stage .h i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--av-green-d); background: var(--av-green-bg); padding: 1px 6px; border-radius: 4px; }
  .m-stage .n { font-size: 20px; font-weight: 700; } .m-stage .n span { font-size: 13px; font-weight: 400; color: var(--av-dim); }
  .m-stage .w { font-size: 12px; color: var(--av-dim); }
  .nba { background: #fff !important; border: 1px solid var(--av-line) !important; border-radius: 12px !important; padding: 16px !important; box-shadow: none !important; }
  .nba .nba-k { font-size: 16px !important; font-weight: 700 !important; color: var(--av-ink) !important; letter-spacing: 0 !important; text-transform: none !important; }
  /* the pipeline column header's probability badge shares a class name with the proposal builder root */
  .col-h .pb { display: inline-block !important; min-height: 0 !important; height: auto !important; width: auto !important; grid-template-columns: none !important; padding: 1px 6px !important; font-size: 11px !important; }
  .col, .col-slim { background: #fff !important; border: 1px solid var(--av-line) !important; border-radius: 12px !important; box-shadow: none !important; }
  .dcard { border-radius: 8px !important; }

  /* ── money segmented control (Invoices | Quotes & contracts) ──────────── */
  .m-segment { display: flex; background: #fff; border: 1px solid var(--av-line2); border-radius: 8px; padding: 3px; gap: 3px; margin: -4px 0 16px; }
  .m-segment button { flex: 1; height: 38px; border: none; border-radius: 6px; font: 700 14px var(--font); color: var(--av-mute); background: transparent; cursor: pointer; white-space: nowrap; }
  .m-segment button.on { background: var(--av-green); color: #fff; }

  /* tables as flat rows */
  table.tbl tbody tr { border: 1px solid var(--av-line) !important; border-radius: 12px !important; box-shadow: none !important; padding: 12px 16px 8px !important; }
  table.tbl td:first-child { font-size: 15px !important; font-weight: 700; border-bottom-color: var(--av-line) !important; }
  table.tbl td::before { font-size: 11px !important; color: var(--av-dim) !important; }

  /* ── bottom navigation ────────────────────────────────────────────────── */
  .tabbar { display: flex !important; background: #fff !important; backdrop-filter: none !important; border-top: 1px solid var(--av-line) !important; padding: 6px 8px max(12px, env(safe-area-inset-bottom)) !important; justify-content: space-around !important; }
  .tabbar button { flex: 1 !important; max-width: 120px; min-height: 52px !important; gap: 4px !important; color: var(--av-dim) !important; font: 700 12px var(--font) !important; padding: 4px 0 !important; }
  .tabbar button svg { width: 24px !important; height: 24px !important; }
  .tabbar button.on { color: var(--av-green) !important; }
  .tabbar .badge { top: 2px !important; right: auto !important; left: calc(50% + 10px); min-width: 18px; height: 18px; padding: 0 5px !important; border-radius: 9px !important; background: #ff4d4f !important; font-size: 11px !important; display: flex; align-items: center; justify-content: center; }
  .content, #content { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }

  /* ── More sheet ───────────────────────────────────────────────────────── */
  .m-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .m-more button, .m-more a { min-height: 56px; padding: 10px 12px; background: #f5f5f5; border: 1px solid var(--av-line); border-radius: 10px; font: 700 14px var(--font); color: var(--av-ink); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; cursor: pointer; text-decoration: none; }
  .m-more button span, .m-more a span { font-size: 12px; font-weight: 400; color: var(--av-dim); }
  .m-more button.on { background: var(--av-green-bg); border-color: #93d8b5; }
  .m-more-foot { display: flex; gap: 8px; margin-top: 14px; }
  .m-more-foot .btn { flex: 1; }
  .modal-h b { font-size: 16px !important; }
  .modal, .modal.wide { border-radius: 16px 16px 0 0 !important; }
  .apk-banner { border-radius: 12px !important; border: 1px solid var(--av-line) !important; box-shadow: none !important; background: #fff !important; }
}

/* ── v137 · denser scale for the phone/APK (owner: "fonts and boxes a bit smaller") ── */
@media (max-width: 900px) {
  body { font-size: 13px; }
  .content { padding: 12px 12px 92px !important; }
  #content:has(> .hero) { gap: 12px; }
  .grid, .dash-row2, .grid2, .kpis, .ops-strip { gap: 10px !important; }
  .card + .card, .grid + .grid, .card + .grid { margin-top: 12px; }
  /* header */
  .topbar { padding: 8px 12px !important; gap: 6px !important; }
  .navtoggle, .topbar > .btn, .topbar div > .btn, .user-chip .avatar { width: 40px !important; height: 40px !important; min-height: 40px !important; }
  .topbar .gsearch input { height: 40px !important; font-size: 13px !important; }
  .user-chip .avatar { font-size: 13px !important; }
  /* titles */
  .m-h1 h1, .screen-title, .sec-title { font-size: 20px !important; }
  .m-h1 span { font-size: 12px; }
  .screen-head { margin-bottom: 12px !important; }
  /* cards and their headings */
  .card { padding: 12px 14px !important; }
  .card h3 { font-size: 14px !important; margin-bottom: 8px !important; }
  .card h3::before { height: 14px !important; }
  .card h3 .rt { font-size: 11.5px !important; }
  /* controls */
  .btn { height: 36px; min-height: 36px !important; font-size: 13px !important; padding: 0 12px !important; }
  .btn.sm { height: 32px; min-height: 32px !important; font-size: 12px !important; }
  .chip, .bktc, .amchip, .qc { height: 32px !important; min-height: 32px !important; font-size: 12.5px !important; padding: 0 12px !important; }
  .segb, .view-switch button, .segwrap .chip, .amchips .chip, .m-segment button { height: 32px !important; min-height: 32px !important; font-size: 13px !important; }
  .m-segment { margin: -2px 0 12px; }
  input.finput, select.finput, .finput { height: 38px !important; font-size: 13px !important; }
  .tag { font-size: 10.5px !important; padding: 1px 6px !important; }
  /* KPI tiles */
  .kpis { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important; margin-bottom: 12px !important; }
  .kpi { padding: 10px 12px !important; }
  .kpi .k-l { font-size: 10px !important; }
  .kpi .k-v { font-size: 18px !important; }
  .kpi .k-s { font-size: 11px !important; }
  .ops { padding: 10px 12px !important; }
  .ops b { font-size: 20px !important; }
  .ops span { font-size: 12px !important; }
  /* home hero */
  .hero { padding: 12px !important; gap: 10px !important; border-radius: 10px !important; }
  .hero-stats { gap: 8px !important; }
  .hs { padding: 10px !important; border-radius: 6px !important; }
  .hs-l { font-size: 10px !important; letter-spacing: .6px !important; }
  .hs b { font-size: 18px !important; }
  .hs-s { font-size: 11px !important; }
  .hs .mom { font-size: 11px !important; padding: 1px 6px !important; }
  .hero-r { gap: 14px !important; padding: 2px !important; }
  .ringwrap svg.ring { width: 92px !important; height: 92px !important; }
  .ringtxt b { font-size: 20px !important; }
  .ringtxt span { font-size: 9px !important; }
  .ringmeta > div:first-child { font-size: 15px !important; }
  .ringmeta > div:first-child > b { font-size: 22px !important; }
  .ringmeta .mut2 { font-size: 11.5px !important; }
  .hero-r .wave { height: 22px !important; }
  /* needs attention */
  .today { padding: 2px 12px !important; }
  .today::before { padding: 10px 0 6px; font-size: 14px; }
  .td { padding: 9px 0 !important; gap: 10px !important; min-height: 40px; }
  .td b { width: 36px; font-size: 18px !important; }
  .td span { font-size: 13px !important; }
  .brief-item { font-size: 13px !important; line-height: 1.45 !important; }
  .qs-row b { font-size: 22px !important; }
  .qs-row span { font-size: 10px !important; }
  .occ-r { font-size: 12.5px !important; }
  /* lists */
  .m-lead { padding: 10px 12px; gap: 10px; min-height: 60px; }
  .m-lead .sc { width: 38px; height: 38px; border-radius: 19px; font-size: 12.5px; border-width: 2.5px; }
  .m-lead .nm b { font-size: 14px; } .m-lead .meta { font-size: 12px; } .m-lead .rt b { font-size: 12px; } .m-lead .rt span { font-size: 11px; }
  .m-stage { width: 132px; padding: 10px 12px; gap: 4px; } .m-stage .h { font-size: 13px; } .m-stage .n { font-size: 17px; } .m-stage .w { font-size: 11px; }
  .m-more button, .m-more a { min-height: 50px; font-size: 13px; } .m-more button span, .m-more a span { font-size: 11px; }
  table.tbl tbody tr { padding: 10px 12px 6px !important; margin-bottom: 8px !important; }
  table.tbl td { font-size: 12.5px !important; padding: 4px 0 !important; }
  table.tbl td:first-child { font-size: 14px !important; }
  .dcard { padding: 10px 12px !important; }
  .dcard .a, .dcard .u { font-size: 13px !important; } .dcard .v { font-size: 13px !important; }
  /* bottom bar */
  .tabbar { padding: 4px 6px max(8px, env(safe-area-inset-bottom)) !important; }
  .tabbar button { min-height: 46px !important; font-size: 11px !important; gap: 2px !important; }
  .tabbar button svg { width: 22px !important; height: 22px !important; }
  .content, #content { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  /* modals / forms */
  .modal-h b { font-size: 15px !important; }
  .frow label { font-size: 11.5px !important; }
  .frow input, .frow select, .frow textarea { min-height: 40px !important; font-size: 15px !important; }
  .apk-banner { padding: 10px 12px !important; }
}

/* ── v137 · a quieter, more formal register for the app ───────────────────
   Deep green and ink instead of bright fills, hairlines instead of pills,
   semibold instead of black, no pictograms in labels (appview.js strips them). */
@media (max-width: 900px) {
  :root { --av-accent: #0f3d28; --av-accent-2: #1c7c4c; --av-tint: #eef4f0; --av-tint-bd: #cfe0d6; }
  body { color: #1a2420; -webkit-font-smoothing: antialiased; }
  h1, h2, h3, .screen-title, .sec-title, .m-h1 h1, .card h3, .k-v, .hs b, .ops b, .td b, .qs-row b, .m-stage .n, .rc-name, .bd-title { font-weight: 600 !important; letter-spacing: -.2px !important; }
  .kpi .k-v, .hs b, .ops b, .td b, .qs-row b { font-variant-numeric: tabular-nums; }
  .m-h1 h1 { color: #0f1a15; }
  .screen-actions .btn.primary, .btn.primary, .topbar .btn.primary { background: var(--av-accent) !important; border-color: var(--av-accent) !important; color: #fff !important; }
  .btn { color: #1a2420 !important; border-color: #dfe5e1 !important; }
  .btn.danger { color: #9f1d22 !important; border-color: #e8c9ca !important; }
  .user-chip .avatar { background: var(--av-accent) !important; border-color: #d6e5dc !important; }
  .chip, .bktc, .amchip, .qc { border-color: #dfe5e1 !important; color: #3d4a44 !important; font-weight: 600 !important; }
  .chip.on, .bktc.on, .amchip.on, .qc.now { background: var(--av-tint) !important; border-color: var(--av-tint-bd) !important; color: var(--av-accent) !important; }
  .chip b, .bktc b { font-weight: 600 !important; opacity: .6; }
  .segb.on, .view-switch button.on, .segwrap .chip.on, .amchips .chip.on, .m-segment button.on { background: #16241d !important; color: #fff !important; }
  .seg, .ld-seg, .view-switch, .segwrap, .amchips, .m-segment { border-color: #dfe5e1 !important; }
  .card, .kpi, .ops, .today, .m-leads, .m-stage, .nba, .col, .col-slim, .dcard, .room-card, .m-acts { border-color: #e6ebe8 !important; }
  .card h3::before { background: var(--av-accent-2) !important; width: 3px !important; }
  .card h3 .rt { color: #5b6b64 !important; font-weight: 600 !important; }
  .kpi { border-left-width: 3px !important; }
  .kpi .k-l, .hs-l, .qs-row span, .ringtxt span, .today::before, .m-stage .h i { text-transform: uppercase; letter-spacing: .08em !important; font-weight: 600 !important; color: #6b7a73 !important; }
  .today::before { text-transform: none; letter-spacing: -.1px !important; color: #1a2420 !important; }
  .hero { background: linear-gradient(170deg, #12352a, #0b2a1e) !important; border: 1px solid rgba(255,255,255,.06); }
  .hs { background: rgba(255,255,255,.045) !important; border-color: rgba(255,255,255,.08) !important; }
  .hs-l { color: rgba(255,255,255,.55) !important; }
  .hs-s, .ringmeta .mut2 { color: rgba(255,255,255,.6) !important; }
  .hs .mom { background: transparent !important; padding: 0 !important; font-weight: 600 !important; }
  .hs .mom.down { color: #f0a9a5 !important; } .hs .mom.up { color: #93d8b5 !important; }
  .hs-bad { color: #f0a9a5 !important; }
  .ringwrap svg.ring circle:last-of-type { stroke: #6fcf97 !important; }
  .td b { color: #1a2420; } .td.warn b { color: #9a6700 !important; } .td.bad b { color: #a8262b !important; }
  .td::after { color: #b8c2bd; }
  .tag { font-weight: 600 !important; letter-spacing: .01em; opacity: .95; }
  .tabbar button { color: #7d8a84 !important; font-weight: 600 !important; }
  .tabbar button.on { color: var(--av-accent) !important; }
  .tabbar button svg { stroke-width: 1.7; }
  .tabbar .badge, .topbar #nbadge:not(:empty) { background: #b3261e !important; font-weight: 600 !important; }
  .m-lead .sc { border-width: 2px; font-weight: 600; }
  .m-lead .sc.hi { border-color: var(--av-accent-2); color: var(--av-accent-2); } .m-lead .sc { border-color: #d9a62b; color: #9a6700; } .m-lead .sc.lo { border-color: #d2777a; color: #a8262b; }
  .m-lead .rt b.none { color: #9a6700; }
  .m-stage { border-top-width: 2px !important; }
  .nba .nba-k { font-weight: 600 !important; letter-spacing: -.1px !important; }
  .ai-spark { text-shadow: none !important; color: var(--av-accent-2) !important; }
  .m-more button, .m-more a { background: #fff; border-color: #e6ebe8; font-weight: 600; }
  .m-more button.on { background: var(--av-tint); border-color: var(--av-tint-bd); }
  .modal, .modal.wide { border: 1px solid #e6ebe8; }
  .toast { border-radius: 10px !important; font-weight: 600 !important; }
  .rc-cur b, .rc-cur.free b { font-weight: 600 !important; }
  .anim-in, .hs, .card { animation: none !important; }
}
@media (max-width: 900px) {
  /* v137b — polish after the first walk */
  .m-acts[hidden] { display: none !important; }
  .hero-r { display: flex !important; flex-direction: row !important; align-items: center !important; }
  .hero-r .ringwrap { flex: none; }
  .ringmeta { min-width: 0; }
  .ops-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ops b { font-size: 18px !important; } .ops span { font-size: 11px !important; line-height: 1.3; }
  /* filter rows scroll on one line instead of stacking three deep */
  #content > div[style*="flex-wrap:wrap"]:has(> .chip) { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  #content > div[style*="flex-wrap:wrap"]:has(> .chip) > * { flex: none; }
  #content > div[style*="flex-wrap:wrap"]:has(> .chip) > span[style*="flex:1"] { display: none; }
  #content .view-switch { display: none !important; }   /* the board is the phone view */
  .nba .nba-k { text-transform: none !important; }
}
@media (max-width: 900px) {
  .hero-r { flex-wrap: nowrap !important; gap: 14px !important; }
  .ringwrap { width: 92px !important; height: 92px !important; flex: none; }
  .ringmeta { flex: 1 1 auto; min-width: 0; }
  .ringmeta .mut2 b { color: #f0c674 !important; font-weight: 600 !important; }
}

/* ── v185: everything fits the phone; nothing runs off the right edge ───────
   The app used to solve narrow screens by scrolling rows sideways — header
   actions, stage cards, chip rows, bucket chips. On an iPhone that reads as
   content cut in half, because a horizontal scroller gives no hint it scrolls.
   Vertical space is free on a phone and horizontal space is not, so these rows
   wrap or grid instead. Nothing here changes the desktop. */
@media (max-width: 900px) {
  .screen-actions {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 6px;
  }
  .screen-actions > * { flex: 0 1 auto !important; max-width: 100%; }

  .chips, .filters {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 6px;
  }
  .chips > *, .filters > * { flex: 0 1 auto !important; max-width: 100%; }

  .bkt-row {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 6px;
  }
  .bkt-row > * { flex: 0 1 auto !important; max-width: 100%; }

  /* four stages read better as a 2 × 2 block than as a strip with two off-screen */
  .m-stages {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    overflow-x: visible !important;
  }
  .m-stage { width: auto !important; flex: initial !important; }

  .ops-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    overflow-x: visible !important;
    scroll-snap-type: none;
  }
  .ops { flex: initial !important; }

  #content > div[style*="flex-wrap:wrap"]:has(> .chip) {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
  #content > div[style*="flex-wrap:wrap"]:has(> .chip) > * { flex: 0 1 auto !important; }

  /* the quote status filter is the last strip that scrolled — wrap it too */
  .qfilters .seg { flex-wrap: wrap !important; overflow-x: visible !important; max-width: 100%; gap: 4px; }
  .qfilters .segb { flex: 0 1 auto !important; }

  /* a long label must shrink rather than push the row wider than the screen */
  .chip, .bktc, .screen-actions .btn { min-width: 0; }
  .chip, .bktc { white-space: normal; }
}

/* the call summary and the comment on a lead card — two quiet lines, each clamped to one */
.m-lead .m-said { font-size: 12px; color: rgba(0,0,0,.6); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* v195 — the Leads card's source table fitted to a phone: at this width the two bar columns are
   dropped rather than scrolled sideways, and the four that carry the numbers stay in view. */
@media (max-width: 560px) {
  .lp-scroll .lx-tbl { min-width: 0 !important; font-size: 12px !important; }
  .lx-tbl th:nth-child(3), .lx-tbl td:nth-child(3), .lx-tbl th:nth-child(4), .lx-tbl td:nth-child(4) { display: none !important; }
  .lx-tbl th, .lx-tbl td { padding-right: 6px !important; }
}

/* ── v198: the Leads screen on a phone (owner, 2026-09-25: "it doesn't look the best") ───────── */
@media (max-width: 900px) {
  /* lead cards: status on the edge, name + age on one line, the next step on the card */
  .m-lead.m-lead2 { display: block !important; position: relative; padding: 12px 14px 12px 18px !important; min-height: 0 !important; }
  .m-lead.m-lead2::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--av-green, #249f62); }
  .m-lead.m-lead2.s-late::before { background: #d8453b; } .m-lead.m-lead2.s-tried::before { background: #d9a62b; }
  .m-l-top { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; min-width: 0; }
  .m-l-top .nm { min-width: 0; flex: 1; } .m-l-top .nm b { font-size: 15.5px !important; }
  .m-l-age { flex: none; font-size: 12px; color: var(--av-dim, #8a948f); white-space: nowrap; }
  .m-lead.m-lead2 .meta { margin-top: 2px; }
  .m-lead.m-lead2 .m-said { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--av-mute, #4b5a53); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-l-sla { color: #b42318; font-weight: 700; }
  .m-l-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
  .m-l-st { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #e9f7f0; color: #1c7c4c; white-space: nowrap; }
  .s-late .m-l-st { background: #fdecec; color: #b42318; } .s-tried .m-l-st { background: #fdf6e3; color: #8a5a00; }
  .m-l-own { font-size: 12px; color: var(--av-dim, #8a948f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .m-l-own.none { color: #9a6700; font-weight: 700; }
  .m-l-act { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
  .m-l-act .m-lead-pct { margin: 0 !important; } .m-l-act .m-lead-pct select { height: 32px; min-width: 64px; }
  .m-l-act .btn { height: 32px !important; padding: 0 14px !important; font-size: 13px !important; border-radius: 10px !important; white-space: nowrap; }

  /* filters folded behind one button; the search stays in view */
  .m-filt-row { display: flex; gap: 8px; align-items: center; margin: 4px 0 10px; }
  .m-filt-row .ldf-search { flex: 1; min-width: 0; margin: 0 !important; } .m-filt-row .ldf-search .finput { width: 100% !important; }
  .m-filt-t { flex: none; height: 44px !important; border-radius: 12px !important; font-weight: 700 !important; display: inline-flex; align-items: center; gap: 6px; }
  .m-filt-t b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: #1c7c4c; color: #fff; font-size: 11.5px; }
  .m-filt-t.on { border-color: #1c7c4c !important; color: #1c7c4c !important; }
  .m-filt-c { font-size: 11px; opacity: .6; }
  .m-filt { background: #fff; border: 1px solid var(--av-line, #e6eae8); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
  .m-filt .ld-toolbar { margin: 0 !important; } .m-filt .bkt-row { margin-top: 12px !important; }

  /* the analysis card header: title on one line, the scope under it */
  .la-card .la-h3 { display: flex !important; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
  .la-card .la-h3 .la-t { white-space: nowrap; }
  .la-card .la-h3 .rt { order: 3; flex-basis: 100%; font-size: 11.5px !important; font-weight: 500 !important; color: var(--av-dim, #8a948f) !important; text-align: left !important; margin: 0 !important; }
  /* the ⋯ beside "Work the list" is a square, not a wide empty box */
  .m-acts-t { width: 44px !important; min-width: 44px !important; padding: 0 !important; justify-content: center !important; font-size: 18px !important; letter-spacing: 1px; }
}

/* v198 — the opportunity's stage tracker on a phone: four even columns, circle over label,
   instead of wrapping half-way ("3" alone on one line, the rest on the next). */
@media (max-width: 900px) {
  .stages { display: grid !important; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-items: center; row-gap: 6px; margin: 12px 0 10px !important; }
  .stages .stage-line { display: none !important; }
  .stages .stage-lbl { margin: 0 !important; font-size: 11.5px !important; text-align: center; white-space: normal !important; line-height: 1.25; }
  .stages .stage-lbl .mut { display: block; font-size: 10.5px; }
  .stages .stage-n { width: 32px; height: 32px; }
}