/* SN Konverze — vizuál podľa ~/sn-graphics/base.css.
   Tokeny sú prevzaté 1:1, aby appka sedela s ostatnou SN grafikou. */

@font-face{font-family:'Gilroy';src:url('fonts/Gilroy-Regular.ttf');font-weight:400;font-display:swap}
@font-face{font-family:'Gilroy';src:url('fonts/Gilroy-Semibold.ttf');font-weight:600;font-display:swap}
@font-face{font-family:'Gilroy';src:url('fonts/Gilroy-ExtraBold.ttf');font-weight:800;font-display:swap}

:root{
  --bg:#0b1020; --card:#141a2e; --ink:#ffffff; --muted:#aab3c5; --dim:#8b94ab;
  --blue:#139ad7; --purple:#54267d; --magenta:#e63163; --gold:#fac02b; --green:#039e49;
  --rainbow:linear-gradient(90deg,#139ad7,#54267d,#e63163,#fac02b,#039e49);
  --radius:22px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Gilroy',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink);
  min-height:100vh; position:relative; overflow-x:hidden;
  padding:0 1rem 4rem;
}

/* pozadie — rovnaké radiálne gradienty ako v SN grafike */
.glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 12% -8%, rgba(230,49,99,.22), transparent 60%),
    radial-gradient(65% 55% at 92% 4%, rgba(19,154,215,.22), transparent 60%),
    radial-gradient(60% 50% at 50% 118%, rgba(250,192,43,.14), transparent 60%);}
.rainbow-top,.rainbow-bottom{position:fixed;left:0;right:0;height:6px;background:var(--rainbow);z-index:3}
.rainbow-top{top:0}.rainbow-bottom{bottom:0}

.wrap{position:relative;z-index:2;max-width:46rem;margin:0 auto;padding-top:3.5rem}

header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2.5rem}
header img{height:2.2rem;width:auto;display:block}

.eyebrow{color:var(--gold);font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;font-size:.72rem;margin-bottom:.6rem}
h1{font-weight:800;font-size:clamp(1.6rem,5vw,2.3rem);line-height:1.15;margin-bottom:.6rem}
.grad{background:var(--rainbow);-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:brightness(1.55) saturate(1.05)}
p.lead{color:var(--muted);font-size:1.02rem;line-height:1.55;margin-bottom:2rem}
.muted{color:var(--muted)} .dim{color:var(--dim);font-size:.86rem;line-height:1.5}

.card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);padding:1.6rem}
.card + .card{margin-top:1rem}

label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.45rem}
input[type=email],input[type=text]{
  width:100%;padding:.85rem 1rem;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:var(--ink);font-family:inherit;font-size:1rem}
input:focus{outline:2px solid var(--blue);outline-offset:1px}
input.code{letter-spacing:.5em;text-align:center;font-size:1.5rem;font-weight:800}

button{
  width:100%;margin-top:1rem;padding:.9rem 1.2rem;border:0;border-radius:99px;
  background:var(--rainbow);color:#fff;font-family:inherit;font-weight:800;
  font-size:1rem;cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
button.ghost{background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--muted)}

.msg{margin-top:1rem;padding:.8rem 1rem;border-radius:14px;font-size:.9rem;line-height:1.45}
.msg.err{background:rgba(230,49,99,.14);border:1px solid rgba(230,49,99,.45);color:#ff8fa3}
.msg.ok{background:rgba(3,158,73,.14);border:1px solid rgba(3,158,73,.45);color:#5fd894}

.pill{display:inline-block;border:1px solid rgba(250,192,43,.5);background:rgba(250,192,43,.12);
  color:var(--gold);font-weight:600;border-radius:99px;padding:.25rem .8rem;font-size:.78rem}

.hidden{display:none}

@media (max-width:480px){
  .wrap{padding-top:2.5rem}
  .card{padding:1.25rem}
}

/* ── upload ──────────────────────────────────────────────────────────────── */
#drop{border:2px dashed rgba(255,255,255,.20);border-radius:var(--radius);
  padding:2.4rem 1.2rem;text-align:center;cursor:pointer;transition:.15s}
#drop:hover,#drop.over{border-color:var(--blue);background:rgba(19,154,215,.08)}
#drop strong{display:block;font-size:1.05rem;margin-bottom:.35rem}
#file{display:none}

.picked-name{font-weight:600;word-break:break-all}
select{width:100%;padding:.8rem 1rem;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:var(--ink);font-family:inherit;font-size:1rem}
select option{background:var(--card);color:var(--ink)}

#progress{margin-top:1.2rem}
.track{height:8px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden}
#bar{height:100%;width:0;background:var(--rainbow);transition:width .25s}
#ptext{margin-top:.5rem;font-size:.85rem;color:var(--muted)}

/* ── fronta ──────────────────────────────────────────────────────────────── */
.job{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.07)}
.job:last-child{border-bottom:0}
.job-name{font-weight:600;word-break:break-all}
.job-right{flex-shrink:0;text-align:right}
.job.ok .job-name{color:#5fd894}
.job.err .job-name{color:#ff8fa3}
/* NIE rainbow gradient: text pilulky prekryje celú šírku vrátane žltozelenej
   časti, kde biele na žltom stráca kontrast. Veľké CTA to znesie, lebo text
   sedí nad purpurovou; tu nie. Plná modrá je čitateľná a stále SN. */
a.dl{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;
  padding:.5rem 1rem;border-radius:99px;font-weight:700;font-size:.85rem}
a.dl:hover{background:#0f87bd}

h2{font-size:1.05rem;font-weight:800;margin-bottom:.9rem}
#heavy-pill{margin-left:.5rem}

/* Dlhé názvy súborov a nadpisy nesmú pretiecť na úzkych displejoch. */
h1{overflow-wrap:break-word;hyphens:auto}
body{overflow-x:hidden}