:root{--font-display: "Outfit", "Sarabun", -apple-system, sans-serif;--font-body: "Sarabun", "Outfit", -apple-system, sans-serif;--school-blue: #0D47A1;--school-yellow: #FFC107;--school-yellow-glow: rgba(255, 193, 7, .3);--cyan-blue: #00B0FF;--transition-fast: .2s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--border-radius-sm: 8px;--border-radius-md: 14px;--border-radius-lg: 20px;--border-radius-xl: 30px}[data-theme=dark]{--bg-main: #090d16;--bg-surface: #111827;--bg-surface-hover: #1e293b;--bg-surface-active: #334155;--border-color: rgba(255, 255, 255, .08);--border-color-active: rgba(0, 176, 255, .4);--text-main: #f8fafc;--text-muted: #94a3b8;--text-inverse: #0f172a;--card-shadow: 0 8px 30px rgba(0, 0, 0, .4);--glass-bg: rgba(17, 24, 39, .7);--glass-border: rgba(255, 255, 255, .05);--live-color: #ef4444;--success-color: #10b981;--warning-color: #f59e0b}[data-theme=light]{--bg-main: #f4f6fa;--bg-surface: #ffffff;--bg-surface-hover: #f1f5f9;--bg-surface-active: #e2e8f0;--border-color: rgba(15, 23, 42, .08);--border-color-active: rgba(13, 71, 161, .3);--text-main: #0f172a;--text-muted: #64748b;--text-inverse: #ffffff;--card-shadow: 0 8px 24px rgba(13, 71, 161, .06);--glass-bg: rgba(255, 255, 255, .85);--glass-border: rgba(15, 23, 42, .04);--live-color: #dc2626;--success-color: #059669;--warning-color: #d97706}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-main);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;overflow-x:hidden;transition:background-color var(--transition-normal),color var(--transition-normal)}a{color:inherit;text-decoration:none}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:var(--bg-surface-active);border-radius:var(--border-radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse{0%{transform:scale(.95);opacity:.5}50%{transform:scale(1.05);opacity:1}to{transform:scale(.95);opacity:.5}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-fade{animation:fadeIn var(--transition-normal) forwards}.animate-slide-up{animation:slideUp var(--transition-normal) forwards}.app-container{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;max-width:1300px;width:100%;margin:0 auto;padding:24px 16px}.grid-cols-12{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}.card{background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--border-radius-md);padding:20px;box-shadow:var(--card-shadow);transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)}.card-hover:hover{transform:translateY(-4px);border-color:var(--border-color-active);box-shadow:0 12px 30px #00b0ff1a}.section-title{font-family:var(--font-display);font-size:1.8rem;font-weight:700;margin-bottom:20px;position:relative;display:flex;align-items:center;gap:10px}.section-title:after{content:"";position:absolute;bottom:-6px;left:0;width:40px;height:4px;background:linear-gradient(90deg,var(--school-blue),var(--cyan-blue));border-radius:2px}.header{background-color:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border);position:sticky;top:0;z-index:100;padding:12px 24px;transition:background-color var(--transition-normal)}.header-inner{max-width:1260px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.logo-area{display:flex;align-items:center;gap:12px}.logo-img{width:50px;height:50px;object-fit:contain}.logo-text h1{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--school-blue);line-height:1.1;background:linear-gradient(135deg,var(--school-blue) 40%,var(--cyan-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}[data-theme=dark] .logo-text h1{background:linear-gradient(135deg,#ffffff 40%,var(--school-yellow));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.logo-text p{font-size:.75rem;color:var(--text-muted)}.nav-menu{display:flex;gap:6px}.nav-link{font-family:var(--font-display);font-size:.95rem;font-weight:600;padding:10px 16px;border-radius:var(--border-radius-sm);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;gap:8px;transition:all var(--transition-fast)}.nav-link:hover{color:var(--text-main);background-color:var(--bg-surface-hover)}.nav-link.active{color:var(--text-inverse);background:linear-gradient(135deg,var(--school-blue),var(--cyan-blue));box-shadow:0 4px 12px #0d47a14d}[data-theme=dark] .nav-link.active{background:linear-gradient(135deg,var(--school-yellow),#e0a800);color:var(--text-inverse);box-shadow:0 4px 12px #ffc10740}.nav-actions{display:flex;align-items:center;gap:12px}.btn-icon{background:var(--bg-surface-hover);border:1px solid var(--border-color);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-main);transition:all var(--transition-fast)}.btn-icon:hover{background-color:var(--bg-surface-active);transform:rotate(15deg)}.ticker-container{background:linear-gradient(90deg,#090c15,#121829);border-bottom:1px solid var(--border-color);padding:8px 0;overflow-x:auto;display:flex;gap:12px;align-items:center}[data-theme=light] .ticker-container{background:linear-gradient(90deg,#e4eaf5,#f0f4f8)}.ticker-label{background:var(--live-color);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.75rem;padding:6px 12px;border-radius:var(--border-radius-sm);margin-left:20px;white-space:nowrap;animation:pulse 2s infinite}.ticker-item{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:8px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;min-width:220px;transition:all var(--transition-fast)}.ticker-item:hover{border-color:var(--school-yellow);transform:translateY(-1px)}.ticker-team{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem}.ticker-logo{width:20px;height:20px;object-fit:contain}.ticker-score{font-family:var(--font-display);font-weight:800;font-size:1rem;padding:2px 6px;border-radius:4px;background:var(--bg-surface-active)}.match-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--border-radius-md);padding:20px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--card-shadow);transition:all var(--transition-fast)}.match-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);padding-bottom:8px}.match-status{font-size:.75rem;font-weight:700;padding:4px 8px;border-radius:4px;text-transform:uppercase}.status-upcoming{background-color:var(--bg-surface-active);color:var(--text-muted)}.status-live{background-color:#ef444426;color:var(--live-color);animation:pulse 1.5s infinite}.status-finished{background-color:#10b98126;color:var(--success-color)}.match-body{display:flex;align-items:center;justify-content:space-between;position:relative}.match-team{display:flex;flex-direction:column;align-items:center;gap:8px;width:40%;text-align:center}.team-logo-large{width:60px;height:60px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.15))}.team-name-large{font-weight:700;font-size:.95rem}.match-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.match-score-big{font-family:var(--font-display);font-size:2rem;font-weight:800;letter-spacing:4px}.match-versus{font-weight:700;font-size:.85rem;color:var(--text-muted);background:var(--bg-surface-active);padding:4px 10px;border-radius:12px}.match-footer{display:flex;gap:10px}.btn{flex:1;padding:10px 14px;border-radius:var(--border-radius-sm);font-weight:700;font-size:.85rem;cursor:pointer;border:1px solid var(--border-color);background:var(--bg-surface-hover);display:flex;align-items:center;justify-content:center;gap:8px;transition:all var(--transition-fast)}.btn-back{flex:none!important;width:fit-content!important;padding:8px 16px}.btn:hover{background:var(--bg-surface-active)}.btn-primary{background:linear-gradient(135deg,var(--school-blue),var(--cyan-blue));border:none;color:#fff}.btn-primary:hover{opacity:.9;box-shadow:0 4px 14px #0d47a166}[data-theme=dark] .btn-primary{background:linear-gradient(135deg,var(--school-yellow),#d49a00);color:#000}[data-theme=dark] .btn-primary:hover{box-shadow:0 4px 14px #ffc1074d}.table-responsive{overflow-x:auto;border-radius:var(--border-radius-md);border:1px solid var(--border-color);box-shadow:var(--card-shadow)}.standings-table{width:100%;border-collapse:collapse;text-align:left;background-color:var(--bg-surface)}.standings-table th{background-color:var(--bg-surface-hover);color:var(--text-muted);font-weight:700;font-size:.85rem;padding:14px 16px;border-bottom:1px solid var(--border-color);text-transform:uppercase}.standings-table td{padding:14px 16px;border-bottom:1px solid var(--border-color);font-size:.95rem}.standings-table tr:hover{background-color:var(--bg-surface-hover)}.rank-col{width:50px;text-align:center;font-weight:700}.team-col{display:flex;align-items:center;gap:12px;font-weight:700}.team-col-logo{width:28px;height:28px;object-fit:contain}.stat-col{text-align:center;width:50px}.points-col{font-weight:800;text-align:center;width:60px;background-color:#00b0ff0d}[data-theme=dark] .points-col{background-color:#ffc1070d;color:var(--school-yellow)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000a6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .2s ease-out forwards}.modal-content{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 40px #00000080;animation:slideUp .3s cubic-bezier(.18,.89,.32,1.28) forwards}.modal-header{padding:20px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.modal-title{font-family:var(--font-display);font-weight:700;font-size:1.25rem}.modal-close{background:none;border:none;cursor:pointer;color:var(--text-muted)}.modal-body{padding:20px}.calendar-slider{display:flex;overflow-x:auto;gap:8px;padding:4px 0 8px;margin-bottom:0}.calendar-day{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:8px 10px;min-width:70px;text-align:center;cursor:pointer;transition:all var(--transition-fast)}.calendar-day:hover{border-color:var(--border-color-active);background-color:var(--bg-surface-hover)}.calendar-day.active{background:linear-gradient(135deg,var(--school-blue),var(--cyan-blue));border-color:var(--school-blue);color:#fff;box-shadow:0 4px 12px #0d47a14d}[data-theme=dark] .calendar-day.active{background:linear-gradient(135deg,var(--school-yellow),#e0a800);border-color:var(--school-yellow);color:#000;box-shadow:0 4px 12px #ffc10740}.calendar-day-name{font-size:.65rem;font-weight:500;text-transform:uppercase}.calendar-day-date{font-size:.95rem;font-weight:800;font-family:var(--font-display)}.calendar-nav-btn{position:absolute;z-index:10;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:50%;width:32px;height:32px;min-width:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-main);box-shadow:var(--card-shadow);padding:0;transition:all var(--transition-fast)}.calendar-nav-btn:hover{background:var(--bg-surface-hover);border-color:var(--border-color-active);transform:scale(1.08)}.calendar-nav-btn:active{transform:scale(.95)}.calendar-nav-btn.left{left:0}.calendar-nav-btn.right{right:0}.bracket-container{display:flex;justify-content:space-between;gap:20px;overflow-x:auto;padding:20px 10px}.bracket-round{display:flex;flex-direction:column;justify-content:space-around;min-width:220px}.bracket-round-title{text-align:center;font-family:var(--font-display);font-weight:700;margin-bottom:20px;color:var(--text-muted);font-size:.85rem}.bracket-matchup{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:10px;margin:16px 0;box-shadow:var(--card-shadow);position:relative}.bracket-team-row{display:flex;justify-content:space-between;align-items:center;padding:6px 4px}.bracket-team-row.winner{font-weight:700;color:var(--school-yellow)}[data-theme=light] .bracket-team-row.winner{color:var(--school-blue)}.bracket-team-row:not(:last-child){border-bottom:1px solid var(--border-color)}.video-placeholder{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;border-radius:var(--border-radius-md);overflow:hidden;box-shadow:var(--card-shadow)}.video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff}.admin-sidebar{display:flex;flex-direction:column;gap:6px}.admin-sidebar-btn{padding:12px 16px;border-radius:var(--border-radius-sm);cursor:pointer;font-weight:700;display:flex;align-items:center;gap:12px;border:1px solid transparent;background:none;text-align:left}.admin-sidebar-btn:hover{background:var(--bg-surface-hover)}.admin-sidebar-btn.active{background:var(--bg-surface-active);border-color:var(--border-color-active)}.form-group{margin-bottom:16px}.form-label{display:block;font-weight:700;font-size:.85rem;margin-bottom:6px}.form-control{width:100%;background:var(--bg-surface-hover);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:10px 14px;transition:all var(--transition-fast)}.form-control:focus{outline:none;border-color:var(--border-color-active);box-shadow:0 0 0 3px #00b0ff26}@media(max-width:992px){.grid-cols-12{display:flex;flex-direction:column}}.header-league-selector{display:flex;align-items:center;gap:8px;background:var(--bg-surface-hover);padding:6px 12px;border-radius:var(--border-radius-sm);border:1px solid var(--border-color);margin:0 12px;transition:all var(--transition-fast)}@media(max-width:768px){.header{padding:8px 12px}.header-inner{flex-direction:row;justify-content:space-between;align-items:center;gap:8px;flex-wrap:nowrap}.logo-img{width:36px;height:36px}.logo-text h1{font-size:.95rem}.logo-text p{display:none}.header-league-selector{padding:4px 8px;margin:0 4px;font-size:.75rem;gap:4px}.header-league-selector select{font-size:.75rem}.nav-menu{gap:4px}.nav-link{padding:6px 10px;font-size:.8rem;gap:4px}.nav-link span{display:none}.btn-icon{width:32px;height:32px}.match-body{flex-direction:column;gap:16px}.match-team{width:100%}.match-score-big{font-size:1.75rem}.match-footer{flex-direction:column;gap:8px}.match-footer .btn{width:100%}}@media(max-width:520px){.logo-text{display:none}.header-league-selector{padding:4px}}.firebase-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--border-radius-md);padding:24px;margin-bottom:24px;box-shadow:var(--card-shadow)}.firebase-status-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:20px;font-weight:700;font-size:.85rem;margin-top:8px}.firebase-status-badge.online{background:#2e7d3226;color:#81c784;border:1px solid rgba(76,175,80,.3)}[data-theme=light] .firebase-status-badge.online{background:#4caf501a;color:#2e7d32;border:1px solid rgba(46,125,50,.2)}.firebase-status-badge.offline{background:#ef6c0026;color:#ffb74d;border:1px solid rgba(255,152,0,.3)}[data-theme=light] .firebase-status-badge.offline{background:#ff980014;color:#e65100;border:1px solid rgba(239,108,0,.2)}.firebase-steps{margin-top:20px;display:flex;flex-direction:column;gap:16px}.firebase-step{display:flex;gap:16px}.firebase-step-num{background:var(--school-blue);color:#fff;width:28px;height:28px;min-width:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}[data-theme=dark] .firebase-step-num{background:var(--school-yellow);color:#000}.firebase-step-content{flex:1;font-size:.9rem;color:var(--text-muted)}.firebase-step-title{font-weight:700;color:var(--text-main);margin-bottom:4px}.firebase-code-box{background:var(--bg-surface-hover);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:12px;font-family:monospace;font-size:.8rem;color:var(--text-main);margin-top:8px;white-space:pre-wrap;word-break:break-all}