/* FORMSHARTBANDI — offline-safe CSS foundation; see assets-src/tailwind.css */
:root{color-scheme:dark;--bg:#0b1726;--panel:#15283d;--panel2:#1b344a;--green:#12c9a4;--txt:#f4f8fd;--muted:#abc0d0;--border:#2b4256}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--bg);color:var(--txt);font-family:Vazirmatn,Tahoma,Arial,sans-serif;line-height:1.9}a{color:inherit;text-decoration:none}button{font:inherit}svg{display:block}a:focus-visible,button:focus-visible{outline:3px solid var(--green);outline-offset:3px}::selection{background:var(--green);color:#0a2021}
.container{width:min(calc(100% - 44px),1160px);margin-inline:auto}.skip-link{position:absolute;top:-100px;right:16px;z-index:900;background:var(--green);color:#021c17;border-radius:8px;padding:8px 12px}.skip-link:focus{top:12px}
.site-header{position:relative;z-index:10;background:#0d1a2a;border-bottom:1px solid #25374a}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:83px}.brand{display:inline-flex;align-items:center;gap:11px;white-space:nowrap}.brand-icon{width:45px;height:45px;display:grid;place-items:center;flex:none;background:var(--green);color:#032921;border-radius:14px;box-shadow:0 6px 25px #12c9a420}.brand-type{display:flex;flex-direction:column;line-height:1.5}.brand-type strong{font-size:18px;font-weight:900;letter-spacing:-.3px}.brand-type small{font:9px Arial,sans-serif;letter-spacing:1.1px;color:var(--muted);direction:ltr;text-align:right;margin-top:4px}.desktop-nav{display:flex;align-items:center;gap:26px;font-size:13px;font-weight:700;color:#afc0d0}.desktop-nav a:hover,.desktop-nav a.active{color:var(--green)}.header-actions{display:flex;align-items:center;gap:19px}.login-link{font-size:13px;font-weight:700}.login-link:hover{color:var(--green)}
.button{border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:45px;padding:10px 21px;border-radius:12px;white-space:nowrap;font-size:13px;font-weight:800;line-height:1.6;text-align:center;transition:background .2s,transform .2s}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--green);color:#05241c;box-shadow:0 8px 30px #12c9a425}.button-primary:hover{background:#4decc9}.button-outline{border-color:#3b5c6b;background:#172d43;color:#fff}.button-outline:hover{border-color:var(--green)}.button-lg{min-height:55px;padding-inline:24px;font-size:14px}.menu-button{display:none;justify-content:center;align-items:center;width:44px;height:44px;border:1px solid var(--border);background:var(--panel);color:var(--txt);border-radius:11px;cursor:pointer}.mobile-nav[hidden]{display:none!important}.mobile-nav{display:grid;gap:1px;background:#15273a;border-top:1px solid var(--border);padding:10px 22px 20px}.mobile-nav a{padding:10px 12px;border-radius:8px;font-size:13px}.mobile-nav a:hover{background:#254058}
.hero-section{position:relative;overflow:hidden;background:radial-gradient(ellipse 520px 460px at 80% 20%,#24415a26,transparent 75%),radial-gradient(ellipse 500px 460px at 8% 65%,#15d6a50c,transparent 80%)}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:67px;min-height:550px;align-items:center;padding-block:78px 85px}.eyebrow{display:inline-flex;gap:9px;align-items:center;border:1px solid #2a5554;background:#173637;color:#71ebc8;font-size:12px;font-weight:700;padding:6px 14px;border-radius:100px}.pulse-dot{width:7px;height:7px;background:var(--green);border-radius:100%;box-shadow:0 0 0 4px #12c9a42a}.hero-content h1{font-size:clamp(32px,4vw,53px);font-weight:900;line-height:1.52;letter-spacing:-1px;margin:20px 0}.gradient-text{display:block;color:var(--green)}.hero-description{font-size:15px;color:#c2d1de;line-height:2.3;max-width:540px;margin:0}.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:29px}.hero-perks{display:flex;gap:16px;flex-wrap:wrap;color:#a3bdc4;font-size:11px;font-weight:600;margin-top:27px}
.hero-preview{position:relative;max-width:520px;padding:15px 5px 23px}.preview-glow{position:absolute;inset:-6%;border-radius:100%;filter:blur(48px);background:#12c9a419;pointer-events:none}.preview-card{position:relative;transform:rotate(-1deg);border-radius:24px;border:1px solid #425971;background:linear-gradient(142deg,#203a51,#12243a);padding:22px;box-shadow:0 25px 70px #030e1bb0}.preview-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.preview-top strong{font-size:16px}.preview-brow{color:#b1c1d2;font-size:11px}.demo-pill{font-size:10px;padding:5px 9px;background:#315346;color:#cdffe9;border-radius:7px;border:1px solid #4d8270;white-space:nowrap}.preview-match{background:#132b42;border:1px solid #314d63;border-radius:14px;margin-bottom:11px;padding:14px 10px}.preview-teams{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:12px;font-weight:700}.team-dot{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#2a5578;color:#fff;font-family:Arial,sans-serif;flex:none}.team-dot-b{background:#62434b}.team-dot-c{background:#34644f}.team-dot-d{background:#645536}.vs{font:900 10px Arial,sans-serif;color:var(--green)}.pick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}.pick-row span{background:#27465b;color:#c1cedd;font-size:10px;text-align:center;border:1px solid transparent;border-radius:7px;padding:6px 2px}.pick-row .pick-selected{color:#aaffdc;background:#135046;border-color:var(--green);font-weight:800}.preview-summary{display:flex;justify-content:space-between;align-items:center}.preview-summary>div{display:flex;flex-direction:column}.summary-label{color:#b2c6d5;font-size:11px}.preview-summary strong{font-size:14px}.preview-check{width:34px;height:34px;border-radius:10px;background:var(--green);color:#073322;display:grid;place-items:center;font-weight:900}.floating-label{position:absolute;bottom:0;left:-17px;background:#eafff5;box-shadow:0 15px 50px #0008;border-radius:11px;padding:10px 14px;display:flex;align-items:center;gap:8px;color:#123b30;font-size:11px;font-weight:800;transform:rotate(2deg)}.floating-check{display:grid;place-items:center;width:23px;height:23px;background:var(--green);border-radius:50%}
.feature-strip{background:#102238;border-block:1px solid #273b4e}.feature-strip-inner{display:grid;grid-template-columns:repeat(3,1fr);padding-block:22px}.feature-strip-inner>div{display:flex;align-items:center;justify-content:center;gap:15px;padding:3px 13px}.feature-strip-inner>div:not(:last-child){border-left:1px solid #34475a}.feature-strip-inner strong,.feature-strip-inner small{display:block}.feature-strip-inner strong{font-size:14px}.feature-strip-inner small{font-size:11px;color:var(--muted)}.feature-icon{width:44px;height:44px;flex:none;display:grid;place-items:center;font-size:23px;font-weight:900;border-radius:12px;background:#18463d;color:var(--green)}
.section-space{padding-block:79px}.section-muted{background:#112136;border-block:1px solid #21394b}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:26px}.section-kicker{font-size:12px;font-weight:800;color:var(--green)}.section-heading h2,.cta-band h2{font-size:clamp(23px,2.5vw,30px);font-weight:900;line-height:1.5;letter-spacing:-.5px;margin:5px 0}.section-heading p,.cta-band p{font-size:13px;color:#a8bed1;margin:0;line-height:2}.text-link{font-size:12px;font-weight:800;color:var(--green);white-space:nowrap}.text-link:hover{text-decoration:underline}.demo-warning{display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid #615e3f;border-radius:11px;background:#333324;color:#f8dca3;font-size:12px;margin-bottom:18px}.demo-warning>span{font-size:18px}.match-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.match-card{background:linear-gradient(144deg,#192f45,#132539);border:1px solid #30495e;border-radius:17px;padding:20px;transition:transform .2s,border-color .2s}.match-card:hover{transform:translateY(-3px);border-color:#3c8f7a}.match-card-top{display:flex;justify-content:space-between;gap:12px;align-items:center}.league-badge{font-size:11px;background:#2a4458;border-radius:7px;padding:4px 10px}.match-status{font-size:11px;color:#b4c9d8}.match-card-teams{display:grid;grid-template-columns:1fr 46px 1fr;place-items:center;gap:10px;text-align:center;padding:26px 0}.match-card-teams>div{display:grid;justify-items:center;gap:10px;font-size:13px}.club-placeholder{width:50px;height:50px;display:grid;place-items:center;border-radius:100%;font:900 15px Arial,sans-serif;background:#235679;border:2px solid #608eaa}.club-placeholder.second{background:#674044;border-color:#986369}.club-placeholder.third{background:#236453;border-color:#67a18b}.club-placeholder.fourth{background:#68583d;border-color:#9c855d}.match-vs{color:#b6ccdb;font:900 14px Arial,sans-serif}.match-card-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:13px;border-top:1px solid #294457;color:#bfd2df;font-size:12px}.match-options{color:var(--green);font:800 14px Arial,sans-serif;direction:ltr}.match-options b{color:#728e9f;font-weight:400}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step-card{position:relative;background:linear-gradient(144deg,#192f45,#12283c);border:1px solid #294357;border-radius:17px;padding:24px}.step-number{position:absolute;left:23px;top:16px;font:900 26px Arial,sans-serif;color:#31515a}.step-icon{display:grid;place-items:center;width:52px;height:52px;background:#194642;color:var(--green);border-radius:14px;font-size:24px;margin-bottom:22px}.step-card h3{font-size:16px;margin:0 0 8px}.step-card p{font-size:12px;color:#b5c9d8;line-height:2.1;margin:0}.cta-band{display:flex;align-items:center;justify-content:space-between;gap:25px;border-radius:21px;border:1px solid #3a655d;padding:36px 43px;background:radial-gradient(ellipse at 0% 40%,#2a5443 0,transparent 48%),linear-gradient(125deg,#163b43,#173149)}.cta-band p{color:#c2d8dc}
.inner-page{min-height:calc(100vh - 340px);padding-block:76px 95px}.placeholder-panel{max-width:700px;margin-inline:auto;text-align:center;border:1px solid #32536a;background:linear-gradient(150deg,#1a3548,#102238);border-radius:22px;padding:49px 39px}.placeholder-icon{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 20px;background:#1c4d46;color:var(--green);font-size:29px;border-radius:20px}.placeholder-panel h1{font-size:clamp(25px,3vw,34px);margin:16px 0 10px}.placeholder-panel p{font-size:14px;color:#c4d2e0;line-height:2.15;margin:0 auto;max-width:520px}.placeholder-note{border-radius:11px;border:1px solid #5c6144;background:#32382c;color:#f3dcaa;font-size:12px;padding:12px;margin-top:25px}.placeholder-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:24px}.error-code{color:var(--green);font:900 77px Arial,sans-serif}
.site-footer{background:#0a1421;border-top:1px solid #293a4e}.footer-top{display:flex;justify-content:space-between;gap:35px;padding-block:43px 33px}.footer-brand{max-width:400px}.footer-brand p{font-size:12px;line-height:2.3;color:#92acc0}.footer-brand-title{font-size:18px}.footer-links{display:grid;grid-template-columns:repeat(2,auto);gap:10px 28px;align-content:start;font-size:12px;color:#b1c4d3}.footer-links a:hover{color:var(--green)}.footer-bottom{border-top:1px solid #203247;display:flex;justify-content:space-between;align-items:center;gap:15px;padding-block:15px;font-size:10px;color:#8da7ba}
@media(max-width:1100px){.desktop-nav{gap:15px}.header-actions{gap:13px}.hero-grid{gap:35px}}
@media(max-width:980px){.desktop-nav,.login-link,.header-create{display:none}.menu-button{display:flex}.hero-grid{grid-template-columns:1fr;max-width:720px;gap:40px;padding-block:56px 66px;text-align:center}.hero-content h1,.hero-description{margin-inline:auto}.hero-actions,.hero-perks{justify-content:center}.hero-preview{margin-inline:auto;width:100%;max-width:480px}.floating-label{left:-5px}}
@media(max-width:700px){.container{width:min(calc(100% - 30px),1160px)}.header-inner{min-height:72px}.brand-icon{width:40px;height:40px}.brand-type strong{font-size:15px}.brand-type small{font-size:8px}.hero-grid{padding-block:43px 54px}.hero-content h1{font-size:33px}.hero-description{font-size:13px}.hero-actions .button{flex:1;min-width:190px}.hero-perks{gap:9px 15px;font-size:10px}.preview-card{padding:14px}.preview-match{padding:12px 8px}.preview-teams{font-size:10px}.team-dot{width:26px;height:26px}.floating-label{font-size:10px;left:0}.feature-strip-inner{grid-template-columns:1fr;padding-block:8px}.feature-strip-inner>div{justify-content:flex-start;padding:12px}.feature-strip-inner>div:not(:last-child){border-left:0;border-bottom:1px solid #34475a}.section-space{padding-block:54px}.section-heading{align-items:start}.section-heading h2{font-size:24px}.section-heading p{font-size:12px}.text-link{font-size:11px}.match-grid,.steps-grid{grid-template-columns:1fr}.cta-band{padding:26px 22px;align-items:stretch;flex-direction:column}.inner-page{padding-block:45px 65px}.placeholder-panel{padding:33px 17px}.footer-top{flex-direction:column;padding-block:32px 25px}.footer-bottom{flex-direction:column;align-items:start;gap:2px}}
@media(max-width:375px){.hero-actions .button{min-width:100%}.preview-teams{gap:3px}.team-dot{width:22px;height:22px;font-size:10px}.pick-row span{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Stage 2: read-only football fixture views */
.match-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-block:18px 25px}.match-leagues{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}.league-filter{background:#243d50;color:#d7e6eb;border:1px solid #35596c;border-radius:999px;padding:8px 13px;font-size:12px}.league-filter:hover,.league-filter.selected{border-color:#12c9a4;color:#12c9a4}.empty-matches{background:#172b40;border:1px solid #345268;border-radius:16px;padding:38px 22px;text-align:center}.empty-matches p{color:#b2c8d8;font-size:13px}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap}.pagination span{font-size:13px;color:#c6dce8}.match-detail{margin-top:20px;border:1px solid #32566a;background:#142a40;border-radius:18px;text-align:center;padding:44px 18px}.match-detail h1{font-size:clamp(23px,3vw,36px);margin:24px auto}.match-detail p{color:#bfd4e2;line-height:2}.match-detail-vs{color:#12c9a4}.match-detail-score{display:block;font:900 45px Arial,sans-serif;color:#12c9a4}.match-detail-note{font-size:12px;margin-top:28px}