/* ═══════════════════════════════════════════════════════════════
   COLIZEUM — BRUTAL DESIGN SYSTEM v2
   Inter 900 · #f8e37a gold · #000 base · sharp corners
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────────────────────── */
:root {
  --gold:         #f8e37a;
  --gold-hot:     #ffe400;
  --gold-dim:     rgba(248,227,122,0.12);
  --gold-glow:    rgba(248,227,122,0.25);
  --black:        #000000;
  --surface:      #111111;
  --surface2:     #181818;
  --border:       #222222;
  --border-hi:    #333333;
  --muted:        #666666;
  --muted2:       #444444;
  --white:        #ffffff;
  --error:        #e53e3e;
  --error-dim:    rgba(229,62,62,0.12);
  --success:      #4ade80;
  --success-dim:  rgba(74,222,128,0.12);
  --discord-clr:  #5865F2;
  --tg-clr:       #2AABEE;

  --font: 'Inter', system-ui, sans-serif;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);

  --clip-btn:   polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  --clip-badge: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  border-radius: 0 !important;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--font);
  background: var(--black);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
  /* subtle vertical grid */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.018) 0px 1px,
    transparent 1px 72px
  );
}

a { color: inherit; text-decoration: none; }
input, button { font-family: var(--font); outline: none; border: none; background: none; cursor: pointer; }
svg { display: block; }

/* ── NOISE overlay ───────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .016;
  pointer-events: none;
  z-index: 9999;
}

/* ── SCREENS ─────────────────────────────────────────────────── */
.screen { display: none; }
.screen.active { display: block; }
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   REGISTER SCREEN
   ═══════════════════════════════════════════════════════════════ */
.reg-wrap {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 24px;
}

.reg-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 64px;
  padding-bottom: 36px;
}

.reg-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.reg-title {
  font-size: clamp(4rem, 18vw, 6.5rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
}

.reg-rule {
  width: 120px;
  height: 5px;
  background: var(--gold);
  margin-bottom: 20px;
}

.reg-sub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
}

/* Form */
.reg-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 20px;
}

.reg-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
}
.reg-divider::before,
.reg-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.reg-footer {
  padding: 20px 0 40px;
  font-size: 11px;
  color: var(--muted2);
  line-height: 1.7;
  text-align: center;
}

.reg-policy-link {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(248,227,122,.4);
  text-underline-offset: 2px;
}

/* TG share button */
.btn-tg-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  background: var(--tg-clr);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: opacity 150ms, transform 250ms var(--ease-spring);
  clip-path: var(--clip-btn);
}
.btn-tg-share:hover  { opacity: .9; }
.btn-tg-share:active { transform: scale(.97); }
.btn-tg-ico { width: 18px; height: 18px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   INPUT
   ═══════════════════════════════════════════════════════════════ */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.input-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--gold);
  text-transform: uppercase;
}

.input-field {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  transition: background 150ms, border-color 150ms;
}
.input-field::placeholder { color: var(--muted2); }
.input-field:focus { background: var(--surface2); border-color: var(--gold); }
.input-field.error { border-left-color: var(--error); }

.input-hint {
  font-size: 11px;
  color: var(--error);
  min-height: 15px;
  letter-spacing: .04em;
}

.input-promo {
  flex: 1;
  height: 52px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: var(--gold);
  color: var(--black);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  clip-path: var(--clip-btn);
  transition: background 150ms, transform 250ms var(--ease-spring);
}
.btn-primary:hover  { background: var(--gold-hot); }
.btn-primary:active { transform: scale(.97); }
.btn-primary:disabled {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}
.btn-text  { flex: 1; text-align: left; }
.btn-arrow { font-size: 16px; }

.btn-ghost {
  width: 100%;
  padding: 14px 20px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: border-color 150ms, color 150ms;
}
.btn-ghost:hover { border-color: var(--muted); color: var(--white); }

.btn-square {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: var(--gold);
  color: var(--black);
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms, transform 250ms var(--ease-spring);
}
.btn-square:hover  { background: var(--gold-hot); }
.btn-square:active { transform: scale(.95); }

/* ═══════════════════════════════════════════════════════════════
   CROSSLINK SCREEN
   ═══════════════════════════════════════════════════════════════ */
.crosslink-wrap {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  gap: 20px;
  text-align: center;
}

.crosslink-spinner-ring {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spinner-svg {
  position: absolute;
  inset: 0;
  animation: spin 1.4s linear infinite;
}
.spinner-track { stroke: var(--border); }
.spinner-arc   { stroke: var(--gold); stroke-linecap: round; }
@keyframes spin { to { transform: rotate(360deg); } }

.spinner-icon {
  font-size: 28px;
  position: relative;
  z-index: 1;
}

.crosslink-title {
  font-size: clamp(1.8rem, 7vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -.03em;
  text-transform: uppercase;
  line-height: .9;
}
.crosslink-rule {
  width: 80px;
  height: 3px;
  background: var(--gold);
}
.crosslink-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 280px;
}
.crosslink-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 40px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
}
.timer-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--gold);
  text-transform: uppercase;
}
.timer-value {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN HEADER
   ═══════════════════════════════════════════════════════════════ */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.hdr-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hdr-logo-text {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
  color: var(--gold);
  text-transform: uppercase;
}
.hdr-logo-dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); /* diamond */
}
.hdr-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  clip-path: var(--clip-badge);
  transition: background 150ms, border-color 150ms;
}
.hdr-profile:hover { background: var(--surface2); border-color: var(--gold); }
.hdr-profile-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
}
.hdr-profile-ico {
  width: 16px;
  height: 16px;
  color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
   NIGHTS SECTION
   ═══════════════════════════════════════════════════════════════ */
.nights-section {
  padding: 32px 20px 36px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.nights-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
}

.nights-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
}
.nights-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.nights-counter-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.nights-big {
  font-size: clamp(3rem, 12vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  transition: color 400ms;
}
.nights-big.complete { color: var(--gold); }

.nights-max {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--muted);
}
.nights-free-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--black);
  background: var(--gold);
  padding: 3px 8px;
  clip-path: var(--clip-badge);
  margin-bottom: 4px;
  align-self: flex-end;
  transition: opacity 300ms;
}
.nights-free-tag.dimmed { opacity: 0; }

/* ── SLOTS ───────────────────────────────────────────────────── */
.nights-slots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin-bottom: 20px;
}

/* Each slot */
.slot {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition:
    background 400ms var(--ease-spring),
    border-color 300ms;
}

/* empty paid slot */
.slot.empty {
  background: var(--surface);
}

/* filled paid slot */
.slot.filled {
  background: var(--gold);
  border-color: var(--gold);
}

/* slot number */
.slot-num {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--muted2);
  position: relative;
  z-index: 1;
  transition: color 300ms;
}
.slot.filled .slot-num { color: var(--black); }

/* check-mark appears when filled */
.slot-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 300ms;
}
.slot.filled .slot-check { opacity: 1; }
.slot.filled .slot-num   { opacity: 0; }

.slot-check svg {
  width: 40%;
  height: 40%;
  stroke: var(--black);
  stroke-width: 3;
}

/* shimmer on fill animation */
.slot.filled::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.35) 50%,
    transparent 100%
  );
  animation: slot-shine 600ms var(--ease-out) forwards;
}
@keyframes slot-shine {
  from { left: -100%; }
  to   { left: 150%; }
}

/* ── BONUS (6th) SLOT ────────────────────────────────────────── */
.slot.bonus {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--gold) 0%, var(--gold-hot) 100%) border-box;
  position: relative;
}

/* pulsing ring when bonus is unlocked */
.slot.bonus.unlocked {
  background:
    linear-gradient(var(--gold), var(--gold)) padding-box,
    linear-gradient(135deg, var(--gold) 0%, var(--gold-hot) 100%) border-box;
  animation: bonus-pulse 1.6s ease-in-out infinite;
}
@keyframes bonus-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,227,122,.5); }
  50%       { box-shadow: 0 0 0 8px rgba(248,227,122,0); }
}

/* moon icon inside bonus slot */
.slot.bonus .slot-num { color: var(--gold); }
.slot.bonus .slot-num.is-icon { font-size: 18px; color: var(--gold); }
.slot.bonus.unlocked .slot-num { color: var(--black); font-size: 18px; }

/* separator line before bonus slot */
.slot.bonus::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 15%;
  height: 70%;
  width: 2px;
  background: var(--border-hi);
  z-index: 2;
}

/* ── Hint & button ───────────────────────────────────────────── */
.nights-hint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.nights-hint strong { color: var(--white); font-weight: 700; }

.nights-check-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  background: var(--surface);
  color: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background 150ms, border-color 150ms, transform 250ms var(--ease-spring);
}
.nights-check-btn:hover  { background: var(--surface2); border-color: var(--gold); }
.nights-check-btn:active { transform: scale(.98); }
.nights-check-btn:disabled { opacity: .5; cursor: not-allowed; }
.nights-btn-ico { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   CLAIM BANNER
   ═══════════════════════════════════════════════════════════════ */
.claim-banner {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  background: #0c0c00;
}
.claim-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 200% 150% at 80% 50%, rgba(248,227,122,.12) 0%, transparent 60%);
  pointer-events: none;
}
.claim-left {
  flex: 1;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.claim-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--gold);
  text-transform: uppercase;
}
.claim-title {
  font-size: clamp(1.8rem, 7vw, 2.4rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.claim-btn {
  align-self: flex-start;
  width: auto;
  padding: 12px 20px;
}
.claim-icon {
  font-size: 56px;
  display: flex;
  align-items: center;
  padding: 20px;
  opacity: .5;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   CARD SECTIONS (promo + profile)
   ═══════════════════════════════════════════════════════════════ */
.card-section {
  border-bottom: 1px solid var(--border);
}
.card-section-header {
  padding: 24px 20px 14px;
}
.card-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  position: relative;
  padding-left: 12px;
}
.card-section-title::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
}

.card {
  margin: 0 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.card-desc {
  padding: 16px 16px 4px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.card-divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* Promo row */
.promo-row {
  display: flex;
  gap: 2px;
  padding: 12px 16px;
}
.promo-result {
  padding: 0 16px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  min-height: 28px;
}
.promo-result.ok      { color: var(--success); }
.promo-result.fail    { color: var(--error); }
.promo-result.loading { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   PROFILE CARD
   ═══════════════════════════════════════════════════════════════ */
.profile-card { overflow: hidden; }

.profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 14px;
}
.pf-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pf-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.01em;
}
.status-chip {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--success);
  padding: 5px 12px;
  border: 1px solid rgba(74,222,128,.3);
  clip-path: var(--clip-badge);
}

/* Platform rows */
.platform-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 150ms;
}
.platform-row:last-of-type { border-bottom: none; }

.platform-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.platform-logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.discord-logo  { color: var(--discord-clr); }
.telegram-logo { color: var(--tg-clr); }

.platform-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.platform-chip {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 11px;
  clip-path: var(--clip-badge);
  transition: opacity 150ms;
}
.platform-chip.linked {
  color: var(--success);
  border: 1px solid rgba(74,222,128,.3);
  background: var(--success-dim);
}
.platform-chip.unlinked {
  color: var(--gold);
  border: 1px solid rgba(248,227,122,.3);
  background: var(--gold-dim);
}
.platform-chip.unlinked:hover { background: rgba(248,227,122,.2); }

/* Stats */
.stats-row {
  display: flex;
  align-items: stretch;
}
.stat-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 4px;
}
.stat-sep {
  width: 1px;
  background: var(--border);
  margin: 8px 0;
  flex-shrink: 0;
}
.stat-val {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.stat-lbl {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.app-footer {
  padding: 28px 20px 48px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-line {
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 50%);
  margin-bottom: 18px;
  width: 60%;
}
.footer-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-brand {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  color: var(--gold);
  text-transform: uppercase;
}
.footer-sep { color: var(--muted2); }
.footer-tagline {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--muted2);
  text-transform: uppercase;
}
.footer-policy {
  font-size: 11px;
  color: var(--muted2);
  text-decoration: underline;
  text-decoration-color: var(--muted2);
  text-underline-offset: 2px;
}
.footer-policy:hover { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(72px);
  z-index: 1000;
  background: var(--surface2);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  white-space: nowrap;
  max-width: calc(100vw - 48px);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 350ms var(--ease-spring), opacity 350ms;
  opacity: 0;
  pointer-events: none;
}
.toast.show        { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.type-success { border-left-color: var(--success); }
.toast.type-error   { border-left-color: var(--error); }

/* ═══════════════════════════════════════════════════════════════
   BOTTOM SHEET MODAL
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.84);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--ease-out);
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal {
  width: 100%;
  background: var(--surface);
  border-top: 3px solid var(--gold);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  position: relative;
  transform: translateY(48px);
  transition: transform 360ms var(--ease-spring);
}
.modal-overlay.open .modal {
  transform: translateY(0);
}
.modal-drag-handle {
  width: 40px;
  height: 4px;
  background: var(--border-hi);
  margin: 12px auto 0;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  transition: color 150ms, background 150ms;
}
.modal-close:hover { color: #fff; background: var(--error); }
.modal-body { padding: 20px 20px 36px; }

.m-title {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.m-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 18px;
}
.m-result {
  padding: 12px 16px;
  background: var(--surface2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  border-left: 3px solid var(--border);
}
.m-result.ok   { border-left-color: var(--success); color: var(--success); background: var(--success-dim); }
.m-result.fail { border-left-color: var(--error);   color: var(--error);   background: var(--error-dim); }
.m-result.warn { border-left-color: var(--gold);    color: var(--gold);    background: var(--gold-dim); }