/* Cutlingo – strihový stôl
   Rezacia podložka, papier, voskovka a klapka. */
@font-face {
  font-family: "Archivo"; src: url("/static/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}

:root {
  --mat: #1D5A44;
  --mat-d: #154533;
  --grid: rgba(232, 244, 236, .15);
  --grid-fine: rgba(232, 244, 236, .055);
  --chalk: #EDF3EE;
  --chalk-2: rgba(237, 243, 238, .7);
  --chalk-3: rgba(237, 243, 238, .42);

  --paper: #FAFAF6;
  --paper-2: #F0F0E8;
  --rule: #E1E1D6;
  --ink: #1D1F1C;
  --ink-2: #4B4E48;
  --mute: #878A80;

  --red: #D93A1F;
  --red-d: #B32C13;
  --red-tint: rgba(217, 58, 31, .07);
  --tape: rgba(232, 221, 186, .9);
  --slate: #1E201F;

  --f: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --narrow: "wdth" 72;
  --cond: "wdth" 62;

  --lift: 0 1px 1px rgba(0, 0, 0, .14), 0 10px 22px -8px rgba(0, 0, 0, .45);
  --lift-hi: 0 2px 2px rgba(0, 0, 0, .12), 0 26px 40px -14px rgba(0, 0, 0, .55);
  --flat: 0 1px 0 rgba(0, 0, 0, .18), 0 2px 5px -1px rgba(0, 0, 0, .25);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.5, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--chalk); font: 400 16px/1.5 var(--f);
  -webkit-font-smoothing: antialiased; min-height: 100vh;
  background-color: var(--mat);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size: 160px 160px, 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-attachment: fixed;
}
/* uhlové vodiace čiary, ako na skutočnej podložke */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(45deg, transparent calc(50% - .5px), rgba(232, 244, 236, .1) 50%, transparent calc(50% + .5px)) no-repeat,
    linear-gradient(-60deg, transparent calc(50% - .5px), rgba(232, 244, 236, .07) 50%, transparent calc(50% + .5px)) no-repeat;
}
body > * { position: relative; z-index: 1; }
.dock, .viewer, .toast { position: fixed; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: 800; font-variation-settings: var(--narrow); letter-spacing: -.01em; line-height: 1.02; margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
[hidden] { display: none !important; }
kbd { font: 600 12px var(--f); padding: 1px 6px; border-radius: 3px; border: 1px solid var(--chalk-3); color: var(--chalk); }
.tc { font-variant-numeric: tabular-nums; font-variation-settings: var(--cond); font-weight: 600; letter-spacing: .02em; }

/* ---------- tlačidlá ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
  border: 0; border-radius: 3px; cursor: pointer; text-decoration: none; white-space: nowrap;
  font-weight: 700; font-size: 15px; font-variation-settings: "wdth" 90;
  background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink), 0 2px 0 var(--ink);
  transition: transform .12s var(--ease), box-shadow .12s;
}
.btn:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--ink), 0 3px 0 var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 var(--ink); }
.btn-primary { background: var(--red); color: #fff; box-shadow: inset 0 0 0 1.5px var(--red-d), 0 2px 0 var(--red-d); }
.btn-primary:hover { box-shadow: inset 0 0 0 1.5px var(--red-d), 0 3px 0 var(--red-d); }
.btn-primary:active { box-shadow: inset 0 0 0 1.5px var(--red-d), 0 0 0 var(--red-d); }
.btn-lg { height: 52px; font-size: 16px; padding: 0 26px; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 14px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-chalk { background: transparent; color: var(--chalk); box-shadow: inset 0 0 0 1.5px var(--chalk-3); }
.btn-chalk:hover, .btn-chalk:active { box-shadow: inset 0 0 0 1.5px var(--chalk); }
.link-btn { background: none; border: 0; cursor: pointer; padding: 6px 2px; font-size: 14px; color: var(--chalk-2); }
.link-btn:hover { color: var(--chalk); }

/* ---------- papier ---------- */
.paper { background: var(--paper); color: var(--ink); border-radius: 2px; box-shadow: var(--lift); }

/* ---------- formuláre ---------- */
.stack { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field > span { font-weight: 700; font-size: 14px; }
.field small { color: var(--mute); font-size: 13px; }
.field input {
  height: 46px; border: 0; border-bottom: 1.5px solid var(--ink); background: var(--paper-2); border-radius: 2px 2px 0 0;
  padding: 0 12px; font: 400 16px var(--f); color: var(--ink); width: 100%; transition: background .15s, border-color .15s;
}
.field input:focus, .auth-form select:focus { outline: none; background: #fff; border-bottom-color: var(--ink); box-shadow: 0 1.5px 0 var(--ink); }
.form-error { margin: 0; padding: 10px 12px; background: var(--red-tint); border-left: 3px solid var(--red); color: var(--red-d); font-weight: 600; animation: shake .4s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ---------- značka, lišta, pravítko ---------- */
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.brand span { font-weight: 900; font-size: 23px; font-variation-settings: var(--cond); letter-spacing: -.01em; }
.brand-mark { width: 22px; height: 22px; flex: none; }
.brand-mark { width: 26px; height: 26px; }
.brand-mark .t { fill: var(--red); }
.brand-mark .f { fill: none; stroke: #fff; stroke-opacity: .5; stroke-width: 1.8; }
.brand-mark .s { fill: #fff; }
/* písmeno i má namiesto bodky červený vertikálny klip */
.wm { font-weight: 900; font-variation-settings: var(--cond); letter-spacing: -.015em; }
.wm-i { position: relative; font-weight: inherit; }
.wm-i::after { content: ""; position: absolute; left: 50%; top: .04em; width: .16em; height: .27em; background: var(--red); border-radius: .025em; transform: translateX(-50%) rotate(8deg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.topbar { display: flex; align-items: center; gap: 22px; height: 60px; padding: 0 28px; }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.crumbs { display: flex; gap: 10px; align-items: center; min-width: 0; color: var(--chalk-3); }
.crumbs a { color: var(--chalk-2); text-decoration: none; }
.crumbs a:hover { color: var(--chalk); }
.crumb-current { color: var(--chalk); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
.meter { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--chalk-2); }
.meter b { color: var(--chalk); }
.meter-bar { width: 84px; height: 8px; background: rgba(0, 0, 0, .25); border-radius: 1px; overflow: hidden; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3); }
.meter-bar i { display: block; height: 100%; width: var(--p); background: var(--chalk); }
.meter-short { display: none; white-space: nowrap; }
.plan-tag { font-size: 13px; font-weight: 700; padding: 3px 9px; background: var(--tape); color: var(--ink); transform: rotate(-2deg); box-shadow: var(--flat); }

.ruler {
  height: 22px; margin: 0 0 8px; overflow: hidden; white-space: nowrap; color: var(--chalk-3); font-size: 10px; font-weight: 600;
  background:
    linear-gradient(90deg, var(--chalk-3) 1px, transparent 1px) 0 0 / 100px 14px repeat-x,
    linear-gradient(90deg, var(--chalk-3) 1px, transparent 1px) 50px 0 / 100px 9px repeat-x,
    linear-gradient(90deg, rgba(237, 243, 238, .25) 1px, transparent 1px) 0 0 / 10px 5px repeat-x;
  border-top: 1px solid var(--chalk-3);
}
.ruler span { display: inline-block; width: 100px; padding: 9px 0 0 4px; font-variant-numeric: tabular-nums; }

/* ---------- prihlásenie ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 500px) 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; padding: 90px clamp(20px, 5vw, 72px) 40px; }
.auth > .brand { position: absolute; top: 26px; left: clamp(20px, 5vw, 72px); color: var(--chalk); }
.auth-form { position: relative; padding: 40px 40px 34px; display: grid; gap: 26px; transform: rotate(-.6deg); animation: lay .7s var(--ease) both; }
@keyframes lay { from { opacity: 0; transform: translateY(-30px) rotate(-4deg); } }
.auth-form::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: var(--tape); transform: rotate(2deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.auth-form form { display: grid; gap: 18px; }
.auth-copy h1 { font-size: clamp(36px, 3.6vw, 50px); font-variation-settings: var(--cond); font-weight: 900; }
.auth-copy p { color: var(--ink-2); font-size: 17px; margin: 12px 0 0; }
.auth-switch { margin: 0; color: var(--ink-2); }
.auth-switch a { color: var(--red); font-weight: 700; }

.auth-demo { display: grid; gap: 26px; justify-items: center; }
.demo-frame { position: relative; width: min(620px, 100%); }
.demo-film { position: relative; aspect-ratio: 16 / 9; background: #141210; box-shadow: var(--lift-hi); padding: 18px 0; transform: rotate(1deg); }
.demo-film::before, .demo-film::after {
  content: ""; position: absolute; left: 0; right: 0; height: 18px; z-index: 4;
  background: radial-gradient(ellipse 5px 3.5px at 50% 50%, var(--mat) 98%, transparent) 0 50% / 22px 18px repeat-x;
}
.demo-film::before { top: 0; } .demo-film::after { bottom: 0; }
.demo-scene { position: relative; height: 100%; background: linear-gradient(170deg, #5E5A4E, #2E2B26 70%); overflow: hidden; }
.demo-lamp { position: absolute; left: 10%; top: 12%; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, #FFE3A8 0%, rgba(255, 227, 168, .18) 45%, transparent 70%); }
.demo-shelf { position: absolute; right: 8%; top: 28%; width: 24%; height: 7px; background: #6D6656; box-shadow: 0 -24px 0 -2px #8A7F66, 26px -22px 0 -1px #9A5E45, 58px -20px 0 0 #4E6A62; }
.demo-person { position: absolute; bottom: 0; left: 30%; width: 22%; height: 82%; animation: sway 8s var(--ease) infinite; }
.demo-person .head { position: absolute; left: 50%; top: 4%; width: 44%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(160deg, #E3B590, #A8714F); }
.demo-person .body { position: absolute; left: 50%; bottom: 0; width: 100%; height: 54%; transform: translateX(-50%); border-radius: 44% 44% 0 0; background: linear-gradient(160deg, #3F6E8C, #24455C); }
.demo-mic { position: absolute; bottom: 0; left: 52%; width: 6%; height: 34%; border-radius: 8px 8px 0 0; background: #121110; }
.demo-cut {
  position: absolute; top: 0; bottom: 0; left: 30%; width: 31.6%; z-index: 3;
  outline: 2px dashed #fff; outline-offset: -2px; box-shadow: 0 0 0 999px rgba(20, 18, 15, .58);
  animation: follow 8s var(--ease) infinite;
}
.demo-cut svg { position: absolute; width: 24px; height: 24px; fill: #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); offset-path: inset(0); animation: snip 4s linear infinite; }
@supports not (offset-path: inset(0)) { .demo-cut svg { top: -12px; left: -12px; animation: none; } }
.demo-caption { position: absolute; left: 0; right: 0; bottom: 16%; text-align: center; font-weight: 900; font-variation-settings: var(--narrow);
  font-size: clamp(11px, 1.5vw, 16px); color: #fff; text-transform: uppercase; text-shadow: 0 2px 0 #000, 0 0 6px rgba(0, 0, 0, .7); }
.demo-caption span { display: inline-block; margin: 0 .12em; animation: word 2.1s steps(1) infinite; }
.demo-caption span:nth-child(2) { animation-delay: .7s; }
.demo-caption span:nth-child(3) { animation-delay: 1.4s; }
@keyframes word { 0% { color: #FFE14D; transform: scale(1.12); } 33% { color: #fff; transform: none; } }
@keyframes sway { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(55%); } 70% { transform: translateX(35%); } }
@keyframes follow { 0%, 100% { left: 26%; } 40% { left: 38%; } 70% { left: 33.5%; } }
@keyframes snip { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.demo-slip { position: relative; width: min(540px, 92%); padding: 16px 20px 16px 26px; font-size: 16px; line-height: 1.6; transform: rotate(-.8deg); }
.demo-slip p { margin: 0; }
.demo-slip mark { color: inherit; background: none; padding: 0; }
.demo-slip::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: 44%; width: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 100' preserveAspectRatio='none'%3E%3Cpath d='M4.6 0 C3.4 18 5.8 34 4.3 52 3.2 68 5.6 84 4.4 100' fill='none' stroke='%23D93A1F' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  animation: drawloop 8s var(--ease) infinite; }
@keyframes drawloop { 0%, 8% { clip-path: inset(0 0 100% 0); } 22%, 90% { clip-path: inset(0); } 100% { clip-path: inset(0 0 100% 0); } }
.demo-note { color: var(--chalk-2); max-width: 46ch; text-align: center; margin: 0; font-size: 15px; }

/* ---------- prehľad videí ---------- */
.dash { max-width: 1040px; margin: 0 auto; padding: 24px 28px 96px; }
.dash-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.dash-head h1 { font-size: clamp(42px, 6vw, 76px); font-weight: 900; font-variation-settings: var(--cond); }
.dash-head p { color: var(--chalk-2); font-size: 16px; margin: 0 0 6px; max-width: 40ch; }

.drop {
  position: relative; margin-top: 30px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
  padding: 30px 34px; cursor: pointer; background: var(--paper); color: var(--ink); border-radius: 2px; box-shadow: var(--lift);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.drop::after { content: ""; position: absolute; inset: 10px; border: 1.5px dashed #B9BAAE; pointer-events: none; transition: border-color .2s, inset .3s var(--ease); }
.drop:hover { transform: translateY(-2px) rotate(-.3deg); box-shadow: var(--lift-hi); }
.drop.over { transform: scale(1.012); }
.drop.over::after { border-color: var(--red); inset: 5px; }
.drop-art { width: 74px; height: 74px; display: grid; place-items: center; background: var(--slate); border-radius: 2px; transform: rotate(-4deg); box-shadow: var(--flat); transition: transform .35s var(--spring); }
.drop-art svg { width: 36px; height: 36px; fill: var(--paper); }
.drop:hover .drop-art { transform: rotate(4deg) scale(1.06); }
.drop-text { display: grid; gap: 3px; }
.drop-text b { font-size: 27px; font-weight: 800; font-variation-settings: var(--narrow); }
.drop-text span { color: var(--ink-2); }
.drop-text u { color: var(--red); text-underline-offset: 3px; }
.drop-opt { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); cursor: default; max-width: 200px; }
.drop-opt input { width: 18px; height: 18px; accent-color: var(--red); flex: none; }

.upload-card { margin-top: 18px; display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; align-items: center; padding: 16px 20px;
  background: var(--paper); color: var(--ink); border-radius: 2px; box-shadow: var(--lift); animation: lay .5s var(--ease); }
.upload-card b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-card .pct { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.upload-bar { grid-column: 1 / -1; position: relative; height: 26px; background: #141210; overflow: hidden; }
.upload-bar::before, .upload-bar::after { content: ""; position: absolute; left: 0; right: 0; height: 5px; z-index: 2;
  background: radial-gradient(ellipse 3px 2px at 50% 50%, var(--paper) 98%, transparent) 0 0 / 12px 5px repeat-x; }
.upload-bar::before { top: 1px; } .upload-bar::after { bottom: 1px; }
.upload-bar i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); transition: width .3s linear;
  background: repeating-linear-gradient(90deg, #C9572F 0 34px, #141210 34px 37px); }
.upload-card.err { box-shadow: inset 3px 0 0 var(--red), var(--lift); }
.upload-card.err .pct { color: var(--red); font-weight: 600; }

.upsell { margin-top: 30px; display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 30px 30px 26px;
  background: var(--slate); border-radius: 2px; box-shadow: var(--lift); position: relative; overflow: hidden; }
.upsell::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: repeating-linear-gradient(-55deg, var(--chalk) 0 16px, var(--slate) 16px 32px); }
.upsell h2 { font-size: 28px; font-variation-settings: var(--cond); font-weight: 900; }
.upsell p { color: var(--chalk-2); margin: 6px 0 0; max-width: 52ch; }

.log { margin-top: 48px; }
.log-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.log-head h2 { font-size: 30px; font-variation-settings: var(--cond); font-weight: 900; }
.log-head span { color: var(--chalk-3); font-size: 14px; }
.log-sheet { padding: 4px 0 8px; }
.log-row, .log-cols { display: grid; grid-template-columns: 120px minmax(0, 1fr) 80px 60px 150px; gap: 18px; align-items: center; padding: 10px 24px; }
.log-cols { font-size: 12px; color: var(--mute); font-weight: 600; border-bottom: 1.5px solid var(--ink); padding-top: 12px; padding-bottom: 8px; }
.log-row { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); transition: background .15s; }
.log-row:last-child { border-bottom: 0; }
.log-row:hover { background: var(--red-tint); }
.log-row:hover .pr-thumb img { transform: scale(1.08) rotate(-1deg); }
.pr-thumb { width: 120px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); outline: 1px solid var(--rule); }
.pr-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.pr-title { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-state { font-size: 14px; color: var(--ink-2); }
.pr-state .bad { color: var(--red); font-weight: 600; }
.working { display: inline-flex; align-items: center; gap: 8px; }
.working i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink-2); border-top-color: transparent; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { color: var(--mute); padding: 22px 24px; margin: 0; }

/* ---------- spracovanie ---------- */
.processing, .failed { max-width: 640px; margin: 0 auto; padding: 50px 28px; display: grid; justify-items: center; text-align: center; }
.processing h1, .failed h1 { font-size: 48px; font-variation-settings: var(--cond); font-weight: 900; }
.failed p { color: var(--chalk-2); margin: 12px 0 24px; }
.reel { width: min(540px, 100%); height: 100px; margin-bottom: 36px; position: relative; overflow: hidden; background: #141210; box-shadow: var(--lift-hi); transform: rotate(-1.5deg);
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.reel-strip { position: absolute; inset: 0 auto 0 0; width: calc(100% + 80px); animation: roll 1.1s linear infinite; }
.reel-strip::before, .reel-strip::after { content: ""; position: absolute; left: 0; right: 0; height: 15px;
  background: radial-gradient(ellipse 4px 3px at 50% 50%, var(--mat) 98%, transparent) 0 50% / 20px 15px repeat-x; }
.reel-strip::before { top: 0; } .reel-strip::after { bottom: 0; }
.reel-frames { position: absolute; top: 15px; bottom: 15px; left: 0; right: 0;
  background:
    linear-gradient(90deg, transparent 0 76px, #141210 76px 80px) 0 0 / 80px 100%,
    radial-gradient(circle at 38% 40%, #E3B590 0 9px, transparent 10px) 0 0 / 80px 100%,
    radial-gradient(ellipse 18px 20px at 38% 105%, #3F6E8C 0 98%, transparent) 0 0 / 80px 100%,
    linear-gradient(170deg, #6B6252, #3A352D) 0 0 / 80px 100%; }
@keyframes roll { to { transform: translateX(-80px); } }
.proc-steps { list-style: none; padding: 16px 26px; margin: 28px 0 0; display: grid; text-align: left; transform: rotate(.8deg); min-width: 330px; }
.proc-steps li { display: flex; gap: 12px; align-items: center; padding: 9px 0; color: var(--mute); border-bottom: 1px solid var(--rule); }
.proc-steps li:last-child { border-bottom: 0; }
.proc-steps li::before { content: ""; width: 18px; height: 18px; border: 1.5px solid #B9BAAE; border-radius: 2px; flex: none; transition: all .3s var(--spring); }
.proc-steps li.active { color: var(--ink); font-weight: 700; }
.proc-steps li.active::before { border-color: var(--red); background: radial-gradient(circle, var(--red) 0 3px, transparent 4px); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { background: none; } }
.proc-steps li.done { color: var(--ink-2); }
.proc-steps li.done::before { border-color: var(--ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13c3 2 4 4 5 6 3-6 6-10 11-14' fill='none' stroke='%23D93A1F' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center/20px no-repeat; transform: rotate(-6deg) scale(1.1); }
.proc-note { color: var(--chalk-3); font-size: 14px; margin-top: 26px; }

/* ---------- editor ---------- */
.project-page main { padding-bottom: 190px; }
.editor { display: grid; grid-template-columns: minmax(340px, 500px) minmax(0, 1fr); gap: 40px; max-width: 1380px; margin: 0 auto; padding: 6px 28px 0; align-items: start; }
.ed-media { position: sticky; top: 18px; display: grid; gap: 16px; }

.monitor { background: #121312; padding: 10px 10px 0; border-radius: 4px; box-shadow: var(--lift-hi), inset 0 1px 0 rgba(255, 255, 255, .06); }
.player { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.player video { width: 100%; height: 100%; object-fit: contain; }
.player-play { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; border-radius: 50%; border: 2px solid #fff; cursor: pointer;
  transform: translate(-50%, -50%); background: rgba(0, 0, 0, .35); display: grid; place-items: center; backdrop-filter: blur(4px);
  transition: transform .25s var(--spring), opacity .25s, background .2s, border-color .2s; }
.player-play svg { width: 22px; fill: #fff; margin-left: 3px; }
.player-play:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--red); border-color: var(--red); }
.monitor.playing .player-play { opacity: 0; pointer-events: none; }
.monitor.playing .player:hover .player-play { opacity: 1; pointer-events: auto; }
.monitor.playing .player-play svg { margin-left: 0; }
.monitor-bar { display: flex; justify-content: space-between; align-items: center; height: 34px; color: #7F857F; font-size: 12px; }
.timecode { color: #FF5A3C; font-size: 18px; text-shadow: 0 0 8px rgba(255, 90, 60, .45); }
.rec-dot { display: inline-flex; align-items: center; gap: 6px; }
.rec-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #474C47; }
.monitor.playing .rec-dot::before { background: #FF5A3C; box-shadow: 0 0 6px #FF5A3C; }

.timeline { position: relative; height: 48px; background: #141210; cursor: pointer; padding: 11px 0; box-shadow: var(--lift); }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 0; right: 0; height: 11px;
  background: radial-gradient(ellipse 3.5px 2.6px at 50% 50%, var(--mat) 98%, transparent) 0 50% / 14px 11px repeat-x; }
.timeline::before { top: 0; } .timeline::after { bottom: 0; }
.tl-track { position: relative; height: 100%; }
.tl-seg { position: absolute; top: 0; bottom: 0; background: #4A443A; box-shadow: inset -2px 0 0 #141210; transition: background .2s; }
.tl-seg:hover { background: #6A6152; }
.tl-seg.rec { box-shadow: inset -2px 0 0 #141210, inset 0 -4px 0 #C9A646; }
.tl-seg.sel { background: var(--red); }
.tl-head { position: absolute; top: -11px; bottom: -11px; width: 2px; background: #fff; left: 0; pointer-events: none; box-shadow: 0 0 6px rgba(255, 255, 255, .8); }

.ed-help { font-size: 14px; color: var(--chalk-2); }
.ed-help p { margin: 0 0 6px; }
.ed-help b { color: var(--chalk); }
.keys { color: var(--chalk-3); }

.suggest h2 { font-size: 24px; font-variation-settings: var(--cond); font-weight: 900; margin: 4px 0 12px; }
.suggest-list { display: grid; gap: 12px; }
.sug { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; text-align: left; padding: 12px 16px 12px 12px; border: 0;
  background: var(--paper); color: var(--ink); border-radius: 2px; cursor: pointer; box-shadow: var(--flat); position: relative;
  transition: transform .25s var(--spring), box-shadow .25s; }
.sug:nth-child(odd) { transform: rotate(-.6deg); } .sug:nth-child(even) { transform: rotate(.5deg); }
.sug:hover { transform: rotate(0) translateX(6px); box-shadow: var(--lift); }
.sug-score { width: 46px; height: 46px; display: grid; place-items: center; font-weight: 900; font-size: 20px; font-variation-settings: var(--cond); color: var(--red);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M24 4c10 0 18 7 18 18 0 11-8 19-19 19S4 34 4 23C4 12 12 5 22 6c3 0 5 1 7 2' fill='none' stroke='%23D93A1F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.sug-body { display: grid; min-width: 0; }
.sug-body b { font-weight: 700; font-size: 15px; }
.sug-body span { font-size: 13px; color: var(--mute); }
.sug-len { font-size: 14px; color: var(--ink-2); }

.ed-text { min-width: 0; }
.ed-text-head { display: flex; gap: 20px; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.ed-text-head h1 { font-size: clamp(36px, 4vw, 56px); font-variation-settings: var(--cond); font-weight: 900; }
.search { position: relative; display: block; width: 250px; }
.search svg { position: absolute; left: 0; top: 50%; width: 18px; transform: translateY(-50%); fill: none; stroke: var(--chalk-2); stroke-width: 2; }
.search input { width: 100%; height: 40px; padding: 0 0 0 28px; border: 0; border-bottom: 1.5px solid var(--chalk-3); background: transparent; color: var(--chalk); font: 400 15px var(--f); }
.search input::placeholder { color: var(--chalk-3); }
.search input:focus { outline: none; border-bottom-color: var(--chalk); }

.transcript { padding: 30px 0 36px; user-select: none; -webkit-user-select: none; position: relative;
  background: var(--paper) linear-gradient(90deg, transparent 107px, rgba(217, 58, 31, .28) 107px 108px, transparent 108px); }
.sec { position: relative; display: grid; grid-template-columns: 108px 1fr; padding: 13px 40px 13px 0; cursor: pointer; transition: background .2s; }
.sec:hover { background: rgba(0, 0, 0, .025); }
.sec-gutter { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 4px 22px 0 0; }
.sec-time { font-size: 14px; color: var(--mute); }
.sec-play { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; cursor: pointer; background: var(--paper);
  opacity: 0; transform: scale(.7) rotate(-30deg); transition: all .25s var(--spring); }
.sec-play svg { width: 11px; fill: var(--ink); margin-left: 2px; }
.sec:hover .sec-play, .sec-play:focus-visible { opacity: 1; transform: none; }
.sec-play:hover { background: var(--red); border-color: var(--red); }
.sec-play:hover svg { fill: #fff; }
.sec-rec { position: absolute; left: 14px; top: 11px; width: 22px; height: 22px; color: #C9A646; }
.sec-text { font-size: 18.5px; line-height: 1.7; color: var(--ink); max-width: 66ch; padding-left: 24px; }
.w { border-radius: 2px; transition: color .1s; }
.w.now { color: var(--red); box-shadow: inset 0 -2px 0 var(--red); }
.w.hit { background: #FFE98A; }
.sec.dim { opacity: .3; }
.sec + .sec::after { content: ""; position: absolute; top: 0; left: 108px; right: 40px; border-top: 1px solid var(--rule); }

/* vybraté = voskovka v okraji + strih nad a pod */
.sec.sel { background: var(--red-tint); }
.sec.sel .sec-time { color: var(--red); }
.sec.sel .sec-rec { display: none; }
.sec.sel::before { content: ""; position: absolute; left: 95px; top: 0; bottom: 0; width: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 100' preserveAspectRatio='none'%3E%3Cpath d='M4.6 0 C3.4 18 5.8 34 4.3 52 3.2 68 5.6 84 4.4 100' fill='none' stroke='%23D93A1F' stroke-width='5' stroke-linecap='round' opacity='.92'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  animation: draw .35s var(--ease) both; }
.sec.run-start::before { top: 10px; } .sec.run-end::before { bottom: 10px; }
@keyframes draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.sec.sel + .sec::after { border-top-color: transparent; }
.sec.sel + .sec.sel::after { border-top-color: rgba(217, 58, 31, .14); }
.cut { position: absolute; left: 0; right: 0; height: 0; z-index: 3; pointer-events: none; border-top: 1.5px dashed var(--ink); animation: dash-in .6s var(--ease) both; }
.cut.top { top: -1px; } .cut.bottom { bottom: -1px; }
.cut svg { position: absolute; width: 22px; height: 22px; top: -12px; left: 8px; fill: var(--ink); animation: snip-run .6s var(--ease) both; }
.cut.bottom svg { transform: scaleY(-1); }
@keyframes snip-run { from { left: calc(100% - 30px); } }
@keyframes dash-in { from { clip-path: inset(-14px 0 -14px 100%); } to { clip-path: inset(-14px 0 -14px 0); } }
.run-label { position: absolute; right: 40px; top: -13px; z-index: 4; font-size: 13px; font-weight: 800; padding: 3px 10px; white-space: nowrap;
  background: var(--tape); color: var(--ink); transform: rotate(-1.5deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); animation: tape .45s var(--spring) both; }
.run-label.warn { background: #F6C9A9; }
@keyframes tape { from { opacity: 0; transform: rotate(-8deg) scale(.7); } }

/* ---------- klapka ---------- */
.dock { left: 50%; bottom: 18px; z-index: 40; width: min(1100px, calc(100% - 32px)); transform: translate(-50%, calc(100% + 60px)); transition: transform .55s var(--spring); }
.dock.open { transform: translate(-50%, 0); }
.dock-clap { position: relative; height: 22px; margin: 0 6px -1px; transform-origin: 0 100%;
  background: repeating-linear-gradient(-55deg, var(--chalk) 0 20px, var(--slate) 20px 40px); border-radius: 3px 3px 0 0; }
.dock.open .dock-clap { animation: clap .75s var(--ease) .12s both; }
@keyframes clap { 0%, 50% { transform: rotate(-12deg); } 72% { transform: rotate(1.2deg); } 100% { transform: rotate(0); } }
.dock-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 14px 14px 14px 22px;
  background: var(--slate); border-radius: 0 0 3px 3px; box-shadow: 0 30px 50px -18px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .06); }
.dock-summary { display: grid; line-height: 1.15; }
.dock-summary b { font-size: 26px; font-weight: 900; font-variation-settings: var(--cond); }
.dock-summary span { color: var(--chalk-2); font-size: 13px; }
.dock-summary .warn { color: #FFB37E; }
.dock-opts { display: flex; gap: 18px; align-items: center; min-width: 0; }
.dock-hook { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.dock-hook span { font-size: 13px; color: var(--chalk-2); white-space: nowrap; }
.dock-hook input { width: 100%; height: 40px; border: 0; border-bottom: 1.5px solid var(--chalk-3); background: rgba(255, 255, 255, .05); color: var(--chalk); padding: 0 10px; font: 400 15px var(--f); }
.dock-hook input::placeholder { color: var(--chalk-3); }
.dock-hook input:focus { outline: none; border-bottom-color: var(--chalk); background: rgba(255, 255, 255, .09); }
.swatches { display: flex; gap: 7px; }
.sw { width: 22px; height: 22px; border-radius: 2px; border: 0; cursor: pointer; background: var(--c); transition: transform .2s var(--spring); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.sw:hover { transform: translateY(-2px); }
.sw.on { transform: translateY(-3px) rotate(-6deg); box-shadow: 0 0 0 2px var(--slate), 0 0 0 3.5px var(--c); }
.dock-actions { display: flex; gap: 8px; }

/* ---------- vystrihnuté klipy ---------- */
.shelf { max-width: 1380px; margin: 70px auto 0; padding: 0 28px; }
.shelf-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.shelf-head h2 { font-size: 38px; font-variation-settings: var(--cond); font-weight: 900; }
.shelf-head p { margin: 0; color: var(--chalk-2); font-size: 14px; }
.shelf-row { display: flex; gap: 34px; overflow-x: auto; padding: 22px 8px 34px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--chalk-3) transparent; }
.clip { flex: 0 0 210px; scroll-snap-align: start; display: grid; gap: 12px; align-content: start; position: relative; --r: -1.6deg; animation: pin .7s var(--spring) both; }
.clip:nth-child(3n+2) { --r: 1.3deg; } .clip:nth-child(3n) { --r: -.5deg; }
@keyframes pin { from { opacity: 0; transform: translateY(-46px) rotate(calc(var(--r) * 6)); } }
.clip-print { position: relative; padding: 8px 8px 0; background: var(--paper); box-shadow: var(--lift); transform: rotate(var(--r)); transition: transform .4s var(--spring), box-shadow .4s; }
.clip-print::before { content: ""; position: absolute; z-index: 3; top: -11px; left: 50%; width: 76px; height: 22px; margin-left: -38px; background: var(--tape); transform: rotate(calc(var(--r) * -2.5)); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.clip:hover .clip-print { transform: rotate(0) translateY(-8px) scale(1.02); box-shadow: var(--lift-hi); }
.clip-phone { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: #141210; padding: 0; border: 0; cursor: pointer; }
.clip-phone img, .clip-phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-phone video { opacity: 0; transition: opacity .25s; }
.clip-phone.hovering video { opacity: 1; }
.clip-foot { display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 2px; color: var(--ink); font-size: 13px; }
.clip-foot b { font-size: 15px; }
.clip-wait { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; text-align: center; color: var(--chalk); padding: 16px;
  background: repeating-linear-gradient(-55deg, #1E201F 0 18px, #262927 18px 36px); background-size: 200% 200%; animation: stripes 2.4s linear infinite; }
.clip-wait b { font-size: 24px; font-variation-settings: var(--cond); font-weight: 900; }
.clip-wait span { font-size: 13px; color: var(--chalk-2); }
.clip-wait .bar { width: 120px; height: 0; border-top: 2px dashed var(--chalk-3); margin: 12px auto 0; position: relative; }
.clip-wait .bar i { position: absolute; top: -11px; left: 0; width: 20px; height: 20px; animation: cutacross 1.6s linear infinite; }
.clip-wait .bar i svg { width: 20px; height: 20px; fill: var(--chalk); }
@keyframes stripes { to { background-position: 72px 0; } }
@keyframes cutacross { from { left: -10px; } to { left: 110px; } }
.clip.error .clip-wait { background: #3B1E17; animation: none; }
.clip-meta { display: grid; gap: 2px; padding: 0 4px; }
.clip-meta b { font-size: 15px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clip-meta span { font-size: 13px; color: var(--chalk-2); }
.clip-actions { display: flex; gap: 8px; padding: 0 4px; }
.icon-btn { height: 34px; min-width: 34px; padding: 0 10px; gap: 6px; border-radius: 3px; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; color: var(--chalk); box-shadow: inset 0 0 0 1.5px var(--chalk-3); text-decoration: none; font-weight: 700; font-size: 13px; transition: box-shadow .15s, transform .15s; }
.icon-btn:hover { box-shadow: inset 0 0 0 1.5px var(--chalk); transform: translateY(-1px); }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.dl { background: var(--chalk); color: var(--ink); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }

/* ---------- prehrávač klipu ---------- */
.viewer { inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; }
.viewer-backdrop { position: absolute; inset: 0; background: rgba(10, 30, 22, .8); backdrop-filter: blur(6px); animation: fade .3s; }
.viewer-body { position: relative; display: grid; grid-template-columns: auto 360px; gap: 44px; align-items: center; animation: lift .5s var(--spring); }
.phone { width: min(340px, 42vh); aspect-ratio: 9 / 16; overflow: hidden; background: #000; border: 10px solid var(--paper); border-bottom-width: 40px; box-sizing: content-box; box-shadow: var(--lift-hi); transform: rotate(-1deg); }
.phone video { width: 100%; height: 100%; object-fit: cover; }
.viewer-side { display: grid; gap: 14px; }
.viewer-side h3 { font-size: 36px; font-variation-settings: var(--cond); font-weight: 900; }
.viewer-side > p { color: var(--chalk-2); margin: 0; font-size: 15px; max-height: 30vh; overflow: auto; }
.viewer-caption { padding: 14px 16px; display: grid; gap: 8px; transform: rotate(.6deg); }
.viewer-caption span { font-size: 13px; color: var(--mute); font-weight: 600; }
.viewer-caption p { margin: 0; font-size: 14px; white-space: pre-wrap; }
.viewer-caption .btn { justify-self: start; }
.viewer-actions { display: flex; gap: 10px; }
@keyframes fade { from { opacity: 0; } }
@keyframes lift { from { opacity: 0; transform: translateY(30px) rotate(-2deg) scale(.95); } }

/* ---------- toast ---------- */
.toast { left: 50%; top: 16px; z-index: 80; transform: translate(-50%, calc(-100% - 40px)) rotate(-1deg); visibility: hidden;
  padding: 11px 18px; background: var(--tape); color: var(--ink); font-weight: 700; font-size: 15px; box-shadow: var(--lift); max-width: calc(100% - 32px);
  transition: transform .45s var(--spring), visibility 0s .45s; }
.toast.show { transform: translate(-50%, 0) rotate(-1deg); visibility: visible; transition: transform .45s var(--spring), visibility 0s; }
.toast.bad { background: var(--red); color: #fff; }

/* ---------- mobil ---------- */
@media (max-width: 980px) {
  .auth { grid-template-columns: 1fr; padding-top: 80px; }
  .auth-demo { order: -1; }
  .demo-note, .demo-slip { display: none; }
  .editor { grid-template-columns: 1fr; gap: 18px; padding: 6px 14px 0; }
  .ed-media { position: sticky; top: 0; z-index: 5; gap: 8px; margin: 0 -14px; padding: 8px 14px 10px; background: var(--mat-d); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6); }
  .ed-help, .suggest { display: none; }
  .monitor { padding: 6px 6px 0; }
  .monitor-bar { height: 28px; }
  .timeline { height: 38px; padding: 9px 0; }
  .timeline::before, .timeline::after { height: 9px; }
  .ed-text-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .search { width: 100%; }
  .transcript { background: var(--paper) linear-gradient(90deg, transparent 63px, rgba(217, 58, 31, .28) 63px 64px, transparent 64px); }
  .sec { grid-template-columns: 64px 1fr; padding-right: 16px; }
  .sec + .sec::after { left: 64px; right: 16px; }
  .sec.sel::before { left: 53px; width: 8px; }
  .sec-gutter { padding-right: 14px; }
  .sec-time { font-size: 13px; }
  .sec-text { font-size: 16.5px; padding-left: 14px; }
  .sec-rec { left: 4px; width: 18px; }
  .run-label { right: 14px; }
  .dock { bottom: 8px; width: calc(100% - 16px); }
  .dock-inner { grid-template-columns: 1fr auto; gap: 12px; padding: 12px; }
  .dock-opts { grid-column: 1 / -1; grid-row: 2; }
  .dock-hook span { display: none; }
  .viewer-body { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .viewer-side { width: min(360px, 100%); }
  .phone { width: min(260px, 60vw); }
  .log-row, .log-cols { grid-template-columns: 96px minmax(0, 1fr) 70px; }
  .log-cols span:nth-child(4), .log-cols span:nth-child(5), .log-row > :nth-child(4), .log-row > :nth-child(5) { display: none; }
  .pr-thumb { width: 96px; }
}
@media (max-width: 640px) {
  .topbar { padding: 0 14px; gap: 12px; height: 54px; }
  .meter-bar, .plan-tag, .ruler { display: none; }
  .crumbs > a, .crumbs > span[aria-hidden] { display: none; }
  .topbar .brand .wm { display: none; }
  .topbar-end { gap: 10px; }
  .meter-long { display: none; }
  .meter-short { display: inline; }
  .topbar .lang-btn span { display: none; }
  .crumb-current { max-width: 34vw; }
  .dash { padding: 14px 14px 80px; }
  .drop { grid-template-columns: auto 1fr; padding: 22px; gap: 16px; }
  .drop-art { width: 56px; height: 56px; }
  .drop-opt { grid-column: 1 / -1; max-width: none; }
  .drop-text b { font-size: 22px; }
  .log-row, .log-cols { padding-left: 14px; padding-right: 14px; gap: 12px; }
  .upsell { flex-direction: column; align-items: flex-start; }
  .auth-form { padding: 30px 22px 26px; }
  .clip { flex-basis: 168px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- ikony ---------- */
.scissors { fill: none !important; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.demo-cut .scissors { color: #fff; }
.cut .scissors { color: var(--ink); background: var(--paper); border-radius: 50%; }
.sec.sel .cut .scissors { background: #F8EEE8; }
.clip-wait .bar i .scissors { color: var(--chalk); }
.drop-art svg { fill: none; stroke: var(--paper); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- kľúčové slová pri nahratí ---------- */
.terms { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; margin-top: 14px; padding: 14px 20px; transform: rotate(.25deg); }
.terms > span { font-weight: 700; font-size: 14px; }
.terms input { height: 40px; border: 0; border-bottom: 1.5px solid var(--ink); background: var(--paper-2); padding: 0 10px; font: 400 15px var(--f); color: var(--ink); }
.terms input:focus { outline: none; background: #fff; border-bottom-color: var(--red); }
.terms small { grid-column: 2; color: var(--mute); font-size: 13px; }
@media (max-width: 640px) { .terms { grid-template-columns: 1fr; } .terms small { grid-column: 1; } }

/* ---------- oprava slova ---------- */
.w.fixed { box-shadow: inset 0 -1.5px 0 rgba(217, 58, 31, .35); }
.w-edit { font: inherit; color: var(--ink); background: #fff; border: 0; outline: 2px solid var(--red); border-radius: 2px; padding: 0 3px; margin: 0 -3px; min-width: 3ch; }
.ed-help .fix-tip { color: var(--chalk-2); }
.w.gone { text-decoration: line-through; text-decoration-color: var(--red); color: var(--mute); }

.viewer-subs { display: grid; gap: 6px; }
.viewer-subs > span { font-size: 13px; color: var(--chalk-3); }
.viewer-subs p { margin: 0; color: var(--chalk); font-size: 16px; line-height: 1.7; max-height: 34vh; overflow: auto; }
.viewer-subs .w { cursor: text; padding: 0 1px; }
.viewer-subs .w:hover { background: rgba(255, 255, 255, .12); }
.viewer-subs .w.fixed { box-shadow: inset 0 -1.5px 0 #FF8A6E; }
.viewer-subs .w.gone { color: var(--chalk-3); }
.viewer-subs .w-edit { color: var(--ink); }

/* ---------- štýl titulkov ---------- */
@font-face { font-family: "CL Montserrat"; src: url("/static/fonts/cap-montserrat.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Anton"; src: url("/static/fonts/cap-anton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Bebas"; src: url("/static/fonts/cap-bebas.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Oswald"; src: url("/static/fonts/cap-oswald.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Barlow"; src: url("/static/fonts/cap-barlow.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Archivo"; src: url("/static/fonts/cap-archivo.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Poppins"; src: url("/static/fonts/cap-poppins.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Rubik"; src: url("/static/fonts/cap-rubik.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Inter"; src: url("/static/fonts/cap-inter.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Nunito"; src: url("/static/fonts/cap-nunito.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Kanit"; src: url("/static/fonts/cap-kanit.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Lexend"; src: url("/static/fonts/cap-lexend.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Sora"; src: url("/static/fonts/cap-sora.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Space"; src: url("/static/fonts/cap-space.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Work Sans"; src: url("/static/fonts/cap-worksans.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Exo"; src: url("/static/fonts/cap-exo.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Baloo"; src: url("/static/fonts/cap-baloo.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Russo"; src: url("/static/fonts/cap-russo.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Righteous"; src: url("/static/fonts/cap-righteous.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Titan"; src: url("/static/fonts/cap-titan.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Bungee"; src: url("/static/fonts/cap-bungee.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Bangers"; src: url("/static/fonts/cap-bangers.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Rubik Mono"; src: url("/static/fonts/cap-rubikmono.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Black Ops"; src: url("/static/fonts/cap-blackops.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Paytone"; src: url("/static/fonts/cap-paytone.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Playfair"; src: url("/static/fonts/cap-playfair.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL DM Serif"; src: url("/static/fonts/cap-dmserif.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Caveat"; src: url("/static/fonts/cap-caveat.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Kalam"; src: url("/static/fonts/cap-kalam.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CL Patrick"; src: url("/static/fonts/cap-patrick.woff2") format("woff2"); font-display: swap; }

.sty-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 6px; border: 0; border-radius: 3px; cursor: pointer;
  background: rgba(255, 255, 255, .06); color: var(--chalk); box-shadow: inset 0 0 0 1.5px var(--chalk-3); font-weight: 700; font-size: 14px; white-space: nowrap; transition: box-shadow .15s; }
.sty-btn:hover { box-shadow: inset 0 0 0 1.5px var(--chalk); }
.sty-chip { width: 30px; height: 28px; display: grid; place-items: center; border-radius: 2px; font-size: 16px; line-height: 1; }

.styler { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; }
.styler-body { position: relative; display: grid; grid-template-columns: auto minmax(320px, 420px); gap: 30px; padding: 26px; max-height: calc(100vh - 40px); overflow: auto; animation: lift .45s var(--spring); }
.sty-stage { display: grid; gap: 10px; align-content: start; justify-items: center; }
.sty-phone { position: relative; height: min(640px, calc(100vh - 140px)); aspect-ratio: 9 / 16; background: #141210; overflow: hidden; box-shadow: 0 0 0 6px var(--slate), var(--lift-hi); touch-action: none; }
.sty-phone canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sty-safe i { position: absolute; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 6px, transparent 6px 12px); pointer-events: none; }
.sty-safe .r { top: 30%; bottom: 20%; right: 0; width: 15%; }
.sty-safe .b { left: 0; right: 0; bottom: 0; height: 18%; }
.sty-cap { position: absolute; text-align: center; line-height: 1.12; white-space: nowrap; cursor: grab; user-select: none; paint-order: stroke fill;
  border-radius: 4px; outline: 1.5px dashed transparent; outline-offset: 6px; transition: outline-color .15s; }
.sty-cap:hover, .sty-cap:focus-visible, .sty-cap.dragging { outline-color: rgba(255, 255, 255, .7); }
.sty-cap.dragging { cursor: grabbing; }
.sty-hint { margin: 0; max-width: 32ch; text-align: center; font-size: 13px; color: var(--mute); }
.sty-controls { display: grid; gap: 16px; align-content: start; color: var(--ink); }
.sty-controls h3 { font-size: 32px; font-variation-settings: var(--cond); font-weight: 900; }
.sty-group { display: grid; gap: 8px; }
.sty-label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.sty-fonts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sty-fonts button { height: 44px; border: 0; border-radius: 2px; cursor: pointer; background: var(--paper-2); color: var(--ink); font-size: 19px; box-shadow: inset 0 0 0 1px var(--rule); transition: transform .15s var(--spring), box-shadow .15s; }
.sty-fonts button:hover { transform: translateY(-2px); }
.sty-fonts button.on { background: var(--slate); color: #FFD21F; box-shadow: none; transform: rotate(-2deg); }
.sty-range { grid-template-columns: 128px 1fr 52px; align-items: center; gap: 12px; }
.sty-range input { accent-color: var(--red); }
.sty-range output { font-variant-numeric: tabular-nums; font-size: 14px; text-align: right; cursor: default; }
#sty-angle-o { cursor: pointer; text-decoration: underline dotted; }
.sty-colors { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sty-colors label { display: grid; gap: 6px; }
.sty-controls input[type="color"] { width: 100%; height: 36px; padding: 2px; border: 0; border-radius: 2px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; }
.sty-swatches { display: flex; gap: 8px; margin-top: -6px; }
.sty-swatches button { width: 24px; height: 24px; border: 0; border-radius: 2px; background: var(--c); cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 0 0 1px var(--rule); transition: transform .15s var(--spring); }
.sty-swatches button.on { transform: translateY(-3px) rotate(-6deg); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.sty-row { grid-template-columns: auto 56px auto; align-items: center; gap: 12px; }
.sty-row input[type="color"] { height: 30px; }
.sty-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.sty-check input { width: 18px; height: 18px; accent-color: var(--red); }
.sty-pos { display: flex; gap: 18px; align-items: center; }
.sty-pad { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; }
.sty-pad button { height: 34px; border: 0; border-radius: 2px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; font-size: 15px; color: var(--ink); transition: background .12s; }
.sty-pad button:hover { background: var(--slate); color: var(--chalk); }
.sty-pad button:active { transform: scale(.92); }
.sty-presets-pos { display: grid; gap: 6px; }
.sty-seg { display: inline-flex; box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 3px; overflow: hidden; width: max-content; }
.sty-seg button { width: 42px; height: 36px; border: 0; background: none; cursor: pointer; font-weight: 700; color: var(--ink); }
.sty-seg button + button { box-shadow: inset 1px 0 0 var(--rule); }
.sty-seg button.on { background: var(--ink); color: var(--paper); }
.sty-save { margin-top: 2px; }
.sty-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--rule); }
@media (max-width: 860px) {
  .styler { padding: 0; place-items: stretch; }
  .styler-body { grid-template-columns: 1fr; max-height: 100vh; border-radius: 0; padding: 16px; gap: 16px; }
  .sty-phone { height: 46vh; }
  .sty-fonts { grid-template-columns: repeat(4, 1fr); }
  .sty-range { grid-template-columns: 90px 1fr 36px; }
}

/* ---------- spájanie úsekov a efekty ---------- */
.dock-merge { grid-column: 1 / -1; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed rgba(237, 243, 238, .18); }
.merge-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; font-size: 14px; }
.merge-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.mt-track { width: 40px; height: 22px; border-radius: 11px; background: rgba(255, 255, 255, .14); position: relative; transition: background .2s; }
.mt-track i { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--chalk); transition: transform .3s var(--spring); }
.merge-toggle input:checked + .mt-track { background: var(--red); }
.merge-toggle input:checked + .mt-track i { transform: translateX(18px); }
.merge-toggle input:focus-visible + .mt-track { outline: 2px solid var(--chalk); outline-offset: 2px; }
.fx-pick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; transition: opacity .2s; }
.fx-pick.off { opacity: .45; }
.fx-label { font-size: 13px; color: var(--chalk-2); margin-right: 4px; }
.fx-pick button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px 0 7px; border: 0; border-radius: 3px; cursor: pointer;
  background: rgba(255, 255, 255, .06); color: var(--chalk); font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.fx-pick button.on { background: var(--chalk); color: var(--ink); box-shadow: none; }
.fx-ico { width: 18px; height: 18px; border-radius: 2px; position: relative; overflow: hidden; flex: none;
  background: linear-gradient(160deg, #6B6252, #3A352D); }
.fx-ico::after { content: ""; position: absolute; left: 6px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #E3B590; box-shadow: 0 7px 0 2px #3F6E8C; }
.fx-pick button:hover .fx-punch, .fx-pick button.on .fx-punch { animation: fx-punch 1.2s var(--ease) infinite; }
.fx-pick button:hover .fx-flash::before, .fx-pick button.on .fx-flash::before,
.fx-pick button:hover .fx-fade::before, .fx-pick button.on .fx-fade::before { content: ""; position: absolute; inset: 0; z-index: 2; animation: fx-blink 1.2s ease-out infinite; }
.fx-flash::before { background: #fff; } .fx-fade::before { background: #000; }
.fx-pick button:hover .fx-glitch, .fx-pick button.on .fx-glitch { animation: fx-glitch 1.2s steps(1) infinite; }
.fx-none { opacity: .8; }
@keyframes fx-punch { 0%, 45% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1.25); } }
@keyframes fx-blink { 0%, 45% { opacity: 0; } 50% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes fx-glitch { 0%, 45% { filter: none; transform: none; } 50% { filter: hue-rotate(90deg) saturate(3); transform: translateX(2px); } 60% { transform: translateX(-2px); } 70%, 100% { filter: none; transform: none; } }

.cut-fx { position: absolute; left: 40px; top: -14px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 9px;
  background: var(--ink); color: var(--paper); border-radius: 13px; font-size: 12px; font-weight: 700; box-shadow: var(--flat); animation: tape .4s var(--spring) both; }
.fx-sel { height: 22px; border: 0; border-radius: 11px; padding: 0 6px; font: 600 12px var(--f); background: var(--paper); color: var(--ink); cursor: pointer; }
.viewer-cuts { display: grid; gap: 8px; }
.viewer-cuts > span { font-size: 13px; color: var(--chalk-3); }
.viewer-cuts label { display: inline-flex; align-items: center; gap: 8px; margin: 0 12px 6px 0; font-size: 13px; color: var(--chalk-2); }
.viewer-cuts .fx-sel { height: 30px; border-radius: 3px; font-size: 13px; }
@media (max-width: 980px) { .dock-merge { gap: 10px; } .fx-label { display: none; } .fx-pick button { padding: 0 8px 0 6px; } .cut-fx { left: 8px; } }

/* ---------- oprava titulku priamo vo videu ---------- */
.phone { position: relative; }
.tap-layer { position: absolute; left: 0; right: 0; top: 0; bottom: 56px; cursor: text; z-index: 2; }
.tap-cap { position: absolute; z-index: 3; white-space: normal; max-width: 94%; width: max-content; text-align: center; line-height: 1.15; padding: .12em .3em; color: #fff;
  background: rgba(20, 18, 16, .78); border-radius: 4px; outline: 2px dashed rgba(255, 255, 255, .85); outline-offset: 4px; animation: pop .25s var(--spring); }
.tap-cap .w { cursor: text; border-radius: 3px; padding: 0 .06em; transition: background .12s; }
.tap-cap .w:hover { background: rgba(255, 210, 31, .35); }
.tap-cap .w-edit { font: inherit; text-transform: none; color: var(--ink); min-width: 4ch; }
.tap-hint { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 3; padding: 7px 10px; border-radius: 3px; font-size: 12.5px; font-weight: 600;
  color: var(--ink); background: var(--tape); text-align: center; opacity: 0; transform: translateY(-8px); transition: all .25s var(--ease); pointer-events: none; }
.phone:hover .tap-hint, .phone.editing .tap-hint { opacity: 1; transform: none; }
.phone.fixed-once .tap-hint { background: #CFF5DE; }
.vt-cut { display: inline-block; width: 18px; height: 12px; margin: 0 4px; vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A6E' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M8.1 7.6 20 17M8.1 16.4 20 7'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (hover: none) { .tap-hint { opacity: 1; transform: none; } }

/* ---------- rečníci ---------- */
.spk-count .sty-seg { box-shadow: inset 0 0 0 1.5px var(--ink); }
.spk-count .sty-seg button { width: auto; padding: 0 12px; }
.spk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 14px; }
.spk-title { font-size: 13px; color: var(--chalk-2); margin-right: 4px; }
.spk-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 4px; border-radius: 17px; background: var(--paper); color: var(--ink);
  box-shadow: var(--flat); transition: transform .2s var(--spring), box-shadow .2s; }
.spk-chip.on { box-shadow: 0 0 0 2.5px var(--c), var(--lift); transform: translateY(-2px); }
.spk-filter { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--c); display: grid; place-items: center; }
.spk-filter i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .9); transition: transform .2s; }
.spk-chip.on .spk-filter i { transform: scale(.5); }
.spk-name { font-weight: 700; font-size: 14px; cursor: text; border-bottom: 1px dashed transparent; }
.spk-name:hover { border-bottom-color: var(--mute); }
.spk-chip small { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.spk-input { font: 700 14px var(--f); width: 14ch; border: 0; border-bottom: 1.5px solid var(--red); background: transparent; color: var(--ink); outline: none; }
.spk-all { border: 0; background: none; color: var(--chalk); font: 600 13px var(--f); text-decoration: underline; cursor: pointer; }
.sec-spk { max-width: 98px; padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: 700; color: #fff; background: var(--c);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--spk, transparent) 55%, transparent); }
.sec.spk-dim { opacity: .28; }
@media (max-width: 980px) { .sec-spk { max-width: 56px; font-size: 10px; } }

/* ---------- režim úpravy textu ---------- */
.ed-tools { display: flex; gap: 14px; align-items: center; }
.edit-toggle { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--paper); color: var(--ink); font: 700 14px var(--f); box-shadow: inset 0 0 0 1.5px var(--ink), 0 2px 0 var(--ink); transition: transform .12s; white-space: nowrap; }
.edit-toggle:hover { transform: translateY(-1px); }
.edit-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.edit-toggle.on { background: var(--red); color: #fff; box-shadow: inset 0 0 0 1.5px var(--red-d), 0 2px 0 var(--red-d); }
.edit-banner { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin: -4px 0 14px; padding: 10px 12px 10px 16px;
  background: var(--tape); color: var(--ink); font-size: 14px; box-shadow: var(--flat); transform: rotate(-.3deg); animation: tape .4s var(--spring) both; }
.transcript.editing .sec { cursor: default; }
.transcript.editing .sec:hover { background: none; }
.transcript.editing .w { cursor: text; padding: 1px 2px; margin: 0 -2px; border-radius: 3px; transition: background .12s, box-shadow .12s; }
.transcript.editing .w:hover { background: #FFE98A; box-shadow: 0 0 0 1px #E8C64A; }
.transcript.editing .sec-play { opacity: .5; transform: none; }
@media (max-width: 980px) { .ed-tools { width: 100%; } .ed-tools .search { flex: 1; } }

/* ---------- titulky v náhľade ---------- */
.cap-frame { position: absolute; z-index: 1; pointer-events: none; box-shadow: 0 0 0 999px rgba(0, 0, 0, .38); outline: 1px dashed rgba(255, 255, 255, .35); }
.cap-frame.off .cap-live { display: none; }
.cap-live { position: absolute; pointer-events: auto; cursor: grab; white-space: nowrap; text-align: center; line-height: 1.12; user-select: none; touch-action: none;
  paint-order: stroke fill; border-radius: 3px; outline: 1.5px dashed transparent; outline-offset: 5px; transition: outline-color .15s; }
.cap-live:hover, .cap-live.dragging { outline-color: rgba(255, 255, 255, .8); }
.cap-live.dragging { cursor: grabbing; }
.monitor-bar { gap: 14px; }
.monitor-bar .timecode { margin-left: auto; }
.cap-switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: #C9CEC9; font-weight: 600; font-size: 12px; }
.cap-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cap-switch .mt-track { width: 30px; height: 17px; }
.cap-switch .mt-track i { width: 11px; height: 11px; }
.cap-switch input:checked + .mt-track { background: var(--red); }
.cap-switch input:checked + .mt-track i { transform: translateX(13px); }
.cap-style-btn { height: 22px; padding: 0 9px; border: 0; border-radius: 3px; background: rgba(255, 255, 255, .1); color: #E4E8E4; font: 600 12px var(--f); cursor: pointer; }
.cap-style-btn:hover { background: rgba(255, 255, 255, .2); }
/* výber sekcie krúžkom */
.sec-pick { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; cursor: pointer; }
.sec-pick i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #C2C3B8; transition: all .2s var(--spring); position: relative; }
.sec:hover .sec-pick i { box-shadow: inset 0 0 0 1.5px var(--ink); }
.sec.sel .sec-pick i { box-shadow: none; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; transform: scale(1.1); }
.sec-text .w { cursor: text; border-radius: 3px; transition: background .12s; }
.sec-text .w:hover { background: #FFF1B0; }
.transcript.dragging .w:hover { background: none; }
.sec { cursor: pointer; }

/* ---------- náhľad na výšku ako vo výslednom klipe ---------- */
.ed-media .monitor { width: max-content; max-width: 100%; justify-self: center; }
.ed-media .player { aspect-ratio: 9 / 16; height: min(50vh, 540px); width: auto; }
.ed-media .player video { object-fit: cover; }
.ed-media .monitor-bar { width: 100%; }
.cap-frame { box-shadow: none; outline: 0; }
.cap-live.editing { outline-color: #FFD21F; cursor: default; }
.cap-live .cw { cursor: text; border-radius: 3px; padding: 0 .04em; }
.cap-live .cw:hover { background: rgba(255, 210, 31, .3); }
.cap-live .w-edit { font: inherit; text-transform: none; color: var(--ink); -webkit-text-stroke: 0; min-width: 4ch; }
@media (max-width: 980px) { .ed-media .player { height: 46vh; } }

.ed-media .monitor-bar { flex-wrap: wrap; row-gap: 2px; padding: 4px 0; height: auto; min-height: 34px; }
.ed-media .monitor-bar .timecode { font-size: 15px; }

/* ---------- spoločný renderer titulkov (náhľad = výsledok) ---------- */
.cap-r { position: absolute; width: max-content; white-space: nowrap; text-align: center; line-height: 1.2; z-index: 2; }
.cap-r .cw { display: inline-block; position: relative; line-height: 1.2; font-weight: inherit; transition: color .1s; }
.cap-r .cw.em { color: var(--emph); }
.cap-r .cw.on { color: var(--hl); }
.cap-r[data-hl="none"] .cw.on { color: inherit; }
.cap-r[data-hl="none"] .cw.on.em { color: var(--emph); }
.cap-r[data-hl="color"] .cw.on { animation: cw-tick .09s ease-out; }
.cap-r[data-hl="box"] .cw.on::before { content: ""; position: absolute; inset: calc(var(--boxpad, .1em) * -1); background: var(--wbox); border-radius: var(--boxr, 0); z-index: -1; }
.cap-r[data-hl="box"] .cw.on { background: none; }
.cap-r[data-hl="karaoke"] .cw.done { color: var(--hl); }
.cap-r[data-hl="karaoke"] .cw.on { color: var(--hl); }
.cap-r[data-hl="pop"] .cw.on { scale: 1.12; animation: cw-pop .14s ease-out; }
.cap-r[data-hl="stomp"] .cw.on { animation: cw-stomp .12s ease-out; }
.cap-r .cw.hid { opacity: 0; }
.cap-r[data-hl="underline"] .cw.on { text-decoration: underline; text-decoration-thickness: .09em; text-underline-offset: .12em; }
@keyframes cw-tick { from { scale: 1.1; } }
@keyframes cw-pop { from { scale: 1.32; } }
@keyframes cw-stomp { from { scale: 1.7; } }
.cap-r.a-pop { animation: ca-pop .14s ease-out; }
.cap-r.a-float { animation: ca-float .18s ease-out; }
.cap-r.a-drop { animation: ca-drop .17s ease-out; }
.cap-r.a-rotate { animation: ca-rotate .18s ease-out; }
.cap-r.a-fade { animation: ca-fade .2s ease-out; }
@keyframes ca-pop { from { scale: .6; } }
@keyframes ca-float { from { translate: 0 .5em; opacity: 0; } }
@keyframes ca-drop { from { translate: 0 -.8em; opacity: 0; } }
@keyframes ca-rotate { from { rotate: -10deg; } }
@keyframes ca-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cap-r, .cap-r .cw { animation: none !important; } }

/* stredové vodiace čiary */
.guides { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.guides i { position: absolute; background: rgba(255, 255, 255, .16); transition: background .15s, box-shadow .15s; }
.guides .gv { left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; }
.guides .gh { top: 50%; left: 0; right: 0; height: 1px; margin-top: -.5px; }
.guiding .guides i { background: rgba(255, 255, 255, .38); }
.snap-x .guides .gv, .snap-y .guides .gh { background: #FF4D7A; box-shadow: 0 0 0 .5px #FF4D7A, 0 0 8px rgba(255, 77, 122, .7); }

/* záložky panela */
.sty-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sty-on { color: var(--ink-2); font-size: 13px; }
.sty-on .mt-track { background: var(--rule); }
.sty-tabs { display: flex; gap: 2px; border-bottom: 1.5px solid var(--ink); margin-top: -4px; }
.sty-tabs button { flex: 1; height: 36px; border: 0; background: none; cursor: pointer; font: 700 13.5px var(--f); color: var(--ink-2); border-radius: 3px 3px 0 0; transition: background .12s, color .12s; }
.sty-tabs button:hover { background: var(--paper-2); }
.sty-tabs button.on { background: var(--ink); color: var(--paper); }
.sty-pane { display: grid; gap: 14px; align-content: start; min-height: 360px; animation: pane-in .2s var(--ease); }
.sty-pane[hidden] { display: none; }
@keyframes pane-in { from { opacity: 0; transform: translateY(4px); } }
.sty-note { margin: -4px 0 0; font-size: 12.5px; color: var(--mute); }

/* šablóny */
.sty-tpls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tpl { display: grid; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); text-align: left; }
.tpl-prev { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px;
  background: linear-gradient(160deg, #4b5a52, #262b28); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); transition: transform .15s var(--spring), box-shadow .15s; }
.tpl:hover .tpl-prev { transform: translateY(-2px); }
.tpl.on .tpl-prev { box-shadow: 0 0 0 2.5px var(--red); transform: rotate(-1.5deg); }
.tpl b { font-size: 12px; font-weight: 700; line-height: 1.2; }
.tpl-cap { left: 50%; top: 50%; pointer-events: none; }

/* písma */
.sty-fonts { grid-template-columns: repeat(5, 1fr); max-height: 250px; overflow: auto; padding: 2px; }
.sty-fonts button { height: 54px; display: grid; place-items: center; align-content: center; gap: 1px; font-size: 18px; line-height: 1.05; }
.sty-fonts button small { font: 500 10px var(--f); color: var(--mute); letter-spacing: 0; }
.sty-fonts button.on small { color: #D9DBD3; }
.sty-seg-wrap { flex-wrap: wrap; width: auto; }
.sty-seg-wrap button, #sty-case button, #sty-lines button { width: auto; padding: 0 11px; }

/* štýly zvýraznenia */
.sty-hl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sty-hl button { display: grid; gap: 6px; justify-items: center; padding: 8px 4px 6px; border: 0; border-radius: 2px; cursor: pointer;
  background: var(--paper-2); color: var(--ink); font: 600 12px var(--f); box-shadow: inset 0 0 0 1px var(--rule); }
.sty-hl button.on { background: var(--slate); color: var(--chalk); box-shadow: none; }
.hl-demo { display: block; padding: 6px 8px; border-radius: 2px; background: #262b28; color: #fff; font: 900 13px "CL Montserrat", sans-serif; white-space: nowrap; }
.hl-demo b, .hl-demo i { font-style: normal; font-weight: inherit; display: inline-block; }
.hl-color b, .hl-reveal b, .hl-underline b { color: #FFD21F; }
.hl-underline b { text-decoration: underline; text-decoration-thickness: 2px; }
.hl-box b { background: #7C3AED; border-radius: 2px; padding: 0 2px; }
.hl-karaoke b { color: #FFD21F; } .hl-karaoke i { color: #fff; background: linear-gradient(90deg, #FFD21F 40%, #fff 40%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hl-pop b { color: #4ADE80; scale: 1.2; }
.hl-stomp b { color: #FF8FB1; } .hl-stomp i, .hl-reveal i { opacity: .15; }
.sty-hl button:hover .hl-demo b { animation: cw-pop .3s ease-out; }

/* nápoveda: ako sa vety dostanú do reelu */
.pick-hint { position: absolute; left: 10px; right: 10px; top: 12px; z-index: 3; display: grid; gap: 4px; padding: 11px 13px 12px; pointer-events: none;
  background: var(--tape); color: var(--ink); font-size: 13px; line-height: 1.35; box-shadow: var(--flat); transform: rotate(-1deg); animation: tape .45s var(--spring) both; }
.pick-hint b { font-size: 16px; font-variation-settings: var(--cond); font-weight: 900; }
.pick-hint svg { position: absolute; right: -78px; top: 6px; width: 92px; color: var(--tape); filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.pick-hint[hidden] { display: none; }
.sec-pick { position: relative; }
.sec-pick::after { content: attr(data-add); position: absolute; right: calc(100% + 8px); top: -1px; padding: 3px 8px; border-radius: 2px; white-space: nowrap;
  background: var(--ink); color: var(--paper); font: 700 11.5px var(--f); opacity: 0; transform: translateX(4px); transition: opacity .15s, transform .15s; pointer-events: none; }
.sec.sel .sec-pick::after { content: attr(data-remove); }
.sec-pick:hover::after, .sec.nudge .sec-pick::after { opacity: 1; transform: none; }
.sec.nudge .sec-pick i { box-shadow: inset 0 0 0 2px var(--red); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { box-shadow: inset 0 0 0 2px var(--red), 0 0 0 0 rgba(214, 48, 39, .45); } 50% { box-shadow: inset 0 0 0 2px var(--red), 0 0 0 9px rgba(214, 48, 39, 0); } }
@media (prefers-reduced-motion: reduce) { .sec.nudge .sec-pick i { animation: none; } }

/* vystrihnutie časti bloku */
.transcript .sec-text { user-select: none; }
.transcript .w.cutsel { background: #FFD3C6; box-shadow: .3em 0 0 #FFD3C6; color: var(--ink); border-radius: 0; }
.cut-bar { position: absolute; z-index: 60; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; background: var(--ink); color: var(--paper);
  border-radius: 4px; box-shadow: 0 10px 28px rgba(0,0,0,.28); animation: pop .22s var(--spring); }
.cut-bar[hidden] { display: none; }
.cut-bar::before { content: ""; position: absolute; top: -6px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--ink); }
.cut-info { font-size: 12.5px; color: #C9CEC9; margin-right: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cut-bar button { height: 32px; padding: 0 12px; border: 0; border-radius: 3px; cursor: pointer; font: 700 13px var(--f); white-space: nowrap; }
.cut-main { background: var(--red); color: #fff; }
.cut-main::before { content: ""; display: inline-block; width: 14px; height: 14px; margin: 0 6px -2px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M8.1 7.6 20 17M8.1 16.4 20 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.cut-alt { background: rgba(255,255,255,.1); color: var(--paper); }
.cut-alt:hover { background: rgba(255,255,255,.2); }
.cut-bar button:disabled { opacity: .35; cursor: default; }
.cut-x { width: 32px; padding: 0 !important; background: none; color: #C9CEC9; font-size: 20px !important; }
.sec-join { margin-top: 2px; padding: 2px 7px; border: 0; border-radius: 9px; cursor: pointer; background: var(--paper-2); color: var(--ink-2);
  font: 600 11px var(--f); box-shadow: inset 0 0 0 1px var(--rule); }
.sec-join:hover { background: var(--ink); color: var(--paper); }
.sec.just-cut { animation: just-cut 1.4s ease-out; }
@keyframes just-cut { 0% { background: #FFE3D9; } 100% { background: transparent; } }

/* ---------- pätička a právne stránky ---------- */
.auth-page .check-terms { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.check-terms input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--red); }
.check-terms a { color: var(--ink); }
.cookie-bar { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 14px; max-width: min(520px, calc(100vw - 32px));
  padding: 12px 12px 12px 16px; background: var(--paper); color: var(--ink); font-size: 13.5px; line-height: 1.4; box-shadow: var(--lift-hi); border-radius: 3px; }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; }
.cookie-bar a { color: var(--ink); }
.legal { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 40px; justify-content: center; padding: 40px 20px 0; }
.legal-nav { display: grid; gap: 2px; align-content: start; position: sticky; top: 24px; }
.legal-nav a { padding: 8px 12px; border-radius: 3px; color: rgba(255,255,255,.8); text-decoration: none; font-weight: 600; font-size: 14px; }
.legal-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.legal-nav a[aria-current="page"] { background: var(--paper); color: var(--ink); }
.legal-doc { padding: 44px 52px 52px; color: var(--ink); font-size: 15.5px; line-height: 1.62; }
.legal-doc h1 { margin: 0 0 6px; font-size: 44px; line-height: 1; font-variation-settings: var(--cond); font-weight: 900; }
.legal-doc h2 { margin: 34px 0 10px; font-size: 19px; font-weight: 800; }
.legal-doc p, .legal-doc ul { margin: 0 0 12px; max-width: 68ch; }
.legal-doc ul { padding-left: 20px; }
.legal-doc li { margin-bottom: 4px; }
.legal-doc a { color: var(--red-d, #A62A14); }
.legal-meta { color: var(--mute); font-size: 13.5px; margin-bottom: 24px !important; }
.legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 14px; line-height: 1.45; }
.legal-table th, .legal-table td { padding: 9px 10px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.legal-table th { font-size: 12.5px; color: var(--ink-2); font-weight: 700; border-bottom: 1.5px solid var(--ink); }
.legal-dl { display: grid; grid-template-columns: 220px 1fr; gap: 10px 20px; margin: 18px 0; }
.legal-dl dt { font-weight: 700; color: var(--ink-2); }
.legal-dl dd { margin: 0; }
.legal-form { padding: 18px 20px; margin-top: 16px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }
@media (max-width: 860px) {
  .legal { grid-template-columns: 1fr; gap: 16px; padding-top: 20px; }
  .legal-nav { position: static; display: flex; flex-wrap: wrap; }
  .legal-doc { padding: 28px 20px 32px; }
  .legal-doc h1 { font-size: 34px; }
  .legal-table { display: block; overflow-x: auto; }
  .legal-dl { grid-template-columns: 1fr; gap: 2px; }
  .legal-dl dd { margin-bottom: 10px; }
}
.log-note { margin: -6px 0 12px; font-size: 13px; color: rgba(255,255,255,.62); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lang-pick select { appearance: none; height: 30px; padding: 0 28px 0 12px; border: 0; border-radius: 15px; cursor: pointer;
  background: rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 9px center / 12px no-repeat;
  color: #fff; font: 600 13px var(--f); }
.lang-pick select:hover { background-color: rgba(255,255,255,.18); }
.lang-pick option { color: #111; }
.legal-note { padding: 10px 14px; background: var(--paper-2); box-shadow: inset 3px 0 0 var(--red); font-size: 14px; }

/* ---------- výber jazyka ---------- */
.flag { width: 21px; height: 14px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.lang-menu { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border: 0; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,.1); color: #fff; font: 700 12.5px var(--f); letter-spacing: .02em; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { background: rgba(255,255,255,.2); }
.lang-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; min-width: 190px; margin: 0; padding: 6px; list-style: none;
  background: var(--paper); border-radius: 4px; box-shadow: var(--lift-hi); animation: pop .18s var(--spring); }
.lang-list[hidden] { display: none; }
.lang-list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 3px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.lang-list a:hover { background: var(--paper-2); }
.lang-list a[aria-current] { background: var(--ink); color: var(--paper); }
.auth-lang { position: absolute; top: 24px; right: 28px; z-index: 5; }
.auth { position: relative; }
@media (max-width: 860px) { .auth-lang { top: 14px; right: 14px; } }
.topbar { position: relative; z-index: 40; }

/* ---------- jazyk titulkov ---------- */
.sub-lang, .viewer-lang { display: grid; gap: 4px; }
.sub-lang span, .viewer-lang span { font-size: 12px; font-weight: 600; color: var(--chalk-3, #9AA39C); }
.sub-lang select, .viewer-lang select { height: 40px; padding: 0 30px 0 12px; border: 0; border-radius: 3px; cursor: pointer; appearance: none;
  background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 10px center / 12px no-repeat;
  color: var(--chalk, #EEF1EC); box-shadow: inset 0 0 0 1.5px var(--chalk-3, #6F7A72); font: 700 14px var(--f); }
.sub-lang select:hover, .viewer-lang select:hover { box-shadow: inset 0 0 0 1.5px var(--chalk, #fff); }
.sub-lang option, .viewer-lang option { color: #111; }
.viewer-lang { margin-bottom: 4px; }
#mon-label.busy::after { content: " …"; }
.viewer-subs .sent { cursor: text; border-radius: 3px; padding: 1px 2px; transition: background .12s; }
.viewer-subs .sent:hover { background: rgba(255,210,31,.18); }
.viewer-subs .sent.fixed { box-shadow: inset 0 -2px 0 #4ADE80; }
.sent-area { width: 100%; font: inherit; color: var(--ink); resize: vertical; }
.cap-live .sent-edit { font-size: max(14px, .55em); color: var(--ink); -webkit-text-stroke: 0; text-transform: none; }
.lang-tag { margin-left: 8px; padding: 1px 6px; border-radius: 9px; background: var(--ink); color: var(--paper); font: 700 10.5px var(--f); font-style: normal; letter-spacing: .04em; }
.muted { opacity: .6; }

/* ---------- registrácia ---------- */
.auth-form.wide { max-width: 560px; }
.auth-form select { width: 100%; height: 46px; padding: 0 12px; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 2px 2px 0 0; background: var(--paper-2); font: 500 16px var(--f); color: var(--ink); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f-row-city { grid-template-columns: 1fr 130px; }
.f-hint { margin-top: -10px; color: var(--mute); font-size: 13px; }
.f-err { color: var(--red-d); font-style: normal; font-size: 13px; font-weight: 600; }
.field input[aria-invalid="true"] { border-bottom-color: var(--red); background: var(--red-tint); }
.f-split { display: flex; justify-content: space-between; align-items: baseline; }
.f-split a { font-weight: 600; font-size: 13px; color: var(--red-d); }
.opt { font-style: normal; font-weight: 500; color: var(--mute); font-size: 12.5px; }
.acct-type { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; border: 0; }
.acct-type legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.acct-type label { position: relative; cursor: pointer; }
.acct-type input { position: absolute; opacity: 0; }
.acct-type label > span { display: grid; gap: 2px; padding: 12px 14px; border-radius: 3px; background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--rule); transition: box-shadow .15s, transform .15s var(--spring); }
.acct-type small { color: var(--mute); font-size: 12.5px; }
.acct-type input:checked + span { box-shadow: inset 0 0 0 2px var(--ink); background: #fff; transform: rotate(-.6deg); }
.acct-type input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.company { display: grid; gap: 16px; padding: 18px 18px 20px; margin: 0 -18px; background: rgba(0,0,0,.025); border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule); animation: pane-in .25s var(--ease); }
.company[hidden] { display: none; }
.company h2 { margin: 0; font-size: 18px; font-weight: 800; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px; }
.pw-eye { position: absolute; right: 4px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border: 0; background: none; cursor: pointer; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1D1B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px no-repeat; }
.pw-eye.on { opacity: 1; }
.pw-eye:hover { opacity: 1; }
.pw-meter { display: block; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: calc(var(--s, 0) * 100%); background: var(--mute); transition: width .2s, background .2s; }
.pw-meter[data-lvl="weak"] i { background: var(--red); }
.pw-meter[data-lvl="ok"] i { background: #E0A100; }
.pw-meter[data-lvl="strong"] i { background: #2E8B57; }
.pw-match { position: absolute; right: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
  background: #2E8B57 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.pw-match[hidden] { display: none; }
.pw-wrap.ok input { border-bottom-color: #2E8B57; }
.f-row { align-items: start; }
.auth-msg { display: grid; gap: 14px; justify-items: start; }
.auth-msg h1 { margin: 0; font-size: 40px; line-height: 1; font-variation-settings: var(--cond); font-weight: 900; }
.auth-msg p { margin: 0; }
.muted-p { color: var(--mute); font-size: 14px; }
.form-ok { margin: 0; padding: 10px 12px; background: #DDF3E6; border-left: 3px solid #2E8B57; font-weight: 600; }
.env { width: 64px; height: 46px; position: relative; background: #fff; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--ink); transform: rotate(-4deg); animation: tape .5s var(--spring) both; }
.env i { position: absolute; inset: 2px 2px auto; height: 26px; border-bottom: 2px solid var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--paper-2); }
.env::after { content: ""; position: absolute; right: -8px; top: -8px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px var(--paper); }
@media (max-width: 560px) { .f-row, .f-row-city, .acct-type { grid-template-columns: 1fr; } }

/* ---------- pätička ---------- */
.site-foot { position: relative; z-index: 1; margin-top: 72px; padding: 0 clamp(20px, 5vw, 72px); background: rgba(8, 26, 19, .55); border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.66); font-size: 14px; line-height: 1.65; }
.sf-grid { display: grid; grid-template-columns: 1fr 1.4fr 1.1fr .9fr; gap: 40px; max-width: 1240px; margin: 0 auto; padding: 52px 0 40px; }
.sf-brand { display: grid; gap: 10px; align-content: start; justify-items: start; }
.sf-brand p { margin: 0; color: rgba(255,255,255,.55); }
.sf-mail { color: #FFD21F; font-weight: 700; text-decoration: none; }
.sf-mail:hover { text-decoration: underline; }
.sf-company h2 { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: #fff; }
.sf-company p { margin: 0; }
.sf-links { display: grid; gap: 8px; align-content: start; }
.sf-links a { color: rgba(255,255,255,.75); text-decoration: none; }
.sf-links a:hover { color: #fff; }
.sf-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; max-width: 1180px; margin: 0 auto; padding: 18px 0 26px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px; letter-spacing: .02em; color: rgba(255,255,255,.45); }
.lang-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.lang-flags a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 12px; color: rgba(255,255,255,.6); text-decoration: none; font-size: 11.5px; font-weight: 700; }
.lang-flags a:hover { background: rgba(255,255,255,.08); color: #fff; }
.lang-flags a[aria-current] { background: rgba(255,255,255,.14); color: #fff; }
.lang-flags .flag { width: 18px; height: 12px; }
.project-page .site-foot { margin-bottom: 0; padding-bottom: 96px; }
@media (max-width: 860px) {
  .sf-grid { grid-template-columns: 1fr; gap: 26px; padding: 36px 0 28px; }
  .sf-bottom { flex-direction: column; align-items: flex-start; }
}
.sf-brand .brand { color: #fff; opacity: 1; font-size: 22px; }

/* ---------- výrez (rámovanie) v náhľade ---------- */
.frame-ctl { display: inline-flex; align-items: center; gap: 2px; color: #C9CEC9; font-weight: 600; font-size: 12px; }
.frame-ctl > span { margin-right: 5px; }
.frame-ctl button { height: 22px; padding: 0 8px; border: 0; background: rgba(255, 255, 255, .1); color: #E4E8E4; font: 600 12px var(--f); cursor: pointer; }
.frame-ctl button:first-of-type { border-radius: 3px 0 0 3px; }
.frame-ctl button:last-of-type { border-radius: 0 3px 3px 0; }
.frame-ctl button:hover { background: rgba(255, 255, 255, .2); }
.frame-ctl button.on { background: #E4E8E4; color: var(--ink); }
.frame-ctl em { font-style: normal; margin-left: 6px; color: #FFD21F; }
.ed-media .player.sel video { cursor: ew-resize; }
.ed-media .player.fit video { object-fit: contain; object-position: 50% 40%; }
.ed-media .player.framing video { transition: none; }
.ed-media .player .frame-tip { position: absolute; left: 50%; top: 12px; translate: -50% 0; z-index: 3; padding: 5px 10px; border-radius: 3px; background: rgba(0, 0, 0, .72); color: #fff; font: 600 12px var(--f); pointer-events: none; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.ed-media .player.framing .frame-tip { opacity: 1; }
.ed-media .player.fit::before { content: ""; position: absolute; inset: -20px; background: var(--poster) center/cover; filter: blur(14px) brightness(.55); }
.ed-media .player.fit video { position: relative; }

/* =====================================================================
   Úvodná stránka
   ===================================================================== */
.lp-top { position: relative; z-index: 50; display: flex; align-items: center; gap: 28px; height: 76px; padding: 0 clamp(16px, 4vw, 56px); max-width: 1360px; margin: 0 auto; }
.lp-top .brand span { font-size: 25px; }
.lp-nav { display: flex; gap: 26px; margin-left: 12px; }
.lp-nav a { color: var(--chalk-2); text-decoration: none; font-weight: 600; font-size: 15px; }
.lp-nav a:hover { color: var(--chalk); }
.lp-top-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lp-top .btn { height: 40px; padding: 0 18px; }

.lp { max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); }
.lp h2 { font-size: clamp(34px, 4.4vw, 58px); font-weight: 900; font-variation-settings: var(--cond); letter-spacing: -.015em; line-height: .98; }
.lp section { scroll-margin-top: 24px; }

/* ---------- úvod ---------- */
.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 5vw, 64px) 0 clamp(64px, 8vw, 120px); }
.lp-hero h1 { font-size: clamp(48px, 6.6vw, 98px); font-weight: 900; font-variation-settings: var(--cond); line-height: .92; letter-spacing: -.02em; max-width: 11ch; }
.lp-lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--chalk-2); max-width: 44ch; margin: 26px 0 32px; }
.lp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.lp-cta span { color: var(--chalk-3); font-size: 14px; max-width: 26ch; line-height: 1.4; }

.lp-demo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; }
.lp-sheet { grid-column: 1; grid-row: 1 / 3; padding: 22px 0 18px; transform: rotate(-1.2deg); margin-right: -64px; position: relative; }
.lp-sheet::before { content: ""; position: absolute; left: 50%; top: -12px; width: 108px; height: 26px; background: var(--tape); transform: translateX(-50%) rotate(2deg); }
.lp-sheet-head { display: flex; justify-content: space-between; margin: 0 92px 12px 24px; font-weight: 800; font-variation-settings: var(--narrow); font-size: 17px; }
.lp-sheet-head .tc { color: var(--mute); font-size: 14px; }
.lp-lines { list-style: none; margin: 0; padding: 0; border-top: 1px dashed var(--rule); }
.lp-lines li { border-bottom: 1px dashed var(--rule); }
.lp-line { display: grid; grid-template-columns: 22px 44px 1fr; gap: 10px; align-items: start; width: 100%; padding: 13px 92px 13px 22px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); position: relative; font-size: 16px; line-height: 1.45; }
.lp-line:hover { background: var(--paper-2); }
.lp-line.on { background: var(--red-tint); }
.lp-line.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--red); border-radius: 2px; }
.lp-pick { width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #C2C3B8; transition: all .2s var(--spring); }
.lp-line:hover .lp-pick { box-shadow: inset 0 0 0 1.5px var(--ink); }
.lp-line.on .lp-pick { box-shadow: none; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.lp-t { color: var(--mute); font-size: 13px; padding-top: 2px; }
.lp-line.on .lp-t { color: var(--red); }
.lp-sheet-hint { margin: 12px 92px 0 24px; color: var(--mute); font-size: 13px; }

.lp-phone { grid-column: 2; grid-row: 1; position: relative; z-index: 2; width: clamp(200px, 17vw, 250px); padding: 9px; border-radius: 30px; background: #0F100F; box-shadow: var(--lift-hi), inset 0 0 0 1px #2B2D2B; transform: rotate(2deg); }
.lp-screen { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #2E2B26; }
.lp-scene { position: absolute; inset: 0; background: linear-gradient(175deg, #6B6556, #2E2B26 72%); }
.lp-scene .lamp { position: absolute; left: -12%; top: 6%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 227, 168, .75) 0%, rgba(255, 227, 168, .14) 42%, transparent 68%); }
.lp-scene .shelf { position: absolute; right: -6%; top: 22%; width: 42%; height: 6px; background: #7A725F; box-shadow: 0 -20px 0 -2px #93876B, 18px -18px 0 -1px #9A5E45; }
.lp-scene .person { position: absolute; left: 17%; bottom: 0; width: 66%; height: 62%; animation: lp-sway 9s ease-in-out infinite; }
@keyframes lp-sway { 0%, 100% { transform: translateX(0) rotate(0); } 45% { transform: translateX(5%) rotate(1deg); } 75% { transform: translateX(-3%); } }
.lp-scene .head { position: absolute; left: 50%; top: 0; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(160deg, #E3B590, #A8714F); }
.lp-scene .body { position: absolute; left: 50%; bottom: 0; width: 100%; height: 58%; transform: translateX(-50%); border-radius: 46% 46% 0 0; background: linear-gradient(160deg, #3F6E8C, #24455C); }
.lp-scene .mic { position: absolute; left: 22%; bottom: 0; width: 6%; height: 30%; border-radius: 10px 10px 2px 2px; background: #121110; transform: rotate(-12deg); transform-origin: bottom; }
.lp-cap { pointer-events: none; }
.lp-progress { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.lp-progress i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.lp-looks { grid-column: 2; grid-row: 2; justify-self: center; display: flex; margin-top: 18px; z-index: 2; box-shadow: var(--flat); border-radius: 3px; }
.lp-looks button { height: 34px; padding: 0 12px; border: 0; background: var(--slate); color: var(--chalk-2); font-weight: 700; font-size: 13px; cursor: pointer; }
.lp-looks button:first-child { border-radius: 3px 0 0 3px; } .lp-looks button:last-child { border-radius: 0 3px 3px 0; }
.lp-looks button.on { background: var(--chalk); color: var(--ink); }

/* ---------- postup: filmový pás ---------- */
.lp-steps { padding: clamp(40px, 6vw, 80px) 0; }
.lp-strip { list-style: none; margin: 36px 0 0; padding: 30px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #141210; position: relative; box-shadow: var(--lift-hi); transform: rotate(-.6deg); }
.lp-strip::before, .lp-strip::after { content: ""; position: absolute; left: 0; right: 0; height: 30px; background: radial-gradient(ellipse 6px 4.5px at 50% 50%, var(--mat) 98%, transparent) 0 50% / 26px 30px repeat-x; }
.lp-strip::before { top: 0; } .lp-strip::after { bottom: 0; }
.lp-strip li { position: relative; background: #24221E; padding: 26px 26px 30px; color: var(--chalk); }
.lp-n { display: block; font-weight: 900; font-variation-settings: var(--cond); font-size: 64px; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--red); margin-bottom: 14px; }
.lp-strip h3 { font-size: 26px; font-weight: 800; font-variation-settings: var(--narrow); margin-bottom: 10px; }
.lp-strip p { margin: 0; color: var(--chalk-2); font-size: 15.5px; line-height: 1.55; }

/* ---------- čo vie ---------- */
.lp-feats { display: grid; gap: clamp(56px, 8vw, 110px); padding: clamp(40px, 6vw, 90px) 0; }
.lp-feat { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.lp-feat.flip .lp-feat-copy { order: 2; }
.lp-feat-copy h2 { font-size: clamp(30px, 3.4vw, 46px); max-width: 14ch; }
.lp-feat-copy p { color: var(--chalk-2); font-size: 17px; line-height: 1.6; max-width: 46ch; margin: 18px 0 0; }

.lp-swatch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lp-tile { position: relative; aspect-ratio: 5 / 4; background: linear-gradient(170deg, #3A3832, #1C1B18); border-radius: 3px; overflow: hidden; box-shadow: var(--flat); }
.lp-tcap { pointer-events: none; }

.lp-trans { display: grid; gap: 12px; justify-items: start; }
.lp-trans p { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 22px 14px 16px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; font-variation-settings: var(--narrow); }
.lp-trans p:nth-child(1) { transform: rotate(-1deg); }
.lp-trans p:nth-child(2) { transform: rotate(.6deg) translateX(28px); }
.lp-trans p:nth-child(3) { transform: rotate(-.4deg) translateX(10px); }
.lp-trans p:nth-child(4) { transform: rotate(.9deg) translateX(40px); }
.lp-trans .flag { width: 26px; height: 18px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }

.lp-crop { display: grid; }
.lp-wide { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(172deg, #6B6556, #2E2B26 75%); overflow: hidden; border-radius: 3px; box-shadow: var(--lift-hi); }
.lp-wide .who { position: absolute; bottom: 0; width: 17%; height: 70%; }
.lp-wide .who.a { left: 20%; } .lp-wide .who.b { left: 62%; }
.lp-wide .who .head { position: absolute; left: 50%; top: 0; width: 50%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(160deg, #E3B590, #A8714F); }
.lp-wide .who.b .head { background: linear-gradient(160deg, #C9946C, #7E4F34); }
.lp-wide .who .body { position: absolute; left: 50%; bottom: 0; width: 100%; height: 58%; transform: translateX(-50%); border-radius: 46% 46% 0 0; background: linear-gradient(160deg, #3F6E8C, #24455C); }
.lp-wide .who.b .body { background: linear-gradient(160deg, #8C4A3F, #5C2B24); }
.lp-frame { position: absolute; top: 0; bottom: 0; width: 31.64%; left: 13%; box-shadow: 0 0 0 999px rgba(10, 12, 10, .55); outline: 2px dashed #fff; outline-offset: -2px; animation: lp-follow 7s var(--ease) infinite; }
@keyframes lp-follow { 0%, 38% { left: 13%; } 50%, 88% { left: 55%; } 100% { left: 13%; } }

.lp-cuts { position: relative; padding: 26px 30px; font-size: 18px; line-height: 1.7; transform: rotate(.8deg); }
.lp-cuts p { margin: 0; }
.lp-cuts mark { background: none; color: inherit; box-shadow: inset 0 -.38em 0 rgba(217, 58, 31, .22); }
.lp-sc { display: block; width: 26px; height: 26px; margin: 10px 0 10px -6px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.lp-cuts .lp-sc + p { border-top: 1.5px dashed var(--ink-2); padding-top: 12px; margin-top: -24px; padding-left: 0; }

/* ---------- cenník ---------- */
.lp-price { padding: clamp(40px, 6vw, 90px) 0; }
.lp-sub { color: var(--chalk-2); font-size: 17px; max-width: 60ch; margin: 16px 0 0; }
.lp-sub.small { font-size: 14px; color: var(--chalk-3); margin-top: 28px; }
.lp-sub a { color: var(--chalk); }
.lp-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 40px; align-items: stretch; }
.lp-plan { display: flex; flex-direction: column; padding: 26px 24px 24px; position: relative; }
.lp-plan.hot { box-shadow: var(--lift-hi), inset 0 4px 0 var(--red); transform: translateY(-10px); }
.lp-plan h3 { font-size: 24px; font-weight: 800; font-variation-settings: var(--narrow); }
.lp-amt { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 18px; padding-bottom: 18px; border-bottom: 1px dashed var(--rule); }
.lp-amt b { font-size: 52px; font-weight: 900; font-variation-settings: var(--cond); line-height: 1; }
.lp-amt span { color: var(--mute); font-size: 14px; }
.lp-plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 9px; font-size: 15px; color: var(--ink-2); }
.lp-plan li { padding-left: 22px; position: relative; line-height: 1.4; }
.lp-plan li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 10px; height: 6px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(-45deg); }
.lp-plan .btn { margin-top: auto; }

/* ---------- otázky ---------- */
.lp-faq { padding: clamp(40px, 6vw, 80px) 0; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.lp-qs { padding: 6px 0; }
.lp-qs details { border-bottom: 1px dashed var(--rule); }
.lp-qs details:last-child { border-bottom: 0; }
.lp-qs summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 26px; font-weight: 700; font-size: 18px; position: relative; }
.lp-qs summary::-webkit-details-marker { display: none; }
.lp-qs summary::after { content: ""; position: absolute; right: 26px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat; transition: transform .2s var(--ease); }
.lp-qs details[open] summary::after { transform: rotate(45deg); }
.lp-qs details p { margin: -4px 0 0; padding: 0 56px 20px 26px; color: var(--ink-2); line-height: 1.6; }

/* ---------- záver: klapka ---------- */
.lp-end { padding: clamp(30px, 5vw, 70px) 0 0; }
.lp-slate { position: relative; background: var(--slate); padding: 64px clamp(24px, 5vw, 64px) 52px; border-radius: 3px; box-shadow: var(--lift-hi); text-align: center; }
.lp-slate::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; border-radius: 3px 3px 0 0; background: repeating-linear-gradient(-55deg, var(--chalk) 0 22px, var(--slate) 22px 44px); }
.lp-slate h2 { color: var(--chalk); }
.lp-slate p { color: var(--chalk-2); font-size: 17px; margin: 14px auto 28px; max-width: 46ch; }

@media (max-width: 1080px) {
  .lp-hero { grid-template-columns: 1fr; }
  .lp-hero h1 { max-width: 14ch; }
  .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-plan.hot { transform: none; }
}
@media (max-width: 760px) {
  .lp-nav { display: none; }
  .lp-top { height: 62px; gap: 10px; }
  .lp-top .btn { height: 36px; padding: 0 12px; font-size: 14px; }
  .lp-demo { grid-template-columns: 1fr; }
  .lp-sheet { grid-row: auto; margin-right: 0; transform: none; }
  .lp-line { padding-right: 16px; font-size: 15px; grid-template-columns: 22px 40px 1fr; }
  .lp-sheet-head, .lp-sheet-hint { margin-right: 16px; }
  .lp-phone { grid-column: 1; grid-row: auto; justify-self: center; margin-top: -10px; width: min(250px, 70vw); }
  .lp-looks { grid-column: 1; grid-row: auto; }
  .lp-strip { grid-template-columns: 1fr; transform: none; }
  .lp-feat, .lp-faq { grid-template-columns: 1fr; }
  .lp-feat.flip .lp-feat-copy { order: 0; }
  .lp-trans p { transform: none !important; }
  .lp-plans { grid-template-columns: 1fr; }
  .lp-swatch { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .lp-frame, .lp-scene .person { animation: none; } }
/* ---------- editor na mobile ---------- */
@media (max-width: 640px) {
  .sec-pick::after { display: none; }
  .ed-media .monitor { width: 100%; }
  .ed-media .player { height: 36vh; width: auto; margin: 0 auto; }
  .ed-media .timeline { display: none; }
  .pick-hint { padding: 10px 12px; }
  .pick-hint span { font-size: 12px; line-height: 1.35; }
  .ed-media .monitor-bar { gap: 8px 10px; }
  .pick-hint { font-size: 13px; }
}
@media (max-width: 640px) {
  .dock-hook { display: none; }
  .dock-clap { height: 14px; }
  .dock-inner { gap: 8px 10px; padding: 10px; }
  .dock-opts { display: flex; gap: 8px; align-items: end; }
  .dock-opts .sub-lang > span { display: none; }
  .dock-actions .btn { height: 40px; padding: 0 14px; }
}
@media (pointer: coarse) { .sec-text .w { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
/* ---------- Štýl titulkov na mobile: náhľad hore, ovládanie pod ním ---------- */
@media (max-width: 640px) {
  .styler-body { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; padding: 0 14px 16px; gap: 12px; }
  .sty-stage { position: sticky; top: 0; z-index: 3; background: var(--paper); padding: 12px 0 8px; margin: 0 -14px; box-shadow: 0 8px 14px -12px rgba(0, 0, 0, .5); }
  .sty-phone { height: 30vh; box-shadow: 0 0 0 4px var(--slate); }
  .sty-hint { display: none; }
  .sty-controls { min-width: 0; gap: 14px; }
  .sty-controls h3 { font-size: 26px; }
  .sty-tabs { overflow-x: auto; scrollbar-width: none; }
  .sty-tabs button { flex: none; padding: 0 12px; }
  .sty-hl { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sty-seg, .sty-seg-wrap { width: 100%; display: flex; flex-wrap: wrap; }
  .sty-seg button { flex: 1 1 auto; width: auto; padding: 0 10px; font-size: 14px; }
  .sty-range { grid-template-columns: minmax(0, 1fr) 48px; row-gap: 2px; }
  .sty-range .sty-label { grid-column: 1 / -1; }
  .sty-fonts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sty-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sty-actions { position: sticky; bottom: -16px; background: var(--paper); padding: 10px 0 12px; }
  .sty-actions .btn { flex: 1; }
}

/* ---------- mobil: nástroje vo videu (ako v mobilných editoroch) a pás slov ---------- */
.m-rail, .wstrip { display: none; }
@media (max-width: 640px) {
  .ed-media .player { height: 46vh; }
  .ed-media .monitor { padding: 0; background: #0E0F0E; position: relative; }
  .ed-media .monitor-bar { display: none; }
  .m-rail { display: flex; flex-direction: column; gap: 4px; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 4; }
  .m-rail button, .m-lang { position: relative; display: grid; justify-items: center; gap: 2px; width: 54px; padding: 7px 2px 6px; border: 0; border-radius: 12px; background: rgba(14, 15, 14, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font: 600 10.5px/1.1 var(--f); cursor: pointer; text-align: center; }
  .m-rail svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .m-rail button[data-act="cap"]:not(.on) { color: rgba(255, 255, 255, .45); }
  .m-rail button[data-act="cap"].on svg { stroke: #FFD21F; }
  .m-rail span { max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-lang select { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; font-size: 16px; }
  .ed-media .player { margin: 0 auto; }
  .wstrip:not([hidden]) { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px 50%; background: #0E0F0E; border-top: 1px solid #222; scroll-snap-type: x proximity; }
  .wstrip::-webkit-scrollbar { display: none; }
  .wstrip .ws-w { flex: none; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: #1E201F; color: #C9CEC9; font: 600 14px var(--f); cursor: pointer; scroll-snap-align: center; }
  .wstrip .ws-w.em { color: #4ADE80; }
  .wstrip .ws-w.now { background: var(--chalk); color: var(--ink); }
  .wstrip .ws-w .w-edit { width: auto; min-width: 4ch; font: inherit; border: 0; outline: 2px solid #FFD21F; border-radius: 4px; padding: 0 4px; }
}

/* ---------- mobil: dva kroky (výber blokov → editor klipu) ---------- */
.m-only { display: none !important; }
@media (max-width: 640px) {
  body:not(.m-edit) .ed-media { display: none; }
  .dock-actions #make { display: none; }
  .dock-actions .m-only { display: inline-flex !important; }
  body.m-edit { overflow: hidden; }
  body.m-edit .dock, body.m-edit .cut-bar { display: none !important; }
  body.m-edit .ed-media { position: fixed; inset: 0; z-index: 60; margin: 0; padding: 0; display: flex; flex-direction: column; background: #0E0F0E; box-shadow: none; gap: 0; }
  body.m-edit .ed-media .monitor { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 0; box-shadow: none; }
  body.m-edit .ed-media .player { height: min(70vh, calc(100dvh - 150px)); }
  body.m-edit .m-editbar { display: flex !important; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #0E0F0E; order: 3; }
  .m-editbar .btn { height: 42px; padding: 0 16px; }
  .m-editbar .btn-chalk { background: #1E201F; color: var(--chalk); box-shadow: inset 0 0 0 1.5px #3A3D3A; }
  .m-sum { flex: 1; text-align: center; color: var(--chalk-2); font-size: 15px; }
  body.m-edit .wstrip { order: 2; }
  body.m-edit .ed-help, body.m-edit .timeline { display: none; }
}
@media (max-width: 640px) {
  body.m-edit .topbar, body.m-edit .ruler { display: none; }
  body.m-edit .ed-media { padding-top: env(safe-area-inset-top); }
  body:not(.m-edit) .dock-opts { display: none; }
}

/* ---------- cenník: prepínač mesačne / ročne ---------- */
.lp-bill { display: inline-flex; margin-top: 26px; padding: 4px; background: rgba(8, 26, 19, .45); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.lp-bill button { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border: 0; border-radius: 3px; background: none; color: var(--chalk-2); font: 700 15px var(--f); cursor: pointer; }
.lp-bill button[aria-checked="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--flat); }
.lp-bill em { font-style: normal; font-size: 12.5px; font-weight: 800; padding: 3px 8px; border-radius: 2px; background: var(--red); color: #fff; transform: rotate(-3deg); }
.lp-price[data-bill="month"] .only-year, .lp-price[data-bill="year"] .only-month { display: none; }
.lp-amt s { align-self: center; color: var(--mute); font-size: 20px; font-weight: 700; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.lp-amt.only-year { border-bottom: 0; padding-bottom: 0; margin-bottom: 6px; }
.lp-save { margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px dashed var(--rule); font-size: 13.5px; font-weight: 700; color: var(--red); }
.lp-amt span { max-width: 9ch; line-height: 1.2; }
@media (max-width: 760px) { .lp-bill { display: flex; } .lp-bill button { flex: 1; justify-content: center; padding: 0 10px; } }
.lp-amt b, .lp-amt s { white-space: nowrap; }
.lp-bill em { white-space: nowrap; } @media (max-width: 400px) { .lp-bill em { font-size: 11px; padding: 2px 6px; } .lp-bill button { gap: 6px; } }

/* ---------- štýl titulkov „Rozhovor“ (ako v podcastových klipoch) ---------- */
.cap-r[data-hl="stack"] .stk-prev { position: absolute; left: 50%; bottom: 100%; translate: -50% 0; white-space: nowrap; font-size: .9em; opacity: .5; animation: stk-up .14s ease-out; pointer-events: none; }
.cap-r[data-hl="stack"] .stk-solo { display: inline-block; font-size: 1.9em; color: var(--emph); animation: stk-in .18s ease-out; }
@keyframes stk-up { from { translate: -50% 100%; opacity: 1; } }
@keyframes stk-in { from { opacity: .35; } }
.hl-stack b { opacity: .45; font-weight: 600; font-size: 11px; } .hl-stack i { font-weight: 700; }
/* ---------- rečníci: zlúčenie a nové rozdelenie ---------- */
.spk-chip { position: relative; padding-right: 4px; }
.spk-merge { width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--mute); font: 700 15px/1 var(--f); cursor: pointer; }
.spk-merge:hover { background: var(--paper-2); color: var(--ink); }
.spk-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: max-content; max-width: min(520px, 86vw); padding: 10px 12px; box-shadow: var(--lift-hi); }
.spk-menu p { margin: 0 6px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.spk-into { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 8px; border: 0; border-radius: 15px; background: var(--paper-2); color: var(--ink); font: 700 13px var(--f); cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule); }
.spk-into i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.spk-into:hover { box-shadow: inset 0 0 0 1.5px var(--c); }
.spk-fix { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; color: var(--chalk-2); font-size: 13px; }
.spk-fix span { margin-right: 4px; }
.spk-n { width: 30px; height: 28px; border: 0; border-radius: 3px; background: rgba(255, 255, 255, .1); color: var(--chalk); font: 700 13px var(--f); cursor: pointer; }
.spk-n:hover { background: var(--chalk); color: var(--ink); }
.spk-busy { color: #FFD21F; font-weight: 700; }

/* oprava rečníka pri bloku */
button.sec-spk { border: 0; cursor: pointer; font-family: var(--f); }
button.sec-spk:hover { filter: brightness(1.12); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 3.5px var(--c); }
.sec-spk.manual::after { content: " ✓"; }
.sec-gutter { position: relative; }
.spk-pop { position: absolute; left: calc(100% - 46px); top: 100%; z-index: 40; display: grid; gap: 4px; min-width: 170px; padding: 10px; margin-top: 6px; box-shadow: var(--lift-hi); }
.spk-pop p { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.spk-pop button { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 0; border-radius: 3px; background: none; color: var(--ink); font: 600 13.5px var(--f); text-align: left; cursor: pointer; }
.spk-pop button:hover { background: var(--paper-2); }
.spk-pop button.on { background: var(--paper-2); font-weight: 800; }
.spk-pop button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.spk-pop button.new { color: var(--red); }
.spk-learn { width: auto !important; padding: 0 12px; background: var(--red) !important; color: #fff !important; }
.spk-tip { color: var(--chalk-3); }

/* strih časti bloku dotykom */
.sec-cut { display: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--paper-2); cursor: pointer; place-items: center; box-shadow: inset 0 0 0 1px var(--rule); }
.sec-cut svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
@media (pointer: coarse), (max-width: 640px) { .sec-cut { display: grid; } }
.sec.cut-mode { box-shadow: inset 3px 0 0 #FFD21F; background: #FFFBE6; }
.sec.cut-mode .sec-cut { background: #FFD21F; box-shadow: none; }
.sec.cut-mode .sec-text .w { border-bottom: 1px dashed #C9A400; }
@media (max-width: 640px) {
  .cut-bar { position: fixed; top: auto !important; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 90; left: 12px !important; right: 12px; max-width: none; flex-wrap: wrap; justify-content: center; box-shadow: var(--lift-hi); }
  .cut-bar::before { display: none; }
}

/* efekty strihu v náhľade (rovnaké ako v hotovom klipe, ~0,17 s) */
.ed-media .player video { transition: scale .17s ease-out; }
.fx-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #000; opacity: 0; }
.player.fx-flash .fx-layer { background: #fff; animation: fx-flash .17s linear; }
.player.fx-fade .fx-layer { background: #000; animation: fx-fadein .17s linear; }
.player.fx-glitch video { animation: fx-glitch .2s steps(2) 1; }
.player.fx-punch video { animation: fx-punch .17s ease-out; }
@keyframes fx-flash { from { opacity: .85; } to { opacity: 0; } }
@keyframes fx-fadein { from { opacity: 1; } to { opacity: 0; } }
@keyframes fx-punch { from { transform: scale(1.07); } to { transform: none; } }
@keyframes fx-glitch {
  0% { transform: translate(-6px, 2px); filter: hue-rotate(90deg) saturate(2.5) contrast(1.4); }
  50% { transform: translate(5px, -2px); filter: hue-rotate(-60deg) saturate(2) contrast(1.3); }
  100% { transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .player.fx-glitch video, .player.fx-punch video { animation: none; } }

/* ---------- čistenie zvuku ---------- */
.dn-wrap { position: relative; display: inline-flex; }
.dn-btn { display: inline-flex; align-items: center; gap: 6px; }
.dn-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background .2s; }
.dn-btn.on .dn-dot { background: #5BD08A; box-shadow: 0 0 0 3px rgba(91, 208, 138, .2); }
.dn-pop { position: fixed; z-index: 85; width: 268px; padding: 14px; display: grid; gap: 10px;
  box-shadow: var(--lift-hi); color: var(--ink); text-align: left; }
.dn-pop p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.dn-pop small { font-size: 11.5px; color: var(--ink-3, #6B716C); }
.dn-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; font-size: 14px; }
.dn-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.dn-toggle .mt-track { background: rgba(0, 0, 0, .14); }
.dn-toggle input:checked + .mt-track { background: var(--red); }
.dn-toggle input:checked + .mt-track i { transform: translateX(18px); }
.dn-toggle input:focus-visible + .mt-track { outline: 2px solid var(--ink); outline-offset: 2px; }
.dn-toggle .mt-track i { background: #fff; }
.dn-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dn-ab button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 0; border-radius: 3px; cursor: pointer;
  background: rgba(0, 0, 0, .06); color: var(--ink); font: 600 13px var(--f); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.dn-ab button svg { width: 14px; height: 14px; fill: currentColor; }
.dn-ab button:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.dn-ab button.on { background: var(--ink); color: var(--paper, #fff); }
.dn-ab button.on svg { display: none; }
.dn-ab button.on::before { content: ""; width: 10px; height: 10px; background: currentColor; border-radius: 1px; }
.dn-ab button.busy::before { width: 12px; height: 12px; border-radius: 50%; background: none; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
#m-rail button.on[data-act="dn"] { color: #5BD08A; }
@media (max-width: 640px) {
  body:not(.m-edit) .dn-wrap { display: none; }
  .dn-wrap { position: static; }
  body.m-edit .dn-btn { display: none; }
  .dn-pop { left: 12px !important; right: 12px; top: auto !important; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; }
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- tematické stránky ---------- */
.tp-crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: clamp(14px, 2vw, 24px); font-size: 14px; color: var(--chalk-3); }
.tp-crumbs a { color: var(--chalk-2); text-decoration: none; }
.tp-crumbs a:hover { color: var(--chalk); text-decoration: underline; }
.tp-hero { padding-top: clamp(16px, 3vw, 40px); }
.tp-hero h1 { font-size: clamp(42px, 5.2vw, 78px); max-width: 13ch; }
.tp-vis { max-width: 560px; justify-self: center; width: 100%; }
.tp-vis-note { display: flex; justify-content: space-between; margin: 12px 2px 0; color: var(--chalk-3); font: 700 13px var(--f); letter-spacing: .04em; }
.tp-sound { display: grid; gap: 18px; padding: 24px 24px 26px; transform: rotate(-.8deg); }
.tp-wave { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 14px; }
.tp-wave b { font-size: 14px; font-weight: 800; font-variation-settings: var(--narrow); }
.tp-wave svg { width: 100%; height: 72px; }
.tp-wave path { stroke-width: 1.3; stroke-linecap: round; fill: none; }
.tp-wave.noisy path { stroke: #8C877B; }
.tp-wave.clean path { stroke: var(--red); }
.tp-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(28px, 5vw, 80px); padding: clamp(40px, 6vw, 80px) 0; }
.tp-blocks h2 { font-size: clamp(26px, 2.6vw, 36px); max-width: 18ch; }
.tp-blocks p { color: var(--chalk-2); font-size: 17px; line-height: 1.65; max-width: 52ch; margin: 14px 0 0; }
.tp-more { padding: clamp(20px, 3vw, 40px) 0 clamp(30px, 4vw, 50px); border-top: 1px dashed rgba(237, 243, 238, .18); }
.tp-more h2 { font-size: clamp(24px, 2.4vw, 32px); }
.tp-more ul { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tp-more a { display: inline-block; padding: 10px 14px; border-radius: 3px; color: var(--chalk); text-decoration: none; font-weight: 600; font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(237, 243, 238, .22); }
.tp-more a:hover { box-shadow: inset 0 0 0 1.5px var(--chalk); }
@media (max-width: 760px) { .tp-blocks { grid-template-columns: 1fr; } .tp-wave { grid-template-columns: 1fr; gap: 4px; } }
.sf-topics h2 { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: #fff; }