/* ═══════════════════════════════════════════
   links.iluh.in — цифровой тёмный стиль
   ═══════════════════════════════════════════ */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
    --bg: #07080d; --bg-glow: #101429;
    --surface: rgba(16, 18, 28, .62); --surface-2: rgba(255, 255, 255, .04);
    --line: rgba(255, 255, 255, .09);
    --fg: #eef0f8; --fg-soft: #c9cee2; --muted: #8a90a8; --ph: #5d627a;
    --a1: #3b82f6; --a2: #06b6d4; --a3: #8b5cf6;
    --ok: #34d399; --err: #fb7185;
    --grad: linear-gradient(135deg, var(--a1), var(--a2));
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --grid-line: rgba(255, 255, 255, .045);
    --h1a: #fff; --h1b: #a9b4d6;
    --card-shadow: 0 40px 90px rgba(0, 0, 0, .55); --card-inset: inset 0 1px 0 rgba(255, 255, 255, .06);
    --tabs-bg: rgba(0, 0, 0, .28); --ind-bg: rgba(255, 255, 255, .08);
    --ind-shadow: 0 2px 12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
    --field: rgba(0, 0, 0, .3); --ghost: rgba(255, 255, 255, .06); --ghost-h: rgba(255, 255, 255, .1);
    --dz-line: rgba(255, 255, 255, .17); --dz-bg: rgba(0, 0, 0, .18); --dz-ic: #7fb4ff; --dz-ic-on: #fff;
    --warn-ink: #fda4af; --ring-bg: rgba(255, 255, 255, .07); --core-ic: #cfe3ff;
    --cut: #9fc2ff; --blade: #fff; --trail: rgba(255, 255, 255, .45); --res-ink: #6ee7b7;
    color-scheme: dark;
}
html[data-theme="light"] {
    --bg: #eef2fb; --bg-glow: #ffffff;
    --surface: rgba(255, 255, 255, .72); --surface-2: rgba(15, 23, 42, .04);
    --line: rgba(15, 23, 42, .1);
    --fg: #0f172a; --fg-soft: #334155; --muted: #5b6479; --ph: #94a3b8;
    --a1: #2563eb; --a2: #0891b2; --a3: #7c3aed;
    --ok: #059669; --err: #e11d48;
    --grid-line: rgba(15, 23, 42, .055);
    --h1a: #0f172a; --h1b: #475569;
    --card-shadow: 0 30px 70px rgba(30, 41, 90, .16); --card-inset: inset 0 1px 0 rgba(255, 255, 255, .9);
    --tabs-bg: rgba(15, 23, 42, .05); --ind-bg: #fff; --ind-shadow: 0 2px 10px rgba(15, 23, 42, .12);
    --field: rgba(255, 255, 255, .85); --ghost: rgba(15, 23, 42, .05); --ghost-h: rgba(15, 23, 42, .09);
    --dz-line: rgba(15, 23, 42, .2); --dz-bg: rgba(255, 255, 255, .55); --dz-ic: #2563eb; --dz-ic-on: #1d4ed8;
    --warn-ink: #be123c; --ring-bg: rgba(15, 23, 42, .08); --core-ic: #1d4ed8;
    --cut: #1d4ed8; --blade: #0f172a; --trail: rgba(15, 23, 42, .35); --res-ink: #047857;
    color-scheme: light;
}
html[data-theme="light"] .blob { opacity: .3; }
html[data-theme="light"] .b2 { opacity: .22; }
html[data-theme="light"] .b3 { opacity: .16; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    background: var(--bg); color: var(--fg);
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button, input { font-family: inherit; }

/* ── Фон ── */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 80% at 50% -10%, var(--bg-glow) 0%, var(--bg) 60%); }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; }
.b1 { width: 520px; height: 520px; background: var(--a1); top: -160px; left: -120px; animation: float1 22s ease-in-out infinite alternate; }
.b2 { width: 460px; height: 460px; background: var(--a2); bottom: -180px; right: -100px; opacity: .32; animation: float2 26s ease-in-out infinite alternate; }
.b3 { width: 380px; height: 380px; background: var(--a3); top: 40%; left: 55%; opacity: .22; animation: float3 30s ease-in-out infinite alternate; }
@keyframes float1 { to { transform: translate(180px, 140px) scale(1.15); } }
@keyframes float2 { to { transform: translate(-200px, -120px) scale(1.2); } }
@keyframes float3 { to { transform: translate(-260px, 120px) scale(.85); } }
.grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
    animation: gridmove 14s linear infinite;
}
@keyframes gridmove { to { background-position: 48px 48px, 48px 48px; } }

/* ── Бренд ── */
.brand { position: fixed; top: 19px; left: 22px; display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; z-index: 5; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); display: grid; place-items: center; box-shadow: 0 4px 16px rgba(59,130,246,.4); }
.brand-mark .ic { width: 16px; height: 16px; stroke: #fff; }
.brand-name { font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: .2px; white-space: nowrap; }
.brand-name b { font-weight: inherit; color: var(--a2); }
.brand-name::after { content: ''; display: inline-block; width: 6px; height: 13px; margin-left: 3px; vertical-align: -2px; border-radius: 1px; background: var(--a2); animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ── Каркас ── */
.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 76px 18px 40px; gap: 26px; }
.hero { text-align: center; max-width: 560px; animation: rise .8s var(--ease) both; }
.hero h1 {
    margin: 0 0 8px; font-size: clamp(30px, 6vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
    background: linear-gradient(180deg, var(--h1a) 30%, var(--h1b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p { margin: 0; color: var(--muted); font-size: 15px; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── Карточка ── */
.card {
    position: relative; width: min(560px, 100%); padding: 22px;
    background: var(--surface); border-radius: 28px;
    -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 0 0 1px var(--line), var(--card-shadow), var(--card-inset);
    animation: rise .9s .1s var(--ease) both;
}
.card-sm { width: min(460px, 100%); }
/* бегущая подсветка рамки — при перетаскивании и во время операций */
.card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: conic-gradient(from var(--ang), transparent 0 50%, var(--a1) 72%, var(--a2) 88%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    opacity: 0; transition: opacity .4s; animation: spin-ang 3s linear infinite;
}
.card[data-view="busy"]::before, .card.drag::before { opacity: 1; }
@keyframes spin-ang { to { --ang: 360deg; } }

/* ── Табы ── */
.tabs { position: relative; display: flex; padding: 4px; margin-bottom: 20px; background: var(--tabs-bg); border: 1px solid var(--line); border-radius: 16px; transition: opacity .3s; }
.tab-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 12px; background: var(--ind-bg); box-shadow: var(--ind-shadow); transition: transform .45s var(--ease); }
.card[data-tab="link"] .tab-ind { transform: translateX(100%); }
.tab { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background: none; border: 0; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; transition: color .25s; }
.tab:hover { color: var(--fg-soft); }
.card[data-tab="file"] .tab[data-tab="file"], .card[data-tab="link"] .tab[data-tab="link"] { color: var(--fg); }
.card[data-view="busy"] .tabs { opacity: .35; pointer-events: none; }

/* ── Сцена: все виды в одной ячейке ── */
.stage { display: grid; }
.view {
    grid-area: 1 / 1; min-width: 0;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px) scale(.985);
    transition: opacity .35s, transform .5s var(--ease), visibility 0s .35s;
}
.card[data-view="file"] .v-file, .card[data-view="link"] .v-link, .card[data-view="busy"] .v-busy,
.card[data-view="done"] .v-done, .card[data-view="error"] .v-error {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: .08s, .08s, 0s;
}
.v-busy, .v-done, .v-error { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 300px; }

/* ── Поля ── */
.lbl { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.lbl em { text-transform: none; letter-spacing: 0; font-weight: 500; }
.inp {
    width: 100%; padding: 13px 16px; color: var(--fg); font-size: 14.5px; outline: 0;
    background: var(--field); border: 1.5px solid var(--line); border-radius: 14px;
    transition: border-color .25s, box-shadow .25s;
}
.inp::placeholder { color: var(--ph); }
.inp:focus { border-color: var(--a1); box-shadow: 0 0 0 4px rgba(59,130,246,.15); }
.v-file .inp { margin-bottom: 14px; }
.url-row { display: flex; gap: 10px; }
.url-row .inp { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; }

/* ── Кнопки ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; height: 48px; border: 0; border-radius: 14px; font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s, background .25s; }
.btn-grad { background: var(--grad); box-shadow: 0 8px 24px rgba(59,130,246,.35); }
.btn-grad:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(59,130,246,.5); }
.btn-grad:hover .ic { animation: wiggle .5s; }
.btn-grad:active, .btn-ghost:active { transform: scale(.97); }
.btn-ghost { color: var(--fg); background: var(--ghost); box-shadow: inset 0 0 0 1px var(--line); height: 42px; padding: 0 16px; }
.btn-ghost:hover { background: var(--ghost-h); }
@keyframes wiggle { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }

/* ── Дропзона ── */
.dz {
    position: relative; overflow: hidden; padding: 34px 18px 30px; text-align: center; cursor: pointer; outline: 0;
    border: 1.5px dashed var(--dz-line); border-radius: 22px;
    background: radial-gradient(90% 120% at 50% 0%, rgba(59,130,246,.09), transparent 70%), var(--dz-bg);
    transition: border-color .3s, background .3s, transform .4s var(--ease);
}
.dz::after { /* линия сканера */
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 60px; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(6,182,212,.12), transparent);
    animation: scan 4.5s ease-in-out infinite;
}
@keyframes scan { 0% { transform: translateY(-70px); } 100% { transform: translateY(260px); } }
.dz:hover, .dz:focus-visible, .card.drag .dz { border-color: var(--a2); background: radial-gradient(90% 120% at 50% 0%, rgba(6,182,212,.16), transparent 70%), var(--dz-bg); }
.card.drag .dz { transform: scale(1.015); border-style: solid; }
.dz-icon { position: relative; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(6,182,212,.22)); box-shadow: inset 0 0 0 1px rgba(103,160,255,.3); color: var(--dz-ic); animation: bob 3.2s ease-in-out infinite; transition: transform .4s var(--ease); }
.dz-icon .ic { width: 28px; height: 28px; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.card.drag .dz-icon { animation: none; transform: translateY(-8px) scale(1.12); color: var(--dz-ic-on); }
.ring { position: absolute; inset: 0; border-radius: 20px; border: 1.5px solid var(--a2); opacity: 0; pointer-events: none; }
.card.drag .ring { animation: ripple 1.5s ease-out infinite; }
.card.drag .r2 { animation-delay: .5s; } .card.drag .r3 { animation-delay: 1s; }
@keyframes ripple { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.dz-text { margin: 0; font-weight: 600; font-size: 15px; color: var(--fg-soft); }
.dz-text span { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(59,130,246,.6); }
.dz-err { min-height: 0; max-height: 0; overflow: hidden; margin-top: 0; color: var(--err); font-weight: 600; font-size: 13px; opacity: 0; transition: max-height .3s, margin .3s, opacity .3s; }
.dz-err.show { max-height: 60px; margin-top: 12px; opacity: 1; animation: shake .45s; }
.v-link .dz-err.show { margin-top: 12px; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* ── Футер-чипы ── */
.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.chip b { color: var(--fg-soft); font-weight: 700; }
.chip-warn { color: var(--warn-ink); background: rgba(251,113,133,.07); box-shadow: inset 0 0 0 1px rgba(251,113,133,.2); }
.foot .only-file, .foot .only-link { display: none; }
.card[data-tab="file"] .foot .only-file, .card[data-tab="link"] .foot .only-link { display: inline-flex; animation: rise .5s var(--ease) both; }
.card[data-view="busy"] .foot, .card[data-view="done"] .foot, .card[data-view="error"] .foot { opacity: .0; pointer-events: none; }
.foot { transition: opacity .3s; }

/* ═════════ Процесс: кольцо, пакеты, архивация ═════════ */
.orb { position: relative; width: 150px; height: 150px; margin-bottom: 14px; display: grid; place-items: center; }
.ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-bg, .ring-fg { fill: none; stroke-width: 5; }
.ring-bg { stroke: var(--ring-bg); }
.ring-fg { stroke: url(#grad); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(6,182,212,.7)); }
.card[data-mode="zip"] .ring-fg { filter: drop-shadow(0 0 6px rgba(139,92,246,.8)); stroke: var(--a3); }
.orb-core { position: relative; width: 84px; height: 84px; border-radius: 28px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(59,130,246,.25), rgba(6,182,212,.25)); box-shadow: inset 0 0 0 1px rgba(103,160,255,.35), 0 0 40px rgba(59,130,246,.3); animation: pulse 1.8s ease-in-out infinite; }
.orb-core .ic { width: 34px; height: 34px; color: var(--core-ic); }
.orb-core .ic-zip { display: none; }
.card[data-mode="zip"] .ic-zip { display: block; } .card[data-mode="zip"] .ic-up { display: none; }
.card[data-mode="zip"] .orb-core { background: linear-gradient(135deg, rgba(139,92,246,.3), rgba(59,130,246,.2)); box-shadow: inset 0 0 0 1px rgba(167,139,250,.4), 0 0 40px rgba(139,92,246,.35); }
@keyframes pulse { 50% { transform: scale(1.06); } }
.card[data-mode="upload"][data-view="busy"] .ic-up { animation: lift 1.1s ease-in-out infinite; }
@keyframes lift { 0% { transform: translateY(5px); opacity: .6; } 50% { transform: translateY(-4px); opacity: 1; } 100% { transform: translateY(5px); opacity: .6; } }

/* пакеты данных, вылетающие из ядра */
.packets { position: absolute; inset: 0; pointer-events: none; display: none; }
.card[data-mode="upload"] .packets { display: block; }
.packets i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--a2); box-shadow: 0 0 10px var(--a2); opacity: 0; transform: rotate(var(--a)) translateX(46px); }
.card[data-view="busy"] .packets i { animation: packet 1.4s var(--d) ease-out infinite; }
@keyframes packet { 0% { opacity: 0; transform: rotate(var(--a)) translateX(44px); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(96px) scale(.4); } }

/* файлы, «влетающие» в архив */
.fly { position: absolute; inset: 0; pointer-events: none; display: none; }
.card[data-mode="zip"] .fly { display: block; }
.fly i { position: absolute; left: 50%; top: 50%; width: 22px; height: 28px; margin: -14px -11px; border-radius: 5px; background: linear-gradient(135deg, #8b5cf6, #3b82f6); box-shadow: 0 0 14px rgba(139,92,246,.6); opacity: 0; }
.card[data-view="busy"] .fly i { animation: flyin 1.6s var(--d) cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes flyin { 0% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.2); } }

.busy-title { font-weight: 700; font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; }
.busy-pct { margin-top: 2px; font-size: 40px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.busy-meta { min-height: 20px; color: var(--muted); font-size: 12.5px; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ═════════ Сокращение: ножницы режут ссылку ═════════ */
.cutter { display: none; width: 100%; position: relative; padding: 34px 0 6px; }
.card[data-mode="shorten"] .cutter { display: block; }
.card[data-mode="shorten"] .orb, .card[data-mode="shorten"] #busyTitle, .card[data-mode="shorten"] .busy-pct, .card[data-mode="shorten"] .busy-meta { display: none; }
.cut-url { display: flex; justify-content: center; margin-bottom: 26px; height: 30px; font-family: var(--mono); font-size: 15px; color: var(--cut); white-space: pre; overflow: hidden; }
.cut-url span { display: inline-block; }
.cut-blade { position: absolute; top: 18px; left: 0; width: 100%; height: 0; pointer-events: none; }
.cut-blade .ic { position: absolute; top: 0; left: var(--x0, 8%); width: 26px; height: 26px; margin: -3px 0 0 -13px; color: var(--blade); filter: drop-shadow(0 0 8px var(--a2)); opacity: 0; }
.cut-blade::after { content: ''; position: absolute; left: var(--x0, 8%); top: 8px; width: 0; border-top: 1.5px dashed var(--trail); }
.card[data-mode="shorten"][data-view="busy"] .cut-blade .ic { animation: sweep var(--dur, 1.4s) linear forwards; }
.card[data-mode="shorten"][data-view="busy"] .cut-blade::after { animation: trail var(--dur, 1.4s) linear forwards; }
@keyframes sweep { 0% { left: var(--x0, 8%); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: var(--x1, 92%); opacity: 0; } }
@keyframes trail { 0% { width: 0; } 100% { width: calc(var(--x1, 92%) - var(--x0, 8%)); } }
.card[data-view="busy"] .cut-url span { animation: drop .7s calc((var(--i) + .5) * var(--step, 70ms)) cubic-bezier(.5, 0, 1, .6) forwards; }
@keyframes drop { 0% { transform: none; opacity: 1; } 100% { transform: translateY(46px) rotate(var(--r)); opacity: 0; } }

/* ═════════ Готово / ошибка ═════════ */
.badge { position: relative; width: 78px; height: 78px; border-radius: 26px; display: grid; place-items: center; margin-bottom: 16px; }
.badge-ok { background: rgba(52,211,153,.14); box-shadow: inset 0 0 0 1.5px rgba(52,211,153,.5), 0 0 40px rgba(52,211,153,.25); color: var(--ok); }
.badge-err { background: rgba(251,113,133,.12); box-shadow: inset 0 0 0 1.5px rgba(251,113,133,.45), 0 0 40px rgba(251,113,133,.2); color: var(--err); }
.badge-file { background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(6,182,212,.22)); box-shadow: inset 0 0 0 1.5px rgba(103,160,255,.4), 0 0 40px rgba(59,130,246,.3); color: var(--core-ic); }
.badge .ic { width: 34px; height: 34px; }
.tick { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; }
.card[data-view="done"] .tick { animation: draw .55s .25s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.card[data-view="done"] .badge-ok { animation: pop .6s var(--ease); }
.card[data-view="error"] .badge-err { animation: shake .5s .1s; }
@keyframes pop { 0% { transform: scale(.5); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.burst { position: absolute; inset: 0; pointer-events: none; }
.burst i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--a2); opacity: 0; }
.burst i:nth-child(3n) { background: var(--ok); } .burst i:nth-child(3n+1) { background: var(--a1); }
.card[data-view="done"] .burst i { animation: burst .9s .15s ease-out forwards; }
@keyframes burst { 0% { opacity: 1; transform: rotate(var(--a)) translateX(40px); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(90px) scale(.3); } }

.done-title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.done-sub { margin: 4px 0 18px; color: var(--muted); font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.result { width: 100%; display: flex; border-radius: 16px; overflow: hidden; background: rgba(52,211,153,.06); box-shadow: inset 0 0 0 1.5px rgba(52,211,153,.3); transition: box-shadow .3s; }
.result.flash { animation: glow .9s; }
@keyframes glow { 30% { box-shadow: inset 0 0 0 1.5px var(--ok), 0 0 30px rgba(52,211,153,.5); background: rgba(52,211,153,.14); } }
.res-inp { flex: 1; min-width: 0; padding: 15px 16px; color: var(--res-ink); background: none; border: 0; outline: 0; font-family: var(--mono); font-size: 14px; }
.copy { width: 56px; border: 0; border-left: 1px solid rgba(52,211,153,.25); background: rgba(52,211,153,.08); color: var(--ok); cursor: pointer; display: grid; place-items: center; transition: background .2s; position: relative; }
.copy:hover { background: rgba(52,211,153,.2); }
.copy .ic { grid-area: 1 / 1; width: 20px; height: 20px; transition: transform .35s var(--ease), opacity .2s; }
.copy .i-ok { opacity: 0; transform: scale(.3) rotate(-90deg); }
.copy.copied .i-copy { opacity: 0; transform: scale(.3) rotate(90deg); }
.copy.copied .i-ok { opacity: 1; transform: none; }
.actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }

/* Страница скачивания / 404 */
.solo { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 6px 8px; }
.solo-title { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.solo-file { max-width: 100%; word-break: break-word; }
.solo-sub { margin: 0 0 22px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.card[data-view="error"].card-sm .solo, .card[data-view="done"].card-sm .solo { animation: rise .6s var(--ease) both; }

/* ── Адаптив ── */
@media (max-width: 520px) {
    .card { padding: 16px; border-radius: 24px; }
    .url-row { flex-direction: column; } .url-row .btn { height: 48px; }
    .brand { top: 17px; left: 16px; }
    .theme-btn { top: 12px; right: 14px; }
    .shell { padding-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


/* ═════════ Переключатель темы ═════════ */
.theme-btn { position: fixed; top: 14px; right: 18px; z-index: 6; width: 40px; height: 40px; border: 0; border-radius: 13px; display: grid; place-items: center; cursor: pointer; color: var(--fg-soft); background: var(--surface); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--line); transition: transform .35s var(--ease), color .2s; }
.theme-btn:hover { transform: translateY(-1px) rotate(10deg); color: var(--fg); }
.theme-btn:active { transform: scale(.92); }
.theme-btn .ic { grid-area: 1 / 1; width: 19px; height: 19px; transition: transform .6s var(--ease), opacity .3s; }
.theme-btn .i-moon { opacity: 0; transform: rotate(-90deg) scale(.4); }
html[data-theme="light"] .theme-btn .i-sun { opacity: 0; transform: rotate(90deg) scale(.4); }
html[data-theme="light"] .theme-btn .i-moon { opacity: 1; transform: none; }
/* круговое раскрытие новой темы (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { z-index: 2; }
/* запасной вариант: плавная смена цветов */
html.theming *, html.theming *::before, html.theming *::after { transition: background-color .45s, color .45s, border-color .45s, box-shadow .45s, stroke .45s, fill .45s !important; }

/* ═════════ QR-код ═════════ */
.btn-ghost.on { background: var(--ghost-h); box-shadow: inset 0 0 0 1px var(--a2); }
.qr-wrap { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows .65s var(--ease), margin-top .65s var(--ease); }
.qr-wrap.open { grid-template-rows: 1fr; margin-top: 16px; }
.qr-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 16px; opacity: 0; transition: opacity .35s; }
.qr-wrap.open .qr-in { opacity: 1; transition-delay: .12s; padding-bottom: 8px; }
.qr-tile { position: relative; width: 196px; height: 196px; flex: none; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 26px rgba(6, 182, 212, .3); }
.qr-svg, .qr-svg svg { display: block; width: 100%; height: 100%; }
.qr-svg .m { animation: qrpop .55s var(--ease) both; animation-delay: calc(var(--d) * 1ms); transform-box: fill-box; transform-origin: center; }
@keyframes qrpop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
.qr-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--a2), var(--a1), transparent); box-shadow: 0 0 16px 4px rgba(6, 182, 212, .7); }
.qr-wrap.open .qr-scan { animation: qrscan 1.15s .35s ease-in-out both; }
@keyframes qrscan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 3px); opacity: 0; } }
.qr-cap { font-size: 12.5px; color: var(--muted); }