/* CourtBook: shared styles for the booking page and the owner dashboard */
:root{
  --bg:#f2f5f9; --surface:#fbfcfd; --raise:#ffffff; --ink:#13213a; --muted:#56647d; --line:#d6dee9;
  --accent:#2257a8; --accent-ink:#ffffff; --accent-soft:#e3ebf7;
  --ball:#dbe84a; --ball-ink:#1d2410;
  --night:#13213a; --night-2:#1b2d4d; --night-ink:#f3f5f8; --night-muted:#aebbd2; --night-line:#2c3f63;
  --surface-covered:#2257a8; --surface-open:#2f7d5b;
  --ok:#1e7a4a; --ok-bg:#e1f3e8; --warn:#9a6500; --warn-bg:#fdf1d6; --bad:#b2343a; --bad-bg:#fbe3e4;
  --cell-open:#e6f3ea; --cell-open-ink:#1e5c38; --cell-dim:#e8ecf2; --cell-dim-ink:#8a95a8;
  --f-display:"Oswald","Arial Narrow",Impact,sans-serif;
  --f-body:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:14px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b1322; --surface:#111c31; --raise:#16233d; --ink:#e6ecf5; --muted:#9aa8c0; --line:#24324d;
  --accent-soft:#1a2b4a;
  --night:#0e1a2f; --night-2:#16253f; --night-line:#2a3c5e;
  --surface-covered:#2a5ca8; --surface-open:#2b6e52;
  --ok:#6fd39b; --ok-bg:#163526; --warn:#f0c062; --warn-bg:#3a2c0f; --bad:#f08a8f; --bad-bg:#3d1a1d;
  --cell-open:#15332a; --cell-open-ink:#8fe0b0; --cell-dim:#18233a; --cell-dim-ink:#5f6d86; color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1120px;margin:0 auto;padding-inline:16px}
h1,h2,h3{font-family:var(--f-display);font-weight:var(--display-weight,600);line-height:1.04;text-wrap:balance;margin:0;text-transform:var(--display-case,uppercase);letter-spacing:var(--display-track,.01em)}
h2{font-size:clamp(32px,5vw,48px)}
h3{font-size:26px}
p{margin:0}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
a{color:var(--accent)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ball);outline-offset:2px;border-radius:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:12px 22px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-ball{background:var(--ball);color:var(--ball-ink)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-night{background:transparent;border-color:var(--night-line);color:var(--night-ink)}
.btn-sm{padding:7px 14px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* header */
header.top{position:sticky;top:0;z-index:20;background:var(--night);color:var(--night-ink);border-bottom:1px solid var(--night-line);padding-top:env(safe-area-inset-top,0px)}
header.top .wrap{display:flex;align-items:center;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--night-ink);min-width:0}
.brand .mark{width:34px;height:34px;border-radius:50%;background:var(--ball);display:grid;place-items:center;flex:none}
.brand .name{font-family:var(--f-display);font-weight:var(--display-weight,600);font-size:21px;text-transform:var(--display-case,uppercase);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
nav.links{display:flex;gap:20px;margin-left:auto}
nav.links a{color:var(--night-muted);text-decoration:none;font-weight:500;font-size:14px}
nav.links a:hover{color:var(--night-ink)}
.top .actions{display:flex;gap:8px;margin-left:8px}
@media (max-width:860px){nav.links{display:none}.top .actions{margin-left:auto}}
@media (max-width:460px){#findBtnTop{display:none}}

/* page states */
.state-msg{max-width:560px;margin:64px auto;padding:28px;background:var(--raise);border:1px solid var(--line);border-radius:var(--r);text-align:center;display:grid;gap:10px}
.state-msg h2{font-size:32px}
.state-msg p{color:var(--muted)}

/* hero */
.hero{background:radial-gradient(120% 90% at 85% 10%,var(--night-2) 0%,var(--night) 60%);color:var(--night-ink);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(255,255,255,.035) 119px 120px);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;padding-block:56px 64px}
.hero .loc{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--night-muted);border:1px solid var(--night-line);border-radius:999px;padding:5px 12px}
.hero .loc i{width:8px;height:8px;border-radius:50%;background:var(--hl,var(--ball));display:inline-block}
.hero h1{font-size:clamp(44px,8vw,92px);margin-top:20px;font-weight:var(--display-weight-hero,700)}
.hero h1 .hl{color:var(--hl,var(--ball))}
.hero .lede{font-size:17px;color:var(--night-muted);max-width:50ch;margin-top:18px}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.facts{display:flex;flex-wrap:wrap;gap:28px;margin-top:36px;padding-top:24px;border-top:1px solid var(--night-line)}
.facts div{min-width:0}
.facts b{display:block;font-family:var(--f-display);font-size:30px;line-height:1.1;font-weight:600}
.facts span{font-size:12px;color:var(--night-muted);letter-spacing:.06em;text-transform:uppercase}
.next{background:var(--night-2);border:1px solid var(--night-line);border-radius:18px;padding:20px;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.next-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}
.next-head b{font-family:var(--f-display);font-size:20px;text-transform:var(--display-case,uppercase);letter-spacing:.03em;font-weight:600}
.live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hl,var(--ball))}
.live i{width:7px;height:7px;border-radius:50%;background:var(--hl,var(--ball));display:inline-block;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.next ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.next li button{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left;background:rgba(255,255,255,.04);border:1px solid var(--night-line);border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--night-ink)}
.next li button:hover{border-color:var(--ball)}
.next .tm{font-family:var(--f-mono);font-size:13px;background:var(--ball);color:var(--ball-ink);border-radius:8px;padding:4px 8px}
.next .ct{font-size:14px;min-width:0}
.next .ct small{display:block;color:var(--night-muted);font-size:12px}
.next .pr{font-weight:600;font-variant-numeric:tabular-nums}
.next .empty{color:var(--night-muted);font-size:14px}
.next-foot{margin-top:12px;font-size:12px;color:var(--night-muted)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;padding-block:40px 48px}}

section{padding-block:64px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sec-head p{color:var(--muted);max-width:50ch}
.sec-head h2{margin-top:6px}

/* courts */
.courts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.court{background:var(--raise);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.court-art{position:relative;line-height:0}
.court-art svg{width:100%;height:auto;display:block}
.court-art .tag{position:absolute;top:12px;left:12px;line-height:1;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--ball);color:var(--ball-ink)}
.court-body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.court-body p{color:var(--muted);font-size:14px}
.rates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;padding-top:6px}
.rate{background:var(--bg);border-radius:10px;padding:8px 10px}
.rate span{display:block;font-size:11px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.rate b{font-family:var(--f-display);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.rate.peak{background:var(--warn-bg)}
.rate.peak span{color:var(--warn)}

/* board */
.board-card{background:var(--raise);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.days{display:flex;gap:8px;overflow-x:auto;padding:16px;border-bottom:1px solid var(--line);scrollbar-width:thin}
.day{flex:none;width:64px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 0 10px;cursor:pointer;text-align:center;line-height:1.15;display:grid;justify-items:center;gap:2px}
.day small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.day b{font-family:var(--f-display);font-size:24px;font-weight:600}
.day .bar{width:36px;height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:4px}
.day .bar i{display:block;height:100%;background:var(--ok)}
.day.on{background:var(--night);color:var(--night-ink);border-color:var(--night)}
.day.on small{color:var(--night-muted)}
.day.on .bar{background:var(--night-line)}
.day.on .bar i{background:var(--ball)}
.legend{display:flex;flex-wrap:wrap;gap:14px;padding:12px 16px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.grid-scroll{overflow-x:auto}
table.slots{border-collapse:separate;border-spacing:6px;width:100%;min-width:360px;padding:4px 6px}
.slots th{font-size:12px;text-align:left;font-weight:600;padding:4px 6px;color:var(--muted)}
.slots thead th.c{text-align:center;color:var(--ink);font-family:var(--f-display);font-size:17px;text-transform:var(--display-case,uppercase);letter-spacing:.03em}
.slots th.c small{display:block;font-family:var(--f-body);font-size:11px;text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}
.slots tr.grp th{padding:14px 6px 2px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.slots tr.grp th em{font-style:normal;color:var(--warn);margin-left:6px}
.slots td.t{font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap;padding-right:4px;width:72px}
.cell{width:100%;min-height:42px;border-radius:10px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums;transition:transform .1s ease}
.cell.open{background:var(--cell-open);color:var(--cell-open-ink)}
.cell.open:hover{border-color:var(--ok);transform:translateY(-1px)}
.cell.selected{background:var(--ball);color:var(--ball-ink);border-color:var(--ball-ink);box-shadow:0 4px 12px rgba(120,130,20,.25)}
.cell.pending,.cell.hold{background:var(--warn-bg);color:var(--warn);cursor:not-allowed}
.cell.booked{background:var(--bad-bg);color:var(--bad);cursor:not-allowed}
.cell.blocked,.cell.past{background:var(--cell-dim);color:var(--cell-dim-ink);cursor:not-allowed}
.board-foot{padding:12px 16px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}

.tray{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--night);color:var(--night-ink);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:3px solid var(--ball)}
.tray .wrap{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;padding-inline:0}
.tray .sum{min-width:0}
.tray .sum b{font-family:var(--f-display);font-size:28px;font-weight:600}
.tray .sum span{display:block;font-size:12px;color:var(--night-muted)}
.tray .acts{display:flex;gap:8px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;position:relative}
.steps::before{content:"";position:absolute;left:22px;right:22px;top:22px;height:2px;background:var(--line)}
.step{position:relative;min-width:0}
.step .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--raise);border:2px solid var(--accent);color:var(--accent);font-family:var(--f-display);font-size:18px;font-weight:600;position:relative}
.step:last-child .n{background:var(--ball);border-color:var(--ball);color:var(--ball-ink)}
.step b{display:block;margin:14px 0 4px;font-size:16px}
.step p{font-size:14px;color:var(--muted)}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:20px}.steps::before{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto}.step{display:grid;grid-template-columns:44px 1fr;column-gap:16px}.step b{margin-top:10px}.step p{grid-column:2}}

/* faq */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:760px){.faq{grid-template-columns:1fr}}
details{background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:16px 18px;min-width:0}
summary{font-weight:600;cursor:pointer}
details p{margin-top:8px;color:var(--muted);font-size:14px}

/* visit */
.visit{background:var(--night);color:var(--night-ink)}
.visit .eyebrow{color:var(--hl,var(--ball))}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.contact div{min-width:0;border-top:1px solid var(--night-line);padding-top:12px}
.contact .eyebrow{color:var(--night-muted)}
.contact b{display:block;margin-top:6px;overflow-wrap:anywhere;font-weight:500}
.contact a{color:var(--hl,var(--ball))}
footer{background:var(--night);color:var(--night-muted);border-top:1px solid var(--night-line);padding-block:20px 96px;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a{color:var(--night-muted)}

/* overlay panels */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(8,14,26,.6);display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;padding:max(24px,env(safe-area-inset-top,0px)) 12px 24px}
.panel{background:var(--raise);color:var(--ink);border-radius:18px;width:100%;max-width:520px;box-shadow:0 24px 60px rgba(0,0,0,.35);margin-block:auto;overflow:hidden}
.panel.wide{max-width:860px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;background:var(--night);color:var(--night-ink)}
.panel-head h3{font-size:22px}
.x{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:var(--night-muted);padding:4px 8px}
.panel-body{padding:20px;display:grid;gap:16px}
.progress{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:14px 20px 0}
.progress div{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.progress div::before{content:"";display:block;height:4px;border-radius:2px;background:var(--line);margin-bottom:6px}
.progress div.on{color:var(--accent)}
.progress div.on::before{background:var(--accent)}
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:600}
.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:11px 12px;width:100%;min-width:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:460px){.row2{grid-template-columns:1fr}}
.err{color:var(--bad);font-size:13px}
.summary{background:var(--bg);border-radius:12px;padding:12px 14px;font-size:14px;display:grid;gap:4px}
.summary .line{display:flex;justify-content:space-between;gap:10px}
.summary .total{border-top:1px solid var(--line);padding-top:8px;margin-top:4px;font-weight:600;font-size:16px}
.paybox{background:var(--accent-soft);border-radius:14px;padding:18px;display:grid;gap:6px;text-align:center}
.paybox .num{font-family:var(--f-mono);font-size:24px;letter-spacing:.04em}
.paybox .amt{font-family:var(--f-display);font-size:44px;line-height:1;font-weight:600}
.drop{border:1.5px dashed var(--line);border-radius:12px;padding:16px;text-align:center;font-size:14px;color:var(--muted);cursor:pointer;display:block}
.drop:hover{border-color:var(--accent)}
.drop img{max-height:180px;margin:8px auto 0;border-radius:8px;display:block}
.ticket{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ticket .tt{background:var(--ball);color:var(--ball-ink);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ticket .tt .mono{font-size:20px}
.ticket .tb{padding:14px 16px;display:grid;gap:6px;font-size:14px;border-top:2px dashed var(--line)}
.pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.pill.pending{background:var(--warn-bg);color:var(--warn)}
.pill.confirmed{background:var(--ok-bg);color:var(--ok)}
.pill.rejected{background:var(--bad-bg);color:var(--bad)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:60;background:var(--night);color:var(--night-ink);padding:10px 16px;border-radius:999px;font-size:14px;font-weight:500;border:1px solid var(--ball);max-width:calc(100% - 32px);text-align:center}
.hint{font-size:12px;color:var(--muted)}

/* owner dashboard */
.dash{padding-block:24px 64px;display:grid;gap:20px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stats div{background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.stats b{display:block;font-family:var(--f-display);font-size:28px;font-weight:600}
.stats span{font-size:12px;color:var(--muted)}
.stats .attn{border-color:var(--warn);background:var(--warn-bg)}
.stats .attn span{color:var(--warn)}
.card{background:var(--raise);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:14px;min-width:0}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.card-head h3{font-size:22px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500;cursor:pointer}
.tabs button.on{background:var(--night);color:var(--night-ink);border-color:var(--night)}
.tabs button b{font-weight:600;margin-left:4px}
.blist{display:grid;gap:10px}
.bk{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:center}
.bk .thumb{width:84px;height:84px;border-radius:8px;background:var(--bg);display:grid;place-items:center;font-size:11px;color:var(--muted);border:0;padding:0;cursor:pointer;overflow:hidden}
.bk .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bk .meta{min-width:0;font-size:13px;display:grid;gap:2px}
.bk .meta .top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bk .meta b{font-size:15px}
.bk .btns{display:flex;flex-direction:column;gap:6px}
@media (max-width:560px){.bk{grid-template-columns:64px 1fr}.bk .thumb{width:64px;height:64px}.bk .btns{grid-column:1/-1;flex-direction:row}.bk .btns .btn{flex:1}}
.sched{display:grid;gap:8px}
.sched-row{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:start;border-top:1px solid var(--line);padding-top:8px;font-size:14px}
.sched-row .mono{color:var(--muted);font-size:13px}
.blocks-list{display:grid;gap:6px}
.blocks-list .brow{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:14px;border-top:1px solid var(--line);padding-top:6px}
.login{max-width:420px;margin:56px auto}

/* subscription */
.banner{border-radius:12px;padding:12px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:14px;border:1px solid var(--line);background:var(--raise)}
.banner.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--ink)}
.banner.bad{background:var(--bad-bg);border-color:var(--bad);color:var(--ink)}
.banner.info{background:var(--accent-soft);border-color:var(--accent)}
.banner b{font-weight:600}
.sub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:640px){.sub-grid{grid-template-columns:1fr}}
.sub-grid div{background:var(--bg);border-radius:12px;padding:10px 12px;min-width:0}
.sub-grid span{display:block;font-size:12px;color:var(--muted)}
.sub-grid b{font-size:17px;font-weight:600}
.sub-actions{display:flex;gap:8px;flex-wrap:wrap}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.seg button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 6px;cursor:pointer;font-weight:600;display:grid;gap:2px}
.seg button small{font-weight:400;color:var(--muted);font-size:11px}
.seg button.on{background:var(--night);color:var(--night-ink);border-color:var(--night)}
.seg button.on small{color:var(--night-muted)}
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
.tbl td.num,.tbl th.num{text-align:right}
.tbl tr.dim td{color:var(--muted)}
.mini{font-size:12px;color:var(--muted)}
.search{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-size:13px;width:200px;max-width:100%}
.form-sec{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.form-sec h4{margin:0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:560px){.row3{grid-template-columns:1fr 1fr}}
.crow{display:grid;grid-template-columns:1.3fr 1fr .8fr .8fr auto;gap:6px;align-items:center}
.crow input,.crow select{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px;width:100%;min-width:0}
.crow label{display:flex;gap:4px;align-items:center;font-size:12px;white-space:nowrap}
.crow label input{width:auto}
@media (max-width:560px){.crow{grid-template-columns:1fr 1fr}}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;gap:6px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 12px;font-size:13px}
.chip button{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:16px;line-height:1;padding:0 4px}
.bigimg{width:100%;height:auto;border-radius:10px;display:block}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* branding: logo, hero photo, court photos, gallery */
.brand .logo{height:36px;width:auto;max-width:150px;object-fit:contain;display:block;flex:none}
.hero.has-photo{background-size:cover;background-position:center}
.hero.has-photo::before{display:none}
.hero.has-photo h1,.hero.has-photo .lede{text-shadow:0 2px 18px rgba(0,0,0,.25)}
.court-art img{width:100%;aspect-ratio:320/150;object-fit:cover;display:block}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.gallery figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--raise);border:1px solid var(--line);min-width:0}
.gallery button{display:block;width:100%;padding:0;border:0;cursor:zoom-in;background:none}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .3s ease}
.gallery button:hover img{transform:scale(1.03)}
.gallery figcaption{padding:10px 12px;font-size:13px;color:var(--muted)}
.lightbox{background:transparent;box-shadow:none;max-width:1100px}
.lightbox img{width:100%;max-height:80vh;object-fit:contain;border-radius:12px;display:block;background:#000}
.lightbox p{color:#fff;text-align:center;margin-top:10px}
.lightbox .lb-nav{display:flex;justify-content:space-between;margin-top:10px;gap:8px}

/* branding editor */
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.theme-card{border:2px solid var(--line);border-radius:12px;padding:0;overflow:hidden;cursor:pointer;background:var(--raise);text-align:left}
.theme-card.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.theme-card .sw{height:54px;display:grid;grid-template-rows:2fr 1fr}
.theme-card .sw i{display:block}
.theme-card .sw span{display:flex;gap:4px;padding:4px 6px;align-items:center}
.theme-card .sw b{width:14px;height:14px;border-radius:50%;display:inline-block}
.theme-card .nm{display:block;padding:8px 10px;font-size:13px;font-weight:600}
.fonts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.font-card{border:2px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;background:var(--raise);text-align:left;display:grid;gap:2px}
.font-card.on{border-color:var(--accent)}
.font-card b{font-size:20px;line-height:1.1}
.font-card small{color:var(--muted);font-size:12px}
.img-slot{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}
.img-slot .pv{width:120px;height:80px;border-radius:10px;background:var(--bg) center/cover no-repeat;border:1px dashed var(--line);display:grid;place-items:center;font-size:11px;color:var(--muted);overflow:hidden}
.img-slot .pv.logo{background-size:contain;background-color:var(--night)}
.img-slot .acts{display:flex;gap:6px;flex-wrap:wrap}
.lock{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--warn);background:var(--warn-bg);border-radius:999px;padding:3px 10px}
.locked{opacity:.55;pointer-events:none}
.gal-edit{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gal-edit .gi{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--raise);display:grid}
.gal-edit .gi img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gal-edit .gi input{border:0;border-top:1px solid var(--line);padding:6px 8px;font-size:12px;background:var(--surface);min-width:0}
.gal-edit .gi .row{display:flex;justify-content:space-between;padding:4px}
.gal-edit .gi .row button{border:0;background:transparent;cursor:pointer;font-size:13px;color:var(--muted);padding:4px 6px}
.toggles{display:grid;gap:8px}
.toggles label{display:flex;gap:10px;align-items:center;font-size:14px}
.range-row{display:flex;gap:10px;align-items:center}
.range-row input{flex:1}
.colors{display:flex;gap:16px;flex-wrap:wrap}
.colors label{display:flex;gap:8px;align-items:center;font-size:14px}
.colors input[type=color]{width:44px;height:34px;border:1px solid var(--line);border-radius:8px;padding:2px;background:var(--surface)}
.uploading{font-size:12px;color:var(--accent)}
.lightbox .btn{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(0,0,0,.35)}
.lightbox .panel-body{padding:0}

/* CourtBook logo in the header of CourtBook's own pages */
.brand .cb-mark{width:34px;height:34px;flex:none;display:block}
.brand .cb-book{color:var(--ball)}