/* TranscribeLab web app and the small public pages (sign-in, library, transcript, upload, search,
   account, welcome, share, bye, 404, privacy, terms).
   Same look as the home page (site.css, owned by the lead): developers911 fonts and orange, light
   surfaces with depth (floating cards, layered shadows, a gentle tilt), orange only for buttons,
   dots and small accents, never text on an orange block. Right-to-left safe: logical properties.
   The colour and font tokens below must stay equal to site.css (checked by scripts/invariants/web.mjs). */

:root {
  --canvas: #fafafa;
  --surface: #ffffff;
  --ink: #0f172a;
  --text: #1e293b;
  --body: #475569;
  --muted: #64748b;
  --faint: #94a3b8;
  --line: #e2e8f0;
  --line-soft: #f1f5f9;
  --tile: #f8fafc;
  --slate-300: #cbd5e1;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --orange: #ea580c;
  --orange-deep: #c2410c;
  --orange-bright: #f97316;
  --orange-soft: #fb923c;
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --green: #059669;
  --green-dot: #34d399;
  --green-50: #ecfdf5;
  --green-200: #a7f3d0;
  --sky: #0284c7;
  --sky-50: #f0f9ff;
  --sky-200: #bae6fd;

  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 28px -14px rgba(15, 23, 42, 0.18);
  --shadow-3d: 0 2px 4px rgba(15, 23, 42, 0.06), 0 24px 40px -18px rgba(15, 23, 42, 0.32), 0 60px 90px -40px rgba(15, 23, 42, 0.35);
  --shadow-float: 0 2px 6px rgba(15, 23, 42, 0.08), 0 28px 50px -20px rgba(15, 23, 42, 0.42);
  --shadow-lift: 0 1px 2px rgba(15, 23, 42, 0.05), 0 22px 40px -18px rgba(15, 23, 42, 0.28);

  --container: 1280px;
  --gutter: 48px;

  /* speakers: orange, sky, green, slate, blue, teal, amber, lime (no red, no purple; neighbours
     look clearly different) */
  --spk-0: #c2410c;
  --spk-1: #0284c7;
  --spk-2: #059669;
  --spk-3: #334155;
  --spk-4: #1d4ed8;
  --spk-5: #0f766e;
  --spk-6: #b45309;
  --spk-7: #4d7c0f;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--canvas); color: var(--text);
  font-family: var(--font-body); font-size: 16px; line-height: 26px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: opacity .25s ease;
}
/* The page stays invisible for the few milliseconds it takes to put in the words, then fades in.
   If the script never runs, it shows anyway after 2.5 s. */
.is-loading body { opacity: 0; animation: reveal 0s linear 2.5s forwards; }
@keyframes reveal { to { opacity: 1; } }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
/* In a right-to-left page every piece of text takes its direction from its own content, so an
   English name, number or not-yet-translated label never gets its punctuation on the wrong side. */
[dir="rtl"] :is(p, span, b, h1, h2, h3, li, dd, dt, label, option) { unicode-bidi: plaintext; }
/* ...except an element built only from translated pieces (the welcome heading is welcome.title1 +
   welcome.title2): it has no letters of its own, so "plaintext" finds none and lays the pieces out
   left to right. Regression 2026-09-30: the Arabic welcome heading showed its second half first.
   Such an element takes the page's direction; each piece inside still keeps its own. */
[dir="rtl"] :is(p, span, b, h1, h2, h3, li, dd, dt, label, option):has(> [data-i18n]) { unicode-bidi: isolate; }
/* Arabic letters join each other, so any letter-spacing tears the words apart (CSS Text 3 asks
   browsers not to space cursive scripts; Chrome still does). No tracking on Arabic text anywhere,
   the providers' sign-in button labels included (Google's .25px is meant for Latin letters). */
:lang(ar) { letter-spacing: 0 !important; }
/* JetBrains Mono has no Arabic letters, and the monospace fallbacks drew them in Times New Roman
   (measured 2026-09-30 on the sign-in page: the "E-mail" label and the "or" divider), unjoined and
   serif. In Arabic the small "instrument" labels keep JetBrains Mono for Latin letters and digits
   and take the system's Arabic sans-serif for Arabic letters. */
:lang(ar) { --font-mono: "JetBrains Mono", ui-sans-serif, system-ui, sans-serif; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
.container { position: relative; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--font-mono); }

/* ---------- the room: soft light and a faint lab grid behind every page ---------- */
.app-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.app-bg .bloom { position: absolute; border-radius: 50%; filter: blur(24px); }
.app-bg .bloom-a { width: 900px; height: 900px; top: -460px; inset-inline-end: -300px; background: radial-gradient(circle, rgba(251, 146, 60, 0.22), rgba(251, 146, 60, 0) 62%); }
.app-bg .bloom-b { width: 820px; height: 820px; bottom: -420px; inset-inline-start: -380px; background: radial-gradient(circle, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0) 62%); }
.app-bg .grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 20%, transparent 70%);
}

/* ---------- buttons (as on the home page) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r); text-decoration: none; white-space: nowrap; cursor: pointer; border: 0;
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn .ic { width: 18px; height: 18px; stroke-width: 2.1; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-primary {
  color: #fff; font: 700 15.5px/22px var(--font-display); padding: 12px 22px;
  background: linear-gradient(180deg, var(--orange-bright) 0%, var(--orange) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 0 var(--orange-deep), 0 12px 24px -10px rgba(234, 88, 12, 0.65);
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--orange-soft) 0%, var(--orange-bright) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 var(--orange-deep), 0 16px 30px -10px rgba(234, 88, 12, 0.7); }
.btn-secondary {
  color: var(--slate-700); background: var(--surface); font: 600 14.5px/22px var(--font-body); padding: 11px 18px;
  border: 1px solid var(--line); box-shadow: inset 0 -1px 0 var(--line-soft), 0 1px 2px rgba(15, 23, 42, 0.06);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--slate-300); color: var(--ink); }
.btn-ink {
  color: #fff; font: 600 14.5px/22px var(--font-body); padding: 11px 18px;
  background: linear-gradient(180deg, #334155, var(--ink)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 20px -10px rgba(15, 23, 42, 0.6);
}
.btn-ink:hover:not(:disabled) { background: linear-gradient(180deg, #475569, #1e293b); }
.btn-ghost { background: transparent; color: var(--body); font: 600 14px/20px var(--font-body); padding: 9px 12px; }
.btn-ghost:hover:not(:disabled) { background: rgba(15, 23, 42, 0.05); color: var(--ink); }
.btn-sm { font: 600 13.5px/20px var(--font-body); padding: 8px 14px; border-radius: 10px; }
.btn-sm .ic { width: 16px; height: 16px; }
.btn-lg { padding: 15px 26px; font-size: 17px; border-radius: 14px; }
.btn-block { width: 100%; }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; cursor: pointer; flex: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--slate-700); box-shadow: var(--shadow-sm);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.icon-btn:hover { color: var(--ink); border-color: var(--slate-300); }
.icon-btn .ic { width: 18px; height: 18px; }
.link { color: var(--orange-deep); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--font-body); color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--ink); }
.back-link .ic { width: 16px; height: 16px; }

/* ---------- header: the floating glass bar of the home page ---------- */
.site-header { position: fixed; top: 14px; inset-inline: 0; z-index: 50; pointer-events: none; }
.nav-pill {
  pointer-events: auto; height: 60px; display: flex; align-items: center; gap: 28px; padding: 0 10px; padding-inline-start: 16px;
  border-radius: 18px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(226, 232, 240, 0.9);
  backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px);
  box-shadow: inset 0 1px 0 #fff, 0 16px 36px -20px rgba(15, 23, 42, 0.35);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand-mark {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #fff;
  font: 800 13px/1 var(--font-display); letter-spacing: -0.02em;
  background: linear-gradient(160deg, var(--orange-soft), var(--orange) 55%, var(--orange-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 12px -6px rgba(234, 88, 12, 0.7);
}
.brand-name { font: 700 19px/1 var(--font-display); color: var(--ink); letter-spacing: -0.02em; }
.app-nav { display: flex; gap: 4px; }
.app-nav a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 11px; text-decoration: none;
  font: 500 14.5px/20px var(--font-body); color: var(--body); transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.app-nav a .ic { width: 18px; height: 18px; color: var(--faint); }
.app-nav a:hover { color: var(--ink); }
.app-nav a.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 18px -10px rgba(15, 23, 42, 0.3); }
.app-nav a.is-active .ic { color: var(--orange); }
.header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.usage-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 5px; padding-inline: 5px 12px; border-radius: 999px; text-decoration: none;
  background: var(--tile); border: 1px solid var(--line); font: 500 12.5px/1 var(--font-body); color: var(--slate-700); white-space: nowrap;
}
.usage-pill:hover { border-color: var(--slate-300); }
.plan-tag { padding: 5px 8px; border-radius: 999px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .05em; background: var(--line-soft); color: var(--slate-700); border: 1px solid var(--line); }
.plan-tag.pro { background: var(--orange-50); color: var(--orange-deep); border-color: var(--orange-200); }
.usage-pill.is-low span { color: var(--orange-deep); }
.lang-switch {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 10px; cursor: pointer;
  color: var(--slate-700); font: 600 12px/1 var(--font-mono); border: 1px solid transparent; transition: border-color .15s ease, background-color .15s ease;
}
.lang-switch:hover, .lang-switch:focus-within { border-color: var(--line); background: #fff; }
.lang-switch .ic { width: 17px; height: 17px; color: var(--muted); }
.lang-select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; font-size: 16px; }
.avatar {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; text-decoration: none; flex: none;
  background: linear-gradient(160deg, #fff, var(--line-soft)); border: 1px solid var(--line); color: var(--ink);
  font: 700 14px/1 var(--font-display); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(15, 23, 42, 0.4);
}
.avatar .ic { width: 18px; height: 18px; color: var(--muted); }
.avatar.is-active { border-color: var(--orange-200); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); }

.bottom-nav { display: none; }

/* ---------- page frame ---------- */
/* decorative light and 3D art may reach past the edge; it never makes the page scroll sideways
   (clip, unlike hidden, keeps the sticky transcript header working) */
main { flex: 1; overflow-x: clip; }
.page { padding: 116px 0 72px; }
.page-narrow { max-width: 880px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.page-head h1 { font: 700 40px/1.08 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.page-head .lead { margin-top: 10px; max-width: 60ch; font-size: 17px; line-height: 27px; color: var(--body); }
.kicker {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; padding-inline: 10px 14px; border-radius: 999px; margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font: 500 13.5px/20px var(--font-body); color: var(--slate-700);
}
.kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-dot); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }
.kicker-dot.orange { background: var(--orange-bright); box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.16); }
.eyebrow { font: 600 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------- surfaces with depth ---------- */
.card {
  position: relative; background: var(--surface); border-radius: var(--r-xl); border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: var(--shadow-card);
}
.card-pad { padding: 24px; }
.card-3d { box-shadow: var(--shadow-3d); }
/* depth comes from the layered shadows and a lit top edge; no overlay on top of text */
.card-3d { box-shadow: inset 0 1px 0 #fff, var(--shadow-3d); }
/* a paper stack: one sheet peeks out below the card */
.stacked::before {
  content: ""; position: absolute; inset-inline: 18px; bottom: -9px; height: 30px; z-index: -1; border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 24px -16px rgba(15, 23, 42, 0.3);
}
.card-title { display: flex; align-items: center; gap: 10px; font: 700 17px/24px var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.card-title .ic { width: 19px; height: 19px; color: var(--orange); }
.card-sub { margin-top: 4px; font-size: 14px; line-height: 21px; color: var(--muted); }
.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.2, .75, .2, 1), box-shadow .3s ease; transform-style: preserve-3d; }

/* ---------- pills and chips ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font: 600 10.5px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; border: 1px solid transparent; white-space: nowrap; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.is-live .dot { animation: pulse 1.4s ease-in-out infinite; }
.pill-green { background: var(--green-50); border-color: var(--green-200); color: var(--green); }
.pill-orange { background: var(--orange-50); border-color: var(--orange-200); color: var(--orange-deep); }
.pill-sky { background: var(--sky-50); border-color: var(--sky-200); color: var(--sky); }
.pill-slate { background: var(--line-soft); border-color: var(--line); color: var(--slate-700); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: var(--line-soft); border: 1px solid var(--line); font: 500 12.5px/18px var(--font-body); color: var(--slate-700); white-space: nowrap; }
.chip .ic { width: 15px; height: 15px; color: var(--muted); }
.ts {
  display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px/1 var(--font-mono); color: var(--slate-700); padding: 5px 7px; border-radius: 7px;
  background: var(--line-soft); border: 1px solid var(--line); text-decoration: none; cursor: pointer; white-space: nowrap; direction: ltr;
}
.ts:hover { color: var(--orange-deep); border-color: var(--orange-200); background: var(--orange-50); }
.ts .ic { width: 13px; height: 13px; }
mark { background: var(--orange-100); color: var(--orange-deep); border-radius: 4px; padding: 0 2px; font-weight: 600; }
mark.is-current { background: var(--orange-200); box-shadow: 0 0 0 2px var(--orange-bright); }

/* ---------- forms ---------- */
.field { display: grid; gap: 7px; }
.field-label { font: 600 12px/16px var(--font-mono); color: var(--slate-700); letter-spacing: .02em; }
.field-hint { font-size: 13px; line-height: 19px; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 11px; border: 1px solid var(--line); background: var(--tile);
  font: 400 15px/22px var(--font-body); color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.textarea { min-height: 120px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; background: #fff; border-color: var(--orange-bright); box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.13); }
.select { appearance: none; -webkit-appearance: none; padding-inline-end: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 18px; background-position: right 12px center; }
[dir="rtl"] .select { background-position: left 12px center; }
.select-sm { width: auto; min-height: 36px; padding: 6px 12px; padding-inline-end: 34px; font-size: 13.5px; border-radius: 10px; background-color: #fff; }
.search-field {
  display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 8px; padding-inline-start: 16px; border-radius: 16px;
  background: #fff; border: 1.5px solid var(--line); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 34px -24px rgba(15, 23, 42, 0.4);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-field:focus-within { border-color: var(--orange-bright); box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12), 0 18px 34px -24px rgba(15, 23, 42, 0.4); }
.search-field > .ic { color: var(--muted); }
.search-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font: 500 16px/1 var(--font-body); color: var(--ink); }
.search-field input::placeholder { color: var(--faint); font-weight: 400; }
.search-field .count { font: 600 11.5px/1 var(--font-mono); color: var(--muted); padding: 7px 9px; border-radius: 8px; background: var(--line-soft); white-space: nowrap; }

/* segmented filters, like the home page's tabs */
.seg { display: inline-flex; gap: 3px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.75); border: 1px solid var(--line); box-shadow: inset 0 1px 0 #fff, 0 10px 22px -18px rgba(15, 23, 42, 0.35); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  font: 600 13.5px/20px var(--font-body); color: var(--muted); transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.seg button .ic { width: 17px; height: 17px; color: var(--faint); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 18px -10px rgba(15, 23, 42, 0.3); }
.seg button[aria-pressed="true"] .ic { color: var(--orange); }

/* ---------- notices, toasts, loading ---------- */
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--tile); font-size: 14.5px; line-height: 22px; color: var(--text); }
.notice > .ic { margin-top: 1px; color: var(--sky); }
.notice-warn { background: var(--orange-50); border-color: var(--orange-200); }
.notice-warn > .ic { color: var(--orange-deep); }
.notice-ok { background: var(--green-50); border-color: var(--green-200); }
.notice-ok > .ic { color: var(--green); }
.notice-body { display: grid; gap: 4px; }
.notice-link { font-weight: 600; color: var(--orange-deep); text-decoration: none; }
.notice-link:hover { text-decoration: underline; }
.toasts { position: fixed; inset-inline: 0; bottom: 24px; z-index: 100; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-float); font: 600 14px/20px var(--font-body); color: var(--ink);
  opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .25s ease, transform .25s ease;
}
.toast.is-in { opacity: 1; transform: none; }
.toast .ic { width: 20px; height: 20px; padding: 3px; border-radius: 50%; color: #fff; background: var(--green); stroke-width: 3; }
.toast.is-warn .ic { background: var(--orange); stroke-width: 2.4; }
.skeleton { position: relative; overflow: hidden; background: var(--line-soft); border-radius: 8px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: spin .8s linear infinite; flex: none; }
.spinner.dark { border-color: var(--line); border-top-color: var(--orange); }
@keyframes spin { to { transform: rotate(360deg); } }
.typing-dots { display: inline-flex; gap: 4px; }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: bounce 1.2s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }

/* ---------- dialogs ---------- */
.dialog { padding: 0; border: 0; background: transparent; max-width: min(520px, calc(100vw - 32px)); width: 100%; overflow: visible; }
.dialog.is-wide { max-width: min(720px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(15, 23, 42, 0.32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dialog[open] .dialog-card { animation: pop .25s cubic-bezier(.2, .75, .2, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.dialog-card { position: relative; background: #fff; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow-3d); padding: 22px 24px 24px; max-height: calc(100vh - 48px); overflow: auto; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.dialog-title { font: 700 20px/28px var(--font-display); color: var(--ink); letter-spacing: -0.015em; }
.dialog-x { width: 34px; height: 34px; margin-top: -2px; }
.dialog-body { display: grid; gap: 14px; }
.dialog-text { font-size: 15px; line-height: 24px; color: var(--body); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* ---------- footer ---------- */
.app-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 30px 0; margin-top: auto; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-brand .brand-mark { width: 28px; height: 28px; font-size: 11px; }
.footer-brand .brand-name { font-size: 16px; }
.footer-brand p { font-size: 14px; color: var(--muted); }
.footer-links { display: flex; gap: 22px; }
.footer-links a { font-size: 14px; color: var(--body); text-decoration: none; }
.footer-links a:hover { color: var(--orange-deep); }
.footer-copy { font-size: 13px; color: var(--faint); }

/* =================================================================== sign in */
.signin { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 56px; align-items: center; min-height: calc(100vh - 220px); }
.signin-card { padding: 34px 34px 30px; }
.signin-card h1 { font: 700 30px/36px var(--font-display); letter-spacing: -0.025em; color: var(--ink); }
.signin-card .lead { margin-top: 10px; font-size: 15.5px; line-height: 25px; color: var(--body); }
.signin-form { display: grid; gap: 16px; margin-top: 26px; }
.signin-foot { margin-top: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.signin-foot button { border: 0; background: none; padding: 0; cursor: pointer; font: 600 13.5px/20px var(--font-body); color: var(--orange-deep); }
.signin-foot button:disabled { color: var(--faint); cursor: default; }
.sent-to { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 12px; padding-inline-start: 8px; border-radius: 999px; background: var(--tile); border: 1px solid var(--line); font: 500 13.5px/20px var(--font-body); color: var(--ink); max-width: 100%; }
.sent-to .ic { width: 16px; height: 16px; color: var(--orange); }
.sent-to b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.code-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; direction: ltr; }
.code-boxes input {
  width: 100%; height: 60px; text-align: center; border-radius: 13px; border: 1.5px solid var(--line); background: var(--tile);
  font: 600 26px/1 var(--font-mono); color: var(--ink); caret-color: var(--orange); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}
.code-boxes input:focus { outline: none; border-color: var(--orange-bright); background: #fff; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.13); transform: translateY(-1px); }
.code-boxes input.filled { background: #fff; border-color: var(--slate-300); }
.code-boxes.is-wrong input { border-color: var(--orange-200); background: var(--orange-50); animation: shake .35s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.signin-art { position: relative; height: 460px; perspective: 1400px; }
.signin-art .rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-16deg) rotateZ(1deg); }
.float-card { position: absolute; background: #fff; border-radius: 18px; border: 1px solid rgba(226, 232, 240, 0.95); box-shadow: var(--shadow-float); padding: 16px 18px; }
.art-mail { top: 40px; inset-inline-start: 30px; width: 360px; transform: translateZ(40px); }
.art-mail-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.art-mail-head .brand-mark { width: 30px; height: 30px; font-size: 11px; }
.art-lines { display: grid; gap: 8px; margin-top: 14px; }
.art-lines i { display: block; height: 8px; border-radius: 6px; background: var(--line-soft); }
.art-code { display: flex; gap: 8px; margin-top: 16px; direction: ltr; }
.art-code b { display: grid; place-items: center; width: 42px; height: 50px; border-radius: 11px; background: var(--tile); border: 1px solid var(--line); font: 600 22px/1 var(--font-mono); color: var(--ink); }
.art-code b:nth-child(4) { margin-inline-start: 8px; }
.art-lock { top: 250px; inset-inline-start: 250px; width: 230px; transform: translateZ(120px); display: flex; align-items: center; gap: 12px; }
.art-lock .ic-tile { background: var(--green-50); color: var(--green); }
.art-lines.short i:nth-child(1) { width: 80%; }
.art-lines.short i:nth-child(2) { width: 55%; }
.ic-tile { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none; }
.ic-tile .ic { width: 21px; height: 21px; }
.art-glow { position: absolute; left: 50%; top: 50%; width: 520px; height: 420px; margin: -210px 0 0 -260px; border-radius: 50%; background: radial-gradient(ellipse, rgba(249, 115, 22, 0.22), rgba(249, 115, 22, 0) 65%); filter: blur(10px); }

/* ---------- Sign in with Google, Microsoft or Apple ----------
   Each button follows its provider's published rules: the unchanged logo (web/src/assets/img/providers,
   source inside each file), the provider's own wording, colours, sizes and spacing. All three are the
   same size (Google and Apple ask to be no less prominent than any other sign-in button) and every
   logo starts 13px from the edge. Only the label font is ours (owner rule: only our three fonts). */
.idp-block { margin-top: 24px; }
.idp-list { display: grid; gap: 12px; }
.idp {
  position: relative; display: flex; align-items: center; width: 100%; height: 41px; overflow: hidden;
  white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-user-select: none; user-select: none;
  background-color: #fff; font-family: var(--font-body); line-height: 20px;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
}
.idp-logo { position: relative; flex: none; display: block; max-width: none; }
.idp-label { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; }
/* Google: the HTML/CSS "Sign in with Google" button of developers.google.com/identity/branding-guidelines,
   light theme, rectangular: white, 1px #747775 border, 4px corners, 12px padding, 20px G and 12px after it,
   #1f1f1f 14px text at weight 500 with .25px spacing, and Google's own hover and focus states. */
.idp-google { border: 1px solid #747775; border-radius: 4px; padding: 0 12px; color: #1f1f1f; font-size: 14px; font-weight: 500; letter-spacing: .25px; }
.idp-google .idp-logo { width: 20px; height: 20px; margin-inline-end: 12px; }
.idp-google::before { content: ""; position: absolute; inset: 0; background-color: #303030; opacity: 0; transition: opacity .218s; pointer-events: none; }
.idp-google:hover { box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); }
.idp-google:hover::before { opacity: .08; }
.idp-google:focus::before, .idp-google:active::before { opacity: .12; }
/* Microsoft: the "Sign in with Microsoft" redlines of learn.microsoft.com/entra/identity-platform/
   howto-add-branding-in-apps, light theme: #FFFFFF, 1px #8C8C8C border, square corners, 41px tall,
   12px from the edge to the 21px logo, 12px after it and at the end, #5E5E5E 15px text at weight 600. */
.idp-microsoft { border: 1px solid #8c8c8c; border-radius: 0; padding: 0 11px; color: #5e5e5e; font-size: 15px; font-weight: 600; }
.idp-microsoft .idp-logo { width: 21px; height: 21px; margin-inline-end: 12px; }
/* Apple: a custom "Sign in with Apple" button, white with outline (developer.apple.com/design/
   human-interface-guidelines/sign-in-with-apple): white with a black outline, black logo and black
   title, corners like the buttons around it, the left-aligned logo file as tall as the button face and
   never cropped (inset so the apple lines up with the other logos), title 43% of the button height,
   at least 8% of the width free after the title. */
.idp-apple { border: 1px solid #000; border-radius: 4px; padding: 0; padding-inline-end: 8%; color: #000; font-size: 17.63px; font-weight: 500; }
.idp-apple .idp-logo { width: auto; height: 39px; margin-inline-start: 5px; }
.idp-microsoft:hover, .idp-apple:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 14px -8px rgba(15, 23, 42, 0.35); }
/* the page's focus ring must not round the providers' own corners */
.idp-google:focus-visible, .idp-apple:focus-visible { border-radius: 4px; }
.idp-microsoft:focus-visible { border-radius: 0; }
.or-divider { display: flex; align-items: center; gap: 14px; margin-top: 22px; font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.idp-block:not([hidden]) + .signin-form { margin-top: 18px; }
.signin-notice { margin-top: 18px; }

/* ---------- "You are signed in" (after a sign-in started by the add-on or the phone app) ---------- */
.signed-in .sent-to { margin-top: 14px; }
.signed-in .notice { margin-top: 18px; }
.signed-in-actions { display: grid; gap: 12px; margin-top: 24px; }

/* =================================================================== library */
.toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 26px; }
.toolbar .search-field { flex: 1 1 380px; }
.toolbar-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; min-width: 0; max-width: 100%; }
.toolbar-filters .seg { min-width: 0; }
.toolbar-filters .select-sm { min-height: 44px; border-radius: 12px; background-color: rgba(255, 255, 255, 0.85); }
.rec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rec-card {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 18px; border-radius: 20px; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid rgba(226, 232, 240, 0.95); box-shadow: var(--shadow-card); overflow: hidden;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s cubic-bezier(.2, .75, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
.rec-card:hover { box-shadow: var(--shadow-3d); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); border-color: var(--line); }
.rec-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.src-tile { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 16px -10px rgba(15, 23, 42, 0.35); }
.src-tile .ic { width: 22px; height: 22px; }
.src-tab { background: linear-gradient(160deg, #fff, var(--sky-50)); color: var(--sky); border: 1px solid var(--sky-200); }
.src-youtube { background: linear-gradient(160deg, #fff, var(--orange-50)); color: var(--orange); border: 1px solid var(--orange-200); }
.src-file { background: linear-gradient(160deg, #fff, var(--green-50)); color: var(--green); border: 1px solid var(--green-200); }
.rec-title { font: 700 17px/24px var(--font-display); color: var(--ink); letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rec-source { margin-top: 4px; font: 500 12.5px/18px var(--font-mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 14px; margin-top: auto; border-top: 1px solid var(--line-soft); font-size: 13px; line-height: 18px; color: var(--muted); }
.rec-meta span { display: inline-flex; align-items: center; gap: 6px; }
.rec-meta .ic { width: 15px; height: 15px; color: var(--faint); }
.rec-progress { position: absolute; inset-inline: 0; bottom: 0; height: 3px; overflow: hidden; background: var(--sky-50); }
.rec-progress::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--sky), transparent); animation: slide 1.6s ease-in-out infinite; }
@keyframes slide { from { inset-inline-start: -40%; } to { inset-inline-start: 100%; } }
.rec-card.skeleton-card { pointer-events: none; min-height: 190px; }
.list-foot { display: flex; justify-content: center; margin-top: 30px; }
.empty { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.empty-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 30px; align-items: center; padding: 34px 38px; overflow: hidden; }
.empty-hero h2 { font: 700 28px/34px var(--font-display); letter-spacing: -0.022em; color: var(--ink); }
.empty-hero p { margin-top: 10px; font-size: 16px; line-height: 26px; color: var(--body); max-width: 52ch; }
.empty-art { position: relative; height: 200px; perspective: 1000px; }
.empty-art .rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(10deg) rotateY(-20deg); }
.mini { position: absolute; display: flex; align-items: center; gap: 10px; width: 230px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-float); }
.mini .src-tile { width: 36px; height: 36px; border-radius: 11px; }
.mini .src-tile .ic { width: 18px; height: 18px; }
.mini .art-lines { flex: 1; margin: 0; gap: 6px; }
.mini:nth-child(1) { top: 0; inset-inline-start: 10px; transform: translateZ(0); }
.mini:nth-child(2) { top: 66px; inset-inline-start: 70px; transform: translateZ(60px); }
.mini:nth-child(3) { top: 132px; inset-inline-start: 20px; transform: translateZ(120px); }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.way { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.way h3 { font: 700 18px/24px var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.way p { font-size: 15px; line-height: 24px; color: var(--body); }
.way ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 14.5px; line-height: 22px; color: var(--text); }
.way .btn { margin-top: auto; align-self: flex-start; }
.way .step-num { font: 600 11.5px/1 var(--font-mono); color: var(--faint); }

/* =================================================================== transcript */
.tr-head { display: grid; gap: 12px; margin-bottom: 26px; }
.tr-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.title-edit { position: relative; flex: 1 1 520px; min-width: 0; }
.title-input {
  width: 100%; padding: 4px 10px; margin-inline-start: -10px; border-radius: 12px; border: 1.5px solid transparent; background: transparent;
  font: 700 36px/1.15 var(--font-display); letter-spacing: -0.028em; color: var(--ink); text-overflow: ellipsis;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.title-input:hover { background: rgba(255, 255, 255, 0.7); border-color: var(--line); }
.title-input:focus { outline: none; background: #fff; border-color: var(--orange-bright); box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12); }
.meta-row { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 14px; line-height: 20px; color: var(--muted); }
.meta-row > span, .meta-row > a { display: inline-flex; align-items: center; gap: 7px; }
.meta-row .ic { width: 16px; height: 16px; color: var(--faint); }
.meta-row .src-name { font: 500 13px/20px var(--font-mono); color: var(--slate-700); }
.meta-row a { color: var(--orange-deep); text-decoration: none; font-weight: 600; }
.meta-row a:hover { text-decoration: underline; }
.meta-row a .ic { color: currentColor; }
.tr-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 20; min-width: 220px; padding: 6px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-float); display: grid; gap: 2px;
}
.menu-list a, .menu-list button {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; border: 0; background: none; cursor: pointer; text-align: start;
  font: 500 14px/20px var(--font-body); color: var(--text); text-decoration: none; width: 100%;
}
.menu-list a:hover, .menu-list button:hover { background: var(--tile); color: var(--ink); }
.menu-list .ic { width: 17px; height: 17px; color: var(--muted); }
.menu-list .fmt { margin-inline-start: auto; font: 600 11px/1 var(--font-mono); color: var(--faint); }
.tr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.tr-main { display: grid; gap: 26px; min-width: 0; }
.tr-side { position: sticky; top: 96px; display: grid; gap: 18px; max-height: calc(100vh - 110px); overflow: auto; padding: 4px; margin: -4px; scrollbar-width: thin; }

.sum-card { padding: 24px 26px 22px; }
.sum-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.sum-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sum-short { margin-top: 16px; font-size: 17px; line-height: 28px; color: var(--text); }
.sum-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.sum-sec { padding: 16px 18px; border-radius: 16px; background: var(--tile); border: 1px solid var(--line-soft); }
.sum-sec h3 { font: 700 13.5px/18px var(--font-display); color: var(--muted); margin-bottom: 10px; }
.sum-sec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sum-sec li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; line-height: 22px; color: var(--text); }
.sum-sec li .ic { width: 17px; height: 17px; margin-top: 2px; color: var(--green); stroke-width: 2.4; }
.actions-block { margin-top: 20px; }
.actions-block h3 { font: 700 13.5px/18px var(--font-display); color: var(--muted); margin-bottom: 10px; }
.action-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.action-item + .action-item { margin-top: 8px; }
.who-dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font: 700 12px/1 var(--font-display); background: var(--spk, var(--slate-700)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 12px -8px rgba(15, 23, 42, 0.6); }
.who-dot.none { background: var(--line-soft); color: var(--muted); box-shadow: none; }
.who-dot.none .ic { width: 16px; height: 16px; }
.action-text { font-size: 14.5px; line-height: 21px; color: var(--text); }
.action-text b { font-weight: 600; color: var(--ink); }
.action-side { display: flex; gap: 6px; align-items: center; }
.due { font: 600 11px/1 var(--font-mono); padding: 6px 8px; border-radius: 7px; background: var(--orange-50); color: var(--orange-deep); border: 1px solid var(--orange-200); white-space: nowrap; }
.sum-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.sum-foot .hint { font-size: 13px; color: var(--faint); }
.sum-foot-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.sum-busy { display: grid; gap: 10px; margin-top: 18px; }
.sum-busy .skeleton { height: 14px; }
.sum-busy .skeleton:nth-child(2) { width: 86%; }
.sum-busy .skeleton:nth-child(3) { width: 64%; }

.tx-card { padding: 0; overflow: clip; }
.tx-head {
  position: sticky; top: 86px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; padding-inline-start: 24px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft); border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.find { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 4px; padding-inline-start: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--tile); min-width: 0; flex: 0 1 340px; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.find:focus-within { background: #fff; border-color: var(--orange-bright); box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12); }
.find > .ic { width: 17px; height: 17px; color: var(--muted); }
.find input::-webkit-search-cancel-button, .search-field input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .6; cursor: pointer; }
.find input { flex: 1; min-width: 60px; border: 0; background: transparent; outline: none; font-size: 14.5px; color: var(--ink); }
.find .count { font: 600 11px/1 var(--font-mono); color: var(--muted); white-space: nowrap; padding: 0 4px; }
.find .icon-btn { width: 30px; height: 30px; border-radius: 8px; box-shadow: none; border-color: transparent; background: transparent; }
.find .icon-btn:hover { background: var(--line-soft); }
.tx-body { padding: 10px 14px 22px; }
.turn { padding: 12px 10px 4px; }
.turn + .turn { border-top: 1px dashed var(--line-soft); }
.turn-who { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; padding-inline-start: 74px; font: 700 14px/20px var(--font-display); color: var(--spk, var(--slate-700)); }
.turn-who i { width: 9px; height: 9px; border-radius: 50%; background: var(--spk, var(--slate-700)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--spk, #334155) 16%, transparent); }
.seg-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 10px; margin: 0 -10px; border-radius: 12px; transition: background-color .3s ease, box-shadow .3s ease; scroll-margin-top: 170px; }
.seg-row .ts { justify-self: start; }
.seg-row p { font-size: 16px; line-height: 27px; color: var(--text); overflow-wrap: anywhere; }
.seg-row:hover { background: rgba(248, 250, 252, 0.9); }
.seg-row.is-target { background: var(--orange-50); box-shadow: inset 3px 0 0 var(--orange); }
[dir="rtl"] .seg-row.is-target { box-shadow: inset -3px 0 0 var(--orange); }
.tx-empty { padding: 34px 24px; text-align: center; color: var(--muted); }

.side-card { padding: 20px; }
.spk-list { display: grid; gap: 10px; margin-top: 14px; }
.spk { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; }
.spk .input { min-height: 38px; padding: 7px 11px; font-size: 14.5px; font-weight: 600; background: #fff; }
.spk-bar { grid-column: 2; height: 4px; border-radius: 4px; background: var(--line-soft); overflow: hidden; margin-top: -4px; }
.spk-bar i { display: block; height: 100%; border-radius: 4px; background: var(--spk, var(--slate-700)); opacity: .75; }
.spk-share { grid-column: 2; margin-top: -6px; font: 500 11px/14px var(--font-mono); color: var(--faint); }
.ask-thread { display: grid; gap: 12px; margin-top: 14px; }
.ask-q { justify-self: end; max-width: 88%; padding: 9px 13px; border-radius: 14px; border-end-end-radius: 4px; background: var(--ink); color: #fff; font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.ask-a { padding: 12px 14px; border-radius: 14px; border-end-start-radius: 4px; background: var(--tile); border: 1px solid var(--line); font-size: 14.5px; line-height: 23px; color: var(--text); overflow-wrap: anywhere; white-space: pre-line; }
.ask-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ask-form { display: flex; align-items: flex-end; gap: 8px; margin-top: 14px; padding: 6px; padding-inline-start: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--tile); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.ask-form:focus-within { background: #fff; border-color: var(--orange-bright); box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12); }
.ask-form textarea { flex: 1; min-height: 40px; max-height: 140px; resize: none; border: 0; outline: none; background: transparent; padding: 8px 0; font-size: 14.5px; line-height: 22px; color: var(--ink); }
.ask-send { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; border: 0; cursor: pointer; background: var(--ink); color: #fff; flex: none; transition: opacity .15s ease; }
.ask-send:disabled { opacity: .35; cursor: default; }
.ask-send .ic { width: 17px; height: 17px; }
[dir="rtl"] .ask-send .ic { transform: scaleX(-1); }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.suggest button { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font: 500 12.5px/18px var(--font-body); color: var(--slate-700); transition: border-color .15s ease, color .15s ease; }
.suggest button:hover { border-color: var(--orange-200); color: var(--orange-deep); }
.share-box { display: flex; gap: 8px; align-items: center; }
.share-box .input { font: 500 13.5px/20px var(--font-mono); }

.proc-card { padding: 34px 36px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 34px; align-items: center; overflow: hidden; }
.proc-card h2 { font: 700 26px/32px var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.proc-card > div > p { margin-top: 10px; font-size: 16px; line-height: 26px; color: var(--body); max-width: 50ch; }
.steps-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.steps-list li { display: flex; align-items: center; gap: 12px; font: 500 15px/22px var(--font-body); color: var(--faint); }
.steps-list .mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; flex: none; }
.steps-list .mark .ic { width: 14px; height: 14px; stroke-width: 2.8; }
.steps-list li.done { color: var(--text); }
.steps-list li.done .mark { background: var(--green); border-color: var(--green); color: #fff; }
.steps-list li.now { color: var(--ink); font-weight: 600; }
.steps-list li.now .mark { border-color: var(--sky-200); background: var(--sky-50); }
.steps-list li.now .mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); animation: pulse 1.2s ease-in-out infinite; }
.wave { display: flex; align-items: center; justify-content: center; gap: 6px; height: 170px; border-radius: 22px; background: radial-gradient(ellipse at 50% 60%, var(--sky-50), #fff 70%); border: 1px solid var(--line); box-shadow: inset 0 1px 0 #fff, var(--shadow-card); }
.wave i { width: 7px; border-radius: 6px; background: linear-gradient(180deg, var(--orange-soft), var(--orange)); animation: wave 1.3s ease-in-out infinite; height: 20px; }
.wave i:nth-child(even) { background: linear-gradient(180deg, var(--sky-200), var(--sky)); }
.wave i:nth-child(2) { animation-delay: .1s; } .wave i:nth-child(3) { animation-delay: .2s; } .wave i:nth-child(4) { animation-delay: .3s; }
.wave i:nth-child(5) { animation-delay: .4s; } .wave i:nth-child(6) { animation-delay: .5s; } .wave i:nth-child(7) { animation-delay: .6s; }
.wave i:nth-child(8) { animation-delay: .7s; } .wave i:nth-child(9) { animation-delay: .8s; }
@keyframes wave { 0%, 100% { height: 16px; } 50% { height: 84px; } }
.proc-note { margin-top: 18px; font-size: 14px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.proc-note .ic { width: 17px; height: 17px; color: var(--green); }
.fail-card { padding: 30px 32px; display: flex; gap: 18px; align-items: flex-start; }
.fail-card .ic-tile { background: var(--orange-50); color: var(--orange-deep); border: 1px solid var(--orange-200); }
.fail-card h2 { font: 700 22px/30px var(--font-display); color: var(--ink); }
.fail-card p { margin-top: 6px; font-size: 15.5px; line-height: 25px; color: var(--body); }
.fail-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.mail-preview { display: grid; gap: 12px; }
.mail-preview .textarea { min-height: 260px; font-size: 14.5px; line-height: 23px; }

/* =================================================================== upload */
.upload-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.dropzone {
  position: relative; display: grid; justify-items: center; gap: 12px; padding: 54px 24px 48px; text-align: center; border-radius: 24px; cursor: pointer;
  background: linear-gradient(180deg, #fff, var(--tile)); border: 2px dashed var(--slate-300);
  box-shadow: inset 0 1px 0 #fff, var(--shadow-card); transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dropzone:hover, .dropzone:focus-within { border-color: var(--orange-bright); }
.dropzone.is-hot { border-color: var(--orange-bright); background: var(--orange-50); transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.1), var(--shadow-3d); }
.drop-ic { position: relative; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 22px; background: #fff; border: 1px solid var(--line); color: var(--orange); box-shadow: var(--shadow-float); transform: perspective(600px) rotateX(12deg) rotateY(-12deg); }
.drop-ic .ic { width: 34px; height: 34px; stroke-width: 1.6; }
.dropzone h2 { margin-top: 8px; font: 700 22px/28px var(--font-display); color: var(--ink); letter-spacing: -0.015em; }
.dropzone p { font-size: 15px; color: var(--muted); }
.formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.formats span { font: 600 11px/1 var(--font-mono); padding: 5px 7px; border-radius: 6px; background: #fff; border: 1px solid var(--line); color: var(--slate-700); }
.file-card { display: grid; gap: 18px; padding: 24px; }
.file-row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--tile); }
.file-row .src-tile { width: 44px; height: 44px; }
.file-meta { flex: 1; min-width: 0; display: grid; gap: 2px; }
.file-meta b { font: 600 14px/20px var(--font-mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta span { font-size: 13px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.progress { display: grid; gap: 8px; }
.progress-bar { height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08); }
.progress-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--orange-bright), var(--orange)); transition: width .25s ease; box-shadow: 0 0 12px rgba(249, 115, 22, 0.5); }
.progress-bar.is-done i { background: linear-gradient(90deg, var(--green-dot), var(--green)); box-shadow: none; }
.progress-text { display: flex; justify-content: space-between; gap: 12px; font: 500 12.5px/18px var(--font-mono); color: var(--muted); }
.upload-side { display: grid; gap: 16px; }
.tips { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.tips li { display: flex; gap: 10px; font-size: 14.5px; line-height: 22px; color: var(--body); }
.tips .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--green); }

/* =================================================================== search */
.search-hero { max-width: 1000px; }
.search-hero .search-field { height: 62px; border-radius: 18px; }
.search-hero .search-field input { font-size: 18px; }
.search-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.search-filters .input { min-height: 40px; padding: 7px 12px; font-size: 14px; background: #fff; width: auto; }
.search-filters [data-speaker] { width: 170px; }
.search-filters .date-field { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--font-mono); color: var(--muted); }
.results { display: grid; gap: 12px; margin-top: 28px; max-width: 1000px; }
.results-head { margin-top: 26px; font: 600 12px/16px var(--font-mono); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.result {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 18px; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s cubic-bezier(.2, .75, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
.result:hover { border-color: var(--orange-200); box-shadow: var(--shadow-lift); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px); }
.result-title { font: 700 15.5px/22px var(--font-display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-sub { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; line-height: 18px; color: var(--muted); margin-top: 2px; }
.result-sub b { color: var(--slate-700); font-weight: 600; }
.result-text { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--body); overflow-wrap: anywhere; }
.result .ts { font-size: 12px; padding: 7px 9px; }
.search-empty { margin-top: 30px; max-width: 1000px; padding: 30px; text-align: center; }
.search-empty p { color: var(--muted); }
.search-empty h2 { font: 700 20px/28px var(--font-display); color: var(--ink); margin-bottom: 6px; }

/* =================================================================== account */
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.acct-grid .span-2 { grid-column: 1 / -1; }
.kv { display: grid; gap: 4px; margin-top: 16px; }
.kv dt { font: 600 12px/16px var(--font-mono); color: var(--muted); }
.kv dd { margin: 0; font: 600 16px/24px var(--font-body); color: var(--ink); overflow-wrap: anywhere; }
.signin-methods { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 8px; }
.signin-methods li { display: flex; align-items: flex-start; gap: 10px; font: 500 15px/22px var(--font-body); color: var(--ink); }
.signin-methods .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--muted); }
.meter { display: grid; gap: 8px; margin-top: 18px; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.meter-top b { font: 700 28px/1 var(--font-display); color: var(--ink); letter-spacing: -0.02em; }
.meter-top span { font-size: 13.5px; color: var(--muted); }
.meter-bar { height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.meter-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sky-200), var(--sky)); }
.meter-bar.is-full i { background: linear-gradient(90deg, var(--orange-soft), var(--orange)); }
.meter-cap { font: 500 12px/16px var(--font-mono); color: var(--faint); }
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.price-card { position: relative; padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); display: grid; gap: 6px; align-content: start; }
.price-card.best { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(140deg, var(--orange-bright), var(--orange-200), var(--orange)) border-box; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 24px 40px -26px rgba(234, 88, 12, 0.55); }
.price-card h3 { font: 700 16px/22px var(--font-display); color: var(--ink); }
.price-card .amount { font: 700 34px/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); margin-top: 6px; }
.price-card .per { font-size: 14px; color: var(--muted); }
.price-card .badge { position: absolute; top: -12px; inset-inline-start: 18px; }
.soon { margin-top: 16px; }
.words-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 58px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--tile); margin-top: 16px; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.words-box:focus-within { background: #fff; border-color: var(--orange-bright); box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12); }
.word { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px; padding-inline-start: 11px; border-radius: 9px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font: 500 14px/20px var(--font-body); color: var(--ink); }
.word button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 0; background: transparent; cursor: pointer; color: var(--faint); }
.word button:hover { background: var(--line-soft); color: var(--ink); }
.word button .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.words-box input { flex: 1; min-width: 160px; border: 0; outline: none; background: transparent; font-size: 15px; padding: 6px; }
.words-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.words-foot .count { font: 500 12px/16px var(--font-mono); color: var(--faint); }
.danger-zone { border-color: var(--orange-200); }
.acct-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.deleted-state { max-width: 560px; margin: 40px auto; text-align: center; padding: 40px; }
.deleted-state h1 { font: 700 30px/36px var(--font-display); color: var(--ink); }
.deleted-state p { margin: 12px 0 24px; color: var(--body); }

/* =================================================================== welcome */
.welcome-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 48px; align-items: center; }
.welcome-hero h1 { font: 700 50px/1.05 var(--font-display); letter-spacing: -0.034em; color: var(--ink); text-wrap: balance; }
.welcome-hero h1 .soft { color: var(--muted); }
.welcome-hero .lead { margin-top: 16px; font-size: 18px; line-height: 29px; color: var(--body); max-width: 50ch; }
.pin-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: pin; }
.pin-steps li { counter-increment: pin; display: flex; align-items: center; gap: 12px; font: 500 15.5px/22px var(--font-body); color: var(--text); }
.pin-steps li::before { content: counter(pin); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; flex: none; font: 700 13px/1 var(--font-display); color: #fff; background: linear-gradient(160deg, #334155, var(--ink)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 14px -8px rgba(15, 23, 42, 0.55); }
.pin-steps .ic { width: 18px; height: 18px; color: var(--slate-700); vertical-align: -3px; }
.browser-art { position: relative; height: 380px; perspective: 1400px; }
.browser-art .rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-14deg) rotateZ(.5deg); }
.browser { position: absolute; top: 20px; inset-inline-start: 0; width: 540px; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-3d); direction: ltr; }
.browser-tabs { display: flex; align-items: flex-end; gap: 6px; height: 38px; padding: 0 12px; background: #eef2f6; }
.browser-tabs .dots { display: flex; gap: 6px; align-self: center; margin-right: 8px; }
.browser-tabs .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--slate-300); }
.browser-tab { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 10px 10px 0 0; background: #fff; font: 500 12px/1 var(--font-body); color: var(--slate-700); }
.browser-tab .fav { width: 14px; height: 14px; border-radius: 4px; background: var(--sky); }
.browser-bar { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.browser-bar .nav-ic { color: var(--faint); }
.browser-bar .nav-ic .ic { width: 17px; height: 17px; }
.omnibox { flex: 1; height: 30px; border-radius: 999px; background: #eef2f6; display: flex; align-items: center; padding: 0 14px; font: 500 12px/1 var(--font-mono); color: var(--muted); }
.tool { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--slate-700); }
.tool .ic { width: 19px; height: 19px; }
.tool.puzzle { animation: ring 4.8s ease-in-out infinite; }
@keyframes ring { 0%, 8% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); background: transparent; } 12%, 30% { box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.55); background: var(--orange-50); } 36%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); background: transparent; } }
.tool.pinned { opacity: 0; transform: scale(.6); animation: appear 4.8s ease-in-out infinite; }
.tool.pinned .brand-mark { width: 22px; height: 22px; font-size: 9px; border-radius: 6px; }
@keyframes appear { 0%, 62% { opacity: 0; transform: scale(.6); } 70%, 100% { opacity: 1; transform: scale(1); } }
.browser-page { height: 240px; padding: 22px; background: linear-gradient(180deg, #fff, var(--tile)); display: grid; gap: 10px; align-content: start; }
.browser-page i { display: block; height: 10px; border-radius: 6px; background: var(--line-soft); }
.browser-page i:nth-child(1) { width: 60%; height: 16px; }
.browser-page i:nth-child(2) { width: 85%; }
.browser-page i:nth-child(3) { width: 72%; }
.ext-menu { position: absolute; top: 108px; inset-inline-start: 250px; width: 300px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-float); transform: translateZ(90px); direction: ltr; animation: menu 4.8s ease-in-out infinite; }
@keyframes menu { 0%, 14% { opacity: 0; transform: translateZ(90px) translateY(-8px); } 20%, 60% { opacity: 1; transform: translateZ(90px); } 68%, 100% { opacity: 0; transform: translateZ(90px) translateY(-8px); } }
.ext-menu .eyebrow { padding: 2px 6px 10px; }
.ext-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; font: 600 13.5px/1 var(--font-body); color: var(--ink); }
.ext-row .brand-mark { width: 24px; height: 24px; font-size: 9.5px; border-radius: 7px; }
.ext-row .pin-btn { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--muted); animation: pinit 4.8s ease-in-out infinite; }
.ext-row .pin-btn .ic { width: 17px; height: 17px; }
@keyframes pinit { 0%, 34% { background: transparent; color: var(--muted); box-shadow: none; } 40%, 58% { background: var(--orange-50); color: var(--orange-deep); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.45); } 64%, 100% { background: transparent; color: var(--muted); } }
.ext-row.other { color: var(--muted); font-weight: 500; }
.ext-row.other i { width: 24px; height: 24px; border-radius: 7px; background: var(--line-soft); }
.cursor { position: absolute; width: 22px; height: 22px; top: 70px; inset-inline-start: 470px; transform: translateZ(140px); animation: cursor 4.8s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.35)); }
.cursor svg { width: 22px; height: 22px; }
@keyframes cursor { 0% { top: 180px; inset-inline-start: 380px; } 12%, 18% { top: 72px; inset-inline-start: 452px; } 40%, 52% { top: 150px; inset-inline-start: 522px; } 70%, 100% { top: 200px; inset-inline-start: 440px; } }
[dir="rtl"] .cursor { animation-name: cursor-rtl; }
@keyframes cursor-rtl { 0% { top: 180px; inset-inline-start: 150px; } 12%, 18% { top: 72px; inset-inline-start: 70px; } 40%, 52% { top: 150px; inset-inline-start: 10px; } 70%, 100% { top: 200px; inset-inline-start: 90px; } }
.ways-head { margin: 64px 0 22px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.ways-head h2 { font: 700 32px/38px var(--font-display); letter-spacing: -0.025em; color: var(--ink); }
.ways-head p { color: var(--body); max-width: 46ch; }
.signin-band { margin-top: 28px; padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.signin-band h3 { font: 700 19px/26px var(--font-display); color: var(--ink); }
.signin-band p { margin-top: 4px; color: var(--body); font-size: 15px; }

/* =================================================================== share */
.share-doc { max-width: 860px; margin: 0 auto; }
.doc-card { padding: 34px 38px 30px; }
.doc-card h1 { font: 700 34px/1.15 var(--font-display); letter-spacing: -0.028em; color: var(--ink); overflow-wrap: anywhere; }
.doc-card .meta-row { margin-top: 12px; }
.doc-sec-title { display: flex; align-items: center; gap: 10px; margin: 30px 0 12px; font: 700 18px/24px var(--font-display); color: var(--ink); }
.doc-sec-title .ic { width: 19px; height: 19px; color: var(--orange); }
.doc-card .tx-body { padding: 0; }
.made-with { display: flex; justify-content: center; margin: 28px 0 8px; }
.made-with a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; padding-inline-start: 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); text-decoration: none; font: 600 14px/20px var(--font-body); color: var(--slate-700); transition: border-color .15s ease, color .15s ease, transform .2s ease; }
.made-with a:hover { border-color: var(--orange-200); color: var(--ink); transform: translateY(-1px); }
.made-with .brand-mark { width: 26px; height: 26px; font-size: 10px; border-radius: 8px; }
.gone { max-width: 620px; margin: 30px auto; text-align: center; padding: 42px 36px; }
.gone .ic-tile { margin: 0 auto 18px; width: 56px; height: 56px; border-radius: 16px; background: var(--tile); color: var(--muted); border: 1px solid var(--line); }
.gone h1 { font: 700 28px/34px var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.gone p { margin: 12px auto 24px; max-width: 46ch; color: var(--body); }
.gone .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* =================================================================== checkout */
.checkout-card { padding: 36px 38px 30px; }
.checkout-title { font: 700 32px/1.12 var(--font-display); letter-spacing: -0.026em; color: var(--ink); }
.checkout-plan { margin-top: 20px; padding: 18px 20px; border-radius: 16px; background: var(--tile); border: 1px solid var(--line); display: grid; gap: 4px; }
.checkout-plan:empty { display: none; }
.checkout-plan-name { font: 700 16px/22px var(--font-display); color: var(--ink); }
.checkout-plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.checkout-plan-price b { font: 700 30px/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.checkout-plan-price span { font-size: 14.5px; color: var(--muted); }
.checkout-status { display: flex; align-items: center; gap: 12px; margin: 22px 0 6px; font: 500 15px/22px var(--font-body); color: var(--slate-700); }
.checkout-card .lead { margin-top: 10px; font-size: 16.5px; line-height: 27px; color: var(--body); }
.checkout-card .btn { margin-top: 18px; }
.checkout-card .prices { margin-top: 22px; }
.checkout-honest + .field-hint { margin-top: 6px; padding-inline-start: 28px; }
.checkout-honest { display: flex; gap: 10px; align-items: flex-start; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 14px; line-height: 21px; color: var(--slate-700); }
.checkout-honest .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--green); }

/* =================================================================== bye and 404 */
.bye-options { display: grid; gap: 12px; margin-top: 26px; }
.bye-option { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink); font: 600 15.5px/22px var(--font-body); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s ease, border-color .2s ease, box-shadow .3s ease; }
.bye-option:hover { border-color: var(--orange-200); box-shadow: var(--shadow-lift); }
.bye-option .ic { color: var(--muted); }
.bye-option .ic:last-child { margin-inline-start: auto; color: var(--faint); }
.big-404 { font: 800 120px/1 var(--font-display); letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 2px var(--line); background: linear-gradient(180deg, #fff, var(--line-soft)); -webkit-background-clip: text; background-clip: text; text-shadow: 0 30px 40px rgba(15, 23, 42, 0.12); }

/* =================================================================== legal pages (English only) */
.legal { max-width: 800px; }
.legal-card { padding: 40px 44px; }
.legal h1 { font: 700 38px/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.legal .updated { margin-top: 10px; font: 500 12.5px/18px var(--font-mono); color: var(--muted); }
.legal .en-only { margin-top: 18px; }
.legal h2 { margin: 34px 0 10px; font: 700 21px/28px var(--font-display); color: var(--ink); letter-spacing: -0.015em; }
.legal h3 { margin: 20px 0 6px; font: 700 16px/22px var(--font-display); color: var(--ink); }
.legal p, .legal li { font-size: 16px; line-height: 27px; color: var(--body); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 10px 0; padding-inline-start: 22px; display: grid; gap: 6px; }
.legal a { color: var(--orange-deep); font-weight: 600; }
.legal table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14.5px; line-height: 22px; }
.legal th, .legal td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--body); }
.legal th { font: 600 12px/16px var(--font-mono); color: var(--slate-700); background: var(--tile); }
.legal .toc { margin-top: 24px; padding: 18px 22px; border-radius: 16px; background: var(--tile); border: 1px solid var(--line); }
.legal .toc ol { margin: 8px 0 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: 15px; }
.legal .toc a { font-weight: 500; text-decoration: none; color: var(--slate-700); }
.legal .toc a:hover { color: var(--orange-deep); }
.static-header .nav-pill { gap: 16px; }
.static-header .header-actions a { font: 500 14.5px/20px var(--font-body); color: var(--body); text-decoration: none; }
.static-header .header-actions a:hover { color: var(--ink); }

/* =================================================================== responsive */
@media (max-width: 1180px) {
  .rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-layout { grid-template-columns: minmax(0, 1fr) 330px; }
  .welcome-hero { grid-template-columns: 1fr; }
  .browser-art { max-width: 600px; }
  .signin { grid-template-columns: minmax(0, 480px); justify-content: center; }
  .signin-art { display: none; }
}
@media (max-width: 1000px) {
  :root { --gutter: 28px; }
  .tr-layout, .upload-grid { grid-template-columns: minmax(0, 1fr); }
  .tr-layout { gap: 20px; }
  /* one column: summary, share link, ask, speakers, then the long text */
  .tr-main, .tr-side { display: contents; }
  .sum-card { order: 1; }
  .share-card { order: 2; }
  .ask-card { order: 3; }
  .spk-card { order: 4; }
  .tx-card { order: 5; }
  .ways { grid-template-columns: 1fr; }
  .empty-hero { grid-template-columns: 1fr; }
  .empty-art { display: none; }
  .acct-grid { grid-template-columns: 1fr; }
  .proc-card { grid-template-columns: 1fr; }
  .proc-card .wave { order: -1; height: 130px; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .site-header { top: 10px; }
  .nav-pill { height: 54px; gap: 10px; padding-inline-start: 12px; }
  .brand-name { font-size: 17px; }
  .app-nav { display: none; }
  .header-actions { gap: 6px; }
  .usage-pill > span { display: none; }
  .usage-pill { padding: 0 5px; }
  .avatar { display: none; }
  .bottom-nav {
    position: fixed; inset-inline: 10px; bottom: 10px; z-index: 50; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; border-radius: 18px;
    background: rgba(255, 255, 255, 0.86); border: 1px solid var(--line); backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px);
    box-shadow: inset 0 1px 0 #fff, 0 -8px 30px -18px rgba(15, 23, 42, 0.35), 0 16px 30px -18px rgba(15, 23, 42, 0.35);
  }
  .bottom-nav a { display: grid; justify-items: center; gap: 3px; padding: 7px 4px 6px; border-radius: 12px; text-decoration: none; font: 600 11px/14px var(--font-body); color: var(--muted); }
  .bottom-nav a .ic { width: 21px; height: 21px; }
  .bottom-nav a.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 18px -10px rgba(15, 23, 42, 0.3); }
  .bottom-nav a.is-active .ic { color: var(--orange); }
  body.has-bottom-nav { padding-bottom: 84px; }
  .toasts { bottom: 96px; }
  .page { padding: 92px 0 48px; }
  .page-head h1 { font-size: 30px; }
  .page-head .lead { font-size: 15.5px; line-height: 25px; }
  .page-head > .btn { width: 100%; }
  .rec-grid { grid-template-columns: 1fr; gap: 14px; }
  .toolbar { gap: 10px; }
  .toolbar .search-field { flex-basis: 100%; }
  .title-input { font-size: 26px; }
  .sum-card { padding: 20px 18px; }
  .sum-sections { grid-template-columns: 1fr; }
  .sum-foot-actions { width: 100%; }
  .sum-foot-actions .btn { flex: 1; }
  .tx-head { top: 72px; padding: 12px 14px; }
  .find { flex-basis: 100%; }
  .tx-body { padding: 6px 8px 18px; }
  .turn-who { padding-inline-start: 0; }
  .seg-row { grid-template-columns: 1fr; gap: 2px; }
  .seg-row p { font-size: 15.5px; line-height: 26px; }
  .action-item { grid-template-columns: 30px minmax(0, 1fr); }
  .action-side { grid-column: 2; }
  .who-dot { width: 30px; height: 30px; }
  .proc-card, .fail-card { padding: 24px 20px; }
  .dropzone { padding: 36px 18px 32px; }
  .form-grid { grid-template-columns: 1fr; }
  .result { grid-template-columns: 40px minmax(0, 1fr); padding: 14px; gap: 12px; }
  .result .src-tile { width: 40px; height: 40px; }
  .result .ts { grid-column: 2; justify-self: start; }
  .prices { grid-template-columns: 1fr; }
  .welcome-hero h1 { font-size: 36px; }
  .welcome-hero .lead { font-size: 16.5px; line-height: 26px; }
  .browser-art { height: 300px; }
  .browser-art .rig { transform: scale(.62) rotateX(8deg) rotateY(-12deg); transform-origin: 0 0; }
  [dir="rtl"] .browser-art .rig { transform-origin: 100% 0; }
  .ways-head { margin-top: 40px; }
  .ways-head h2 { font-size: 26px; line-height: 32px; }
  .signin-card { padding: 26px 20px 22px; }
  .code-boxes { gap: 7px; }
  .code-boxes input { height: 54px; font-size: 22px; }
  .doc-card { padding: 24px 18px; }
  .doc-card h1 { font-size: 27px; }
  .legal-card { padding: 26px 20px; }
  .legal h1 { font-size: 30px; }
  .footer-row { flex-direction: column; align-items: flex-start; }
  .big-404 { font-size: 88px; }
  .lang-switch { padding: 0 8px; }
  .site-header .header-actions .btn-sm { padding: 8px 10px; }
}
@media (max-width: 420px) {
  .site-header .header-actions .btn-sm span { display: none; }
  .site-header .header-actions .btn-sm .ic { display: block; }
  .site-header .header-actions .btn-sm:not(:has(.ic)) span { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .tool.pinned, .ext-menu { opacity: 1; transform: none; }
}