/* =========================================================================
   Woodlam — Native Mobile Layer
   Reference-inspired (soft pastel category coding, large radii, airy cards,
   pill chips, colourful icon tiles, playful data-viz). Mobile-scoped only:
   every visual rule lives inside @media (max-width: 920px) so the desktop
   console is untouched. Loaded AFTER app.css, so equal-specificity rules win.

   Layout:
     1. Tokens (pastel tones + native radii)  — light + dark
     2. Shared native mobile layer            — building blocks every page reuses
     3. Per-page sections                     — bespoke per-view polish

   Per-page sections carry a unique  >>> PAGE: name <<<  marker so
   parallel edits target disjoint regions and never collide.
   ========================================================================= */

/* ============================ 1. TOKENS ================================== */
:root {
  /* Pastel category tones — soft fill (-bg) + readable text/icon (-fg).
     Calm, premium, never garish ("fun, not overwhelming"). */
  --tone-mint-bg: #d9f4e7;  --tone-mint-fg: #0b7a5d;
  --tone-rose-bg: #ffe2ea;  --tone-rose-fg: #c64a72;
  --tone-amber-bg: #fdeecb; --tone-amber-fg: #946409;
  --tone-sky-bg:  #dcecfb;  --tone-sky-fg:  #2570ad;
  --tone-lav-bg:  #e9e6fb;  --tone-lav-fg:  #6a51c0;
  --tone-peach-bg:#ffe6d6;  --tone-peach-fg:#bd5c2c;
  --tone-lime-bg: #e8f5cf;  --tone-lime-fg: #5d7d18;
  --tone-grape-bg:#f3e1fb;  --tone-grape-fg:#8b43bd;

  /* Friendlier native radii (rounded like native app cards). */
  --r-tile: 18px;
  --r-card: 22px;
  --r-sheet: 26px;
  --r-pill: 999px;

  /* Soft native shadow (lighter, larger spread than the desktop card shadow). */
  --nv-shadow: 0 6px 20px rgba(20, 80, 70, 0.07);
  --nv-shadow-lift: 0 12px 30px rgba(20, 80, 70, 0.12);
}

/* Dark tones — translucent fills on the dark surface, lighter foregrounds.
   Applies to forced dark (html.dark) AND system dark (html:not(.light)). */
html.dark {
  --tone-mint-bg: rgba(45,197,165,.16);  --tone-mint-fg: #7fe6c8;
  --tone-rose-bg: rgba(239,91,91,.18);   --tone-rose-fg: #ff9d9d;
  --tone-amber-bg: rgba(244,183,64,.18); --tone-amber-fg: #f3cf7d;
  --tone-sky-bg:  rgba(59,158,214,.18);  --tone-sky-fg:  #8fcdf2;
  --tone-lav-bg:  rgba(124,108,224,.22); --tone-lav-fg:  #c3b6ff;
  --tone-peach-bg:rgba(220,120,70,.22);  --tone-peach-fg:#ffb78f;
  --tone-lime-bg: rgba(140,180,60,.22);  --tone-lime-fg: #cbe89a;
  --tone-grape-bg:rgba(170,80,200,.22);  --tone-grape-fg:#e0b0ff;
  --nv-shadow: 0 6px 20px rgba(0, 0, 0, 0.34);
  --nv-shadow-lift: 0 12px 30px rgba(0, 0, 0, 0.44);
}
@media (prefers-color-scheme: dark) {
  html:not(.light) {
    --tone-mint-bg: rgba(45,197,165,.16);  --tone-mint-fg: #7fe6c8;
    --tone-rose-bg: rgba(239,91,91,.18);   --tone-rose-fg: #ff9d9d;
    --tone-amber-bg: rgba(244,183,64,.18); --tone-amber-fg: #f3cf7d;
    --tone-sky-bg:  rgba(59,158,214,.18);  --tone-sky-fg:  #8fcdf2;
    --tone-lav-bg:  rgba(124,108,224,.22); --tone-lav-fg:  #c3b6ff;
    --tone-peach-bg:rgba(220,120,70,.22);  --tone-peach-fg:#ffb78f;
    --tone-lime-bg: rgba(140,180,60,.22);  --tone-lime-fg: #cbe89a;
    --tone-grape-bg:rgba(170,80,200,.22);  --tone-grape-fg:#e0b0ff;
    --nv-shadow: 0 6px 20px rgba(0, 0, 0, 0.34);
    --nv-shadow-lift: 0 12px 30px rgba(0, 0, 0, 0.44);
  }
}

/* Pastel tone utility — usable anywhere a coloured fill + matching fg is wanted.
   `.tone-rose` etc. set the two locals the components below consume. */
.tone-mint  { --t-bg: var(--tone-mint-bg);  --t-fg: var(--tone-mint-fg); }
.tone-rose  { --t-bg: var(--tone-rose-bg);  --t-fg: var(--tone-rose-fg); }
.tone-amber { --t-bg: var(--tone-amber-bg); --t-fg: var(--tone-amber-fg); }
.tone-sky   { --t-bg: var(--tone-sky-bg);   --t-fg: var(--tone-sky-fg); }
.tone-lav   { --t-bg: var(--tone-lav-bg);   --t-fg: var(--tone-lav-fg); }
.tone-peach { --t-bg: var(--tone-peach-bg); --t-fg: var(--tone-peach-fg); }
.tone-lime  { --t-bg: var(--tone-lime-bg);  --t-fg: var(--tone-lime-fg); }
.tone-grape { --t-bg: var(--tone-grape-bg); --t-fg: var(--tone-grape-fg); }

/* ===================== 2. SHARED NATIVE MOBILE LAYER ===================== */
@media (max-width: 920px) {

  /* ---- Canvas: a touch cleaner/airier than the desktop mint wash ---- */
  .content {
    padding: calc(14px + var(--safe-top)) 14px calc(116px + var(--safe-bottom));
  }

  /* ---- Cards & panels: bigger radius, soft shadow, more breathing room ---- */
  .panel,
  .data-card,
  .note-card,
  .oc-card,
  .kh-card,
  .settings-card {
    border-radius: var(--r-card);
    box-shadow: var(--nv-shadow);
  }
  .panel { padding: 16px; }

  /* ---- Pastel stat tiles (reference dashboard cards) ----
     statCard() emits data-tone; the whole card tints, the icon sits in a
     solid pastel chip, the number stays bold + near-black for contrast. */
  .metric-card {
    border-radius: var(--r-tile);
    border: 0;
    box-shadow: var(--nv-shadow);
    background: var(--white);
    padding: 14px;
    gap: 6px;
  }
  .metric-card[data-tone] { background: var(--t-bg); }
  .metric-card[data-tone="mint"]  { --t-bg: var(--tone-mint-bg);  --t-fg: var(--tone-mint-fg); }
  .metric-card[data-tone="rose"]  { --t-bg: var(--tone-rose-bg);  --t-fg: var(--tone-rose-fg); }
  .metric-card[data-tone="amber"] { --t-bg: var(--tone-amber-bg); --t-fg: var(--tone-amber-fg); }
  .metric-card[data-tone="sky"]   { --t-bg: var(--tone-sky-bg);   --t-fg: var(--tone-sky-fg); }
  .metric-card[data-tone="lav"]   { --t-bg: var(--tone-lav-bg);   --t-fg: var(--tone-lav-fg); }
  .metric-card[data-tone="peach"] { --t-bg: var(--tone-peach-bg); --t-fg: var(--tone-peach-fg); }
  .metric-card[data-tone] .metric-icon {
    background: var(--white);
    color: var(--t-fg);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(20,80,70,.08);
  }
  .metric-card[data-tone] .label { color: var(--text-main); opacity: .82; font-weight: 700; }
  .metric-card[data-tone] .value { color: var(--text-main); }
  .metric-card[data-tone] .metric-foot,
  .metric-card[data-tone] .metric-foot span { color: var(--text-main); opacity: .68; }

  /* ---- Reusable colourful icon tile (.nv-tile) ----
     icon in a pastel rounded square + label, for quick-action / nav grids. */
  .nv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
    gap: 10px;
  }
  .nv-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nv-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nv-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border: 0;
    border-radius: var(--r-tile);
    background: var(--white);
    box-shadow: var(--nv-shadow);
    color: var(--text-main);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: transform .14s var(--ease);
  }
  .nv-tile:active { transform: scale(.96); }
  .nv-tile .nv-ico {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--t-bg, var(--tone-mint-bg));
    color: var(--t-fg, var(--tone-mint-fg));
  }
  .nv-tile .nv-ico svg { width: 22px; height: 22px; }

  /* ---- Reusable list row (.nv-row): leading pastel icon tile + text ----
     Reference schedule / diet / course list rows. */
  .nv-list { display: grid; gap: 10px; }
  .nv-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--r-tile);
    background: var(--white);
    box-shadow: var(--nv-shadow);
    color: var(--text-main);
    font: inherit;
    cursor: pointer;
  }
  .nv-row.is-flat { box-shadow: none; background: var(--surface); }
  .nv-row .nv-ico {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--t-bg, var(--tone-mint-bg));
    color: var(--t-fg, var(--tone-mint-fg));
  }
  .nv-row .nv-ico svg { width: 21px; height: 21px; }
  .nv-row .nv-body { min-width: 0; display: grid; gap: 2px; }
  .nv-row .nv-title { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nv-row .nv-sub { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nv-row .nv-trail { display: flex; align-items: center; gap: 8px; color: var(--text-soft); }

  /* Completion check (reference list rows). */
  .nv-check {
    width: 24px; height: 24px; flex: none;
    border-radius: var(--r-pill);
    display: grid; place-items: center;
    border: 2px solid var(--border-strong);
    color: transparent;
  }
  .nv-check svg { width: 14px; height: 14px; }
  .nv-check.is-done { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

  /* ---- Section header: bold title + "See all" pill ---- */
  .nv-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 2px 10px;
  }
  .nv-head h2, .nv-head h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
  .nv-head .nv-head-action {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: var(--nv-shadow);
  }
  .nv-head .nv-head-action svg { width: 14px; height: 14px; }

  /* ---- Pill chips (filters / segmented) ---- */
  .chip-bar { gap: 8px; }
  .chip {
    min-height: 36px;
    padding: 7px 15px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--border-strong);
    background: var(--white);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 13px;
  }
  .chip.active,
  .chip[aria-pressed="true"] {
    border-color: transparent;
    background: var(--primary-light);
    color: var(--accent);
  }

  /* Segmented control (.nv-seg) — reference "En / It / Gn" picker. */
  .nv-seg {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--neutral-bg);
  }
  .nv-seg button {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    padding: 7px 16px;
    border-radius: var(--r-pill);
    min-height: 36px;
    cursor: pointer;
  }
  .nv-seg button.active {
    background: var(--primary-dark);
    color: #fff;
    box-shadow: var(--nv-shadow);
  }

  /* ---- Search box: rounded pill ---- */
  .search-box {
    border-radius: var(--r-pill);
    height: 44px;
    border: 1.5px solid var(--border-strong);
    background: var(--white);
  }
  .search-box input { font-size: 14px; }

  /* ---- Buttons: friendlier radius + comfortable tap height ---- */
  .btn { border-radius: 14px; }
  .btn:not(.small) { min-height: 46px; }
  .btn.pill, .btn.small.pill { border-radius: var(--r-pill); }
  /* Dark pill CTA (reference "Add a meal" / "Add a meal" black button). */
  .btn.dark {
    background: #14201d;
    color: #fff;
    border-color: #14201d;
    box-shadow: 0 8px 20px rgba(20,32,29,.28);
  }
  html.dark .btn.dark { background: #f3fbf8; color: #0f1f1c; border-color: #f3fbf8; }

  /* ---- Empty states: friendlier ---- */
  .empty { padding: 36px 18px; }
  .empty-ico {
    width: 66px; height: 66px;
    border-radius: var(--r-tile);
    background: var(--tone-mint-bg);
    color: var(--tone-mint-fg);
  }

  /* ---- Data-viz: friendly rings/donuts (used on overview & usage) ---- */
  .ring svg, .donut svg { filter: drop-shadow(0 4px 10px rgba(20,80,70,.08)); }

  /* ---- Bottom nav: keep glassy, lift the active pill ---- */
  .mobile-bottom-nav {
    border-radius: 26px;
    padding: 7px;
  }
  .mobile-bottom-nav button.active {
    background: var(--primary-light);
    color: var(--accent);
  }
  .mobile-bottom-nav button.active svg { transform: translateY(-1px); }

  /* ---- Ask-agent FAB: bouncy, prominent, stays above the bottom nav ---- */
  .agent-chat .ac-launcher {
    box-shadow: 0 14px 30px rgba(8,126,107,.36);
  }
  .agent-chat:not(.open) .ac-launcher:active { transform: scale(.92); }

  /* ---- Native large-title header ----
     Actions ride a slim nav-bar row pinned to the top-right; the large title
     + subtitle sit below at full width (iOS large-title pattern), instead of
     the old "buttons stranded in a row under the title". Scrolling collapses
     it to a slim single-row bar (title left, actions right). */
  .topbar {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .topbar > div:not(.topbar-actions) { order: 2; min-width: 0; }
  .topbar-actions {
    order: 1;
    width: 100%;
    margin: 0;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .topbar h1 {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .topbar p { margin-top: 5px; font-size: 13.5px; }

  /* Native icon buttons: circular, soft surface, comfortable 42px tap target. */
  .topbar-actions .icon-btn {
    width: 42px;
    height: 42px;
    border-radius: var(--r-pill);
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--nv-shadow);
    color: var(--text-main);
  }
  .topbar-actions .icon-btn svg { width: 20px; height: 20px; }
  .topbar-actions .icon-btn:active { transform: scale(.9); }
  .topbar-actions .search-toggle[aria-expanded="true"] {
    background: var(--primary-light);
    border-color: transparent;
    color: var(--accent);
  }

  /* Revealed search field drops to a full-width row beneath the nav-bar icons. */
  .topbar.search-active .search-box {
    order: 9;
    flex: 1 1 100%;
    border-radius: var(--r-pill);
    height: 44px;
  }

  /* Condensed (scrolled past the title): slim single-row nav bar. */
  .topbar.is-condensed {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .topbar.is-condensed > div:not(.topbar-actions) { order: 0; flex: 1 1 auto; }
  .topbar.is-condensed .topbar-actions { order: 1; width: auto; margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap; }
  .topbar.is-condensed h1 { font-size: 18px; }
}

/* ========================= 3. PER-PAGE SECTIONS ========================= */
/* Each section is owned by one view. Keep edits inside your own marker. */

/* >>> PAGE: overview <<< */
@media (max-width: 920px) {
  .overview-home .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .overview-home .metric-card { min-height: 96px; }
  .overview-home .metric-card .value { font-size: 28px; font-weight: 800; }
  /* Section panels read as airy cards. */
  .overview-home .panel { border-radius: var(--r-card); }
}
/* >>> END PAGE: overview <<< */

/* >>> PAGE: inbox <<< */
@media (max-width: 920px) {
  /* Rounded search + friendly status chips already inherit the shared layer.
     Soften the list head and give the avatar ring a subtle pop. */
  .ix-list-head .ix-list-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
  .ix-thread .ix-avatar .avatar { box-shadow: 0 2px 8px rgba(20,80,70,.12); }
  .ix-thread.is-unread .ix-thread-name { font-weight: 800; }
}
/* >>> END PAGE: inbox <<< */

/* >>> PAGE: leads <<< */
@media (max-width: 920px) {
  .leads-page {
    display: grid;
    gap: 14px;
    padding: 14px;
  }

  .leads-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border-radius: var(--r-sheet);
    background: var(--white);
    box-shadow: var(--nv-shadow);
  }
  .leads-toolbar .leads-search {
    min-width: 0;
    box-shadow: none;
  }
  .leads-toolbar .btn {
    width: 100%;
    border-radius: var(--r-pill);
    font-weight: 800;
  }
  .leads-toolbar #newLeadBtn {
    background: #14201d;
    color: #fff;
    border-color: #14201d;
    box-shadow: 0 8px 20px rgba(20,32,29,.22);
  }
  html.dark .leads-toolbar #newLeadBtn {
    background: #f3fbf8;
    color: #0f1f1c;
    border-color: #f3fbf8;
  }

  .lead-class-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 2px 2px;
    scrollbar-width: none;
  }
  .lead-class-chips::-webkit-scrollbar { display: none; }
  .lead-class-chips .chip[data-filter="hot"].active { background: var(--tone-rose-bg); color: var(--tone-rose-fg); }
  .lead-class-chips .chip[data-filter="warm"].active { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
  .lead-class-chips .chip[data-filter="cold"].active { background: var(--tone-sky-bg); color: var(--tone-sky-fg); }
  .lead-class-chips .chip[data-filter="technical"].active { background: var(--tone-sky-bg); color: var(--tone-sky-fg); }

  .lead-list-shell {
    display: grid;
    gap: 12px;
  }
  .table-wrap.leads-table.mobile-card-table tbody {
    gap: 12px;
  }
  .table-wrap.leads-table.mobile-card-table tr {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    padding: 14px;
    border: 0;
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--nv-shadow);
  }
  .table-wrap.leads-table.mobile-card-table td {
    display: block;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    word-break: normal;
  }
  .table-wrap.leads-table.mobile-card-table td + td {
    border-top: 0;
  }
  .table-wrap.leads-table.mobile-card-table td::before {
    content: none;
  }
  .table-wrap.leads-table.mobile-card-table td[data-label="Pri"] {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
  }
  .table-wrap.leads-table.mobile-card-table td[data-label="Lead"] {
    grid-column: 1 / -1;
    padding-right: 54px;
  }
  .table-wrap.leads-table.mobile-card-table .cell-lead {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }
  .table-wrap.leads-table.mobile-card-table .cell-lead .avatar {
    width: 44px;
    height: 44px;
    box-shadow: 0 2px 8px rgba(20,80,70,.12);
  }
  .table-wrap.leads-table.mobile-card-table .cell-lead .meta {
    min-width: 0;
    display: grid;
    gap: 3px;
  }
  .table-wrap.leads-table.mobile-card-table .cell-lead .meta b {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .table-wrap.leads-table.mobile-card-table .cell-lead .meta span,
  .table-wrap.leads-table.mobile-card-table td[data-label="Source"] {
    color: var(--text-muted);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .table-wrap.leads-table.mobile-card-table td[data-label="Source"],
  .table-wrap.leads-table.mobile-card-table td[data-label="Class"] {
    grid-column: 1 / -1;
    margin-left: 56px;
  }
  .table-wrap.leads-table.mobile-card-table td[data-label="PIC"],
  .table-wrap.leads-table.mobile-card-table td[data-label="Next action"] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--text-main);
    font-weight: 650;
  }
  .table-wrap.leads-table.mobile-card-table td[data-label="PIC"]::before,
  .table-wrap.leads-table.mobile-card-table td[data-label="Next action"]::before {
    content: attr(data-label);
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .table-wrap.leads-table.mobile-card-table .badge {
    border-radius: var(--r-pill);
    font-weight: 800;
  }
  .table-wrap.leads-table.mobile-card-table .badge.hot { background: var(--tone-rose-bg); color: var(--tone-rose-fg); }
  .table-wrap.leads-table.mobile-card-table .badge.warm { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
  .table-wrap.leads-table.mobile-card-table .badge.technical { background: var(--tone-sky-bg); color: var(--tone-sky-fg); }
  .table-wrap.leads-table.mobile-card-table .badge.cold { background: var(--tone-sky-bg); color: var(--tone-sky-fg); }
  .table-wrap.leads-table.mobile-card-table .badge.unknown { background: var(--tone-lime-bg); color: var(--tone-lime-fg); }
  .table-wrap.leads-table.mobile-card-table .badge--pri {
    padding: 5px 9px;
    min-width: 38px;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(20,80,70,.10);
  }
  .table-wrap.leads-table.mobile-card-table .badge--pri.hot { background: var(--tone-rose-bg); color: var(--tone-rose-fg); }
  .table-wrap.leads-table.mobile-card-table .badge--pri.warm { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
  .table-wrap.leads-table.mobile-card-table .badge--pri.cold { background: var(--tone-sky-bg); color: var(--tone-sky-fg); }
  .table-wrap.leads-table.mobile-card-table td.t-actions-cell {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .table-wrap.leads-table.mobile-card-table .t-actions .btn {
    border-radius: var(--r-pill);
    font-weight: 800;
  }
}
/* >>> END PAGE: leads <<< */

/* >>> PAGE: followups <<< */
@media (max-width: 920px) {
  .followups-page {
    display: grid;
    gap: 14px;
    padding: 14px;
  }

  .followup-actions {
    justify-content: flex-end;
    margin: 0;
  }
  .followup-actions #allTasks {
    border-radius: var(--r-pill);
    background: var(--white);
    box-shadow: var(--nv-shadow);
    font-weight: 800;
  }

  .followup-filters {
    margin: 0;
  }
  .followup-filters .task-filters-summary {
    width: max-content;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--white);
    color: var(--text-main);
    border: 1px solid var(--border);
    box-shadow: var(--nv-shadow);
    font-weight: 800;
    list-style: none;
  }
  .followup-filters .task-filters-summary::-webkit-details-marker {
    display: none;
  }
  .followup-filters .task-filters-summary svg {
    width: 16px;
    height: 16px;
    color: var(--tone-lav-fg);
  }
  .followup-filters .task-filter-count {
    min-width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--tone-lav-bg);
    color: var(--tone-lav-fg);
    font-size: 12px;
  }
  .followup-filters .task-filter-count[hidden] {
    display: none;
  }
  .followup-filters .task-filter-bar {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding: 12px;
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--nv-shadow);
  }
  .followup-filters .field {
    margin: 0;
  }
  .followup-filters .field span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
  }
  .followup-filters input,
  .followup-filters select {
    border-radius: 14px;
    min-height: 42px;
    background: var(--surface);
  }

  .followup-desktop-table {
    display: none !important;
  }
  .followup-native-list {
    display: grid !important;
    gap: 12px;
  }
  .followup-task-row.nv-row {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    padding: 13px;
    border-radius: var(--r-card);
    cursor: default;
  }
  .followup-task-row .nv-ico {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }
  .followup-task-row .nv-title {
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .followup-task-row .followup-desc {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .followup-task-row .nv-trail {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 7px;
    margin-top: 8px;
  }
  .followup-due-pill,
  .followup-task-row .badge {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    background: var(--tone-mint-bg);
    color: var(--tone-mint-fg);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.2;
  }
  .followup-due-pill.is-overdue {
    background: var(--tone-rose-bg);
    color: var(--tone-rose-fg);
  }
  .followup-due-pill .due-flag {
    margin: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
  }
  .followup-task-row .badge.pending,
  .followup-task-row .badge.requires_review {
    background: var(--tone-amber-bg);
    color: var(--tone-amber-fg);
  }
  .followup-task-row .badge.completed,
  .followup-task-row .badge.done {
    background: var(--tone-mint-bg);
    color: var(--tone-mint-fg);
  }
  .followup-task-row .badge.overdue,
  .followup-task-row .badge.failed {
    background: var(--tone-rose-bg);
    color: var(--tone-rose-fg);
  }
  .followup-task-row .nv-trail .btn {
    min-height: 34px;
    border-radius: var(--r-pill);
    padding: 6px 12px;
    font-weight: 800;
  }
}
/* >>> END PAGE: followups <<< */

/* >>> PAGE: incidents <<< */
@media (max-width: 920px) {
  .incidents-page {
    display: grid;
    gap: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .incident-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0;
  }
  .incident-toolbar .btn {
    justify-content: center;
    border-radius: var(--r-pill);
  }
  .incident-toolbar .btn:first-child {
    background: #14201d;
    border-color: #14201d;
    color: #fff;
    box-shadow: 0 8px 20px rgba(20,32,29,.24);
  }
  html.dark .incident-toolbar .btn:first-child {
    background: #f3fbf8;
    border-color: #f3fbf8;
    color: #0f1f1c;
  }

  .incident-filter-shell {
    display: grid;
    gap: 10px;
  }
  .incident-severity-chips {
    display: flex !important;
    gap: 8px;
    overflow-x: auto;
    padding: 1px 2px 4px;
    scrollbar-width: none;
  }
  .incident-severity-chips::-webkit-scrollbar { display: none; }
  .incident-severity-chip {
    flex: 0 0 auto;
    border-color: transparent;
    background: var(--t-bg, var(--tone-sky-bg));
    color: var(--t-fg, var(--tone-sky-fg));
  }
  .incident-severity-chip.active {
    background: var(--t-fg, var(--tone-sky-fg));
    color: #fff;
    box-shadow: var(--nv-shadow);
  }
  .incident-filters {
    margin: 0;
  }
  .incident-filters > .task-filters-summary {
    border-radius: var(--r-pill);
    box-shadow: var(--nv-shadow);
  }
  .incident-filters[open] > .task-filter-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--nv-shadow);
  }
  .incident-filters .incident-severity-select {
    display: none;
  }
  .incident-filters .field input,
  .incident-filters .field select {
    min-height: 42px;
    border-radius: 14px;
  }

  .incident-table-wrap.mobile-card-table .table-caption {
    display: block;
    margin: 0 2px 10px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
    text-align: left;
  }
  .incident-table-wrap.mobile-card-table tbody {
    gap: 12px;
  }
  .incident-table-wrap.mobile-card-table tr.incident-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 8px 12px;
    padding: 14px;
    border: 0;
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--nv-shadow);
  }
  .incident-table-wrap.mobile-card-table tr.incident-row:active {
    transform: scale(.99);
  }
  .incident-table-wrap.mobile-card-table td {
    display: block;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    word-break: normal;
  }
  .incident-table-wrap.mobile-card-table td + td { border-top: 0; }
  .incident-table-wrap.mobile-card-table td::before { content: none; }
  .incident-table-wrap.mobile-card-table td.incident-main-cell,
  .incident-table-wrap.mobile-card-table td.incident-severity-cell {
    grid-template-columns: minmax(0, 1fr);
  }

  .incident-severity-cell {
    grid-column: 1;
    grid-row: 1 / span 4;
    display: grid !important;
    justify-items: center;
    align-content: start;
    gap: 6px;
  }
  .incident-severity-ico {
    display: grid !important;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: var(--t-bg, var(--tone-sky-bg));
    color: var(--t-fg, var(--tone-sky-fg));
  }
  .incident-severity-ico svg { width: 23px; height: 23px; }
  .incident-severity-cell .incident-severity-badge { display: none; }
  .incident-severity-badge .badge {
    border: 0;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    font-size: 10.5px;
    font-weight: 800;
  }
  .incident-row[data-severity="critical"] .incident-severity-badge .badge,
  .incident-row[data-severity="high"] .incident-severity-badge .badge {
    background: var(--tone-rose-bg);
    color: var(--tone-rose-fg);
  }
  .incident-row[data-severity="medium"] .incident-severity-badge .badge {
    background: var(--tone-amber-bg);
    color: var(--tone-amber-fg);
  }
  .incident-row[data-severity="low"] .incident-severity-badge .badge {
    background: var(--tone-sky-bg);
    color: var(--tone-sky-fg);
  }

  .incident-main-cell {
    grid-column: 2;
    display: grid !important;
    gap: 4px;
    min-width: 0;
  }
  .incident-title {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
  }
  .incident-mobile-sub,
  .incident-mobile-summary {
    display: block !important;
  }
  .incident-mobile-sub {
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
  }
  .incident-mobile-summary {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
  }
  .incident-related-cell,
  .incident-status-cell,
  .incident-action-cell {
    grid-column: 2;
  }
  .incident-related-cell {
    color: var(--text-muted);
    font-size: 12.5px;
  }
  .incident-related-cell .btn {
    max-width: 100%;
    justify-content: flex-start;
    border-radius: var(--r-pill);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .incident-pic-cell {
    display: none !important;
  }
  .incident-status-cell {
    display: flex !important;
    align-items: center;
  }
  .incident-status-pill .badge {
    border: 0;
    border-radius: var(--r-pill);
    background: var(--t-bg, var(--tone-sky-bg));
    color: var(--t-fg, var(--tone-sky-fg));
    font-size: 11.5px;
    font-weight: 800;
    padding: 5px 10px;
  }
  .incident-action-cell {
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.4;
  }
  .incident-resolve-cell {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 10px !important;
    border-top: 1px solid var(--border) !important;
  }
  .incident-resolve-cell .t-actions {
    justify-content: stretch;
  }
  .incident-resolve-cell .btn {
    flex: 1;
    border-radius: var(--r-pill);
  }
}
/* >>> END PAGE: incidents <<< */

/* >>> PAGE: research <<< */
@media (max-width: 920px) {
  .research-page {
    gap: 14px;
  }
  .research-split {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .research-panel {
    border: 0;
    border-radius: var(--r-card);
    box-shadow: var(--nv-shadow);
  }
  .research-section-head {
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  .research-section-head > .ic {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 14px;
    background: var(--tone-lav-bg);
    color: var(--tone-lav-fg);
  }
  .research-artifacts-panel .research-section-head > .ic,
  .research-create-panel .research-section-head > .ic {
    background: var(--tone-mint-bg);
    color: var(--tone-mint-fg);
  }
  .research-section-head h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
  }
  .research-section-head .sub {
    max-width: 160px;
    padding: 6px 10px;
    border-radius: var(--r-pill);
    background: var(--tone-lav-bg);
    color: var(--tone-lav-fg);
    font-size: 11.5px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .research-form {
    gap: 10px;
  }
  .research-form .field input,
  .research-form .field select {
    min-height: 46px;
    border-radius: 16px;
  }
  .research-form .btn {
    width: 100%;
    border-radius: var(--r-pill);
  }

  .research-report-list,
  .research-artifacts-panel .card-list {
    display: grid;
    gap: 12px;
  }
  .research-card {
    border: 0;
    border-radius: var(--r-card);
    padding: 14px;
    background: var(--white);
    box-shadow: var(--nv-shadow);
  }
  .research-card:hover {
    border-color: transparent;
    background: var(--white);
  }
  .research-card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    flex-wrap: wrap;
  }
  .research-card-head .spacer,
  .research-card-head > .sub {
    display: none;
  }
  .research-card-ico {
    display: grid !important;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--t-bg, var(--tone-sky-bg));
    color: var(--t-fg, var(--tone-sky-fg));
  }
  .research-card-ico svg {
    width: 22px;
    height: 22px;
  }
  .research-card-title {
    flex: 1 1 calc(100% - 58px);
    min-width: 0;
    display: grid;
    gap: 3px;
  }
  .research-card-title h3 {
    color: var(--text-main);
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
  }
  .research-mobile-meta {
    display: block !important;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
  }
  .research-card-head .badge {
    border: 0;
    border-radius: var(--r-pill);
    background: var(--tone-lav-bg);
    color: var(--tone-lav-fg);
    font-size: 11.5px;
    font-weight: 800;
  }
  .research-note-card .research-card-head .badge {
    background: var(--tone-mint-bg);
    color: var(--tone-mint-fg);
  }
  .research-chip-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .research-chip-line .badge {
    border: 0;
    border-radius: var(--r-pill);
    background: var(--tone-sky-bg);
    color: var(--tone-sky-fg);
    font-weight: 800;
  }
  .research-summary {
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.55;
  }
  .research-highlights {
    display: grid;
    gap: 8px;
    margin: 10px 0;
  }
  .research-highlight-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--surface);
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.4;
  }
  .research-highlight-row > .ic {
    display: none;
  }
  .research-dot {
    display: block !important;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--t-fg, var(--tone-amber-fg));
    box-shadow: 0 0 0 4px var(--t-bg, var(--tone-amber-bg));
  }
  .research-highlight-row a {
    justify-self: end;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    background: var(--white);
    color: var(--accent);
    font-weight: 800;
  }
  .research-details {
    margin-top: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 16px;
    background: var(--surface);
  }
  .research-details > summary {
    color: var(--text-main);
    font-weight: 800;
  }
  .research-details .markdown {
    overflow-wrap: anywhere;
  }
  .research-source-line {
    overflow-wrap: anywhere;
  }
  .research-confidence {
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--tone-mint-bg);
  }
  .research-confidence span {
    border-radius: inherit;
  }
  .research-card-action {
    width: 100%;
    justify-content: center;
    border-radius: var(--r-pill);
  }
}
/* >>> END PAGE: research <<< */

/* >>> PAGE: outbound <<< */
@media (max-width: 920px) {
  .outbound-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
    background: color-mix(in srgb, var(--white) 92%, var(--tone-peach-bg));
    overflow: hidden;
  }

  .outbound-head {
    margin-bottom: 0;
    align-items: center;
  }

  .outbound-head > .nv-ico,
  .outbound-card .nv-ico {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--t-bg);
    color: var(--t-fg);
    flex: none;
  }

  .outbound-head h3 {
    font-size: 22px;
    font-weight: 850;
    letter-spacing: -0.02em;
  }

  .outbound-head #newDraftBtn {
    min-height: 40px;
    padding-inline: 14px;
    white-space: nowrap;
  }

  .outbound-toolbar {
    display: grid;
    gap: 10px;
  }

  .outbound-seg {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .outbound-seg::-webkit-scrollbar { display: none; }

  .outbound-seg .chip {
    flex: 1 0 auto;
    border: 0;
    min-height: 38px;
  }

  .outbound-filters {
    border: 0;
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--nv-shadow);
    overflow: hidden;
  }

  .outbound-filters .task-filters-summary {
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--r-card);
    font-weight: 800;
  }

  .outbound-filter-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 0 12px 12px;
  }

  .outbound-list {
    gap: 12px;
  }

  .outbound-card {
    border: 0;
    border-radius: var(--r-card);
    padding: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--t-bg, var(--white)) 54%, var(--white)), var(--white) 62%);
    box-shadow: var(--nv-shadow);
  }

  .outbound-card-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
  }

  .outbound-card-title {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .outbound-card-title b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
    font-size: 16px;
    font-weight: 850;
    letter-spacing: -0.01em;
  }

  .outbound-card-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 650;
    text-transform: capitalize;
  }

  .outbound-date-pill,
  .outbound-status-row .badge {
    border: 0;
    border-radius: var(--r-pill);
    background: var(--t-bg, var(--primary-light));
    color: var(--t-fg, var(--accent));
    font-size: 11.5px;
    font-weight: 800;
    padding: 5px 9px;
    white-space: nowrap;
  }

  .outbound-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 10px;
  }

  .outbound-card .draft-preview {
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.58;
    margin: 0 0 8px;
  }

  .outbound-card .draft-toggle {
    border-radius: var(--r-pill);
    padding: 4px 0;
    font-weight: 800;
  }

  .outbound-card .draft-safety {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
    line-height: 1.45;
  }

  .outbound-actions {
    gap: 8px;
    margin: 12px 0 0;
  }

  .outbound-actions .btn {
    flex: 1 1 140px;
    justify-content: center;
    min-height: 40px;
  }

  .outbound-draft-modal .modal-body,
  .outbound-form {
    border-radius: var(--r-card);
  }
}
/* >>> END PAGE: outbound <<< */

/* >>> PAGE: briefings <<< */
@media (max-width: 920px) {
  .briefings-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
    background: color-mix(in srgb, var(--white) 93%, var(--tone-lav-bg));
  }

  .briefings-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 0;
  }

  .briefings-toolbar .btn {
    justify-content: center;
    min-width: 0;
  }

  .briefings-head {
    margin-top: 0;
  }

  .briefings-list {
    gap: 12px;
  }

  .briefing-card {
    border: 0;
    border-radius: var(--r-card);
    padding: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--t-bg, var(--white)) 52%, var(--white)), var(--white) 54%);
    box-shadow: var(--nv-shadow);
  }

  .briefing-card-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
  }

  .briefing-card .nv-ico {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--t-bg);
    color: var(--t-fg);
  }

  .briefing-title {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .briefing-title b {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 850;
  }

  .briefing-title span {
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 650;
  }

  .briefing-date-pill {
    border-radius: var(--r-pill);
    background: var(--t-bg, var(--tone-lav-bg));
    color: var(--t-fg, var(--tone-lav-fg));
    font-size: 11.5px;
    font-weight: 800;
    padding: 5px 9px;
    white-space: nowrap;
  }

  .briefing-body {
    max-height: 320px;
    overflow: auto;
    border-radius: var(--r-tile);
    background: var(--surface);
    padding: 13px;
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.68;
  }

  .briefing-body p,
  .briefing-body ul,
  .briefing-body ol {
    margin-block: 0 10px;
  }

  .briefings-panel .empty-action .btn {
    border-radius: var(--r-pill);
    background: #14201d;
    color: #fff;
    border-color: #14201d;
  }

  html.dark .briefings-panel .empty-action .btn {
    background: #f3fbf8;
    color: #0f1f1c;
    border-color: #f3fbf8;
  }
}
/* >>> END PAGE: briefings <<< */

/* >>> PAGE: knowledge <<< */
@media (max-width: 920px) {
  .knowledge-empty-panel,
  .knowledge-page .panel {
    border-radius: var(--r-card);
  }

  .knowledge-page {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    overflow-x: clip;
  }

  .knowledge-page .kh-list-panel,
  .knowledge-page .kh-editor-panel,
  .knowledge-page .kh-preview-panel,
  .knowledge-page .kh-rail .panel {
    padding: 14px;
    border: 0;
    background: var(--white);
    box-shadow: var(--nv-shadow);
  }

  .knowledge-page .panel-head {
    margin-bottom: 10px;
  }

  .knowledge-page .panel-head h3 {
    font-size: 19px;
    font-weight: 850;
    letter-spacing: -0.02em;
  }

  .kh-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
  }

  .kh-toolbar .btn {
    min-height: 42px;
    padding-inline: 14px;
    white-space: nowrap;
  }

  .kh-page-list {
    max-height: 38dvh;
    gap: 10px;
    padding: 1px 2px 3px;
  }

  .kh-page.nv-row {
    grid-template-columns: 44px minmax(0, 1fr) 22px;
    border: 0;
    padding: 12px;
    background: var(--white);
    box-shadow: var(--nv-shadow);
  }

  .kh-page.nv-row.active {
    background: linear-gradient(90deg, var(--tone-grape-bg), var(--white));
    color: var(--text-main);
    box-shadow: var(--nv-shadow-lift);
  }

  .kh-page.nv-row.active .nv-ico {
    background: var(--tone-grape-bg);
    color: var(--tone-grape-fg);
  }

  .kh-page-title {
    font-size: 15px;
    font-weight: 850;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .kh-page-meta {
    color: var(--text-muted);
    font-size: 12.5px;
  }

  .kh-page .nv-trail svg {
    width: 16px;
    height: 16px;
  }

  .kh-editor-col {
    gap: 12px;
  }

  .kh-meta-strip {
    gap: 7px;
    margin-bottom: 12px;
  }

  .kh-meta-strip span {
    border: 0;
    border-radius: var(--r-pill);
    background: var(--tone-lav-bg);
    color: var(--tone-lav-fg);
    font-weight: 800;
  }

  .kh-editor-fields {
    gap: 10px;
  }

  .kh-editor-fields textarea,
  .kh-create-form textarea {
    min-height: 42dvh;
    border-radius: var(--r-tile);
    line-height: 1.6;
  }

  .kh-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
  }

  .kh-actions .btn {
    flex: 1 1 140px;
    justify-content: center;
  }

  .kh-actions .spacer {
    display: none;
  }

  .kh-preview {
    max-height: 42dvh;
    border-radius: var(--r-tile);
    background: var(--surface);
    padding: 13px;
    font-size: 14px;
    line-height: 1.68;
  }

  .kh-kv > div {
    border-radius: var(--r-tile);
  }

  .kh-path {
    overflow-wrap: anywhere;
  }

  .kh-create-modal,
  .kh-delete-modal {
    border-radius: var(--r-sheet);
  }

  .knowledge-empty-panel .empty-action .btn {
    border-radius: var(--r-pill);
    background: #14201d;
    color: #fff;
    border-color: #14201d;
  }

  html.dark .knowledge-empty-panel .empty-action .btn {
    background: #f3fbf8;
    color: #0f1f1c;
    border-color: #f3fbf8;
  }
}
/* >>> END PAGE: knowledge <<< */

/* >>> PAGE: agents <<< */
@media (max-width: 920px) {
  .oc-config {
    display: grid;
    gap: 14px;
    padding-bottom: calc(116px + var(--safe-bottom));
    overflow-x: hidden;
  }
  .oc-config * { min-width: 0; }

  .oc-statusbar {
    gap: 10px;
    margin: 0;
  }
  .oc-statusbar .spacer { display: none; }
  .oc-rt-chip,
  .oc-attn {
    min-height: 42px;
    flex: 1 1 100%;
    justify-content: center;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--r-pill);
    box-shadow: var(--nv-shadow);
  }
  .oc-rt-chip.is-on {
    background: var(--tone-mint-bg);
    color: var(--tone-mint-fg);
  }
  .oc-rt-chip.is-idle,
  .oc-attn {
    background: var(--tone-amber-bg);
    color: var(--tone-amber-fg);
  }
  .oc-rt-chip.is-off {
    background: var(--tone-sky-bg);
    color: var(--tone-sky-fg);
  }

  .oc-tabs {
    width: 100%;
    display: flex;
    gap: 4px;
    margin: 0 0 4px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--neutral-bg);
    box-shadow: inset 0 0 0 1px var(--border);
  }
  .oc-tabs::-webkit-scrollbar { display: none; }
  .oc-tab,
  .oc-config .ac-tab {
    flex: 1 0 auto;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-muted);
    font-weight: 800;
  }
  .oc-tab svg,
  .oc-config .ac-tab svg { width: 16px; height: 16px; }
  .oc-tab.active,
  .oc-config .ac-tab.active {
    background: var(--primary-dark);
    color: #fff;
    box-shadow: var(--nv-shadow);
  }
  .oc-tab-dot {
    width: 8px;
    height: 8px;
    background: var(--tone-amber-fg);
    box-shadow: 0 0 0 3px var(--tone-amber-bg);
  }

  .oc-config-grid,
  .oc-test-grid,
  .oc-activity-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .oc-test-grid .oc-span { grid-column: auto; }

  .oc-config .panel,
  .oc-config .data-card,
  .oc-config .note-card,
  .oc-card {
    border: 0;
    border-radius: var(--r-card);
    box-shadow: var(--nv-shadow);
    background: var(--white);
  }
  .oc-config .panel { padding: 16px; }
  .oc-config .panel-head {
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }
  .oc-config .panel-head h3 {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .oc-config .panel-head .pi {
    width: 22px;
    height: 22px;
    padding: 9px;
    box-sizing: content-box;
    flex: none;
    border-radius: 14px;
    background: var(--tone-lav-bg);
    color: var(--tone-lav-fg);
  }
  .oc-panel-sub,
  .oc-rt-line {
    margin: -4px 0 14px;
    line-height: 1.45;
    color: var(--text-muted);
  }

  .oc-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px;
    border: 0;
    border-radius: var(--r-tile);
    background: var(--surface);
  }
  .oc-meta-item { gap: 3px; }
  .oc-meta-item b {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .oc-agents {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .oc-agent {
    padding: 14px;
  }
  .oc-agent .dc-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
  }
  .oc-agent .dc-head .spacer { display: none; }
  .oc-agent .dc-head b,
  .oc-feed-title,
  .oc-activity-grid .meta b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .oc-agent-ic,
  .oc-run-ic,
  .oc-event-ic {
    width: 44px !important;
    height: 44px !important;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--tone-lav-bg);
    color: var(--tone-lav-fg);
  }
  .oc-agent-ic svg,
  .oc-run-ic svg,
  .oc-event-ic svg { width: 21px; height: 21px; }
  .oc-agent p.soft {
    margin: 10px 0 0;
    line-height: 1.45;
  }
  .oc-agent-chips {
    gap: 6px;
    margin-top: 10px;
  }
  .oc-agent-chips .hero-chip {
    border: 0;
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--text-muted);
  }

  .oc-config .badge {
    border: 0;
    border-radius: var(--r-pill);
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--tone-sky-fg);
    background: var(--tone-sky-bg);
    box-shadow: none;
  }
  .oc-config .badge.active,
  .oc-config .badge.connected,
  .oc-config .badge.linked,
  .oc-config .badge.live,
  .oc-config .badge.done,
  .oc-config .badge.success,
  .oc-config .badge.healthy {
    color: var(--tone-mint-fg);
    background: var(--tone-mint-bg);
  }
  .oc-config .badge.error,
  .oc-config .badge.failed,
  .oc-config .badge.gateway_down,
  .oc-config .badge.plugin_missing,
  .oc-config .badge.cli_missing,
  .oc-config .badge.runtime_off,
  .oc-config .badge.unavailable {
    color: var(--tone-rose-fg);
    background: var(--tone-rose-bg);
  }
  .oc-config .badge.pending,
  .oc-config .badge.connecting,
  .oc-config .badge.thinking,
  .oc-config .badge.queued,
  .oc-config .badge.not_linked {
    color: var(--tone-amber-fg);
    background: var(--tone-amber-bg);
  }
  .oc-config .badge.idle,
  .oc-config .badge.offline,
  .oc-config .badge.task,
  .oc-config .badge.chat,
  .oc-config .badge.info,
  .oc-config .badge.unknown {
    color: var(--tone-sky-fg);
    background: var(--tone-sky-bg);
  }
  .oc-agent[data-status="active"] .oc-agent-ic,
  .run-item[data-status="done"] .oc-run-ic,
  .run-item[data-status="success"] .oc-run-ic {
    background: var(--tone-mint-bg);
    color: var(--tone-mint-fg);
  }
  .oc-agent[data-status="idle"] .oc-agent-ic,
  .run-item[data-status="idle"] .oc-run-ic {
    background: var(--tone-sky-bg);
    color: var(--tone-sky-fg);
  }
  .oc-agent[data-status="error"] .oc-agent-ic,
  .run-item[data-status="error"] .oc-run-ic,
  .run-item[data-status="failed"] .oc-run-ic {
    background: var(--tone-rose-bg);
    color: var(--tone-rose-fg);
  }
  .run-item[data-status="pending"] .oc-run-ic,
  .run-item[data-status="connecting"] .oc-run-ic,
  .run-item[data-status="thinking"] .oc-run-ic {
    background: var(--tone-amber-bg);
    color: var(--tone-amber-fg);
  }

  .oc-config .form { gap: 12px; }
  .oc-config .field {
    display: grid;
    gap: 7px;
    font-weight: 800;
    color: var(--text-main);
  }
  .oc-config input,
  .oc-config select,
  .oc-config textarea {
    width: 100%;
    min-height: 48px;
    border: 1.5px solid var(--border-strong);
    border-radius: 16px;
    background: var(--white);
    color: var(--text-main);
    padding: 11px 13px;
    font-size: 16px;
  }
  .oc-config textarea {
    min-height: 112px;
    resize: vertical;
  }
  .oc-config input:focus,
  .oc-config select:focus,
  .oc-config textarea:focus {
    border-color: var(--primary);
    box-shadow: var(--ring);
    outline: 0;
  }
  .oc-form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .oc-config .btn {
    min-height: 44px;
    border-radius: var(--r-pill);
    font-weight: 800;
  }
  .oc-form-actions .btn,
  .oc-agent .oc-test-agent {
    width: 100%;
    justify-content: center;
    min-height: 46px;
  }
  .oc-form-actions .btn:not(.ghost) {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
  }
  .oc-form-actions small.soft { text-align: center; }

  .oc-switch {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--r-tile);
    background: var(--surface);
  }
  .oc-switch-track {
    width: 48px;
    height: 28px;
    border-radius: var(--r-pill);
    background: var(--tone-sky-bg);
  }
  .oc-switch-track::after {
    width: 22px;
    height: 22px;
  }
  .oc-switch input:checked + .oc-switch-track {
    background: var(--tone-mint-fg);
  }
  .oc-switch input:checked + .oc-switch-track::after {
    transform: translateX(20px);
  }
  .wa-qr {
    width: min(260px, 100%);
    margin: 8px auto 14px;
    padding: 10px;
    border-radius: var(--r-tile);
    box-shadow: var(--nv-shadow);
  }

  .agent-result-empty {
    border: 0;
    border-radius: var(--r-tile);
    padding: 18px;
    background: var(--surface);
    color: var(--text-muted);
    text-align: center;
  }
  .agent-result .data-card {
    padding: 14px;
  }
  .agent-raw pre {
    max-width: 100%;
    overflow-x: auto;
  }

  .oc-feed-list,
  .oc-activity-grid .card-list {
    display: grid;
    gap: 10px;
  }
  .oc-feed-row,
  .oc-activity-grid .file-row,
  .oc-activity-grid .note-card,
  .run-item {
    border: 0;
    border-radius: var(--r-tile);
    background: var(--white);
    box-shadow: var(--nv-shadow);
  }
  .run-item { padding: 0; overflow: hidden; }
  .run-item summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 68px;
    padding: 12px 14px;
  }
  .run-item[open] > div {
    margin: 0 14px 14px 70px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .oc-feed-body {
    display: grid;
    gap: 3px;
  }
  .oc-feed-sub,
  .oc-activity-grid .meta span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .oc-feed-trail {
    grid-column: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .oc-feed-trail small { color: var(--text-soft); }
  .oc-activity-grid .file-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
  }
  .oc-activity-grid .meta {
    display: grid;
    gap: 3px;
  }
  .oc-activity-grid .note-card {
    padding: 14px;
  }
  .oc-approval-list .note-card.warn {
    background: var(--white);
  }
}
/* >>> END PAGE: agents <<< */

/* >>> PAGE: usage <<< */
@media (max-width: 920px) {
  .usage-page {
    gap: 12px;
    overflow-x: clip;
  }

  .usage-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .usage-metrics .metric-card {
    min-height: 96px;
  }

  .usage-metrics .metric-card .value {
    font-size: 24px;
    font-weight: 850;
  }

  .usage-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .usage-module-panel,
  .usage-snapshot-panel,
  .usage-budget-wrap > .panel {
    border: 0;
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--nv-shadow);
    padding: 14px;
  }

  .usage-module-panel .panel-head,
  .usage-snapshot-panel .panel-head,
  .usage-budget-wrap .panel-head {
    justify-content: center;
    margin-bottom: 12px;
  }

  .usage-module-panel .panel-head h3,
  .usage-snapshot-panel .panel-head h3,
  .usage-budget-wrap .panel-head h3 {
    font-size: 19px;
    font-weight: 850;
    letter-spacing: -0.02em;
  }

  .usage-module-panel .barlist {
    gap: 10px;
  }

  .usage-module-panel .barlist .row {
    gap: 8px;
    padding: 11px 12px;
    border-radius: var(--r-tile);
    background: var(--surface);
  }

  .usage-module-panel .barlist .row:nth-child(4n + 1) { background: var(--tone-lav-bg); }
  .usage-module-panel .barlist .row:nth-child(4n + 2) { background: var(--tone-sky-bg); }
  .usage-module-panel .barlist .row:nth-child(4n + 3) { background: var(--tone-mint-bg); }
  .usage-module-panel .barlist .row:nth-child(4n + 4) { background: var(--tone-peach-bg); }

  .usage-module-panel .barlist .row .top b {
    color: var(--text-main);
    font-size: 13.5px;
    font-weight: 800;
    text-transform: capitalize;
  }

  .usage-module-panel .barlist .row .top .v {
    color: var(--text-main);
    font-weight: 850;
  }

  .usage-module-panel .progress {
    height: 9px;
    background: color-mix(in srgb, var(--white) 72%, var(--border-strong));
  }

  .usage-budget-wrap > .panel {
    background: linear-gradient(180deg, var(--tone-sky-bg), var(--white) 62%);
  }

  .usage-budget-wrap .ring {
    min-height: 190px;
    align-content: center;
    justify-items: center;
  }

  .usage-budget-wrap .ring svg {
    width: 148px;
    height: 148px;
  }

  .usage-budget-wrap .ring .ring-val {
    margin-top: 10px;
    color: var(--text-main);
    font-size: 22px;
    font-weight: 850;
  }

  .usage-budget-wrap .ring .ring-label {
    max-width: 220px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
  }

  .usage-rail {
    gap: 12px;
  }

  .usage-snapshot-panel .kv {
    gap: 8px;
  }

  .usage-snapshot-panel .kv > div {
    border-radius: var(--r-tile);
    background: var(--surface);
    padding: 11px 12px;
  }

  .usage-metrics .metric-card .value {
    overflow-wrap: anywhere;
  }
}
/* >>> END PAGE: usage <<< */

/* >>> PAGE: settings <<< */
@media (max-width: 920px) {
  .settings-shell {
    display: block;
  }

  .settings-rail {
    position: sticky;
    top: calc(8px + var(--safe-top));
    z-index: 3;
    display: flex;
    flex-direction: row;
    gap: 5px;
    overflow-x: auto;
    padding: 5px;
    margin: 0 -2px 14px;
    border-radius: var(--r-pill);
    background: var(--neutral-bg);
    box-shadow: inset 0 0 0 1px var(--border);
    scrollbar-width: none;
  }
  .settings-rail::-webkit-scrollbar { display: none; }

  .srail-item {
    flex: 0 0 auto;
    width: auto;
    min-height: 38px;
    gap: 7px;
    padding: 8px 13px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 800;
    box-shadow: none;
  }
  .srail-item svg { width: 16px; height: 16px; opacity: .9; }
  .srail-item.active {
    background: var(--primary-dark);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--nv-shadow);
  }
  .srail-item.active::before { display: none; }
  .srail-item.active .srail-count {
    background: rgba(255,255,255,.18);
    color: #fff;
  }
  .srail-count {
    padding: 1px 7px;
    background: var(--white);
    color: var(--text-muted);
    border-radius: var(--r-pill);
    font-size: 10.5px;
  }

  .settings-content {
    display: grid;
    gap: 14px;
  }
  .settings-pane.active {
    display: grid;
    gap: 14px;
  }
  .spane-head {
    margin: 0 2px 2px;
    gap: 10px;
  }
  .spane-head-text h2 {
    font-size: 24px;
    font-weight: 850;
    letter-spacing: -0.03em;
  }
  .spane-head-text p {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-muted);
  }
  .spane-head .btn {
    border-radius: var(--r-pill);
  }
  .spane-head .set-summary {
    width: 100%;
  }

  .settings-pane .panel,
  .settings-pane .data-card {
    border: 0;
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--nv-shadow);
  }

  .set-rows {
    display: grid;
    gap: 10px;
  }
  .set-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 0;
    border-radius: var(--r-tile);
    background: var(--surface);
  }
  .set-row:first-child { border-top: 0; }
  .set-row .btn,
  .set-row .badge,
  .set-row .chip-bar {
    grid-column: 2;
    justify-self: start;
  }
  .set-row .chip-bar {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .set-row .chip {
    justify-content: center;
    text-align: center;
  }
  .set-ic {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--t-bg, var(--tone-mint-bg));
    color: var(--t-fg, var(--tone-mint-fg));
  }
  .set-ic svg { width: 21px; height: 21px; }
  .set-row-text b {
    font-size: 15px;
    font-weight: 800;
  }
  .set-row-text .muted {
    font-size: 12.5px;
    line-height: 1.35;
  }

  .set-summary {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
  }
  .set-summary::-webkit-scrollbar { display: none; }
  .set-stat {
    flex: 0 0 auto;
    min-height: 32px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--tone-sky-bg);
    color: var(--tone-sky-fg);
    font-weight: 800;
  }
  .set-stat.ok {
    background: var(--tone-mint-bg);
    color: var(--tone-mint-fg);
  }
  .set-stat.info {
    background: var(--tone-sky-bg);
    color: var(--tone-sky-fg);
  }
  .set-stat.warn {
    background: var(--tone-amber-bg);
    color: var(--tone-amber-fg);
  }

  .set-integrations {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .set-integration-card {
    display: grid;
    gap: 10px;
    padding: 16px;
  }
  .set-integration-card .dc-head h3 {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .set-integration-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.45;
  }
  .set-integration-card .btn {
    justify-self: start;
    border-radius: var(--r-pill);
  }

  .settings-pane .toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .settings-pane .search-box {
    width: 100%;
  }
  .settings-pane input,
  .settings-pane select,
  #inviteUserModal input,
  #inviteUserModal select {
    width: 100%;
    min-height: 44px;
    border-radius: 14px;
    font-size: 14px;
  }
  .set-select {
    width: 100%;
    min-width: 0;
  }

  .table-wrap.mobile-card-table.users-table tbody,
  .table-wrap.mobile-card-table[data-pane-table="audit"] tbody {
    gap: 12px;
  }
  .table-wrap.mobile-card-table.users-table tr,
  .table-wrap.mobile-card-table[data-pane-table="audit"] tr.audit-row {
    border: 0;
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--nv-shadow);
    padding: 14px;
  }
  .table-wrap.mobile-card-table.users-table td,
  .table-wrap.mobile-card-table[data-pane-table="audit"] td {
    border-top-color: var(--border);
  }
  .table-wrap.mobile-card-table.users-table .cell-lead {
    align-items: center;
  }
  .table-wrap.mobile-card-table.users-table .cell-lead b {
    font-size: 15px;
    font-weight: 800;
  }
  .table-wrap.mobile-card-table.users-table select.user-role {
    width: 100%;
    max-width: none;
  }
  .table-wrap.mobile-card-table.users-table td.user-actions .btn {
    border-radius: var(--r-pill);
  }

  .audit-row[aria-expanded="true"] {
    background: var(--tone-lav-bg);
  }
  .table-wrap.mobile-card-table[data-pane-table="audit"] tr.audit-row {
    cursor: pointer;
  }
  .table-wrap.mobile-card-table[data-pane-table="audit"] tr.audit-detail {
    margin-top: -8px;
    padding: 0;
    border: 0;
    border-radius: var(--r-card);
    background: transparent;
    box-shadow: none;
  }
  .table-wrap.mobile-card-table[data-pane-table="audit"] tr.audit-detail td {
    display: block;
    padding: 0;
  }
  .table-wrap.mobile-card-table[data-pane-table="audit"] tr.audit-detail td::before {
    display: none;
  }
  .audit-avatar.sys {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 12px;
    background: var(--tone-lav-bg);
    color: var(--tone-lav-fg);
  }
  .audit-act {
    border: 0;
    border-radius: var(--r-pill);
    background: var(--tone-sky-bg);
    color: var(--tone-sky-fg);
    font-weight: 800;
  }
  .audit-act.pos {
    background: var(--tone-mint-bg);
    color: var(--tone-mint-fg);
  }
  .audit-act.neg {
    background: var(--tone-rose-bg);
    color: var(--tone-rose-fg);
  }
  .audit-changes {
    margin: 0 2px 4px;
    padding: 14px;
    border-radius: var(--r-tile);
    background: var(--white);
    box-shadow: var(--nv-shadow);
  }
  .audit-change-list li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 9px 0;
    border-top: 1px solid var(--border);
  }
  .audit-change-list li:first-child { border-top: 0; }
  .ac-field { min-width: 0; }

  .set-health-list {
    gap: 10px;
  }
  .set-health-row {
    box-shadow: none;
    background: var(--surface);
    cursor: default;
  }
  .set-health-row .nv-title,
  .set-health-row .nv-sub {
    white-space: normal;
  }
  .set-health-note {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.35;
  }
  .set-health-row .nv-trail {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .set-health-row .btn {
    border-radius: var(--r-pill);
  }
}
/* >>> END PAGE: settings <<< */

/* >>> PAGE: help <<< */
@media (max-width: 920px) {
  .help-hero,
  .help-panels .panel,
  .help-contact {
    border: 0;
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--nv-shadow);
  }

  .help-hero .panel-head,
  .help-panels .panel-head,
  .help-contact .panel-head {
    margin-bottom: 10px;
  }
  .help-hero .panel-head > svg,
  .help-panels .panel-head > svg,
  .help-contact .panel-head > svg {
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 12px;
    background: var(--tone-lav-bg);
    color: var(--tone-lav-fg);
  }
  .help-panels .panel-head > svg {
    background: var(--tone-sky-bg);
    color: var(--tone-sky-fg);
  }
  .help-contact .panel-head > svg {
    background: var(--tone-mint-bg);
    color: var(--tone-mint-fg);
  }

  .help-area-groups {
    gap: 18px;
  }
  .help-area-group > .nav-label {
    margin: 0 2px 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .05em;
  }
  .help-areas {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .help-area.nv-row {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    padding: 12px;
    border: 0;
    border-radius: var(--r-tile);
    background: var(--surface);
    box-shadow: none;
  }
  .help-area.nv-row .help-area-ico {
    width: 44px;
    height: 44px;
    padding: 11px;
    margin-top: 0;
    border-radius: 13px;
    background: var(--t-bg, var(--tone-mint-bg));
    color: var(--t-fg, var(--tone-mint-fg));
  }
  .help-area.nv-row .nv-title {
    font-size: 15px;
    font-weight: 800;
  }
  .help-area.nv-row .nv-sub {
    white-space: normal;
    line-height: 1.35;
  }

  .help-panels {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 14px;
  }
  .help-shortcut-list {
    display: grid;
    gap: 8px;
  }
  .help-shortcut-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--r-tile);
    background: var(--surface);
  }
  .help-shortcut-row dt {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 32px;
    margin: 0;
    border-radius: var(--r-pill);
    background: var(--tone-amber-bg);
    color: var(--tone-amber-fg);
    font-weight: 850;
  }
  .help-shortcut-row dd {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.35;
  }

  .help-tips {
    padding-left: 0;
    list-style: none;
    gap: 9px;
  }
  .help-tips li {
    padding: 12px;
    border-radius: var(--r-tile);
    background: var(--surface);
  }
  .help-tips kbd {
    border-radius: var(--r-pill);
    background: var(--tone-sky-bg);
    color: var(--tone-sky-fg);
    border-color: transparent;
  }
  .help-contact a {
    color: var(--accent);
    font-weight: 800;
  }
}
/* >>> END PAGE: help <<< */