/* Windows has no flag emoji and shows letters like "RU". This font draws flags for those characters only. */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0b0c0f;
  --surface: #13151a;
  --surface-2: #191c22;
  --surface-3: #21252c;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);
  --ink: #f4f3ef;
  --text: #e6e5e0;
  --muted: #9a9da6;
  --accent: #ff5a36;
  --accent-2: #ffa14a;
  --focus-ring: var(--accent-2);
  --contact-bg: #08628d;
  --contact-hover: #0875a8;
  --contact-active: #07577c;
  --accent-soft: rgba(255, 90, 54, 0.14);
  --cool: #3a63d8;
  --danger: #ffa592;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 22px;
  --font: "Twemoji Country Flags", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
  --stop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='6' y='6' width='12' height='12' rx='2.5'/%3E%3C/svg%3E");
  --upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E");
  --clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E");
  --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z'/%3E%3C/svg%3E");
  --link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E");
  --screen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E");
  --expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 520px at 78% -6%, rgba(255, 90, 54, 0.16), transparent 62%),
    radial-gradient(760px 520px at 4% 96%, rgba(58, 99, 216, 0.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

::selection { background: rgba(255, 90, 54, 0.38); }

a { color: inherit; }

button, select, input, textarea { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- top bar ---------- */

.topbar {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 20px var(--gutter);
}

.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
}

.history-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.history-tab::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--clock) center / contain no-repeat;
  mask: var(--clock) center / contain no-repeat;
}

.history-tab:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
}

.history-tab.back { text-decoration: none; }
.history-tab.back::before { display: none; }

.auth-tab {
  height: 38px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.auth-tab:hover { background: #fff; transform: translateY(-1px); }

.account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-variant-numeric: tabular-nums;
}

/* Before sign-in the widget is shown, but dimmed and not clickable. */
.account.guest .balance { color: var(--text); }
.account.subscribed .balance { color: #ffb8a5; }
.account.guest .pay-link,
.pay-link[aria-disabled="true"] {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  cursor: not-allowed;
  pointer-events: none;
}

.balance { font-size: 15px; font-weight: 700; }

.info {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: italic 13px Georgia, serif;
  cursor: help;
}

.info:hover, .info:focus { color: var(--ink); }

.info .tip {
  display: none;
  position: absolute;
  right: -8px;
  top: 34px;
  width: min(290px, 80vw);
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface-3);
  color: var(--text);
  font: 400 13px/1.5 var(--font);
  text-align: left;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  z-index: 3;
}

.info:hover .tip,
.info:focus .tip,
.info:focus-within .tip,
.info.open .tip { display: block; }

.pay-link {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: #ffb8a5;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}

.pay-link:hover { background: rgba(255, 90, 54, 0.26); }

.tg-link {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font: 700 13px var(--font);
  cursor: pointer;
}

.tg-link:hover { background: rgba(255, 255, 255, 0.14); }
.account.guest .tg-link { display: none; }
.tg-link.is-linked { display: inline-flex; align-items: center; gap: 4px; cursor: default; }
.tg-link.is-linked:hover { background: rgba(255, 255, 255, 0.08); }
.tg-link:disabled { color: var(--text); opacity: 1; }
.tg-check { width: 16px; height: 16px; flex: 0 0 16px; }

/* ---------- layout ---------- */

main {
  flex: 1;
  width: min(1120px, calc(100% - 2 * var(--gutter)));
  margin: 24px auto 0;
}

.hero { text-align: center; }

.lead {
  max-width: 860px;
  margin: 0 auto 18px;
  font-size: clamp(28px, 4.6vw, 48px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.lead em {
  font-style: normal;
  background: linear-gradient(95deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.note {
  max-width: 680px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

/* ---------- composer ---------- */

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin-top: 44px;
}

.text-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.75);
}

.text-tools {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  min-height: 60px;
  box-sizing: border-box;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.text-tools button, .text-foot button {
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.text-tools button:hover, .text-foot button:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
}

.text-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.text-tools [data-action="fullscreen"] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 4px;
}

.text-tools [data-action="fullscreen"]::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
}

.text-tools [data-action="fullscreen"]::before {
  -webkit-mask: var(--expand) center / contain no-repeat;
  mask: var(--expand) center / contain no-repeat;
}

.text-tools .close {
  margin-left: auto;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

.tool-group {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.text-tools .tool-group button {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  line-height: 1;
}

.text-tools .tool-group button[data-action="bolder"] { font-weight: 900; }

.text-tools select {
  height: 32px;
  margin-left: 4px;
  padding: 0 28px 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%239a9da6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E") right 10px center / 10px 6px no-repeat;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.text-tools select:hover { border-color: var(--line-strong); }

.calculator select {
  height: auto;
  cursor: pointer;
}

.transcript {
  display: block;
  width: 100%;
  min-height: 320px;
  padding: 24px 28px;
  border: 0;
  outline: none;
  resize: vertical;
  background: transparent;
  color: var(--text);
  font: 400 18px/1.7 var(--font);
}

/* ---------- listen strip ---------- */

.listen-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.listen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 0 0 auto;
  height: 68px;
  padding: 0 38px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff6e48, #e5441f);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 9px rgba(255, 90, 54, 0.13),
    0 0 44px rgba(255, 90, 54, 0.42);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.listen::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--mic) center / contain no-repeat;
  mask: var(--mic) center / contain no-repeat;
}

.listen:hover { transform: scale(1.02); }
.listen:active { transform: scale(0.98); }

.record-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 5.5ch;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  line-height: 1;
}

.record-timer::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--accent-2);
  -webkit-mask: var(--clock) center / contain no-repeat;
  mask: var(--clock) center / contain no-repeat;
}

.record-timer[hidden] { display: none; }

.listen[aria-pressed="true"] {
  background: #17191e;
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--accent), 0 0 44px rgba(255, 90, 54, 0.3);
  animation: pulse 1.8s ease-out infinite;
}

.listen[aria-pressed="true"]::before {
  background: var(--accent);
  -webkit-mask-image: var(--stop);
  mask-image: var(--stop);
}

@keyframes pulse {
  from { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(255, 90, 54, 0.3); }
  to { box-shadow: 0 0 0 2px var(--accent), 0 0 0 22px rgba(255, 90, 54, 0); }
}

.wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 44px;
}

.wave i {
  --h: 22px;
  display: block;
  width: 4px;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.2s;
}

.wave i:nth-child(3n + 1) { --h: 14px; }
.wave i:nth-child(3n + 2) { --h: 32px; }
.wave i:nth-child(3n) { --h: 44px; }
.wave i:nth-child(4n) { --h: 24px; }
.wave i:nth-child(5n) { --h: 38px; }

.listen[aria-pressed="true"] ~ .wave i {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  animation: bar 0.9s ease-in-out infinite alternate;
}

.listen[aria-pressed="true"] ~ .wave i:nth-child(2n) { animation-delay: -0.3s; }
.listen[aria-pressed="true"] ~ .wave i:nth-child(3n) { animation-delay: -0.6s; }
.listen[aria-pressed="true"] ~ .wave i:nth-child(5n) { animation-delay: -0.15s; }

@keyframes bar {
  from { height: 6px; }
  to { height: var(--h); }
}

.strip-end {
  order: 0;
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.listen { order: 1; }
.record-timer { order: 2; }
.wave { order: 3; }

/* One look for every secondary action under the main button, so the three offline buttons are the same size. */
.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  order: 4;
  height: 56px;
  min-width: 210px;
  padding: 0 24px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.action:hover { background: var(--surface-3); border-color: rgba(255, 255, 255, 0.3); }
.action:active { transform: scale(0.98); }
.action[hidden] { display: none; }

.action::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--mask) center / contain no-repeat;
  mask: var(--mask) center / contain no-repeat;
}

.meeting { --mask: var(--screen); margin-left: auto; }
.dictate { --mask: var(--mic); }
#video-go { --mask: var(--link); }

.meeting[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: #ffd2c6;
}

.listen-stack.is-dictating .wave,
.listen-stack.is-dictating .record-timer:not([hidden]) {
  grid-column: 1 / -1;
  justify-content: center;
}
.listen-stack.is-dictating .record-timer { order: 6; }

.listen-stack.is-dictating .wave i {
  background: linear-gradient(180deg, #6f94f5, #3a63d8);
  animation: bar 0.9s ease-in-out infinite alternate;
}

.listen-stack.is-dictating .wave i:nth-child(2n) { animation-delay: -0.3s; }
.listen-stack.is-dictating .wave i:nth-child(3n) { animation-delay: -0.6s; }
.listen-stack.is-dictating .wave i:nth-child(5n) { animation-delay: -0.15s; }

.offline-options {
  order: 7;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.offline-options .speaker-toggle { align-self: flex-start; }

.offline-options[hidden] { display: none; }

.video-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.video-link input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
}

.video-link input:focus { outline: 3px solid rgba(255, 90, 54, 0.25); border-color: var(--accent); }
.video-hosts { font-size: 12px; font-weight: 500; opacity: 0.8; }

.speaker-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 16px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.speaker-toggle::before {
  content: "";
  flex: 0 0 38px;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-3) radial-gradient(circle at 11px 11px, #9a9da6 8px, transparent 9px) no-repeat;
}

.speaker-toggle[aria-pressed="true"]::before {
  background: #3a63d8 radial-gradient(circle at 27px 11px, #fff 8px, transparent 9px) no-repeat;
}

.progress {
  order: 8;
  position: relative;
  flex: 1 0 100%;
  height: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}

.progress[hidden] { display: none; }

.progress-bar {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3a63d8, #6f94f5);
  transition: width 0.25s ease;
}

.progress.is-done .progress-bar { background: linear-gradient(90deg, #2ea36f, #4cd698); }
.progress.is-failed .progress-bar { background: linear-gradient(90deg, #c4452d, #ff7a5c); }

.progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.status { order: 9; }

.seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.seg button {
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.seg button:hover { color: var(--ink); }

.seg button[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--ink);
}

.status {
  flex: 1 0 100%;
  margin: 0;
  color: var(--danger);
  font-size: 14px;
  text-align: center;
}

.status:empty { display: none; }

/* ---------- fullscreen ---------- */

body:has(.composer.fullscreen, .history-view:not([hidden])) { overflow: hidden; }

body:has(.composer.fullscreen) .topbar,
body:has(.history-view:not([hidden])) .topbar { visibility: hidden; }

.composer.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 45;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 14px;
  margin: 0;
  padding: 16px;
  background: var(--bg);
}

.composer.fullscreen .text-column { min-height: 0; }

.composer.fullscreen .transcript {
  flex: 1;
  min-height: 0;
  resize: none;
}

.composer.fullscreen .listen-stack {
  order: 1;
  gap: 6px;
  padding: 0;
  border-radius: 18px;
}

.composer.fullscreen .listen {
  height: 54px;
  padding: 0 30px;
  font-size: 16px;
}

.composer.fullscreen .listen::before { width: 20px; height: 20px; }
.composer.fullscreen .wave { height: 34px; }

/* On a phone the offline toolbar is a tall column and eats the full-screen text.
   Keep the dictate button; the mode, language, file, link and speaker controls come back on exit. */
@media (max-width: 860px) {
}

/* ---------- carousel ---------- */

.carousel { margin-top: 80px; }

.carousel h2 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.carousel-frame {
  display: flex;
  align-items: center;
  gap: 12px;
}

.carousel-frame[data-count="0"] {
  display: grid;
  grid-template-columns: minmax(120px, 240px) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  min-height: 170px;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

.carousel-frame[data-count="0"]::before {
  content: "";
  align-self: stretch;
  min-height: 140px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--surface-3), var(--surface));
}

.carousel-frame[data-count="0"]::after {
  content: "";
  height: 70px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)) 0 0 / 78% 10px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)) 0 30px / 58% 10px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)) 0 60px / 68% 10px no-repeat;
}

.carousel-track {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar { display: none; }

/* Tall portrait cards, three in view on a desktop screen. */
.slide {
  position: relative;
  flex: 0 0 calc((100% - 2 * 16px) / 3);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-3);
}

.slide-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 22px 20px 20px;
  background: linear-gradient(
    180deg,
    rgba(8, 9, 12, 0) 0%,
    rgba(8, 9, 12, 0.25) 40%,
    rgba(8, 9, 12, 0.82) 68%,
    rgba(8, 9, 12, 0.94) 100%
  );
}

.slide-overlay h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}

.slide-overlay p {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: 15px;
  line-height: 1.5;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}

.nav {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

.nav:hover { background: var(--surface-3); }


/* ---------- questions ---------- */

.faq h2 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.faq { margin-top: 56px; }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid rgba(142, 183, 255, 0.38);
  border-radius: 16px;
  background: var(--surface);
}

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 2px solid #8eb7ff;
  border-radius: 50%;
}

.faq-item p {
  margin: 0;
  padding: 0 22px 18px 54px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

/* ---------- footer ---------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  width: min(1120px, calc(100% - 2 * var(--gutter)));
  margin: 56px auto 0;
  padding: 26px 0 40px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.who { display: flex; flex-direction: column; gap: 4px; }

.brand {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.brand b {
  font-weight: 800;
  background: linear-gradient(95deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand span { color: var(--muted); font-weight: 600; }

.author { color: var(--ink); font-weight: 600; }

.contacts { display: flex; flex-wrap: wrap; gap: 10px; }

.contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.contact:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--line-strong); }

.contact.priority {
  border-color: transparent;
  background: var(--contact-bg);
  color: #fff;
}

.contact.priority:hover { background: var(--contact-hover); }
.contact.priority:active { background: var(--contact-active); }

.icon { display: block; width: 16px; height: 16px; }

.max-qr { flex-basis: 100%; text-align: right; }
.max-qr:empty { display: none; }
.max-qr img { width: 112px; height: 112px; padding: 6px; border-radius: 12px; background: #fff; }

/* ---------- side panels ---------- */

.auth-panel, .history-panel {
  position: fixed;
  top: 16px;
  z-index: 60;
  overflow: auto;
  max-height: calc(100% - 32px);
  padding: 22px 22px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: rgba(22, 24, 29, 0.96);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  visibility: hidden;
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
}

.auth-panel {
  right: 16px;
  width: min(380px, calc(100% - 32px));
  transform: translateY(-12px) scale(0.98);
  transform-origin: top right;
}

.history-panel {
  left: 16px;
  bottom: 16px;
  width: min(420px, calc(100% - 32px));
  transform: translateX(-24px);
}

.auth-panel.open, .history-panel.open {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

body:has(.auth-panel.open, .history-panel.open)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(5, 6, 8, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.panel-head h2 { margin: 0; }

.panel-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

.panel-close:hover { background: rgba(255, 255, 255, 0.08); }

.auth-panel h2, .history-panel h2 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.auth-panel label, .rule-dialog label, .field label {
  display: block;
  margin: 14px 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.auth-panel input, .rule-dialog textarea, .calculator input, .calculator select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 16px;
}

.calculator select { height: auto; cursor: pointer; }

.auth-panel input:focus, .rule-dialog textarea:focus,
.calculator input:focus, .calculator select:focus {
  outline: 3px solid rgba(255, 90, 54, 0.25);
  border-color: var(--accent);
}

.auth-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.auth-actions button {
  padding: 12px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.auth-actions button:hover { background: rgba(255, 255, 255, 0.07); }

.auth-actions #login-button,
.auth-actions #send-rule {
  border-color: transparent;
  background: var(--ink);
  color: var(--bg);
}

.auth-actions #login-button:hover,
.auth-actions #send-rule:hover { background: #fff; }

.auth-error {
  min-height: 1.3em;
  margin: 10px 0 0;
  color: var(--danger);
  font-size: 14px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.history-list button {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.history-list button:hover { border-color: rgba(255, 90, 54, 0.5); background: var(--surface-3); }

.history-list time {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.history-view {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  padding: 20px;
  background: var(--bg);
}

.history-view[hidden] { display: none; }

.history-view .text-column {
  width: min(980px, 100%);
  margin: 0 auto;
}

.history-view .transcript { flex: 1; min-height: 0; }
.history-view.fullscreen { padding: 16px; }
.history-view.fullscreen .text-column { width: 100%; }

.rule-dialog {
  width: min(520px, calc(100% - 32px));
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
}

.rule-dialog::backdrop {
  background: rgba(5, 6, 8, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.rule-dialog label { margin-top: 0; }
.rule-dialog textarea { min-height: 120px; margin: 0; font: inherit; font-size: 15px; line-height: 1.55; resize: vertical; }

/* ---------- pay page ---------- */

.pay-card {
  width: min(560px, 100%);
  margin: 24px auto 0;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.75);
}

.pay-card h1 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
}

.pay-card .note { text-align: center; }

.field { margin: 0; }
.field label { margin-top: 16px; }

.sum {
  margin: 26px 0 18px;
  min-height: 52px;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(95deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pay-button {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff6e48, #e5441f);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 7px rgba(255, 90, 54, 0.13), 0 0 36px rgba(255, 90, 54, 0.35);
  transition: filter 0.15s, transform 0.15s;
}

.pay-button:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ---------- plans grid: x = plan, y = what you pay for (month, year / online, offline) ---------- */

[hidden] { display: none !important; }

.pay-head { text-align: center; margin: 24px auto 0; }

.pay-head h1 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.pay-head .note { margin: 4px auto 0; max-width: 620px; }

.pay-current, .pay-done {
  display: inline-block;
  margin: 14px auto 0;
  padding: 8px 16px;
  border: 1px solid rgba(255, 90, 54, 0.35);
  border-radius: 999px;
  background: var(--accent-soft);
  color: #ffd2c6;
  font-size: 14px;
  font-weight: 600;
}

.sub-cancel {
  display: block;
  margin: 12px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffd2c6;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  column-gap: 14px;
  row-gap: 14px;
  width: min(1180px, 100%);
  margin: 28px auto 0;
}

.plan {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 10px;
  padding: 20px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.plan.is-selected {
  border-color: rgba(255, 90, 54, 0.6);
  box-shadow: 0 0 0 4px rgba(255, 90, 54, 0.1), 0 30px 70px -40px rgba(255, 90, 54, 0.55);
}

.plan.is-locked { opacity: 0.7; }

.plan-head { text-align: left; }

.plan-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--surface-3);
  color: var(--ink);
}

.plan[data-plan="tg"] .plan-icon { background: rgba(58, 99, 216, 0.22); color: #9db6ff; }
.plan[data-plan="full"] .plan-icon { background: var(--accent-soft); color: #ffb8a5; }
.plan[data-plan="gentleman"] .plan-icon { background: rgba(214, 170, 76, 0.2); color: #f0cd7e; }
.plan-icon .ico { width: 26px; height: 26px; }

.plan-head h2 { margin: 0 0 4px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.plan-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; font-weight: 500; }
.plan-head .plan-limit { margin-top: 8px; color: var(--ink); font-size: 12.5px; font-weight: 600; }

/* The gentleman plan has no tiles: nothing to buy, one link to the owner instead, spread over the two tile rows. */
.plan-offer { grid-row: span 2; display: flex; align-items: flex-end; }
.plan-cta {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(214, 170, 76, 0.55);
  border-radius: 999px;
  background: rgba(214, 170, 76, 0.12);
  color: #f0cd7e;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.plan-cta:hover { background: rgba(214, 170, 76, 0.22); transform: translateY(-1px); }
.plan-cta:focus-visible { outline: 3px solid rgba(214, 170, 76, 0.4); outline-offset: 2px; }

.confirm-dialog {
  width: min(480px, calc(100% - 32px));
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
}
.confirm-dialog::backdrop { background: rgba(5, 6, 8, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.confirm-dialog h2 { margin: 0 0 10px; font-size: 20px; }
.confirm-dialog p { margin: 0 0 18px; color: var(--text); font-size: 15px; line-height: 1.55; }

.surfaces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}

.surface {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
}

.surface .ico { width: 16px; height: 16px; }
.surface .mark { width: 13px; height: 13px; color: #7ddc9a; }
.surface.off { color: var(--muted); border-style: dashed; border-color: var(--line); }
.surface.off .mark { color: var(--muted); }

.tile {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label price" "note price" "save save";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.tile:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.34); transform: translateY(-1px); }
.tile:focus-visible { outline: 3px solid rgba(255, 90, 54, 0.35); outline-offset: 2px; }

.tile.is-selected {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(255, 90, 54, 0.18), rgba(255, 90, 54, 0.07));
}

.tile:disabled { cursor: not-allowed; opacity: 0.5; }

.tile-label { grid-area: label; font-size: 14px; font-weight: 700; color: var(--ink); }
.tile-note { grid-area: note; font-size: 12px; font-weight: 500; color: var(--muted); }

.tile-price {
  grid-area: price;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.plan[data-plan="go"] .tile-price { font-size: 19px; }

.tile-save {
  grid-area: save;
  justify-self: start;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(125, 220, 154, 0.14);
  color: #8fe5a8;
  font-size: 12px;
  font-weight: 700;
}

.tile.is-current .tile-label::after {
  content: "●";
  margin-left: 6px;
  color: var(--accent);
  font-size: 9px;
  vertical-align: middle;
}

.pay-page .pay-card { margin-top: 20px; }

.subscribe .sub-title { margin: 0; text-align: center; font-size: 17px; font-weight: 700; color: var(--ink); }
.subscribe .note { text-align: center; margin: 0 0 18px; }
.subscribe .sum { margin-top: 18px; }

.subscribe #sub-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding: 14px 18px;
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}

html[lang="en"] .plan .tile-price { font-size: 18px; }

@media (max-width: 1100px) and (min-width: 861px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 14px; width: min(760px, 100%); }
}

@media (max-width: 860px) {
  .plan-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 14px;
  }
  .plan-offer { grid-row: auto; grid-column: 1 / -1; }
  .plan {
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "head head" "surf surf" "a b";
  }
  .plan-head { grid-area: head; display: grid; grid-template-columns: 46px 1fr; column-gap: 12px; }
  .plan-icon { grid-row: span 2; margin: 0; }
  .plan-head h2 { align-self: end; }
  .plan-head .plan-limit { grid-column: 1 / -1; margin-top: 4px; }
  .surfaces { grid-area: surf; }
  .tile { grid-template-columns: 1fr; grid-template-areas: "label" "price" "note" "save"; row-gap: 3px; }
}

@media (max-width: 520px) {
  .pay-head h1 { font-size: 27px; }
  .plan { padding: 16px 14px 14px; column-gap: 10px; }
  .tile { padding: 11px 12px; }
  .tile-price, .plan[data-plan="go"] .tile-price { font-size: 19px; }
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .composer { margin-top: 32px; }
  .listen { flex: 1 1 100%; }
  .wave { display: none; }
  .strip-end { justify-content: center; }
  .action, .meeting { flex: 1 1 100%; margin-left: 0; }
  .slide { flex-basis: calc((100% - 16px) / 2); }
  .carousel-frame[data-count="0"] { grid-template-columns: minmax(0, 1fr); }
  .carousel-frame[data-count="0"]::before { min-height: 110px; }
  .site-footer { flex-direction: column; align-items: flex-start; }
  .max-qr { text-align: left; }
}

@media (max-width: 520px) {
  .slide { flex-basis: 100%; }
  .nav { flex-basis: 36px; width: 36px; height: 36px; }
  .topbar { padding-top: 14px; }
  .pay-card { padding: 22px; }
  .transcript { min-height: 260px; padding: 18px; }
  .lead { font-size: 27px; }
  .info .tip {
    position: fixed;
    left: 16px;
    right: auto;
    top: 72px;
    width: calc(100vw - 32px);
    max-width: none;
  }
}

.lang-menu { position: relative; }

.lang-current, .speech-lang, .lang-list button, .lang-list a {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
}

.lang-current, .speech-lang { padding: 8px 12px; }

.lang-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  z-index: 6;
  min-width: 190px;
}

.lang-list button,
.lang-list a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-decoration: none;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
}

.summary-box {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.summary-box h2 { margin: 0 0 8px; font-size: 16px; }

.summary-body {
  margin: 0;
  white-space: pre-wrap;
  font: 16px/1.5 var(--font);
  color: var(--text);
}


.wheel-dialog {
  width: min(560px, calc(100% - 24px));
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  padding: 18px 18px 22px;
}

.wheel-dialog h2 { margin: 0 0 8px; text-align: center; font-size: 20px; }

.wheel-stage {
  --wheel-pivot-y: 44px;
  --wheel-orbit-radius: 93px;
  --wheel-hole-size: 150px;
  position: relative;
  height: 300px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.wheel-hole {
  position: absolute;
  left: 50%;
  top: calc(var(--wheel-pivot-y) + var(--wheel-orbit-radius) - var(--wheel-hole-size) / 2);
  width: var(--wheel-hole-size);
  height: var(--wheel-hole-size);
  margin-left: calc(var(--wheel-hole-size) / -2);
  border: 18px solid var(--surface-3);
  border-radius: 50%;
  box-sizing: border-box;
}

.wheel {
  position: absolute;
  left: 50%;
  top: var(--wheel-pivot-y);
  width: 0;
  height: 0;
}

.wheel-auto {
  position: absolute;
  left: 50%;
  top: calc(var(--wheel-pivot-y) + var(--wheel-orbit-radius));
  z-index: 2;
  transform: translate(-50%, -50%);
  min-width: 72px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font: 600 15px var(--font);
  cursor: pointer;
}

.wheel-auto.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.wheel-marker {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 0;
  height: 0;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid var(--accent);
}

.wheel-item {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: center center;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 22px/1 var(--font);
  cursor: pointer;
  padding: 0;
}

.wheel-item.is-selected {
  font-size: 26px;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent));
}

.wheel-label { text-align: center; min-height: 1.4em; font-weight: 600; }

.wheel-dialog > button {
  display: block;
  margin: 0 auto;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: inherit;
  padding: 8px 16px;
  cursor: pointer;
}

.text-tools button:disabled, .text-foot button:disabled { opacity: 0.45; cursor: default; }

.admin-gate {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
}

.admin-gate[hidden] { display: none; }

.admin-main { width: min(980px, calc(100% - 32px)); margin: 32px auto 64px; }

.admin-main h1, .admin-main h2 { text-align: center; }

.span-control { display: block; text-align: center; }

.admin-main input[type="range"] { width: min(420px, 100%); display: block; margin: 8px auto 24px; }

.chart {
  margin: 0 0 12px;
  padding: 12px 10px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}

.chart svg { width: 100%; height: auto; display: block; }

.legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }

.legend button {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 999px;
}

.legend button.off { opacity: 0.35; }

.admin-events-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin: 0 0 8px;
}

.admin-events-toolbar h2 { margin: 0; }

.who-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.who-filter .who-not {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

.who-filter .who-not input {
  min-width: 0;
  padding: 0;
  accent-color: var(--accent, #6f94f5);
}

.who-filter input[type="text"],
.who-filter input:not([type]) {
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 14px;
  min-width: 12rem;
}

.reviews {
  margin-top: 56px;
}

.reviews h2 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.reviews-empty {
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.reviews-empty span[id] { color: var(--ink); font-weight: 800; }

.comment-form {
  margin: 0 0 24px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--surface);
  transition: border-color 0.2s;
}

.comment-form:focus-within { border-color: var(--accent); }

.comment-form textarea {
  display: block;
  width: 100%;
  min-height: 84px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.55;
  resize: vertical;
}

.comment-form textarea:focus { outline: none; }
.comment-form textarea::placeholder { color: var(--muted); }
.comment-form.is-guest textarea { cursor: pointer; }

.comment-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.comment-count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.comment-form.is-guest .comment-count { visibility: hidden; }

.comment-send {
  height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff6e48, #e5441f);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}

.comment-send:hover { filter: brightness(1.08); transform: translateY(-1px); }

.comment-replying {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  padding: 8px 8px 8px 14px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: #ffd2c6;
  font-size: 13px;
}

.comment-replying[hidden] { display: none; }

.comment-replying button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.comment-form .auth-error { margin: 8px 4px 0; min-height: 0; }
.comment-form .auth-error:empty { display: none; }

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.review {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
}

.review.is-positive { border-left-color: #34d399; }
.review.is-negative { border-left-color: #f87171; }
.review.is-reply { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }

.review-avatar {
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(160deg, #3a63d8, #6f94f5);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.is-reply > .review-avatar { flex-basis: 30px; width: 30px; height: 30px; font-size: 13px; background: var(--surface-3); }

.review-main { flex: 1; min-width: 0; }
.review-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.review-head strong { font-size: 15px; }
.review-head time { color: var(--muted); font-size: 12px; }
.review-main p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

.comment-reply {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.comment-reply:hover { color: var(--ink); }

.reviews-list .replies {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.reviews-none { padding: 22px; border: 1px dashed var(--line-strong); border-radius: 16px; color: var(--muted); text-align: center; }

.admin-comments { margin-top: 28px; }
.admin-comments select { font: inherit; margin-right: 8px; color: var(--ink); background: var(--surface); }
.inn { text-align: center; opacity: 0.8; }

.admin-refresh {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
}

.admin-refresh:disabled { opacity: 0.55; cursor: wait; }

.admin-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}

.admin-table-scroll {
  max-height: min(520px, 62vh);
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th,
.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.admin-table td:last-child {
  max-width: 320px;
  word-break: break-word;
}

.admin-table th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  font-weight: 700;
  white-space: nowrap;
}

.admin-table tbody tr:last-child td { border-bottom: 0; }

.admin-table tr.is-error td:nth-child(4) { color: #fca5a5; }

.admin-table tr.is-error td { background: rgba(248, 113, 113, 0.06); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Scenario cards open an instruction. */
.slide[data-guide] { cursor: pointer; transition: transform 0.18s, border-color 0.18s; }
.slide[data-guide]:hover { transform: translateY(-3px); border-color: var(--line-strong); }

.slide-guide {
  align-self: flex-start;
  text-decoration: none;
  margin-top: 4px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(8, 9, 12, 0.55);
  color: #fff;
  font: 700 14px var(--font);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.slide-guide::after { content: " →"; }
.slide-guide:hover { background: var(--accent); border-color: var(--accent); }

/* The business API card is the same size as the others and carries no photograph. */
.slide-plain {
  cursor: pointer;
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(96, 140, 255, 0.55), transparent 58%),
    radial-gradient(80% 60% at 100% 100%, rgba(45, 212, 160, 0.32), transparent 52%),
    linear-gradient(165deg, #1a2744 0%, #0c1016 72%);
  transition: transform 0.18s, border-color 0.18s;
}
.slide-plain:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.slide-plain::before {
  content: "API";
  position: absolute;
  top: 22px;
  left: 20px;
  z-index: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(42px, 4vw, 68px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.slide-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: inherit;
  text-decoration: none;
}
.slide-cover:focus-visible { outline: 3px solid var(--accent); outline-offset: -6px; }
.slide-plain .slide-overlay {
  background: linear-gradient(
    180deg,
    rgba(8, 9, 12, 0) 0%,
    rgba(8, 9, 12, 0.08) 36%,
    rgba(8, 9, 12, 0.78) 68%,
    rgba(8, 9, 12, 0.94) 100%
  );
}

.guide {
  width: min(720px, calc(100% - 24px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: var(--surface);
  color: var(--text);
  overflow: auto;
  overscroll-behavior: contain;
}

.guide::backdrop { background: rgba(5, 6, 8, 0.72); backdrop-filter: blur(5px); }

.guide-close-form { position: sticky; top: 0; z-index: 2; height: 0; text-align: right; }

.guide-close {
  position: relative;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.guide-close:hover { background: var(--accent); border-color: var(--accent); }

.guide-body { padding: 30px clamp(20px, 5vw, 38px) 34px; }
.guide-body[hidden] { display: none; }

.guide-kicker {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.guide-body h2 {
  margin: 0 40px 14px 0;
  color: var(--ink);
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.guide-lead { margin: 0 0 26px; font-size: 17px; line-height: 1.6; }
.guide-lead strong, .guide-steps strong, .guide-tip strong { color: var(--ink); }

.guide-steps-title {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.guide-steps { counter-reset: guide-step; display: grid; gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }

.guide-steps li {
  counter-increment: guide-step;
  position: relative;
  padding: 14px 16px 14px 62px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.guide-steps li::before {
  content: counter(guide-step);
  position: absolute;
  left: 14px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #14110f;
  font-weight: 800;
}

.guide-steps h3 { margin: 0 0 4px; color: var(--ink); font-size: 16px; line-height: 1.3; }
.guide-steps p { margin: 0; font-size: 15px; line-height: 1.55; }
.guide-body code { padding: 1px 6px; border-radius: 6px; background: var(--surface-3); color: var(--accent-2); }

.guide-tip {
  margin: 0 0 22px;
  padding: 14px 16px;
  border-left: 4px solid var(--accent);
  border-radius: 6px 14px 14px 6px;
  background: var(--accent-soft);
}

.guide-tip p { margin: 4px 0 0; line-height: 1.55; }
.guide-tip > strong::before { content: "💡 "; }

.guide-tags-title { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.guide-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }

.guide-tags li {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text);
  font-size: 13px;
}

.guide-actions { display: flex; justify-content: flex-start; }

.guide-cta {
  display: inline-block;
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #14110f;
  font: 800 16px var(--font);
  text-decoration: none;
  cursor: pointer;
}

.guide-cta:hover { filter: brightness(1.08); }

@media (max-width: 560px) {
  .guide-steps li { padding-left: 54px; }
  .guide-steps li::before { left: 10px; width: 32px; height: 32px; }
}

.guide-permalink { margin: 22px 0 0; font-size: 14px; }
.guide-permalink a { color: var(--muted); }
.guide-body a:not(.guide-cta) { color: var(--accent-2); }

/* The instruction as a page of its own, and the landing pages. */
.doc-page { width: min(780px, calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: 18px 0 40px; }

.api-page h2 { margin: 28px 0 10px; font-size: 22px; }
.api-page .guide-lead { margin-top: 0; }
.api-services { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.api-services li { line-height: 1.45; }
.api-sample {
  overflow-x: auto;
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.api-links { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.api-links a { color: var(--accent-2); font-weight: 700; }
.api-token { margin-top: 8px; padding-top: 8px; }
.api-token label {
  display: block;
  margin: 14px 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.api-signin { max-width: 420px; margin-top: 8px; }
.api-signin .auth-lead { margin-top: 0; }
.api-page input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 16px;
}
.api-create-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 12px;
  align-items: end;
}
@media (max-width: 560px) {
  .api-create-fields { grid-template-columns: 1fr; }
}
.api-days-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.api-token label.api-life {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.api-token label.api-life input {
  width: 84px;
  margin: 0;
  padding: 8px 10px;
}
.api-page input:focus { outline: 3px solid rgba(255, 90, 54, 0.25); border-color: var(--accent); }
.api-page .api-primary {
  border-color: transparent;
  background: var(--ink);
  color: var(--bg);
}
.api-page .api-primary:hover { background: #fff; }
.api-who { margin: 0 0 8px; color: var(--muted); }
.api-fresh {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(45, 212, 160, 0.12);
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}
.api-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.api-list li {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.api-list code { overflow-wrap: anywhere; font-size: 13px; }
.api-meta { color: var(--muted); font-size: 13px; }
.api-list .is-revoked code,
.api-list .is-revoked .api-meta { color: var(--muted); text-decoration: line-through; }
.api-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.api-row-actions button {
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.api-empty { color: var(--muted); }
.crumbs { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.crumbs a { color: var(--muted); }
.doc.guide-body {
  padding: clamp(22px, 5vw, 40px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
}
.doc.guide-body h1 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.doc .faq-list { margin-bottom: 26px; }
.doc-related { margin-top: 30px; }
.doc-related h2 { margin: 0 0 12px; font-size: 18px; }
.doc-related ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.doc-related a {
  display: block;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.doc-related a:hover { border-color: var(--line-strong); color: var(--ink); }

/* A plain text block under the scenarios: what the service does, with links to the other pages. */
.explainer { margin-top: 56px; }
.explainer h2 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.explainer p,
.explainer li { color: var(--muted); font-size: 15px; line-height: 1.65; }
.explainer p { margin: 0 0 14px; }
.explainer ul { display: grid; gap: 10px; margin: 0 0 16px; padding-left: 20px; }
.explainer strong { color: var(--ink); }
.explainer a { color: var(--accent-2); text-underline-offset: 3px; }

/* The link to the Telegram bot, the same everywhere: pay page, tips, home text, FAQ. */
.bot-link {
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.bot-link:hover { color: var(--ink); }
.surface .bot-link { color: inherit; }
.slide-overlay p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* The 404 page: the same dark pages as the instructions, with a big code and the way back. */
.not-found { text-align: center; padding-top: clamp(24px, 8vw, 72px); }
.not-found-art {
  display: block;
  width: min(100%, 520px);
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-2);
}
.not-found h1 { margin: 6px 0 14px; color: var(--ink); font-size: clamp(22px, 4vw, 30px); letter-spacing: -0.02em; }
.not-found-message { max-width: 34em; margin: 0 auto 34px; color: var(--text); font-size: clamp(17px, 2.4vw, 20px); line-height: 1.55; }
.not-found-message a { color: var(--accent-2); }
.not-found .doc-related { margin-top: 0; }
.not-found .doc-related ul { display: flex; flex-wrap: wrap; justify-content: center; }
.not-found .doc-related a { padding: 10px 18px; }

/* ---------- sign-in list ---------- */

.auth-panel { width: min(400px, calc(100% - 32px)); }

.auth-lead {
  margin: -6px 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.auth-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-method {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface-2);
  transition: border-color 0.2s, background 0.2s;
}

.auth-method[hidden] { display: none; }
.auth-method:hover, .auth-method.open { border-color: rgba(255, 255, 255, 0.3); }
.auth-method.open { background: var(--surface-3); }

.method-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.method-name { flex: 1; }

.method-icon {
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.method-icon svg { width: 18px; height: 18px; }
.method-icon.mail { background: #5b6472; }
.method-icon.google { background: #fff; color: #4285f4; font-size: 18px; }
.method-icon.yandex { background: #fc3f1d; }
.method-icon.yandex::before { content: "Я"; }
.method-icon.vk { background: #0077ff; font-size: 13px; letter-spacing: -0.02em; }
.method-icon.telegram { background: #229ed9; }

.method-chevron {
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.auth-method.open .method-chevron { transform: rotate(-135deg) translate(-2px, -2px); }

/* The body grows from zero height, so the rows below it slide down. */
.method-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.auth-method.open .method-body { grid-template-rows: 1fr; }

.method-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 16px;
  opacity: 0;
  transition: opacity 0.2s ease, padding 0.3s ease;
}

.auth-method.open .method-inner { padding: 0 16px 16px; opacity: 1; }

.method-inner label:first-child { margin-top: 0; }
.method-hint { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.method-hint a { color: var(--accent-2); font-weight: 700; }
.method-inner .auth-actions { margin-top: 14px; }

.auth-method:not(.open) .method-inner * { visibility: hidden; }

#tg-code {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-align: center;
}

.auth-panel .auth-actions #tg-confirm,
.api-token .auth-actions .api-primary {
  border-color: transparent;
  background: var(--ink);
  color: var(--bg);
}
.api-token .auth-actions .api-primary:hover { background: #fff; }

/* ---------- AI chat ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.chat-dialog {
  width: min(760px, calc(100% - 24px));
  height: min(82vh, 780px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
}

.chat-dialog[open] {
  display: flex;
  flex-direction: column;
}

.chat-dialog::backdrop {
  background: rgba(5, 6, 8, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.chat-badge {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(160deg, #ff6e48, #e5441f);
  color: #fff;
}

.chat-badge svg { width: 22px; height: 22px; }
.chat-title { flex: 1; min-width: 0; }
.chat-title h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.chat-title p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.chat-log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: auto;
  max-width: 420px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.chat-empty strong { color: var(--ink); font-size: 17px; }

.chat-row { display: flex; flex-direction: column; gap: 8px; max-width: 88%; }
.chat-row.from-user { align-self: flex-end; align-items: flex-end; }
.chat-row.from-ai { align-self: flex-start; align-items: flex-start; }

.chat-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.from-user .chat-bubble {
  border-bottom-right-radius: 6px;
  background: linear-gradient(160deg, #ff6e48, #e5441f);
  color: #fff;
}

.from-ai .chat-bubble {
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
  background: var(--surface-3);
  color: var(--ink);
}

.chat-typing { display: inline-flex; gap: 5px; padding: 16px 18px; }

.chat-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: chat-dot 1s ease-in-out infinite;
}

.chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.chat-typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-dot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-4px); }
}

.chat-downloads { display: flex; flex-wrap: wrap; gap: 6px; }

.chat-downloads button {
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.chat-downloads button:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.35); }

.chat-presets {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 12px 20px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  scrollbar-width: thin;
}

.chat-presets button {
  flex: 0 0 auto;
  max-width: 260px;
  padding: 8px 14px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

/* With no messages yet every template is visible at once. */
.chat-dialog:not(.has-messages) .chat-presets {
  flex-wrap: wrap;
  overflow: visible;
}

.chat-dialog:not(.has-messages) .chat-presets button {
  max-width: 100%;
  overflow: visible;
  text-align: left;
  white-space: normal;
}

.chat-presets button:hover { border-color: rgba(255, 90, 54, 0.6); background: var(--accent-soft); }

.chat-form {
  display: flex;
  gap: 10px;
  padding: 0 20px 16px;
}

.chat-form input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.chat-form input:focus { outline: 3px solid rgba(255, 90, 54, 0.25); border-color: var(--accent); }

.chat-send {
  display: grid;
  flex: 0 0 50px;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(160deg, #ff6e48, #e5441f);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s;
}

.chat-send:hover { transform: scale(1.06); }
.chat-send svg { width: 22px; height: 22px; }

.chat-dialog .auth-error { margin: -8px 20px 14px; min-height: 0; }
.chat-dialog .auth-error:empty { display: none; }

@media (max-width: 560px) {
  .chat-dialog { width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 0; }
}

.admin-account { max-width: 760px; margin-inline: auto; }
.admin-account .note { text-align: center; }
.admin-account code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); font-size: 0.92em; }

.account-search { display: flex; gap: 10px; margin: 18px 0 8px; }
.account-search input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 11px 18px;
}

.account-primary {
  font: inherit;
  font-weight: 700;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 11px 26px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.account-primary:disabled { opacity: 0.4; cursor: default; }

.account-card {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
}
.account-card[hidden] { display: none; }

.account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.account-name { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; word-break: break-all; text-align: left; }
.account-meta { margin: 4px 0 0; font-size: 13px; color: var(--muted); text-align: left; }

.account-chip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.account-chip[data-on="1"] { color: #86efac; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.35); }

.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
@media (max-width: 640px) { .account-grid { grid-template-columns: minmax(0, 1fr); } }

.account-tile { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.account-tile label { display: block; margin: 0 0 8px; font-size: 13px; color: var(--muted); }

.account-field {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
}
.account-field:focus-within { border-color: var(--accent-2); }
.account-field input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  padding: 4px 0;
}
.account-field span { color: var(--muted); font-size: 15px; }

.account-was { margin: 8px 0 10px; font-size: 13px; color: var(--muted); text-align: left; }
.account-was b { color: var(--text); }

.account-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.account-quick button {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.account-quick button:hover { background: rgba(255, 255, 255, 0.12); }

.account-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.account-saved { margin: 0; font-size: 14px; color: var(--muted); text-align: left; }

.admin-comments .note { text-align: center; }
.cm-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0; }
.cm-filter {
  font: inherit; font-size: 13px; color: var(--muted); cursor: pointer;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong);
}
.cm-filter[aria-pressed="true"] { color: var(--ink); background: var(--accent-soft); border-color: var(--accent); }

.cm-list { display: grid; gap: 14px; }
.cm-thread { display: grid; gap: 8px; }
.cm-card {
  padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
  border-radius: 16px; background: var(--surface);
}
.cm-card[data-tone="positive"] { border-left-color: #34d399; }
.cm-card[data-tone="negative"] { border-left-color: #f87171; }
.cm-card[data-tone="neutral"] { border-left-color: #94a3b8; }
.cm-card.is-reply { margin-left: 28px; background: var(--surface-2); border-left-color: var(--cool); }

.cm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 13px; color: var(--muted); }
.cm-head b { color: var(--ink); font-size: 14px; word-break: break-all; }
.cm-id { margin-left: auto; opacity: 0.6; }
.cm-body { margin: 10px 0 12px; line-height: 1.5; color: var(--text); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }

.cm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cm-tones { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-tone, .cm-cancel {
  font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong);
}
.cm-tone[aria-pressed="true"][data-tone="positive"] { background: rgba(52, 211, 153, 0.18); border-color: #34d399; color: #86efac; }
.cm-tone[aria-pressed="true"][data-tone="negative"] { background: rgba(248, 113, 113, 0.18); border-color: #f87171; color: #fca5a5; }
.cm-tone[aria-pressed="true"][data-tone="neutral"] { background: rgba(148, 163, 184, 0.2); border-color: #94a3b8; color: #cbd5e1; }

.cm-remove { display: flex; align-items: center; }
.cm-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--danger); }
.cm-confirm[hidden] { display: none; }
.cm-delete {
  font: inherit; font-size: 13px; cursor: pointer; padding: 5px 14px; border-radius: 999px;
  color: #fca5a5; background: transparent; border: 1px solid rgba(248, 113, 113, 0.5);
}
.cm-delete:hover { background: rgba(248, 113, 113, 0.12); }
.cm-delete.is-sure { color: #fff; background: #dc2626; border-color: #dc2626; }
.cm-delete:disabled { opacity: 0.5; cursor: wait; }

.account-plans { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.account-plans li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px;
  padding: 8px 12px; border-radius: 12px; font-size: 13px; color: #86efac;
  background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.3);
}
.account-plans li b { color: var(--ink); }
.account-plans li.is-none { color: var(--muted); background: rgba(255, 255, 255, 0.04); border-color: var(--line); }
.account-end {
  font: inherit; font-size: 12px; cursor: pointer; padding: 3px 10px; border-radius: 999px;
  color: #fca5a5; background: transparent; border: 1px solid rgba(248, 113, 113, 0.5);
}
.account-end[data-sure="1"] { color: #fff; background: #dc2626; border-color: #dc2626; }

.account-plan-pick { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); }
.account-plan-pick button {
  flex: 1 1 40%; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 7px 10px;
  border-radius: 999px; border: 0; color: var(--muted); background: transparent;
}
.account-plan-pick button[aria-checked="true"] { color: var(--ink); background: var(--surface-3); box-shadow: 0 0 0 1px var(--line-strong); }

.account-tile .account-primary { width: 100%; margin-top: 14px; }
.account-saved { margin: 14px 0 0; min-height: 1.2em; font-size: 14px; color: #86efac; text-align: center; }

.entry-paths{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:20px 0}.entry-paths .note{flex-basis:100%;max-width:720px;margin:0 auto}.entry-paths [href]{white-space:normal;text-align:center}