@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── Design Tokens ── */
:root {
  --dart-bg-app:      #08080A;
  --dart-bg-screen:   #08080A;
  --dart-bg-card:     #121216;
  --dart-bg-card-alt: #0E0E11;
  --dart-bg-input:    #0F0F12;
  --dart-bg-chip:     #16161A;
  --dart-border:      #1f1f24;
  --dart-border-alt:  #26262C;
  --dart-divider:     #1a1a1f;
  --dart-text:        #FBFBF8;
  --dart-text-sec:    #C9C9D1;
  --dart-text-ter:    #9A9AA2;
  --dart-text-muted:  #6E6E78;
  --dart-gold:        #D4AF37;
  --dart-gold-light:  #F4D77E;
  --dart-gold-dark:   #C9A227;
  --dart-gold-dim:    #8f7327;
  --dart-warning:     #E8A53A;
  --dart-success:     #2EC971;
  --dart-danger:      #C8362B;
  --dart-r-sm:        7px;
  --dart-r-md:        12px;
  --dart-r-lg:        16px;
  --dart-r-xl:        24px;
  --dart-r-pill:      99px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Manrope', system-ui, sans-serif;
  background: var(--dart-bg-app);
  color: var(--dart-text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

h2, .screen-title {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--dart-text);
  margin: 0;
}

.page-subtitle, .sub-label {
  font-size: 11px;
  color: var(--dart-text-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.small-label {
  font-size: 11px;
  color: var(--dart-text-sec);
}
.screen { display: none; height: 100svh; }
.screen.active { display: flex; flex-direction: column; }

@keyframes pulse-mic { 0%,100%{box-shadow:0 0 0 0 rgba(198,40,40,0.4)} 50%{box-shadow:0 0 0 10px rgba(198,40,40,0)} }

.help-btn {
  background: none;
  border: 1px solid var(--dart-border-alt);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
  cursor: pointer;
  color: var(--dart-text-muted);
  padding: 0;
  vertical-align: middle;
  margin-left: 6px;
  flex-shrink: 0;
  line-height: 18px;
  display: inline-block;
}
.help-btn:hover {
  border-color: var(--dart-gold);
  color: var(--dart-gold);
}
@keyframes rotate-hint {
  0%,100% { transform: rotate(0deg); }
  50%      { transform: rotate(90deg); }
}

/* ── Lucide Icons ── */
i[data-lucide] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}
.tab-icon i[data-lucide] { width: 22px; height: 22px; stroke-width: 2; }
.section-icon i[data-lucide] { width: 16px; height: 16px; stroke-width: 2; color: var(--dart-text-muted); }

@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 0 1.5px rgba(212,175,55,.55), 0 0 24px rgba(212,175,55,.16); }
  50%      { box-shadow: 0 0 0 1.5px rgba(212,175,55,.95), 0 0 40px rgba(212,175,55,.32); }
}
@keyframes coPulse {
  0%,100% { opacity: .9; }
  50%      { opacity: 1; }
}
.player-active { animation: glowPulse 2.6s ease-in-out infinite; }
.checkout-banner { animation: coPulse 2s ease-in-out infinite; }

/* ── App Modal ── */
#app-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
#app-modal-overlay.active { display: flex; }
#app-modal-box {
  background: var(--dart-bg-app);
  border: 1px solid var(--dart-gold);
  border-radius: var(--dart-r-lg);
  padding: 28px 24px;
  max-width: 340px;
  width: 90%;
  font-family: 'Manrope', sans-serif;
}
#app-modal-msg {
  color: var(--dart-text);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 24px;
  white-space: pre-line;
}
#app-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
#app-modal-cancel {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--dart-border-alt);
  border-radius: var(--dart-r-sm);
  color: var(--dart-text-sec);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  cursor: pointer;
}
#app-modal-ok {
  padding: 10px 24px;
  background: var(--dart-gold);
  border: none;
  border-radius: var(--dart-r-sm);
  color: #000;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .5px;
}