:root{--dcb-blue: #0077BE;--dcb-orange: #FF6B35;--light: #f8f9fa;--dark: #212529;--danger: #dc3545;--success: #28a745;--app-bg: #ffffff;--surface: #ffffff;--surface-alt: #ffffff;--surface-muted: #ffffff;--text-main: #212529;--text-muted: #6c757d;--border-color: #dee2e6;--shadow-color: rgba(0, 0, 0, .1);--button-accent-shadow: 0 10px 22px rgba(13, 59, 95, .18), inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 0 2px rgba(255, 107, 53, .22), inset 0 -2px 0 rgba(255, 107, 53, .58);--button-shade-gradient: linear-gradient(135deg, #1f5f8b 0%, #3278a4 100%);--button-primary-gradient: linear-gradient(135deg, #0077be 0%, #2a88bd 55%, #4a98c4 100%);--button-secondary-gradient: linear-gradient(135deg, #0077be 0%, #2a88bd 55%, #5b87a3 100%);--button-success-gradient: linear-gradient(135deg, #2c5a63 0%, #44747f 55%, #608c96 100%);--button-danger-gradient: linear-gradient(135deg, #5c5568 0%, #766f82 55%, #91899d 100%)}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--app-bg);min-height:100vh;color:var(--text-main);transition:background-color .2s ease,color .2s ease}html.dark-theme,body.dark-theme{--app-bg: #0b1118;--surface: #121b24;--surface-alt: #17222d;--surface-muted: #1c2834;--text-main: #e5edf5;--text-muted: #9fb0bf;--border-color: #2a3947;--shadow-color: rgba(0, 0, 0, .35);--button-accent-shadow: 0 10px 22px rgba(8, 16, 24, .3), inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 0 2px rgba(255, 107, 53, .18), inset 0 -2px 0 rgba(255, 107, 53, .48);--button-shade-gradient: linear-gradient(135deg, #3a6c8d 0%, #4b7b9a 100%);--button-primary-gradient: linear-gradient(135deg, #4d8bb1 0%, #6499bd 54%, #7ba7c4 100%);--button-secondary-gradient: linear-gradient(135deg, #4b88ad 0%, #6498ba 54%, #7dabc6 100%);--button-success-gradient: linear-gradient(135deg, #425865 0%, #58707d 54%, #6f8895 100%);--button-danger-gradient: linear-gradient(135deg, #4f5260 0%, #676b79 54%, #828693 100%)}.container{max-width:1200px;margin:0 auto;padding:20px}.header{background:var(--surface);padding:20px;margin-bottom:20px;border-radius:8px;box-shadow:0 2px 10px var(--shadow-color)}.header h1{display:flex;align-items:center;justify-content:space-between;color:var(--dcb-blue)}.nav-buttons{display:flex;gap:10px}.btn{padding:10px 20px;border:1px solid rgba(255,255,255,.08);border-radius:12px;cursor:pointer;font-size:14px;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;text-decoration:none;display:inline-block;font-weight:700;color:#fff;background:var(--button-shade-gradient);box-shadow:var(--button-accent-shadow);position:relative}.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}.btn-primary{background:var(--button-primary-gradient)}.btn-secondary{background:var(--button-secondary-gradient)}.btn-danger{background:var(--button-danger-gradient)}.btn-success{background:var(--button-success-gradient)}.btn-icon{padding:5px 8px;font-size:14px;background:none;border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;border-radius:6px;margin:0 2px;box-shadow:none}.btn-icon:hover{background:var(--surface-alt);transform:none;filter:none}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;justify-content:center;align-items:center;z-index:1000}.modal.active{display:flex}.modal-content{background:var(--surface);padding:30px;border-radius:8px;max-width:500px;width:90%;color:var(--text-main)}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:5px;font-weight:600;color:var(--text-main)}.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px;border:1px solid var(--border-color);background:var(--surface);color:var(--text-main);border-radius:4px;font-size:14px}table{width:100%;border-collapse:collapse;background:var(--surface)}th,td{padding:12px;text-align:left;border-bottom:1px solid var(--border-color)}th{background:var(--surface-alt);font-weight:600;color:var(--text-main)}.page{display:block;visibility:hidden;position:absolute;top:0;left:0;width:100%;background:var(--surface);padding:30px;border-radius:8px;box-shadow:0 2px 10px var(--shadow-color);z-index:0}.page.active{visibility:visible;position:relative}.tabs{display:flex;border-bottom:2px solid var(--border-color);margin-bottom:30px;background:var(--surface);border-radius:8px 8px 0 0;overflow-x:auto}.tab{padding:15px 25px;cursor:pointer;border:none;background:none;color:var(--text-muted);font-size:16px;font-weight:500;position:relative;white-space:nowrap;transition:all .2s}.tab:hover{background:var(--surface-alt);color:var(--dcb-blue)}.tab.active{color:var(--dcb-blue);background:#0077be1f}.tab.active:after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:3px;background:var(--dcb-blue)}.content-section{display:none}.content-section.active{display:block}.table-container{overflow-x:auto;background:var(--surface);border-radius:8px;box-shadow:0 2px 10px var(--shadow-color);-webkit-overflow-scrolling:touch}tr:hover{background:var(--surface-alt)}.alert{padding:12px 20px;border-radius:4px;margin-bottom:20px;display:none}.alert.show{display:block}.alert-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.alert-danger{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.alert-warning{background:#fff3cd;color:#856404;border:1px solid #ffeeba}.modal-content h2{margin-bottom:20px;color:var(--dcb-blue)}.close{position:absolute;right:20px;top:20px;font-size:28px;font-weight:700;cursor:pointer;color:#adb5bd;background:none;border:none;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.close:hover{color:var(--text-main);background:var(--surface-alt)}.search-bar{display:flex;gap:10px;margin-bottom:20px}.search-bar input,.search-bar select{padding:10px;border:1px solid var(--border-color);border-radius:4px;background:var(--surface);color:var(--text-main)}.search-bar input{flex:1}.search-bar select{min-width:150px}.checkbox-list{max-height:300px;overflow-y:auto;border:1px solid var(--border-color);border-radius:4px;padding:10px;background:var(--surface)}.checkbox-list label{display:flex;align-items:center;padding:8px;cursor:pointer;border-radius:4px}.checkbox-list label:hover{background:var(--surface-alt)}.checkbox-list input[type=checkbox]{width:auto;margin-right:10px}.loading{display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid var(--dcb-blue);border-radius:50%;animation:spin 1s linear infinite;margin-left:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.payment-status-message{padding:20px;margin:20px 0;border-radius:8px;text-align:center;font-size:16px}.payment-status-message.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.payment-status-message.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.team-filters{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}.filter-btn{padding:10px 20px;color:#fff;border:none;border-radius:12px;cursor:pointer;font-size:14px;transition:all .2s;font-weight:700;box-shadow:0 10px 22px #0d3b5f2e;display:inline-block;background:var(--button-secondary-gradient)}.filter-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}.filter-btn.active{background:var(--button-primary-gradient)!important}.my-games,.widget-shell,.player-panel,.admin-panel,.mapping-section,.mapping-card,.detail-card,.attendance-column,.game-item,.game-row,.player-nav,.admin-nav{background:var(--surface);border-color:var(--border-color);box-shadow:0 12px 30px var(--shadow-color)}.panel-message,.message{background:var(--surface-muted);color:var(--text-main)}@media (max-width: 768px){.container{padding:10px}.page{padding:14px}th,td{padding:8px 6px}.btn{padding:9px 14px;font-size:13px;border-radius:10px}.table-container{margin-inline:-2px}.modal-content{padding:18px;width:min(100%,96vw)}}@media (max-width: 480px){.container{padding:8px}.page{padding:12px;border-radius:12px}body{font-size:14px}}.mapping-header p,.mapping-message,.mapping-label,.hint,.summary,.intro,.meta,.status-text,.day{color:var(--text-muted)}