@font-face{font-family:Inter;src:url('../assets/inter.ttf') format('truetype');font-weight:100 900;font-display:swap}

  :root{
    /* Verhēma design tokens: one muted accent, two themes. --accent is the real
       brand gold, sampled from the macron in the wordmark artwork — see
       BRAND-SPEC.md. It was a hand-picked approximation (#CDA33E) for a long
       time, which is why the icon in the tab and the accent on the page never
       quite agreed. Everything else derives from this one value. */
    --accent:#D0A654; --accent-rgb:208,166,84;
    --gold:var(--accent); --gold-bright:color-mix(in srgb, var(--accent) 90%, white);
    --gold-deep:color-mix(in srgb, var(--accent) 76%, black);
    --on-accent:#15140d;
    --r:0px; --maxw:620px;
  }
  html[data-theme="light"]{
    --ink:#FBF9F2; --ink-rgb:251,249,242; --ink-focus:#FFFFFF;
    --ink-soft:#F1EDE0; --ink-line:rgba(20,20,15,.14);
    --paper:#1C1B14; --paper-rgb:28,27,20; --muted:rgba(28,27,20,.56);
    --line:rgba(20,20,15,.10); --ok:#3f7a4c; --warn:#9c6c1c; --bad:#a83a2f;
    --panel:rgba(20,20,15,.035); --panel-strong:rgba(20,20,15,.06);
  }
  html:not([data-theme="light"]){
    --ink:#18191B; --ink-rgb:24,25,27; --ink-focus:#060606;
    --ink-soft:#212226; --ink-line:rgba(255,255,255,.11);
    --paper:#F1F1EE; --paper-rgb:241,241,238; --muted:rgba(241,241,238,.58);
    --line:rgba(255,255,255,.09); --ok:#7fbf8f; --warn:#e0a53e; --bad:#d66a5f;
    --panel:rgba(255,255,255,.045); --panel-strong:rgba(255,255,255,.08);
  }
  *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; border-radius:0 !important; }
  html,body{ height:100%; }
  html{ transition:background .5s ease; }
  body{
    font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--ink); color:var(--paper);
    overflow:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    transition:background .5s ease, color .5s ease;
  }
  .mono{ font-family:"SF Mono","Menlo","Courier New",monospace; letter-spacing:0.06em; }
  .wrap{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column;
         max-width:var(--maxw); margin:0 auto; padding:0 14px;
         transition:filter .25s ease, max-width .5s ease, padding .5s ease; }
  /* --maxw is a phone measure. On a tablet it pinned the app to 620px of a
     1024px screen — 61% — which is what "it wasn't full screen on the tablet"
     was. Scale the column and the caption text with the viewport instead of
     assuming a phone. */
  @media (min-width:760px){
    :root{ --maxw:min(94vw, 900px); }
    .cap-line{ font-size:calc(clamp(30px, 4.4vw, 48px) * var(--cap-scale, 1)); }
  }
  body.overlay-open .wrap{ filter:blur(7px); }
  /* Plain centered footer line, like the mockup — no floating pill. */
  .app-version{ font-family:"SF Mono","Menlo","Courier New",monospace; text-align:center; font-size:10px; letter-spacing:.06em;
                color:var(--muted); opacity:.6; padding:8px 20px 4px; user-select:none; pointer-events:none; }

  header{ padding:18px 2px 14px; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex:none; }
  .brand{ display:flex; flex-direction:row; align-items:center; gap:10px; min-width:0; cursor:pointer; }
  .brand-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  /* Height-capped, width free, object-fit:contain — never `cover`. Most church
     logos are wide lockups rather than square marks, and a square crop turns
     one into an unreadable swatch of its own background colour. That is
     exactly what the Dashboard's "live preview" tile was doing while the
     listener page it claimed to preview drew no logo at all. */
  .brand-logo{ height:34px; width:auto; max-width:min(150px,38vw); object-fit:contain; flex:0 0 auto; display:block; }
  /* `display:block` above outranks the browser's own [hidden] rule, so without
     this a church with no logo still gets a 34px-tall empty box in the header,
     and a logo that fails to decode renders its alt text as broken-image
     lettering next to the wordmark. Measured, not guessed. */
  .brand-logo[hidden]{ display:none; }
  /* Ink mode: one stored file that reads on BOTH themes.
     The logo is used as a mask and filled with --paper — the exact colour the
     church name beside it uses — so it flips with the theme automatically and
     can never disappear. Only ever applied to single-colour artwork: recolouring
     a multi-hue crest would destroy it, so logo-image.js measures that first.
     Half of the real church logos needed this or the background trim; a dark
     navy wordmark measured 1.31:1 against the dark background, i.e. invisible. */
  /* A logo that carries its own white sits on a light plate rather than being
     altered. On the light theme the page is already light, so the plate is not
     drawn — it would be a white box on cream. */
  .brand-logo.plate{ background:#FFFFFF; border-radius:6px; padding:2px 4px; box-sizing:content-box; }
  html[data-theme="light"] .brand-logo.plate{ background:none; padding:0; }
  .brand-logo.ink{ background-color:var(--paper);
                   -webkit-mask:var(--brand-logo-src) center/contain no-repeat;
                           mask:var(--brand-logo-src) center/contain no-repeat; }
  .brand.logo-only .brand-logo{ height:38px; max-width:min(220px,56vw); }
  .wordmark{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; line-height:1.1; letter-spacing:-0.2px; white-space:nowrap; }
  .wordmark .wm-porva{ font-weight:800; font-size:18px; color:var(--paper); }
  .wordmark .wm-church{ font-weight:800; font-size:18px; color:var(--accent); }
  .brand-sub{ font-family:"SF Mono","Menlo","Courier New",monospace; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
  .header-actions{ display:flex; align-items:center; gap:8px; flex:none; }
  .theme-toggle{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none;
                 color:rgba(var(--paper-rgb),.5); cursor:pointer; background:none; border:none; padding:0; }
  .theme-toggle:hover{ color:rgba(var(--paper-rgb),.85); }
  .theme-toggle svg{ width:18px; height:18px; }
  .theme-toggle .moon{ display:none; }
  html[data-theme="light"] .theme-toggle .sun{ display:none; }
  html[data-theme="light"] .theme-toggle .moon{ display:block; }

  /* ---- Reader mode: fades chrome away after inactivity while captions
     are live, so listeners aren't distracted by controls. Tapping
     anywhere (or the corner exit) restores it instantly. ---- */
  /* Reader mode used to ONLY fade the header to opacity:0. Two consequences,
     both reported from a live service as "it never went into reader mode":
     opacity leaves the element occupying its space, so the captions never
     gained any room, and nothing else about the screen changed — so on a
     tablet there was no visible difference at all. It now collapses out of
     the layout and the words take over the screen. */
  /* overflow is VISIBLE by default and hidden only while reader mode collapses
     this away. It used to be hidden always, which silently broke the text-size
     control: that menu is position:absolute and opens DOWNWARD, past the bottom
     of .chrome, so .chrome clipped it. Measured at 390px wide -- a 62px menu
     extending 57px beyond the clip, leaving about 5px visible, and the part
     below the boundary was not even hit-testable, so it could not be seen OR
     tapped. It reads as a layering bug and no z-index can fix it, because
     clipping happens before stacking.
     The hidden state is still needed for the max-height:0 collapse, so it is
     scoped to exactly that. */
  .chrome{ transition:opacity .9s ease, transform .9s ease, max-height .7s ease,
                      padding .7s ease, margin .7s ease; max-height:40vh; overflow:visible; }
  body.reader-mode .chrome{ opacity:0; pointer-events:none; transform:translateY(-4px);
                            max-height:0; overflow:hidden;
                            padding-top:0; padding-bottom:0; margin-top:0; margin-bottom:0; border:0; }
  /* Charcoal, not pitch black — reader mode is the same app, dimmed, and a jump
     to near-#000 read as a different screen entirely. */
  body.reader-mode{ background:var(--ink); }
  /* Use the screen. The 620px column is right for a phone but left ~40% of a
     tablet unused. Line length still has a ceiling: captions are read at arm's
     length and an unbounded measure is harder to follow, not easier. */
  body.reader-mode .wrap{ max-width:min(96vw, 1040px); padding:0 22px; }
  body.reader-mode .cap-line{ font-size:calc(clamp(26px, 6.4vw, 56px) * var(--cap-scale, 1)); }
  /* FULL_SCREEN_READER_MODE_V1
     Baked in from scripts/apply-fullscreen-reader.py, which INJECTED this at
     deploy time and is now deleted.
     That patcher ran from deploy-production.yml on every push to main and
     appended its CSS just before the closing style tag — i.e. AFTER everything
     here — so its
     `max-width:none` silently overrode the reading measure set above. Production
     was therefore running CSS that did not exist in this repository: the marker
     appeared once in the served page and zero times in the file. Exactly the
     failure CLAUDE.md records for the auth materialisers.
     Reconciled rather than copied: the safe-area padding and the stage/shell
     fills below are worth keeping, the max-width override is not — an unbounded
     line length is harder to read, not easier, which is why the ceiling exists. */
  body.reader-mode .stage{ flex:1 1 100%; }
  body.reader-mode .cap-shell{ width:100%; }
  body.reader-mode .captions{
    padding-left:clamp(20px,5vw,54px);
    padding-right:clamp(20px,5vw,54px);
    padding-top:max(18px,env(safe-area-inset-top));
    padding-bottom:max(24px,env(safe-area-inset-bottom));
  }
  body.reader-mode .cap-shell::before,
  body.reader-mode .cap-shell::after{ height:54px; }
  body.reader-mode .reader-hint{ bottom:max(12px,env(safe-area-inset-bottom)); }
  body.reader-mode .cap-shell{ border-color:transparent; background:transparent; }
  body.reader-mode .cap-shell::before,body.reader-mode .cap-shell::after{ opacity:0; transition:opacity .9s ease; }
  .reader-exit{ position:fixed; top:max(12px, env(safe-area-inset-top)); right:12px; z-index:8;
                width:30px; height:30px; display:flex; align-items:center; justify-content:center;
                color:rgba(var(--paper-rgb),.55); background:rgba(var(--ink-rgb),.4); border:1px solid var(--line);
                font-size:15px; line-height:1; opacity:0; pointer-events:none; transition:opacity .5s ease; cursor:pointer; }
  body.reader-mode .reader-exit{ opacity:1; pointer-events:auto; }
  .reader-hint{ position:fixed; bottom:18px; left:0; right:0; z-index:2; text-align:center;
                font-size:11px; color:rgba(var(--paper-rgb),.55); text-transform:uppercase; letter-spacing:.06em;
                opacity:0; transition:opacity .6s ease .4s; pointer-events:none; }
  body.reader-mode .reader-hint{ opacity:.8; }
  body.reader-mode .reader-hint.dismissed{ opacity:0; transition:opacity .6s ease; }
  .lang-chip{ display:none; align-items:center; gap:6px; background:none;
              border:0; padding:0;
              font-size:13px; font-weight:600; color:var(--paper); cursor:pointer; flex:none; }
  .lang-chip .chev{ color:var(--paper); font-size:11px; opacity:.6; }

  /* Row 2: no boxes, no pills — bare icon+label controls on a quiet
     divider line, matching the mockup exactly rather than the old
     button-chip treatment. */
  .status-pill{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    flex:none; padding:0 2px 14px; margin-bottom:14px; border-bottom:1px solid var(--line);
  }
  .status-pill-left{ display:flex; align-items:center; gap:20px; position:relative; }
  .mute-toggle{ border:0; background:none; color:rgba(var(--paper-rgb),.55);
                display:flex; align-items:center; gap:8px; cursor:pointer; padding:0; }
  .mute-toggle svg{ width:17px; height:17px; flex:none; }
  .mute-copy{ display:flex; align-items:baseline; gap:5px; }
  .mute-copy b{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; color:inherit; }
  .mute-copy span{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; color:inherit; }
  .mute-toggle:not(.muted){ color:var(--accent); }
  .mute-toggle.muted{ color:rgba(var(--paper-rgb),.5); }
  .text-size{ position:relative; flex:none; }
  .text-size-toggle{ border:0; background:none; color:rgba(var(--paper-rgb),.6);
                font-family:'Inter'; font-weight:700; font-size:15px; cursor:pointer; padding:0; }
  .text-size-toggle.open, .text-size-toggle:active{ color:var(--accent); }
  .text-size-menu{ position:absolute; top:calc(100% + 10px); left:0; z-index:20; display:flex; align-items:stretch;
                background:var(--panel-strong); border:1px solid var(--line);
                box-shadow:0 14px 34px rgba(0,0,0,.38); backdrop-filter:blur(14px);
                opacity:0; transform:translateY(-6px) scale(.97); pointer-events:none; transition:opacity .16s ease, transform .16s ease; }
  .text-size-menu.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .ts-option{ border:0; border-right:1px solid rgba(var(--paper-rgb),.10); background:transparent; color:rgba(var(--paper-rgb),.6);
              display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px;
              width:52px; height:64px; padding:8px 4px 10px; cursor:pointer; }
  .ts-option:last-child{ border-right:0; }
  .ts-option .ts-glyph{ font-family:'Inter'; font-weight:750; line-height:1; color:inherit; }
  .ts-option.active{ color:var(--accent); background:rgba(var(--accent-rgb),.09); }
  /* No modifier class = actually live (see setStatus() below). */
  .live-seg{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
             letter-spacing:.05em; text-transform:uppercase; color:var(--accent); opacity:1;
             flex:none; margin-left:auto; cursor:pointer; }
  .live-seg .dot{ width:6px; height:6px; background:var(--accent); flex:none; animation:pulse 2.4s infinite; }
  .live-seg.warn{ color:var(--warn); } .live-seg.warn .dot{ background:var(--warn); animation:none; }
  .live-seg.bad{ color:rgba(var(--paper-rgb),.5); opacity:.7; } .live-seg.bad .dot{ background:rgba(var(--paper-rgb),.5); animation:none; }
  @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.34)} 70%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),0)} 100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)} }

  .stage{ flex:1; min-height:0; display:flex; flex-direction:column; position:relative; }
  .resume-btn{
    --progress:0%;
    position:absolute; left:50%; bottom:14px; z-index:6; display:flex; align-items:center; gap:5px;
    background:rgba(var(--ink-rgb),.78); color:rgba(var(--paper-rgb),.86); border:1px solid rgba(var(--accent-rgb),.32);
    border-radius:999px; padding:9px 14px; font-family:'Inter'; font-weight:720; font-size:13.5px;
    cursor:pointer; opacity:0; pointer-events:none; transform:translateX(-50%) translateY(8px); overflow:hidden;
    transition:opacity .42s ease, transform .42s ease, border-color .42s ease; box-shadow:0 8px 22px rgba(0,0,0,.30);
    backdrop-filter: blur(10px);
  }
  .resume-btn::before{ content:""; position:absolute; left:5px; right:5px; bottom:4px; height:2px; border-radius:999px; background:rgba(var(--paper-rgb),.09); pointer-events:none; }
  .resume-btn::after{ content:""; position:absolute; left:5px; bottom:4px; height:2px; width:calc((100% - 10px) * var(--progress-num, 0)); border-radius:999px; background:linear-gradient(90deg, rgba(var(--accent-rgb),.35), rgba(var(--accent-rgb),.72)); pointer-events:none; transition:width .08s linear; }
  .resume-btn.show{ opacity:.94; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  .resume-btn svg,.resume-btn span{ position:relative; z-index:1; }
  .resume-btn svg{ width:15px; height:15px; opacity:.82; }
  .resume-btn .count{ display:inline; min-width:2ch; font-variant-numeric:tabular-nums; opacity:.68; }

  .cap-shell{ position:relative; flex:1; min-height:0; overflow:hidden; }
  .empty-greeting{ position:absolute; left:18px; right:18px; top:60%; transform:translateY(-50%); z-index:3;
    opacity:1; pointer-events:none; transition:opacity .42s ease; }
  .empty-greeting .hero{ font-size:21px; line-height:1.28; font-weight:760; letter-spacing:-.2px; color:var(--paper); margin-bottom:8px; }
  .empty-greeting .quiet{ font-size:13.5px; line-height:1.35; color:rgba(var(--paper-rgb),.48); font-weight:500; }
  .cap-shell.has-captions .empty-greeting{ opacity:0; }
  .captions{ position:absolute; inset:0; overflow:hidden; padding:0 18px; transition:opacity .26s ease; }
  .cap-shell:not(.has-captions) .captions{ opacity:0; }
  .cap-shell.has-captions .captions{ opacity:1; }
  .captions::-webkit-scrollbar{ width:0; }

  .cap-track{
    position:relative;
    will-change:transform;
    transform:translate3d(0,0,0);
  }
  .cap-line{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Inter',sans-serif;
    font-size:calc(clamp(24px, 5.8vw, 34px) * var(--cap-scale, 1)); line-height:1.34; letter-spacing:-.015em;
    font-weight:600;
    color:rgba(var(--paper-rgb),.25); padding-left:20px; position:relative; margin:0 0 18px;
    transition:color 640ms ease, opacity 760ms ease;
  }
  .cap-line.entering{ opacity:0; }
  .cap-line.current{ color:var(--paper); }
  .cap-line.prev1{ color:var(--muted); font-weight:450; }
  .cap-line.prev2{ color:rgba(var(--paper-rgb),.34); font-weight:450; }
  .cap-line.prev3{ color:rgba(var(--paper-rgb),.24); font-weight:450; }
  .cap-line.far{ opacity:0; pointer-events:none; }
  .cap-line::before{ content:""; position:absolute; left:0; top:3px; bottom:3px; width:3px; background:var(--accent);
    opacity:0; transition:opacity 380ms ease; }
  .cap-line.current::before{ opacity:1; }
  .cap-line .sc-inline{ color:var(--accent); font-style:italic; }

  .captions.reading{ overflow-y:auto; padding:clamp(52px,14vh,108px) 18px 96px; touch-action:pan-y;
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .captions.reading .cap-track{ transform:none !important; transition:none; }
  .captions.reading .cap-line{ margin-bottom:22px; opacity:1; transition:color .24s ease;
    color:rgba(var(--paper-rgb),.88); }
  .captions.reading .cap-line.far{ opacity:1; pointer-events:auto; }
  .captions.reading .cap-line.current{ color:var(--paper); }
  .captions.reading .cap-line.current::before{ opacity:.65; }

  @media (prefers-reduced-motion: reduce){
    .cap-track{ transition:none; }
    .cap-line{ transition:color 200ms ease, opacity 200ms ease; }
  }

  .cap-shell::before, .cap-shell::after{ content:""; position:absolute; left:0; right:0; height:96px; pointer-events:none; z-index:2; }
  .cap-shell::before{ top:0; background:linear-gradient(rgba(var(--ink-rgb),1), rgba(var(--ink-rgb),0)); }
  .cap-shell::after{ bottom:0; background:linear-gradient(rgba(var(--ink-rgb),0), rgba(var(--ink-rgb),1)); }

  .bottom-zone{ flex:none; padding:8px 0 max(10px, env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
  .scripture-tab{ overflow:hidden; max-height:54px; }
  .scripture-handle{ height:54px; display:flex; align-items:center; justify-content:flex-start; gap:8px; padding:0 2px; cursor:pointer; }
  .st-chevron{ width:12px; height:12px; color:var(--accent); flex:none; }
  .st-main{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:none; }
  .st-label{ font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:14px; font-weight:600; color:var(--paper); white-space:nowrap; }

  .scripture-overlay{ position:fixed; inset:0; z-index:22; background:rgba(var(--ink-rgb),.36); opacity:0; pointer-events:none; transition:opacity .22s ease; }
  .scripture-overlay.open{ opacity:1; pointer-events:auto; }
  .scripture-sheet{ position:absolute; left:50%; bottom:0; transform:translateX(-50%) translateY(105%); width:min(620px,100%);
    padding:0 18px max(18px, env(safe-area-inset-bottom)); transition:transform .25s ease; }
  .scripture-overlay.open .scripture-sheet{ transform:translateX(-50%) translateY(0); }
  .scripture-card{ background:rgba(var(--ink-rgb),.98); border:1px solid rgba(var(--paper-rgb),.12); border-radius:22px 22px 0 0;
    box-shadow:0 -24px 70px rgba(0,0,0,.48); max-height:var(--scripture-sheet-max, 230px); display:flex; flex-direction:column; overflow:hidden; }
  .scripture-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 16px 13px; border-bottom:1px solid var(--ink-line); }
  .scripture-head h2{ font-size:20px; line-height:1; font-weight:850; letter-spacing:-.4px; }
  .scripture-head p{ margin-top:5px; font-size:13px; color:rgba(var(--paper-rgb),.58); }
  .scripture-head p.scroll-hint{ display:none; margin-top:6px; font-size:12.5px; font-weight:700; color:rgba(var(--accent-rgb),.72); }
  .scripture-head p.scroll-hint.show{ display:block; }
  .close-scriptures{ border:0; background:rgba(var(--paper-rgb),.08); color:var(--paper); width:34px; height:34px; border-radius:50%; font-size:22px; cursor:pointer; flex:none; }
  .scripture-body{ padding:0 16px 14px; overflow-y:auto; overscroll-behavior:contain; }
  .scripture-body::-webkit-scrollbar{ width:0; }
  .scripture-progress{
    position:absolute; right:8px; top:66px; bottom:14px; width:2px; border-radius:999px;
    background:rgba(var(--paper-rgb),.055); opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:2;
  }
  .scripture-progress.show{ opacity:1; }
  .scripture-progress-thumb{
    position:absolute; left:0; top:0; width:100%; height:24px; border-radius:999px;
    background:rgba(var(--accent-rgb),.52); transform:translate3d(0,0,0); transition:height .12s ease, transform .08s linear;
  }
  .sc-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 0; border-bottom:1px solid var(--ink-line); }
  .sc-item .ref{ font-size:17px; font-weight:850; color:var(--paper); }
  .sc-item .hint{ font-size:13px; color:rgba(var(--paper-rgb),.50); margin-top:3px; }
  .sc-item .arr{ color:rgba(var(--paper-rgb),.38); font-size:22px; }
  .trouble{ text-align:center; margin-top:2px; font-size:12px; color:var(--muted); }
  .trouble button{ border:0; background:transparent; color:var(--muted); font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }

  .overlay{ position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(var(--ink-rgb),.48); }
  .overlay.hide{ display:none; }
  .onboard-card{ width:min(520px, 100%); background:rgba(var(--ink-rgb),.92); border:1px solid rgba(var(--accent-rgb),.25); border-radius:22px; padding:21px 20px; box-shadow:0 28px 80px rgba(0,0,0,.55); }
  .onboard-kicker{ font-family:"SF Mono","Menlo","Courier New",monospace; color:var(--gold-bright); font-size:10px; font-weight:800; letter-spacing:2.2px; text-transform:uppercase; margin-bottom:10px; }
  .onboard-card h1{ font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:26px; line-height:1.06; font-weight:850; letter-spacing:-.9px; margin-bottom:12px; }
  .onboard-card p{ color:rgba(var(--paper-rgb),.70); line-height:1.48; font-size:14px; margin-bottom:16px; }
  .steps{ background:rgba(var(--ink-rgb),.6); border:1px solid var(--line); border-radius:15px; padding:12px 13px; display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
  .step{ display:flex; gap:12px; align-items:center; font-weight:700; font-size:14px; }
  .step .n{ width:23px; height:23px; border-radius:50%; background:var(--gold-bright); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; flex:none; }
  .onboard-actions{ display:grid; grid-template-columns:1.2fr .9fr; gap:10px; }
  .primary, .secondary{ border:0; border-radius:13px; padding:13px 12px; font-family:'Inter'; font-size:15px; font-weight:850; cursor:pointer; }
  .primary{ background:var(--gold-bright); color:var(--on-accent); }
  .secondary{ background:rgba(var(--ink-rgb),.7); border:1px solid var(--line); color:var(--paper); }

  .sheet{ position:fixed; left:50%; bottom:0; transform:translateX(-50%) translateY(105%); z-index:25; width:min(620px,100%);
          padding:0 18px max(18px, env(safe-area-inset-bottom)); transition:transform .25s ease; }
  .sheet.open{ transform:translateX(-50%) translateY(0); }
  .sheet-card{ background:rgba(var(--ink-rgb),.96); border:1px solid rgba(var(--accent-rgb),.22); border-radius:22px; padding:0; box-shadow:0 -24px 70px rgba(0,0,0,.45); max-height:min(72vh,560px); display:flex; flex-direction:column; overflow:hidden; position:relative; }

  /* Menu: a centered modal (not a bottom sheet) so it doesn't read as
     stuck-too-low on tall viewports. Reuses .sheet-card for the card look. */
  .menu-overlay{ position:fixed; inset:0; z-index:25; display:none; align-items:center; justify-content:center;
                 padding:24px; background:rgba(var(--ink-rgb),.72); backdrop-filter:blur(8px); }
  .menu-overlay.open{ display:flex; animation:fade .2s ease both; }
  .menu-overlay .sheet-card{ width:min(480px,100%); max-height:min(80vh,620px); box-shadow:0 24px 70px rgba(0,0,0,.45); animation:popin .22s cubic-bezier(.2,.9,.3,1.2) both; }
  .sheet-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:17px 18px 12px; border-bottom:1px solid rgba(var(--paper-rgb),.08); }
  .sheet-title h2{ font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:22px; font-weight:850; letter-spacing:-.4px; line-height:1; }
  .help-scroll-hint{ margin-top:6px; font-size:13px; color:rgba(var(--accent-rgb),.62); opacity:0; transition:opacity .18s ease; }
  .help-scroll-hint.show{ opacity:1; }
  .close-sheet{ border:0; background:rgba(var(--paper-rgb),.08); color:var(--paper); width:34px; height:34px; border-radius:50%; font-size:20px; cursor:pointer; flex:none; }
  .help-body{ overflow-y:auto; padding:0 18px 17px; scroll-behavior:smooth; }
  .help-body::-webkit-scrollbar{ width:0; }
  .fix-list{ display:flex; flex-direction:column; gap:0; }
  .fix{ padding:14px 0; border-top:1px solid var(--ink-line); }
  .fix:first-child{ border-top:0; }
  .fix b{ display:block; font-size:16px; margin-bottom:5px; letter-spacing:-.1px; }
  .fix span{ display:block; color:rgba(var(--paper-rgb),.68); font-size:14px; line-height:1.45; }
  .fix-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .fix-chip{ border:1px solid rgba(var(--accent-rgb),.24); background:rgba(var(--accent-rgb),.07); color:rgba(var(--paper-rgb),.90); border-radius:999px; padding:8px 11px; font-family:'Inter'; font-size:13px; font-weight:760; cursor:pointer; }
  .fix-chip.secondary{ color:rgba(var(--paper-rgb),.62); background:rgba(var(--paper-rgb),.045); border-color:rgba(var(--paper-rgb),.12); }
  .fix-note{ margin-top:8px; font-size:13px; color:rgba(var(--paper-rgb),.48); }
  .feedback-inline{ display:none; margin-top:12px; background:rgba(var(--ink-rgb),.50); border:1px solid rgba(var(--paper-rgb),.10); border-radius:16px; padding:13px; }
  .feedback-inline.open{ display:block; }
  .feedback-inline h3{ font-size:16px; line-height:1.1; margin-bottom:5px; }
  .feedback-inline p{ color:rgba(var(--paper-rgb),.62); font-size:13.5px; line-height:1.4; margin-bottom:10px; }
  .feedback-options{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
  .feedback-options button{ border:1px solid rgba(var(--paper-rgb),.12); background:rgba(var(--paper-rgb),.045); color:rgba(var(--paper-rgb),.76); border-radius:999px; padding:7px 10px; font-family:'Inter'; font-size:12.5px; font-weight:700; cursor:pointer; }
  .feedback-inline textarea{ width:100%; min-height:74px; resize:none; border-radius:13px; border:1px solid rgba(var(--paper-rgb),.12); background:rgba(var(--ink-rgb),.32); color:var(--paper); padding:10px 11px; font-family:'Inter'; font-size:14px; line-height:1.35; outline:none; }
  .feedback-inline textarea::placeholder{ color:rgba(var(--paper-rgb),.36); }
  .feedback-send{ margin-top:9px; width:100%; border:0; background:var(--gold-bright); color:var(--on-accent); border-radius:13px; padding:11px; font-family:'Inter'; font-size:14px; font-weight:850; cursor:pointer; }
  .feedback-thanks{ display:none; color:rgba(var(--paper-rgb),.78); font-size:14px; margin-top:10px; }
  .feedback-inline.sent .feedback-thanks{ display:block; }
  .help-progress{ position:absolute; right:6px; top:66px; bottom:12px; width:2px; border-radius:999px; background:rgba(var(--paper-rgb),.06); opacity:0; pointer-events:none; transition:opacity .18s ease; }
  .help-progress.show{ opacity:1; }
  .help-progress-thumb{ position:absolute; left:0; top:0; width:100%; height:28px; border-radius:999px; background:rgba(var(--accent-rgb),.45); transform:translateY(0); }
  .coach-dim{ position:fixed; inset:0; z-index:31; background:rgba(var(--ink-rgb),.58); opacity:0; pointer-events:none; transition:opacity .22s ease; }
  .coach-dim.show{ opacity:1; }
  .coach-highlight{ position:relative; z-index:35; animation:coachPulse 2.1s ease 1; box-shadow:0 0 0 0 rgba(var(--accent-rgb),0); }
  @keyframes coachPulse{ 0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.0)} 15%{box-shadow:0 0 0 5px rgba(var(--accent-rgb),.28)} 55%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),.18)} 100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)} }

  @media (max-width:380px){
    .wrap{ padding:0 14px; }
    header{ padding-top:18px; }
    .wordmark .wm-porva,.wordmark .wm-church{ font-size:21px; }
    .brand-logo{ height:30px; }
    .cap-line{ margin-bottom:15px; }
    .scripture-handle{ height:56px; }
    .scripture-tab{ max-height:56px; }
  }

  /* Language Picker (from live app) CSS */
  #langpick{ display:none; flex-direction:column; flex:1; padding-bottom:30px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #langpick.show{ display:flex; }
  .lp-scroll-hint{ position:fixed; left:50%; bottom:38px; transform:translateX(-50%);
    display:none; align-items:center; gap:7px; background:rgba(var(--accent-rgb),0.94); color:var(--on-accent);
    border:none; border-radius:999px; padding:9px 16px; font-size:12.5px; font-weight:750;
    letter-spacing:.2px; box-shadow:0 10px 26px rgba(0,0,0,.35); z-index:20; cursor:pointer;
    animation:lpHintBob 1.4s ease-in-out infinite; }
  .lp-scroll-hint.show{ display:flex; }
  .lp-scroll-hint svg{ width:14px; height:14px; }
  @keyframes lpHintBob{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(4px); } }
  .lp-hero{ text-align:center; padding:52px 0 30px; }
  .lp-kicker{ font-family:"SF Mono","Menlo","Courier New",monospace; color:var(--gold-bright); font-size:10px; font-weight:800; letter-spacing:2.2px; text-transform:uppercase; margin-bottom:10px; }
  .lp-hero h1{ font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
               font-weight:850; font-size:clamp(30px,8vw,42px);
               line-height:1.06; letter-spacing:-1.0px; }
  .lp-multi{ margin-top:12px; color:var(--muted); font-size:15px; }
  .lp-list{ display:flex; flex-direction:column; gap:12px; }
  .lp-search{ display:flex; align-items:center; gap:11px; margin-bottom:16px;
              background:rgba(var(--paper-rgb),.045); border:1px solid rgba(var(--paper-rgb),.12);
              border-radius:15px; padding:0 18px; }
  .lp-search svg{ width:19px; height:19px; color:rgba(var(--paper-rgb),0.4); flex:none; }
  .lp-search input{ flex:1; background:none; border:none; outline:none;
                    color:var(--paper); font-family:'Inter',sans-serif;
                    font-size:17px; padding:18px 0; }
  .lp-search input::placeholder{ color:rgba(var(--paper-rgb),0.35); }
  .lp-noresults{ text-align:center; color:rgba(var(--paper-rgb),0.4); font-size:14px;
                 font-style:italic; padding:24px 0; }
  .lp-item{ width:100%; cursor:pointer; text-align:left;
            background:rgba(var(--paper-rgb),.045); border:1px solid rgba(var(--paper-rgb),.12);
            border-radius:15px; padding:22px 24px;
            display:flex; align-items:center; justify-content:space-between;
            font-family:'Inter',sans-serif; color:var(--paper);
            transition:transform .12s ease, border-color .2s ease, background .2s ease; }
  .lp-item:active{ transform:scale(0.985); }
  .lp-item:hover{ border-color:rgba(var(--accent-rgb),0.5); background:rgba(var(--accent-rgb),0.08); }
  .lp-item .lp-name{ font-size:23px; font-weight:750; letter-spacing:0.2px; display:block; }
  .lp-item .lp-native{ font-size:13px; color:rgba(var(--paper-rgb),0.45); margin-top:3px; display:block; }
  .lp-item .lp-arrow{ color:var(--gold-bright); font-size:22px; flex:none; margin-left:16px; }

  /* RTL was applied to the language picker ONLY. The captions — the entire
     point of the app — stayed left-to-right, so every Arabic listener read
     right-to-left text in a left-to-right layout, with the current-line marker
     and its indent on the wrong side. PORVA has Arabic listeners every week, so
     this shipped broken for them from the beginning while looking "done"
     because body.rtl existed and the picker visibly flipped. */
  /* Install suggestion. Fixed, so it does not disturb a layout that has no
     page-level scroll by design (see body{overflow:hidden}). */
  .installcard{position:fixed;left:50%;transform:translateX(-50%);bottom:max(18px,env(safe-area-inset-bottom));z-index:90;width:min(420px,calc(100vw - 26px));background:rgba(28,28,30,.94);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:16px 17px;color:#f1f1ee;box-shadow:0 18px 50px rgba(0,0,0,.45)}
  .installcard h4{margin:0 0 5px;font-size:15.5px;font-weight:700}
  .installcard p{margin:0;font-size:13.5px;line-height:1.5;opacity:.78}
  .installcard .row{display:flex;gap:9px;margin-top:13px}
  .installcard button{flex:0 0 auto;border-radius:10px;padding:9px 15px;font-size:14px;font-weight:660;border:1px solid rgba(255,255,255,.16);background:transparent;color:inherit}
  .installcard button.go{background:#e7b85a;color:#231705;border-color:transparent}
  body.rtl .installcard{direction:rtl;text-align:right}
  body.rtl .lp-hero{ direction:rtl; }
  body.rtl .lp-item{ direction:rtl; }
  body.rtl .captions,
  body.rtl .cap-line{ direction:rtl; text-align:right; }
  body.rtl .cap-line{ padding-left:0; padding-right:20px; }
  body.rtl .cap-line::before{ left:auto; right:0; }
  body.rtl .lp-item .lp-arrow{ margin-left:0; margin-right:16px; transform:scaleX(-1); }

  /* Live Translation controls */
  #admin{ display:none; flex-direction:column; flex:1; padding-bottom:40px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #admin.show{ display:flex; }
  #listener.hide{ display:none; }

  .exit-btn{ background:none; border:1px solid rgba(var(--paper-rgb),.12); color:rgba(var(--paper-rgb),0.7);
             border-radius:999px; padding:9px 16px; font-size:12px; letter-spacing:1px;
             text-transform:uppercase; cursor:pointer; font-family:'Inter'; }

  .health-row{ display:flex; align-items:center; gap:10px; margin:22px 2px 0;
               font-size:13px; color:rgba(var(--paper-rgb),0.7); }
  .health-row .health-note{ flex:1; }
  .reset-stream-btn{ background:rgba(var(--paper-rgb),.055); border:1px solid rgba(var(--paper-rgb),.14);
               border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700;
               color:var(--paper); cursor:pointer; flex:none; }
  .reset-stream-btn:active{ background:rgba(var(--paper-rgb),.1); }
  .health-dot{ width:11px; height:11px; border-radius:50%; background:var(--gold-bright); flex:none; transition:.3s; }
  .health-dot.green{ background:var(--gold-bright); }
  .health-dot.yellow{ background:var(--gold-bright); }
  .health-dot.red{ background:var(--bad); }

  .panel{ background:rgba(var(--paper-rgb),.035); border:1px solid rgba(var(--paper-rgb),.105); border-radius:16px;
          padding:22px; margin-top:16px; }
  .panel h3{ font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
             color:rgba(var(--paper-rgb),0.45); margin-bottom:16px; font-weight:700; }

  .big-toggle{ width:100%; border:none; cursor:pointer; border-radius:14px; padding:26px;
               font-family:'Inter'; font-weight:800; font-size:20px; letter-spacing:.5px;
               display:flex; align-items:center; justify-content:center; gap:14px; transition:.18s; }
  .big-toggle.off{ background:linear-gradient(135deg,var(--gold-deep),var(--gold-bright)); color:var(--on-accent); }
  .big-toggle.on{ background:var(--bad); color:#fff; }
  .big-toggle:active{ transform:scale(.985); }
  .big-toggle:disabled{ opacity:0.4; cursor:not-allowed; }

  .src-label{ font-size:12px; letter-spacing:2px; text-transform:uppercase;
              color:rgba(var(--paper-rgb),0.5); margin-bottom:10px; display:block; }
  .src-hint{ font-size:12.5px; color:rgba(var(--paper-rgb),0.4); margin:13px 0 4px; line-height:1.45; }

  /* Custom styled select dropdowns */
  .lang-select {
    position: relative;
    width: 100%;
  }
  .lang-select select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(var(--paper-rgb), 0.045);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.41 0.589996L6 5.17L10.59 0.589996L12 2L6 8L0 2L1.41 0.589996Z' fill='%23e7b85a'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    border: 1px solid rgba(var(--paper-rgb), 0.12);
    border-radius: 12px;
    padding: 14px 40px 14px 16px;
    color: var(--paper);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  }
  .lang-select select:hover {
    border-color: rgba(var(--accent-rgb), 0.4);
    background-color: rgba(var(--paper-rgb), 0.08);
  }
  .lang-select select:focus {
    border-color: var(--gold-bright);
    background-color: rgba(var(--paper-rgb), 0.08);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
  }
  .lang-select select option {
    background-color: #162838;
    color: var(--paper);
    font-family: inherit;
    font-size: 15px;
  }
  .admin-auth-input {
    width: 100%;
    background-color: rgba(var(--paper-rgb), 0.045);
    border: 1px solid rgba(var(--paper-rgb), 0.12);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--paper);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    outline: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  }
  .admin-auth-input::placeholder {
    color: rgba(var(--paper-rgb), 0.4);
    font-weight: 400;
  }
  .admin-auth-input:hover {
    border-color: rgba(var(--accent-rgb), 0.4);
    background-color: rgba(var(--paper-rgb), 0.08);
  }
  .admin-auth-input:focus {
    border-color: var(--gold-bright);
    background-color: rgba(var(--paper-rgb), 0.08);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
  }
  /* Without this, a <select>'s light text color bleeds into its native
     option popup on a browser-default white background — unreadable until
     hovered/highlighted. */
  select.admin-auth-input option {
    background-color: #162838;
    color: var(--paper);
  }
  @supports (appearance: base-select) {
    .lang-select select,
    .lang-select select::picker(select) {
      appearance: base-select;
    }
    .lang-select select {
      background-image: none;
    }
    .lang-select select::picker(select) {
      background-color: #162838;
      border: 1px solid rgba(var(--paper-rgb), 0.15);
      border-radius: 12px;
      padding: 6px;
      box-shadow: 0 12px 36px rgba(0,0,0,0.5);
    }
    .lang-select select option {
      padding: 10px 14px;
      border-radius: 8px;
      color: var(--paper);
      cursor: pointer;
    }
    .lang-select select option:hover,
    .lang-select select option:focus {
      background-color: rgba(var(--accent-rgb), 0.12);
      color: var(--gold-bright);
    }
    .lang-select select option::checkmark {
      color: var(--gold-bright);
    }
    .lang-select select::picker-icon {
      color: var(--gold-bright);
    }
  }

  .mic-enable-text{ font-size:14px; color:rgba(var(--paper-rgb),0.7); line-height:1.5; margin-bottom:16px; }

  .vu{ background:rgba(0,0,0,0.25); border:1px solid rgba(var(--paper-rgb),.12); border-radius:14px;
       padding:16px; margin-bottom:16px; }
  .vu-bars{ display:flex; align-items:flex-end; justify-content:center; gap:4px; height:54px; }
  .vu-bars i{ flex:1; max-width:11px; background:linear-gradient(to top,var(--gold),var(--gold-bright));
              border-radius:3px; height:6%; transition:height .08s ease-out; opacity:0.85; }
  .vu.silent .vu-bars i{ background:rgba(255,255,255,0.12); }
  .vu.hot .vu-bars i{ background:linear-gradient(to top,var(--gold-bright),var(--bad)); }
  .vu-zones{ display:flex; justify-content:space-between; margin-top:8px; }
  .vu-zones span{ font-size:9.5px; letter-spacing:0.5px; text-transform:uppercase;
                  color:rgba(var(--paper-rgb),0.25); transition:color .2s; }
  .vu.lvl-low  .z-low { color:var(--gold-bright); }
  .vu.lvl-good .z-good{ color:var(--gold-bright); }
  .vu.lvl-hot  .z-hot { color:var(--bad); }
  .vu-state{ text-align:center; font-size:12px; letter-spacing:1px; text-transform:uppercase;
             color:rgba(var(--paper-rgb),0.5); margin-top:12px; }
  .vu.live .vu-state{ color:var(--gold-bright); }
  .vu.error .vu-state{ color:var(--bad); }
  .vu.info .vu-state{ color:var(--gold-bright); }

  .switch{ width:52px; height:30px; border-radius:999px; background:rgba(255,255,255,0.14);
           position:relative; cursor:pointer; transition:.2s; flex:none; }
  .switch.on{ background:var(--gold-bright); }
  .switch i{ position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
             background:#fff; transition:.2s; }
  .switch.on i{ left:25px; }

  .lang-list{ display:flex; flex-direction:column; gap:10px; }
  .lang-item{ display:flex; align-items:center; justify-content:space-between;
              background:rgba(255,255,255,0.04); border:1px solid rgba(var(--paper-rgb),.105);
              border-radius:12px; padding:13px 15px; }
  .lang-item .n{ font-size:15px; font-weight:600; }
  .lang-item .n small{ display:block; font-size:11px; color:rgba(var(--paper-rgb),0.4);
                       letter-spacing:1px; text-transform:uppercase; font-weight:400; }
  .lang-item .rm{ background:none; border:none; color:rgba(var(--paper-rgb),0.4);
                  font-size:20px; cursor:pointer; padding:4px 8px; }
  .lang-item .live-count{ font-size:11px; color:var(--gold-bright); letter-spacing:1px; }
  .add-lang-search{ position:relative; margin-top:14px; }
  .add-lang-search input{ width:100%; background:var(--ink); border:1px solid rgba(var(--paper-rgb),.12); color:var(--paper);
                   border-radius:12px; padding:14px 16px; font-family:'Inter'; font-size:15px; }
  .add-lang-search input::placeholder{ color:rgba(var(--paper-rgb),0.3); }
  .lang-suggest{ display:none; flex-direction:column; margin-top:8px;
                 background:var(--ink); border:1px solid rgba(var(--paper-rgb),.12); border-radius:12px;
                 overflow:hidden; max-height:240px; overflow-y:auto; }
  .lang-suggest.show{ display:flex; }
  .lang-suggest button{ text-align:left; background:none; border:none; cursor:pointer;
                        color:var(--paper); font-family:'Inter'; font-size:15px;
                        padding:13px 16px; border-bottom:1px solid rgba(var(--paper-rgb),.12);
                        display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .lang-suggest button:last-child{ border-bottom:none; }
  .lang-suggest button:active,.lang-suggest button:hover{ background:rgba(var(--accent-rgb),0.12); }
  .lang-suggest .sg-native{ color:rgba(var(--paper-rgb),0.45); font-size:13px; }
  .lang-suggest .sg-none{ padding:13px 16px; color:rgba(var(--paper-rgb),0.4); font-style:italic; font-size:14px; }

  .stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(70px, 1fr)); gap:10px; }
  .stat{ background:rgba(255,255,255,0.04); border:1px solid rgba(var(--paper-rgb),.105); border-radius:12px;
         padding:15px 6px; text-align:center; }
  .stat b{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:26px; display:block; color:var(--gold-bright); }
  .stat span{ font-size:9px; letter-spacing:.2px; text-transform:uppercase; color:rgba(var(--paper-rgb),0.45);
              display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ---- Dashboard sign-in: full-screen, the real front door ---- */
  .auth-overlay{ position:fixed; inset:0; z-index:60; display:none;
                align-items:center; justify-content:center; padding:24px;
                background:rgba(var(--ink-rgb),0.82); backdrop-filter:blur(10px); }
  .auth-overlay.show{ display:flex; animation:fade .2s ease both; }
  @keyframes fade{ from{opacity:0} to{opacity:1} }
  .auth-card{ position:relative; width:100%; max-width:400px;
             background:linear-gradient(180deg, rgba(var(--ink-rgb),.98), rgba(var(--ink-rgb),.98));
             border:1px solid rgba(var(--paper-rgb),.1); border-radius:24px;
             padding:38px 32px 32px; box-shadow:0 24px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--accent-rgb),.05) inset;
             animation:popin .28s cubic-bezier(.2,.9,.3,1.2) both; }
  @keyframes popin{ from{opacity:0; transform:translateY(16px) scale(.97)} to{opacity:1; transform:none} }
  .auth-close{ position:absolute; top:16px; right:18px; background:none; border:none;
              color:rgba(var(--paper-rgb),0.4); font-size:24px; cursor:pointer; line-height:1;
              width:32px; height:32px; border-radius:50%; transition:.15s; }
  .auth-close:hover{ color:var(--paper); background:rgba(var(--paper-rgb),.08); }
  .auth-kicker{ font-family:"SF Mono","Menlo","Courier New",monospace; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
                color:var(--gold-bright); text-align:center; }
  .auth-title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:23px;
               color:var(--paper); text-align:center; margin-top:8px; }
  .auth-sub{ font-size:13.5px; color:rgba(var(--paper-rgb),.5); text-align:center;
             margin-top:8px; line-height:1.5; }
  .auth-body{ margin-top:28px; }
  .auth-google-btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
                     background:#fff; color:#3c4043; border:none; border-radius:12px;
                     padding:13px; font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600;
                     cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.15s; }
  .auth-google-btn:hover{ box-shadow:0 2px 8px rgba(0,0,0,.35); transform:translateY(-1px); }
  .auth-google-btn:active{ transform:translateY(0); }
  .auth-divider{ display:flex; align-items:center; gap:14px; margin:22px 0; }
  .auth-divider::before,.auth-divider::after{ content:''; flex:1; height:1px; background:rgba(var(--paper-rgb),.12); }
  .auth-divider span{ font-size:12px; color:rgba(var(--paper-rgb),.4); letter-spacing:.3px; }
  .auth-field{ margin-bottom:12px; }
  .auth-field label{ display:block; font-size:12px; font-weight:600; letter-spacing:.3px;
                      color:rgba(var(--paper-rgb),.5); margin-bottom:7px; }
  .auth-submit{ width:100%; background:linear-gradient(180deg, var(--gold-bright), var(--gold));
                color:var(--on-accent); border:none; border-radius:12px; padding:14px;
                font-family:'Inter',sans-serif; font-size:14.5px; font-weight:700; cursor:pointer;
                margin-top:6px; transition:.15s; box-shadow:0 6px 20px rgba(var(--accent-rgb),.18); }
  .auth-submit:hover{ filter:brightness(1.06); transform:translateY(-1px); }
  .auth-submit:active{ transform:translateY(0); }
  .auth-toggle{ display:block; width:100%; text-align:center; background:none; border:none;
                color:rgba(var(--paper-rgb),.55); font-size:13px; margin-top:18px; cursor:pointer; }
  .auth-toggle b{ color:var(--gold-bright); font-weight:600; }
  .auth-toggle:hover b{ text-decoration:underline; }
  .auth-error{ font-size:13px; color:var(--bad); text-align:center; margin-top:14px; display:none; }
  .auth-error.show{ display:block; }
  .auth-checking{ text-align:center; padding:8px 0 4px; }
  .auth-spinner{ width:30px; height:30px; margin:0 auto 18px; border-radius:50%;
                 border:3px solid rgba(var(--paper-rgb),.15); border-top-color:var(--gold-bright);
                 animation:spin .8s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .auth-denied-icon{ width:52px; height:52px; margin:0 auto 18px; border-radius:50%;
                      background:rgba(214,106,95,.12); display:flex; align-items:center; justify-content:center; }
  .auth-denied-email{ font-weight:600; color:var(--paper); }
  .auth-outline-btn{ width:100%; background:none; border:1px solid rgba(var(--paper-rgb),.18);
                      color:var(--paper); border-radius:12px; padding:12px; font-family:'Inter',sans-serif;
                      font-size:14px; font-weight:600; cursor:pointer; margin-top:22px; transition:.15s; }
  .auth-outline-btn:hover{ border-color:rgba(var(--paper-rgb),.35); background:rgba(var(--paper-rgb),.04); }

  /* ---- Team management (inside Dashboard) ---- */
  .admin-row{ display:flex; align-items:center; gap:12px; padding:9px 2px; }
  .admin-avatar{ width:34px; height:34px; border-radius:50%; flex-shrink:0;
                 background:rgba(var(--accent-rgb),.14); color:var(--gold-bright);
                 display:flex; align-items:center; justify-content:center;
                 font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; }
  .admin-row-email{ flex:1; font-size:14px; color:var(--paper); overflow:hidden;
                     text-overflow:ellipsis; white-space:nowrap; }
  .admin-row-you{ font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
                   color:var(--gold-bright); background:rgba(var(--accent-rgb),.12);
                   border-radius:999px; padding:2px 8px; margin-left:8px; }
  .admin-row-role{ font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
                    color:rgba(var(--paper-rgb),.5); background:rgba(var(--paper-rgb),.06);
                    border-radius:999px; padding:2px 8px; margin-left:8px; flex:none; }
  .admin-remove-btn{ width:28px; height:28px; border-radius:50%; border:none; flex-shrink:0;
                      background:rgba(var(--paper-rgb),.06); color:rgba(var(--paper-rgb),.5);
                      font-size:16px; line-height:1; cursor:pointer; transition:.15s; }
  .admin-remove-btn:hover{ background:rgba(214,106,95,.18); color:var(--bad); }
  .admin-add-row{ display:flex; gap:8px; margin-top:14px; }
  .admin-add-row input{ flex:1; }
  .admin-add-btn{ width:44px; flex-shrink:0; border:none; border-radius:12px;
                   background:var(--gold-bright); color:var(--on-accent); font-size:20px; font-weight:700;
                   cursor:pointer; transition:.15s; }
  .admin-add-btn:hover{ filter:brightness(1.06); }

  .hamburger-btn{ border:none; background:rgba(var(--paper-rgb),.06); color:var(--paper);
                  width:38px; height:38px; border-radius:50%; cursor:pointer; flex:none;
                  display:flex; align-items:center; justify-content:center; }
  .admin-top-actions{ display:flex; gap:8px; align-items:center; }
                 border-bottom:1px solid rgba(var(--paper-rgb),.06); }
  .admin-menu-body{ overflow-y:auto; padding:6px 18px 22px; }
  .admin-menu-body .panel:first-child{ margin-top:6px; }
  .admin-menu-body .panel{ margin-top:14px; }
  .menu-action-row{ display:flex; align-items:center; width:100%; background:rgba(var(--paper-rgb),.035);
             border:1px solid rgba(var(--paper-rgb),.105); border-radius:16px; padding:15px 16px;
             font-family:'Inter'; font-size:14.5px; font-weight:700; color:var(--paper);
             cursor:pointer; margin-top:6px; }
  .push-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
  .push-row .t b{ font-size:14px; font-weight:600; display:block; }
  .push-row .t span{ font-size:12px; color:rgba(var(--paper-rgb),0.45); }
  .account-identity{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  .account-avatar, .account-avatar-fallback{ width:44px; height:44px; border-radius:50%; flex:none; }
  .account-avatar{ object-fit:cover; }
  .account-avatar-fallback{ display:flex; align-items:center; justify-content:center;
             background:var(--gold-bright); color:var(--on-accent); font-family:'Montserrat',sans-serif;
             font-weight:800; font-size:17px; }
  .account-identity .who{ font-size:13px; color:rgba(var(--paper-rgb),.45); min-width:0; }
  .account-identity .who b{ display:block; color:var(--paper); font-size:14.5px; font-weight:700;
             margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
          background:var(--paper); color:var(--ink); padding:13px 22px; border-radius:999px;
          font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:.3s; z-index:50; }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  /* ===== Verhēma Dashboard ===== */
  body.dashboard-mode{ overflow:auto; background:#0b1721; }
  body.dashboard-mode::before{ background:radial-gradient(900px 600px at 75% -10%,rgba(44,111,157,.14),transparent 65%),radial-gradient(700px 500px at 10% 110%,rgba(var(--accent-rgb),.08),transparent 70%); }
  body.dashboard-mode .wrap{ max-width:none; padding:0; margin:0; min-height:100%; height:auto; }
  body.dashboard-mode .wrap>header{ display:none; }
  #admin.dashboard-shell{ width:100%; min-height:100vh; margin:0; padding:0; display:grid!important; grid-template-columns:252px minmax(0,1fr); }
  .dashboard-sidebar{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:26px 18px 18px; background:rgba(var(--ink-rgb),.94); border-right:1px solid rgba(var(--paper-rgb),.08); backdrop-filter:blur(18px); z-index:15; }
  .dashboard-brand{ display:flex; align-items:center; gap:12px; padding:0 8px 26px; }
  .dashboard-mark{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-family:'Montserrat'; font-size:18px; font-weight:800; color:#10212e; background:linear-gradient(145deg,var(--gold-bright),var(--gold)); box-shadow:0 9px 28px rgba(var(--accent-rgb),.18); }
  .dashboard-brand strong{ display:block; font-family:'Montserrat'; font-size:17px; letter-spacing:-.2px; }
  .dashboard-brand span{ display:block; margin-top:2px; color:rgba(var(--paper-rgb),.42); text-transform:uppercase; letter-spacing:1.7px; font-size:8px; font-weight:700; }
  .dashboard-nav{ display:flex; flex-direction:column; gap:3px; }
  .dashboard-nav-label{ padding:18px 12px 7px; color:rgba(var(--paper-rgb),.3); text-transform:uppercase; letter-spacing:1.6px; font-size:9px; font-weight:800; }
  .dashboard-nav-item{ position:relative; width:100%; display:flex; align-items:center; justify-content:space-between; border:0; border-radius:11px; padding:11px 12px; background:transparent; color:rgba(var(--paper-rgb),.62); text-align:left; font:600 13.5px 'Inter'; cursor:pointer; transition:.18s ease; }
  .dashboard-nav-item:hover{ color:var(--paper); background:rgba(var(--paper-rgb),.045); }
  .dashboard-nav-item.active{ color:var(--paper); background:linear-gradient(90deg,rgba(var(--accent-rgb),.15),rgba(var(--accent-rgb),.045)); box-shadow:inset 2px 0 0 var(--gold-bright); }
  .dashboard-live-indicator{ display:none; width:7px; height:7px; border-radius:50%; background:#ef6f68; box-shadow:0 0 0 4px rgba(239,111,104,.1); }
  body.dashboard-is-live .dashboard-live-indicator{ display:block; }
  .dashboard-sidebar-foot{ margin-top:auto; padding:15px 12px 4px; border-top:1px solid rgba(var(--paper-rgb),.07); }
  .dashboard-account-name{ font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dashboard-account-role{ margin-top:4px; color:rgba(var(--paper-rgb),.38); font-size:11px; }
  .dashboard-content{ min-width:0; padding:26px clamp(22px,4vw,56px) 60px; }
  .dashboard-topbar{ max-width:1180px; margin:0 auto 28px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
  .dashboard-eyebrow,.dashboard-card-kicker{ display:block; color:rgba(var(--paper-rgb),.4); text-transform:uppercase; letter-spacing:1.55px; font-size:9px; font-weight:800; }
  .dashboard-topbar h1{ margin-top:5px; font:800 clamp(24px,3vw,34px)/1.1 'Montserrat'; letter-spacing:-.8px; }
  .dashboard-top-actions{ display:flex; align-items:center; gap:10px; }
  .dashboard-status-pill{ display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid rgba(var(--paper-rgb),.1); border-radius:999px; color:rgba(var(--paper-rgb),.7); font-size:11px; font-weight:700; background:rgba(var(--paper-rgb),.035); }
  .dashboard-status-pill i{ width:7px; height:7px; border-radius:50%; background:#58c78d; box-shadow:0 0 0 4px rgba(88,199,141,.1); }
  .dashboard-status-pill.warn i{ background:#e7b85a; }.dashboard-status-pill.bad i{ background:#d66a5f; }
  .dashboard-mobile-menu{ display:none; border:1px solid rgba(var(--paper-rgb),.12); color:var(--paper); background:rgba(var(--paper-rgb),.05); border-radius:11px; width:40px; height:40px; font-size:17px; cursor:pointer; }
  .dashboard-page{ display:none; max-width:1180px; margin:0 auto; animation:dashboardFade .2s ease both; }
  .dashboard-page.active{ display:block; }
  @keyframes dashboardFade{ from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
  .dashboard-section-intro{ margin-bottom:22px; }.dashboard-section-intro h2{ font:800 22px/1.2 'Montserrat'; letter-spacing:-.35px; }.dashboard-section-intro p{ margin-top:7px; color:rgba(var(--paper-rgb),.48); line-height:1.5; font-size:13.5px; }
  .dashboard-hero-card,.dashboard-card,#admin.dashboard-shell .panel{ border:1px solid rgba(var(--paper-rgb),.09); background:linear-gradient(145deg,rgba(var(--ink-rgb),.84),rgba(var(--ink-rgb),.78)); border-radius:18px; box-shadow:0 16px 45px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.025); }
  .dashboard-hero-card{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding:28px 30px; background:radial-gradient(650px 220px at 85% 10%,rgba(var(--accent-rgb),.10),transparent 60%),linear-gradient(145deg,rgba(var(--ink-rgb),.96),rgba(var(--ink-rgb),.88)); }
  .dashboard-hero-card h2{ margin-top:8px; font:800 clamp(22px,3vw,31px)/1.2 'Montserrat'; letter-spacing:-.65px; }.dashboard-hero-card p{ margin-top:8px; color:rgba(var(--paper-rgb),.52); font-size:13.5px; }
  .dashboard-billing-notice{ display:none; align-items:flex-start; gap:12px; margin-top:14px; padding:14px 16px; border:1px solid rgba(var(--accent-rgb),.34); border-radius:14px; background:rgba(var(--accent-rgb),.09); color:rgba(var(--paper-rgb),.82); font-size:13px; line-height:1.55; }
  .dashboard-billing-notice.show{ display:flex; }.dashboard-billing-notice.bad{ border-color:rgba(239,104,104,.4); background:rgba(239,104,104,.1); }.dashboard-billing-notice i{ flex:0 0 8px; width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--gold); }.dashboard-billing-notice.bad i{ background:var(--bad); }.dashboard-billing-notice strong{ color:var(--cream); }
  .dashboard-primary-action,.dashboard-secondary-action{ border:0; border-radius:12px; padding:13px 18px; font:750 13px 'Inter'; cursor:pointer; transition:.18s; white-space:nowrap; }
  .dashboard-primary-action{ color:#10202d; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); box-shadow:0 8px 24px rgba(var(--accent-rgb),.15); }.dashboard-primary-action:hover{ transform:translateY(-1px); filter:brightness(1.04); }
  .dashboard-secondary-action{ color:var(--paper); background:rgba(var(--paper-rgb),.055); border:1px solid rgba(var(--paper-rgb),.11); }
  .dashboard-grid{ display:grid; gap:18px; margin-top:18px; }.dashboard-grid-two{ grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-card{ padding:22px; min-width:0; }
  .dashboard-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.dashboard-card h3{ margin-top:6px; font:750 17px/1.25 'Montserrat'; letter-spacing:-.25px; }
  .dashboard-plan-chip,.dashboard-count-chip,.dashboard-health-badge{ border-radius:999px; padding:6px 9px; font-size:9.5px; font-weight:800; letter-spacing:.35px; text-transform:uppercase; white-space:nowrap; }
  .dashboard-plan-chip{ color:var(--gold-bright); background:rgba(var(--accent-rgb),.11); border:1px solid rgba(var(--accent-rgb),.14); }.dashboard-count-chip{ color:#8bd8ae; background:rgba(88,199,141,.1); }.dashboard-health-badge{ color:#8bd8ae; background:rgba(88,199,141,.1); }.dashboard-health-badge.warn{ color:var(--gold-bright); background:rgba(var(--accent-rgb),.1); }.dashboard-health-badge.bad{ color:#ef938a; background:rgba(214,106,95,.12); }
  .dashboard-usage-number{ display:flex; align-items:baseline; gap:8px; margin:24px 0 11px; }.dashboard-usage-number strong{ font:800 30px 'Montserrat'; letter-spacing:-1px; }.dashboard-usage-number span{ color:rgba(var(--paper-rgb),.42); font-size:12px; }
  .dashboard-progress{ height:9px; border-radius:999px; background:rgba(var(--paper-rgb),.08); overflow:hidden; }.dashboard-progress i{ display:block; height:100%; width:0; border-radius:inherit; background:#4c9ad0; transition:width .5s ease,background .2s; }
  .dashboard-progress i.usage-gold{ background:#d6ab50; }.dashboard-progress i.usage-orange{ background:#df8848; }.dashboard-progress i.usage-red{ background:#d85f58; }
  .dashboard-card-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; color:rgba(var(--paper-rgb),.4); font-size:11px; }.dashboard-text-action{ border:0; background:transparent; color:var(--gold-bright); font:700 11px 'Inter'; cursor:pointer; }
  .dashboard-card-copy{ color:rgba(var(--paper-rgb),.48); line-height:1.55; font-size:12.5px; margin-top:18px; }
  .dashboard-listener-link{ display:flex; align-items:center; gap:8px; margin-top:15px; padding:9px 10px 9px 12px; border:1px solid rgba(var(--paper-rgb),.09); border-radius:11px; background:rgba(0,0,0,.12); }.dashboard-listener-link span{ min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(var(--paper-rgb),.65); font-size:11px; }.dashboard-listener-link button{ border:0; border-radius:8px; padding:7px 10px; color:var(--gold-bright); background:rgba(var(--accent-rgb),.1); font:700 10px 'Inter'; cursor:pointer; }
  .dashboard-pipeline{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:8px; margin-top:24px; }.dashboard-pipeline>div{ min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; color:rgba(var(--paper-rgb),.48); text-align:center; font-size:9px; line-height:1.25; }.dashboard-pipeline i{ width:10px; height:10px; border-radius:50%; background:#58c78d; box-shadow:0 0 0 4px rgba(88,199,141,.08); }.dashboard-pipeline>div.warn i{ background:#e7b85a; }.dashboard-pipeline>div.bad i{ background:#d66a5f; }.dashboard-pipeline>b{ color:rgba(var(--paper-rgb),.18); font-size:18px; }
  .dashboard-empty-state{ margin-top:20px; padding:18px; border:1px dashed rgba(var(--paper-rgb),.1); border-radius:12px; color:rgba(var(--paper-rgb),.36); font-size:12px; line-height:1.5; }
  #admin.dashboard-shell>.health-row,#admin.dashboard-shell>#audioPanel,#admin.dashboard-shell>#servicePanel,#admin.dashboard-shell>#languagesPanel,#admin.dashboard-shell>#safetyPanel,#admin.dashboard-shell>.app-version{ display:none!important; }
  #admin.dashboard-shell .dashboard-page>.health-row{ margin:0 0 16px; }#admin.dashboard-shell .dashboard-page>.panel{ margin:0 0 16px; padding:22px; }#admin.dashboard-shell .panel h3{ font:750 16px 'Montserrat'; letter-spacing:-.2px; }
  .dashboard-access-card{ display:grid; grid-template-columns:190px 1fr; gap:26px; align-items:center; }.dashboard-access-card img{ width:190px; height:190px; background:#fff; border-radius:15px; padding:10px; }.dashboard-action-row{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
  .dashboard-form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0; }.dashboard-form-grid label{ display:flex; flex-direction:column; gap:7px; color:rgba(var(--paper-rgb),.48); font-size:11px; font-weight:700; }
  .dashboard-language-row{ display:grid; grid-template-columns:minmax(110px,1fr) 2fr auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid rgba(var(--paper-rgb),.07); }.dashboard-language-row:last-child{ border-bottom:0; }.dashboard-language-row strong{ font-size:12px; }.dashboard-language-row span{ color:rgba(var(--paper-rgb),.4); font-size:11px; text-align:right; }.dashboard-mini-bar{ height:6px; border-radius:999px; background:rgba(var(--paper-rgb),.08); overflow:hidden; }.dashboard-mini-bar i{ display:block; height:100%; background:#4c9ad0; border-radius:inherit; }
  .dashboard-service-list{ margin-top:18px; }.dashboard-service-row{ display:grid; grid-template-columns:1fr auto auto; gap:16px; padding:13px 0; border-top:1px solid rgba(var(--paper-rgb),.07); font-size:11px; }.dashboard-service-row span{ color:rgba(var(--paper-rgb),.42); }.dashboard-mobile-nav-list{ display:flex; flex-direction:column; gap:1px; }
  body.dashboard-mode .app-version{ position:static; margin-top:18px; display:inline-flex; }
  @media(max-width:850px){#admin.dashboard-shell{grid-template-columns:1fr}.dashboard-sidebar{display:none}.dashboard-content{padding:18px 14px 48px}.dashboard-mobile-menu{display:block}.dashboard-topbar{margin-bottom:20px}.dashboard-grid-two{grid-template-columns:1fr}.dashboard-hero-card{align-items:flex-start;flex-direction:column;gap:20px;padding:24px}}
  @media(max-width:560px){.dashboard-content{padding-inline:10px}.dashboard-topbar{padding-inline:5px}.dashboard-topbar h1{font-size:25px}.dashboard-status-pill{display:none}.dashboard-card,.dashboard-hero-card,#admin.dashboard-shell .dashboard-page>.panel{padding:18px;border-radius:16px}.dashboard-access-card{grid-template-columns:1fr;text-align:center}.dashboard-access-card img{margin:0 auto}.dashboard-form-grid{grid-template-columns:1fr}.dashboard-pipeline{gap:4px}.dashboard-pipeline>div{font-size:8px}.dashboard-service-row{grid-template-columns:1fr auto}.dashboard-service-row span:first-child{grid-column:1/-1}}