:root { --bg:#0b0f14; --fg:#e5e7eb; --muted:#9ca3af; --card:#111827; --accent:#60a5fa; }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--fg); }
.container { max-width: 720px; margin: 48px auto; padding: 0 16px; }
h1 { margin: 0 0 8px; }
.hint { color: var(--muted); margin: 0 0 24px; }
form { display: flex; gap: 8px; margin-bottom: 16px; }
input { flex:1; padding: 12px 14px; border-radius: 12px; border: 1px solid #1f2937; background:#0a0f15; color:var(--fg); outline: none; }
button { padding: 12px 16px; border:0; border-radius: 12px; background: var(--accent); color: #0b1220; font-weight: 600; cursor: pointer; }
.card { background: var(--card); border: 1px solid #1f2937; border-radius: 16px; padding: 16px; margin-top: 12px; }
#result { font-size: 1.1rem; }
#result .value { font-size: 1.4rem; font-weight: 700; }
#history { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
#history li { color: var(--muted); cursor: pointer; }
#history li:hover { color: var(--fg); }
code { background:#0a0f15; padding:2px 6px; border-radius:6px; }
.btn { padding: 12px 16px; border:0; border-radius: 12px; background: var(--accent); color: #0b1220; font-weight: 600; cursor: pointer; }
.btn-secondary { background: #334155; color:#e5e7eb; }
.btn:disabled, .btn-secondary:disabled { opacity: .6; cursor: not-allowed; }

.alert {
  border: 1px solid #7f1d1d;
  background: #1b0f10;
  color: #fecaca;
  padding: 12px 14px;
  border-radius: 12px;
}

.muted { color: var(--muted); margin-top: 6px; }