/* Blueprint theme — "Die Bank ist eine Stadt. Wir sind die Stadtplaner." */
:root {
  --bg-deep: #0b1b2b;
  --bg-deep-2: #0e2336;
  --blueprint: #1e5f8c;
  --blueprint-line: #2e86c1;
  --ink: #eaf2fa;
  --accent-live: #ffb020;
  --accent-go: #36d399;
  --accent-danger: #f87272;
  --muted: #7c93a8;
  --radius: 16px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: radial-gradient(1200px 800px at 70% -10%, var(--bg-deep-2), var(--bg-deep));
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
body.grid::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(46, 134, 193, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 134, 193, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 30%, black 30%, transparent 90%);
}
.wrap { position: relative; z-index: 1; }

a { color: var(--blueprint-line); }
h1, h2, h3 { line-height: 1.05; margin: 0 0 0.4em; font-weight: 800; letter-spacing: -0.01em; }
.kicker { text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-live); font-weight: 700; font-size: 0.8rem; }
.muted { color: var(--muted); }

.btn {
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--blueprint); color: var(--ink);
  border: 1px solid var(--blueprint-line); border-radius: var(--radius);
  padding: 14px 22px; font-size: 1.05rem; transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover { background: var(--blueprint-line); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--accent-live); color: #221500; border-color: var(--accent-live); box-shadow: 0 6px 24px rgba(255, 176, 32, .25); }
.btn.go { background: var(--accent-go); color: #04231a; border-color: var(--accent-go); }
.btn.danger { background: transparent; color: var(--accent-danger); border-color: var(--accent-danger); }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn.big { padding: 22px 34px; font-size: 1.5rem; }

.card {
  background: rgba(14, 35, 54, 0.7);
  border: 1px solid rgba(46, 134, 193, 0.25);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 14px; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.center { display: flex; align-items: center; justify-content: center; }
.fill { min-height: 100vh; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(46,134,193,.18); border: 1px solid rgba(46,134,193,.4); font-weight: 700; }
.pill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-go); box-shadow: 0 0 12px var(--accent-go); }

.code { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .15em; color: var(--accent-live); }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--bg-deep-2); border: 1px solid var(--accent-danger); color: var(--ink); padding: 12px 18px; border-radius: 12px; z-index: 9999; opacity: 0; transition: opacity .25s; }
.toast.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}