/* Pocket Shot — светлое матовое стекло на голубо-лавандовом градиенте, кораловые акценты. */
:root {
  --ink: #272a68;
  --ink-2: #565c9e;
  --ink-3: #8a8fc4;
  --glass: rgba(255, 255, 255, 0.38);
  --glass-strong: rgba(255, 255, 255, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 10px 30px rgba(70, 72, 170, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --coral: #ff6f8e;
  --coral-2: #ff9a7b;
  --coral-grad: linear-gradient(135deg, #ff6f8e, #ff9a7b);
  --cyan: #5fd8f5;
  --violet: #8a7cf0;
  --ok: #2fae8a;
  --warn: #e0647f;
  --amber: #e79a3c;
  --radius: 22px;
  --radius-sm: 14px;
  --tabs-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  font-family: "Manrope", "SF Pro Rounded", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100dvh;
  background:
    radial-gradient(120% 60% at 0% 0%, #8fd3ff 0%, transparent 55%),
    radial-gradient(90% 60% at 100% 30%, #d9b6f5 0%, transparent 60%),
    radial-gradient(100% 70% at 30% 100%, #a39bf2 0%, transparent 60%),
    linear-gradient(160deg, #9fc4ff 0%, #b6b4f6 45%, #c9a8ee 100%);
  background-attachment: fixed;
  overscroll-behavior-y: none;
}
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.pad { padding: 24px 4px; }
.boot { padding: 40vh 0 0; text-align: center; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); }

/* ---------- стекло ---------- */
.glass, .hero, .card, .group, .queue-line, .tabs, .update, .toast, .filters, .next, .sheet, .storage, .onboard {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

/* ---------- раскладка ---------- */
.view {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(16px + var(--safe-t)) 16px calc(var(--tabs-h) + 28px + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 14px;
  outline: none;
}
.top { display: flex; align-items: flex-end; justify-content: space-between; padding: 6px 4px 2px; }
.top h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--ink-2); text-transform: lowercase; margin-bottom: 2px; }
.eyebrow::first-letter { text-transform: uppercase; }
.top-side { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.top-side .net { margin-bottom: 0; }
.app-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .45); border: 1px solid var(--glass-edge); box-shadow: 0 4px 14px rgba(70, 72, 170, .12); }
.app-switch > * { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; text-decoration: none; color: var(--ink-2); line-height: 1.2; }
.app-switch .on { background: var(--ink); color: #fff; }
.app-switch a:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.net { width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(95, 216, 245, .25), 0 0 14px var(--cyan); margin-bottom: 10px; }
.net.off { background: var(--warn); box-shadow: 0 0 0 4px rgba(224, 100, 127, .2); }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--glass-edge);
  background: var(--glass-strong); font-weight: 700; text-decoration: none; font-size: 15px;
  box-shadow: 0 4px 14px rgba(70, 72, 170, .12);
}
.btn.primary { background: var(--coral-grad); color: #fff; border-color: rgba(255, 255, 255, .5); box-shadow: 0 8px 22px rgba(255, 111, 142, .4); }
.btn.ghost { background: rgba(255, 255, 255, .25); }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn.danger { color: var(--warn); }
.btn:active, .round:active, .shoot:active { transform: scale(.97); }

/* ---------- Сегодня ---------- */
.hero { border-radius: var(--radius); padding: 0 18px 18px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.hero::before {
  content: ""; display: block; margin: 0 -18px 4px; height: 150px;
  background: url("../img/mountains.svg") center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}
.hero.empty::before { height: 120px; opacity: .8; }
.hero.empty { padding-bottom: 22px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tag {
  padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--violet);
  font-weight: 800; font-size: 12px; letter-spacing: .02em; border: 1px solid #fff;
}
.flag { color: var(--coral); }
.hook { font-size: 24px; line-height: 1.22; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.topic { color: var(--ink-2); font-size: 15px; line-height: 1.4; }
.facts { margin: 4px 0 0; display: grid; gap: 8px; }
.facts div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .42); border: 1px solid rgba(255, 255, 255, .6); }
.facts div.warn { background: rgba(255, 154, 123, .2); }
.facts dt { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.facts dd { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 600; }
.shoot {
  margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 64px; border-radius: 999px; background: var(--coral-grad); color: #fff;
  font-size: 20px; font-weight: 800; text-decoration: none; letter-spacing: .01em;
  box-shadow: 0 12px 30px rgba(255, 111, 142, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.shoot .dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .3); }

.queue-line {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: 14px;
}
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(255, 111, 142, .6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(255, 111, 142, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 111, 142, 0); } }

.next { border-radius: var(--radius); padding: 14px 16px; }
.next h3, .group h3 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-bottom: 8px; }
.group h3 span { color: var(--ink-3); }
.next ul { list-style: none; margin: 0; padding: 0; }
.next li + li { border-top: 1px solid rgba(255, 255, 255, .6); }
.next a { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 10px 0; text-decoration: none; }
.when { font-size: 13px; color: var(--ink-3); font-weight: 700; }
.what { font-weight: 600; line-height: 1.3; }

/* ---------- Сценарии ---------- */
.filters { border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chip { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .3); font-weight: 700; font-size: 13px; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.selects { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.select select, .field select {
  width: 100%; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--glass-edge);
  background: rgba(255, 255, 255, .55); font-weight: 600; font-size: 14px;
}

.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-count { font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 0 4px; }
.card {
  position: relative; border-radius: var(--radius); padding: 18px; touch-action: pan-y; user-select: none;
  display: flex; flex-direction: column; gap: 10px; background: var(--glass-strong); max-height: 58vh; overflow: hidden;
}
.card h2 { font-size: 21px; line-height: 1.25; font-weight: 800; }
.card-text { overflow-y: auto; font-size: 15px; line-height: 1.5; color: var(--ink); padding-right: 4px; }
.card-text p + p { margin-top: 8px; }
.stamp {
  position: absolute; top: 18px; padding: 6px 12px; border-radius: 10px; font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: .06em; opacity: 0; transition: opacity .12s; pointer-events: none;
}
.stamp.yes { right: 18px; color: var(--ok); border: 2px solid var(--ok); background: rgba(255, 255, 255, .8); }
.stamp.no { left: 18px; color: var(--warn); border: 2px solid var(--warn); background: rgba(255, 255, 255, .8); }
.card.to-yes .stamp.yes, .card.to-no .stamp.no { opacity: 1; }
.decide { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; }
.hint { font-size: 12px; color: var(--ink-2); text-align: center; font-weight: 600; }
.round {
  flex: none; width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--glass-edge);
  font-size: 24px; font-weight: 800; background: var(--glass-strong); box-shadow: var(--glass-shadow);
}
.round.yes { background: linear-gradient(135deg, #5fd8f5, #7f9cf5); color: #fff; box-shadow: 0 10px 24px rgba(95, 216, 245, .45); }
.round.no { color: var(--warn); }

.group { border-radius: var(--radius); padding: 14px 16px; }
.row { border-top: 1px solid rgba(255, 255, 255, .6); }
.group h3 + .row, .group .muted + .row { border-top: 0; }
.row summary { list-style: none; display: flex; flex-direction: column; gap: 4px; padding: 12px 0; cursor: pointer; }
.row summary::-webkit-details-marker { display: none; }
.row-title { font-weight: 700; line-height: 1.3; }
.status { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.s-approved { color: var(--violet); }
.s-ready, .s-scheduled { color: var(--ok); }
.s-rejected { color: var(--warn); }
.row-body { padding: 0 0 14px; font-size: 15px; line-height: 1.5; }
.row-body p + p { margin-top: 8px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ---------- Очередь ---------- */
.storage { border-radius: var(--radius); padding: 12px 16px; }
.group .storage { background: rgba(255, 255, 255, .35); box-shadow: none; margin-bottom: 10px; }
.storage-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.storage-line .ok { color: var(--ok); }
.storage-line .warn { color: var(--warn); }
.bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .55); overflow: hidden; margin-top: 8px; }
.bar.thin { height: 6px; margin: 0; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--coral)); transition: width .3s; }
.queue { list-style: none; margin: 8px 0 0; padding: 0; }
.qrow { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .6); }
.qrow:first-child { border-top: 0; }
.qhead { display: flex; justify-content: space-between; gap: 10px; }
.qtitle { font-weight: 700; line-height: 1.3; }
.qmeta { flex: none; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.qstate { display: flex; justify-content: space-between; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--violet); }
.q-recorded .qlabel { color: var(--amber); }
.q-done .qlabel { color: var(--ok); }
.qerr { margin-top: 6px; font-size: 13px; color: var(--warn); }

/* ---------- Настройки ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; font-weight: 700; font-size: 14px; }
.field.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 600; }
.field.check input { width: 20px; height: 20px; accent-color: var(--coral); }
.grid { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.grid li { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .4); font-weight: 600; font-size: 14px; }
.grid b { color: var(--coral); }

/* ---------- Волшебная палочка ---------- */
.wand {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius);
  text-decoration: none; color: #fff; overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, #7d6cf0 0%, #5fb8f5 55%, #ff8fb0 100%);
  box-shadow: 0 12px 30px rgba(125, 108, 240, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.wand::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-100%); animation: shimmer 3.2s ease-in-out infinite;
}
.wand svg { flex: none; width: 46px; height: 46px; padding: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22);
  fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wand svg .fill { fill: #fff; stroke: none; }
.wand span { display: flex; flex-direction: column; gap: 2px; }
.wand b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.wand small { font-size: 13px; opacity: .9; font-weight: 600; }
.wand:active { transform: scale(.98); }
@keyframes shimmer { 0%, 40% { transform: translateX(-100%); } 80%, 100% { transform: translateX(100%); } }

.gen-kinds { padding: 0 2px; }
.conjure { border-radius: var(--radius); padding: 30px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.spark svg { width: 64px; height: 64px; fill: none; stroke: var(--violet); stroke-width: 1.6; stroke-linecap: round; animation: wave 1.4s ease-in-out infinite; transform-origin: 20% 80%; }
.spark svg .fill { fill: var(--coral); stroke: none; animation: twinkle 1.4s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.gen-form .small, .muted.small { font-size: 13px; }
.gen-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field textarea.text, .field select { width: 100%; }
.field textarea.text {
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .6);
  font: inherit; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink); outline: none; resize: vertical;
}
.field textarea.text:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(138, 124, 240, .2); }
.gen-text { min-height: 40vh; overflow: hidden; }
.gen-actions { display: flex; flex-direction: column; gap: 6px; }
.gen-actions .row-actions { margin-top: 4px; }
#gen-next { min-height: 18px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .wand::after, .spark svg, .spark svg .fill { animation: none; } }

/* ---------- Почерк автора ---------- */
.voices { list-style: none; margin: 4px 0 12px; padding: 0; }
.voices li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .6); }
.voices li:first-child { border-top: 0; }
.voices a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.voices .status b { color: var(--ok); }
.switch { flex: none; position: relative; width: 46px; height: 28px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, .55); border: 1px solid var(--glass-edge); transition: background .15s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(70, 72, 170, .25); transition: transform .15s; }
.switch input:checked + i { background: var(--coral-grad); border-color: rgba(255, 255, 255, .5); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { box-shadow: 0 0 0 4px rgba(138, 124, 240, .3); }

.editor { display: flex; flex-direction: column; }
.field input.text {
  height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--glass-edge);
  background: rgba(255, 255, 255, .6); font-size: 16px; font-weight: 600; outline: none;
}
.field input.text:focus, .md-input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(138, 124, 240, .2); }
.md-bar {
  position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 -8px 8px; padding: 8px; border-radius: 16px; background: rgba(236, 238, 255, .85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .5); border: 1px solid var(--glass-edge); }
.seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font-weight: 700; font-size: 13px; color: var(--ink-2); }
.seg button.on { background: var(--ink); color: #fff; }
.md-tools { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.md-tools[hidden] { display: none; }
.md-tools button {
  flex: none; height: 32px; min-width: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--glass-edge);
  background: rgba(255, 255, 255, .5); font-size: 13px; font-weight: 700;
}
.md-tools button:active { transform: scale(.95); }
.md-input {
  width: 100%; min-height: 50vh; padding: 14px; border-radius: 14px; border: 1px solid var(--glass-edge);
  background: rgba(255, 255, 255, .62); color: var(--ink); outline: none; resize: vertical; overflow: hidden;
  font: 14px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; tab-size: 2;
}
.md-input[hidden] { display: none; }
.md-preview { padding: 6px 4px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.md-preview[hidden] { display: none; }
.md-preview > * + * { margin-top: 10px; }
.md-preview h1 { font-size: 22px; line-height: 1.25; }
.md-preview h2 { font-size: 18px; margin-top: 20px; }
.md-preview h3 { font-size: 16px; margin-top: 16px; }
.md-preview ul, .md-preview ol { padding-left: 22px; }
.md-preview li + li { margin-top: 4px; }
.md-preview blockquote { padding: 8px 12px; border-left: 3px solid var(--violet); border-radius: 0 10px 10px 0; background: rgba(255, 255, 255, .45); color: var(--ink-2); }
.md-preview code { padding: 1px 5px; border-radius: 6px; background: rgba(255, 255, 255, .6); font: 13px ui-monospace, Menlo, monospace; }
.md-preview pre { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .55); overflow-x: auto; }
.md-preview pre code { padding: 0; background: none; }
.md-preview table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 13px; }
.md-preview th, .md-preview td { min-width: 7.5em; overflow-wrap: normal; padding: 6px 8px; border: 1px solid rgba(255, 255, 255, .8); text-align: left; vertical-align: top; }
.md-preview th { background: rgba(255, 255, 255, .55); }
.md-preview hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .8); }
.md-preview a { color: var(--violet); }
.editor-actions { margin-top: 12px; }

/* ---------- таб-бар ---------- */
.tabs {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); z-index: 10;
  max-width: 536px; margin: 0 auto; height: var(--tabs-h); border-radius: 26px;
  display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; background: rgba(255, 255, 255, .5);
}
.tabs[hidden] { display: none; }
.tabs a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 20px; font-size: 11px; font-weight: 700; text-decoration: none; color: var(--ink-2);
}
.tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabs svg .fill { fill: currentColor; stroke: none; }
.tabs a.active { color: var(--ink); background: rgba(255, 255, 255, .75); box-shadow: 0 4px 14px rgba(70, 72, 170, .14); }
.tabs a.active svg { stroke: var(--coral); }
.tabs a.active svg .fill { fill: var(--coral); }
.tabs b {
  position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--coral-grad); color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}

.update {
  position: fixed; left: 16px; right: 16px; top: calc(12px + var(--safe-t)); z-index: 30; max-width: 528px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 18px;
  border-radius: 999px; font-weight: 700; background: rgba(255, 255, 255, .7);
}
.update[hidden] { display: none; }
.update button { border: 0; border-radius: 999px; height: 38px; padding: 0 16px; background: var(--coral-grad); color: #fff; font-weight: 800; }
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabs-h) + 22px + var(--safe-b)); z-index: 40;
  max-width: 528px; margin: 0 auto; padding: 12px 16px; border-radius: 16px; font-weight: 700; font-size: 14px;
  background: rgba(39, 42, 104, .82); color: #fff; border-color: rgba(255, 255, 255, .25);
}
.toast[hidden] { display: none; }
.toast-ok { background: rgba(37, 140, 115, .85); }
.toast-warn { background: rgba(196, 70, 101, .9); }
.fullscreen .toast { bottom: calc(150px + var(--safe-b)); }

/* ---------- привязка ---------- */
.onboard { margin-top: 12vh; border-radius: 28px; padding: 28px 22px; display: flex; flex-direction: column; gap: 14px; text-align: center; align-items: center; }
.onboard h1 { font-size: 30px; font-weight: 800; }
.onboard p { line-height: 1.45; }
.logo {
  width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, .3) 60%), linear-gradient(135deg, var(--cyan), var(--violet));
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .35), 0 14px 34px rgba(95, 216, 245, .5);
}
.logo span { width: 30px; height: 30px; border-radius: 50%; background: var(--coral-grad); box-shadow: 0 0 18px rgba(255, 111, 142, .7); }

/* ---------- вход ---------- */
.login { max-width: 400px; width: 100%; margin-left: auto; margin-right: auto; text-align: left; align-items: stretch; }
.login .logo, .login h1 { align-self: center; }
.login > .muted { text-align: center; }
.input { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.input input {
  height: 50px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--glass-edge);
  background: rgba(255, 255, 255, .6); font-size: 17px; font-weight: 600; color: var(--ink);
  box-shadow: inset 0 1px 3px rgba(70, 72, 170, .08); outline: none; transition: border-color .15s, box-shadow .15s;
}
.input input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(138, 124, 240, .2); }
.btn.wide { width: 100%; min-height: 54px; font-size: 17px; margin-top: 4px; }
.form-error { padding: 10px 14px; border-radius: 14px; background: rgba(224, 100, 127, .14); color: #b8304f; font-weight: 700; font-size: 14px; }

/* ---------- Суфлёр и запись ---------- */
.fullscreen .view { max-width: none; padding: 0; }
.rec { position: fixed; inset: 0; background: #1a1b3a; color: #fff; overflow: hidden; }
.rec video#cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rec video.mirror { transform: scaleX(-1); }
.rec.voice video#cam { opacity: .35; filter: blur(6px); }
.cam-error { position: absolute; inset: 30% 24px auto; z-index: 5; padding: 18px; border-radius: var(--radius); text-align: center; display: grid; gap: 12px; background: rgba(39, 42, 104, .7); backdrop-filter: blur(16px); }
.cam-error[hidden] { display: none; }

.prompter {
  position: absolute; left: 12px; right: 12px; top: calc(64px + var(--safe-t)); height: 40vh; z-index: 2;
  overflow: hidden; border-radius: var(--radius); touch-action: none;
  background: rgba(30, 32, 84, .42); border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(transparent 0, #000 8%, #000 80%, transparent);
  mask-image: linear-gradient(transparent 0, #000 8%, #000 80%, transparent);
}
.prompter-text { padding: 22px 20px 50vh; font-weight: 700; line-height: 1.38; will-change: transform; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.prompter-text p + p { margin-top: .7em; }
.p-hook { color: #ffd1dc; }
.p-end { color: rgba(255, 255, 255, .5); text-align: center; font-size: .6em; }

.rec-top {
  position: absolute; top: calc(10px + var(--safe-t)); left: 12px; right: 12px; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
}
.icon {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); font-size: 18px;
  background: rgba(255, 255, 255, .2); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.icon.small { width: 38px; height: 38px; font-size: 14px; color: var(--ink); background: rgba(255, 255, 255, .55); }
.timer {
  padding: 8px 14px; border-radius: 999px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .45); backdrop-filter: blur(12px);
}
.recording .timer { background: var(--coral-grad); border-color: transparent; }
.timer.over { background: #c4304f !important; }

.countdown {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  font-size: 140px; font-weight: 800; color: #fff; text-shadow: 0 0 40px rgba(255, 111, 142, .8);
  background: rgba(30, 32, 84, .25);
}
.countdown[hidden] { display: none; }
.countdown.beat { animation: beat .85s ease-out; }
@keyframes beat { from { transform: scale(1.4); opacity: .2; } 30% { opacity: 1; } to { transform: scale(.9); opacity: .6; } }

.rec-controls {
  position: absolute; left: 12px; right: 12px; bottom: calc(16px + var(--safe-b)); z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
}
.adj {
  justify-self: center; display: grid; grid-template-columns: 40px auto 40px; align-items: center; gap: 2px;
  padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 10px; font-weight: 700; text-align: center;
}
.adj button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .25); color: #fff; font-weight: 800; }
.adj span { min-width: 40px; }
.recbtn {
  position: relative; width: 92px; height: 92px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7);
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .7), rgba(255, 255, 255, .15) 60%), rgba(95, 216, 245, .35);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .18), 0 0 30px rgba(95, 216, 245, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.recbtn::after {
  content: ""; position: absolute; inset: 22px; border-radius: 50%; background: var(--coral-grad);
  box-shadow: 0 0 20px rgba(255, 111, 142, .8); transition: inset .2s, border-radius .2s;
}
.recording .recbtn::after { inset: 30px; border-radius: 10px; }
.recording .recbtn { box-shadow: 0 0 0 8px rgba(255, 111, 142, .3), 0 0 40px rgba(255, 111, 142, .7); }
.recording .rec-top .icon#flip, .recording .adj { opacity: .45; }

.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; max-height: 78vh; overflow-y: auto;
  padding: 18px 16px calc(18px + var(--safe-b)); border-radius: 28px 28px 0 0; color: var(--ink);
  background: rgba(240, 240, 255, .8);
}
.sheet[hidden] { display: none; }
.sheet h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.takes { list-style: none; margin: 0 0 10px; padding: 0; }
.takes li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .7); }
.takes li:first-child { border-top: 0; }
.takes label { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.takes input { width: 20px; height: 20px; accent-color: var(--coral); }
.sheet-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 12px; }
.player { margin-top: 12px; display: grid; gap: 8px; }
.player[hidden] { display: none; }
.player video { width: 100%; max-height: 50vh; border-radius: 16px; background: #000; }

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