/* FartBet — fb-styles.css */
/* Dark betting-app theme · Onest + Unbounded fonts · CSS custom-property palette */

:root {
  --accent: #FFD600;
  --accent-2: #FFC400;
  --accent-3: #B47700;
  --accent-ink: #0a0a0a;
  --bg: #0a0a0a;
  --surface: #161616;
  --surface-2: #1e1e1e;
  --surface-3: #262626;
  --text: #e8e6e1;
  --text-2: rgba(255,255,255,.55);
  --text-3: rgba(255,255,255,.32);
  --border: rgba(255,255,255,.08);
  --border-2: rgba(255,255,255,.14);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Onest', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.app {
  display: grid;
  grid-template-columns: 220px 1fr 320px;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "hdr hdr hdr"
    "rail main slip";
  min-height: 100vh;
  width: 100%;
}
.app-no-slip {
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "hdr hdr"
    "rail main";
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.hdr {
  grid-area: hdr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.hdr-left { display: flex; align-items: center; gap: 24px; }
.hdr-right { display: flex; align-items: center; gap: 12px; }

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  font-size: 16px;
  border-radius: 8px;
}
.logo-mark.big { width: 48px; height: 48px; font-size: 22px; border-radius: 12px; }
.logo-text {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  letter-spacing: -0.5px;
}
.logo-accent { color: var(--accent); }
.logo-tag {
  font-size: 9px;
  font-weight: 700;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  margin-left: 2px;
  line-height: 1.5;
}

.hdr-nav { display: flex; gap: 2px; }
.hdr-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  background: none;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-xs);
  transition: color .15s, background .15s;
}
.hdr-nav-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }
.hdr-nav-btn.active { color: var(--accent); background: rgba(255,255,255,.08); }

.dot-admin {
  display: inline-block;
  width: 6px; height: 6px;
  background: #FF3D3D;
  border-radius: 50%;
  margin-right: 4px;
}

.hdr-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  height: 34px;
  width: 260px;
  color: var(--text-2);
}
.hdr-search svg { flex-shrink: 0; opacity: .5; }
.hdr-search input {
  flex: 1;
  border: none;
  background: none;
  color: var(--text);
  font-size: 12.5px;
  outline: none;
}
.hdr-search input::placeholder { color: var(--text-3); }
.hdr-search kbd {
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  color: var(--text-3);
  background: rgba(255,255,255,.04);
}

.bal-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  transition: background .15s;
}
.bal-pill:hover { background: rgba(255,255,255,.08); }
.bal-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 14px;
  border-radius: 50%;
  line-height: 1;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  transition: background .15s;
}
.user-chip:hover { background: rgba(255,255,255,.06); }
.user-chip svg { opacity: .4; }

/* ═══════════════════════════════════════════════════════════════════════════
   LEFT RAIL / SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
  height: calc(100vh - 56px);
  position: sticky;
  top: 56px;
}
.rail-sect { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.rail-sect:last-child { border-bottom: none; }
.rail-title { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 8px 10px 4px; }

.rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: none;
  background: none;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
  width: 100%;
  text-align: left;
}
.rail-item:hover { color: var(--text); background: rgba(255,255,255,.06); }
.rail-item.active { color: var(--accent); background: rgba(255,255,255,.08); }

.rail-ic { flex-shrink: 0; opacity: .65; }
.rail-item.active .rail-ic { opacity: 1; }
.rail-lbl { flex: 1; }

.rail-badge {
  font-size: 11px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: var(--text-2);
}
.rail-badge-live {
  background: rgba(255,61,61,.15);
  color: #FF3D3D;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:.6} }

.rail-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: none;
  background: none;
  color: var(--text-2);
  font-size: 12.5px;
  border-radius: var(--radius-xs);
  transition: background .15s;
  width: 100%;
  text-align: left;
}
.rail-cat:hover { background: rgba(255,255,255,.06); }
.rail-cat-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  color: var(--text-3);
}
.rail-cat-count { margin-left: auto; color: var(--text-3); font-size: 12px; }

.rail-admin { color: var(--accent) !important; }
.rail-foot { margin-top: auto; padding-top: 12px; }
.rail-disclaim { font-size: 10.5px; color: var(--text-3); line-height: 1.5; padding: 6px 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN AREA
   ═══════════════════════════════════════════════════════════════════════════ */

.main {
  grid-area: main;
  padding: 24px 28px;
  overflow-y: auto;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BET SLIP (right column)
   ═══════════════════════════════════════════════════════════════════════════ */

.slip-col {
  grid-area: slip;
  border-left: 1px solid var(--border);
  background: var(--surface);
  height: calc(100vh - 56px);
  position: sticky;
  top: 56px;
  overflow-y: auto;
}

.slip { padding: 16px; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.slip-hd { display: flex; align-items: center; justify-content: space-between; }
.slip-title { font-weight: 700; font-size: 15px; }
.slip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  margin-left: 8px;
}
.slip-clear {
  border: none;
  background: none;
  color: var(--text-3);
  font-size: 12px;
  text-decoration: underline;
}
.slip-clear:hover { color: var(--text-2); }

.slip-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 32px 16px;
}
.slip-empty-icon { color: var(--text-3); opacity: .4; }
.slip-empty-t { font-weight: 600; color: var(--text-2); }
.slip-empty-s { font-size: 12px; color: var(--text-3); line-height: 1.5; }

.slip-list { display: flex; flex-direction: column; gap: 8px; }
.slip-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.slip-row-main { flex: 1; min-width: 0; }
.slip-row-evt { font-size: 12px; color: var(--text-2); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slip-row-pick { display: flex; justify-content: space-between; align-items: center; }
.slip-pick-label { font-weight: 600; font-size: 13px; }
.slip-pick-coef { font-weight: 700; color: var(--accent); font-size: 14px; }
.slip-row-x { border: none; background: none; color: var(--text-3); font-size: 14px; padding: 0 4px; }
.slip-row-x:hover { color: #FF3D3D; }

.slip-express {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255,214,0,.08);
  border: 1px dashed rgba(255,214,0,.25);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 500;
}

.slip-stake { display: flex; flex-direction: column; gap: 6px; }
.slip-stake label { font-size: 12px; color: var(--text-2); font-weight: 500; }
.slip-stake-input {
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.slip-stake-input input {
  flex: 1;
  border: none;
  background: none;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  padding: 8px 12px;
  outline: none;
  -moz-appearance: textfield;
}
.slip-stake-input input::-webkit-inner-spin-button,
.slip-stake-input input::-webkit-outer-spin-button { -webkit-appearance: none; }
.slip-stake-unit { padding-right: 12px; color: var(--text-2); font-size: 13px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }

.slip-quick { display: flex; gap: 6px; }
.slip-quick button {
  flex: 1;
  padding: 5px 0;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xs);
  background: none;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  transition: background .15s, border-color .15s;
}
.slip-quick button:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }
.slip-quick-max { color: var(--accent) !important; border-color: rgba(255,214,0,.25) !important; }
.slip-quick-max:hover { background: rgba(255,214,0,.08) !important; }

.slip-summary { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
.slip-sum-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); }
.slip-sum-row.big { font-size: 14px; color: var(--text); padding-top: 6px; border-top: 1px solid var(--border); margin-top: 4px; }
.slip-win { color: var(--accent); display: flex; align-items: center; gap: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 20px;
  transition: background .15s, opacity .15s;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--border-2); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-ghost-sm { font-size: 12px; padding: 5px 12px; background: rgba(255,255,255,.06); color: var(--text-2); border: 1px solid var(--border); border-radius: var(--radius-xs); }
.btn-ghost-sm:hover { background: rgba(255,255,255,.1); }
.btn-danger-sm { font-size: 12px; padding: 5px 12px; background: rgba(255,61,61,.1); color: #FF3D3D; border: 1px solid rgba(255,61,61,.2); border-radius: var(--radius-xs); }
.btn-danger-sm:hover { background: rgba(255,61,61,.18); }
.btn-disabled { background: rgba(255,255,255,.06); color: var(--text-3); cursor: not-allowed; }
.btn-full { width: 100%; }
.btn-place { height: 46px; font-size: 14px; font-weight: 700; border-radius: var(--radius); }

/* ═══════════════════════════════════════════════════════════════════════════
   PCOIN, AVATAR, BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

.pc { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pc-big { gap: 6px; }
.pc-big .pc-num { font-size: 22px; font-weight: 800; }
.pc-big .pc-unit { font-size: 14px; }
.pc-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-unit { font-size: 11px; color: var(--text-3); font-weight: 600; }
.pc-muted { opacity: .5; }

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.avatar-ring { box-shadow: 0 0 0 2px var(--accent); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.status-live { background: rgba(255,61,61,.12); color: #FF3D3D; }
.status-open { background: rgba(0,200,83,.12); color: #00C853; }
.status-closed { background: rgba(154,160,166,.12); color: #9AA0A6; }
.status-settled { background: rgba(255,214,0,.12); color: var(--accent); }

.status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.pulse { animation: livePulse 1.5s ease-in-out infinite; }

.cat-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  color: var(--text-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-back {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
}
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  width: 92%;
  overflow-y: auto;
  max-height: 90vh;
}
.modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: rgba(255,255,255,.06);
  color: var(--text-3);
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-x:hover { background: rgba(255,255,255,.12); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-card { position: relative; padding: 32px; }
.auth-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.auth-brand {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 20px;
}
.auth-sub { font-size: 12px; color: var(--text-3); }
.auth-h { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.auth-p { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-bottom: 20px; }
.auth-p-sm { font-size: 12px; margin-bottom: 14px; }

.tg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--radius);
  background: #0088CC;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: filter .15s;
}
.tg-btn:hover { filter: brightness(1.1); }

.tg-spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--text-3);
  font-size: 12px;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.auth-secondary {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: none;
  color: var(--text-2);
  font-size: 13px;
}
.auth-secondary:hover { background: rgba(255,255,255,.04); }

.auth-foot { font-size: 11px; color: var(--text-3); margin-top: 20px; line-height: 1.6; }
.auth-foot a { color: var(--accent); }

.auth-loading { text-align: center; padding: 20px 0; }
.auth-steps { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.auth-step { font-size: 13px; color: var(--text-3); }
.auth-step.done { color: #00C853; }
.auth-step.active { color: var(--accent); font-weight: 600; }

.auth-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
  max-height: 320px;
  overflow-y: auto;
}
.auth-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  text-align: left;
  width: 100%;
  transition: border-color .15s, background .15s;
}
.auth-user:hover { background: rgba(255,255,255,.04); border-color: var(--border-2); }
.auth-user.sel { border-color: var(--accent); background: rgba(255,214,0,.06); }
.auth-user-admin { border-style: dashed; }
.auth-user-meta { flex: 1; min-width: 0; }
.auth-user-n { font-weight: 600; font-size: 13px; }
.auth-user-h { font-size: 11.5px; color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  animation: toastIn .3s ease-out;
  white-space: nowrap;
}
.toast-ok { background: var(--accent); color: var(--accent-ink); }
.toast-err { background: #FF3D3D; color: #fff; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Cookie consent banner */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 14px 24px;
  background: var(--surface); border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-2);
  animation: toastIn .3s ease;
}
.cookie-banner .btn-sm { padding: 6px 16px; font-size: 12px; white-space: nowrap; }

/* Countdown timer */
.countdown { font-variant-numeric: tabular-nums; font-weight: 600; color: #FFC400; }
.countdown-expired { color: #FF5252; }

/* Admin timer input row */
.adm-timer-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }

/* Coin requests */
.adm-coinreqs { display: flex; flex-direction: column; gap: 8px; }
.adm-coinreqs-empty { color: var(--muted); font-size: 13px; padding: 8px 0; }
.adm-coinreq-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--card); border-radius: 10px; border: 1px solid var(--border); }
.adm-coinreq-info { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.adm-coinreq-name { font-weight: 600; font-size: 14px; }
.adm-coinreq-amount { color: #FFC400; font-weight: 700; font-size: 14px; }
.adm-coinreq-bal { color: var(--muted); font-size: 12px; }
.adm-coinreq-actions { display: flex; gap: 6px; }
.adm-coinreq-done { opacity: 0.6; }
.adm-coinreq-status.approved { color: #00C853; font-weight: 600; font-size: 12px; }
.adm-coinreq-status.rejected { color: #FF5252; font-weight: 600; font-size: 12px; }
.adm-coinreqs-history { margin-top: 8px; }
.adm-coinreqs-history summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.adm-badge-count { background: #FF5252; color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 7px; margin-left: 6px; }
.balcard-msg { margin-top: 6px; font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO BANNER (HOME)
   ═══════════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 28px;
  padding: 36px 32px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,214,0,.12) 0%, rgba(255,214,0,0) 60%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; }
.hero-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.hero-h {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 12px;
}
.hero-p { color: var(--text-2); font-size: 14px; max-width: 520px; line-height: 1.6; margin-bottom: 20px; }
.hero-stats {
  display: flex;
  gap: 32px;
}
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats b { font-size: 22px; font-weight: 800; color: var(--accent); }
.hero-stats span { font-size: 11px; color: var(--text-3); font-weight: 500; }

.hero-ticker {
  position: relative;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  overflow: hidden;
}
.ticker-track {
  display: flex;
  gap: 20px;
  animation: tickerScroll 30s linear infinite;
  white-space: nowrap;
}
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  flex-shrink: 0;
}
.ticker-item b { color: var(--text); font-weight: 600; }
.ticker-stake { color: var(--accent); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION HEADERS, TABS, LIVE ROW
   ═══════════════════════════════════════════════════════════════════════════ */

.sect-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sect-hd h2 { font-size: 16px; font-weight: 700; }
.sect-sub { font-size: 12px; color: var(--text-3); }
.sect-dot {
  width: 8px; height: 8px;
  background: #FF3D3D;
  border-radius: 50%;
  flex-shrink: 0;
}
.sect-dot.pulse { animation: livePulse 1.5s ease-in-out infinite; }
.sect-link { margin-left: auto; font-size: 12.5px; color: var(--accent); background: none; border: none; cursor: pointer; }
.sect-link:hover { text-decoration: underline; }

.live-row { margin-bottom: 28px; }
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

.line-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.line-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  transition: all .15s;
}
.line-tab:hover { border-color: var(--border-2); background: rgba(255,255,255,.04); }
.line-tab.active { border-color: var(--accent); background: rgba(255,214,0,.08); color: var(--accent); }
.line-tab-n { font-size: 11px; color: var(--text-3); }
.line-tab.active .line-tab-n { color: var(--accent-3); }

.line-tab-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(255,214,0,.08);
  font-size: 12px;
  color: var(--accent);
}
.line-tab-cat button { border: none; background: none; color: var(--accent); font-size: 14px; margin-left: 4px; }

.line-tabs-r { margin-left: auto; }
.line-sort {
  border: none;
  background: none;
  color: var(--text-3);
  font-size: 12px;
}
.line-sort b { color: var(--text-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.evt-list { display: flex; flex-direction: column; gap: 12px; }

.evt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  transition: border-color .2s;
}
.evt-card:hover { border-color: var(--border-2); }
.evt-hot { border-color: rgba(255,214,0,.2); }
.evt-hot:hover { border-color: rgba(255,214,0,.35); }
.evt-compact { padding: 14px 16px; }
.evt-live { border-left: 3px solid #FF3D3D; }
.evt-open {}
.evt-closed { opacity: .65; }
.evt-settled { opacity: .65; }
.evt-row {}

.evt-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.evt-hd-l { display: flex; align-items: center; gap: 8px; }
.evt-subject { font-size: 12px; color: var(--text-2); font-weight: 500; }
.evt-fire { font-size: 11px; font-weight: 700; color: var(--accent); }

.evt-title {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
  cursor: pointer;
  padding: 0;
}
.evt-title:hover { color: var(--accent); }

.evt-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.evt-meta-i {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-3);
}
.evt-closes { color: var(--accent); font-weight: 500; }

.evt-outs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.evt-outs-3 { grid-template-columns: repeat(3, 1fr); }

.out-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  transition: all .15s;
}
.out-btn:hover { border-color: var(--accent); background: rgba(255,214,0,.04); }
.out-sel { border-color: var(--accent) !important; background: rgba(255,214,0,.1) !important; }
.out-won { border-color: #00C853 !important; background: rgba(0,200,83,.08) !important; }
.out-lost { opacity: .4; }
.out-closed { cursor: not-allowed; opacity: .5; }
.out-settled { cursor: default; }

.out-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.out-coef { font-size: 18px; font-weight: 800; color: var(--accent); }
.out-pop { width: 100%; height: 3px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.out-pop-fill { height: 100%; border-radius: 999px; background: var(--accent); opacity: .5; }
.out-flag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #00C853;
  color: #fff;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT DETAIL
   ═══════════════════════════════════════════════════════════════════════════ */

.evt-detail {}
.back-btn {
  border: none;
  background: none;
  color: var(--text-2);
  font-size: 13px;
  margin-bottom: 16px;
  padding: 0;
}
.back-btn:hover { color: var(--accent); }

.evt-detail-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.evt-detail-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.dot-sep { color: var(--text-3); }

.evt-detail-title {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 24px;
}

.evt-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 28px; }
.stat-card {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stat-l { font-size: 11px; color: var(--text-3); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.stat-v { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.stat-v span { font-size: 14px; color: var(--text-2); font-weight: 500; }
.stat-clock { color: var(--accent); }
.stat-subject { display: flex; align-items: center; gap: 8px; font-size: 15px; }

.evt-detail-outs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 32px; }
.evt-detail-outs-3 { grid-template-columns: repeat(3, 1fr); }

.out-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface);
  transition: all .15s;
  cursor: pointer;
}
.out-big:hover { border-color: var(--accent); background: rgba(255,214,0,.04); }
.out-big.out-sel { border-color: var(--accent); background: rgba(255,214,0,.1); box-shadow: 0 0 0 1px var(--accent); }
.out-big.out-won { border-color: #00C853; background: rgba(0,200,83,.08); }
.out-big.out-disabled { cursor: default; opacity: .55; }
.out-big-l { font-size: 13px; font-weight: 600; color: var(--text-2); }
.out-big-c { font-size: 28px; font-weight: 900; color: var(--accent); }
.out-big-pop { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.out-big-pop span { font-size: 11px; color: var(--text-3); }

.evt-bets { margin-top: 8px; }
.evt-bets-list { display: flex; flex-direction: column; gap: 6px; }
.evt-bet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.evt-bet-name { font-weight: 600; min-width: 100px; }
.evt-bet-pick {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
}
.evt-bet-pick b { color: var(--accent); }
.evt-bet-pick-yes { border-left: 2px solid #00C853; }
.evt-bet-pick-no { border-left: 2px solid #FF3D3D; }
.evt-bet-stake { color: var(--text-2); font-weight: 600; margin-left: auto; }
.evt-bet-ts { color: var(--text-3); font-size: 12px; }
.evt-bet-cmt { font-size: 12px; color: var(--text-3); font-style: italic; width: 100%; padding-left: 38px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BOARD (ACTIVITY FEED)
   ═══════════════════════════════════════════════════════════════════════════ */

.board {}
.board-hd { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.board-stats { display: flex; gap: 24px; }
.stat-mini {}
.stat-mini-v { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 4px; }
.stat-mini-l { font-size: 11px; color: var(--text-3); }

.board-tabs { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.board-tabs-inline { margin-bottom: 0; }
.board-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  transition: all .15s;
}
.board-tab:hover { border-color: var(--border-2); background: rgba(255,255,255,.04); }
.board-tab.active { border-color: var(--accent); background: rgba(255,214,0,.08); color: var(--accent); }
.board-tab-n { font-size: 11px; color: var(--text-3); }

.board-feed { display: flex; flex-direction: column; gap: 12px; }
.board-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .15s;
}
.board-card:hover { border-color: var(--border-2); }
.board-mine { border-color: rgba(255,214,0,.2); }
.board-live { border-left: 3px solid #FF3D3D; }
.board-won { border-left: 3px solid #00C853; }
.board-lost { border-left: 3px solid #9AA0A6; }

.board-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.board-line1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.board-name { font-weight: 700; }
.board-handle { color: var(--text-3); font-size: 12px; }
.board-you {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,214,0,.15);
  color: var(--accent);
}
.board-dot { color: var(--text-3); }
.board-ts { color: var(--text-3); font-size: 12px; }
.board-status-wrap { margin-left: auto; }
.board-status { font-size: 11px; font-weight: 600; }
.board-status.board-live { color: #FF3D3D; }
.board-status.board-won { color: #00C853; }
.board-status.board-lost { color: #9AA0A6; }

.board-action { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.board-action b { color: var(--text); }
.board-pick {
  display: inline-flex;
  padding: 1px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
}

.board-evt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.board-evt:hover { border-color: var(--border-2); }
.board-evt-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-evt-cta { color: var(--accent); font-weight: 600; font-size: 11.5px; flex-shrink: 0; }

.board-cmt { font-size: 13px; color: var(--text-2); font-style: italic; }

.board-react { display: flex; gap: 6px; flex-wrap: wrap; }
.react-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  font-size: 13px;
  color: var(--text-2);
  transition: all .15s;
}
.react-btn:hover { background: rgba(255,255,255,.06); border-color: var(--border-2); }
.react-mine { border-color: var(--accent); background: rgba(255,214,0,.08); }
.react-n { font-size: 11px; font-weight: 600; }
.react-share { font-size: 11.5px; color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   RATING / LEADERBOARD
   ═══════════════════════════════════════════════════════════════════════════ */

.rating {}
.rating-hd { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }

.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}
.podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 180px;
}
.podium-slot.empty { visibility: hidden; }
.podium-medal { font-size: 28px; }
.podium-name { font-weight: 700; font-size: 14px; }
.podium-bal { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 4px; }
.podium-delta { font-size: 12px; font-weight: 500; }
.podium-delta.up { color: #00C853; }
.podium-delta.down { color: #FF3D3D; }
.podium-step {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(to top, var(--surface) 0%, var(--surface-3) 100%);
  border: 1px solid var(--border);
  border-bottom: none;
  font-size: 28px;
  font-weight: 900;
  color: var(--text-3);
  padding-bottom: 8px;
}
.podium-1 .podium-step { background: linear-gradient(to top, var(--surface) 0%, rgba(255,214,0,.12) 100%); border-color: rgba(255,214,0,.2); }

.my-rank {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255,214,0,.06);
  border: 1px solid rgba(255,214,0,.2);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.my-rank-l { display: flex; align-items: center; gap: 14px; }
.my-rank-place { font-size: 24px; font-weight: 900; color: var(--accent); }
.my-rank-n { font-weight: 700; font-size: 14px; }
.my-rank-s { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.my-rank-r {}

.lb-table {}
.lb-head {
  display: grid;
  grid-template-columns: 50px 1fr 120px 100px 70px 120px;
  gap: 8px;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.lb-row {
  display: grid;
  grid-template-columns: 50px 1fr 120px 100px 70px 120px;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.lb-row:hover { background: rgba(255,255,255,.03); }
.lb-mine { background: rgba(255,214,0,.04); border-color: rgba(255,214,0,.15); }

.lb-rank { font-size: 15px; font-weight: 800; color: var(--text-2); }
.lb-player { display: flex; align-items: center; gap: 10px; }
.lb-name { font-weight: 600; font-size: 13px; }
.lb-you {
  font-size: 10px;
  padding: 1px 5px;
  background: rgba(255,214,0,.15);
  color: var(--accent);
  border-radius: 4px;
  margin-left: 6px;
  font-weight: 700;
}
.lb-handle { font-size: 11.5px; color: var(--text-3); }

.lb-spark { display: flex; align-items: center; gap: 8px; }
.lb-delta { font-size: 12px; font-weight: 600; }
.lb-delta.up, .up { color: #00C853; }
.lb-delta.down, .down { color: #FF3D3D; }

.lb-winrate { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.lb-wr-bar { width: 48px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.lb-wr-fill { height: 100%; border-radius: 999px; background: var(--accent); }

.lb-bets { font-size: 13px; color: var(--text-2); }
.lb-bal { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 4px; }

.spark { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE
   ═══════════════════════════════════════════════════════════════════════════ */

.profile {}
.profile-cover {
  height: 100px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(135deg, var(--surface-3) 0%, rgba(255,214,0,.1) 100%);
  margin: -24px -28px 0;
}
.profile-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  margin-top: -48px;
  position: relative;
}
.profile-info { flex: 1; }
.profile-name { font-size: 22px; font-weight: 800; }
.profile-handle { color: var(--text-3); font-size: 13px; }
.profile-meta { display: flex; gap: 8px; font-size: 12px; color: var(--text-3); margin-top: 4px; }
.profile-actions { display: flex; gap: 8px; }

.profile-balcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.balcard-l { font-size: 12px; color: var(--text-3); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.balcard-v { font-size: 32px; font-weight: 900; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.balcard-v span { font-size: 18px; color: var(--text-2); }
.balcard-meta { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.balcard-btn { white-space: nowrap; }

.profile-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 28px; }
.pstat {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.pstat-l { font-size: 11px; color: var(--text-3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.pstat-v { font-size: 20px; font-weight: 800; }
.pstat-v.live { color: #FF3D3D; }

.profile-recent {}

/* ═══════════════════════════════════════════════════════════════════════════
   HISTORY
   ═══════════════════════════════════════════════════════════════════════════ */

.history {}
.hist-list { display: flex; flex-direction: column; gap: 6px; }
.hist-row {
  display: grid;
  grid-template-columns: 110px 1fr 100px 100px 120px 100px;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.hist-live { border-left: 3px solid #FF3D3D; }
.hist-won { border-left: 3px solid #00C853; }
.hist-lost { border-left: 3px solid #9AA0A6; }

.hist-status {}
.hist-pill { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.hist-pill-live { background: rgba(255,61,61,.12); color: #FF3D3D; }
.hist-pill-won { background: rgba(0,200,83,.12); color: #00C853; }
.hist-pill-lost { background: rgba(154,160,166,.12); color: #9AA0A6; }

.hist-evt {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.hist-evt:hover { color: var(--accent); }
.hist-evt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hist-pick { display: flex; align-items: center; gap: 6px; }
.hist-pick b { color: var(--accent); }
.hist-stake { color: var(--text-2); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.hist-result { font-weight: 700; font-size: 12.5px; }
.hist-ts { color: var(--text-3); font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN
   ═══════════════════════════════════════════════════════════════════════════ */

.admin {}
.admin-hd { margin-bottom: 24px; }
.admin-pill {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(255,61,61,.12);
  color: #FF3D3D;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  margin-right: 8px;
  vertical-align: middle;
}

.admin-locked { text-align: center; padding: 80px 40px; }
.admin-locked-icon { font-size: 48px; margin-bottom: 16px; }
.admin-locked h2 { font-size: 20px; margin-bottom: 8px; }
.admin-locked p { color: var(--text-2); font-size: 14px; margin-bottom: 24px; }

.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-card {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.admin-card-wide { grid-column: span 2; }
.admin-card-h { font-size: 16px; font-weight: 700; margin-bottom: 16px; }

.admin-form { display: flex; flex-direction: column; gap: 12px; }
.adm-l { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); font-weight: 500; }
.adm-input {
  padding: 8px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.adm-input:focus { border-color: var(--accent); }
.adm-input::placeholder { color: var(--text-3); }
select.adm-input { appearance: auto; }
.adm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adm-out { display: flex; gap: 8px; }
.adm-out .adm-input { flex: 1; }
.adm-coef { max-width: 80px; text-align: center; }
.adm-note { font-size: 11.5px; color: var(--text-3); text-align: center; }

.adm-pending { padding: 12px 0; border-bottom: 1px solid var(--border); }
.adm-pending:last-child { border-bottom: none; }
.adm-pending-t { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.adm-pending-m { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.adm-pending-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.adm-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.adm-live {
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.adm-live-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.adm-live-t { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.adm-live-m { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.adm-live-actions { display: flex; gap: 6px; }

/* Admin users list */
.adm-users-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.adm-user-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg); border-radius: 8px; }
.adm-user-info { flex: 1; min-width: 0; }
.adm-user-name { font-size: 13px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-user-handle { font-size: 11px; color: var(--text-3); }
.adm-role-badge { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .5px; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 1px 4px; margin-left: 6px; vertical-align: middle; }
.btn-ok-sm { color: #00e676 !important; border-color: #00e676 !important; }

/* Admin categories */
.adm-cats-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.adm-cat-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg); border-radius: 6px; }
.adm-cat-label { font-size: 13px; font-weight: 500; flex: 1; }
.adm-cat-id { font-size: 11px; color: var(--text-3); }
.adm-cat-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.adm-cat-inp { flex: 1; min-width: 80px; max-width: 150px; }
.adm-cat-short { max-width: 60px !important; min-width: 50px !important; }

/* Auth: no TG notice */
.auth-no-tg { text-align: center; padding: 12px; color: var(--text-3); font-size: 13px; margin: 8px 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   GENERIC PAGE HEADERS
   ═══════════════════════════════════════════════════════════════════════════ */

.page-h { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.page-sub { font-size: 13px; color: var(--text-2); }

.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH INPUTS
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-input-group {
  margin-bottom: 16px;
}
.auth-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  outline: none;
  transition: border-color .15s;
}
.auth-input:focus {
  border-color: var(--accent);
}
.auth-input::placeholder {
  color: var(--text-3);
}
.auth-input-code {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 8px;
}
.auth-error {
  color: #FF3D3D;
  font-size: 13px;
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 56px 1fr auto;
    grid-template-areas:
      "hdr"
      "main"
      "slip";
  }
  .app-no-slip {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hdr"
      "main";
  }
  .rail { display: none; }
  .slip-col {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    max-height: 50vh;
    overflow-y: auto;
    border-top: 1px solid var(--border);
    background: var(--surface);
    border-radius: 16px 16px 0 0;
  }
  .main { padding: 16px; }
}

@media (max-width: 768px) {
  .hdr { padding: 0 12px; }
  .hdr-left { gap: 12px; }
  .logo-text { font-size: 13px; }
  .logo-mark { width: 28px; height: 28px; font-size: 14px; border-radius: 6px; }

  .main { padding: 12px; }

  .events-grid {
    grid-template-columns: 1fr !important;
  }

  .event-card { padding: 14px; }
  .event-title { font-size: 14px; }

  .profile-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .hist-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .board-cols {
    grid-template-columns: 1fr !important;
  }

  .rating-table th,
  .rating-table td {
    padding: 8px 6px;
    font-size: 12px;
  }

  .modal-inner {
    width: calc(100vw - 16px) !important;
    max-width: 100% !important;
    margin: 8px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
  }

  .auth-card { padding: 20px; }
  .auth-logo { margin-bottom: 16px; }
  .logo-mark.big { width: 40px; height: 40px; font-size: 18px; }
  .auth-brand { font-size: 17px; }

  .slip { padding: 12px; }
  .slip-hd { font-size: 14px; }
}

@media (max-width: 480px) {
  html { font-size: 13px; }

  .hdr { height: 48px; }
  .hdr-right { gap: 8px; }

  .btn { padding: 8px 12px; font-size: 12px; }

  .profile-balcard {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .balcard-v { font-size: 24px; }

  .profile-stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .auth-input { font-size: 16px; padding: 12px 14px; }
  .auth-input-code { font-size: 20px; letter-spacing: 6px; }
}