<style>
:root{
  --bg:#0b0b0b;--card:#151515;--text:#e5e7eb;--muted:#9ca3af;
  --blue:#2563eb;--green:#16a34a;--red:#dc2626;--yellow:#ca8a04;
}
body.light{--bg:#f3f4f6;--card:#ffffff;--text:#111827;--muted:#6b7280}
*{box-sizing:border-box;font-family:system-ui,-apple-system}
body{margin:0;background:var(--bg);color:var(--text)}
.container{max-width:480px;margin:auto;padding:20px}
h1{text-align:center;margin:40px 0 10px}
.subtitle{text-align:center;color:var(--muted);margin-bottom:30px}
.tabs{display:flex;gap:20px;border-bottom:1px solid #333;margin-bottom:20px}
.tab{background:none;border:none;color:var(--muted);padding:10px 0;font-size:16px}
.tab.active{color:var(--blue);border-bottom:2px solid var(--blue)}
label{color:var(--muted)}
input{width:100%;padding:14px;margin:10px 0 20px;border-radius:12px;border:1px solid #333;background:var(--card);color:var(--text)}
.btn{width:100%;padding:14px;border:none;border-radius:14px;font-size:16px}
.btn.blue{background:var(--blue);color:white}
.btn.green{background:var(--green);color:white}
.result{margin-top:20px;display:grid;gap:14px}
.card{background:var(--card);padding:16px;border-radius:14px}
.red{color:var(--red)}.green{color:var(--green)}.yellow{color:var(--yellow)}
footer{text-align:center;color:var(--muted);margin:40px 0}
.theme-toggle{position:fixed;top:15px;right:15px;border:none;background:var(--card);padding:10px;border-radius:50%}
</style>