:root {
  --bg: #18181f; --card: #262632; --card-2: #2f2f3d; --text: #f5f5f0;
  --text-dim: #b8b8c2; --accent: #e07a3f; --accent-press: #b8622f;
  --mint: #6fc9be; --danger: #d4455a; --yellow: #e8c766;
  --border: rgba(255,255,255,.09);
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); overscroll-behavior: none; }
a { color: var(--accent); }
#app { min-height: 100vh; display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; padding-bottom: env(safe-area-inset-bottom); }

.screen { flex: 1; display: flex; flex-direction: column; padding: 24px 22px; }
.eyebrow { font-weight: 700; font-size: 12px; letter-spacing: .14em; color: var(--text-dim); text-transform: uppercase; }
.title { font-family: var(--font-display); font-size: 38px; line-height: 1; margin: 6px 0 4px; color: var(--accent); }
.subtitle { font-size: 14px; color: var(--text-dim); }

.chip { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--card); cursor: pointer; margin-bottom: 10px; }
.chip.active { border-color: var(--accent); background: var(--card-2); }

.key-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key { display: flex; align-items: center; justify-content: center; height: 56px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); font-weight: 700; font-size: 20px; color: var(--text); cursor: pointer; user-select: none; }
.key:active { background: var(--card-2); }

.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 18px 0; }
.dot { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--text-dim); }
.dot.filled { background: var(--accent); border-color: var(--accent); }

.btn { width: 100%; padding: 17px; border-radius: 16px; border: none; font-family: var(--font-body); font-weight: 800; font-size: 16px; cursor: pointer; background: var(--accent); color: #1a1208; }
.btn.secondary { background: var(--card-2); color: var(--text); }
.btn.mint { background: var(--mint); color: #0d2a26; }
.btn:disabled { opacity: .4; }

.card { background: var(--card); border-radius: 20px; padding: 24px; border: 1px solid var(--border); }
.number-display { font-family: var(--font-display); font-size: 52px; color: var(--accent); text-align: center; }

.badge { background: var(--card-2); padding: 7px 12px; border-radius: 20px; font-size: 12.5px; color: var(--text-dim); display: inline-block; margin: 4px 6px 0 0; }

.stopwatch { font-family: var(--font-display); font-size: 72px; text-align: center; font-variant-numeric: tabular-nums; }
.round-btn { width: 60px; height: 60px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.round-row { display: flex; gap: 18px; justify-content: center; margin-top: 20px; }

.stepper { display: flex; align-items: center; gap: 12px; }
.step-btn { width: 40px; height: 40px; border-radius: 10px; background: var(--card-2); border: none; color: var(--text); font-size: 20px; cursor: pointer; }

.chip-btn { padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; }

.toast { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); background: var(--card-2); border: 1px solid var(--border); padding: 8px 16px; border-radius: 20px; font-size: 12.5px; z-index: 50; }
.offline-badge { position: fixed; top: 14px; right: 14px; background: var(--danger); color: #2a0a0e; padding: 5px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 800; z-index: 50; }
.error-box { display: flex; gap: 10px; background: rgba(212,69,90,.18); border-radius: 16px; padding: 16px; margin-top: 16px; font-size: 13.5px; color: #f4c2c9; line-height: 1.4; }
.top-bar { display: flex; align-items: center; gap: 12px; padding: 20px 22px 12px; border-bottom: 1px solid var(--border); }
.top-bar .num-badge { width: 42px; height: 42px; border-radius: 12px; background: var(--card); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; color: var(--accent); }
.link-muted { color: var(--text-dim); font-size: 12.5px; text-align: center; margin-top: 14px; text-decoration: underline; cursor: pointer; }