:root {
  --accent1: #8b5cf6;
  --accent2: #06b6d4;
  --bg: #0B0F1A;
  --surface: #111827;
  --text: #f1f5f9;
  --radius: 0.75rem;
}

/* Global */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Inter",Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}

/* Header */
.header{
  background:var(--surface);
  border-bottom:1px solid #1f2937;
  padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{font-weight:800}

/* Layout */
.container{max-width:720px;margin:24px auto;padding:0 16px}

/* Card */
.card{
  background:var(--surface);
  border:1px solid #1f2937;
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.card h2{
  margin:0 0 12px 0;
  padding:10px 14px;border-radius:10px;
  color:#fff;background:linear-gradient(90deg,var(--accent2),#3b82f6);
  font-size:1.05rem;
}
.meta{opacity:.85;font-size:.9rem}

/* Form */
.form-grid{display:grid;gap:12px}
.input,select,textarea{
  width:100%;
  background:#1e293b;
  color:var(--text);
  border:1px solid #243041;
  border-radius:10px;
  padding:10px 12px; outline:none;
}
.input:focus,select:focus,textarea:focus{border-color:var(--accent2)}
label{display:grid;gap:6px;font-weight:600}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:var(--radius);
  background:var(--surface);color:var(--text);
  border:1px solid #1f2937;text-decoration:none;font-weight:600;cursor:pointer;
  transition:transform .15s, box-shadow .15s, border-color .15s;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.btn:hover{transform:translateY(-1px);border-color:var(--accent2);box-shadow:0 6px 14px rgba(0,0,0,.45)}
.btn.grad{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#0B0F1A;border:none}
.btn.sm{padding:6px 10px;font-size:.85rem}

/* Output */
.outbox{display:flex;gap:8px;align-items:center}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.hidden{display:none!important}

/* History list */
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.list li{
  padding:10px 12px;background:#1e293b;border:1px solid #243041;border-radius:10px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.92rem
}

/* Responsive */
@media (max-width:480px){
  .row{flex-direction:column}
  .outbox{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .list li{flex-direction:column;align-items:stretch}
}