/* POOURL — Fixed light-by-default, LinkPE-like UI */
*{box-sizing:border-box}
:root{
  --bg:#f6f7fb; --panel:#ffffff; --text:#111827; --muted:#6b7280;
  --border:#e5e7eb; --primary:#2563eb; --primary-700:#1d4ed8;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
.theme-dark{
  --bg:#0b0e14; --panel:#0f1117; --text:#e5e7eb; --muted:#9aa3b2;
  --border:#20293a; --primary:#7c5cff; --primary-700:#6a7dff;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
html,body{height:100%}
body{
  margin:0; font:16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 50% -20%, rgba(37,99,235,.06), transparent 70%),
    radial-gradient(1000px 600px at 50% 120%, rgba(34,197,94,.06), transparent 70%),
    var(--bg);
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Navbar */
.nav{height:68px; display:flex; align-items:center; justify-content:center;
     border-bottom:1px solid var(--border); background:rgba(255,255,255,.92);
     backdrop-filter:blur(6px); position:sticky; top:0; z-index:20}
.theme-dark .nav{background:rgba(15,17,23,.8)}
.nav-inner{height:68px; display:flex; align-items:center; justify-content:space-between; width:100%}
.brand img{height:36px; width:auto; display:block}
.menu{display:flex; align-items:center; gap:22px}
.menu a{color:var(--text); text-decoration:none; opacity:.9; font-weight:600}
.menu a:hover{opacity:1; color:var(--primary)}
.select,.toggle{border:1px solid var(--border); border-radius:10px; padding:8px 12px; background:var(--panel); color:var(--text); cursor:pointer}
.toggle{display:flex; align-items:center; gap:8px}

/* Hero */
.hero{padding:72px 0 40px; text-align:center}
h1{font-size:46px; margin:0 0 12px; font-weight:800; letter-spacing:.3px}
.sub{font-size:20px; color:var(--muted)}

/* Card form */
.card{width:760px; max-width:100%; margin:28px auto 0; background:var(--panel);
      border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:22px}
.row{display:flex; gap:14px; margin-bottom:14px}
.input{width:100%; padding:16px 18px; border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text); outline:none; font-size:16px}
.input:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.btn{padding:14px 22px; border:none; border-radius:12px; background:linear-gradient(180deg,var(--primary),var(--primary-700)); color:#fff; font-weight:800; cursor:pointer; box-shadow:0 10px 24px rgba(37,99,235,.25)}
.btn:active{transform:translateY(1px)}

/* Output */
.out{margin-top:16px; padding:14px; border:1px solid var(--border); border-radius:12px; background:rgba(0,0,0,.02)}
.ok{background:#ecfdf5; border-color:#bbf7d0}
.error{background:#fff1f2; border-color:#fecdd3}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, monospace}
.copy{margin-left:10px; border:1px solid var(--border); background:var(--panel); color:var(--text); padding:8px 10px; border-radius:10px; cursor:pointer}

/* Footer */
.footer{padding:28px 0 40px; text-align:center; color:var(--muted)}
.footer a{color:var(--text); text-decoration:none; opacity:.85}
.footer a:hover{opacity:1; color:var(--primary)}
.footer .sep{opacity:.3; margin:0 8px}

/* Responsive */
@media(max-width:760px){
  .row{flex-direction:column}
  h1{font-size:34px}
  .sub{font-size:18px}
}