:root{
  --fc-primary:#0ea5e9;
  --fc-primary-dark:#0b83b8;
  --fc-bg:#0b1220;
  --fc-card:#0f172a;
  --fc-text:#e6f3ff;
  --fc-muted:#94a3b8;
  --ok:#22c55e;
  --bad:#ef4444;
  --fc-input:#0b1630;
  --fc-border: rgba(148,163,184,.35);
  --fc-border-strong: rgba(148,163,184,.22);
  --fc-shadow: 0 10px 30px rgba(0,0,0,.25);
  --glass-1: rgba(255,255,255,0.02);
  --glass-2: rgba(255,255,255,0.01);
  --ring: rgba(14,165,233,.22);
}
:root[data-theme="light"]{
  --fc-primary:#0ea5e9;
  --fc-primary-dark:#0791cf;
  --fc-bg:#f3f7fb;
  --fc-card:#ffffff;
  --fc-text:#0b1220;
  --fc-muted:#4b5563;
  --ok:#16a34a;
  --bad:#dc2626;
  --fc-input:#f8fafc;
  --fc-border: rgba(15,23,42,.18);
  --fc-border-strong: rgba(15,23,42,.15);
  --fc-shadow: 0 8px 24px rgba(2,6,23,.08);
  --glass-1:#fff;
  --glass-2:#fff;
  --ring: rgba(14,165,233,.32);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", Helvetica, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fc-text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(14,165,233,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, rgba(14,165,233,.12), transparent 60%),
    var(--fc-bg);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.topbar{
  position:fixed; top:12px; left:0; right:0;
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 16px; pointer-events:none;
}
.theme-toggle{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--fc-border);
  background:var(--fc-card);
  border-radius:999px; padding:8px 10px; box-shadow: var(--fc-shadow);
}
.toggle-btn{
  appearance:none; width:46px; height:26px; border-radius:999px; position:relative; cursor:pointer; outline:none; border:1px solid var(--fc-border);
  background:linear-gradient(180deg, var(--fc-primary), var(--fc-primary-dark));
}
.toggle-btn:before{
  content:""; position:absolute; top:50%; transform:translateY(-50%); left:2px; width:22px; height:22px; border-radius:50%; background:#fff;
  transition:left .18s ease;
}
:root[data-theme="light"] .toggle-btn:before{ left:22px; }
.theme-label{font-weight:600; font-size:13px; min-width:54px; text-align:center}

.container{ width:100%; max-width:760px; text-align:center; }
.card{
  background:linear-gradient(180deg, var(--glass-1), var(--glass-2));
  border:1px solid var(--fc-border);
  border-radius:18px; padding:28px; box-shadow: var(--fc-shadow);
  backdrop-filter: blur(6px);
}
h1{margin:0 0 16px; font-size:clamp(22px,3vw,28px); letter-spacing:.2px}
.sub{color:var(--fc-muted); margin-bottom:22px}

.form{ display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
.input{
  width:min(520px, 90vw);
  padding:14px 16px; border-radius:14px; border:1px solid var(--fc-border);
  background:var(--fc-input); color:var(--fc-text); font-size:16px;
  outline:none; transition:border .15s ease, box-shadow .15s ease;
}
.input:focus{border-color:var(--fc-primary); box-shadow:0 0 0 3px var(--ring)}
.btn{
  padding:14px 20px; border:none; border-radius:14px; cursor:pointer;
  background:linear-gradient(180deg, var(--fc-primary), var(--fc-primary-dark));
  color:white; font-weight:600; letter-spacing:.2px; font-size:15px;
  transition: transform .06s ease, filter .2s ease;
}
.btn:active{transform:translateY(1px)}

.result{
  margin-top:22px; padding:14px 16px; border-radius:14px; text-align:center;
  border:1px solid var(--fc-border); background:var(--fc-card);
}
.badge{
  display:inline-block; font-weight:700; padding:6px 10px; border-radius:999px; font-size:13px;
}
.badge.ok{background:rgba(34,197,94,.15); color:var(--ok); border:1px solid rgba(34,197,94,.35)}
.badge.bad{background:rgba(239,68,68,.12); color:var(--bad); border:1px solid rgba(239,68,68,.35)}
.badge.err{background:rgba(234,179,8,.12); color:#eab308; border:1px solid rgba(234,179,8,.35)}
.alert{ margin-top:12px; padding:10px 12px; border-radius:10px; color:#eab308; border:1px solid rgba(234,179,8,.35); background:rgba(234,179,8,.1); }
.variants{
  margin-top:18px; text-align:left;
  border-top:1px dashed var(--fc-border); padding-top:16px;
}
.variant-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border:1px solid var(--fc-border-strong);
  background:var(--fc-input); border-radius:12px; margin-bottom:10px;
}
.variant-item .d{font-weight:600}
.variant-item .free{color:var(--ok); font-weight:700}
.footer-note{color:var(--fc-muted); font-size:12px; margin-top:14px}
.recap-wrap{width:100%; display:flex; justify-content:center; margin:8px 0 0}