/* ==========================================================================
   upscale-page.css — /upscale «Улучшить качество фото» (011, 06.11.2026), стиль «Закат».
   Общие блоки — css/tool-page.css (.tp-*). Здесь: студия (загрузка + живой пример), сравнение
   «до / после» с лупой 1:1, рабочее место инструмента, кинолента примеров, режимы.
   Классы и id инструмента (mode-card, scale-option, option-item, format-segment, #imagePreview,
   #processImageBtn…) — прежние: на них опирается js/upscale.js. Меняется только вид.
   ========================================================================== */

/* ===== HERO ===== */
.up-hero h1 .tp-grad{display:inline}
.up-hero[data-state="loaded"] .tp-hero__sub{color:#a7f3d0}
.up-hero .tp-hero__honest{flex-wrap:nowrap;align-items:flex-start;max-width:820px;margin-inline:auto;text-align:center;line-height:1.5}
.up-hero .tp-hero__honest svg{margin-top:2px}

/* ===== СТУДИЯ: загрузка ===== */
.up-studio{--pad:clamp(14px,2vw,22px);--gap:16px;--h:clamp(360px,40vw,520px);--sw:148px}
.up-body--upload{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--gap);padding:var(--pad);align-items:stretch}
.up-left{display:flex;flex-direction:column;gap:12px;min-width:0}
.up-drop{position:relative;flex:1;display:grid;place-items:center;min-height:260px;padding:24px;border-radius:18px;text-align:center;cursor:pointer;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 12px,transparent 12px 24px),rgba(255,255,255,.02);
  border:2px dashed rgba(244,114,182,.38);transition:border-color .25s,background-color .25s,box-shadow .25s}
.up-drop:hover,.up-drop.is-over{border-color:rgba(245,158,11,.8);background-color:rgba(244,114,182,.06);box-shadow:inset 0 0 70px -24px rgba(244,114,182,.55)}
.up-drop:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.up-drop__in{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:340px}
.up-drop__ico{display:grid;place-items:center;width:68px;height:68px;border-radius:20px;color:#fff;background:linear-gradient(145deg,rgba(251,113,133,.42),rgba(245,158,11,.24));border:1px solid rgba(251,113,133,.42);box-shadow:0 16px 40px -14px rgba(236,72,153,.7)}
.up-drop__ico svg{width:30px;height:30px}
.up-drop:hover .up-drop__ico{animation:upBob 1.4s ease-in-out infinite}
@keyframes upBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.up-drop__t{font-weight:750;font-size:18px;line-height:1.3;color:var(--text)}
.up-drop__d{font-size:13px;color:var(--text-4)}
.up-drop__btn{margin-top:6px;pointer-events:none}
.up-samples{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;font-size:13px;color:var(--text-3)}
.up-samples__list{display:flex;gap:8px}
.up-sample{display:block;width:40px;height:50px;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);background:var(--bg-3);transition:transform .2s,border-color .2s,box-shadow .2s}
.up-sample img{width:100%;height:100%;object-fit:cover}
.up-sample:hover{transform:translateY(-3px);border-color:rgba(244,114,182,.6);box-shadow:0 10px 24px -10px rgba(236,72,153,.7)}
.up-arrow{position:absolute;z-index:4;top:calc(var(--pad) + var(--h) / 2);right:calc(var(--pad) + var(--sw) + var(--gap) + var(--h) * .8 + var(--gap) / 2);
  display:grid;place-items:center;width:46px;height:46px;margin:-23px -23px 0 0;border-radius:50%;color:#fff;background:var(--grad-cta);
  box-shadow:0 10px 30px -6px rgba(236,72,153,.85),0 0 0 6px rgba(10,14,26,.92);pointer-events:none}
.up-arrow svg{width:20px;height:20px;animation:upNudge 1.6s ease-in-out infinite}
@keyframes upNudge{0%,100%{transform:translateX(-2px)}50%{transform:translateX(3px)}}

/* правая часть: живой пример + сцены */
.up-demo{display:contents}
.up-cmp--hero{height:var(--h);width:calc(var(--h) * .8);aspect-ratio:auto!important}
.up-side{display:flex;flex-direction:column;gap:8px;width:var(--sw);min-width:0}
.up-scenes{display:flex;flex-direction:column;gap:8px}
.up-scene{display:flex;align-items:center;gap:10px;width:100%;height:58px;padding:5px 10px 5px 5px;border-radius:14px;font-size:13px;font-weight:650;color:var(--text-3);text-align:left;
  background:rgba(255,255,255,.03);border:1px solid var(--line);transition:color .2s,border-color .2s,background .2s}
.up-scene img{flex:none;width:36px;height:46px;border-radius:9px;object-fit:cover;opacity:.75;transition:opacity .2s}
.up-scene span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-scene:hover{color:var(--text);border-color:rgba(244,114,182,.45)}
.up-scene[aria-pressed="true"]{color:#fff;background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,var(--grad) border-box;border:1px solid transparent;box-shadow:0 8px 24px -10px rgba(236,72,153,.7)}
.up-scene[aria-pressed="true"] img{opacity:1}
.up-demo__facts{display:grid;gap:6px;margin-top:auto;padding:10px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid var(--line);font-size:12.5px;color:var(--text-3)}
.up-demo__facts span{display:flex;align-items:center;gap:7px;line-height:1.35}
.up-demo__facts svg{width:14px;height:14px;flex:none;color:var(--coral)}
.up-demo__facts b{color:var(--text);font-weight:700;font-family:var(--mono);font-size:12px}
.up-demo__tip{color:var(--text-4)}
.up-demo__row{justify-content:space-between}
.up-demo__row i{font-style:normal;color:var(--text-4)}
.up-demo__row--scale{justify-content:flex-start}
.up-demo__row--scale [data-up-hero-note]{color:#a7f3d0;font-weight:650}
.up-demo__empty{display:grid;place-items:center;height:var(--h);width:calc(var(--h) * .8);border-radius:18px;background:var(--bg-3);color:var(--text-4)}

/* ===== СРАВНЕНИЕ «ДО / ПОСЛЕ» (общий компонент: hero, примеры, результат) =====
   «До» — маленький исходник, растянутый браузером на весь кадр (так выглядит фото, если его просто
   увеличить), «после» — настоящий результат. Граница — переменная --p (ставит JS / поле range). */
.up-cmp{--p:50%;position:relative;overflow:hidden;border-radius:18px;background:var(--bg-3);cursor:ew-resize;user-select:none;-webkit-user-select:none;touch-action:pan-y;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.09);isolation:isolate}
.up-cmp img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.up-cmp__before{position:absolute;inset:0;z-index:1;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.up-cmp__before img{image-rendering:auto}
/* Линия и кружок — зона захвата 48 px по всей высоте (видна только полоска 2 px). На таче тянется только здесь:
   touch-action:none только у линии, кадр (pan-y) листает страницу — см. js/upscale-page.js initCmp. */
.up-cmp__line{position:absolute;top:0;bottom:0;left:var(--p);z-index:3;width:48px;margin-left:-24px;touch-action:none;cursor:ew-resize}
.up-cmp__line::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:linear-gradient(180deg,#fb7185,#f472b6 50%,#f59e0b);box-shadow:0 0 18px rgba(244,114,182,.85);pointer-events:none}
.up-cmp__knob{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;color:#fff;background:var(--grad-cta);box-shadow:0 10px 26px -6px rgba(236,72,153,.9),0 0 0 4px rgba(10,14,26,.55);transition:transform .2s,box-shadow .2s}
.up-cmp__knob svg{width:20px;height:20px}
.up-cmp.is-drag .up-cmp__knob{transform:scale(1.12);box-shadow:0 12px 30px -6px rgba(236,72,153,1),0 0 0 6px rgba(244,114,182,.28)}
/* подсказка под кружком: «Тяните за кружок» (тач) / «Наведите — лупа 1:1» (мышь); прячется после первого действия */
.up-cmp__hint{position:absolute;left:clamp(84px,var(--p),calc(100% - 84px));bottom:12px;z-index:4;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;transform:translateX(-50%);font-size:12px;font-weight:650;color:#fff;white-space:nowrap;
  background:rgba(10,14,26,.74);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;transition:opacity .3s}
.up-cmp__hint svg{width:14px;height:14px;color:var(--amber)}
.up-cmp.is-touched .up-cmp__hint,.up-cmp.is-loupe .up-cmp__hint{opacity:0}
.up-cmp.is-short .up-cmp__hint{display:none}
.up-cmp__tag{position:absolute;top:12px;z-index:4;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;
  background:rgba(10,14,26,.72);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;transition:opacity .2s}
.up-cmp__tag b{font:600 11px var(--mono);color:var(--text-3)}
.up-cmp__tag--before{left:12px}
.up-cmp__tag--after{right:12px;border-color:rgba(244,114,182,.45);background:linear-gradient(120deg,rgba(219,39,119,.78),rgba(234,88,12,.72))}
.up-cmp__tag--after b{color:#ffe4e6}
.up-cmp:focus-within{outline:2px solid var(--pink);outline-offset:3px}
.up-cmp__range{inset:0}
/* лупа 1:1 (показывает реальные пиксели «до» и «после» в точке курсора) */
.up-cmp__loupe{position:absolute;z-index:5;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s;
  background-color:var(--bg-3);background-repeat:no-repeat;border:2px solid rgba(255,255,255,.85);box-shadow:0 18px 40px -10px rgba(0,0,0,.9),0 0 0 6px rgba(244,114,182,.25)}
.up-cmp__loupe::after{content:attr(data-side);position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);padding:2px 8px;border-radius:999px;font:700 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(10,14,26,.85);white-space:nowrap}
.up-cmp.is-loupe .up-cmp__loupe{opacity:1;transform:none}
.up-cmp.is-loupe{cursor:crosshair}
.up-cmp.is-loupe .up-cmp__tag{opacity:.35}
@media (hover:none){.up-cmp__loupe{display:none}}


/* ===== РАБОЧЕЕ МЕСТО (после загрузки фото; разметка и классы — прежние, для js/upscale.js) ===== */
.up-body--work{padding:var(--pad)}
.workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--gap);align-items:start}
.image-panel{display:flex;flex-direction:column;gap:12px;min-width:0}
/* Окно превью = холст главной (.generator-result .output в home-redesign.css): одна рамка, та же подложка
   и ПОСТОЯННАЯ высота — фото, загрузка и результат вписаны в неё, ничего не прыгает. */
.image-preview-container{position:relative}
/* строка/колонка сетки = ровно окно: иначе строка растёт по фото и max-height:100% у img не ограничивает (вертикальное фото срезалось снизу) */
.image-preview{--ph:clamp(400px,46vw,560px);position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;height:var(--ph);padding:10px;border-radius:20px;overflow:hidden;line-height:0;
  border:1px solid var(--line-2);
  background:radial-gradient(circle at 50% 38%,rgba(244,114,182,.1),transparent 62%),repeating-conic-gradient(rgba(148,163,184,.035) 0% 25%,transparent 0% 50%) 50%/36px 36px,linear-gradient(180deg,rgba(13,19,34,.8),rgba(10,14,26,.9));
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .25s}
.image-preview:hover{border-color:rgba(244,114,182,.35)}
.image-preview > img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px}
.up-cmp--result{border-radius:12px;max-width:100%;max-height:100%}
.up-cmp--result img{object-fit:contain}
.up-cmp--result .up-cmp__before img{image-rendering:auto}
.image-controls{display:flex;flex-wrap:wrap;gap:8px}
.control-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:11px;font-size:13.5px;font-weight:650;color:var(--text-2);background:rgba(255,255,255,.04);border:1px solid var(--line-2);transition:all .2s}
.control-btn svg{width:16px;height:16px;flex:none}
.control-btn:hover{color:var(--text);border-color:rgba(244,114,182,.5);background:rgba(244,114,182,.08)}
.control-btn-danger:hover{border-color:rgba(248,113,113,.6);color:#fecaca;background:rgba(248,113,113,.08)}

/* результат: сравнение до/после (рисует js/upscale.js → displayUpscaledResult) */
.comparison-slider-result{position:relative;width:100%;line-height:0;border-radius:14px;overflow:hidden;cursor:ew-resize;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.comparison-slider-result .result-before-img{display:block;width:100%;height:auto;max-height:min(70vh,640px);object-fit:contain}
.result-after-container{position:absolute;inset:0;z-index:2;clip-path:inset(0 0 0 50%)}
.result-after-img{width:100%;height:100%;object-fit:contain}
.slider-divider-result{position:absolute;top:0;bottom:0;z-index:3;width:2px;margin-left:-1px;background:linear-gradient(180deg,#fb7185,#f472b6 50%,#f59e0b);box-shadow:0 0 18px rgba(244,114,182,.85);pointer-events:none}
.slider-handle-result{position:absolute;top:50%;z-index:4;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;color:#fff;cursor:ew-resize;background:var(--grad-cta);box-shadow:0 10px 26px -6px rgba(236,72,153,.9),0 0 0 4px rgba(10,14,26,.55)}
.slider-handle-result svg{width:22px;height:22px;transform:rotate(90deg)}
.up-result-tags{position:absolute;inset:12px 12px auto 12px;z-index:5;display:flex;justify-content:space-between;pointer-events:none;line-height:1}

/* зона экспорта */
.export-zone{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;border-radius:16px;background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,var(--grad-line) border-box;border:1px solid transparent;animation:upIn .4s cubic-bezier(.2,.8,.2,1)}
@keyframes upIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.export-format-selector{display:inline-flex;padding:4px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid var(--line)}
.format-segment{height:34px;padding:0 14px;border-radius:9px;font:700 12.5px var(--mono);letter-spacing:.04em;color:var(--text-3);transition:all .2s}
.format-segment:hover{color:var(--text)}
.format-segment.active{color:#fff;background:var(--grad-cta);box-shadow:0 6px 16px -8px rgba(236,72,153,.9)}
.quality-control{display:flex;flex-direction:column;gap:4px;min-width:150px;flex:1}
.quality-header{display:flex;justify-content:space-between;font-size:12px;color:var(--text-3)}
.quality-value{font:700 12px var(--mono);color:var(--text)}
.quality-range{width:100%;accent-color:#f472b6}
.final-download-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;margin-left:auto;border-radius:12px;font-size:14.5px;font-weight:750;color:#fff;background:var(--grad-cta);box-shadow:0 10px 26px -10px rgba(236,72,153,.85);transition:transform .2s,box-shadow .2s}
.final-download-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(236,72,153,.95)}
.final-download-btn svg{width:18px;height:18px}
.final-download-btn:disabled{opacity:.7;cursor:progress;transform:none}
.up-next{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--text-4)}
.up-next a{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;font-weight:650;color:var(--text-2);border:1px solid var(--line-2);transition:all .2s}
.up-next a:hover{color:var(--text);border-color:rgba(244,114,182,.5);background:rgba(244,114,182,.08)}
.up-next svg{width:14px;height:14px;color:var(--coral)}


/* ===== ПАНЕЛЬ НАСТРОЕК ===== */
.tools-panel{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:20px;background:rgba(255,255,255,.025);border:1px solid var(--line);position:sticky;top:84px}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel-title{display:flex;align-items:center;gap:9px;margin:0;font-size:16px;font-weight:750;color:var(--text);letter-spacing:-.01em}
.panel-title svg{width:18px;height:18px;color:var(--coral)}
.panel-section{display:flex;flex-direction:column;gap:9px}
.section-label{margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-4)}

/* режимы — 2×2 */
.mode-selector{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode-card{position:relative;display:flex;align-items:center;gap:9px;min-height:56px;padding:8px 10px;border-radius:13px;cursor:pointer;background:rgba(255,255,255,.03);border:1px solid var(--line);transition:border-color .2s,background .2s,transform .2s}
.mode-card:hover{border-color:rgba(244,114,182,.45);transform:translateY(-1px)}
.mode-card.active{background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,var(--grad) border-box;border:1px solid transparent;box-shadow:0 10px 26px -14px rgba(236,72,153,.85)}
.mode-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;color:#fecdd3;background:rgba(244,114,182,.1);border:1px solid rgba(244,114,182,.22)}
.mode-icon svg{width:16px;height:16px}
.mode-card.active .mode-icon{color:#fff;background:var(--grad-cta);border-color:transparent}
.mode-info{min-width:0}
.mode-name{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.2}
.mode-desc{font-size:11.5px;color:var(--text-4);line-height:1.3;margin-top:1px}
.mode-card.locked{opacity:.85}
.mode-card.locked .mode-icon{color:var(--text-4);background:rgba(255,255,255,.03);border-color:var(--line)}
.pro-badge{position:absolute;top:-8px;right:8px;height:18px;padding:0 7px;border-radius:999px;font-size:10px;font-weight:700;line-height:18px;color:#fde68a;background:#1a1626;border:1px solid rgba(251,191,36,.4);white-space:nowrap}
.mode-card:not(.locked) .pro-badge{color:#a7f3d0;border-color:rgba(52,211,153,.4)}

/* масштаб — сегментированный выбор */
.scale-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid var(--line)}
.scale-option{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:54px;padding:6px 4px;border-radius:11px;cursor:pointer;text-align:center;transition:background .2s,color .2s}
.scale-option:hover{background:rgba(255,255,255,.05)}
.scale-option.active{background:var(--grad-cta);box-shadow:0 8px 20px -10px rgba(236,72,153,.95)}
.scale-value{font:800 18px/1.1 var(--mono);color:var(--text)}
.scale-label{font-size:10.5px;font-weight:600;color:var(--text-4);line-height:1.2}
.scale-option.active .scale-value,.scale-option.active .scale-label{color:#fff}
.scale-check,.scale-lock{position:absolute;top:5px;right:5px;width:13px;height:13px}
.scale-check{display:none;color:#fff}
.scale-option.active .scale-check{display:block}
.scale-lock{color:var(--text-4)}
.scale-option.locked .scale-value{color:var(--text-3)}
.up-size{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px;font-size:12.5px;color:var(--text-4)}
.up-size b{font:600 12px var(--mono);color:var(--text-2)}
.up-size b.is-warn{color:#fcd34d}


/* опции */
.options-list{display:grid;gap:6px}
.option-item{position:relative;display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:12px;cursor:pointer;background:rgba(255,255,255,.025);border:1px solid var(--line);transition:border-color .2s}
.option-item:hover{border-color:rgba(244,114,182,.35)}
.option-checkbox{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.option-toggle{position:relative;flex:none;width:38px;height:22px;border-radius:999px;background:rgba(100,116,139,.32);transition:background .25s}
.option-toggle::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.option-checkbox:checked + .option-toggle{background:var(--grad-cta)}
.option-checkbox:checked + .option-toggle::after{transform:translateX(16px)}
.option-checkbox:focus-visible + .option-toggle{outline:2px solid var(--pink);outline-offset:2px}
.option-text{flex:1;min-width:0}
.option-name{display:flex;align-items:center;font-size:13.5px;font-weight:650;color:var(--text);line-height:1.25}
.option-hint{display:block;font-size:11.5px;color:var(--text-4);line-height:1.3}
.option-item .lock-icon{color:var(--text-4)}

/* кнопка и счётчик */
.process-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;border-radius:14px;font-size:16px;font-weight:750;color:#fff;cursor:pointer;background:var(--grad-cta);
  box-shadow:0 12px 32px -10px rgba(236,72,153,.75),inset 0 1px 0 rgba(255,255,255,.25);overflow:hidden;isolation:isolate;transition:transform .2s,box-shadow .25s,opacity .2s}
.process-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);background-size:250% 100%;background-position:120% 0;transition:background-position .7s ease}
.process-btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(236,72,153,.9)}
.process-btn:hover::after{background-position:-20% 0}
.process-btn svg{width:20px;height:20px;flex:none}
.process-btn:disabled{opacity:.75;cursor:progress;transform:none}
.animate-spin{animation:upSpin 1s linear infinite}
@keyframes upSpin{to{transform:rotate(360deg)}}
#creditCostBadge{font-size:12.5px!important;color:var(--text-3)!important}
.usage-info{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid var(--line)}
.usage-text{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-3)}
.usage-value{font:700 13px var(--mono);color:var(--text)}
.usage-link{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--pink);transition:gap .2s,color .2s}
.usage-link:hover{gap:7px;color:var(--orange)}
#upscaleCounter{display:none}
.process-hint{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-4)}
.process-hint svg{width:14px;height:14px}

/* лоадер — на всё окно (как на главной: рамка окна = рамка лоадера) */
#imagePreview > .loader-overlay{border-radius:inherit}
.process-btn__spin{flex:none;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:upSpin .8s linear infinite}
.process-btn[aria-busy="true"]{opacity:.85}


/* ===== 01 ПРИМЕРЫ: кинолента «до / после» ===== */
.up-reel{display:grid;gap:14px}
.up-reel__stage{display:grid;grid-template-columns:auto minmax(0,1fr);border-radius:var(--r-xl);overflow:hidden;background:var(--panel-2);border:1px solid var(--line);box-shadow:var(--shadow)}
.up-reel__screen{position:relative;display:grid;place-items:center;padding:14px;background:#05070d}
.up-cmp--reel{height:min(580px,72vh);width:auto;max-width:100%;border-radius:14px}
.up-reel__info{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(20px,2.6vw,32px);border-left:1px solid var(--line);background:radial-gradient(400px 240px at 100% 0%,rgba(251,113,133,.12),transparent 70%)}
.up-reel__title{font-size:clamp(22px,2.2vw,28px);line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--text);margin:4px 0 0}
.up-reel__caption{font-size:15.5px;line-height:1.6;color:var(--text-2)}
.up-reel__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin:6px 0 2px}
.up-reel__facts div{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.up-reel__facts dt{font-size:11px;color:var(--text-4);margin-bottom:2px}
.up-reel__facts dd{margin:0;font:600 12.5px var(--mono);color:var(--text);white-space:nowrap}
.up-reel__src{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--text-4)}
.up-reel__src svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--amber)}
.up-reel__src b{color:var(--text-3);font-weight:650}
.up-reel__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
.up-reel__strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(120px,1fr);gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:rgba(244,114,182,.35) transparent}
.up-thumb{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:14px;text-align:left;scroll-snap-align:start;background:rgba(255,255,255,.025);border:1px solid var(--line);transition:border-color .25s,background .25s,transform .25s}
.up-thumb:hover{transform:translateY(-3px);border-color:rgba(244,114,182,.4)}
.up-thumb.is-active{background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,var(--grad) border-box;border:1px solid transparent;box-shadow:0 12px 30px -14px rgba(236,72,153,.8)}
.up-thumb__img{display:block;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--bg-3)}
.up-thumb__img img{width:100%;height:100%;object-fit:cover}
.up-thumb__name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:2.5em;padding:0 4px;font-size:12.5px;font-weight:700;line-height:1.25;color:var(--text);overflow:hidden;text-wrap:balance}
.up-thumb__cat{padding:0 4px 2px;font-size:11px;color:var(--text-4)}

/* ===== 05 РЕЖИМЫ: карточки с картинкой своего типа (результаты из assets/upscale) ===== */
.up-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.up-mode{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);transition:transform .3s,border-color .3s}
.up-mode:hover{transform:translateY(-3px);border-color:rgba(244,114,182,.32)}
.up-mode--best{background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,var(--grad-line) border-box;border:1px solid transparent}
.up-mode__pic{position:relative;height:132px;overflow:hidden;background:var(--bg-3)}
.up-mode__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.up-mode:hover .up-mode__pic img{transform:scale(1.06)}
.up-mode__pic{-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%);mask-image:linear-gradient(180deg,#000 30%,transparent 100%);background:none}
.up-mode--auto .up-mode__pic img{object-position:50% 45%}
.up-mode--hq .up-mode__pic img{object-position:50% 40%}
.up-mode__body{position:relative;display:flex;flex:1;flex-direction:column;gap:10px;padding:0 18px 18px;margin-top:-22px}
.up-mode__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.up-mode__ico{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:13px;color:#fff;background:linear-gradient(145deg,rgba(251,113,133,.5),rgba(245,158,11,.3));border:1px solid rgba(251,113,133,.45);box-shadow:0 10px 24px -10px rgba(236,72,153,.8),0 0 0 4px rgba(10,14,26,.8)}
.up-mode__ico svg{width:20px;height:20px}
.up-mode h3{font-size:17px;font-weight:750;color:var(--text);margin:0}
.up-mode p{font-size:14px;line-height:1.55;color:var(--text-3)}
.up-mode__chips{display:flex;flex-wrap:wrap;gap:6px}
.up-mode__chips li{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--text-2);background:rgba(255,255,255,.04);border:1px solid var(--line-2)}
.up-mode__stats{display:grid;gap:6px}
.up-mode__stats li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2)}
.up-mode__stats svg{width:15px;height:15px;flex:none;color:var(--amber)}
.up-mode__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-4)}
.up-mode__foot b{color:var(--text);font:600 12.5px var(--mono)}
/* HQ — отдельный «золотой» акцент (медленная дорогая нейросеть) */
.up-mode--hq{background:linear-gradient(180deg,rgba(245,158,11,.07),transparent 50%),var(--panel);border-color:rgba(251,191,36,.28)}
.up-mode--hq .up-mode__ico{background:linear-gradient(145deg,rgba(251,191,36,.55),rgba(234,88,12,.35));border-color:rgba(251,191,36,.55);box-shadow:0 10px 24px -10px rgba(245,158,11,.85),0 0 0 4px rgba(10,14,26,.8)}
.up-mode--hq .tp-tag{color:#fde68a;border-color:rgba(251,191,36,.4)}
.up-mode--hq .up-mode__foot b{color:#fde68a}

/* ===== ПОДСВЕТКА РАМКИ ЗА КУРСОРОМ: карточки с собственным фоном-градиентом держат слой выше ===== */
.tp-glow{position:relative}

/* ===== АДАПТИВ ===== */
@media (max-width:1180px){
  .up-studio{--h:clamp(340px,40vw,460px);--sw:132px}
  .workspace-grid{grid-template-columns:minmax(0,1fr) 330px}
  .up-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .up-body--upload{grid-template-columns:1fr}
  .up-arrow{position:relative;top:auto;right:auto;justify-self:center;margin:-6px 0;transform:rotate(90deg)}
  .up-cmp--hero{width:min(100%,460px);height:auto;aspect-ratio:4/5!important;justify-self:center}
  .up-side{max-width:460px;justify-self:center}
  .up-side{width:100%}
  .up-scenes{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .up-scenes::-webkit-scrollbar{display:none}
  .up-scene{flex:none;width:auto;height:48px;padding-right:12px}
  .up-scene img{width:30px;height:38px}
  .up-demo__facts{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:6px 14px}
  .up-demo__row{justify-content:flex-start}
  .workspace-grid{grid-template-columns:1fr}
  .tools-panel{position:static}
  /* телефон/планшет: масштаб и кнопка — сразу под фото, режим и опции — ниже (только порядок показа) */
  .panel-section--scale{order:1}
  .panel-section--run{order:2}
  .panel-section--usage{order:3}
  .panel-section--mode{order:4}
  .panel-section--options{order:5}
  .up-reel__stage{grid-template-columns:1fr}
  .up-reel__info{border-left:0;border-top:1px solid var(--line)}
  .up-cmp--reel{height:auto;width:100%;max-width:520px;max-height:none}
}
@media (max-width:600px){
  .up-studio{--pad:12px}
  .up-drop{min-height:210px;padding:18px 14px}
  .up-drop__ico{width:56px;height:56px;border-radius:16px}
  .up-drop__ico svg{width:24px;height:24px}
  .up-drop__t{font-size:16.5px}
  .up-demo__facts{gap:6px 10px;padding:9px 10px;font-size:12px}
  .up-demo__facts b{font-size:11.5px}
  .up-demo__tip{display:none!important}
  .up-reel__facts{grid-template-columns:1fr 1fr}
  .up-reel__facts div:last-child{grid-column:1/-1}
  .up-reel__strip{grid-auto-columns:112px;scrollbar-width:none}
  .up-thumb__name{font-size:12px}
  .up-reel__strip::-webkit-scrollbar{display:none}
  .up-reel__cta .tp-btn{flex:1 1 auto}
  .up-reel__screen{padding:8px}
  /* режимы — горизонтальная лента карточек (вместо четырёх экранов подряд) */
  .up-modes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(300px,78vw);gap:10px;overflow-x:auto;margin:0 calc(-1 * var(--gut));padding:2px var(--gut) 10px;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .up-modes::-webkit-scrollbar{display:none}
  .up-mode{scroll-snap-align:start}
  .up-mode:hover{transform:none}
  .up-mode__pic{height:104px}
  .up-mode__body{padding:0 15px 15px;gap:9px}
  .up-mode p{font-size:13.5px}
  .export-zone{flex-direction:column;align-items:stretch}
  .final-download-btn{margin-left:0;width:100%}
  .export-format-selector{justify-content:center}
  .format-segment{flex:1}
  .up-cmp__tag{top:8px;height:24px;padding:0 8px;font-size:11px}
  .up-cmp__tag--before{left:8px}
  .up-cmp__tag--after{right:8px}
  .up-cmp__tag b{font-size:10px}
  .up-studio .tp-studio__foot{padding:10px}
  .up-studio .tp-chips{gap:6px}
  .up-studio .tp-chips li{height:30px;padding:0 10px;font-size:12px}
  .up-studio .tp-chips li:nth-child(3){display:none}
  .image-controls .control-btn{flex:1 1 calc(50% - 4px);justify-content:center}
}
@media (max-height:520px) and (orientation:landscape){
  .image-preview{--ph:max(300px,calc(100vh - 90px))}
}
@media (hover:none){.up-mode:hover,.tp-flow__step:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  .up-arrow svg,.up-drop:hover .up-drop__ico{animation:none}
  .up-mode:hover .up-mode__pic img{transform:none}
}