/* ============================================================================
   AURA · Premium mobile experience  —  "glass & glow" dark
   Loaded LAST so it wins the cascade. Scoped to <= 860px so desktop is
   untouched. This is a visual + structural layer over the existing markup:
   it restyles, it does not change behaviour, so every truth/safety fix stays
   intact underneath.
   ============================================================================ */

@media (max-width: 860px) {

  /* ---- refined palette (scoped to mobile) -------------------------------- */
  :root {
    --accent:   #5b8cff;
    --accent-2: #a56bff;
    --glow:     rgba(91, 140, 255, 0.55);
    --glow-2:   rgba(165, 107, 255, 0.45);
    --ink:      #eaf0ff;
    --ink-dim:  #a9b4d0;
    --ink-faint:#6b7699;
    --glass:      rgba(20, 26, 44, 0.55);
    --glass-strong: rgba(16, 21, 38, 0.82);
    --hairline:   rgba(140, 165, 255, 0.16);
    --radius:   20px;
  }

  html, body { overflow-x: hidden !important; max-width: 100vw !important; background: #05070f !important; }
  body { color: var(--ink) !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

  /* ---- ambient aurora depth behind everything ---------------------------- */
  body::before {
    content: "";
    position: fixed; inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(60% 42% at 18% 8%,  rgba(91,140,255,0.20), transparent 70%),
      radial-gradient(52% 38% at 92% 22%, rgba(165,107,255,0.17), transparent 70%),
      radial-gradient(70% 50% at 50% 108%, rgba(56,120,255,0.14), transparent 70%),
      linear-gradient(180deg, #070a15 0%, #05070f 60%, #04060c 100%);
    animation: auraDrift 24s ease-in-out infinite alternate;
  }
  @keyframes auraDrift {
    0%   { transform: translate3d(0,0,0) scale(1); opacity: 1; }
    100% { transform: translate3d(0,-2%,0) scale(1.06); opacity: 0.92; }
  }
  .shell { position: relative !important; z-index: 1 !important; }

  /* ---- shell → single column -------------------------------------------- */
  .shell, .shell.sidebar-collapsed { display: block !important; grid-template-columns: 1fr !important; }
  .sidebar, .shell.sidebar-collapsed .sidebar {
    position: static !important; inset: auto !important; width: 100% !important; height: auto !important;
    flex-direction: column !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
    border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important;
  }
  .sidebar::before, .sidebar::after, .sidebar-toggle { display: none !important; }
  .brand, .profile-card { display: none !important; }

  /* ======================================================================
     BOTTOM TAB BAR — floating frosted glass with a glowing active pill
     ====================================================================== */
  .side-nav {
    position: fixed !important;
    inset: auto 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px !important;
    z-index: 300 !important;
    display: flex !important; flex-direction: row !important; width: auto !important;
    gap: 2px !important; padding: 7px 6px !important; margin: 0 !important; overflow: visible !important;
    background: var(--glass-strong) !important;
    backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid var(--hairline) !important;
    border-radius: 22px !important;
    box-shadow:
      0 12px 40px rgba(0,0,0,0.55),
      0 2px 0 rgba(255,255,255,0.04) inset,
      0 0 0 1px rgba(0,0,0,0.3) !important;
  }
  .side-nav .tab {
    position: relative !important;
    flex: 1 1 0 !important; display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important; gap: 4px !important;
    min-height: 54px !important; padding: 8px 2px !important;
    border: 0 !important; border-radius: 15px !important; background: transparent !important;
    color: var(--ink-faint) !important; text-align: center !important;
    transition: color .25s ease, transform .2s cubic-bezier(.2,.8,.2,1) !important;
  }
  .side-nav .tab[hidden] { display: none !important; }
  .side-nav .tab b {
    font-size: 9px !important; font-weight: 600 !important; letter-spacing: -.015em !important;
    line-height: 1 !important; white-space: nowrap !important; opacity: .9;
  }
  .side-nav .tab i { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; font-size: 18px !important; border: 0 !important; transition: transform .2s ease; }
  .side-nav .tab i svg { width: 22px; height: 22px; }
  .side-nav .tab:active { transform: scale(.9) !important; }
  .side-nav .tab.active {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(91,140,255,0.22), rgba(165,107,255,0.10)) !important;
    box-shadow: 0 0 18px -2px var(--glow), inset 0 0 0 1px rgba(140,165,255,0.25) !important;
  }
  .side-nav .tab.active i { transform: translateY(-1px) scale(1.06) !important; }
  .side-nav .tab.active i svg { color: #bcd0ff !important; stroke: #bcd0ff; filter: drop-shadow(0 0 6px var(--glow)); }
  .side-nav .tab.active b { opacity: 1; color: #dbe6ff !important; }
  .side-nav .tab.active::after {
    content: "" !important; position: absolute !important; top: 5px !important; left: 50% !important;
    width: 4px !important; height: 4px !important; margin-left: -2px !important; border-radius: 50% !important;
    background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
    box-shadow: 0 0 8px 1px var(--glow) !important;
  }
  .side-nav::-webkit-scrollbar { display: none !important; }

  /* ======================================================================
     TOP BAR — thin frosted glass, live status, account + safety
     ====================================================================== */
  .side-foot {
    position: fixed !important; inset: 0 0 auto 0 !important; z-index: 300 !important;
    display: flex !important; flex-direction: row !important; align-items: center !important;
    flex-wrap: nowrap !important; gap: 8px !important;
    height: 56px !important; padding: 8px 12px !important;
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    margin: 0 !important; border: 0 !important;
    border-bottom: 1px solid var(--hairline) !important;
    background: var(--glass-strong) !important;
    backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35) !important;
    order: 0 !important;
  }
  .side-foot .sidebar-controller-card {
    flex: 1 1 0 !important; min-width: 0 !important; overflow: hidden !important; flex-wrap: nowrap !important;
    display: flex !important; align-items: center !important; gap: 9px !important;
    padding: 0 2px !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  .sidebar-controller-card > span, .sidebar-controller-card > b { display: none !important; }
  .sidebar-controller-card .side-status {
    padding: 0 !important; font-size: 12px !important; font-weight: 500 !important; color: var(--ink-dim) !important;
    min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  }
  .sidebar-controller-card .dot {
    width: 9px !important; height: 9px !important; flex: 0 0 9px !important; border-radius: 50% !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.04), 0 0 10px 1px currentColor !important;
    animation: dotPulse 2.4s ease-in-out infinite;
  }
  @keyframes dotPulse { 0%,100%{ box-shadow: 0 0 0 3px rgba(255,255,255,0.04), 0 0 8px 0 currentColor; } 50%{ box-shadow: 0 0 0 5px rgba(255,255,255,0.02), 0 0 14px 2px currentColor; } }

  .side-foot .sidebar-action {
    flex: 0 0 auto !important; flex-shrink: 0 !important; width: auto !important;
    min-width: 44px !important; min-height: 44px !important; padding: 9px 13px !important; margin: 0 !important;
    border-radius: 13px !important; font-size: 12px !important; font-weight: 600 !important;
    text-transform: none !important; letter-spacing: 0 !important;
    border: 1px solid var(--hairline) !important; background: rgba(255,255,255,0.04) !important;
    color: var(--ink) !important; backdrop-filter: blur(8px);
    transition: transform .15s ease, box-shadow .2s ease !important;
  }
  .side-foot .sidebar-action:active { transform: scale(.94) !important; }
  #btn-signin.sidebar-action {
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    border-color: transparent !important; color: #fff !important;
    box-shadow: 0 6px 18px -4px var(--glow), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
  }
  .side-foot .sidebar-action.blackout span, .side-foot .sidebar-action.emergency span, #btn-reset-estop span { display: none !important; }
  .side-foot .sidebar-action.blackout, .side-foot .sidebar-action.emergency, #btn-reset-estop { min-width: 44px !important; width: 44px !important; padding: 9px !important; }
  .side-foot .sidebar-action.blackout { color: #ffb057 !important; border-color: rgba(255,150,60,0.35) !important; background: rgba(120,60,10,0.22) !important; }
  .side-foot .sidebar-action.emergency { color: #ff7a86 !important; border-color: rgba(255,60,80,0.4) !important; background: rgba(120,15,30,0.25) !important; box-shadow: 0 0 16px -4px rgba(255,45,60,0.5) !important; }
  .side-foot .sidebar-action i { width: auto !important; font-size: 17px !important; }
  #btn-signin span, #btn-signout span, #btn-exit-access-preview span { display: inline !important; }

  /* ======================================================================
     MAIN CONTENT
     ====================================================================== */
  .main, .main:has(#page-dashboard.active), .main:has(#page-rooms.active) {
    grid-column: auto !important; width: 100% !important; max-width: none !important;
    height: auto !important; min-height: 100vh !important; overflow: visible !important;
    padding: 70px 15px calc(96px + env(safe-area-inset-bottom, 0px)) 15px !important;
  }
  .main > .page.active,
  #page-dashboard.active, #page-rooms.active, #page-looks.active, #page-pool.active,
  #page-security.active, #page-insights.active, #page-system.active, #page-zones.active,
  #page-scenes.active, #page-studio.active, #page-advanced.active, #page-users.active,
  #page-settings.active {
    height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; display: block !important;
  }
  .page.active { animation: pageIn .4s cubic-bezier(.2,.8,.2,1) !important; }
  @keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* page header sticks under the top bar, glassy fade */
  .topbar, .main > .topbar,
  .main:has(#page-dashboard.active) .topbar, .main:has(#page-rooms.active) .topbar {
    position: sticky !important; top: 56px !important; height: auto !important; min-height: 0 !important;
    flex-wrap: wrap !important; align-items: flex-start !important; gap: 6px !important;
    margin: 0 0 16px !important; padding: 8px 0 12px !important; z-index: 30 !important;
    border-bottom: 1px solid var(--hairline) !important;
    background: linear-gradient(180deg, #05070f 72%, transparent) !important;
  }
  #page-title { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.12 !important; color: #fff !important; }
  #page-sub { font-size: 12.5px !important; color: var(--ink-faint) !important; }
  .search-box { display: none !important; }
  .topbar-pills { gap: 8px !important; flex-wrap: wrap !important; }
  .topbar .clock { min-width: 0 !important; }

  /* ======================================================================
     GLASS PANELS + CARDS  —  the signature surface
     ====================================================================== */
  .panel, .stat-card, .rooms-master-panel, .automation-mini-panel, .pool-dashboard-grid > *,
  .category-card, .experience-card, .controller-adapter-card, .ctl-identity-grid > *,
  .co-metric, .rd-metric, .quick-experience-grid > * {
    position: relative !important;
    background:
      linear-gradient(180deg, rgba(28,36,60,0.62), rgba(14,19,34,0.72)) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05) inset !important;
    backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%);
  }
  /* hairline top highlight for depth */
  .panel::before, .stat-card::before {
    content: "" !important; position: absolute !important; inset: 0 !important;
    border-radius: inherit !important; padding: 1px !important; pointer-events: none !important;
    background: linear-gradient(180deg, rgba(150,175,255,0.25), transparent 40%) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .stat-card { min-height: 0 !important; padding: 18px !important; }
  .stat-card b, .stat-card span, [class*="metric"] b, [class*="metric"] span, [class*="stat"] b, [class*="stat"] span { overflow-wrap: anywhere !important; }

  /* ---- collapse remaining multi-column grids ---------------------------- */
  .cols-2, .cols-3, .dash-grid, .studio-grid, .category-grid, .builder-grid,
  .seq-grid, .pool-dashboard-grid, .pool-profile-grid, .pool-mood-grid,
  .rooms-inventory-grid, .re-device-grid, .zone-page-grid,
  .controller-adapter-grid, .ctl-identity-grid, .controller-contract-strip, .automation-canvas-lower,
  .room-grid, #page-rooms .room-grid,
  #page-advanced [class*="grid"], #page-controllers [class*="grid"], #page-advanced .rd-right-rail, #page-advanced .rd-metric-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: min-content !important;
    align-items: start !important;
  }

  /* Small metric tiles read better 2-up than as wide, half-empty rows.
     Clear the desktop fixed row/height so each tile hugs its content. */
  .stat-grid, .pool-summary-grid, .pool-stage-grid, .pool-metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: 1fr !important;      /* tiles in a row share one tidy height */
    height: auto !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* ======================================================================
     HERO  —  cinematic, gradient headline, rounded glass frame
     ====================================================================== */
  .hero, #page-dashboard .hero, .party-hero, .pool-visual-hero, .pool-command-hero, .security-hero-panel {
    min-height: 0 !important; padding: 24px 20px !important; border-radius: var(--radius) !important;
    border: 1px solid var(--hairline) !important;
    box-shadow: 0 18px 50px -18px rgba(0,0,0,0.7) !important;
    overflow: hidden !important;
  }
  #page-dashboard .hero h1, .party-hero h1 {
    font-size: 32px !important; line-height: 1.03 !important; font-weight: 800 !important; letter-spacing: -0.03em !important;
  }

  /* ======================================================================
     BUTTONS  —  gradient primary with glow, glass secondary
     ====================================================================== */
  .btn { border-radius: 13px !important; font-weight: 600 !important; transition: transform .14s ease, box-shadow .2s ease, filter .2s ease !important; min-height: 44px !important; }
  .btn:active { transform: scale(.96) !important; }
  .btn.primary, .btn.gradient {
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    border: 0 !important; color: #fff !important;
    box-shadow: 0 8px 22px -6px var(--glow), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
  }
  .btn.primary:active, .btn.gradient:active { filter: brightness(1.08) !important; }
  .btn.ghost, .btn.sm, .btn:not(.primary):not(.gradient):not(.danger) {
    background: rgba(255,255,255,0.045) !important; border: 1px solid var(--hairline) !important;
    color: var(--ink) !important; backdrop-filter: blur(8px);
  }
  .btn.danger { border-radius: 13px !important; }

  /* pills / chips get glass too */
  .pill, .chip, .tag, [class*="pill"], [class*="chip"] {
    border-radius: 999px !important;
  }

  /* ---- inputs & selects ------------------------------------------------- */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="url"], select, textarea {
    min-height: 46px !important; font-size: 16px !important;
    background: rgba(255,255,255,0.04) !important; border: 1px solid var(--hairline) !important;
    border-radius: 13px !important; color: var(--ink) !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
  }
  input:focus, select:focus, textarea:focus {
    outline: none !important; border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(91,140,255,0.18), 0 0 18px -6px var(--glow) !important;
  }

  /* ======================================================================
     MODALS  —  frosted, fit the screen, spring in
     ====================================================================== */
  .modal-overlay {
    align-items: flex-start !important; justify-content: center !important; padding: 12px !important;
    overflow-y: auto !important;
    background: rgba(4,6,12,0.6) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .modal, .modal.wide {
    width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 24px) !important;
    margin: 0 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    border-radius: 22px !important; border: 1px solid var(--hairline) !important;
    background: linear-gradient(180deg, rgba(24,31,52,0.92), rgba(12,17,30,0.96)) !important;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8) !important;
    animation: modalIn .32s cubic-bezier(.2,.9,.2,1) !important;
  }
  @keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
  .modal-foot { position: sticky !important; bottom: 0 !important; background: inherit !important; padding-top: 12px !important; }

  /* ---- data tables & tab strips scroll, never widen the page ------------ */
  table[data-table], #page-users table {
    display: block !important; width: 100% !important; max-width: 100% !important;
    overflow-x: auto !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch;
  }
  .pool-workspace-tabs, [class*="-tabs"] {
    max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important;
  }

  /* smooth momentum scrolling everywhere */
  * { -webkit-tap-highlight-color: transparent; }
  .btn, .ic-btn, select { min-height: 42px !important; }
}

/* ============================================================================
   TYPOGRAPHIC SYSTEM  —  the real craft: scale, weight contrast, tracking,
   rhythm and emphasis. Color is skin; THIS is what makes it read as premium.
   A deliberate 1.25 modular scale, tight tracking on big type, open tracking
   on small caps labels, tabular figures for every number, and a consistent
   vertical rhythm so the eye always knows what matters.
   ============================================================================ */
@media (max-width: 860px) {

  .main {
    font-size: 14px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.006em !important;
  }

  /* ---- PAGE HEADER: one confident title, a quiet subtitle -------------- */
  #page-title {
    font-size: 25px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.08 !important;
    color: #f4f7ff !important;
  }
  #page-sub {
    font-size: 12.5px !important;
    font-weight: 450 !important;
    line-height: 1.42 !important;
    letter-spacing: 0 !important;
    color: var(--ink-faint) !important;
    max-width: 34ch !important;
    margin-top: 3px !important;
  }

  /* ---- SECTION OVERLINE (eyebrow): small, wide-tracked, quiet ---------- */
  .eyebrow {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #7d8fc4 !important;         /* quiet, not shouting accent */
    margin-bottom: 8px !important;
  }
  /* the accent belongs on the ONE live/active eyebrow, not every heading */
  .panel.is-live .eyebrow, .eyebrow.accent { color: #8fb0ff !important; }

  /* ---- SECTION TITLE: the anchor of each card ------------------------- */
  .panel-head { margin-bottom: 14px !important; align-items: flex-start !important; }
  .panel-head h2 {
    font-size: 17px !important;
    font-weight: 750 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    color: #f0f4ff !important;
  }
  .panel-head .hint {
    font-size: 12px !important;
    font-weight: 450 !important;
    line-height: 1.4 !important;
    color: var(--ink-faint) !important;
    margin-top: 2px !important;
  }

  /* ---- DATA CARDS: label → value → caption, tight and intentional ----- */
  .stat-card {
    padding: 16px !important;
    gap: 7px !important;
    display: flex !important; flex-direction: column !important;
  }
  .stat-icon {
    width: 34px !important; height: 34px !important; border-radius: 11px !important;
    font-size: 15px !important; margin-bottom: 3px !important;
  }
  .stat-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
    color: #7987a8 !important;
    line-height: 1 !important;
  }
  .stat-value {
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    color: #f6f9ff !important;
    font-variant-numeric: tabular-nums !important;   /* digits align */
    font-feature-settings: "tnum" 1 !important;
  }
  .stat-sub {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: var(--ink-faint) !important;
  }

  /* ---- HERO: display type, tight, one emphatic line ------------------- */
  #page-dashboard .hero h1, .party-hero h1, .hero h1 {
    font-size: 31px !important;
    font-weight: 800 !important;
    line-height: 1.0 !important;
    letter-spacing: -0.035em !important;
  }
  .hero .eyebrow-line, #page-dashboard .hero .eyebrow-line { font-size: 12.5px !important; letter-spacing: 0 !important; margin-bottom: 6px !important; }
  .hero p, #page-dashboard .hero p {
    font-size: 13.5px !important; line-height: 1.45 !important; color: #c3cee6 !important;
    max-width: 30ch !important; margin-top: 10px !important;
  }

  /* ---- NUMBERS everywhere read as data, not text --------------------- */
  .clock #clock-time, .pool-summary-grid b, .stat-value, [class*="metric"] b, [class*="value"] {
    font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1 !important;
  }
  /* clock is secondary: don't let it fight the page title */
  .topbar .clock #clock-time { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--ink) !important; }
  .topbar .clock #clock-date { font-size: 10.5px !important; letter-spacing: 0.02em !important; color: var(--ink-faint) !important; }

  /* ---- PILLS / CHIPS: compact, quiet, uppercase micro-label ----------- */
  .topbar-pills .pill, .pill, .chip {
    font-size: 12px !important; font-weight: 600 !important; padding: 8px 14px !important;
    letter-spacing: -0.005em !important;
  }

  /* ---- generic headings inside content get the same discipline -------- */
  .main h2 { font-size: 17px !important; font-weight: 750 !important; letter-spacing: -0.02em !important; line-height: 1.18 !important; }
  .main h3 { font-size: 14.5px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; }
  .main h4, .main h5 { font-size: 12.5px !important; font-weight: 700 !important; }
  .main small, .main .muted { font-size: 11.5px !important; color: var(--ink-faint) !important; }
  .main p { line-height: 1.5 !important; }
  .main b, .main strong { font-weight: 700 !important; color: #eef2ff !important; }

  /* ---- VERTICAL RHYTHM: one consistent beat between blocks ------------ */
  .panel, .stat-card, .hero, .pool-workspace-content > .panel { margin-bottom: 14px !important; }
  .panel > * + * { margin-top: 0; }         /* let internal specs own their spacing */
  .stat-grid, .cols-2, .cols-3 { gap: 12px !important; }
  .page.active > * + * { margin-top: 0; }   /* sections space themselves via margin-bottom */

  /* body copy measure — never a full-width wall of text */
  .panel p, .main > p, .hint { max-width: 46ch !important; }
}

/* very small phones: keep 6 tab labels on one line */
@media (max-width: 380px) {
  .side-nav .tab b { font-size: 9px !important; }
  .side-nav .tab { padding: 8px 1px !important; }
  .side-foot .sidebar-action { padding: 9px 11px !important; }
}

/* users who prefer less motion get a calm version */
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  body::before, .page.active, .modal, .sidebar-controller-card .dot,
  .side-nav .tab, .side-nav .tab i, .btn { animation: none !important; transition: none !important; }
}