*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#14100a;--bg2:#1a1511;--bg3:#201a16;--accent:gold;--accent2:#b8860b;--gold:gold;--text:#f5f0e8;--text2:#a89a7a;--red:#f44336;--green:#66bb6a;--card:#1f1910;--border:#4a3a1e;--radius:12px}body{background:#14100a;background:var(--bg);color:#f5f0e8;color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.5;min-height:100vh}.loading{color:#a89a7a;color:var(--text2);font-size:1.2rem;height:100vh}.auth-page,.loading{align-items:center;display:flex;justify-content:center}.auth-page{background:linear-gradient(#0a0f0a80,#0a0f0a99);min-height:100vh;padding:1rem}.auth-card{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#141f1473;border:1px solid #4a3a1e;border:1px solid var(--border);border-radius:12px;border-radius:var(--radius);max-width:400px;padding:2rem;width:100%}.auth-card h1{font-size:1.6rem;font-weight:800;margin-bottom:.25rem}.auth-card .subtitle{color:#a89a7a;color:var(--text2);font-size:.9rem;margin-bottom:1.5rem}.logo{font-size:2.5rem;margin-bottom:.75rem}.form-group{margin-bottom:1rem}.form-group label{color:#a89a7a;color:var(--text2);display:block;font-size:.85rem;font-weight:600;letter-spacing:.5px;margin-bottom:.4rem;text-transform:uppercase}.form-group input,.form-group select{background:#1a1511;background:var(--bg2);border:1px solid #4a3a1e;border:1px solid var(--border);border-radius:8px;color:#f5f0e8;color:var(--text);font-size:1rem;padding:.75rem 1rem;transition:border-color .2s;width:100%}.form-group input:focus,.form-group select:focus{border-color:gold;border-color:var(--accent);outline:none}.btn{align-items:center;border:none;border-radius:8px;cursor:pointer;display:inline-flex;font-size:.95rem;font-weight:600;justify-content:center;padding:.75rem 1.5rem;text-decoration:none;transition:all .2s}.btn-primary{background:gold;background:var(--accent);color:#000}.btn-primary:hover{filter:brightness(1.1)}.btn-secondary{background:#1a1511;background:var(--bg2);border:1px solid #4a3a1e;border:1px solid var(--border);color:#f5f0e8;color:var(--text)}.btn-secondary:hover{border-color:gold;border-color:var(--accent)}.btn-danger{background:#f44336;background:var(--red);color:#fff}.btn-full{width:100%}.btn:disabled{cursor:not-allowed;opacity:.5}.layout{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1 1;margin:0 auto;max-width:800px;padding:1rem 1rem 120px;width:100%}.bottom-nav{background:#1f1910;background:var(--card);border-top:1px solid #4a3a1e;border-top:1px solid var(--border);bottom:0;display:flex;left:0;position:fixed;right:0;z-index:100}.nav-item{align-items:center;background:none;border:none;color:#a89a7a;color:var(--text2);cursor:pointer;display:flex;flex:1 1;flex-direction:column;font-size:.7rem;font-weight:500;padding:.6rem .5rem;text-decoration:none;transition:color .2s}.nav-item.active{color:gold;color:var(--accent)}.nav-icon{font-size:1.3rem;margin-bottom:2px}.top-bar{align-items:center;background:#1a1511;background:var(--bg2);border-bottom:1px solid #4a3a1e;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:.75rem 1rem;position:-webkit-sticky;position:sticky;top:0;z-index:50}.top-bar-title{color:gold;color:var(--accent);font-size:1.1rem;font-weight:800}.top-bar-user{color:#a89a7a;color:var(--text2);font-size:.8rem}.card{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#141f148c;border:1px solid #4a3a1e;border:1px solid var(--border);border-radius:12px;border-radius:var(--radius);padding:1rem}.card,.card-header{margin-bottom:.75rem}.card-header{color:gold;color:var(--accent);font-size:.85rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.match-card{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#141f148c;border:1px solid #4a3a1e;border:1px solid var(--border);border-radius:12px;border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden}.match-header{align-items:center;background:#201a16;background:var(--bg3);color:#a89a7a;color:var(--text2);display:flex;font-size:.75rem;justify-content:space-between;padding:.4rem .75rem}.match-header .phase{color:gold;color:var(--accent);font-weight:600}.match-body{padding:.75rem}.match-teams{grid-gap:.5rem;align-items:center;display:grid;gap:.5rem;grid-template-columns:1fr auto 1fr;margin-bottom:.75rem}.team-name{font-size:.95rem;font-weight:600}.team-name.home{text-align:right}.team-name.away{text-align:left}.match-score{color:gold;color:var(--gold);font-size:1.3rem;font-weight:800;min-width:60px;text-align:center}.match-score.pending{color:#a89a7a;color:var(--text2);font-size:1rem}.tip-row{grid-gap:.5rem;align-items:center;display:grid;gap:.5rem;grid-template-columns:1fr auto 1fr}.tip-input{background:#1a1511;background:var(--bg2);border:2px solid #4a3a1e;border:2px solid var(--border);border-radius:8px;color:#f5f0e8;color:var(--text);font-size:1.1rem;font-weight:700;padding:.4rem;text-align:center;transition:border-color .2s;width:100%}.tip-input:focus{border-color:gold;border-color:var(--accent);outline:none}.tip-input:disabled{opacity:.5}.tip-separator{font-weight:700}.tip-points,.tip-separator{color:#a89a7a;color:var(--text2);text-align:center}.tip-points{font-size:.75rem;margin-top:.4rem}.tip-points.won{color:#66bb6a;color:var(--green);font-weight:700}.tip-points.exact{color:gold;color:var(--gold);font-weight:700}.save-btn{background:gold;background:var(--accent);border:none;border-radius:8px;color:#000;cursor:pointer;font-size:.85rem;font-weight:600;margin-top:.5rem;padding:.5rem;transition:all .2s;width:100%}.save-btn:hover{filter:brightness(1.1)}.save-btn:disabled{cursor:not-allowed;opacity:.4}.saved-indicator{color:#66bb6a;color:var(--green)}.closed-indicator,.saved-indicator{font-size:.75rem;margin-top:.35rem;text-align:center}.closed-indicator{color:#a89a7a;color:var(--text2)}.phase-group{margin-bottom:1.5rem}.phase-title{border-bottom:1px solid #4a3a1e;border-bottom:1px solid var(--border);color:#a89a7a;color:var(--text2);font-size:.8rem;font-weight:700;letter-spacing:1px;margin-bottom:.5rem;padding:.4rem 0;text-transform:uppercase}.gruppe-title{color:gold;color:var(--accent);font-size:.75rem;font-weight:600;margin:.75rem 0 .4rem}.ranking-table{width:100%}.ranking-row{align-items:center;border-bottom:1px solid #4a3a1e;border-bottom:1px solid var(--border);display:grid;grid-template-columns:40px 1fr auto;padding:.75rem 1rem}.ranking-row:last-child{border-bottom:none}.ranking-row.me{background:#4caf5014}.rank-num{color:#a89a7a;color:var(--text2);font-size:1.1rem;font-weight:800}.rank-num.gold{color:gold;color:var(--gold)}.rank-num.silver{color:silver}.rank-num.bronze{color:#cd7f32}.rank-name{font-weight:600}.rank-sub{color:#a89a7a;color:var(--text2);font-size:.75rem}.rank-pts{color:gold;color:var(--accent);font-size:1.4rem;font-weight:800}.error-msg{background:#f4433626;border:1px solid #f44336;border:1px solid var(--red);border-radius:8px;color:#f44336;color:var(--red)}.error-msg,.success-msg{font-size:.85rem;margin-bottom:1rem;padding:.75rem}.success-msg{background:#66bb6a26;border:1px solid #66bb6a;border:1px solid var(--green);border-radius:8px;color:#66bb6a;color:var(--green)}.auth-link{color:#a89a7a;color:var(--text2);font-size:.85rem;margin-top:1rem;text-align:center}.auth-link a{color:gold;color:var(--accent);font-weight:600;text-decoration:none}.admin-match{grid-gap:.5rem;align-items:center;border-bottom:1px solid #4a3a1e;border-bottom:1px solid var(--border);display:grid;gap:.5rem;grid-template-columns:1fr auto 1fr auto;padding:.75rem}.admin-match:last-child{border-bottom:none}.page-header{margin-bottom:1.25rem}.page-header h2{font-size:1.4rem;font-weight:800}.page-header p{color:#a89a7a;color:var(--text2);font-size:.85rem;margin-top:.25rem}.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.tab{background:#1a1511;background:var(--bg2);border:1px solid #4a3a1e;border:1px solid var(--border);border-radius:20px;color:#a89a7a;color:var(--text2);cursor:pointer;font-size:.85rem;font-weight:600;padding:.4rem 1rem;transition:all .2s}.tab.active{background:gold;background:var(--accent);border-color:gold;border-color:var(--accent);color:#000}.wm-banner{background:linear-gradient(135deg,#201a16,#b8860b);background:linear-gradient(135deg,var(--bg3),var(--accent2));border:1px solid gold;border:1px solid var(--accent);border-radius:12px;border-radius:var(--radius);margin-bottom:1.25rem;padding:1rem}.wm-banner h3{font-size:1rem;font-weight:700;margin-bottom:.5rem}@media (min-width:600px){.main-content{padding:1.5rem}.match-score{font-size:1.5rem}}