:root {
  --cromos-bg: #07111f;
  --cromos-panel: rgba(255,255,255,.08);
  --cromos-border: rgba(255,255,255,.14);
  --cromos-text: #eef5ff;
  --cromos-muted: #9fb0c5;
  --cromos-gold: #f5c542;
  --cromos-green: #3ddc97;
  --cromos-blue: #4da3ff;
}

body {
  min-height: 100vh;
  background: radial-gradient(circle at top left, #173a68 0, transparent 32%), radial-gradient(circle at bottom right, #3c245f 0, transparent 30%), var(--cromos-bg);
  color: var(--cromos-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.auth-card, .glass-card, .sidebar, .topbar {
  background: var(--cromos-panel);
  border: 1px solid var(--cromos-border);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  border-radius: 22px;
}
.auth-card { max-width: 460px; width: 100%; padding: 2rem; }
.form-control, .form-select {
  background-color: rgba(255,255,255,.92);
  border: 0;
  min-height: 44px;
}
.btn-gold {
  background: linear-gradient(135deg, #ffd86b, #f3b32b);
  border: 0;
  color: #1b1b1b;
  font-weight: 800;
}
.btn-gold:hover { filter: brightness(.96); color: #111; }
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 286px; margin: 18px; padding: 18px; position: sticky; top: 18px; height: calc(100vh - 36px); }
.sidebar .brand { font-size: 1.25rem; font-weight: 900; letter-spacing: -.03em; }
.sidebar .nav-link { color: var(--cromos-muted); border-radius: 14px; padding: .85rem 1rem; font-weight: 650; }
.sidebar .nav-link.active, .sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.12); }
.content { flex: 1; padding: 18px 18px 42px 0; overflow-x: hidden; }
.topbar { padding: 18px 22px; margin-bottom: 18px; }
.kpi { padding: 22px; position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; width: 130px; height: 130px; right: -48px; top: -48px; border-radius: 50%; background: rgba(255,255,255,.09); }
.kpi .value { font-size: 2rem; font-weight: 900; letter-spacing: -.04em; }
.kpi .label { color: var(--cromos-muted); font-weight: 650; }
.table { --bs-table-bg: transparent; --bs-table-color: #eef5ff; --bs-table-border-color: rgba(255,255,255,.12); }
.table thead th { color: #fff; background: rgba(255,255,255,.08); border-bottom: 0; }
.badge-soft { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.12); }
.sticker-card { min-height: 198px; transition: transform .15s ease, border-color .15s ease; }
.sticker-card:hover { transform: translateY(-2px); border-color: rgba(245,197,66,.55); }
.sticker-thumb { height: 74px; border-radius: 16px; background: linear-gradient(135deg, rgba(77,163,255,.25), rgba(245,197,66,.25)); display: grid; place-items: center; font-weight: 900; color: #fff; }
.progress { background: rgba(255,255,255,.13); }
.text-muted-c { color: var(--cromos-muted)!important; }
.modal-content { background: #101c2d; color: var(--cromos-text); border: 1px solid var(--cromos-border); border-radius: 22px; }
.offcanvas { background: #0d1728; color: var(--cromos-text); }

@media (max-width: 991px) {
  .layout { display: block; }
  .sidebar { display:none; }
  .content { padding: 12px; }
}
.cromo-table tbody tr { transition: background-color .15s ease, opacity .15s ease; }
.cromo-table tbody tr.row-owned { background: rgba(61, 220, 151, .07); }
.cromo-table tbody tr.saving-row { opacity: .55; }
.cromo-table .form-check-input { cursor: pointer; width: 3rem; height: 1.5rem; }
.fw-black { font-weight: 900; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.team-chip { display: block; padding: .85rem 1rem; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.team-chip:hover, .team-chip.active { border-color: rgba(245,197,66,.65); color: #fff; background: rgba(245,197,66,.12); }