/* ============================================================
   OpenConvert - shared styles.
   Dark, quiet, human. Flat #0f0f0f, Exo 2, lowercase display
   text, cyan glow accents, hairline borders. One file = fast.
   Rebrand = find/replace "OpenConvert" in the HTML files.
   ============================================================ */
:root{
  --bg:#0c0c0c;
  --panel:#111111;
  --panel-2:#090909;
  --ink:#f5f5f5;
  --muted:rgba(255,255,255,.55);
  --accent:#00c8ff;            /* glow cyan */
  --acc-h:195;                 /* hue for hsla() glows */
  --accent-2:#bff6e6;          /* soft mint - success/savings */
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --danger:#e74c3c;
  --radius:14px;
  --maxw:1050px;
  --shadow:0 6px 22px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 'Exo 2',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  min-height:100vh;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
main{flex:1}
::selection{background:hsla(var(--acc-h),90%,65%,.35)}
a{color:#cfe9ff;text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,Consolas,monospace;background:#090909;border-radius:4px;padding:.15em .35em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 18px}

/* Header / nav - quiet glass bar */
header.site{border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:0;z-index:20;
  background:rgba(10,10,10,.9);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px)}
header.site .bar{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em;
  color:var(--ink);
  text-shadow:0 0 8px hsla(var(--acc-h),100%,60%,.0);transition:text-shadow .3s ease}
.brand:hover{text-decoration:none;
  text-shadow:0 0 10px hsla(var(--acc-h),100%,60%,.55),0 0 22px hsla(var(--acc-h),100%,60%,.3)}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent),0 0 26px hsla(var(--acc-h),100%,60%,.4)}
nav.top a{color:var(--muted);margin-left:20px;font-size:14px;font-weight:600;transition:color .2s ease}
nav.top a:hover{color:#fff;text-decoration:none}

/* Hero */
.hero{padding:56px 0 26px;text-align:center}
.hero .badge{display:inline-block;font-size:12px;color:var(--accent-2);border:1px solid var(--line);
  border-radius:999px;padding:5px 13px;margin-bottom:18px;letter-spacing:.02em}
.hero h1{font-size:clamp(30px,5.4vw,48px);line-height:1.1;margin:0 0 14px;letter-spacing:-.02em;
  font-weight:750;}
.hero h1 span{color:#fff;
  text-shadow:0 0 10px hsla(var(--acc-h),100%,60%,.6),0 0 24px hsla(var(--acc-h),100%,60%,.35)}
.hero p{color:var(--muted);font-size:clamp(15px,2.2vw,18px);max-width:62ch;margin:0 auto}

/* Tool grid - dark cards, cyan ring on hover (orb energy) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:32px 0}
.card{background:var(--panel-2);border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);padding:20px;display:block;
  transition:border-color .25s ease,box-shadow .25s ease,transform .12s ease}
.card:hover{text-decoration:none;transform:translateY(-2px);
  border-color:hsla(var(--acc-h),90%,65%,.45);
  box-shadow:0 0 0 1px hsla(var(--acc-h),90%,65%,.25),0 0 18px 4px hsla(var(--acc-h),90%,65%,.14)}
.card .ic{font-size:24px}
.card h3{margin:10px 0 6px;font-size:17px;color:var(--ink);font-weight:700;}
.card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5;}
.card .soon{display:inline-block;margin-top:10px;font-size:11px;color:var(--muted);
  border:1px solid var(--line);padding:2px 9px;border-radius:999px;}

/* Tool page panel */
.tool{background:var(--panel-2);border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin:24px 0}
.drop{border:2px dashed rgba(255,255,255,.18);border-radius:var(--radius);padding:40px 20px;text-align:center;
  cursor:pointer;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
.drop:hover,.drop.drag{border-color:hsla(var(--acc-h),90%,65%,.6);
  background:hsla(var(--acc-h),90%,65%,.04);
  box-shadow:inset 0 0 30px hsla(var(--acc-h),90%,65%,.05)}
.drop strong{display:block;font-size:18px;margin-bottom:6px;font-weight:700;}
.drop span{color:var(--muted);font-size:14px}

/* Controls */
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:22px 0;align-items:end}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;}
.field select,.field input[type=number]{width:100%;padding:11px 12px;border-radius:10px;
  border:1px solid var(--line-strong);background:#0c0c0c;color:var(--ink);
  font-size:15px;font-family:inherit;transition:border-color .2s ease}
.field select:focus,.field input[type=number]:focus{outline:none;border-color:hsla(var(--acc-h),90%,65%,.55)}
input[type=range]{width:100%;accent-color:var(--accent)}
.row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* Buttons - unbound pills */
.btn{padding:11px 20px;border-radius:999px;cursor:pointer;font-weight:700;font-size:14.5px;
  font-family:inherit;letter-spacing:.01em;color:#f5f5f5;
  background:linear-gradient(180deg,#171717 0%,#121212 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  transition:border-color .2s ease,box-shadow .2s ease,transform .08s ease,background .2s ease}
.btn:hover:not(:disabled){
  background:linear-gradient(180deg,#1a1a1a 0%,#131313 100%);
  border-color:hsla(var(--acc-h),90%,65%,.4);
  box-shadow:0 0 0 1px hsla(var(--acc-h),90%,65%,.22),inset 0 0 0 1px rgba(255,255,255,.05),0 6px 14px rgba(0,0,0,.4)}
.btn:active:not(:disabled){transform:translateY(1px) scale(.99)}
.btn.ghost{background:transparent;border:1px solid var(--line-strong)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* Results */
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:20px}
.result{border:1px solid var(--line);border-radius:12px;padding:12px;background:#0c0c0c}
.result img{width:100%;height:130px;object-fit:contain;background:#070707;border-radius:8px;margin-bottom:10px}
.result .meta{font-size:13px;color:var(--muted)}
.result .save{color:var(--accent-2);font-weight:700}
.result .grow{color:var(--danger);font-weight:700}
.result a.dl{display:block;text-align:center;margin-top:10px;padding:8px 12px;border-radius:999px;
  background:linear-gradient(180deg,#171717 0%,#121212 100%);
  border:1px solid hsla(var(--acc-h),90%,65%,.3);
  color:var(--accent-2);font-weight:700;font-size:13.5px;
  transition:border-color .2s ease,box-shadow .2s ease}
.result a.dl:hover{text-decoration:none;border-color:hsla(var(--acc-h),90%,65%,.6);
  box-shadow:0 0 12px hsla(var(--acc-h),90%,65%,.2)}

/* Privacy strip */
.privacy-strip{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;color:var(--muted);
  font-size:13px;margin:20px 0 0;border-top:1px solid var(--line);padding-top:16px;}
.privacy-strip b{color:var(--ink)}

/* Prose (SEO body - normal case for readability) */
.prose{max-width:72ch;margin:44px auto}
.prose h2{font-size:22px;margin:36px 0 12px;letter-spacing:-.01em;font-weight:750;}
.prose h3{font-size:17px;margin:24px 0 8px;}
.prose p,.prose li{color:rgba(255,255,255,.78)}
.prose a{color:#cfe9ff}
.faq dt{margin-top:18px}
.faq dt h3{font-weight:700;color:var(--ink);font-size:15px;margin:0;line-height:1.4}
.faq dd{margin:6px 0 0;color:var(--muted)}

/* Ad slots.
   HIDDEN by default so visitors never see placeholder text.
   After AdSense approval: paste your ad unit code inside the
   <div class="ad"> blocks in the HTML, then DELETE the
   "display:none" line below. (If you use AdSense Auto Ads
   instead, just leave this hidden forever.) */
.ad{margin:28px auto;max-width:728px;min-height:90px;border:1px dashed var(--line);border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.22);
  font-size:12px;text-align:center;}
.ad{display:none}

/* Footer */
footer.site{border-top:1px solid var(--line);margin-top:56px;padding:28px 0;
  color:var(--muted);font-size:14px;background:#0c0c0c;}
footer.site .bar{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer.site a{color:var(--muted);transition:color .2s ease}
footer.site a:hover{color:#fff}

@media(max-width:560px){
  header.site .bar{height:auto;min-height:54px;flex-wrap:wrap;padding:8px 18px;row-gap:4px}
  nav.top a{margin-left:14px}
  .hero{padding:40px 0 18px}
}

/* Language switcher */
.langsw{margin-left:18px;background:#0c0c0c;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.38);border-radius:999px;padding:6px 10px;font-family:inherit;font-size:13px;cursor:pointer;color-scheme:dark}
.langsw:hover{color:#fff;border-color:hsla(var(--acc-h),90%,65%,.55)}
@media(max-width:560px){.langsw{margin-left:10px;padding:5px 8px;max-width:120px}}