:root { --bg:#050a12; --surface:#0d1521; --surface-2:#171c24; --line:#263141; --text:#f6f8fb; --muted:#93a1b5; --blue:#23a9ec; --blue-2:#158bd6; }
* { box-sizing:border-box; }
html { color-scheme:dark; background:var(--bg); }
body { margin:0; min-height:100vh; min-height:100dvh; overflow-x:hidden; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--text); background:radial-gradient(circle at 50% -10%,#122440 0,transparent 34%),var(--bg); }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
.app-shell { width:min(100%,720px); min-height:100vh; margin:auto; padding-bottom:48px; }
.topbar { height:76px; display:grid; grid-template-columns:48px 1fr 48px; align-items:center; padding:env(safe-area-inset-top) max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left)); border-bottom:1px solid rgba(255,255,255,.07); background:rgba(7,15,27,.88); backdrop-filter:blur(16px); position:sticky; top:0; z-index:5; }
.brand { text-decoration:none; color:var(--text); font-size:21px; font-weight:800; letter-spacing:-.5px; text-align:center; }.brand span{color:var(--blue)}
.icon-button,.close-button { display:grid; place-items:center; border:0; color:white; background:transparent; cursor:pointer; }
.icon-button svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; }.icon-button circle{fill:currentColor;stroke:none}
.tabs { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); padding:0 16px; }
.tab { position:relative; padding:19px 6px 16px; border:0; color:#77859a; background:transparent; font-weight:700; cursor:pointer; }.tab.active{color:var(--blue)}.tab.active:after{content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:3px;background:var(--blue);border-radius:5px}
main { padding:26px 18px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:18px; }.section-heading p{margin:0 0 3px;color:var(--blue);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.3px}.section-heading h1{font-size:26px;margin:0;letter-spacing:-.7px}.live-count{font-size:12px;color:#b9c2d0;font-weight:700}.live-count i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff4158;box-shadow:0 0 0 5px rgba(255,65,88,.12);margin-right:7px}
.match-list { display:grid; gap:14px; }
.match-card { background:linear-gradient(145deg,rgba(17,28,43,.96),rgba(10,17,27,.98)); border:1px solid #1d2b3e; border-radius:20px; padding:17px; box-shadow:0 14px 35px rgba(0,0,0,.18); }
.league-row { display:flex; justify-content:space-between; gap:10px; color:#8795a9; font-size:12px; }.league-row strong{color:#ff6576}.league-row time{color:#aab5c5}
.teams { display:grid; grid-template-columns:1fr 90px 1fr; align-items:center; gap:8px; padding:22px 0 18px; }.team{display:grid;justify-items:center;gap:9px;text-align:center;font-size:13px}.team b{font-weight:700}.crest{width:49px;height:55px;display:grid;place-items:center;clip-path:polygon(50% 0,92% 16%,83% 77%,50% 100%,17% 77%,8% 16%);font-weight:900;font-size:12px;border:2px solid rgba(255,255,255,.13)}.red{background:#6f1426}.blue{background:#133e74}.violet{background:#443071}.coral{background:#8c3537}.gold{background:#7c5815}.green{background:#24533e}
.score{text-align:center;display:grid;gap:4px}.score strong{font-size:25px;letter-spacing:2px}.score em{font-style:normal;color:#56647a}.score small{font-size:11px;color:var(--blue)}.score .versus{font-size:15px;color:#718099}
.watch-btn { width:100%; border:1px solid #263851; border-radius:12px; padding:12px; color:#cbd7e7; background:#111d2c; font-weight:750; cursor:pointer; }.watch-btn:hover{border-color:var(--blue);color:white}
.match-card[hidden]{display:none}
.modal-layer { position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; overflow-y:auto; padding:max(22px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left)); transition:opacity .22s ease,visibility .22s ease; }.modal-layer.closed{opacity:0;visibility:hidden;pointer-events:none}.modal-backdrop{position:fixed;inset:0;background:rgba(0,4,10,.82);backdrop-filter:blur(6px)}
.channel-modal { position:relative; width:min(100%,520px); padding:42px 28px 30px; text-align:center; border:1px solid rgba(255,255,255,.13); border-radius:24px; background:linear-gradient(145deg,#202229,#17191e); box-shadow:0 28px 90px #000; animation:modalIn .4s cubic-bezier(.2,.8,.2,1); }
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.close-button{position:absolute;right:17px;top:17px;width:38px;height:38px;border-radius:50%;color:#aeb6c1}.close-button:hover{background:#2a2e36;color:white}.close-button svg{width:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.telegram-mark { width:84px;height:84px;margin:0 auto 24px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#35baf3,#1798df);box-shadow:0 12px 28px rgba(35,169,236,.28)}.telegram-mark svg{width:49px;height:49px;fill:white}
.channel-modal h2{font-size:clamp(27px,7vw,37px);line-height:1.08;margin:0 0 14px;letter-spacing:-1.2px}.channel-modal p{max-width:400px;margin:0 auto 29px;color:#aeb9ca;line-height:1.55;font-size:16px}
.modal-actions{display:grid;gap:12px}.primary-button,.secondary-button{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:13px;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer}.primary-button{color:white;background:linear-gradient(100deg,var(--blue),#20a2e5);box-shadow:0 10px 24px rgba(35,169,236,.17)}.primary-button:hover{background:#35b8f4}.secondary-button{color:#d7deea;background:transparent;border:1px solid #4a4e57}.secondary-button:hover{border-color:#707783;background:#22252c}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:30;width:max-content;max-width:calc(100vw - 32px);transform:translate(-50%,30px);opacity:0;background:#e9f7ff;color:#06111c;border-radius:12px;padding:12px 17px;font-size:13px;font-weight:750;box-shadow:0 12px 35px #000;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:420px){.topbar{height:68px}.channel-modal{padding:38px 20px 22px;border-radius:21px}.telegram-mark{width:76px;height:76px;margin-bottom:21px}.channel-modal p{font-size:15px}.teams{grid-template-columns:1fr 76px 1fr}.match-card{padding:15px}.brand{font-size:19px}.tab{font-size:14px}}
@media(max-height:560px){.modal-layer{align-items:flex-start;padding-top:12px;padding-bottom:12px}.channel-modal{margin:auto;padding:18px 18px 16px;border-radius:18px}.close-button{right:9px;top:9px}.telegram-mark{width:54px;height:54px;margin-bottom:10px}.telegram-mark svg{width:32px;height:32px}.channel-modal h2{font-size:24px;margin-bottom:7px}.channel-modal p{margin-bottom:12px;font-size:14px;line-height:1.35}.modal-actions{grid-template-columns:1fr 1fr;gap:8px}.primary-button,.secondary-button{min-height:44px;font-size:14px;padding:5px 10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}