/* ===== Токены из дизайна (Claude Design, v1) ===== */
:root {
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --ease-out: cubic-bezier(.2,.8,.2,1); --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 600ms;
  --header-h: 56px; --sidebar-w: 272px;
}
:root, [data-theme="light"] {
  --bg:#f6f6f7; --panel:#ffffff; --panel-2:#f0f0f2; --field:#ffffff; --text:#17171c; --text-2:#5d5d68;
  --line:#e5e5e9; --line-strong:#cfcfd6; --accent:#5145e5; --accent-hover:#4337d1; --accent-soft:#ecebfd;
  --accent-text:#4338ca; --on-accent:#ffffff; --ok:#167a43; --ok-soft:#e5f4eb; --on-ok:#ffffff; --run:#5145e5;
  --run-soft:#ecebfd; --err:#c4302b; --err-soft:#fdecea; --warn:#8f5a00; --warn-soft:#fdf2dc; --ph-a:#ececef;
  --ph-b:#e3e3e8; --shimmer:rgba(255,255,255,.6); --overlay:rgba(14,14,18,.45);
  --shadow-1:0 1px 2px rgba(16,16,24,.06); --shadow-2:0 4px 16px rgba(16,16,24,.08),0 1px 3px rgba(16,16,24,.06);
  --shadow-3:0 24px 64px rgba(16,16,24,.18),0 4px 12px rgba(16,16,24,.08);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg:#0d0d10; --panel:#15151a; --panel-2:#1c1c22; --field:#111115; --text:#ececf1; --text-2:#a2a2ad;
  --line:#26262d; --line-strong:#383841; --accent:#8c84ff; --accent-hover:#a19aff; --accent-soft:#232046;
  --accent-text:#aaa4ff; --on-accent:#0d0d10; --ok:#4fcb85; --ok-soft:#12271b; --on-ok:#0d0d10; --run:#8c84ff;
  --run-soft:#232046; --err:#ff7b72; --err-soft:#331614; --warn:#f2b552; --warn-soft:#2e2310; --ph-a:#1f1f26;
  --ph-b:#19191f; --shimmer:rgba(255,255,255,.07); --overlay:rgba(0,0,0,.62);
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 16px rgba(0,0,0,.4); --shadow-3:0 24px 64px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ===== Анимации ===== */
@keyframes shimmer{0%{background-position:150% 0}100%{background-position:-50% 0}}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes drawerIn{from{transform:translateX(-100%)}to{transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes toastDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes breathe{0%,100%{box-shadow:0 0 0 4px var(--accent-soft),var(--shadow-2)}50%{box-shadow:0 0 0 8px var(--accent-soft),0 8px 32px color-mix(in srgb,var(--accent) 22%,transparent)}}
@keyframes stripes{from{background-position:0 0}to{background-position:24px 0}}
@keyframes viewIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes scan{0%{top:-30%}100%{top:110%}}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes develop{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}

/* ===== База ===== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* «Только мои фото»: прячем всё, что относится к генерации фото. */
.own-only { display: none !important; }
.own-photos .own-only { display: flex !important; }
.own-photos .ai-only { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 15px/1.55 var(--font); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono { font-family: var(--mono); }
.muted { color: var(--text-2); }
.spacer { flex: 1; }
.row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* ===== Кнопки ===== */
.btn { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--panel); color: var(--text);
  font: 600 14px/1 var(--font); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-2), box-shadow var(--dur-2), color var(--dur-2), border-color var(--dur-2); }
.btn:hover { background: var(--panel-2); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--accent); }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 700; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--text-2); padding: 0 12px; }
.btn.quiet:hover { background: var(--panel-2); color: var(--text); }
.btn.danger { border-color: transparent; background: var(--err-soft); color: var(--err); }
.btn.danger-quiet { border-color: transparent; background: transparent; color: var(--err); }
.btn.danger-quiet:hover { background: var(--err-soft); }
.btn.ok { background: var(--ok); border-color: transparent; color: var(--on-ok); }
.btn.big { height: 52px; padding: 0 24px; font-size: 16px; }
.btn.sm { height: 32px; padding: 0 10px; font-size: 12.5px; border-radius: var(--r-sm); gap: 6px; }
.btn.icon { width: 40px; padding: 0; color: var(--text-2); }
.btn.icon.sm { width: 32px; }
.btn.wide { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--panel-2); border-color: var(--line); color: var(--text-2); cursor: default; transform: none; opacity: .75; }

/* ===== Поля ===== */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > .lbl, .lbl { font: 600 13px/1.3 var(--font); display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.lbl .muted { font-weight: 500; }
.input, select.input, textarea.input {
  width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--field); color: var(--text); font: 500 14.5px/1.45 var(--font); outline: none;
  transition: border-color var(--dur-2), box-shadow var(--dur-2); }
select.input { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8a95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
textarea.input { resize: vertical; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input.err { border-color: var(--err); }
.input::placeholder { color: var(--text-2); opacity: .8; }
.hint { font: 500 12.5px/1.45 var(--font); color: var(--text-2); }
.hint.ok { color: var(--ok); } .hint.bad { color: var(--err); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

.stepper { display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--field); overflow: hidden; flex: none; }
.stepper button { width: 32px; height: 100%; border: 0; background: transparent; color: var(--text-2); cursor: pointer; font: 600 16px/1 var(--font); }
.stepper button:hover { background: var(--panel-2); color: var(--text); }
.stepper input { width: 40px; height: 100%; border: 0; background: transparent; text-align: center; font: 600 14px/1 var(--mono); outline: none; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.seg { display: flex; gap: 2px; padding: 3px; background: var(--panel-2); border-radius: var(--r-md); }
.seg > button { flex: 1; min-height: 34px; padding: 6px 12px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent;
  color: var(--text-2); font: 600 13px/1.25 var(--font); cursor: pointer; text-align: left; transition: background var(--dur-2), color var(--dur-2), box-shadow var(--dur-2); }
.seg > button small { display: block; font: 600 11px/1.3 var(--font); margin-top: 2px; }
.seg > button small.ok { color: var(--ok); } .seg > button small.bad { color: var(--warn); }
.seg > button.on { background: var(--panel); color: var(--text); border-color: var(--accent); box-shadow: var(--shadow-1); }
.seg.center > button { text-align: center; }

.check { display: flex; align-items: center; gap: 10px; font: 600 14px/1.3 var(--font); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.radio { display: flex; align-items: center; gap: 10px; font: 500 14px/1.3 var(--font); cursor: pointer; }
.radio input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.switch { position: relative; width: 40px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background var(--dur-2); }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease-spring); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(16px); }
input[type=range] { width: 100%; accent-color: var(--accent); }

.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 12px/1 var(--font); background: var(--accent-soft); color: var(--accent-text); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge:empty { display: none; }

/* ===== Каркас ===== */
.topbar { position: sticky; top: 0; z-index: 30; height: var(--header-h); display: flex; align-items: center; gap: 12px; padding: 0 20px;
  background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font: 700 15px/1 var(--font); color: var(--text); white-space: nowrap; }
.logo { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; flex: none; }
.logo::before { content: ""; width: 9px; height: 14px; border: 2px solid var(--on-accent); border-radius: 3px; }
.balance { font: 500 13px/1 var(--font); color: var(--text-2); white-space: nowrap; }
.balance b { font: 600 13px/1 var(--mono); color: var(--text); }
#menuBtn { display: none; }

.layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: calc(100vh - var(--header-h)); }
.sidebar { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: auto; padding: 16px 12px;
  border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 12px; }
.drawer-head, .drawer-foot { display: none; }
.project-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.project-list li { padding: 10px 12px; border-radius: var(--r-md); cursor: pointer; transition: background var(--dur-2); }
.project-list li:hover { background: var(--panel-2); }
.project-list li.active { background: var(--accent-soft); }
.project-list li.active .pname { color: var(--accent-text); }
.pname { font: 600 14px/1.3 var(--font); }
.pmeta { font: 500 12px/1.4 var(--mono); color: var(--text-2); margin-top: 2px; }
.scrim { position: fixed; inset: 0; background: var(--overlay); z-index: 39; animation: fadeIn var(--dur-3) both; }

main { padding: 28px 32px 120px; min-width: 0; max-width: 1400px; width: 100%; animation: fadeUp var(--dur-4) var(--ease-out) both; }

.empty { max-width: 460px; margin: 10vh auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.empty h2 { margin: 0; font: 700 24px/1.25 var(--font); letter-spacing: -.01em; }
.empty p { margin: 0; color: var(--text-2); }
.empty-art { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.empty-art span { width: 44px; height: 78px; border-radius: 8px; border: 1.5px solid var(--line-strong); background: var(--panel); animation: float 4s ease-in-out infinite; }
.empty-art span:nth-child(2) { width: 54px; height: 96px; border-color: var(--accent); background: var(--accent-soft); animation-delay: .4s; }
.empty-art span:nth-child(3) { animation-delay: .8s; }

/* ===== Проект ===== */
.project-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.title-input { flex: 1 1 280px; min-width: 0; font: 700 28px/1.2 var(--font); letter-spacing: -.02em; border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; padding: 2px 8px; margin-left: -8px; outline: none; color: var(--text); }
.title-input:hover { border-color: var(--line); }
.title-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.spent { font: 500 13px/1.3 var(--font); color: var(--text-2); }
.spent b { font: 600 13px var(--mono); color: var(--text); }

.steps { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-lg); background: var(--panel-2); margin-bottom: 20px; max-width: 100%; }
.steps button { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; cursor: pointer; text-align: left; color: var(--text-2); transition: background var(--dur-2), color var(--dur-2), box-shadow var(--dur-2); }
.steps button .num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--mono); flex: none; }
.steps button b { display: block; font: 700 13.5px/1.2 var(--font); color: var(--text); }
.steps button small { display: block; font: 500 11.5px/1.3 var(--font); white-space: nowrap; }
.steps .short { display: none; }
.steps button.on { background: var(--panel); box-shadow: var(--shadow-1); border-color: var(--line); }
.steps button.on .num { background: var(--accent); color: var(--on-accent); }
.step-pane { animation: fadeUp var(--dur-3) var(--ease-out) both; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 24px; box-shadow: var(--shadow-1); }
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.card-head h3 { margin: 0; font: 700 19px/1.25 var(--font); }
.saved { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--font); color: var(--ok); }
.saved.pending { color: var(--text-2); }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }

.step1 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.side { position: sticky; top: calc(var(--header-h) + 20px); }

/* редактор фраз с номерами строк и подсветкой длинных */
.phrases { position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--field); transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.phrases:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.phrases .backdrop, .phrases textarea { margin: 0; padding: 10px 12px 10px 36px; font: 500 14.5px/1.6 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; letter-spacing: normal; }
.phrases .backdrop { position: absolute; inset: 0; color: transparent; pointer-events: none; overflow: hidden; border-radius: var(--r-md); }
.phrases .backdrop div { position: relative; min-height: 1.6em; }
.phrases .backdrop div.n::before { content: attr(data-n); position: absolute; left: -26px; width: 18px; text-align: right; font: 500 11px/2.1 var(--mono); color: var(--text-2); }
.phrases .backdrop div.long { background: var(--warn-soft); box-shadow: -36px 0 0 var(--warn-soft), 12px 0 0 var(--warn-soft); }
.phrases textarea { position: relative; display: block; width: 100%; min-height: 220px; border: 0; outline: none; background: transparent; color: var(--text); resize: none; overflow: hidden; }
.warnbox { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); font: 600 13px/1.45 var(--font); }
.errbox { padding: 8px 10px; border-radius: var(--r-sm); background: var(--err-soft); color: var(--err); font: 600 12.5px/1.4 var(--font); }

details.more { border-top: 1px solid var(--line); padding-top: 14px; }
details.more summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; font: 700 14.5px/1.3 var(--font); }
details.more summary::-webkit-details-marker { display: none; }
details.more summary svg { transition: transform var(--dur-2); }
details.more[open] summary svg { transform: rotate(180deg); }
details.more > div { margin-top: 14px; }
.ref { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ref .thumb { width: 48px; height: 64px; border-radius: 6px; flex: none; object-fit: cover;
  background: repeating-linear-gradient(135deg, var(--ph-a) 0 6px, var(--ph-b) 6px 12px); }

/* автопилот */
.autopilot { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-2); }
.autopilot.running { animation: breathe 2.4s ease-in-out infinite; }
.autopilot .ap-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.costbox { padding: 14px 16px; border-radius: var(--r-md); background: var(--panel-2); }
.costbox .big { font: 700 26px/1.1 var(--mono); letter-spacing: -.02em; }
.costbox .big small { font: 600 13px var(--font); color: var(--text-2); letter-spacing: 0; }
.dot-state { display: flex; align-items: center; gap: 8px; font: 600 12.5px/1.3 var(--font); color: var(--text-2); }
.dot-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dot-state.run { color: var(--accent-text); } .dot-state.run::before { animation: pulse 1.2s infinite; }
.dot-state.ok { color: var(--ok); } .dot-state.bad { color: var(--err); }

/* шаг 2 и 3 */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dropzone { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
  cursor: pointer; transition: border-color var(--dur-2), background var(--dur-2); background: var(--panel); }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .dz-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; flex: none; }
.dropzone b { display: block; font: 700 14.5px/1.3 var(--font); }
.split-btn { display: inline-flex; align-items: center; gap: 6px; padding-right: 6px; }
.split-btn .stepper { height: 30px; border-color: transparent; background: color-mix(in srgb, var(--on-accent) 18%, transparent); color: var(--on-accent); }
.split-btn .stepper button, .split-btn .stepper input { color: var(--on-accent); }

.progress-card .bar { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; display: flex; margin-top: 12px; }
.progress-card .bar > span { height: 100%; transition: width var(--dur-4) var(--ease-out); }
.progress-card .bar .ok { background: var(--ok); }
.progress-card .bar .run { background-color: var(--run); background-image: linear-gradient(45deg,rgba(255,255,255,.25) 25%,transparent 25% 50%,rgba(255,255,255,.25) 50% 75%,transparent 75%); background-size: 24px 24px; animation: stripes .8s linear infinite; }
.progress-card .bar .err { background: var(--err); }
.stat { font: 700 14px/1.3 var(--font); }
.stat.run { color: var(--accent-text); } .stat.err { color: var(--err); }
.stat.run::before, .stat.err::before { content: "● "; font-size: 10px; vertical-align: 2px; }

/* ===== Карточки 9:16 ===== */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); margin-top: 18px; }
.item { display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2); }
.item.enter { animation: fadeUp .5s var(--ease-out) both; }
.item:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.item.approved { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.item.failed { border-color: var(--err); }
.media { position: relative; aspect-ratio: 9 / 16; background: var(--panel-2); overflow: hidden; }
.media.clickable { cursor: pointer; }
.media img, .media video.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: develop .7s both; }
.item.rejected .media img { opacity: .45; filter: grayscale(.5); }
.media .ph { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--ph-a) 0 10px, var(--ph-b) 10px 20px); }
.media .veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--panel-2) 78%, transparent); backdrop-filter: blur(2px); }
.media .shim { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--shimmer) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
.media .scanline { position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 20%, transparent), transparent); animation: scan 2.2s linear infinite; }
.media .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; text-align: center; font: 600 13px/1.35 var(--font); color: var(--text); text-wrap: balance; }
.media .center small { font: 500 12px/1.4 var(--font); color: var(--text-2); }
.media .pct { font: 600 30px/1 var(--mono); letter-spacing: -.02em; }
.dots { display: flex; gap: 5px; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--run); animation: pulse 1.2s infinite; }
.dots span:nth-child(2) { animation-delay: .2s; } .dots span:nth-child(3) { animation-delay: .4s; }
.err-ico { width: 32px; height: 32px; border-radius: 50%; background: var(--err); color: var(--panel); display: grid; place-items: center; font: 800 16px/1 var(--font); }
.item.failed .media { background: var(--err-soft); }
.item.failed .media .center { color: var(--err); }
.label { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px;
  background: var(--panel); color: var(--text-2); font: 600 11.5px/1 var(--font); box-shadow: var(--shadow-1); z-index: 1; }
.label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.label.run { color: var(--accent-text); } .label.ok { color: var(--ok); } .label.err { color: var(--err); }
.num-tag { position: absolute; top: 10px; right: 10px; font: 500 11px/1 var(--mono); color: var(--text-2); z-index: 1; }
.tick { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--ok); color: var(--on-ok); display: grid; place-items: center; z-index: 2; animation: pop .45s var(--ease-spring) both; }
.play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 50%; background: rgba(10,10,14,.6); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px); animation: pop .45s .2s var(--ease-spring) both; }
.dur { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; border-radius: 6px; background: rgba(10,10,14,.6); color: #fff; font: 500 11px/1 var(--mono); }
.pbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--line); }
.pbar > div { height: 100%; background-color: var(--run); background-image: linear-gradient(45deg,rgba(255,255,255,.25) 25%,transparent 25% 50%,rgba(255,255,255,.25) 50% 75%,transparent 75%); background-size: 24px 24px; animation: stripes .8s linear infinite; transition: width .4s var(--ease-out); }
.item .body { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.item .phrase { font: 500 13.5px/1.45 var(--font); text-wrap: pretty; }
.item .phrase.pending { color: var(--text-2); font-style: italic; }
.item .meta { font: 500 11.5px/1.3 var(--mono); color: var(--text-2); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pair .btn { height: 34px; padding: 0 6px; font-size: 12.5px; white-space: normal; line-height: 1.15; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.acts .btn.sm { height: 30px; padding: 0 8px; }
.acts .btn.sm.icon { width: 30px; padding: 0; }
.foot { display: flex; align-items: center; border-top: 1px solid var(--line); padding-top: 4px; }
.foot .toggle { flex: 1; min-height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; border: 0; background: transparent; color: var(--text-2); font: 600 12.5px/1 var(--font); cursor: pointer; }
.foot .toggle svg { transition: transform var(--dur-2); }
.foot .toggle.open svg { transform: rotate(180deg); }
.foot .del { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); cursor: pointer; }
.foot .del:hover { background: var(--err-soft); color: var(--err); }
.prompt-box { display: flex; flex-direction: column; gap: 6px; animation: fadeIn var(--dur-2) both; }
.prompt-box textarea { width: 100%; min-height: 120px; resize: vertical; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--field); color: var(--text); font: 400 12px/1.45 var(--mono); outline: none; }
.prompt-box textarea:focus { border-color: var(--accent); }

/* ===== Окна, шторки, уведомления ===== */
dialog.modal { padding: 0; border: 0; border-radius: var(--r-xl); width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--panel); color: var(--text); box-shadow: var(--shadow-3); overflow: hidden; }
dialog.modal[open] { animation: scaleIn var(--dur-3) var(--ease-out) both; display: flex; flex-direction: column; }
dialog.modal::backdrop { background: var(--overlay); animation: fadeIn var(--dur-3) both; }
.modal-head { display: flex; align-items: center; padding: 18px 20px 12px 24px; }
.modal-head h2 { margin: 0; font: 700 19px/1.25 var(--font); flex: 1; }
.modal-body { padding: 4px 24px 12px; overflow: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--panel); }
.kv { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv .k b { display: block; font: 700 14px/1.3 var(--font); }
.kv .k span { display: block; font: 500 12.5px/1.4 var(--font); color: var(--text-2); margin-top: 2px; }
.kv .k a { display: inline-block; font: 600 12.5px/1.4 var(--font); margin-top: 6px; }
.kv .v { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.key-row { display: flex; gap: 8px; }
.key-row .input { font-family: var(--mono); font-size: 13px; }

dialog.ask { padding: 0; border: 0; border-radius: var(--r-xl); width: min(420px, calc(100vw - 32px)); background: var(--panel); color: var(--text); box-shadow: var(--shadow-3); }
dialog.ask[open] { animation: scaleIn var(--dur-3) var(--ease-out) both; }
dialog.ask::backdrop { background: var(--overlay); }
.ask-body { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 10px; }
.ask-body h3 { margin: 0; font: 700 18px/1.3 var(--font); }
.ask-body p { margin: 0; color: var(--text-2); font-size: 14px; }
.ask-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 22px 20px; }

.toasts { position: fixed; top: calc(var(--header-h) + 12px); right: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 12px 14px; border-radius: var(--r-lg); background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow-2); animation: toastIn var(--dur-3) var(--ease-spring) both; font: 600 13.5px/1.4 var(--font); }
.toast .ti { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ok); color: var(--on-ok); font: 800 11px/1 var(--font); margin-top: 1px; }
.toast.error { border-color: color-mix(in srgb, var(--err) 45%, var(--line)); }
.toast.error .ti { background: var(--err); color: var(--panel); }
.toast .tx { flex: 1; }
.toast button { border: 0; background: transparent; color: var(--text-2); cursor: pointer; padding: 0 2px; font-size: 16px; line-height: 1; }

.viewer { position: fixed; inset: 0; z-index: 70; background: rgba(6,6,8,.92); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 56px 32px 32px; color: #ececf1; animation: fadeIn var(--dur-3) both; }
.viewer .vw-stage { grid-column: 2; height: calc(100vh - 120px); width: calc((100vh - 120px) * 9 / 16); max-width: 46vw; border-radius: var(--r-lg); overflow: hidden; background: #000; animation: viewIn var(--dur-3) var(--ease-out) both; }
.viewer video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.viewer .vw-side { grid-column: 3; display: flex; flex-direction: column; gap: 12px; max-width: 340px; }
.viewer .vw-phrase { font: 700 19px/1.35 var(--font); }
.viewer .vw-meta { font: 500 12px/1.4 var(--mono); color: #a2a2ad; }
.viewer .vw-top { position: absolute; top: 14px; left: 20px; right: 14px; display: flex; align-items: center; justify-content: space-between; font: 500 13px var(--mono); color: #a2a2ad; }
.viewer .round { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #383841; background: rgba(21,21,26,.8); color: #ececf1; display: grid; place-items: center; cursor: pointer; }
.viewer .round:hover { background: #26262d; }
.viewer .vw-prev { grid-column: 1; justify-self: end; } 
.viewer .btn { background: #1c1c22; border-color: #383841; color: #ececf1; }
.viewer .btn.primary { background: #ececf1; color: #0d0d10; }
.viewer .hintline { font: 500 12px/1.4 var(--font); color: #a2a2ad; }

/* нижняя панель действия (телефон и планшет) */
.actionbar { display: none; }

/* ===== Вход ===== */
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 48px; background: var(--panel); }
.login-form form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 24px; animation: fadeUp .6s var(--ease-out) both; }
.login-form h1 { margin: 0; font: 700 32px/1.15 var(--font); letter-spacing: -.02em; }
.login-form p { margin: -12px 0 0; color: var(--text-2); }
.login-form .input.err { animation: shake .4s both; }
.login-art { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 18px; background: var(--bg); }
.login-art span { width: 150px; aspect-ratio: 9/16; border-radius: var(--r-lg); border: 1px solid var(--line); background: repeating-linear-gradient(135deg, var(--ph-a) 0 10px, var(--ph-b) 10px 20px); box-shadow: var(--shadow-2); animation: float 5s ease-in-out infinite; }
.login-art span:nth-child(2) { width: 180px; margin-top: -60px; animation-delay: .6s; border-color: var(--accent); }
.login-art span:nth-child(3) { animation-delay: 1.2s; margin-top: 50px; }

/* ===== Адаптивность ===== */
@media (max-width: 1279px) {
  #menuBtn { display: inline-flex; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; width: min(320px, 86vw); z-index: 40; transform: translateX(-100%); visibility: hidden;
    transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); box-shadow: var(--shadow-3); }
  .sidebar.open { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out); }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 6px; }
  .drawer-foot { display: flex; flex-direction: column; gap: 4px; margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; }
  .drawer-foot .btn { justify-content: flex-start; }
  .step1 { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  main { padding: 20px 20px 130px; }
  .actionbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); animation: sheetUp var(--dur-3) var(--ease-out) both; }
  .actionbar .ab-info { flex: 1; min-width: 0; font: 500 12.5px/1.35 var(--font); color: var(--text-2); }
  .actionbar .ab-info b { font: 600 13px var(--mono); color: var(--text); }
  .actionbar .btn { height: 48px; flex: none; }
  .actionbar .ab-btn { flex: 1 1 auto; max-width: 360px; }
  .hide-tablet { display: none !important; }
}
@media (min-width: 1280px) { .only-tablet { display: none !important; } }
@media (max-width: 767px) {
  body { font-size: 15px; }
  .topbar { padding: 0 12px; gap: 8px; }
  .brand .bname, .topbar .badge, .topbar .hide-phone { display: none; }
  .balance { padding: 6px 10px; border-radius: 999px; background: var(--panel-2); }
  .balance .bl { display: none; }
  main { padding: 16px 16px 130px; }
  .title-input { font-size: 22px; flex-basis: 100%; }
  .steps { display: flex; width: 100%; }
  .steps button { flex: 1; justify-content: center; padding: 8px 6px; }
  .steps button .num { display: none; }
  .steps button { text-align: center; }
  .steps button b { font-size: 13px; }
  .steps .short { display: inline; } .steps .long { display: none; }
  .card { padding: 16px; border-radius: var(--r-lg); }
  .grid2 { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .input, select.input, textarea.input, .phrases textarea, .phrases .backdrop { font-size: 16px; }
  .input, select.input { min-height: 48px; }
  .btn { min-height: 44px; }
  .btn.sm { min-height: 36px; }
  .kv { grid-template-columns: 1fr; gap: 10px; }
  dialog.modal { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  dialog.modal[open] { animation: sheetUp var(--dur-3) var(--ease-out) both; }
  dialog.ask { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  dialog.ask[open] { animation: sheetUp var(--dur-3) var(--ease-out) both; }
  .ask-foot { flex-direction: column-reverse; }
  .ask-foot .btn { width: 100%; height: 48px; }
  .toasts { top: 10px; left: 10px; right: 10px; width: auto; }
  .toast { animation-name: toastDown; }
  .viewer { display: block; padding: 0; }
  .viewer .vw-stage { position: absolute; inset: 0; height: 100%; width: 100%; max-width: none; border-radius: 0; aspect-ratio: auto; }
  .viewer .hintline { display: none; }
  .viewer .vw-side { position: absolute; left: 0; right: 0; bottom: calc(52px + env(safe-area-inset-bottom)); max-width: none; padding: 50px 16px 12px; background: linear-gradient(transparent, rgba(0,0,0,.8) 40%); pointer-events: none; }
  .viewer .vw-side > * { pointer-events: auto; }
  .viewer .vw-prev, .viewer .vw-next { display: none; }
  .viewer .vw-top { z-index: 2; }
  .login-page { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login-form { padding: 24px; }
}