:root {
  --ink: #07111f;
  --ink-soft: #0d1c2e;
  --ink-card: #102337;
  --blue: #1685ff;
  --blue-bright: #49a3ff;
  --green: #8cf04a;
  --teal: #21d5ba;
  --paper: #f5f8fb;
  --muted: #7890a6;
  --line: rgba(117, 151, 180, .2);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: #f3f8fc; font-family: "DM Sans", sans-serif; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.site-noise { position: fixed; inset: 0; pointer-events: none; opacity: .04; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); }
.site-header { background: rgba(7,17,31,.83); border-bottom: 1px solid rgba(255,255,255,.06); position: relative; z-index: 21; }
.navbar { min-height: 78px; }
.brand-logo { width: 40px; height: 40px; object-fit: contain; }
.brand-wordmark { font-family: "Space Grotesk", sans-serif; letter-spacing: .14em; font-weight: 700; font-size: .9rem; }
.nav-link { color: #9eb0c2; font-size: .91rem; padding: .6rem .85rem!important; }
.nav-link:hover, .nav-link.active { color: #fff; }
.btn { border-radius: 12px; padding: .78rem 1.12rem; font-weight: 700; border: 0; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(120deg, var(--blue), #48b1f5); color: white; box-shadow: 0 10px 26px rgba(22,133,255,.2); }
.btn-primary:hover { background: linear-gradient(120deg, #3a9bff, #68c2fb); color: white; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-light { color: var(--ink); background: #f1f8fb; }
.btn-ghost { color: #d4e1eb; background: rgba(255,255,255,.06); }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: white; }
.user-pill { display: inline-flex; gap: .55rem; align-items: center; color: #d5e4ef; font-size: .9rem; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: var(--ink); font-weight: 800; font-size: .8rem; }
.hero { position: relative; overflow: hidden; padding: 6.5rem 0 7.2rem; background: radial-gradient(circle at 72% 12%, rgba(16,117,255,.18), transparent 28%), linear-gradient(150deg, #07111f 0%, #091a2c 100%); }
.hero:after { content: ""; position: absolute; width: 45%; height: 1px; right: -8%; bottom: 20%; background: linear-gradient(90deg, transparent, rgba(140,240,74,.5)); transform: rotate(-23deg); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .35; }
.hero-orb-blue { width: 250px; height: 250px; background: #0a75ff; right: -90px; top: 13%; filter: blur(100px); }
.hero-orb-green { width: 180px; height: 180px; background: #56ee88; left: 38%; bottom: -150px; filter: blur(100px); }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: var(--green); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 5px rgba(140,240,74,.12); }
.eyebrow-dark { color: #55809e; }
h1, h2, h3 { font-family: "Space Grotesk", sans-serif; line-height: 1.06; letter-spacing: -.045em; }
h1 { font-size: clamp(3.7rem, 7.5vw, 7rem); margin: 1.3rem 0 1.6rem; }
h2 { font-size: clamp(2.4rem, 5vw, 4.3rem); margin: .7rem 0; }
h3 { letter-spacing: -.03em; }
.text-gradient { background: linear-gradient(100deg, #fff 5%, var(--blue-bright) 46%, var(--green) 100%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.hero-lede { color: #abc0d1; max-width: 500px; font-size: 1.12rem; margin-bottom: 2rem; }
.search-panel { display: flex; align-items: center; gap: .8rem; max-width: 730px; padding: .65rem; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); border-radius: 18px; backdrop-filter: blur(15px); }
.search-field { display: grid; grid-template-columns: 23px auto; column-gap: .5rem; flex: 1; min-width: 0; }
.search-field i { grid-row: span 2; color: var(--green); padding-top: .4rem; }
.search-field label { color: #87a3ba; font-size: .7rem; }
.search-field select { appearance: none; border: 0; outline: 0; color: #f4f8fc; font-weight: 600; background: transparent; width: 100%; padding: .15rem 0; }
.search-field option { color: var(--ink); }
.search-divider { height: 35px; width: 1px; background: rgba(255,255,255,.17); }
.search-submit { padding: 1rem 1.2rem; white-space: nowrap; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.6rem; color: #7f9bb2; font-size: .8rem; }
.hero-trust i { color: var(--green); margin-right: .3rem; }
.hero-visual { min-height: 460px; position: relative; display: grid; place-items: center; }
.visual-card { border: 1px solid rgba(255,255,255,.15); border-radius: 25px; background: linear-gradient(145deg, rgba(22,57,82,.9), rgba(5,19,32,.97)); box-shadow: 25px 30px 80px rgba(0,0,0,.25); }
.visual-card-main { width: min(100%, 335px); padding: 1.25rem; transform: rotate(5deg); position: relative; z-index: 2; }
.visual-topline { font-size: .62rem; letter-spacing: .16em; color: var(--green); font-weight: 800; }
.live-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--green); margin-right: .35rem; }
.court-art { height: 280px; margin: 1rem 0; border-radius: 18px; position: relative; overflow: hidden; background: linear-gradient(145deg, #0e7891, #064b68 57%, #07526b); }
.court-art:before { content: ""; position: absolute; inset: 10% 12%; border: 2px solid rgba(168,242,245,.6); border-radius: 6px; transform: skewY(-7deg); }
.court-line { position: absolute; width: 120%; left: -10%; height: 2px; background: rgba(168,242,245,.5); transform: rotate(-7deg); top: 50%; }
.court-line-two { transform: rotate(83deg); width: 75%; left: 11%; }
.court-circle { position: absolute; width: 85px; height: 85px; border: 2px solid rgba(168,242,245,.58); border-radius: 50%; top: calc(50% - 42px); left: calc(50% - 42px); }
.court-player { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 8px rgba(140,240,74,.15); }
.court-player-one { top: 35%; left: 24%; } .court-player-two { bottom: 27%; right: 23%; background: #fff; box-shadow: 0 0 0 8px rgba(255,255,255,.12); }
.visual-caption { display: flex; justify-content: space-between; align-items: center; }.visual-caption strong,.visual-caption small { display: block; }.visual-caption small { color: #809bb0; margin-top: .2rem; font-size: .75rem; }.visual-caption i { color: var(--green); font-size: 1.35rem; }
.floating-stat { position: absolute; z-index: 3; display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem; background: rgba(255,255,255,.94); color: var(--ink); border-radius: 14px; box-shadow: 0 15px 30px rgba(0,0,0,.15); }.floating-stat strong { display: block; color: #0f82df; font-family: "Space Grotesk"; font-size: 1.6rem; line-height: 1; }.floating-stat span { font-size: .72rem; line-height: 1.2; }.floating-stat-top { top: 42px; right: -10px; transform: rotate(-7deg); }.floating-stat-bottom { bottom: 30px; left: -20px; transform: rotate(-6deg); }.floating-stat-bottom i { font-size: 1.5rem; color: #0d83e4; }.floating-stat-bottom small { display: block; color: #7290a6; }
.section-space { padding: 6.5rem 0; }.section-light { background: var(--paper); color: var(--ink); }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.6rem; }.section-note { max-width: 320px; color: #668197; margin: 0; }.text-link { color: var(--blue); font-weight: 700; }.sport-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }.sport-tile { min-height: 170px; background: #fff; border-radius: 18px; padding: 1.25rem; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; border: 1px solid rgba(16,47,71,.06); }.sport-tile:hover { transform: translateY(-5px); box-shadow: 0 18px 35px rgba(16,47,71,.12); }.sport-tile > i { color: #1685ff; font-size: 2rem; margin: 1.1rem 0 .65rem; }.sport-tile strong { font-family: "Space Grotesk"; font-size: 1.05rem; }.sport-tile small { color: #7892a4; font-size: .75rem; }.sport-number { position: absolute; top: 1.1rem; right: 1.1rem; color: #b4c4cf; font-size: .68rem; font-weight: 700; }.tile-arrow { position: absolute; right: 1.15rem; bottom: 1rem; color: #a9bbc9; }.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }.step-card { border-top: 1px solid var(--line); padding-top: 1.4rem; }.step-card > span { color: var(--green); font-family: "Space Grotesk"; font-size: .8rem; }.step-card h3 { margin: 2.8rem 0 .7rem; font-size: 1.7rem; }.step-card p { color: #89a3b9; max-width: 250px; }.cta-band { padding: 5rem 0; background: linear-gradient(115deg, #1685ff, #063f83 58%, #07544c); }.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }.cta-band h2 { margin-top: .7rem; }.site-footer { background: #040c16; padding: 4rem 0 1.3rem; }.footer-top { display: flex; justify-content: space-between; gap: 3rem; }.footer-copy { color: #8098aa; font-size: .9rem; }.footer-links { display: flex; gap: 5rem; }.footer-links div { display: flex; flex-direction: column; gap: .45rem; }.footer-links a { color: #8fa6b8; font-size: .83rem; }.footer-links a:hover { color: var(--green); }.footer-label { color: #fff; font-weight: 700; font-size: .74rem; margin-bottom: .45rem; }.footer-bottom { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.08); margin-top: 3.5rem; padding-top: 1.2rem; color: #597184; font-size: .73rem; }.mobile-bottom-nav { position: fixed; z-index: 30; bottom: 0; left: 0; right: 0; background: rgba(5,15,26,.96); border-top: 1px solid rgba(255,255,255,.1); justify-content: space-around; padding: .55rem .4rem calc(.55rem + env(safe-area-inset-bottom)); }.mobile-bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: .15rem; color: #7e99ad; font-size: .62rem; }.mobile-bottom-nav i { font-size: 1.1rem; }.mobile-bottom-nav a:hover { color: var(--green); }
.page-hero { padding: 5rem 0 4.5rem; background: radial-gradient(circle at 78% 20%, rgba(26,135,255,.18), transparent 30%), #07111f; }.page-hero h1 { font-size: clamp(3.5rem, 8vw, 6rem); margin: 1rem 0; }.page-hero p { color: #9bb1c2; font-size: 1.1rem; }.filter-bar { background: #fff; border-radius: 15px; padding: .65rem; display: flex; gap: .7rem; margin-bottom: 2rem; box-shadow: 0 10px 30px rgba(20,46,70,.05); }.filter-bar select { flex: 1; border: 1px solid #dbe5ea; background: #fff; border-radius: 9px; padding: .7rem; color: #38536a; }.ground-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }.ground-card { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #e8eef2; }.ground-image { height: 180px; background: linear-gradient(140deg, #073957, #0c7380); position: relative; }.ground-placeholder { display: grid; place-items: center; height: 100%; color: rgba(255,255,255,.45); font-size: 3rem; }.ground-badge { position: absolute; top: 1rem; left: 1rem; background: var(--green); color: var(--ink); padding: .3rem .6rem; border-radius: 20px; font-size: .68rem; font-weight: 800; }.ground-body { color: var(--ink); padding: 1.2rem; }.ground-body h3 { font-size: 1.25rem; margin: 0 0 .25rem; }.ground-body p { color: #7a91a0; font-size: .78rem; margin: 0; }.ground-body p i { color: var(--blue); }.rating { font-weight: 700; font-size: .8rem; color: #38536a; }.rating i { color: #ffbf42; }
.empty-state { max-width: 580px; margin: 3rem auto; padding: 4rem 1rem; color: var(--ink); }.empty-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 1.3rem; color: var(--blue); background: #e4f1fc; font-size: 1.7rem; }.empty-state h2,.empty-state h1 { font-size: 2.4rem; }.empty-state p { color: #718798; margin: 0 auto 1.5rem; max-width: 450px; }
.auth-shell { min-height: calc(100vh - 78px); display: grid; grid-template-columns: 1fr 1fr; }.auth-panel { padding: 3.2rem clamp(1.5rem, 7vw, 7rem); max-width: 670px; justify-self: end; width: 100%; }.auth-brand { display: inline-flex; align-items: center; gap: .6rem; font-family: "Space Grotesk"; font-weight: 700; letter-spacing: .12em; font-size: .84rem; }.auth-brand img { width: 36px; height: 36px; object-fit: contain; }.auth-copy { margin: 4rem 0 2.5rem; }.auth-copy h1 { font-size: clamp(3.5rem, 6vw, 5.8rem); margin: 1.2rem 0; }.auth-copy p { color: #91a9bb; }.auth-form { display: flex; flex-direction: column; gap: .55rem; }.auth-form label { color: #9eb3c3; font-size: .77rem; margin-top: .6rem; }.auth-form input:not([type="checkbox"]),.auth-form select { width: 100%; border: 1px solid rgba(151,181,205,.25); border-radius: 10px; background: rgba(255,255,255,.05); color: #f5fbff; padding: .8rem .9rem; outline: none; }.auth-form input:focus,.auth-form select:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(22,133,255,.15); }.auth-form select option { color: var(--ink); }.form-row-inline { display: flex; justify-content: space-between; align-items: center; margin: .7rem 0; font-size: .78rem; }.form-row-inline a,.auth-switch a { color: var(--green); }.check-label { display: inline-flex; gap: .4rem; align-items: center; margin: 0!important; }.auth-switch { color: #849dae; text-align: center; font-size: .83rem; margin-top: 1.5rem; }.auth-foot { color: #5e7789; font-size: .7rem; margin-top: 4rem; }.auth-foot i { color: var(--green); margin-right: .25rem; }.auth-art { overflow: hidden; position: relative; display: flex; align-items: flex-end; padding: 5rem; background: linear-gradient(140deg, #0d6a79, #104e89 52%, #062344); }.auth-art:before,.auth-art:after { content: ""; position: absolute; width: 100%; height: 1px; background: rgba(140,240,74,.35); transform: rotate(-32deg); left: 0; top: 50%; }.auth-art:after { transform: rotate(32deg); }.auth-art-copy { position: relative; z-index: 2; }.auth-art-copy > span { color: var(--green); font: 700 .75rem "Space Grotesk"; letter-spacing: .17em; }.auth-art-copy h2 { font-size: 4rem; margin: 1.2rem 0; }.auth-art-copy p { color: #a4d4db; }.auth-art-ball { position: absolute; width: 330px; height: 330px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); right: 11%; top: 16%; box-shadow: 0 0 0 35px rgba(140,240,74,.05), 0 0 0 90px rgba(22,133,255,.06); }
.workspace-shell { min-height: calc(100vh - 78px); background: var(--paper); color: var(--ink); padding: 4.5rem 0 7rem; }.workspace-top { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 3rem; }.workspace-top h1 { font-size: clamp(2.7rem, 5vw, 4.5rem); margin: .8rem 0; }.workspace-top p { color: #7890a1; }.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 1rem; }.metric-card { padding: 1.5rem; border-radius: 18px; background: #fff; border: 1px solid #e5edf1; }.metric-card span { color: #7790a3; display: block; font-size: .78rem; }.metric-card strong { font: 700 2.5rem "Space Grotesk"; display: block; margin: .5rem 0; }.metric-card small { color: #8198a8; font-size: .72rem; }.metric-card small i { color: #41bc72; }.metric-accent { background: #09243c; color: #fff; border-color: transparent; }.metric-accent span,.metric-accent small { color: #9eb4c4; }.workspace-card { background: #fff; border: 1px solid #e5edf1; border-radius: 20px; padding: 1.6rem; }.card-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }.card-heading h2 { font-size: 1.7rem; }.booking-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 1px solid #edf1f3; }.booking-date { min-width: 42px; text-align: center; border-radius: 10px; background: #eef7fc; padding: .35rem; }.booking-date strong,.booking-date span { display: block; }.booking-date strong { font: 700 1.3rem "Space Grotesk"; color: var(--blue); line-height: 1.1; }.booking-date span { color: #7190a6; text-transform: uppercase; font-size: .63rem; }.booking-info { flex: 1; }.booking-info strong,.booking-info span { display: block; }.booking-info strong { font-size: .91rem; }.booking-info span { color: #8198a8; font-size: .75rem; }.status-badge { border-radius: 30px; padding: .35rem .65rem; font-size: .7rem; font-weight: 700; }.status-success { background: #def8e5; color: #208449; }.status-warning { background: #fff1cc; color: #9a6c00; }.status-danger { background: #fee1e3; color: #b52d39; }.status-info { background: #e1f0fa; color: #2378a8; }.compact-empty { display: flex; align-items: center; gap: 1rem; border-top: 1px solid #edf1f3; padding-top: 1.5rem; }.compact-empty .empty-icon { flex: 0 0 auto; width: 48px; height: 48px; margin: 0; }.compact-empty h3 { font-size: 1rem; margin: 0; }.compact-empty p { color: #8299a8; font-size: .8rem; margin: .2rem 0 0; }.compact-empty .btn { margin-left: auto; }
.flash-wrap { position: relative; z-index: 22; padding-top: 1rem; }.alert { border: 0; border-radius: 12px; }.alert-success { color: #dff8e8; background: #174f38; }.alert-danger { color: #ffe9ea; background: #672730; }.alert-warning { color: #fff0c8; background: #644c15; }.is-loading { opacity: .7; pointer-events: none; }
@media (max-width: 991.98px) { .nav-actions { padding: .8rem 0; }.hero { padding: 4.5rem 0 5rem; }.hero-visual { min-height: 400px; }.sport-grid { grid-template-columns: repeat(2,1fr); }.ground-grid { grid-template-columns: repeat(2,1fr); }.auth-shell { grid-template-columns: 1fr; }.auth-art { display: none; }.auth-panel { justify-self: center; max-width: 620px; }.auth-copy { margin-top: 3.5rem; } }
@media (max-width: 575.98px) { .navbar { min-height: 68px; }.brand-logo { width: 34px; height: 34px; }.brand-wordmark { font-size: .78rem; }.hero { padding: 3.7rem 0 3.8rem; }.hero h1 { font-size: 3.7rem; }.search-panel { display: block; padding: 1rem; }.search-divider { height: 1px; width: 100%; margin: .65rem 0; }.search-field { margin: .35rem 0; }.search-submit { margin-top: .8rem; width: 100%; }.hero-trust { gap: .6rem .9rem; }.hero-trust span { font-size: .69rem; }.hero-visual { min-height: 340px; transform: scale(.86); margin: -1rem -2rem; }.section-space { padding: 4.3rem 0; }.section-heading,.cta-band .container,.footer-top,.workspace-top { display: block; }.section-heading .text-link { display: inline-block; margin-top: 1rem; }.sport-grid { gap: .7rem; }.sport-tile { min-height: 145px; padding: 1rem; }.sport-tile > i { margin-top: .8rem; }.steps-grid { grid-template-columns: 1fr; gap: 2rem; }.step-card h3 { margin-top: 1.3rem; }.cta-band .btn { margin-top: 1.5rem; }.footer-links { gap: 1.3rem; flex-wrap: wrap; margin-top: 2rem; }.footer-bottom { margin-bottom: 4rem; gap: .5rem; }.filter-bar { display: block; }.filter-bar select,.filter-bar .btn { width: 100%; margin-bottom: .55rem; }.ground-grid { grid-template-columns: 1fr; }.page-hero { padding: 3.5rem 0; }.workspace-shell { padding-top: 3rem; }.workspace-actions { margin-top: 1.4rem; }.metric-grid { grid-template-columns: 1fr; }.workspace-card { padding: 1rem; }.booking-row { gap: .6rem; }.status-badge { margin-left: auto; }.compact-empty { flex-wrap: wrap; }.compact-empty .btn { margin-left: 0; }.auth-panel { padding: 2rem 1.3rem 5rem; }.auth-copy { margin: 3.5rem 0 2rem; }.auth-copy h1 { font-size: 3.8rem; }.mobile-bottom-nav { display: flex!important; } }