/* Minimal, fast CSS */
:root{
  --bg:#f8fafc;
  --panel:#ffffff;
  --muted:#64748b;
  --text:#0f172a;
  --brand:#2563eb;
  --accent:#16a34a;
  --danger:#dc2626;
  --card:#ffffff;
  --border:#d0d5dd;
  --focus:#2563eb;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", "Helvetica Neue", Arial;
  background:linear-gradient(180deg,#f8fafc,#f1f5f9 60%, #e2e8f0);
  color:var(--text);
}
.site-header{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:16px 20px; position:sticky; top:0; background:rgba(248,250,252,.9); backdrop-filter: blur(10px); border-bottom:1px solid var(--border); z-index:10;
}
.brand{
  font-weight:800; letter-spacing:.2px; color:var(--text); text-decoration:none; display:inline-flex; align-items:center;
}
.brand:hover{color:var(--brand)}
.badge{font-weight:600; margin-left:8px; color:var(--brand)}
.header-controls{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.tool-nav{display:flex; gap:8px; flex-wrap:wrap}
.nav-link{
  text-decoration:none; border:1px solid var(--border); color:var(--text); padding:8px 14px; border-radius:8px; font-weight:600; background:#ffffff; box-shadow:0 1px 2px rgba(15,23,42,.08);
}
.nav-link[aria-current="page"], .nav-link.active{border-color:var(--brand); outline:2px solid rgba(37,99,235,.25); outline-offset:1px}
.tabs{display:flex; gap:8px}
.tab{background:#ffffff; border:1px solid var(--border); color:var(--text); padding:8px 12px; border-radius:8px; cursor:pointer; box-shadow:0 1px 2px rgba(15,23,42,.08)}
.tab.active{border-color:var(--brand); outline:2px solid rgba(37,99,235,.25)}
.lang select{
  border:1px solid var(--border); border-radius:8px; padding:8px 12px; background:#ffffff; font-weight:600; color:var(--text);
}

main{padding:20px; max-width:1200px; margin:0 auto}
main.tool-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(240px, 300px); gap:24px}
main.landing{display:flex; flex-direction:column; align-items:center; text-align:center; gap:32px; padding:48px 20px 64px}
@media (max-width: 900px){
  main.tool-layout{ grid-template-columns: 1fr; }
  #ad-rail{ display:none }
}
@media (max-width: 700px){
  .site-header{flex-direction:column; align-items:flex-start;}
  .header-controls{width:100%; flex-direction:column; align-items:flex-start;}
  .tool-nav{width:100%}
  .tool-nav .nav-link{flex:1 1 100%; text-align:center}
}
.panel{background:var(--panel); border:1px solid var(--border); padding:16px; border-radius:12px; display:none; box-shadow:0 10px 25px rgba(15,23,42,.08)}
.panel.active{display:block}
h1{margin:.2rem 0 1rem}
.trust{color:var(--muted); font-size:.95rem; margin-top:-4px}

.file-drop{
  display:block;
  border:2px dashed var(--border);
  border-radius:16px;
  padding:20px 20px;
  text-align:center;
  cursor:pointer;
  margin-bottom:16px;
  background:#f1f5f9;
  color:var(--text);
  min-height:100px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.file-drop input{display:none}
.file-list{display:flex; flex-direction:column; gap:8px; margin:8px 0 12px}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:8px 0 12px}
.field label{display:block; font-weight:600; margin-bottom:6px}
.field input[type="text"], .field input[type="number"], .field select{
  width:100%; padding:10px; border-radius:10px; border:1px solid var(--border); background:#ffffff; color:var(--text); box-shadow:inset 0 1px 2px rgba(15,23,42,.05)
}
small{color:var(--muted)}

.primary{background:var(--brand); color:#ffffff; border:none; border-radius:10px; padding:12px 16px; font-weight:800; cursor:pointer; box-shadow:0 8px 16px rgba(37,99,235,.2); text-decoration:none; display:inline-block}
.primary:focus{outline:2px dashed var(--focus); outline-offset:2px}

.status{min-height:24px; margin:8px 0; color:var(--muted)}
.result{border-top:1px dashed var(--border); margin-top:12px; padding-top:12px}
.result.hidden{display:none}
.download{display:inline-block; background:var(--accent); color:#ffffff; font-weight:800; padding:10px 14px; border-radius:10px; text-decoration:none; box-shadow:0 8px 16px rgba(22,163,74,.18)}

#ad-rail{background:var(--card); border:1px solid var(--border); border-radius:12px; min-height:300px; padding:12px; box-shadow:0 10px 25px rgba(15,23,42,.08)}
.ad-block{background:#f8fafc; border:1px dashed var(--border); border-radius:12px; min-height:250px; margin-top:16px}

.site-footer{padding:20px; color:var(--muted); text-align:center}
.ribbon{margin-bottom:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.hero{max-width:720px}
.hero .eyebrow{color:var(--brand); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.8rem}
.hero h1{font-size:clamp(2rem, 5vw, 3.2rem); margin:0 0 1rem}
.hero p{color:var(--muted); font-size:1.05rem; margin:0 auto 1.5rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.ghost-link{
  display:inline-block; border:1px solid var(--border); border-radius:10px; padding:12px 16px; font-weight:700; text-decoration:none; color:var(--text); background:rgba(255,255,255,.85); box-shadow:0 1px 2px rgba(15,23,42,.08);
}
.text-block{
  max-width:800px;
  margin:0 auto 32px;
  text-align:left;
  line-height:1.65;
  color:var(--muted);
}
.text-block h2{color:var(--text); margin-top:0; margin-bottom:.5rem}
.text-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:16px;
  text-align:left;
}
.text-grid article{
  background:rgba(255,255,255,.85);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}
.text-grid h3{margin-top:0; margin-bottom:.4rem}
.text-grid p{margin:0; color:var(--muted); line-height:1.6}
.tool-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
}
.tool-card{
  background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:0 10px 25px rgba(15,23,42,.08); text-align:left; display:flex; flex-direction:column; gap:12px;
}
.tool-card h2{margin:0}
.tool-card p{margin:0; color:var(--muted)}
.tool-card a{color:var(--brand); font-weight:700; text-decoration:none}
.tool-card a:hover{text-decoration:underline}