/* ===========================================================
   Tele.MohsenRashidi.art — design tokens
   Palette: broadcast control-room dark, tally-red accent.
   Type: Vazirmatn (Persian/Latin) for content, JetBrains Mono
   for HUD/timecode-style numeric readouts.
   Signature: viewfinder reading-band reticle + tally status pill.
   =========================================================== */

@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn Fallback';
  src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn Fallback';
  src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Naskh Arabic';
  src: url('/fonts/NotoNaskhArabic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Lalezar';
  src: url('/fonts/Lalezar.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg-stage: #000000;
  --bg-deck: #131316;
  --bg-panel: #1c1d21;
  --bg-panel-2: #232429;
  --hairline: #2c2d33;
  --text-primary: #f5f5f4;
  --text-secondary: #9a9ba3;
  --text-dim: #5c5d66;
  --accent-tally: #ff3b3b;
  --accent-amber: #f5a623;
  --accent-green: #35d07f;
  --focus-ring: #4f8cff;
  --font-fa: 'Vazirmatn', 'Vazirmatn Fallback', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
/* Dark Blue — a deep, slightly green-tinted night-sky blue (not teal/cyan) */
[data-theme="dark-blue"] {
  --bg-stage: #04100f;
  --bg-deck: #0b1a20;
  --bg-panel: #122631;
  --bg-panel-2: #19323f;
  --hairline: #234152;
  --text-primary: #edf6f8;
  --text-secondary: #8ea7b0;
  --text-dim: #536e78;
}
/* Light */
[data-theme="light"] {
  --bg-stage: #ffffff;
  --bg-deck: #f2f2f4;
  --bg-panel: #ffffff;
  --bg-panel-2: #ececee;
  --hairline: #dddde1;
  --text-primary: #1a1a1e;
  --text-secondary: #6b6c74;
  --text-dim: #a5a6ad;
}
/* Pure Black — OLED-friendly, true black everywhere */
[data-theme="pure-black"] {
  --bg-stage: #000000;
  --bg-deck: #000000;
  --bg-panel: #0a0a0a;
  --bg-panel-2: #141414;
  --hairline: #1e1e1e;
  --text-primary: #f5f5f4;
  --text-secondary: #9a9ba3;
  --text-dim: #5c5d66;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  color: var(--text-primary);
  font-family: var(--font-fa);
  overscroll-behavior: none;
}

body { height: 100dvh; overflow: hidden; }

/* While the camera screen is open, the WebView must paint TRANSPARENT pixels
   everywhere the native camera view should show through. Setting the
   WebView's own background transparent is NOT enough — the HTML content
   drawn onto it (html/body/#app/#cameraScreen backgrounds) is what actually
   covers the camera. So the whole ancestor chain down to .cam-frame goes
   transparent, and the other screens are genuinely hidden instead of merely
   being masked by an opaque .camera-screen (which is what used to cover the
   camera). Controls and text overlays inside the camera screen keep their
   own backgrounds, so they still render on top of the live image. */
/* The native preview renders BEHIND the webview, so this whole chain has to
   be see-through — an opaque #cameraScreen paints over the camera itself.
   The white letterbox strips are handled natively instead, by blacking out
   the Android content root behind the preview. */
body.camera-active,
body.camera-active #app,
body.camera-active #cameraScreen { background: transparent !important; }
body.camera-active .screen,
body.camera-active #tabBar,
body.camera-active #stage { display: none !important; }

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
input, textarea {
  font-family: inherit;
  color: inherit;
}

.hidden { display: none !important; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ===================== PIN GATE ===================== */
.pin-gate {
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg-stage);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pin-card {
  width: 100%; max-width: 360px;
  text-align: center;
}
.pin-logo {
  font-family: var(--font-mono);
  font-size: 22px; letter-spacing: 2px;
  color: var(--text-primary); margin-bottom: 8px;
}
.pin-logo span { color: var(--accent-tally); }
.pin-card p { color: var(--text-secondary); margin: 8px 0 20px; }
.pin-input {
  width: 100%; padding: 14px; font-size: 22px; text-align: center;
  letter-spacing: 6px; background: var(--bg-panel); border: 1px solid var(--hairline);
  border-radius: 10px; margin-bottom: 16px;
}
.pin-input:focus { outline: none; border-color: var(--focus-ring); }
.pin-error { color: var(--accent-tally); font-size: 13px; margin-top: 12px; }

/* ===================== ONBOARDING ===================== */
.onb-screen {
  position: fixed; inset: 0; z-index: 600;
  background: var(--bg-stage);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.onb-skip {
  position: absolute; top: calc(18px + var(--safe-top)); right: calc(18px + var(--safe-right));
  z-index: 10; color: var(--text-secondary); font-size: 14px; font-weight: 600;
  padding: 8px 14px;
}
.onb-track {
  position: relative; flex: 1; width: 100%; overflow: hidden;
  touch-action: pan-y;
}
.onb-page {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 36px;
}
.onb-visual { height: 140px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.onb-bars { display: flex; flex-direction: column; gap: 14px; width: 220px; }
.onb-bars span { height: 12px; border-radius: 6px; background: var(--text-dim); opacity: .5; align-self: flex-end; }
.onb-bars .onb-bar-red {
  background: var(--accent-tally); opacity: 1;
  animation: onbBarPulse 4s ease-in-out infinite;
}
@keyframes onbBarPulse {
  0%, 82%, 100% { box-shadow: 0 0 20px rgba(255,59,59,.5); transform: scaleX(1); }
  90% { box-shadow: 0 0 30px rgba(255,59,59,.9); transform: scaleX(1.04); }
}
.onb-mic, .onb-cam {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--bg-panel); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
}
.onb-mic svg, .onb-cam svg { width: 40px; height: 40px; }

.onb-rtl-icon { width: 96px; height: 96px; border-radius: 50%; background: var(--bg-panel); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; }
.onb-rtl-svg { width: 40px; height: 40px; }
.rtl-line { stroke: var(--accent-tally); }
.rtl-arrow { fill: var(--accent-tally); }
/* lines shift between right-aligned and left-aligned with a springy
   overshoot, looping every few seconds — same idea as a well-known
   open-source "align" icon's hover animation, just on a timer instead */
.rtl-line-1 { animation: rtlLine1 4s cubic-bezier(.34,1.56,.64,1) infinite; }
.rtl-line-2 { animation: rtlLine2 4s cubic-bezier(.34,1.56,.64,1) infinite; animation-delay: .06s; }
.rtl-line-3 { animation: rtlLine3 4s cubic-bezier(.34,1.56,.64,1) infinite; animation-delay: .12s; }
@keyframes rtlLine1 { 0%, 35% { transform: translateX(0); } 50%, 85% { transform: translateX(-5px); } 100% { transform: translateX(0); } }
@keyframes rtlLine2 { 0%, 35% { transform: translateX(0); } 50%, 85% { transform: translateX(-2px); } 100% { transform: translateX(0); } }
@keyframes rtlLine3 { 0%, 35% { transform: translateX(0); } 50%, 85% { transform: translateX(-5px); } 100% { transform: translateX(0); } }

/* mic: the capsule gives a couple of little bounces, like it's picking up
   sound — same motion as a well-known open-source animated mic icon */
.onb-mic svg { overflow: visible; }
.onb-mic .mic-capsule { animation: micBounce 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes micBounce {
  0%, 60%, 100% { transform: translateY(0); }
  66% { transform: translateY(-3px); }
  72% { transform: translateY(0); }
  78% { transform: translateY(-2px); }
  84% { transform: translateY(0); }
}

/* camera: the flip-out arrow slides open like a shutter, with a quick
   brightness flash on the body */
.onb-cam .cam-body { animation: camFlash 4s ease-in-out infinite; }
@keyframes camFlash { 0%, 60%, 100% { opacity: 1; } 66% { opacity: .35; } 72% { opacity: 1; } }
.onb-cam .cam-arrow { transform-box: fill-box; transform-origin: left center; animation: camArrow 4s cubic-bezier(.34,1.56,.64,1) infinite; }
@keyframes camArrow { 0%, 60%, 100% { transform: translateX(0); } 70%, 85% { transform: translateX(2px); } }

.onb-headline {
  font-size: 27px; font-weight: 700; line-height: 1.3; margin-bottom: 14px;
}
.onb-headline .onb-word {
  display: inline-block; opacity: 0; transform: translateY(38px) scale(.94); filter: blur(6px);
  animation: onbWordIn .85s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes onbWordIn { to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }

.onb-sub { color: var(--text-secondary); font-size: 15px; line-height: 1.6; max-width: 320px; }
.onb-sub .onb-word-sub { display: inline-block; }
.onb-start.btn-primary { margin-top: 28px; padding: 14px 32px; flex: none; width: auto; }

.onb-dots {
  display: flex; justify-content: center; gap: 8px;
  padding-bottom: calc(28px + var(--safe-bottom));
}
.onb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hairline); transition: background .2s, width .2s; }
.onb-dot.active { background: var(--accent-tally); width: 20px; border-radius: 4px; }

.onb-touch-glow {
  position: fixed; top: 0; left: 0; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,59,59,.22), rgba(255,59,59,0) 70%);
  transform: translate(-50%, -50%) scale(0); pointer-events: none; z-index: 50;
  transition: transform .25s cubic-bezier(.22,.8,.3,1), opacity .25s ease-out;
  opacity: 0;
}
.onb-touch-glow.active { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ===================== AUTH / SIGN-IN ===================== */
.auth-screen {
  position: fixed; inset: 0; z-index: 600;
  background: var(--bg-stage);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.auth-card { width: 100%; max-width: 380px; }
.auth-logo {
  font-family: var(--font-mono); font-weight: 800; font-size: 20px; text-align: center;
  margin-bottom: 40px; color: var(--text-primary);
}
.auth-step h2 { font-size: 21px; font-weight: 700; text-align: center; margin-bottom: 8px; }
.auth-sub { color: var(--text-secondary); font-size: 14px; text-align: center; margin-bottom: 26px; }

.btn-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #1f1f1f; font-weight: 600; font-size: 14.5px;
  padding: 13px; border-radius: 10px;
}
.btn-google:active { background: #f1f1f1; }

.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 22px 0;
  color: var(--text-dim); font-size: 12.5px;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

.auth-label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.auth-input {
  width: 100%; padding: 14px 16px; font-size: 16px;
  background: var(--bg-panel); border: 1px solid var(--hairline); border-radius: 10px;
  color: var(--text-primary); margin-bottom: 14px;
}
.auth-input:focus { outline: none; border-color: var(--focus-ring); }
.auth-code-input { text-align: center; letter-spacing: 8px; font-family: var(--font-mono); font-size: 22px; }
.auth-code-input::placeholder { font-size: 15px; letter-spacing: normal; font-family: var(--font-fa); }
.auth-btn { width: 100%; padding: 14px; }
.auth-error { color: var(--accent-tally); font-size: 13px; text-align: center; margin-top: 12px; }
.auth-back-link { display: block; width: 100%; text-align: center; color: var(--text-secondary); font-size: 13.5px; margin-top: 18px; }
.auth-legal { color: var(--text-dim); font-size: 11.5px; text-align: center; margin-top: 30px; line-height: 1.5; }

/* ===================== CUSTOM CONFIRM MODAL ===================== */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.confirm-card {
  width: 100%; max-width: 340px;
  background: var(--bg-panel);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 22px 20px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.confirm-card p {
  color: var(--text-primary); font-size: 15px; line-height: 1.5;
  text-align: center; margin: 4px 0 20px;
}
.confirm-actions { display: flex; gap: 10px; }
.confirm-btn-cancel {
  flex: 1; background: var(--bg-panel-2); color: var(--text-primary);
  border-radius: 12px; padding: 12px; font-weight: 600;
}
.confirm-btn-cancel:active { background: var(--bg-deck); }
.confirm-btn-danger {
  flex: 1; background: var(--accent-tally); color: #fff;
  border-radius: 12px; padding: 12px; font-weight: 700;
}
.confirm-btn-danger:active { background: #e02f2f; }
.confirm-btn-discard {
  flex: 1; background: var(--bg-panel-2); color: var(--accent-amber);
  border-radius: 12px; padding: 12px; font-weight: 600;
}
.confirm-btn-discard:active { background: var(--bg-deck); }
.confirm-btn-save {
  flex: 1; background: var(--accent-tally); color: #fff;
  border-radius: 12px; padding: 12px; font-weight: 700;
}
.confirm-btn-save:active { background: #e02f2f; }

/* ===================== APP SHELL ===================== */
.app { height: 100%; }

.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--bg-deck);
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(12px + var(--safe-top)) 16px 12px;
  min-height: calc(64px + var(--safe-top));
  box-sizing: border-box;
  background: var(--bg-deck);
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
/* camera control bars keep their designed left-to-right layout — dense
   icon rows where reordering wasn't requested and risks breaking things */
[dir="rtl"] .cam-utility-row,
[dir="rtl"] .cam-controls,
[dir="rtl"] .cam-bottom-stack,
[dir="rtl"] .stage-controls,
[dir="rtl"] .tab-bar {
  direction: ltr;
}
/* ...except the utility row itself: back button should sit at the far
   right (natural RTL "back" position), followed by settings/flip/gallery */
[dir="rtl"] .cam-utility-row {
  flex-direction: row-reverse;
}
/* the stage top bar and any header's icon actions DO mirror — back moves
   to the natural "back" side for RTL reading, settings/save follow */
[dir="rtl"] .stage-top-bar,
[dir="rtl"] .topbar-actions {
  flex-direction: row-reverse;
}
/* navigation chevrons/back-arrows do mirror, since they indicate reading
   direction rather than a fixed control layout */
[dir="rtl"] .row-chevron,
[dir="rtl"] .back-btn svg,
[dir="rtl"] #btnCloseHelp svg,
[dir="rtl"] #btnCloseLegal svg,
[dir="rtl"] #btnCameraBack svg,
[dir="rtl"] #btnExit svg {
  transform: scaleX(-1);
}
.brand {
  font-family: var(--font-mono);
  font-weight: 700; font-size: 16px; letter-spacing: 1.5px;
  color: var(--text-primary);
}
[dir="rtl"] .brand,
[dir="rtl"] .pin-logo {
  font-family: var(--font-fa);
  font-weight: 700;
}
.brand span { color: var(--accent-tally); }
.topbar-actions { display: flex; gap: 8px; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-panel);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:active { background: var(--bg-panel-2); color: var(--text-primary); }
.icon-btn.active { background: var(--bg-panel-2); color: var(--accent-tally); }

/* ===================== HELP SCREEN ===================== */
.help-screen {
  position: fixed; inset: 0; z-index: 700;
  background: var(--bg-stage);
  display: flex; flex-direction: column;
}
.help-header {
  display: flex; align-items: center; gap: 14px;
  padding: calc(16px + var(--safe-top)) 20px 16px;
  border-bottom: 1px solid var(--hairline);
  font-size: 19px; font-weight: 700; flex-shrink: 0;
}
.help-body {
  flex: 1; overflow-y: auto; padding: 24px 20px calc(40px + var(--safe-bottom));
  -webkit-overflow-scrolling: touch;
}
.help-intro {
  font-size: 17px; line-height: 1.7; color: var(--text-secondary);
  margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline);
}
.help-section { margin-bottom: 34px; }
.help-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--bg-panel); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.help-icon svg { width: 24px; height: 24px; }
.help-section h2 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.help-section p { font-size: 16.5px; line-height: 1.75; color: var(--text-secondary); }
.icon-btn.back-btn { background: none; }

.legal-tabs {
  display: flex; gap: 6px; padding: 12px 20px; overflow-x: auto;
  border-bottom: 1px solid var(--hairline); flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.legal-tab {
  flex-shrink: 0; padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
  background: var(--bg-panel); border: 1px solid var(--hairline); color: var(--text-secondary);
  white-space: nowrap;
}
.legal-tab.active { background: var(--accent-tally); border-color: var(--accent-tally); color: #fff; }
.legal-panel h2 { font-size: 21px; font-weight: 700; margin-bottom: 4px; }
.legal-panel h3 { font-size: 16.5px; font-weight: 700; margin: 24px 0 8px; }
.legal-panel p { font-size: 15.5px; line-height: 1.75; color: var(--text-secondary); margin-bottom: 4px; }
.legal-panel a { color: var(--accent-tally); text-decoration: underline; }
.legal-updated { font-size: 13px; color: var(--text-dim); margin-bottom: 18px; }

/* ===================== BOTTOM TAB BAR ===================== */
.tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  background: var(--bg-deck);
  border-top: 1px solid var(--hairline);
  padding-bottom: var(--safe-bottom);
}
.tab-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 0 8px; color: var(--text-secondary);
}
.tab-btn svg { width: 22px; height: 22px; }
.tab-btn span { font-size: 11px; }
.tab-btn.active { color: var(--accent-tally); }

/* root tab screens reserve space so content isn't hidden behind the tab bar */
#screenDocuments .docs-list,
#screenConnection,
#screenSender,
#screenReceiver,
#screenSettings .settings-body {
  padding-bottom: 90px;
}
#screenConnection { overflow-y: auto; }
#screenSender, #screenReceiver { overflow-y: auto; }

/* ===================== DOCUMENTS SEARCH (inline in topbar) ===================== */
.docs-search-inline {
  flex: 1; min-width: 0; margin: 0 10px; padding: 9px 14px; font-size: 15px;
  background: var(--bg-panel); border: 1px solid var(--hairline);
  border-radius: 10px; color: var(--text-primary);
  animation: search-expand .18s ease-out;
}
.docs-search-inline::placeholder { color: var(--text-dim); }
.docs-search-inline:focus { outline: none; border-color: var(--focus-ring); }
.docs-search-inline.search-no-match { border-color: var(--accent-tally); }
@keyframes search-expand {
  from { opacity: 0; transform: scaleX(0.85); }
  to { opacity: 1; transform: scaleX(1); }
}

/* ===================== CONNECTION SCREENS ===================== */
.screen-subtitle { color: var(--text-secondary); font-size: 14px; padding: 4px 20px 16px; text-align: center; }
.screen-hint { color: var(--text-dim); font-size: 13px; text-align: center; padding: 0 20px; }
.screen-note { color: var(--text-dim); font-size: 12px; text-align: center; padding: 20px; line-height: 1.5; }

/* ===================== CONNECT (redesigned) ===================== */
.connect-row {
  display: flex; align-items: center; gap: 14px;
  margin: 6px 16px; padding: 14px 16px; border-radius: 14px;
  background: var(--bg-panel); border: 1px solid var(--hairline);
}
.connect-row:active { background: var(--bg-panel-2); }
.connect-row-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-panel-2); color: var(--accent-tally);
}
.connect-row-icon svg { width: 18px; height: 18px; }
.connect-row-text { flex: 1; min-width: 0; text-align: left; }
[dir="rtl"] .connect-row-text { text-align: right; }
.connect-row-title { font-size: 14.5px; font-weight: 700; margin-bottom: 2px; }
.connect-row-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.connect-row-chevron { width: 16px; height: 16px; color: var(--text-dim); flex-shrink: 0; }
[dir="rtl"] .connect-row-chevron { transform: scaleX(-1); }

.qr-card {
  margin: 18px auto 10px; width: 176px; height: 176px; padding: 12px;
  background: #fff; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.qr-card svg { width: 100%; height: 100%; display: block; }
.pairing-code-small {
  text-align: center; font-family: var(--font-mono); font-size: 26px; font-weight: 700;
  letter-spacing: 6px; color: var(--text-primary); margin: 4px 0 2px;
}
.connect-status-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; color: var(--text-secondary); font-size: 13px;
}
.connect-status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-tally);
  animation: connectPulse 1.4s ease-in-out infinite;
}
@keyframes connectPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.receiver-entry { margin: 4px 20px 0; }
.scan-qr-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 10px; padding: 14px; border-radius: 12px;
  background: var(--bg-panel); border: 1px solid var(--hairline); color: var(--text-primary);
  font-size: 14px; font-weight: 600;
}
.scan-qr-btn svg { width: 18px; height: 18px; }
.receiver-divider {
  display: flex; align-items: center; gap: 10px; margin: 16px 20px;
  color: var(--text-dim); font-size: 12px;
}
.receiver-divider::before, .receiver-divider::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

.qr-scan-screen {
  position: fixed; inset: 0; z-index: 400; background: #000;
  display: flex; flex-direction: column;
}
/* While scanning, the native camera renders BEHIND the webview, so the whole
   ancestor chain must be see-through and the other screens genuinely hidden —
   the same approach the camera screen uses. The scan frame's large box-shadow
   still dims everything outside the target square. */
body.qr-scanning,
body.qr-scanning #app,
body.qr-scanning .qr-scan-screen { background: transparent !important; }
body.qr-scanning .screen,
body.qr-scanning #tabBar,
body.qr-scanning #stage { display: none !important; }
.qr-scan-header {
  display: flex; align-items: center; gap: 12px;
  padding: calc(14px + var(--safe-top)) 16px 14px;
}
.qr-scan-viewport { position: relative; flex: 1; overflow: hidden; }
.qr-scan-viewport video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qr-scan-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 220px; height: 220px; border: 3px solid var(--accent-tally); border-radius: 20px;
  box-shadow: 0 0 0 2000px rgba(0,0,0,.45);
}
.qr-scan-hint { text-align: center; color: #fff; font-size: 13px; padding: 18px 20px calc(20px + var(--safe-bottom)); }

.connect-request-card {
  background: var(--bg-panel); border: 1px solid var(--hairline); border-radius: 18px;
  padding: 24px; text-align: center; margin: 40px 20px;
}
.connect-request-email {
  font-family: var(--font-mono); font-size: 15px; color: var(--accent-tally);
  margin: 10px 0 18px; word-break: break-all;
}
.connect-request-actions { display: flex; gap: 10px; }
.connect-request-actions .btn { flex: 1; }

.receiver-remote-banner {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 8px 16px; background: rgba(255,59,59,.14); color: var(--accent-tally);
  font-size: 12.5px; font-weight: 600;
}
.receiver-remote-banner .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-tally); animation: connectPulse 1.4s ease-in-out infinite; }

.version-footer { text-align: center; color: var(--text-dim); font-size: 12px; margin-top: 12px; }

/* ===================== DOCUMENT DETAIL ===================== */
.detail-actions {
  flex-shrink: 0; display: flex; gap: 8px;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  background: var(--bg-deck); border-top: 1px solid var(--hairline);
}
.btn-detail-action { background: var(--bg-panel); color: var(--text-primary); border: 1px solid var(--hairline); flex: 1; }
.btn-detail-action svg { width: 16px; height: 16px; }
.btn-detail-action:active { background: var(--bg-panel-2); }

/* ===================== CAMERA SCREEN ===================== */
/* physical-tilt rotation, direction driven by the real system
   screen.orientation signal (not raw sensor math) even though the
   screen itself stays locked to portrait — each control rotates in
   place around its own center; layout/positions never change, only
   the glyphs inside them */
#cameraScreen.tilt-left button,
#cameraScreen.tilt-left .record-timer,
#cameraScreen.tilt-left .slider-label,
#cameraScreen.tilt-left .slider-value,
#cameraScreen.tilt-left .cam-countdown-badge {
  transform: rotate(-90deg);
}
#cameraScreen.tilt-right button,
#cameraScreen.tilt-right .record-timer,
#cameraScreen.tilt-right .slider-label,
#cameraScreen.tilt-right .slider-value,
#cameraScreen.tilt-right .cam-countdown-badge {
  transform: rotate(90deg);
}
#cameraScreen.tilt-right #camTextViewport,
#cameraScreen.tilt-left #camTextViewport {
  position: fixed !important;
  top: calc(50px + var(--safe-top)) !important; left: 50% !important; right: auto !important; bottom: auto !important;
  width: 260px !important;
  margin: 0 !important; margin-left: -130px !important;
  z-index: 999 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#cameraScreen.tilt-left #camTextViewport { transform: rotate(-90deg) !important; }
#cameraScreen.tilt-right #camTextViewport { transform: rotate(90deg) !important; }

/* until real video streaming between devices exists, the receiver sees a
   plain black screen instead of its own camera (which would be
   misleading — it should eventually show the sender's camera). The native
   camera preview sits behind the whole webview, so blocking it just means
   giving this screen its own opaque layer again for that specific case. */
#cameraScreen.receiver-mode .cam-frame {
  background: #000;
}

.camera-screen {
  position: fixed; inset: 0; z-index: 60;
  background: #000; /* overridden to transparent by body.camera-active while
    the camera is actually running — it used to be opaque to mask whatever
    screen was underneath, but that is exactly what covered the camera view;
    the other screens are now explicitly hidden instead. */
}
.cam-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  overflow: hidden; touch-action: none;
  background: transparent; /* the native camera-preview plugin renders behind
    the webview (toBack:true) exactly within this rectangle's bounds */
}
.cam-grid-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 5;
}
.cam-text-viewport {
  position: absolute; top: calc(14px + var(--safe-top)); left: 20px; right: 20px;
  z-index: 61;
  background: var(--cam-backdrop-color, rgba(0,0,0,.55));
  border-radius: 16px; padding: 14px 16px;
  overflow: hidden;
}
.cam-text-overlay {
  color: var(--cam-text-color, #f5f5f4);
  font-size: 20px; line-height: 1.5;
  white-space: pre-wrap; will-change: transform;
  margin: 0 auto;
}
.camera-error {
  position: absolute; top: 50%; left: 20px; right: 20px; transform: translateY(-50%);
  text-align: center; color: var(--text-secondary); font-size: 15px; z-index: 61;
}
.cam-play-countdown-num {
  font-size: 18px; font-weight: 700; color: var(--accent-tally);
}
@keyframes gallery-bounce {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-14px) scale(1.15); }
  50% { transform: translateY(0) scale(0.92); }
  70% { transform: translateY(-6px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}
#btnCamGallery.bounce { animation: gallery-bounce .6s ease; }

/* utility row + controls panel, stacked together at the bottom so the
   text viewport above has as much room as possible */
.cam-bottom-stack {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 130;
  display: flex; flex-direction: column;
  padding: 0 calc(14px + var(--safe-left)) calc(14px + var(--safe-bottom)) calc(14px + var(--safe-right));
}
.cam-utility-row {
  /* tightened from gap:8px / 40px buttons to make room for the always-on
     record timer without the row wrapping or overflowing */
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 10px;
}
.cam-utility-row .icon-btn { width: 36px; height: 36px; border-radius: 9px; }
.cam-utility-row .icon-btn svg { width: 18px; height: 18px; }
.cam-utility-row .icon-btn {
  background: rgba(10,10,12,.82); border: 1px solid rgba(255,255,255,.08);
}
.cam-utility-row .record-timer { margin-inline-start: auto; font-size: 13px; padding: 5px 11px; }
.cam-controls { position: relative; }

.cam-effect-picker {
  max-height: 0; overflow: hidden;
  transition: max-height .28s ease;
}
.cam-effect-picker.open { max-height: 108px; margin-bottom: 10px; }
.cam-effect-list {
  display: flex; flex-wrap: nowrap; gap: 8px;
  background: rgba(10,10,12,.92); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 12px 8px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.cam-effect-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative; flex: 0 0 auto; width: 65px;
}
.cam-effect-thumb {
  width: 65px; height: 65px; border-radius: 11px; object-fit: cover;
  border: 2px solid transparent; background: #000;
}
.cam-effect-item.active .cam-effect-thumb { border-color: var(--accent-tally); }
.cam-effect-name {
  font-size: 9px; color: var(--text-secondary); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cam-effect-import-tile .cam-effect-thumb {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); color: var(--text-dim); font-size: 20px;
}
.cam-effect-delete-x {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(120,120,125,.95); color: #fff; font-size: 10px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-panel-2);
}
.cam-effect-star {
  position: absolute; bottom: 13px; right: -6px; z-index: 2;
  /* bigger than the original 16px purely for tappability — it sits at the
     tile corner and was fiddly to hit */
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(120,120,125,.95); color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-panel-2);
}
.cam-effect-star.pinned { background: #f5c518; color: #1a1a1a; }
.cam-effect-menu {
  position: fixed; z-index: 310;
  background: var(--bg-panel-2); border: 1px solid var(--hairline);
  border-radius: 12px; overflow: hidden; min-width: 140px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.cam-effect-menu button {
  display: block; width: 100%; text-align: left; padding: 11px 16px;
  font-size: 13.5px; color: var(--text-primary);
}
.cam-effect-menu button:active { background: var(--bg-deck); }
.cam-effect-menu button[data-menu-act="delete"] { color: var(--accent-tally); }

.record-timer {
  background: rgba(0,0,0,.55); color: #fff;
  font-family: var(--font-mono); font-size: 14px; padding: 6px 14px; border-radius: 20px;
}
.record-timer {
  /* sits at the end of the utility row; keeps its footprint whether idle or
     recording so the row never reflows mid-take */
  white-space: nowrap; flex-shrink: 0;
}
.record-timer::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-tally); margin-right: 7px; vertical-align: middle;
  animation: pulse 1.4s infinite;
}
.record-timer.idle {
  background: rgba(10,10,12,.82); border: 1px solid rgba(255,255,255,.08);
  color: var(--text-dim);
}
.record-timer.idle::before { background: rgba(255,255,255,.28); animation: none; }
.record-btn {
  width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.15); border: 4px solid #fff;
  display: flex; align-items: center; justify-content: center;
}
.record-btn-inner {
  width: 46px; height: 46px; border-radius: 50%; background: var(--accent-tally);
  transition: all .2s ease;
}
.record-btn.is-recording .record-btn-inner {
  width: 22px; height: 22px; border-radius: 6px;
}
#btnCamPlayPause.stage-btn-play {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.08); color: var(--text-primary); border-color: rgba(255,255,255,.1);
}
#btnCamPlayPause.stage-btn-play svg { width: 17px; height: 17px; }
.cam-text-viewport { touch-action: none; }

.editor-main {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 16px; gap: 10px;
}
.editor-toolbar-h {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  overflow-x: auto;
}
.doc-title-input {
  background: none; border: none; border-bottom: 1px solid var(--hairline);
  padding: 8px 2px; font-size: 17px; font-weight: 600;
  color: var(--text-primary);
}
.doc-title-input:focus { outline: none; border-color: var(--focus-ring); }
.doc-title-input::placeholder { color: var(--text-dim); }

.editor-textarea {
  flex: 1; min-height: 0; resize: none; overflow-y: auto;
  background: var(--bg-panel); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 14px; font-size: 17px; line-height: 1.8;
  outline: none;
}
.editor-textarea:focus { border-color: var(--focus-ring); }
.editor-textarea.is-empty::before {
  content: attr(data-placeholder); color: var(--text-dim); pointer-events: none;
}

.editor-row { flex: 1; min-height: 0; display: flex; gap: 8px; }
.editor-row .editor-textarea { flex: 1; }

.toolbar-btn {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-panel); color: var(--text-secondary);
}
.toolbar-btn svg { width: 20px; height: 20px; }
.toolbar-btn:active { background: var(--bg-panel-2); color: var(--text-primary); }
.toolbar-btn.active { background: var(--bg-panel-2); color: var(--accent-tally); }
.toolbar-btn-text span { font-size: 18px; font-family: Georgia, 'Times New Roman', serif; color: inherit; }
#btnFontPicker { font-size: 15px; font-weight: 700; }
.toolbar-sep-v { width: 1px; height: 26px; background: var(--hairline); margin: 0 4px; flex-shrink: 0; }

.editor-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-dim); padding: 0 2px;
}
.save-state { transition: color .2s; }
.save-state.dirty { color: var(--accent-amber); }
.save-state.saved { color: var(--accent-green); }

.editor-footer {
  flex-shrink: 0;
  display: flex; gap: 8px;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  background: var(--bg-deck); border-top: 1px solid var(--hairline);
}
.btn {
  flex: 1; padding: 13px 10px; border-radius: 10px;
  font-size: 14px; font-weight: 600; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
}
.btn-ghost { background: none; color: var(--text-secondary); flex: 0.8; }
.btn-ghost:active { color: var(--text-primary); }
.btn.icon-only { flex: 0 0 auto; width: 46px; padding: 0; }
#dirArrow { transition: transform .15s ease; transform-origin: center; }
#btnDirToggle.is-rtl #dirArrow { transform: scaleX(-1); }
.btn-outline { background: var(--bg-panel); color: var(--text-primary); border: 1px solid var(--hairline); flex: 0.9; }
.btn-outline:active { background: var(--bg-panel-2); }
.btn-start {
  flex: 1.4; background: var(--accent-tally); color: #fff;
}
.btn-start:active { background: #e02f2f; }
.play-icon { width: 14px; height: 14px; }
.btn-primary { width: 100%; background: var(--accent-tally); color: #fff; border-radius: 10px; padding: 13px; font-weight: 700; }

/* ===================== SHEETS (documents / settings) ===================== */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end;
}
.sheet {
  width: 100%; max-height: 82vh;
  background: var(--bg-deck);
  border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  padding-bottom: var(--safe-bottom);
  animation: sheet-up .22s ease-out;
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sheet-handle { width: 36px; height: 4px; background: var(--hairline); border-radius: 2px; margin: 10px auto; flex-shrink: 0; }
.sheet-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 18px 14px; flex-shrink: 0; border-bottom: 1px solid var(--hairline);
}
.sheet-header h2 { font-size: 16px; margin: 0; }
.sheet-close { width: 32px; height: 32px; font-size: 14px; }

/* documents list */
.docs-list { overflow-y: auto; padding: 8px 12px 20px; }
.docs-empty { text-align: center; color: var(--text-dim); padding: 40px 0; font-size: 14px; }

.doc-item-wrap {
  position: relative; overflow: hidden; border-radius: 14px; margin-bottom: 8px;
}
.doc-item-actions {
  position: absolute; top: 0; bottom: 0; width: 136px;
  display: flex; z-index: 1;
}
.doc-item-actions-left { left: 0; }
.doc-item-actions-right { right: 0; }
.action-btn {
  flex: 1; border: none; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; color: #fff; font-size: 11px;
}
.action-btn svg { width: 20px; height: 20px; }
.action-pin { background: var(--accent-amber); }
.action-remove { background: var(--accent-tally); }
.doc-item-wrap.swipe-armed-left .doc-item-actions-left { background: var(--accent-amber); }
.doc-item-wrap.swipe-armed-right .doc-item-actions-right { background: var(--accent-tally); }
.doc-item-wrap.swipe-armed-left .action-btn,
.doc-item-wrap.swipe-armed-right .action-btn { transform: scale(1.15); transition: transform .15s ease; }

.doc-item {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 12px; border-radius: 14px;
  background: var(--bg-panel);
  cursor: pointer; touch-action: pan-y;
  transition: transform .32s cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.doc-item-main { flex: 1; min-width: 0; padding-right: 30px; }
.doc-item-title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-item-snippet { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.doc-item-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; font-family: var(--font-mono); }
.pin-badge { color: var(--accent-amber); flex-shrink: 0; }
.pin-badge svg { width: 16px; height: 16px; }

/* per-card 3-dot menu */
.doc-item-menu-btn {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  border-radius: 8px; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
}
.doc-item-menu-btn svg { width: 16px; height: 16px; }
.doc-item-menu-btn:active { background: var(--bg-panel-2); color: var(--text-primary); }
[dir="rtl"] .doc-item-title,
[dir="rtl"] .doc-item-snippet,
[dir="rtl"] .doc-item-sub {
  text-align: right;
}
[dir="rtl"] .doc-item-main { padding-right: 0; padding-left: 30px; }
[dir="rtl"] .doc-item-menu-btn { right: auto; left: 8px; }
.doc-item-menu {
  position: fixed; z-index: 200;
  background: var(--bg-panel-2); border: 1px solid var(--hairline);
  border-radius: 12px; overflow: hidden; min-width: 150px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.doc-item-menu button {
  display: block; width: 100%; text-align: left;
  padding: 11px 14px; font-size: 13.5px; color: var(--text-primary);
  background: none; border: none;
}
.doc-item-menu button:active { background: var(--bg-deck); }
.doc-item-menu button + button { border-top: 1px solid var(--hairline); }
.doc-item-menu button[data-menu-act="delete"] { color: var(--accent-tally); }

/* select mode */
.doc-item.select-mode { cursor: default; }
.doc-checkbox {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--hairline); display: flex; align-items: center; justify-content: center;
}
.doc-checkbox svg { width: 14px; height: 14px; opacity: 0; }
.doc-checkbox.checked { background: var(--accent-tally); border-color: var(--accent-tally); }
.doc-checkbox.checked svg { opacity: 1; }

/* undo snackbar */
.undo-snackbar {
  position: fixed; left: 16px; right: 16px; bottom: calc(90px + var(--safe-bottom));
  z-index: 60; background: var(--bg-panel-2); border: 1px solid var(--hairline);
  border-radius: 14px; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  animation: snackbar-up .2s ease-out;
}
@keyframes snackbar-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.undo-snackbar span { font-size: 14px; color: var(--text-primary); }
.undo-btn { color: var(--accent-tally); font-weight: 700; font-size: 14px; white-space: nowrap; margin-left: 12px; }

/* add-menu popover */
.add-menu-wrap { position: relative; }
.add-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  background: var(--bg-panel); border: 1px solid var(--hairline);
  border-radius: 14px; overflow: hidden; min-width: 190px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
[dir="rtl"] .add-menu { right: auto; left: 0; }
.add-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 16px; font-size: 14px; color: var(--text-primary);
  background: none; border: none; text-align: left;
}
.add-menu-item svg { width: 18px; height: 18px; color: var(--text-secondary); flex-shrink: 0; }
.add-menu-item:active { background: var(--bg-panel-2); }
.add-menu-item + .add-menu-item { border-top: 1px solid var(--hairline); }

/* settings */
.settings-body { overflow-y: auto; padding: 6px 18px 24px; }
.setting-row { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
#screenSettings .setting-row { margin: 0 16px; width: calc(100% - 32px); }
.settings-section-label {
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .5px;
  margin: 22px 0 6px;
}
.settings-section-label:first-child { margin-top: 4px; }
.settings-list-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 2px; margin: 0 16px; width: calc(100% - 32px);
  border-bottom: 1px solid var(--hairline);
  color: var(--text-primary); font-size: 14.5px; text-align: left;
}
.settings-list-row:active { background: var(--bg-deck); }
.settings-list-value { color: var(--text-dim); }
.row-chevron { width: 18px; height: 18px; color: var(--text-dim); flex-shrink: 0; }
.settings-save-default-row { border-bottom: none; }
.settings-save-default-btn {
  width: 100%; padding: 13px; border-radius: 12px;
  background: var(--accent-tally); color: #fff; font-size: 14.5px; font-weight: 600;
  margin-bottom: 10px;
}
.settings-save-default-btn:active { opacity: .85; }
.settings-save-default-note {
  font-size: 12px; line-height: 1.5; color: var(--text-dim);
}
.setting-row label { display: block; font-size: 14px; color: var(--text-secondary); margin-bottom: 10px; }
.setting-control { display: flex; align-items: center; gap: 12px; }
.setting-val { min-width: 42px; text-align: center; font-size: 13px; color: var(--text-primary); background: var(--bg-panel); border-radius: 6px; padding: 3px 6px; }

input[type=range] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 4px; background: var(--hairline); border-radius: 2px; outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-tally); border: 2px solid #fff; cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-tally); border: 2px solid #fff; cursor: pointer;
}

.toggle-row { display: flex; align-items: center; justify-content: space-between; }
.toggle-row label { margin-bottom: 0; }
.switch { width: 46px; height: 26px; background: var(--bg-panel-2); border-radius: 13px; position: relative; flex-shrink: 0; transition: background .15s; }
.switch[aria-checked="true"] { background: var(--accent-tally); }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); }
[dir="rtl"] .switch-knob { left: auto; right: 3px; }
[dir="rtl"] .switch[aria-checked="true"] .switch-knob { transform: translateX(-20px); }

.segmented { display: flex; gap: 6px; }
.segmented button { flex: 1; padding: 9px 4px; background: var(--bg-panel); border-radius: 8px; font-size: 12.5px; color: var(--text-secondary); }
.segmented button.active { background: var(--accent-tally); color: #fff; }
.setting-note { font-size: 11.5px; color: var(--text-dim); margin: 8px 2px 0; line-height: 1.5; }

.swatches { display: flex; gap: 10px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--hairline); }
.swatch.active { border-color: var(--accent-tally); box-shadow: 0 0 0 2px rgba(255,59,59,.25); }

/* ===================== PROMPTER STAGE ===================== */
.stage {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg-stage);
  overflow: hidden;
}

/* Manual rotate: forces a landscape-shaped layout inside the stage and
   spins it back to fill the (physically portrait) screen. Independent of
   the device's actual orientation — for rigs where the phone itself stays
   put but the reading direction needs to be landscape. */
.stage.stage-rotated {
  inset: auto;
  top: 0; left: 0;
  width: 100vh;
  height: 100vw;
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
}

.stage-mirror {
  position: absolute; inset: 0;
  transition: transform .15s ease;
}
.stage-viewport {
  position: absolute; inset: 0;
  overflow-y: scroll;
  scrollbar-width: none;
}
.stage-viewport::-webkit-scrollbar { display: none; }

.stage-pad-top { height: var(--reticle-pos, 42%); }
.stage-pad-bottom { height: 70%; }

.stage-text {
  font-family: var(--font-fa);
  font-size: 40px;
  line-height: 1.6;
  color: var(--text-primary);
  width: 90%;
  margin: 0 auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 0 4px;
}

.vf-word.vf-read { color: var(--text-dim); transition: color .25s ease; }

/* reticle: reading-band guide, always screen-normal (never mirrored) */
.reticle {
  position: absolute; inset: 0; z-index: 120;
  pointer-events: none;
}
.reticle-line {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--reticle-color, #ff3b3b) 12%, var(--reticle-color, #ff3b3b) 88%, transparent);
  opacity: .55;
}
.reticle-top { top: var(--reticle-pos, 42%); }
.reticle-bottom { top: calc(var(--reticle-pos, 42%) + var(--reticle-gap, 15%)); }
.reticle .tick {
  position: absolute; top: -4px; width: 1px; height: 9px;
  background: var(--reticle-color, #ff3b3b); opacity: .7;
}
.reticle-line .tick:nth-child(1) { left: 6%; }
.reticle-line .tick:nth-child(2) { right: 6%; }

.status-pill {
  position: absolute; top: calc(14px + var(--safe-top)); right: calc(16px + var(--safe-right));
  z-index: 130;
  display: flex; align-items: center; gap: 7px;
  background: rgba(28,29,33,.82); backdrop-filter: blur(6px);
  border: 1px solid var(--hairline);
  border-radius: 20px; padding: 7px 13px;
  font-size: 12px; color: var(--text-secondary);
  transition: opacity .2s;
}
[dir="rtl"] .status-pill { right: auto; left: calc(16px + var(--safe-left)); }
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); }
.status-pill.live .dot { background: var(--accent-tally); box-shadow: 0 0 0 0 rgba(255,59,59,.6); animation: pulse 1.4s infinite; }
.status-pill .sep { color: var(--text-dim); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,59,59,.55); }
  70% { box-shadow: 0 0 0 7px rgba(255,59,59,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,59,0); }
}

.countdown-overlay {
  position: absolute; inset: 0; z-index: 140;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
}
.countdown-num {
  font-family: var(--font-mono); font-size: 120px; font-weight: 700;
  color: var(--accent-tally);
}

.stage-tap-zone { position: absolute; inset: 0; z-index: 110; touch-action: none; }

.stage-top-bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 130;
  display: flex; align-items: center; gap: 8px;
  padding: calc(12px + var(--safe-top)) calc(16px + var(--safe-left)) 24px calc(16px + var(--safe-right));
  /* no background wash: it assumed a dark stage and smudged light/coloured
     ones. The text itself is faded via a mask on .stage-viewport instead. */
  transition: transform .2s ease, opacity .2s ease;
}
.stage-top-bar .icon-btn {
  background: rgba(10,10,12,.82);
  border: 1px solid rgba(255,255,255,.08);
  width: 40px; height: 40px;
}

.stage-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 130;
  padding: 24px calc(14px + var(--safe-left)) calc(14px + var(--safe-bottom)) calc(14px + var(--safe-right));
  /* see .stage-top-bar — fading is done on the text, not with a wash */
  transition: transform .2s ease, opacity .2s ease;
}
.controls-panel {
  background: rgba(10,10,12,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 12px 12px 18px;
}
.controls-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; row-gap: 8px; }
.controls-row-primary { margin-bottom: 10px; }

.stage-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.1);
  position: relative;
}
.stage-btn svg { width: 19px; height: 19px; }
.stage-btn:active { background: rgba(255,255,255,.18); }
.stage-btn.active {
  background: rgba(255,59,59,.18); border-color: rgba(255,59,59,.4); color: var(--accent-tally);
}
.stage-btn.loading {
  animation: pulse 1.1s ease-in-out infinite;
}
.stage-btn-play {
  width: 58px; height: 58px; background: var(--accent-tally); border-color: transparent;
}
.stage-btn-play svg { width: 23px; height: 23px; }
.stage-btn-play.is-playing svg { width: 17px; height: 17px; }

.countdown-badge {
  position: absolute; bottom: -3px; right: -3px;
  background: var(--accent-tally); color: #fff;
  font-size: 9.5px; line-height: 1; padding: 2.5px 4.5px;
  border-radius: 8px; min-width: 13px; text-align: center;
  border: 1.5px solid var(--bg-stage);
}

.controls-row-sliders { gap: 18px; align-items: stretch; }
.slider-block { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.slider-block-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 1px; }
.slider-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; }
.adj-btn {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  background: rgba(255,255,255,.08); font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center; color: var(--text-secondary);
}
.adj-btn:active { background: rgba(255,255,255,.2); color: #fff; }
.slider-value { min-width: 20px; text-align: center; font-size: 11px; color: var(--text-secondary); }

input.stage-range[type=range] {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 2px; background: rgba(255,255,255,.14) !important; border-radius: 999px; outline: none; margin: 0;
  accent-color: rgba(255,255,255,.85);
  transition: height .15s ease;
}

input.stage-range[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.9) !important; border: none !important; cursor: pointer; box-shadow: none !important;
}
input.stage-range[type=range]::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%; border: none !important;
  background: rgba(255,255,255,.9) !important; cursor: pointer; box-shadow: none !important;
}

.stage-hint {
  position: absolute; bottom: calc(10px + var(--safe-bottom)); left: 50%; transform: translateX(-50%);
  z-index: 130; font-size: 11.5px; color: var(--text-dim);
  background: rgba(19,19,22,.7); padding: 5px 12px; border-radius: 20px;
  pointer-events: none; transition: opacity .25s;
}

.voice-debug {
  position: absolute; top: calc(64px + var(--safe-top)); left: 50%; transform: translateX(-50%);
  z-index: 130; font-size: 13px; color: #fff; text-align: center;
  background: rgba(28,29,33,.92); padding: 10px 18px; border-radius: 20px;
  max-width: calc(100% - 48px);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  pointer-events: none;
  animation: toast-in .2s ease-out;
}
.voice-debug.vt-error { color: var(--accent-tally); }
.voice-debug.vt-blink { animation: toast-in .2s ease-out, toast-blink 2s ease-in-out infinite; }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toast-blink {
  0%, 100% { text-shadow: none; }
  50% { text-shadow: 0 0 8px rgba(255,59,59,.9), 0 0 18px rgba(255,59,59,.6); }
}

/* voice language: combined picker button + full-screen modal (used in
   both the main Settings screen and the stage's quick settings panel).
   Full-screen avoids the "not enough room below" problem an anchored
   dropdown had near the bottom of either screen. */
.voice-lang-current {
  width: 100%; padding: 10px 14px; font-size: 13px; text-align: left;
  background: var(--bg-panel); border: 1px solid var(--hairline); border-radius: 10px;
  color: var(--text-primary); margin-top: 8px;
}
[dir="rtl"] .voice-lang-current { text-align: right; }
.theme-current-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 14px; font-size: 13px; margin-top: 8px;
  background: var(--bg-panel); border: 1px solid var(--hairline); border-radius: 10px;
  color: var(--text-primary);
}
.theme-swatch {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--hairline);
}
.theme-swatch-dark-gray, #themeBtnSwatch.theme-swatch-dark-gray { background: linear-gradient(135deg, #131316 50%, #f5f5f4 50%); }
.theme-swatch-dark-blue { background: linear-gradient(135deg, #0b1a20 50%, #edf6f8 50%); }
.theme-swatch-light { background: linear-gradient(135deg, #ffffff 50%, #1a1a1e 50%); }
.theme-swatch-pure-black { background: linear-gradient(135deg, #000000 50%, #f5f5f4 50%); }
.voice-lang-row[data-theme-pick] { display: flex; align-items: center; gap: 10px; }
.voice-lang-modal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.voice-lang-modal-card {
  width: 100%; max-width: 360px; max-height: 80vh;
  background: var(--bg-panel-2); border: 1px solid var(--hairline);
  border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.voice-lang-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-size: 14px; font-weight: 700; color: var(--text-primary);
  border-bottom: 1px solid var(--hairline); flex-shrink: 0;
}
.voice-lang-modal-list { overflow-y: auto; padding: 6px 0; }
.set-password-body { padding: 16px; overflow-y: auto; }
.set-password-body .auth-label { margin-top: 4px; }
.password-field-wrap { position: relative; }
.password-field-wrap .auth-input { padding-right: 44px; }
[dir="rtl"] .password-field-wrap .auth-input { padding-right: 16px; padding-left: 44px; }
.password-eye-btn {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 24px; height: 24px; color: var(--text-dim); display: flex; align-items: center; justify-content: center;
}
[dir="rtl"] .password-eye-btn { right: auto; left: 12px; }
.password-eye-btn svg { width: 20px; height: 20px; }
.password-eye-btn.active { color: var(--accent-tally); }
.contact-textarea { min-height: 120px; resize: vertical; font-family: var(--font-fa); line-height: 1.5; }
.voice-lang-group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-dim); padding: 10px 16px 4px;
}
.voice-lang-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; font-size: 13px; color: var(--text-primary);
}
.voice-lang-row.pickable:active { background: var(--bg-deck); }
.voice-lang-row .vl-name { flex: 1; }
.voice-lang-row.not-ready .vl-name { color: var(--text-dim); }
.voice-lang-row .vl-check { color: var(--accent-green); font-size: 13px; width: 14px; flex-shrink: 0; }
.voice-lang-row.active { background: var(--bg-panel-2); }
.font-picker-header-actions { display: flex; gap: 6px; }
.voice-lang-row .font-delete-btn {
  width: 26px; height: 26px; border-radius: 8px; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.voice-lang-row .font-delete-btn:active { background: var(--bg-deck); color: var(--accent-tally); }
.vl-download-btn {
  font-size: 11px; font-weight: 600; color: #fff;
  background: var(--accent-tally); border-radius: 7px; padding: 5px 10px; flex-shrink: 0;
}
.vl-download-btn:disabled { opacity: .5; }
.vl-status-text { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
.vl-status-text.failed { color: var(--accent-tally); }
.vl-progress-ring { width: 20px; height: 20px; flex-shrink: 0; transform: rotate(-90deg); }
.vl-progress-ring circle { fill: none; stroke-width: 3; }
.vl-progress-ring .vl-ring-track { stroke: rgba(255,255,255,.15); }
.vl-progress-ring .vl-ring-fill { stroke: var(--accent-tally); stroke-linecap: round; transition: stroke-dashoffset .2s linear; }

/* stage quick settings panel */
.stage-settings-panel {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end; justify-content: center;
}
.stage-settings-card {
  width: 100%; max-height: 80vh; overflow-y: auto;
  background: var(--bg-deck); border: 1px solid var(--hairline); border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: 16px 20px calc(20px + var(--safe-bottom));
}
.stage-settings-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 12px;
}

.chrome-hidden .status-pill,
.chrome-hidden .stage-controls,
.chrome-hidden .stage-top-bar {
  opacity: 0; pointer-events: none;
}
.chrome-hidden .stage-controls { transform: translateY(20px); }
.chrome-hidden .stage-top-bar { transform: translateY(-20px); }

/* ===================== LANDSCAPE ADJUSTMENTS ===================== */
@media (orientation: landscape) {
  .stage-text { width: 76%; }
  .controls-row-primary { margin-bottom: 8px; }
  .stage-btn { width: 40px; height: 40px; }
  .stage-btn-play { width: 52px; height: 52px; }
  .editor-footer { padding-top: 8px; padding-bottom: calc(8px + var(--safe-bottom)); }
}

@media (max-width: 380px) {
  .brand { font-size: 14px; }
  .btn { font-size: 13px; padding: 12px 6px; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .status-pill.live .dot { animation: none; }
  .sheet { animation: none; }
}


/* ---- per-word text colour popover (editor toolbar) ---- */
.text-color-popover {
  position: absolute; z-index: 320; margin-top: 6px;
  background: var(--bg-panel-2); border: 1px solid var(--hairline);
  border-radius: 14px; padding: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.text-color-swatches {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px;
}
.text-color-popover .swatch {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
}
.text-color-popover .swatch:active { transform: scale(.92); }
/* the custom-colour tile wraps a native colour input, so the OS picker opens
   on tap while the tile itself stays visually consistent with the swatches */
.swatch-custom {
  position: relative; overflow: hidden; padding: 0;
  background: conic-gradient(#ff3b3b, #f5a623, #35d07f, #4aa3ff, #c77dff, #ff3b3b);
  display: inline-block;
}
.swatch-custom input[type="color"] {
  position: absolute; inset: -8px; width: 46px; height: 46px;
  opacity: 0; border: none; padding: 0; cursor: pointer;
}
.text-color-reset {
  display: block; width: 100%; margin-top: 11px; padding: 8px 10px;
  border-radius: 9px; background: var(--bg-panel);
  color: var(--text-secondary); font-size: 12.5px; white-space: nowrap;
}




/* ---- in-app alert dialog (replaces alert()) ---- */
.app-alert-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  /* the dim is what makes the box actually register */
  background: rgba(0,0,0,.55);
  padding: 24px;
}
.app-alert-overlay.hidden { display: none; }
.app-alert-box {
  width: min(84vw, 330px);
  background: var(--bg-panel-2); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 22px 20px 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.55); text-align: center;
}
.app-alert-text {
  margin: 0 0 18px; font-size: 14.5px; line-height: 1.6;
  color: var(--text-primary);
}
.app-alert-ok {
  width: 100%; padding: 11px; border-radius: 11px;
  background: var(--accent-tally); color: #fff; font-size: 14px; font-weight: 600;
}

/* ---- shared custom colour picker ---- */
.color-picker-overlay {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  /* dims AND blocks — the settings behind used to stay clickable */
  background: rgba(0,0,0,.55);
}
.color-picker-overlay.hidden { display: none; }
.color-picker {
  width: min(86vw, 320px);
  background: var(--bg-panel-2); border: 1px solid var(--hairline);
  border-radius: 18px; padding: 18px;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.color-picker-preview {
  height: 76px; border-radius: 13px; margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 10px rgba(0,0,0,.25);
}
.color-picker-row { display: block; margin-bottom: 14px; }
.color-picker-label {
  display: block; font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 7px;
}
.color-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 14px; border-radius: 7px; outline: none;
  border: 1px solid rgba(255,255,255,.10);
}
/* hue is fixed; the other two tracks are repainted per-hue from JS */
.color-slider.hue {
  background: linear-gradient(to right,
    #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%,
    #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}
.color-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--bg-panel-2);
  box-shadow: 0 2px 7px rgba(0,0,0,.5); cursor: pointer;
}
.color-slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--bg-panel-2);
  box-shadow: 0 2px 7px rgba(0,0,0,.5); cursor: pointer;
}
.color-picker-actions { display: flex; gap: 10px; margin-top: 18px; }
.color-picker-btn {
  flex: 1; padding: 11px; border-radius: 11px;
  background: var(--bg-panel); color: var(--text-secondary); font-size: 13.5px;
}
.color-picker-btn.primary { background: var(--accent-tally); color: #fff; font-weight: 600; }
.swatch-custom {
  background: conic-gradient(#ff3b3b, #f5a623, #35d07f, #4aa3ff, #c77dff, #ff3b3b);
}


/* ---- editor topbar: actions collapse while searching ---- */
.topbar-actions { display: flex; align-items: center; gap: 6px; }
/* Only Save/Undo/Redo collapse for search — Back stays put so the user can
   always leave the screen. Animating max-width (not width) keeps natural
   sizing when open. */
.topbar-edit-actions {
  display: flex; align-items: center; gap: 6px;
  overflow: hidden; max-width: 200px; opacity: 1;
  transition: max-width .28s ease, opacity .2s ease;
}
.topbar-edit-actions.collapsed {
  max-width: 0; opacity: 0; pointer-events: none;
}
/* undo/redo dim at the ends of the history instead of disappearing */
.icon-btn.disabled { opacity: .32; pointer-events: none; }
/* the field takes the freed space with the same timing, so the two read as
   one movement rather than a jump */
#detailSearch { transition: flex-grow .28s ease, opacity .2s ease; }


/* ---- browser-style find bar ---- */
.find-bar {
  position: absolute; inset-inline: 0; top: 0; z-index: 140;
  display: flex; align-items: center; gap: 4px;
  padding: calc(8px + var(--safe-top)) 10px 8px;
  background: var(--bg-panel-2); border-bottom: 1px solid var(--hairline);
  animation: search-expand .18s ease-out;
}
.find-bar.hidden { display: none; }
.find-bar-input {
  flex: 1; min-width: 0;
  background: var(--bg-panel); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 9px 12px;
  color: var(--text-primary); font-size: 15px; font-family: inherit;
}
.find-bar-input::placeholder { color: var(--text-dim); }
.find-bar-input:focus { outline: none; border-color: var(--focus-ring); }
.find-bar-input.search-no-match { border-color: var(--accent-tally); }
.find-bar-count {
  font-size: 12.5px; color: var(--text-dim);
  min-width: 46px; text-align: center; flex-shrink: 0;
  font-variant-numeric: tabular-nums; /* stops the row twitching as it counts */
}
.find-bar .find-nav { width: 34px; height: 34px; flex-shrink: 0; }
/* every hit is marked; the active one is emphasised */
/* matches use the app's accent at two strengths — the plain amber-on-white
   pair read as foreign "cards" against the rest of the UI */
mark.search-hit {
  background: color-mix(in srgb, var(--accent-amber) 26%, transparent);
  color: inherit; border-radius: 4px; padding: 0 2px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-amber) 40%, transparent);
}
mark.search-hit.current {
  background: color-mix(in srgb, var(--accent-amber) 85%, transparent);
  color: #1a1200; box-shadow: none;
}


/* the currently-stepped-to document in a search, matched to the find-bar look */
.doc-item-wrap.doc-find-current .doc-item {
  box-shadow: 0 0 0 2px var(--accent-amber);
  border-radius: 14px;
}
/* Reset sits beside Save as Default; quieter styling since it's destructive
   and shouldn't read as the primary action */
.settings-default-actions { display: flex; gap: 9px; }
.settings-default-actions .settings-save-default-btn { flex: 1; }
.settings-reset-btn {
  background: var(--bg-panel) !important;
  color: var(--text-secondary) !important;
}

/* ---- paywall (shown when the server says hasAccess: false) ---- */
.paywall-screen {
  position: fixed; inset: 0; z-index: 550; /* above the pin gate (500) */
  /* --bg-deck, not --bg-stage: the latter is pure black because it's the
     prompter's own backdrop, which made this screen look unlike every other
     screen in the app. */
  background: var(--bg-deck);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.paywall-screen.hidden { display: none; }
.paywall-card {
  width: 100%; max-width: 420px; text-align: center;
}
.paywall-header h2 {
  font-size: 22px; margin: 0 0 8px; color: var(--text-primary);
}
.paywall-header p {
  color: var(--text-secondary); margin: 0 0 28px; font-size: 14.5px;
}


/* ---- paywall: discount/access code entry ---- */
.paywall-code-toggle {
  color: var(--text-dim); font-size: 13px; padding: 8px; margin-bottom: 4px;
}
.paywall-code-form {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.paywall-code-form.hidden { display: none; }
.paywall-code-input {
  flex: 1; min-width: 0;
  background: var(--bg-panel); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 11px 14px;
  color: var(--text-primary); font-size: 14px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .03em;
  -webkit-appearance: none; appearance: none;
}
/* This was the only input in the app without a focus rule, so the WebView
   drew its own default outline OUTSIDE our 1px border — that was the second
   line. Matches .auth-input's behaviour now. */
.paywall-code-input:focus { outline: none; border-color: var(--focus-ring); }
/* Chrome fills autofilled fields with its own yellow background and ignores
   background-color; an inset shadow the size of the field is the only way to
   cover it. The absurd transition delay stops it flashing back on re-focus. */
.paywall-code-input:-webkit-autofill,
.paywall-code-input:-webkit-autofill:hover,
.paywall-code-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-panel) inset;
  caret-color: var(--text-primary);
  transition: background-color 9999s ease-in-out 0s;
}
.paywall-code-apply {
  padding: 11px 18px; border-radius: 10px;
  background: var(--accent-tally); color: #fff; font-weight: 600; font-size: 13.5px;
}
.paywall-code-apply.loading { opacity: .6; pointer-events: none; }
.paywall-code-hint {
  flex-basis: 100%; margin: 2px 2px 0; font-size: 12.5px;
  color: var(--text-secondary); text-align: left; line-height: 1.5;
}
.paywall-code-hint.hidden { display: none; }

/* ---- paywall: radio-style plan picker ---- */
.paywall-plans { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.plan-option {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; border-radius: 14px;
  background: var(--bg-panel); border: 1.5px solid var(--hairline);
  text-align: start;
  transition: border-color .15s ease, background .15s ease;
}
.plan-option.hidden { display: none; }
/* the whole row is the control, so the selected state has to be obvious
   without relying on the small radio dot alone */
.plan-option.selected {
  border-color: var(--accent-tally);
  background: color-mix(in srgb, var(--accent-tally) 8%, var(--bg-panel));
}
.plan-radio {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--text-dim); position: relative;
}
.plan-option.selected .plan-radio { border-color: var(--accent-tally); }
.plan-option.selected .plan-radio::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--accent-tally);
}
.plan-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.plan-sub { font-size: 12px; color: var(--text-dim); }
/* discount note under the plan name — "for 1 week, then €3.59" */
.plan-note { font-size: 11.5px; font-weight: 600; color: var(--accent-tally); line-height: 1.4; }
.plan-note.hidden { display: none; }
.plan-price {
  flex-shrink: 0; font-size: 16px; font-weight: 700; color: var(--text-primary);
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  /* prices are always read left-to-right, even in an RTL layout */
  direction: ltr;
}
/* the pre-discount price, shown struck through above the price actually
   charged, so the saving is visible rather than implied */
.plan-price-was {
  font-size: 12px; font-weight: 500; color: var(--text-dim);
  text-decoration: line-through;
}
/* White, not the accent colour: it sits directly under the grey struck-through
   original, and the contrast between grey and white is what makes the new
   price read as the one being charged. The red is spent on the percentage
   badge instead, where it marks the saving rather than the price. */
.plan-price-now { color: var(--text-primary); }
/* "-97%" badge next to the discounted price */
.plan-price-off {
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--accent-tally); padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent-tally) 16%, transparent);
}
.plan-badge {
  position: absolute; top: -9px; inset-inline-end: 14px;
  background: var(--accent-tally); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 20px;
}
.paywall-action {
  width: 100%; padding: 15px; border-radius: 13px;
  background: var(--accent-tally); color: #fff;
  font-size: 15.5px; font-weight: 700; margin-bottom: 6px;
}
.paywall-action.loading { opacity: .6; pointer-events: none; }
.paywall-footer {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 6px;
}
.paywall-secondary { color: var(--text-dim); font-size: 13px; padding: 8px; }
.paywall-secondary.hidden { display: none; }
/* plan/expiry summary shown inline in the Settings list row */
.row-status {
  margin-inline-start: auto; margin-inline-end: 8px;
  font-size: 12.5px; color: var(--text-dim); white-space: nowrap;
}

/* ---- initial post-login paywall: sign-out moved beside "Have a code?" ---- */
.paywall-utility-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 4px;
}
/* keeps their normal look when standing alone (settings-triggered screen) —
   only the ROW layout changes when sign-out is moved in */
.paywall-utility-row .paywall-code-toggle { padding-inline-start: 0; }
.paywall-utility-row .paywall-secondary { padding-inline-end: 0; }

/* ---- device limit chooser + signed-out notice ---- */
.auth-revoked {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent-tally) 12%, transparent);
  color: var(--accent-tally); font-size: 12.5px; line-height: 1.5; text-align: center;
}
.auth-revoked.hidden { display: none; }

.device-limit-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0, 0, 0, .62);
}
.device-limit-modal.hidden { display: none; }
.device-limit-card {
  width: 100%; max-width: 380px; background: var(--bg-panel);
  border: 1px solid var(--hairline); border-radius: 16px; padding: 22px;
}
.device-limit-card h3 { margin: 0 0 6px; font-size: 17px; color: var(--text-primary); }
.device-limit-sub { margin: 0 0 18px; font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.device-limit-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.device-limit-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 13px 14px; border-radius: 12px; cursor: pointer;
  background: var(--bg-panel-2); border: 1px solid var(--hairline);
  color: var(--text-primary); font-size: 14px; text-align: start;
}
.device-limit-item:active { border-color: var(--accent-tally); }
.device-limit-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-limit-when { flex-shrink: 0; font-size: 11.5px; color: var(--text-dim); }
.device-limit-cancel {
  width: 100%; padding: 11px; border-radius: 12px; cursor: pointer;
  background: transparent; border: 0; color: var(--text-dim); font-size: 13.5px;
}

/* shown on the paywall, before payment, so the two-device limit is never a
   surprise discovered after buying */
.paywall-device-note {
  margin: 14px 0 0; text-align: center;
  font-size: 11.5px; color: var(--text-dim); line-height: 1.5;
}