:root{--bg:#f6f7fb;--card:#ffffff;--text:#0f172a;--muted:#64748b;--border:#e5e7eb;--shadow: 0 10px 25px rgba(15,23,42,.08);--shadow2: 0 6px 16px rgba(15,23,42,.1);--primary:#0b5ea8;--primary2:#0f78d6;--danger:#dc3545;--success:#16a34a;--radius:14px;--t:.22s ease}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Roboto,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}.topbar{position:sticky;top:0;z-index:50;background:linear-gradient(135deg,var(--primary),#084b86);box-shadow:var(--shadow2)}.topbar-inner{max-width:1100px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:12px;min-width:0;cursor:pointer;-webkit-user-select:none;user-select:none}.brand img{width:56px;height:56px;border-radius:12px;background:transparent;padding:0;object-fit:cover;object-position:center;display:block}.brand .title{color:#fff;font-weight:800;letter-spacing:.2px;font-size:1.1rem;white-space:nowrap}.top-actions{display:flex;align-items:center;gap:10px}.btn{border:none;cursor:pointer;border-radius:999px;padding:10px 12px;font-weight:700;transition:var(--t);display:inline-flex;align-items:center;gap:8px;line-height:1;-webkit-user-select:none;user-select:none}.btn:active{transform:translateY(1px)}.btn-ghost{background:#ffffff24;color:#fff}.btn-ghost:hover{background:#ffffff38}.btn-primary{background:#fff;color:var(--primary)}.btn-primary:hover{background:#ffffffeb}.icon-btn{width:42px;height:42px;justify-content:center;padding:0}.icon-btn.icon-danger{color:var(--danger)!important;background:#dc35451f!important;border:1px solid rgba(220,53,69,.35)!important}.icon-btn.icon-danger:hover{background:#dc35452e!important}main{max-width:1100px;margin:0 auto;padding:18px 16px 40px}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-top:14px}.card h2{font-size:1.05rem;margin-bottom:10px}.subtle{color:var(--muted);font-size:.95rem}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}input,select{border:1px solid var(--border);border-radius:12px;padding:12px;font-size:1rem;outline:none;transition:var(--t);background:#fff}input:focus,select:focus{border-color:#0f78d68c;box-shadow:0 0 0 4px #0f78d61f}.btn-form{border:none;border-radius:12px;padding:12px 14px;font-weight:800;cursor:pointer;transition:var(--t);white-space:nowrap}.btn-form.primary{background:linear-gradient(135deg,var(--primary2),var(--primary));color:#fff}.btn-form.primary:hover{filter:brightness(1.04)}.btn-form.secondary{background:#eef6ff;color:var(--primary);border:1px solid rgba(15,120,214,.25)}.btn-form.secondary:hover{background:#e6f1ff}.btn-form.danger{background:var(--danger);color:#fff}.hidden{display:none!important}.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}.autocomplete{position:relative;max-width:420px;width:100%}.auto-list{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);list-style:none;max-height:240px;overflow:auto;display:none;z-index:10}.auto-list li{padding:10px 12px;cursor:pointer;font-weight:700}.auto-list li:hover{background:#f1f5f9}#editAutocompleteList{max-height:360px}#editAutocompleteList li{padding:14px;font-size:1.03rem;font-weight:900;line-height:1.25}#editAutocompleteList li .hl{background:#0f78d629;padding:1px 4px;border-radius:6px}.matches-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.match{border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:0 8px 18px #0f172a0f;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}.match-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;min-width:0}.team{min-width:0;font-weight:800;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;justify-content:center;text-align:center}.team.right{justify-content:center;text-align:center}.scorebox{display:flex;align-items:flex-start;gap:10px;justify-content:center;flex-wrap:nowrap}.score-side{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-width:52px}.scorebox input{width:52px;text-align:center;font-weight:900;font-size:1.05rem;padding:10px 8px}.scorebox .dash{font-weight:900;color:var(--muted);line-height:44px}.score-win{background:#16a34a1f!important;border-color:#16a34a59!important;color:var(--success)!important}.score-lose{background:#dc35451a!important;border-color:#dc354559!important;color:var(--danger)!important}.bonus-tag{font-size:.72rem;font-weight:900;padding:4px 7px;border-radius:999px;border:1px solid var(--border);background:#f8fafc;color:var(--muted);line-height:1;-webkit-user-select:none;user-select:none;white-space:nowrap}.bonus-tag.bo{background:#0f78d61a;border-color:#0f78d640;color:var(--primary)}.bonus-tag.bd{background:#16a34a1a;border-color:#16a34a40;color:var(--success)}.bonus-tag .sub{font-size:.86em;vertical-align:baseline}.match-actions{display:flex;gap:10px}.match-actions .btn-form{width:100%;padding:12px 14px;border-radius:12px}.locked{opacity:.98}.locked input{background:#f8fafc}.locked input.score-win{background:#16a34a1f!important;color:var(--success)!important}.locked input.score-lose{background:#dc35451a!important;color:var(--danger)!important}.table-wrap{width:100%;overflow:hidden;border-radius:12px;border:1px solid var(--border);background:#fff}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{padding:8px 6px;text-align:center;border-bottom:1px solid var(--border);font-weight:700;white-space:nowrap;font-size:.92rem}th{background:#f1f7ff;color:var(--primary);font-weight:900;font-size:.9rem}td.name{text-align:left;font-weight:900;overflow:hidden;text-overflow:ellipsis}tr:last-child td{border-bottom:none}.pos{font-weight:900;width:34px}tr.podium-1 td{background:#ffd70029}tr.podium-2 td{background:#c0c0c02e}tr.podium-3 td{background:#cd7f322e}.overlay{position:fixed;inset:0;background:#0206177a;display:none;z-index:60}.drawer{position:fixed;top:0;right:0;height:100%;width:min(86vw,340px);background:#fff;border-left:1px solid var(--border);box-shadow:var(--shadow2);transform:translate(110%);transition:var(--t);z-index:70;display:flex;flex-direction:column}.drawer.open{transform:translate(0)}.overlay.open{display:block}.drawer-head{padding:14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}.drawer-head strong{font-size:1.05rem}.drawer-body{padding:10px;display:flex;flex-direction:column;gap:6px}.menu-item{width:100%;text-align:left;padding:12px;border-radius:12px;border:1px solid transparent;background:#fff;cursor:pointer;font-weight:900;transition:var(--t);display:flex;align-items:center;justify-content:space-between}.menu-item:hover{background:#f8fafc;border-color:#eef2f7}.menu-item.danger{color:var(--danger)}.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:80}.modal.open{display:flex}.modal .modal-card{width:min(92vw,560px);background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow2);overflow:hidden}.modal-header{padding:14px 16px;background:#f8fafc;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}.modal-header strong{font-size:1.05rem}.modal-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}.modal-actions{display:flex;gap:10px;flex-wrap:wrap}.modal-actions .btn-form{flex:1;min-width:180px}.edit-match-card{border:1px solid var(--border);border-radius:14px;padding:12px;background:#fff;box-shadow:0 8px 18px #0f172a0f;display:flex;flex-direction:column;gap:10px}.edit-match-top{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}.edit-match-top .team{justify-content:center;text-align:center}.edit-actions{display:flex;gap:10px;flex-wrap:wrap}.edit-actions .btn-form{flex:1;min-width:160px}@media(max-width:820px){.matches-wrap{grid-template-columns:1fr}.topbar-inner{padding:10px 12px}.brand img{width:52px;height:52px}.brand .title{font-size:1.05rem}.btn-form{padding:12px}input,select{width:100%}.row{gap:8px}.scorebox input{width:50px}.score-side{min-width:50px}.scorebox .dash{line-height:42px}}@media(max-width:420px){.brand img{width:50px;height:50px}.brand .title{font-size:1rem}.icon-btn{width:40px;height:40px}.scorebox input{width:48px;padding:10px 6px}.score-side{min-width:48px}th,td{padding:7px 5px;font-size:.88rem}.bonus-tag{padding:3px 6px}.scorebox .dash{line-height:42px}}