/* css/main.css */
:root {
  --bg: #1e1e2e;
  --surface: #313244;
  --surface-2: #45475a;
  --text: #cdd6f4;
  --text-muted: #a6adc8;
  --warm: #f9e2af;
  --green: #a6e3a1;
  --blue: #89b4fa;
  --red: #f38ba8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 20px;
}

#app { width: 100%; max-width: 860px; }

.screen {
  background: var(--surface);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.screen.hidden { display: none; }

h1 { font-size: 28px; color: var(--warm); margin-bottom: 12px; text-align: center; }
h2 { font-size: 20px; color: var(--blue); margin-bottom: 16px; text-align: center; }
p { line-height: 1.6; margin-bottom: 12px; }
.muted { color: var(--text-muted); font-size: 15px; text-align: center; }

.btn {
  display: inline-block;
  background: var(--blue);
  color: #1e1e2e;
  border: none;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  font-family: inherit;
}

.btn:hover { transform: translateY(-2px) scale(1.02); background: #b4befe; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn.secondary { background: var(--surface-2); color: var(--text); }
.btn.secondary:hover { background: #585b70; }
.btn.big { padding: 18px 44px; font-size: 18px; display: block; margin: 20px auto 0; }