body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

.v9-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
}

/* Button ------------------------------------------------------------ */
.v9-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  color: var(--text);
  box-sizing: border-box;
  white-space: nowrap;
}
.v9-btn:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
.v9-btn-lg { height: 54px; padding: 0 var(--space-24); border-radius: var(--r-lg); }
.v9-btn-md { height: 44px; padding: 0 var(--space-20); border-radius: var(--r-md); }

.v9-btn-primary { background: var(--grad-primary); background-image: var(--gloss), var(--grad-primary); color: var(--on-pink); box-shadow: var(--shadow-btn); }
.v9-btn-secondary { background: transparent; border: 1px solid var(--line); color: var(--text); }
.v9-btn-guest { background-image: var(--gloss), var(--grad-guest); border: 1px solid #7FD8FF; color: var(--text); border-radius: var(--r-lg); }
.v9-btn-white { background: var(--grad-white); color: var(--on-white); }
.v9-btn-gold { background-image: var(--gloss), var(--grad-gold); color: #3A1A00; }
.v9-btn-icon { width: var(--touch); height: var(--touch); padding: 0; border-radius: var(--r-md); background: var(--field); border: 1px solid var(--line); color: var(--text); }
.v9-btn-link { background: transparent; border: none; color: var(--link); padding: 0; min-height: var(--touch); }

.v9-btn-disabled,
.v9-btn[disabled] {
  background: transparent !important;
  background-image: none !important;
  border: 1px dashed var(--line) !important;
  color: var(--text-disabled) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* Input --------------------------------------------------------------- */
.v9-field { display: flex; flex-direction: column; gap: var(--space-8); width: 220px; }
.v9-field-label { color: var(--text-2); }
.v9-input {
  height: 50px;
  box-sizing: border-box;
  border-radius: var(--r-md);
  background: var(--field);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 0 var(--space-16);
  outline: none;
}
.v9-input::placeholder { color: var(--text-muted); }
.v9-input:focus { border: 1.5px solid var(--pink); }
.v9-input-mono { letter-spacing: 0.08em; border-style: dashed; border-color: #8A6CFF; }
.v9-input-error { border-color: var(--error); }
.v9-field-error { color: var(--error); }

/* Segment (tabs) -------------------------------------------------------- */
.v9-segment {
  display: inline-flex;
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  padding: var(--space-4);
  gap: var(--space-4);
}
.v9-segment-item {
  height: 44px;
  padding: 0 var(--space-16);
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
.v9-segment-item-active { background: var(--grad-primary); color: var(--on-pink); }

/* Chip -------------------------------------------------------------------- */
.v9-chip {
  height: 44px;
  padding: 0 var(--space-16);
  border-radius: var(--r-sm);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
}
.v9-chip-active { background: var(--grad-primary); color: var(--on-pink); border-color: transparent; }
.v9-chip-count { opacity: .7; }

/* SelectionCard -------------------------------------------------------------- */
.v9-selection {
  position: relative;
  width: 160px;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--r-lg);
  background: var(--field);
  border: 1px solid var(--line);
}
.v9-selection-selected { border: 1.5px solid var(--pink); background: var(--selected); box-shadow: var(--ring-selected); }
.v9-selection-disabled { border-style: dashed; opacity: .55; }
.v9-selection-label { color: var(--text); }
.v9-selection-sub { color: var(--text-3); margin-top: 2px; }
.v9-selection-check { position: absolute; top: var(--space-8); right: var(--space-8); color: var(--pink); }

/* Switch ---------------------------------------------------------------------- */
.v9-switch {
  display: inline-block;
  width: 52px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--line);
  position: relative;
  box-sizing: border-box;
  padding: 3px;
}
.v9-switch-on { background: var(--grad-primary); }
.v9-switch-knob {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: #fff;
  transition: transform .15s ease;
}
.v9-switch-on .v9-switch-knob { transform: translateX(20px); }

/* Card -------------------------------------------------------------------------- */
.v9-card {
  width: 260px;
  padding: var(--space-16);
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.v9-card-title { margin-bottom: var(--space-8); }
.v9-card-body { color: var(--text-3); }

/* EmptyState ---------------------------------------------------------------------- */
.v9-emptystate {
  width: 280px;
  padding: var(--space-28) var(--space-20);
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px dashed var(--line);
  text-align: center;
}
.v9-emptystate-text { color: var(--text-3); }

/* Dropdown -------------------------------------------------------------------------- */
.v9-dd { position: relative; width: 260px; }
.v9-dd-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 50px;
  padding: 0 var(--space-16);
  border-radius: var(--r-md);
  background: var(--field);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
}
.v9-dd-label { color: var(--text-muted); }
.v9-dd-value { flex: 1; text-align: left; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v9-dd-chev { color: var(--text-muted); }
.v9-dd-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;
  z-index: 5;
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid #6B55C8;
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v9-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 46px;
  padding: 6px var(--space-12);
  border-radius: var(--r-sm);
  color: var(--text);
}
.v9-dd-item-selected { background: var(--selected); font-weight: 600; }
.v9-dd-check { color: var(--link); }

/* List -------------------------------------------------------------------------------- */
.v9-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 320px;
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--divider);
  overflow: hidden;
}
.v9-list-row { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); }
.v9-list-row + .v9-list-row { border-top: 1px solid var(--divider); }
.v9-list-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v9-list-icon-in { background: rgba(92,255,200,.14); color: var(--success); }
.v9-list-icon-out { background: rgba(255,95,219,.16); color: var(--link); }
.v9-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v9-list-sub { color: var(--text-muted); }
.v9-list-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.v9-list-amount { color: var(--text); }
.v9-list-amount-in { color: var(--success); }

/* HeroCard ------------------------------------------------------------------------ */
.v9-hero {
  width: 300px;
  padding: var(--space-20);
  border-radius: var(--r-hero);
  background-image: var(--gloss), var(--grad-hero);
  border: 1px solid #D9A8FF;
  box-shadow: var(--shadow-hero);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  color: #fff;
}
.v9-hero-label { color: rgba(255,255,255,.8); }
.v9-hero-amount { display: flex; align-items: baseline; gap: var(--space-6); font-variant-numeric: tabular-nums; }
.v9-hero-currency { color: rgba(255,255,255,.75); }

/* KeyValueBlock --------------------------------------------------------------------- */
.v9-kv {
  width: 280px;
  background: var(--deep);
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  overflow: hidden;
}
.v9-kv-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--divider);
}
.v9-kv-row:last-child { border-bottom: none; }
.v9-kv-key { color: var(--text-muted); }
.v9-kv-val { color: var(--text); font-variant-numeric: tabular-nums; }

/* WarningBlock ------------------------------------------------------------------------ */
.v9-warning {
  width: 300px;
  display: flex;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--r-md);
  background: rgba(255,200,60,.12);
  border: 1px solid var(--warning-border);
}
.v9-warning-icon { color: var(--warning); }
.v9-warning-text { color: var(--warning-text); }

/* GameCard ------------------------------------------------------------------------------ */
.v9-game {
  position: relative;
  width: 116px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-tile);
  padding: var(--space-8);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  background-image: var(--gloss), var(--game-1);
}
.v9-game-2 { background-image: var(--gloss), var(--game-2); }
.v9-game-3 { background-image: var(--gloss), var(--game-3); color: #3A1A00; }
.v9-game-4 { background-image: var(--gloss), var(--game-4); }
.v9-game-5 { background-image: var(--gloss), var(--game-5); }
.v9-game-6 { background-image: var(--gloss), var(--game-6); }
.v9-game-tag {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  background: rgba(0,0,0,.63);
  color: #fff;
  border-radius: var(--r-tag);
  padding: 2px 6px;
}
.v9-game-fav {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--touch);
  height: var(--touch);
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v9-game-mark { text-align: right; opacity: .92; }
.v9-game-foot { margin-top: var(--space-8); }
.v9-game-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v9-game-provider { color: rgba(255,255,255,.75); }
.v9-game-3 .v9-game-provider { color: rgba(58,26,0,.7); }

/* Badge ------------------------------------------------------------------------------------ */
.v9-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  padding: 3px 10px;
}
.v9-badge-success { background: rgba(92,255,200,.14); color: var(--success); }
.v9-badge-warning { background: rgba(255,208,90,.16); color: var(--warning); }
.v9-badge-neutral { background: rgba(206,197,242,.14); color: var(--neutral); }
.v9-badge-guest { background: rgba(255,208,90,.14); color: var(--warning); border: 1px solid var(--warning-border); }

/* ProcessSteps --------------------------------------------------------------------------------- */
.v9-steps { display: flex; align-items: center; gap: var(--space-6); }
.v9-step-dot {
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.v9-step-done { background: var(--success); color: #09291F; }
.v9-step-current { background: var(--warning); color: #3A2A00; }
.v9-step-future { background: var(--field); border: 1px solid var(--line); color: var(--text-disabled); }
.v9-step-label { color: var(--text-3); margin-right: var(--space-8); }

/* Toast ----------------------------------------------------------------------------------------- */
.v9-toast {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--r-lg);
  background: #0F3A33;
  border: 1px solid var(--success);
}
.v9-toast-icon { color: var(--success); }
.v9-toast-text { color: var(--text); }

/* BottomNav ---------------------------------------------------------------------------------------- */
.v9-bottomnav {
  display: flex;
  width: 360px;
  height: 54px;
  background: var(--bar);
  border-top: 1px solid var(--divider);
}
.v9-bottomnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-3);
}
.v9-bottomnav-item-active { color: var(--link); }
.v9-bottomnav-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .0; }
.v9-bottomnav-item-active .v9-bottomnav-dot { opacity: 1; }