:root{
  --primary:#0066b3;
  --secondary:#009639;
  --accent:#fed100;
  --light:#f5f5f5;
  --dark:#333;
  --danger:#dc3545;
  --success:#28a745;
  --warning:#ffc107;
  --info:#17a2b8;
}
*{box-sizing:border-box}
body{margin:0;background:var(--light);color:var(--dark);font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
header{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:24px 0;border-radius:0 0 12px 12px;box-shadow:0 4px 12px rgba(0,0,0,.1);margin-bottom:24px}
.container{max-width:1200px;margin:0 auto;padding:16px}
h1{margin:0 0 6px;font-size:28px}
.subtitle{opacity:.9}

/* cards / buttons */
.card{background:#fff;border:1px solid #e9ecef;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.06);padding:18px}
.btn{padding:10px 18px;border:none;border-radius:6px;background:var(--primary);color:#fff;font-weight:600;cursor:pointer;transition:.2s}
.btn:hover{filter:brightness(.95);transform:translateY(-1px)}
.btn-success{background:var(--success)} .btn-danger{background:var(--danger)}
.btn-warning{background:var(--warning);color:var(--dark)} .btn-info{background:var(--info)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* login layout improved */
.login-card{max-width:420px;margin:32px auto}
.auth-form{display:flex;flex-direction:column;gap:12px}
.form-group label{font-weight:600;margin-bottom:4px;display:block}
.form-group input,.form-group select{width:100%;padding:10px;border:1.8px solid #ddd;border-radius:6px;font-size:15px}
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.form-row .form-group{flex:1}
.auth-divider{display:flex;justify-content:center;align-items:center;margin:12px 0;color:#777}
.auth-divider span{background:#fff;padding:0 8px}

/* tabs */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;border-bottom:1px solid #e5e5e5}
.tab{background:#fff;border:1px solid #ddd;border-bottom:none;border-radius:8px 8px 0 0;padding:10px 14px;font-weight:600;cursor:pointer}
.tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.tab-content{display:none;background:#fff;border:1px solid #e9ecef;border-radius:0 8px 8px 8px;padding:16px;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.tab-content.active{display:block}

/* matches */
.matches-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.match-card{border:1px solid #eaeaea;border-radius:8px;padding:12px;background:#fff}
.match-header{display:flex;justify-content:space-between;color:#666;font-size:13px;margin-bottom:8px}
.match-teams{display:flex;align-items:center;justify-content:space-between;margin:10px 0}
.team-name{font-weight:700}
.bet-options{display:flex;gap:8px}
.bet-option{flex:1;border:2px solid #ddd;border-radius:6px;padding:8px;font-weight:700;cursor:pointer;text-align:center}
.bet-option.selected{border-color:var(--primary);background:rgba(0,102,179,.08)}
.bet-option.team-a.selected{border-color:var(--success);background:rgba(40,167,69,.08)}
.bet-option.team-b.selected{border-color:var(--danger);background:rgba(220,53,69,.08)}
.bet-option.draw.selected{border-color:var(--warning);background:rgba(255,193,7,.08)}

/* podium */
.podium-section{margin-top:16px;padding-top:8px;border-top:2px dashed #eee}
.podium-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.podium-card{border-top:5px solid #ddd}
.podium-card.first{border-color:gold}.podium-card.second{border-color:silver}.podium-card.third{border-color:#cd7f32}

/* ranking */
.ranking-table{width:100%;border-collapse:collapse}
.ranking-table th,.ranking-table td{padding:10px;border-bottom:1px solid #eee;text-align:left}
.ranking-table th{background:#fafafa}
.position{text-align:center;font-weight:700;width:48px}
.points{text-align:center;font-weight:700;color:var(--primary)}

/* my bets */
.bet-card{background:#fff;border:1px solid #e9ecef;border-radius:8px;padding:14px;margin-bottom:14px}
.bet-item{background:#f8f9fa;border-left:4px solid var(--primary);padding:10px;border-radius:6px;margin-bottom:10px}
.bet-header{display:flex;justify-content:space-between;font-weight:600}

/* all bets */
.filters .filters-actions{display:flex;gap:8px;margin-top:8px}
.user-bets-compact{border:1px solid #eee;border-radius:8px;margin-bottom:12px}
.user-bets-header{display:flex;justify-content:space-between;align-items:center;background:#fafafa;padding:10px;border-bottom:1px solid #eee}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:10px}
.chip{padding:6px 10px;border-radius:999px;border:1px solid #ddd;background:#fff;font-weight:600;font-size:13px}
.chip.win{background:rgba(40,167,69,.1);border-color:#bfe6c8}
.chip.lose{background:rgba(220,53,69,.1);border-color:#f0b7be}
.chip.pending{background:#f1f3f5;border-color:#e0e3e7}
.pagination{display:flex;gap:8px;justify-content:center;margin:12px 0}
.page-btn{padding:8px 12px;border:1px solid #ddd;background:#fff;border-radius:6px;cursor:pointer}
.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* user info */
.user-info{background:var(--primary);color:#fff;border-radius:8px;padding:10px 14px;margin-bottom:12px}
.admin-badge{background:var(--warning);color:#222;padding:2px 8px;border-radius:12px;margin-left:8px;font-weight:700}

/* loading + messages */
.loading{color:#666;text-align:center}
#global-messages{position:fixed;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:9999}
.toast{padding:10px 14px;border-radius:8px;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15);animation:slideIn .2s ease}
.toast.success{background:var(--success)} .toast.error{background:var(--danger)}
.toast.info{background:var(--info)} .toast.warning{background:var(--warning);color:#222}
@keyframes slideIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* admin table */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left}
.badge{padding:3px 8px;border-radius:999px;font-size:12px}
.badge.finished{background:rgba(40,167,69,.1)}
.badge.scheduled{background:rgba(23,162,184,.1)}
.badge.in_progress{background:rgba(255,193,7,.2)}

/* modal (generic) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1000}
.modal.active{display:flex}
.modal-content{background:#fff;max-width:640px;width:92%;border-radius:10px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-height:90vh;overflow:auto}
.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;margin-bottom:12px;padding-bottom:8px}
.close-modal{border:none;background:transparent;font-size:22px;cursor:pointer;color:#666}