/* Basic reset */
*{box-sizing:border-box}html,body{margin:0;padding:0}
:root{
  --bg:#050507;
  --panel:#0d0f12;
  --panel-2:#0b0d10;
  --text:#cfead1;
  --muted:#8cbf96;
  --accent:#34d399;
  --danger:#ef4444;
  --success:#22c55e;
  --warning:#f59e0b;
  --border:rgba(52,211,153,.2);
  --glow:0 0 24px rgba(52,211,153,.15);
}
/* Light theme */
:root.light{
  --bg:#f7faf7; --panel:#fff; --panel-2:#f4f7f4;
  --text:#0a2b12; --muted:#356e45;
  --accent:#16a34a; --danger:#dc2626; --success:#16a34a;
  --border:rgba(21,128,61,.15); --glow:0 0 10px rgba(22,163,74,.12);
}

body{background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}

.app{max-width:960px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:24px;gap:24px}
.header,.footer{display:flex;justify-content:space-between;align-items:center;gap:12px}
.header{padding:8px 0;border-bottom:1px solid var(--border)}
.logo{font-weight:800;letter-spacing:1px}
.logo span{color:var(--accent)}
.badge{font-size:12px;padding:6px 10px;border:1px dashed var(--border);border-radius:999px;color:var(--muted)}

.page{display:none;gap:16px}
.page.active{display:flex;flex-direction:column}

h1,h2{margin:.2em 0}
.sub{color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:16px}
.card{border:1px solid var(--border);background:linear-gradient(180deg,var(--panel),var(--panel-2));border-radius:16px;padding:18px;cursor:pointer;text-align:left;box-shadow:var(--glow);transition:transform .15s ease, box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.2), var(--glow)}
.card .icon{font-size:28px;margin-bottom:6px}
.card .title{font-size:18px;font-weight:700}
.card .desc{font-size:13px;color:var(--muted);margin-top:4px}
.card.danger{border-color:rgba(239,68,68,.35)}
.card.success{border-color:rgba(34,197,94,.35)}

label{display:flex;flex-direction:column;gap:6px;margin:8px 0}
input,select,textarea{background:#06090c;border:1px solid var(--border);color:var(--text);padding:12px;border-radius:10px;outline:none;transition:border .15s}
:root.light input,:root.light select,:root.light textarea{background:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}

.row{display:flex;gap:12px;flex-wrap:wrap}
.actions{margin-top:6px}

.btn{background:var(--panel);border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer;transition:transform .1s, background .2s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--accent);color:#04120a;border-color:transparent;font-weight:700}
.btn.ghost{background:transparent}
.link{color:var(--muted);text-decoration:none}
.link:hover{text-decoration:underline}

.terminal{height:320px;background:#020405;border:1px solid var(--border);border-radius:12px;padding:12px;overflow:auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2), var(--glow)}
.terminal .line{white-space:pre-wrap;line-height:1.5}
.cursor{display:inline-block;width:10px;background:var(--accent);animation:blink 1s step-start infinite}

.progress-wrap{height:8px;border:1px solid var(--border);border-radius:999px;overflow:hidden;margin-top:10px}
.progress{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#6ee7b7);transition:width .2s ease}

.result-icon{font-size:56px}
.result-text{color:var(--muted)}

.footer{padding:16px 0;border-top:1px solid var(--border);margin-top:auto}

@keyframes blink{50%{opacity:.2}}