:root {
  --bg: #0f172a;      /* slate-900 */
  --text: #e2e8f0;    /* slate-200 */
  --card: #111827;    /* gray-900 */
  --muted: #94a3b8;   /* slate-400 */
  --accent: #3b82f6;  /* blue-500 */
}

.light {
  --bg: #ffffff;
  --text: #0f172a;
  --card: #f1f5f9;    /* slate-100 */
  --muted: #475569;   /* slate-600 */
  --accent: #2563eb;
}

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

.container { max-width: 720px; margin: 0 auto; padding: 16px }
header { display: flex; align-items: center; justify-content: space-between; }

.card {
  background: var(--card);
  padding: 16px;
  border-radius: 14px;
  margin: 12px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}

button {
  border: 0;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  background: var(--accent);
  color: white;
  font-weight: 600;
}

input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #0000;
  outline: 0;
  margin-right: 8px;
}

.muted { color: var(--muted); }