/* Shared utilities only (.ew-*). Do NOT override template body/layout. */
/* EffectWeb shared design tokens + components (all templates) */
:root {
  --ew-bg: #0a0a10;
  --ew-surface: #161622;
  --ew-surface2: #1e1e2e;
  --ew-border: rgba(201, 162, 39, 0.22);
  --ew-gold: #c9a227;
  --ew-gold2: #e8c547;
  --ew-text: #e4e4ec;
  --ew-muted: #8a8a9c;
  --ew-ok: #2ecc71;
  --ew-err: #e74c3c;
  --ew-warn: #f39c12;
  --ew-radius: 10px;
  --ew-shadow: 0 8px 24px rgba(0,0,0,.35);
  --ew-font: 'Roboto', Tahoma, system-ui, sans-serif;
}

.ew-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer;
  font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  background: linear-gradient(180deg, #d4b02e, #a07d15); color: #1a1200;
  transition: transform .15s, box-shadow .15s;
}
.ew-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(201,162,39,.35); }
.ew-btn-ghost { background: transparent; color: var(--ew-text); border: 1px solid rgba(255,255,255,.15); }
.ew-card {
  background: var(--ew-surface); border: 1px solid var(--ew-border);
  border-radius: var(--ew-radius); padding: 16px; box-shadow: var(--ew-shadow);
}
.ew-table { width: 100%; border-collapse: collapse; }
.ew-table th { background: rgba(201,162,39,.12); color: var(--ew-gold2); padding: 10px; text-align: left; font-size: 11px; text-transform: uppercase; }
.ew-table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 12px; }
.ew-table tr:hover td { background: rgba(201,162,39,.05); }
.ew-alert { padding: 12px 14px; border-radius: 8px; margin: 8px 0; font-size: 13px; }
.ew-alert-ok { background: rgba(46,204,113,.12); border: 1px solid rgba(46,204,113,.3); color: #a8f0c6; }
.ew-alert-err { background: rgba(231,76,60,.12); border: 1px solid rgba(231,76,60,.3); color: #ffb4ac; }
.ew-alert-warn { background: rgba(243,156,18,.1); border: 1px solid rgba(243,156,18,.3); color: #ffd89a; }

/* Toast container */
#ew-toasts { position: fixed; top: 16px; right: 16px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.ew-toast {
  padding: 12px 16px; border-radius: 10px; background: #1a1a28; border: 1px solid var(--ew-border);
  color: var(--ew-text); font-size: 13px; box-shadow: var(--ew-shadow);
  animation: ewToastIn .25s ease; cursor: pointer;
}
.ew-toast.ok { border-color: rgba(46,204,113,.4); }
.ew-toast.err { border-color: rgba(231,76,60,.4); }
@keyframes ewToastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* AJAX skeleton */
.ew-skeleton {
  background: linear-gradient(90deg, #1a1a28 25%, #252538 50%, #1a1a28 75%);
  background-size: 200% 100%; animation: ewSkel 1.2s ease infinite;
  border-radius: 8px; min-height: 120px; margin: 8px 0;
}
@keyframes ewSkel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Podium */
.ew-podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 16px 0; }
.ew-podium .p { flex: 1; max-width: 140px; text-align: center; background: var(--ew-surface); border: 1px solid var(--ew-border); border-radius: 10px 10px 0 0; padding: 12px 8px; }
.ew-podium .p.gold { min-height: 120px; border-color: var(--ew-gold); }
.ew-podium .p.silver { min-height: 90px; }
.ew-podium .p.bronze { min-height: 70px; }
.ew-podium .rank { font-size: 20px; color: var(--ew-gold2); font-weight: 700; }
.ew-countdown { font-variant-numeric: tabular-nums; color: var(--ew-gold2); font-weight: 700; letter-spacing: 1px; }