:root{
  /* Material-inspired expressive tokens */
  --color-bg: #050910;
  --color-surface-1: rgba(255,255,255,0.04);
  --color-surface-2: rgba(255,255,255,0.06);
  --color-surface-3: rgba(255,255,255,0.08);
  --color-outline: rgba(255,255,255,0.10);
  --color-outline-variant: rgba(255,255,255,0.14);
  --color-fg: #e9ecf2;
  --color-muted: #a9b4c5;
  --color-primary: #4c8dff;
  --color-primary-strong: #3b7af3;
  --color-secondary: #7dd6c2;
  --color-tertiary: #f6b26b;
  --color-danger: #ef4444;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 8px 18px rgba(0,0,0,0.25);
  --shadow-md: 0 14px 30px rgba(0,0,0,0.32);
  --shadow-lg: 0 20px 45px rgba(0,0,0,0.40);
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  font-size: 16px;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:radial-gradient(circle at 10% 20%, rgba(76,141,255,0.12), transparent 32%),
             radial-gradient(circle at 80% 10%, rgba(125,214,194,0.12), transparent 28%),
             radial-gradient(circle at 50% 90%, rgba(246,178,107,0.10), transparent 30%),
             var(--color-bg);
  color:var(--color-fg);
  font:16px/1.6 "Inter","Segoe UI","SF Pro Display",system-ui,-apple-system,Roboto,Ubuntu,"Helvetica Neue",Arial;
}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.brand{font-weight:700;letter-spacing:.3px}
.muted{color:var(--color-muted)}

/* Cards & surfaces */
.shadow-card{box-shadow:var(--shadow-md);background:var(--color-surface-2);border:1px solid var(--color-outline);border-radius:var(--radius-lg)}
.glass{background:var(--color-surface-2);border:1px solid var(--color-outline);box-shadow:var(--shadow-lg);backdrop-filter:blur(12px);border-radius:var(--radius-lg)}

/* Inputs */
input,button,textarea,select{font:inherit}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea,
select{
  width:100%;
  background:var(--color-surface-1);
  color:var(--color-fg);
  border:1px solid var(--color-outline);
  border-radius:var(--radius-md);
  padding:0.85rem 1rem;
  outline:none;
  min-height:44px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus,
textarea:focus,
select:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px rgba(76,141,255,0.25);
  background:var(--color-surface-2);
}
select option{
  color:#0b0f1a;
}
input[type="checkbox"]{width:auto;height:18px;accent-color:var(--color-primary)}

/* Buttons */
.btn{
  border-radius:var(--radius-md);
  border:1px solid var(--color-primary-strong);
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-strong));
  color:var(--color-fg);
  padding-left:1rem;padding-right:1rem;
  box-shadow:var(--shadow-sm);
  transition:transform .08s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.05);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(1px)}
.btn.btn-outline{
  background:transparent;
  border:1px solid var(--color-outline);
  color:var(--color-fg);
  box-shadow:none;
}
.btn.btn-ghost,.btn.btn-link{
  background:transparent;
  border-color:transparent;
  color:var(--color-muted);
  box-shadow:none;
}
.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-strong));border-color:var(--color-primary-strong)}
.btn-success{background:linear-gradient(135deg,#22c55e,#16a34a);border-color:#16a34a;color:#0b160d}
.btn-warning{background:linear-gradient(135deg,var(--color-tertiary),#f48a1f);border-color:#f48a1f;color:#2b1600}

.btn-neon {
  background: linear-gradient(135deg, #4c8dff, #3b7af3);
  border: 2px solid rgba(0, 174, 255, 0.4);
  box-shadow:
    0 0 0 2px rgba(0, 174, 255, 0.18),
    0 10px 24px rgba(0,0,0,0.35);
  color: #fff;
  border-radius: 18px;
  padding: 14px 12px;
  transition: transform .08s ease, box-shadow .2s ease, filter .15s ease;
  text-decoration: none !important;
  display: inline-block;
}
.btn-neon:hover {
  filter: brightness(1.05);
  box-shadow:
    0 0 0 3px rgba(0, 174, 255, 0.28),
    0 14px 28px rgba(0,0,0,0.4);
}
.btn-neon:active {
  transform: translateY(1px);
}

.score-cta {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 14px 24px rgba(255, 255, 255, 0.08),
    0 0 0 2px rgba(0, 174, 255, 0.22),
    0 12px 26px rgba(0,0,0,0.45);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.score-cta:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 16px 26px rgba(255, 255, 255, 0.12),
    0 0 0 3px rgba(0, 174, 255, 0.32),
    0 16px 30px rgba(0,0,0,0.5);
}

/* Messages */
.messages{list-style:none;margin:0 0 1rem 0;padding:0}
.msg{background:var(--color-surface-1);border:1px solid var(--color-outline);padding:.5rem .75rem;border-radius:var(--radius-sm)}
.err{color:var(--color-danger);font-size:.9rem}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}

/* Rating chips (Daisy join) */
input.btn.join-item:checked,
.join .btn:has(input[type=radio]:checked){
  background-image:linear-gradient(135deg,var(--color-primary),var(--color-primary-strong));
  border-color:var(--color-primary-strong);
  color:#fff;
}

/* Flash messages (toast bottom-right) */
.flash-container{
  position:fixed;
  right:18px;
  bottom:18px;
  max-width:360px;
  z-index:50;
}
.flash-card{
  background:linear-gradient(135deg, rgba(76,141,255,0.18), rgba(125,214,194,0.16));
  border:1px solid rgba(255,255,255,0.10);
  color:var(--color-fg);
  border-radius:16px;
  padding:10px 12px;
  box-shadow:var(--shadow-md);
  font-size:0.9rem;
}
.flash-card.flash-success{border-color:rgba(34,197,94,0.28);background:linear-gradient(135deg, rgba(34,197,94,0.18), rgba(125,214,194,0.16));}
.flash-card.flash-error{border-color:rgba(239,68,68,0.28);background:linear-gradient(135deg, rgba(239,68,68,0.20), rgba(252,165,165,0.14));}
.flash-card.flash-warning{border-color:rgba(244,138,31,0.28);background:linear-gradient(135deg, rgba(244,138,31,0.20), rgba(246,178,107,0.14));}

/* Celebratory badges (subtle, token-like) */
.badge-award{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border-radius:14px;
  padding:0.28rem 0.55rem;
  background:linear-gradient(135deg, rgba(125,214,194,0.12), rgba(76,141,255,0.14));
  color:var(--color-fg);
  border:1px solid var(--color-outline);
  box-shadow:0 6px 14px rgba(0,0,0,0.20);
  font-weight:600;
  font-size:0.85rem;
}

/* Invite friends panel */
.invite-panel{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(125, 214, 194, 0.18), rgba(0, 0, 0, 0) 60%),
    radial-gradient(120% 140% at 100% 0%, rgba(76, 141, 255, 0.22), rgba(0, 0, 0, 0) 55%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.75));
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}


/* Utility spacing */
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:2rem;padding-bottom:2rem}
.mt-4{margin-top:1rem}
.flex{display:flex}
.space-between{justify-content:space-between;align-items:center}
.vstack{display:flex;flex-direction:column}
.gap-3{gap:1rem}

@media (max-width: 768px){
  .shadow-card, .glass{border-radius:var(--radius-md)}
}

@media (max-width: 640px){
  .flash-container{
    left:12px;
    right:12px;
    width:auto;
    max-width:none;
  }
  .btn-neon{
    width:100%;
    text-align:left;
  }
}

/* Tier badges (Platinum/Gold/Silver) */
.tier-badge{
  border-radius: 999px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
.tier-platinum{
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05)), #8FB7FF;
  color: #0B1220;
  border-color: #C7DBFF;
  box-shadow: 0 8px 18px rgba(143,183,255,0.35);
}
.tier-gold{
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05)), #F5B84C;
  color: #1A1305;
  border-color: #FFD98A;
  box-shadow: 0 8px 18px rgba(245,184,76,0.35);
}
.tier-silver{
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05)), #C7CCD6;
  color: #0F172A;
  border-color: #E5E9F0;
  box-shadow: 0 8px 18px rgba(199,204,214,0.35);
}