/* ============================================================
   SmartCreator Tools — shared.css
   KÖZÖS DIZÁJNRENDSZER  ·  v1.0
   ------------------------------------------------------------
   Koncepció: "Stúdió rack / hardver front-panel" esztétika.
   Minden eszköz egy MODUL egy berendezés-rackben: szilkszitázott
   feliratok (JetBrains Mono), kefélt-fém panelél, sarokcsavarok és
   narancs státusz-LED-ek. A kiemelő szín (narancs neon) szándékosan
   CSAK a lényegi helyeken jelenik meg: LED, aktív állapot, fő gomb,
   csúszka. Minden más csendes és fegyelmezett.
   ------------------------------------------------------------
   Ezt az EGY fájlt linkeli mind a 4 oldal:
     /index.html                 ->  href="./shared.css"
     /audio-to-video/index.html  ->  href="../shared.css"
     /qr-generator/index.html    ->  href="../shared.css"
     /photo-optimizer/index.html ->  href="../shared.css"
   ============================================================ */

/* Betűtípusok — egy helyről húzva, hogy minden aloldal egységes legyen.
   (Teljes offline működéshez ezt érdemes self-hostolt .woff2-re cserélni.) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============================================================
   1. DESIGN TOKENS — minden szín/ritmus innen származik
   ============================================================ */
:root{
  /* Felületek: meleg feketétől a kiemelt panelig */
  --void:       #0a0a0b;   /* oldalháttér (majdnem fekete, enyhén meleg) */
  --panel:      #151517;   /* panel felület */
  --panel-hi:   #1d1d21;   /* kiemelt / hover panel */
  --line:       #2a2a31;   /* hajszálvékony elválasztók, gravírozás */
  --line-soft:  #1f1f24;

  /* Tinta (szöveg) */
  --ink:        #ECEAE4;   /* elsődleges — meleg törtfehér, mint a szilkszita */
  --ink-dim:    #8B8B93;   /* másodlagos */
  --ink-faint:  #5A5A62;   /* feliratok, jelölők, lábléc */

  /* Kiemelő: "narancs neon" — a teljes rendszer EGYETLEN ékszíne */
  --flame:      #FF5A1F;
  --flame-soft: #FF7A45;
  --flame-deep: #1a0a04;   /* sötét tinta narancs alapon (kontraszt) */
  --flame-glow: rgba(255,90,31,.45);
  --flame-wash: rgba(255,90,31,.08);

  /* Sugarak + ritmus */
  --r-sm: 6px;
  --r:    11px;
  --r-lg: 16px;
  --gap:  clamp(16px, 3vw, 26px);
  --pad:  clamp(20px, 3.2vw, 34px);

  /* Tipográfia */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Mozgás */
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ============================================================
   2. RESET + BÁZIS
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

/* FONTOS: a [hidden] attribútum mindig erősebb legyen, mint bármelyik display
   szabály (pl. .tool-grid{display:grid}). Enélkül a hidden elem mégis látszik. */
[hidden]{ display:none !important; }

body{
  font-family:var(--font-display);
  color:var(--ink);
  background:var(--void);
  /* finom függőleges mélység + alig látható vignetta */
  background-image:
    radial-gradient(120% 80% at 50% -10%, #121214 0%, transparent 55%),
    radial-gradient(120% 120% at 50% 120%, #060607 0%, transparent 60%);
  background-attachment:fixed;
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
img,canvas,svg,video{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }

/* Egységes, jól látható billentyűzet-fókusz az egész rendszerben */
:focus-visible{
  outline:2px solid var(--flame);
  outline-offset:2px;
  border-radius:3px;
}

/* ============================================================
   3. ELRENDEZÉS PRIMITÍVEK
   ============================================================ */
.wrap{
  width:100%;
  max-width:980px;
  margin-inline:auto;
  padding-inline:clamp(16px, 4vw, 40px);
}
.wrap--narrow{ max-width:720px; }

.stack > * + *{ margin-top:var(--gap); }   /* függőleges ritmus */

.section{ padding-block:clamp(40px, 7vw, 72px); }

/* ============================================================
   4. RACK-SÍN FEJLÉC  (.rail)
   A lap teteje = rack-tartósín. Bal oldalon a "típusszám" (márka),
   jobb oldalon kis státuszklaszter. A két végén "rögzítőfuratok".
   ============================================================ */
.rail{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:13px clamp(16px, 4vw, 40px);
  background:linear-gradient(180deg,#101012,#0c0c0d);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
/* rögzítőfuratok a sín két szélén */
.rail::before,.rail::after{
  content:""; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #2c2c33, #050506 70%);
  box-shadow:inset 0 0 2px #000, 0 1px 0 rgba(255,255,255,.04);
  flex:0 0 auto;
}
.rail__brand{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.86rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6em;
  margin-right:auto; margin-left:14px;
}
.rail__brand b{ color:var(--flame); font-weight:700; }
.rail__brand .mk{                         /* kis "termékjel" négyzet */
  width:14px; height:14px; border-radius:3px;
  background:linear-gradient(135deg,var(--flame),#c93c10);
  box-shadow:0 0 12px var(--flame-glow);
}
.rail__status{
  font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint);
  display:inline-flex; align-items:center; gap:14px;
  margin-right:14px;
}
.rail__status .dot{
  display:inline-flex; align-items:center; gap:.5em; color:var(--ink-dim);
}

/* ============================================================
   5. STÁTUSZ-LED  (.led)
   Alapból "kikapcsolt" sötét pont; hoverre / .is-on-ra narancsosan izzik.
   ============================================================ */
.led{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:#3a2418;
  box-shadow:inset 0 0 2px rgba(0,0,0,.8);
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.led.is-on{
  background:var(--flame);
  box-shadow:0 0 10px var(--flame-glow), 0 0 2px var(--flame);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.62} }

/* ============================================================
   6. EYEBROW / SZILKSZITA FELIRAT  (.label)
   Mono, ritkított, kicsi — mint a panelre nyomtatott felirat.
   ============================================================ */
.label{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:inline-flex; align-items:center; gap:.7em;
}
.label .idx{ color:var(--flame); }     /* a [01]/[02]/[03] sorszám */

/* ============================================================
   7. TIPOGRÁFIA SKÁLA
   ============================================================ */
.display{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.1rem, 6.5vw, 4rem);
  line-height:1.02;
  letter-spacing:-.02em;
}
.h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.4rem, 3vw, 1.9rem);
  line-height:1.1;
  letter-spacing:-.015em;
}
.h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.18rem;
  letter-spacing:-.01em;
}
.lead{
  font-size:clamp(1rem, 2vw, 1.16rem);
  color:var(--ink-dim);
  max-width:54ch;
}
.muted{ color:var(--ink-dim); }
.faint{ color:var(--ink-faint); }
.mono{ font-family:var(--font-mono); }

/* ============================================================
   8. PANEL / MODUL  (.panel, .module)
   A rendszer alapköve. Sötét panel + hajszál keret + kefélt felső
   sheen + 4 sarokcsavar. A .module ezt egészíti ki interaktivitással.
   ============================================================ */
.panel{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--pad);
  /* 4 sarok "csavarfej" + alap panelszín egyetlen háttérben */
  background:
    radial-gradient(circle at 15px 15px,                       rgba(255,255,255,.06) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 15px) 15px,          rgba(255,255,255,.06) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 15px calc(100% - 15px),          rgba(255,255,255,.06) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 15px) calc(100% - 15px), rgba(255,255,255,.06) 0 1.4px, transparent 2.2px),
    var(--panel);
}
/* kefélt-fém sheen a panel felső élén */
.panel::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.13) 18%, rgba(255,255,255,.13) 82%, transparent);
  border-radius:var(--r) var(--r) 0 0;
}

/* Interaktív modulkártya a főoldalon (link köré) */
.module{
  display:block;
  transition:transform .18s var(--ease), border-color .25s var(--ease), background-color .25s;
}
.module:hover{
  transform:translateY(-3px);
  border-color:#39323a;
}
.module:hover .led{                        /* hoverre kigyullad a LED */
  background:var(--flame);
  box-shadow:0 0 10px var(--flame-glow), 0 0 2px var(--flame);
}
.module:hover .module__go{ color:var(--flame); gap:1em; }

.module__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:18px;
}
.module__go{
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-dim);
  display:inline-flex; align-items:center; gap:.7em;
  transition:color .2s, gap .2s var(--ease);
}
.module__solve{                            /* "mit old meg" mikrosor */
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:.76rem; color:var(--ink-faint);
}

/* ============================================================
   9. GOMBOK  (.btn, .btn-flame)
   Tapintható front-panel gomb — lenyomásra "besüllyed".
   ============================================================ */
.btn{
  font-family:var(--font-mono);
  font-size:.82rem; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink);
  background:var(--panel-hi);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:.74em 1.15em;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  transition:transform .12s var(--ease), border-color .2s, background-color .2s, box-shadow .2s;
}
.btn:hover{ background:#232329; border-color:#3a3a44; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }

/* Elsődleges, narancs "power" gomb */
.btn-flame{
  color:var(--flame-deep);
  background:var(--flame);
  border-color:var(--flame);
  font-weight:700;
}
.btn-flame:hover{ background:var(--flame-soft); box-shadow:0 0 24px var(--flame-glow); }
.btn-flame:disabled{ background:var(--flame); }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ============================================================
   10. ŰRLAPELEMEK  (mezők, csúszka, legördülő, dropzone)
   A 3 eszköz mind ezeket használja -> egységes megjelenés.
   ============================================================ */

/* Mező-csoport címkével */
.field{ display:block; }
.field > .field__label{
  display:block; margin-bottom:8px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint);
}

/* Szöveg/URL beviteli mező és legördülő közös stílusa */
.input,.select{
  width:100%;
  font-family:var(--font-mono); font-size:.92rem;
  color:var(--ink);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:.8em .95em;
  transition:border-color .2s, box-shadow .2s;
}
.input:focus,.select:focus{
  border-color:var(--flame);
  box-shadow:0 0 0 3px var(--flame-wash);
  outline:none;
}
.input::placeholder{ color:var(--ink-faint); }

/* Legördülő egyedi nyíllal (natív nyíl elrejtve) */
.select{
  -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
                   linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position:calc(100% - 18px) center, calc(100% - 13px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:2.4em; cursor:pointer;
}

/* Csúszka (range) — ITT a narancs igazán fontos: a fő vezérlő.
   Pl. QR sarok-lekerekítés, kép-tömörítés minőség. */
input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:99px;
  background:var(--line); outline:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:var(--flame); border:2px solid var(--void);
  box-shadow:0 0 0 1px var(--flame), 0 0 12px var(--flame-glow);
  transition:box-shadow .2s;
}
input[type="range"]::-webkit-slider-thumb:hover{ box-shadow:0 0 0 1px var(--flame), 0 0 18px var(--flame-glow); }
input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--flame); border:2px solid var(--void);
  box-shadow:0 0 0 1px var(--flame);
}
input[type="range"]::-moz-range-track{ height:4px; border-radius:99px; background:var(--line); }

/* Színes minta-pötty (pl. QR paletta választó) */
.swatch{
  width:30px; height:30px; border-radius:8px; cursor:pointer;
  border:2px solid transparent; transition:border-color .15s, transform .12s var(--ease);
}
.swatch:hover{ transform:scale(1.08); }
.swatch.is-active{ border-color:var(--ink); }

/* Drop-zóna (fájl behúzás / kattintás) */
.dropzone{
  display:block;                 /* a <label> alapból inline -> block kell, különben széttöredezik */
  border:1.5px dashed var(--line);
  border-radius:var(--r);
  background:var(--panel);
  padding:clamp(26px, 5vw, 46px);
  text-align:center; cursor:pointer;
  transition:border-color .2s, background-color .2s;
}
.dropzone:hover,
.dropzone.is-drag{ border-color:var(--flame); background:#17120e; }
.dropzone__hint{
  font-family:var(--font-mono); font-size:.82rem; color:var(--ink-dim);
}
.dropzone__hint b{ color:var(--ink); }
.dropzone input[type="file"]{ display:none; }

/* ============================================================
   11. FOLYAMATJELZŐ  (.progress)
   Pl. az ffmpeg.wasm kódolás haladása.
   ============================================================ */
.progress{
  height:6px; border-radius:99px; background:var(--line); overflow:hidden;
}
.progress__fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--flame), var(--flame-soft));
  box-shadow:0 0 12px var(--flame-glow);
  transition:width .25s var(--ease);
}
.progress-label{
  font-family:var(--font-mono); font-size:.74rem; color:var(--ink-dim);
  display:flex; justify-content:space-between; margin-bottom:8px;
}

/* Állapot-naplósor (mono, halvány) — pl. ffmpeg log echo */
.log{
  font-family:var(--font-mono); font-size:.74rem; line-height:1.7;
  color:var(--ink-faint); white-space:pre-wrap; word-break:break-word;
  max-height:160px; overflow:auto;
}

/* ============================================================
   12. HŐS-SZEKCIÓ SEGÉD: EKVALIZER-CSÍKOK  (.eq)
   Tiszta CSS animáció (reduced-motion alatt megáll). A front-panel
   "él" érzetét adja a főoldal hős blokkjához.
   ============================================================ */
.eq{ display:inline-flex; align-items:flex-end; gap:3px; height:20px; }
.eq span{
  width:3px; border-radius:2px; background:var(--flame);
  box-shadow:0 0 8px var(--flame-glow);
  animation:eq 1.1s var(--ease) infinite;
}
.eq span:nth-child(1){ animation-delay:-.0s }
.eq span:nth-child(2){ animation-delay:-.25s }
.eq span:nth-child(3){ animation-delay:-.5s }
.eq span:nth-child(4){ animation-delay:-.15s }
.eq span:nth-child(5){ animation-delay:-.4s }
.eq span:nth-child(6){ animation-delay:-.65s }
@keyframes eq{ 0%,100%{height:18%} 50%{height:100%} }

/* ============================================================
   13. SPEC-CSÍK / LÁBLÉC  (.spec, .foot)
   A megkötések ("0 szerver…") értékajánlatként kommunikálva.
   ============================================================ */
.spec{
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center;
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em;
  color:var(--ink-faint);
}
.spec .on{ color:var(--flame); }
.foot{
  border-top:1px solid var(--line);
  padding-block:28px;
  font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint);
}

/* ============================================================
   14. ESZKÖZOLDAL SEGÉDEK  (kétoszlopos vezérlő/előnézet)
   ============================================================ */
.tool-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:1fr;
}
@media (min-width:840px){
  .tool-grid--split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
}

.preview{
  display:grid; place-items:center;
  min-height:240px;
  background:
    linear-gradient(45deg,#0e0e10 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(-45deg,#0e0e10 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(45deg, transparent 75%, #0e0e10 75%) 0 0/16px 16px,
    linear-gradient(-45deg, transparent 75%, #0e0e10 75%) 0 0/16px 16px,
    var(--panel);            /* "átlátszó" sakktábla minta az előnézethez */
  border:1px solid var(--line); border-radius:var(--r); padding:18px;
}

/* ============================================================
   15. HOZZÁFÉRHETŐSÉG: csökkentett mozgás
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
/* ============================================================
   KIEGÉSZÍTÉSEK (audit) — akadálymentesség, lábléc-nav, jogi oldalak.
   Mind additív: a meglévő tokenekből építkezik, a vizuál nem változik.
   ============================================================ */

/* Skip-link: billentyűzettel a tartalomra ugrás (a11y) */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--flame); color:var(--flame-deep);
  font-family:var(--font-mono); font-weight:700; font-size:.8rem;
  padding:10px 16px; border-radius:0 0 var(--r-sm) 0; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* Lábléc-navigáció (Privacy / Terms / All tools) */
.foot__nav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.foot__link{
  color:var(--ink-dim); text-decoration:none;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em;
  border-bottom:1px solid transparent; transition:.15s var(--ease);
}
.foot__link:hover{ color:var(--ink); border-bottom-color:var(--flame); }
.foot__sep{ color:var(--ink-faint); }

/* Privacy/value microcopy badge a gombok alatt */
.assure{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  font-family:var(--font-mono); font-size:.72rem; color:var(--ink-dim);
  margin-top:14px;
}
.assure span{ display:inline-flex; align-items:center; gap:.45em; }
.assure b{ color:var(--flame); font-weight:700; }

/* ---- Jogi / hosszú szöveges oldalak (privacy.html, terms.html) ---- */
.legal{ max-width:760px; }
.legal h2{
  font-family:var(--font-display); font-size:1.35rem; color:var(--ink);
  margin:34px 0 12px; letter-spacing:-.01em;
}
.legal h3{ font-family:var(--font-display); font-size:1.05rem; color:var(--ink); margin:22px 0 8px; }
.legal p, .legal li{ color:var(--ink-dim); line-height:1.7; font-size:.98rem; }
.legal p{ margin:10px 0; }
.legal ul{ margin:10px 0 10px 1.1em; display:grid; gap:6px; }
.legal a{ color:var(--flame-soft); }
.legal .updated{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint); }
.legal strong{ color:var(--ink); }