:root{
  
  --st-primary:#B74F37; --st-primary-fill:#BB5138; --st-primary-dark:#9E4029; --st-primary-tint:#F7E4DC;
  
  
  --hero-bg:#BB5138;
  
  --st-green:#1B4332; --st-green-fill:#1B4332; --st-green-tint:#E9F0E9; --on-green:#F4EFE6; --on-cream:#9E4029;
  --green-line:rgba(27,67,50,.14); --green-line-2:rgba(27,67,50,.3);
  --bg:#FAF5EE; --surface:#fff; --surface-2:#FAF5EE; --knob:#fff;
  
  --ink:#2B2320; --muted:#6E6158; --muted-2:#655850; --soft:#5C5048; --faint:#7C6C63;
  --line:rgba(43,35,32,.08); --line-strong:rgba(43,35,32,.12); --line-soft:rgba(43,35,32,.07);
  --track:rgba(43,35,32,.2);
  --shadow-1:0 2px 12px rgba(43,35,32,.05); --shadow-2:0 10px 30px rgba(43,35,32,.14);
  
  --gold:#886800; --gold-tint:#FBF0D3; --gold-soft:#FDF7E6; --gold-line:rgba(224,168,0,.35); --gold-star:#E0A800;
  --danger:#B3261E; --danger-hover:#8f1e17; --danger-ink:#A32C22; --danger-tint:#FADDDA; --danger-line:#C8362B;
  
  --lvl1-bg:#E3F1E4; --lvl1-fg:#2C7938; --lvl2-bg:#FBF0D3; --lvl2-fg:#886800;
  --lvl3-bg:#FCE8D8; --lvl3-fg:#A55219; --lvl4-bg:#FADDDA; --lvl4-fg:#A32C22;
  --surf-hard-bg:#E4EBF3; --surf-hard-fg:#3B566F;
  --surf-indoor-bg:#EBE5DA; --surf-indoor-fg:#6B5F55;
  --surf-grass-bg:#DFF0DB; --surf-grass-fg:#2E6B33;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235C5048' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  --radius:20px;
  --rubik:'Rubik',sans-serif; --sofia:'Sofia Sans',system-ui,sans-serif;
  color-scheme:light;
}
/* Themes. Light is the default for everyone — no data-theme means light, and
   the attribute (set from the st_theme cookie by the inline script in layout())
   is what opts a player out: "dark" always, "system" only on a dark device. */
@media(prefers-color-scheme:dark){:root[data-theme="system"]{
  
  --st-primary:#E8846A; --st-primary-fill:#BB5138; --st-primary-dark:#F0A48D; --st-primary-tint:#2F2019;
  --hero-bg:#A94A31;
  --st-green:#79C39C; --st-green-fill:#2C6749; --st-green-tint:#1C2721;
  --green-line:rgba(121,195,156,.18); --green-line-2:rgba(121,195,156,.34);
  --bg:#181411; --surface:#221D19; --surface-2:#2C2622;
  
  --ink:#F3EBE3; --muted:#A79A90; --muted-2:#BAADA3; --soft:#D5CAC0; --faint:#998D85;
  --line:rgba(243,235,227,.09); --line-strong:rgba(243,235,227,.16); --line-soft:rgba(243,235,227,.07);
  --track:rgba(243,235,227,.2);
  --shadow-1:0 2px 12px rgba(0,0,0,.35); --shadow-2:0 10px 30px rgba(0,0,0,.5);
  --gold:#E0B457; --gold-tint:#2F2718; --gold-soft:#282116; --gold-line:rgba(224,180,87,.24); --gold-star:#E9BC4F;
  --danger:#C4453C; --danger-hover:#A83128; --danger-ink:#F09A92; --danger-tint:#30201C; --danger-line:#7A3630;
  --lvl1-bg:#1E2A22; --lvl1-fg:#8ED79B; --lvl2-bg:#2C2617; --lvl2-fg:#E5C063;
  --lvl3-bg:#31231A; --lvl3-fg:#F0A56B; --lvl4-bg:#31211E; --lvl4-fg:#F09A8E;
  --surf-hard-bg:#212A33; --surf-hard-fg:#9FC0DC;
  
  --surf-indoor-bg:#332B25; --surf-indoor-fg:#CDBFB1;
  --surf-grass-bg:#1F2A22; --surf-grass-fg:#8FD095;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B5A89E' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  
  --st-primary:#E8846A; --st-primary-fill:#BB5138; --st-primary-dark:#F0A48D; --st-primary-tint:#2F2019;
  --hero-bg:#A94A31;
  --st-green:#79C39C; --st-green-fill:#2C6749; --st-green-tint:#1C2721;
  --green-line:rgba(121,195,156,.18); --green-line-2:rgba(121,195,156,.34);
  --bg:#181411; --surface:#221D19; --surface-2:#2C2622;
  
  --ink:#F3EBE3; --muted:#A79A90; --muted-2:#BAADA3; --soft:#D5CAC0; --faint:#998D85;
  --line:rgba(243,235,227,.09); --line-strong:rgba(243,235,227,.16); --line-soft:rgba(243,235,227,.07);
  --track:rgba(243,235,227,.2);
  --shadow-1:0 2px 12px rgba(0,0,0,.35); --shadow-2:0 10px 30px rgba(0,0,0,.5);
  --gold:#E0B457; --gold-tint:#2F2718; --gold-soft:#282116; --gold-line:rgba(224,180,87,.24); --gold-star:#E9BC4F;
  --danger:#C4453C; --danger-hover:#A83128; --danger-ink:#F09A92; --danger-tint:#30201C; --danger-line:#7A3630;
  --lvl1-bg:#1E2A22; --lvl1-fg:#8ED79B; --lvl2-bg:#2C2617; --lvl2-fg:#E5C063;
  --lvl3-bg:#31231A; --lvl3-fg:#F0A56B; --lvl4-bg:#31211E; --lvl4-fg:#F09A8E;
  --surf-hard-bg:#212A33; --surf-hard-fg:#9FC0DC;
  
  --surf-indoor-bg:#332B25; --surf-indoor-fg:#CDBFB1;
  --surf-grass-bg:#1F2A22; --surf-grass-fg:#8FD095;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B5A89E' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* Horizontal overflow is clipped on the content wrapper, NOT on html/body:
   any overflow value other than visible on the root makes iOS Safari treat
   position:fixed as absolute, so the tab bar drifted up the page mid-scroll. */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sofia);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--rubik);font-weight:800;margin:0}
.muted{color:var(--muted);font-weight:500}
.accent{color:var(--st-primary)}

.page{max-width:1240px;margin:0 auto;padding:24px 20px 96px;overflow-x:clip}
@media(min-width:900px){.page{padding:28px 40px 60px}}

/* top nav */
.topnav{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;transition:transform .28s ease}

.topnav-off{transform:translateY(-100%)}
@media(min-width:900px){.topnav-off{transform:none}}

@media(max-width:899px){.topnav{will-change:transform}}
.topnav-in{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:14px 20px}
@media(min-width:900px){.topnav-in{padding:16px 40px}}
.topnav-left{display:flex;align-items:center;gap:36px}
.logo{font-family:var(--rubik);font-weight:800;font-size:21px;color:var(--st-green)}
.logo span{color:var(--st-primary)}
.topnav-links{display:none;gap:24px;font-size:15px;font-weight:600;color:var(--muted-2)}
@media(min-width:900px){.topnav-links{display:flex}}
.topnav-links .nav-active{color:var(--st-primary);border-bottom:2px solid var(--st-primary);padding-bottom:2px}
.topnav-right{display:flex;align-items:center;gap:12px}
/* Publishing has the mobile FAB; the button is the desktop equivalent. The
   descendant selector is needed to outrank .btn's own display. */
.topnav-right .btn-post{display:none}
@media(min-width:900px){.topnav-right .btn-post{display:inline-flex}.topnav-right{gap:14px}}
/* Съобщения lives here at every width, so the mobile tab bar can stay a pure
   browse nav. */
.nav-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;color:var(--muted-2)}
.nav-icon:hover{background:var(--surface-2);color:var(--ink)}
.nav-icon-on{color:var(--st-primary);background:var(--st-primary-tint)}
.nav-badge{position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--st-primary-fill);color:#fff;font-size:10.5px;font-weight:800;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--surface)}
/* The badge is always in the markup and hidden at zero, so it needs the rule
   the browser default would have given it if the class set no box at all. */
.nav-badge[hidden]{display:none}
/* Админ: the pill is the desktop form, .admin-bubble the mobile one. */
.nav-admin{display:none;font-size:13.5px;font-weight:700;color:var(--st-green);background:var(--st-green-tint);border-radius:999px;padding:7px 13px;white-space:nowrap}
@media(min-width:900px){.nav-admin{display:inline-block}}
.nav-admin:hover,.nav-admin-on{background:var(--st-green-fill);color:var(--on-green)}
/* Моят клуб: same pill, terracotta instead of green, so a moderator who also
   runs a club can tell the two apart without reading them. */
.nav-club{display:none;font-size:13.5px;font-weight:700;color:var(--st-primary-dark);background:var(--st-primary-tint);border-radius:999px;padding:7px 13px;white-space:nowrap}
@media(min-width:900px){.nav-club{display:inline-block}}
.nav-club:hover,.nav-club-on{background:var(--st-primary-fill);color:#fff}

/* language switch — a two-segment pill, sized to sit next to the 38px avatar
   without crowding the mobile nav */
.lang{display:inline-flex;align-items:center;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:999px;padding:2px;font-family:var(--rubik);font-size:11.5px;font-weight:700;letter-spacing:.03em;flex-shrink:0}
.lang a{padding:4px 8px;border-radius:999px;color:var(--muted);line-height:1.25;transition:color .12s,background .12s}
.lang a:hover{color:var(--ink)}
.lang .lang-on{background:var(--st-green-fill);color:var(--on-green)}
.site-footer .lang{background:var(--surface)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:16px;padding:14px 22px;border-radius:999px;white-space:nowrap;transition:transform .08s ease,box-shadow .15s ease}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--st-primary-fill);color:#fff}
.btn-primary:hover{box-shadow:0 8px 20px rgba(196,85,59,.3)}

.btn-light{background:#FFF9F2;color:var(--on-cream)}
.btn-outline-light{background:transparent;color:#FFF9F2;border:1.5px solid rgba(255,255,255,.65);font-weight:700}
.btn-green-outline{background:transparent;color:var(--st-green);border:1.5px solid var(--st-green);font-weight:700}
.btn-ghost{background:transparent;color:var(--st-green);font-weight:700}
.btn-sm{font-size:14px;padding:9px 16px;font-weight:700}
/* "Вход / Регистрация" is two words where the bar used to hold one. It never
   wraps — a two-line button in a fixed-height header is worse than a tight
   one — so on the narrowest phones it gives up padding and a point of size. */
.btn-enter{white-space:nowrap}
@media(max-width:400px){.btn-enter{font-size:13px;padding:9px 11px}}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
/* A labelled rule, for the moment a form stops being one thing and becomes
   another: under the login buttons it separates "let me in" from "I have no
   account yet", so the third button below it does not read as a third way to
   log in. */
.auth-split{display:flex;align-items:center;gap:12px;margin:24px 0 14px;color:var(--muted);font-size:14px;font-weight:700}
.auth-split::before,.auth-split::after{content:'';flex:1;height:1px;background:var(--line)}

/* badges & chips */
.lvl{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;padding:4px 11px;border-radius:999px;white-space:nowrap}
.lvl-sm{font-size:12px;padding:2px 8px}
.lvl-dot{width:8px;height:8px;border-radius:999px;flex-shrink:0}
.lvl-sm .lvl-dot{width:7px;height:7px}
.tag{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap;letter-spacing:.02em}
.tag-court{background:var(--st-primary-tint);color:var(--st-primary-dark)}
.tag-split{background:var(--st-green-tint);color:var(--st-green);font-weight:700}
.tag-avail{background:var(--surface);color:var(--st-green)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);color:var(--soft);border:1px solid var(--line-strong);font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;cursor:pointer;white-space:nowrap}
.chip .lvl-dot{width:8px;height:8px}
.chip-on{font-weight:700;border-width:1.5px}
.avatar{border-radius:999px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--sofia)}

.avatar-link{display:inline-flex;flex-shrink:0;border-radius:999px;line-height:0}
.avatar-link:focus-visible{outline:2px solid var(--st-primary);outline-offset:2px}
.avatar-green{background:var(--st-green-fill);color:var(--on-green)}
.avatar-tint{background:var(--st-primary-tint);color:var(--st-primary-dark)}
.avatar-white{background:var(--surface);color:var(--st-green)}
.avatar-gold{background:var(--gold-tint);color:var(--gold)}
.avatar-photo{object-fit:cover;background:var(--st-green-tint);display:block}

/* cards */
.card{border-radius:var(--radius);padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px}
.card-court{background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--shadow-1)}
.card-avail{background:var(--st-green-tint);border:1px solid var(--green-line)}
.card-tags{display:flex;justify-content:space-between;align-items:center}
.card-title{font-family:var(--rubik);font-weight:800;font-size:20px;line-height:1.2}
.card-title-green{font-weight:700;font-size:18px;line-height:1.25;color:var(--st-green)}
.card-sub{font-size:15px;font-weight:600;margin-top:3px}
.card-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-soft);padding-top:10px;margin-top:auto;gap:8px}
.card-footer>.btn{flex-shrink:0}
.card-avail .card-footer{border-top-color:var(--green-line)}
.card-owner{display:flex;align-items:center;gap:8px;min-width:0}
.owner-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.grid-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:16px}
@media(min-width:700px){.grid-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}}
@media(min-width:1050px){.grid-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* filters */
.filters{display:flex;align-items:center;gap:10px;margin:18px 0 8px;flex-wrap:wrap}
.filters .sep{width:1px;height:24px;background:var(--line-strong)}

select.chip{appearance:none;-webkit-appearance:none;padding-right:26px;background-image:var(--chevron);background-repeat:no-repeat;background-position:right 11px center}

/* landing hero */
.hero{position:relative;overflow:hidden;background:var(--hero-bg);color:#FFF9F2;padding:44px 24px 56px;border-radius:28px}
@media(min-width:900px){.hero{padding:64px 56px 72px}}
.hero-court{position:absolute;right:-80px;top:-50px;width:270px;height:400px;border:2px solid rgba(255,255,255,.22);border-radius:6px;transform:rotate(9deg);pointer-events:none}
.hero-court::before{content:'';position:absolute;left:40px;right:40px;top:76px;bottom:76px;border:2px solid rgba(255,255,255,.16)}
.hero-court::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(255,255,255,.22)}
.hero h1{font-size:33px;line-height:1.12;letter-spacing:-.01em;position:relative;max-width:560px}
@media(min-width:900px){.hero h1{font-size:48px}}
.hero p{position:relative;margin:14px 0 22px;font-size:16px;line-height:1.5;opacity:.94;max-width:420px}
.hero-cta{position:relative;display:flex;flex-direction:column;gap:10px;max-width:300px}
@media(min-width:640px){.hero-cta{flex-direction:row;max-width:none}}
.steps{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
@media(min-width:900px){.steps{grid-template-columns:1fr 1fr 1fr}}
.step{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);padding:14px 16px;font-size:15px;font-weight:600;line-height:1.35}
.step-num{flex-shrink:0;width:36px;height:36px;border-radius:999px;background:var(--st-green-tint);color:var(--st-green);font-family:var(--rubik);font-weight:800;font-size:16px;display:inline-flex;align-items:center;justify-content:center}
.stats-strip{margin-top:26px;background:var(--st-green-fill);color:var(--on-green);text-align:center;padding:18px 22px;font-size:15px;font-weight:700;letter-spacing:.01em;border-radius:var(--radius)}

/* courts directory */
.court-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
@media(min-width:900px){.court-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(min-width:1150px){.court-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.court-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:8px}
.court-thumb{width:100%;height:52px;border-radius:12px;position:relative;overflow:hidden}
.court-thumb.t-tint{background:var(--st-primary-tint)}
.court-thumb.t-green{background:var(--st-green-tint)}
.court-thumb::before{content:'';position:absolute;left:12px;right:12px;top:50%;height:1.5px;background:rgba(255,255,255,.92)}
.court-thumb::after{content:'';position:absolute;left:50%;top:8px;bottom:8px;width:1.5px;background:rgba(255,255,255,.92)}
.court-name{font-size:15px;font-weight:800;line-height:1.25}
.court-dist{font-size:13px;color:var(--muted);font-weight:600}
.court-tags{display:flex;gap:5px;flex-wrap:wrap}
/* One swatch per surface, all four distinguishable at chip size: terracotta
   clay, blue-grey hard, warm grey indoor, green grass. */
.surf{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.surf-clay{background:var(--st-primary-tint);color:var(--st-primary-dark)}
.surf-hard{background:var(--surf-hard-bg);color:var(--surf-hard-fg)}
.surf-indoor{background:var(--surf-indoor-bg);color:var(--surf-indoor-fg)}
.surf-grass{background:var(--surf-grass-bg);color:var(--surf-grass-fg)}
.court-link{font-size:13px;font-weight:700;color:var(--st-primary);margin-top:auto}

/* forms */
.form{display:flex;flex-direction:column;gap:20px;max-width:560px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:700}
.field label .opt{font-weight:500;color:var(--muted)}
.input,textarea.input,select.input{background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:11px 14px;font-size:16px;font-weight:600;font-family:inherit;color:var(--ink);width:100%;min-width:0;box-sizing:border-box;min-height:46px}
input.input[type=date],input.input[type=time]{-webkit-appearance:none;appearance:none;display:block}
textarea.input{min-height:76px;line-height:1.45;resize:vertical;font-weight:500}
.input:focus{outline:2px solid var(--st-primary);outline-offset:1px;border-color:transparent}
.input::placeholder{color:var(--faint);font-weight:500}
.row2{display:flex;gap:10px;flex-wrap:wrap}
.row2 .field{flex:1 1 0;min-width:0}
@media(max-width:479px){.row2 .field:has(input[type=date]){flex-basis:100%}}
/* Side-by-side fields whose labels are different lengths: on a narrow screen
   one label wraps to two lines and used to push its input a line below the one
   next to it. Subgrid puts every field in the row on the same two tracks, so
   labels and inputs line up whatever the translation does to the text. */
@supports(grid-template-rows:subgrid){
  .row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
  .row2 .field{display:grid;grid-template-rows:subgrid;grid-row:span 2}
  @media(max-width:479px){.row2 .field:has(input[type=date]){grid-column:1/-1}}
}
/* A group of related fields on one white card. The profile form used to mix
   bare fields on the page background with the white <details> cards, which is
   what made a fairly short form look like a pile of unrelated controls. */
.panel{display:flex;flex-direction:column;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
.panel-gold{background:var(--gold-soft);border-color:var(--gold-line)}
.panel-gold .panel-title{color:var(--gold)}
.panel .photo-edit{background:none;border:none;border-radius:0;padding:0}
.chips-wrap{display:flex;flex-wrap:wrap;gap:8px}
.chips-wrap input{position:absolute;opacity:0;pointer-events:none}
/* Chips share out the row's spare width instead of leaving a ragged right
   edge, so every row of a group lines up on both margins. Opt-in: it only
   looks deliberate for a group that fills more or less whole rows. */
.chips-even .chip{flex:1 1 auto;justify-content:center}
.toggle-card{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer;gap:12px}
.toggle-card .t-title{font-size:15px;font-weight:700}
.toggle-card .t-sub{font-size:13px;color:var(--muted)}
.switch{width:46px;height:27px;border-radius:999px;background:var(--track);display:inline-flex;align-items:center;padding:2.5px;flex-shrink:0;transition:background .15s}
.switch::after{content:'';width:22px;height:22px;border-radius:999px;background:var(--knob);transition:transform .15s}
.toggle-card input{position:absolute;opacity:0}
.toggle-card input:checked~.switch{background:var(--st-green-fill)}
.toggle-card input:checked~.switch::after{transform:translateX(19px)}
.type-card{position:relative;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--radius);padding:20px 18px;display:flex;flex-direction:column;gap:6px;cursor:pointer}
.type-card .emoji{font-size:30px;line-height:1}
.type-card .tc-title{font-family:var(--rubik);font-weight:800;font-size:19px}
.type-card .tc-sub{font-size:14px;color:var(--muted-2);line-height:1.4}
.type-card input{position:absolute;opacity:0}
.type-card:has(input:checked){border:2px solid var(--st-primary);box-shadow:0 8px 20px rgba(196,85,59,.12)}
.type-card:has(input:checked)::after{content:'✓';position:absolute;top:16px;right:16px;width:22px;height:22px;border-radius:999px;background:var(--st-primary-fill);color:#fff;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.progress{display:flex;align-items:center;gap:10px;margin:8px 0 14px;max-width:560px}
.progress span{flex:1;height:4px;border-radius:99px;background:var(--line-strong)}
.progress span.on{background:var(--st-primary-fill)}
.progress em{font-style:normal;font-size:13px;font-weight:600;color:var(--muted);flex:none}
.club-list{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;max-height:260px;overflow-y:auto}
.club-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line-soft);cursor:pointer;gap:10px}
.club-row:last-child{border-bottom:none}
.club-row .c-name{font-size:15px;font-weight:600}
.club-row .c-sub{font-size:13px;color:var(--muted)}
.club-row .radio{width:20px;height:20px;border-radius:999px;border:2px solid var(--line-strong);flex-shrink:0}
.club-row input{position:absolute;opacity:0}
.club-row:has(input:checked){background:var(--st-primary-tint)}
.club-row:has(input:checked) .c-name{color:var(--st-primary-dark);font-weight:700}
.club-row:has(input:checked) .c-sub{color:var(--st-primary-dark)}
.club-row:has(input:checked) .radio{border:none;background:var(--st-primary-fill)}
.club-row:has(input:checked) .radio::after{content:'✓';color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;height:100%}

/* empty state */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;gap:18px}
.empty .em-ball{width:110px;height:110px;border-radius:999px;border:2px dashed rgba(196,85,59,.5);display:flex;align-items:center;justify-content:center;font-size:44px;background:var(--surface)}
.empty .em-title{font-family:var(--rubik);font-weight:700;font-size:19px;line-height:1.3;max-width:340px}

/* messages */
.thread-list{display:flex;flex-direction:column;gap:10px;margin-top:14px;max-width:720px}
.thread-row{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.thread-row.t-unread{box-shadow:var(--shadow-1)}
.thread-main{flex:1;min-width:0}
.thread-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.thread-name{font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:7px;min-width:0}
.t-unread .thread-name{font-weight:800}
.thread-time{font-size:12px;font-weight:500;color:var(--faint);flex-shrink:0}
.t-unread .thread-time{color:var(--st-primary);font-weight:600}
.thread-re{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread-last{display:flex;justify-content:space-between;align-items:center;gap:8px}
.thread-preview{font-size:14px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-unread .thread-preview{color:var(--ink);font-weight:600}
.unread-badge{flex-shrink:0;width:20px;height:20px;border-radius:999px;background:var(--st-primary-fill);color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}

/* chat */
.chat{display:flex;flex-direction:column;max-width:720px;min-height:calc(100dvh - 210px)}
.chat-head{display:flex;align-items:center;gap:12px;padding:10px 0 12px;border-bottom:1px solid var(--line-soft)}
.chat-pin{margin:12px 0 0;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--st-green-tint);border:1px solid var(--green-line);border-radius:14px;padding:10px 14px;font-size:13px;font-weight:700;color:var(--st-green)}
.chat-pin a{text-decoration:underline;flex-shrink:0}
/* overflow-anchor is off because prepending older messages moves the scroll
   position by hand; leaving the browser's anchoring on would adjust it a
   second time and the thread would jump. */
.chat-msgs{flex:1;display:flex;flex-direction:column;gap:10px;padding:18px 0;overflow-anchor:none}
.chat-more{display:flex;justify-content:center;padding:14px 0 0}
.chat-more a{font-size:13px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 16px}
.chat-more a[data-busy]{opacity:.5}
.bubble{max-width:78%;padding:11px 14px;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.bubble-them{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:18px 18px 18px 6px}
.bubble-me{align-self:flex-end;background:var(--st-primary-fill);color:#FFF9F2;border-radius:18px 18px 6px 18px}
/* An official message reads differently from a player's: the badge sits on its
   own line above the text, and the bubble gets the gold edge so it is obvious
   at a glance which one in the thread came from the team. */
/* An official message reads differently from a player's: the badge sits on its
   own line above the text and the bubble carries the gold panel colours. It
   also overrides .bubble-me — the staff member's own outgoing message is
   official too, and the white-on-primary text of a normal "me" bubble would be
   unreadable on gold. */
.bubble-staff{display:flex;flex-direction:column;align-items:flex-start;background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:18px;color:var(--ink)}
.bubble-staff .sbadge{margin-bottom:6px}
/* Editing your own message. The pencil is deliberately quiet — it sits inside
   the bubble's own text flow, so it never needs absolute positioning that would
   collide with the message on a narrow screen. */
.bubble-body{display:inline}
.bubble-edit{background:none;border:0;padding:0 0 0 7px;font:inherit;font-size:12px;line-height:1;color:inherit;opacity:.5;cursor:pointer;vertical-align:baseline}
.bubble-edit:hover{opacity:1}
.bubble-edited{font-size:11.5px;font-weight:600;opacity:.6;margin-left:6px}
.bubble-form{display:none;gap:6px;align-items:center;flex-wrap:wrap}
.bubble-form input{flex:1 1 160px;min-width:0;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:12px;padding:7px 12px;font:inherit;font-size:16px}
/* The form sits inside a bubble whose background is already a strong colour, so
   its buttons cannot inherit the page's — they get the surface treatment. */
.bubble-form .btn{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink)}
.bubble-form .btn-primary{color:var(--st-primary);font-weight:800}
.bubble.editing{max-width:100%}
.bubble.editing .bubble-body{display:none}
.bubble.editing .bubble-form{display:flex}
.chat-time{align-self:center;font-size:12px;font-weight:600;color:var(--faint);margin-top:4px}
/* "пише…" — sits where the next bubble from the other person will appear, on
   their side, so the conversation does not jump when it is replaced by the
   real thing. It is a hint with no reserved space of its own: it is removed
   after four seconds whether or not anything was actually sent. */
.chat-typing{align-self:flex-start;font-size:13px;font-style:italic;color:var(--muted);padding:6px 14px;background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 16px 4px}
@media(prefers-reduced-motion:no-preference){.chat-typing{animation:typing-in .18s ease-out}}
@keyframes typing-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sbadge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;letter-spacing:.04em;border-radius:999px;padding:2px 8px;background:var(--gold);color:var(--surface);white-space:nowrap}
.sbadge::before{content:"🛡"}
.sbadge-moderator{background:var(--gold-tint);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-line)}
.chat-input{display:flex;gap:10px;align-items:center;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--bg);position:fixed;left:0;right:0;bottom:0;border-top:1px solid var(--line-soft);z-index:25}
@media(min-width:900px){.chat-input{position:sticky;left:auto;right:auto;padding:12px 0}}
.chat-input input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:12px 16px;font-size:16px;font-family:inherit}

/* profile */
.profile-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:12px 0 0}
.profile-head .avatar{border:3px solid var(--surface);box-shadow:0 8px 20px rgba(27,67,50,.22)}
.profile-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.pill{background:var(--surface);border:1px solid var(--line-strong);font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px}
.profile-bio{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--soft);max-width:420px}
.profile-facts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:520px}
.trust-line{margin:2px 0 0;font-size:13px;color:var(--muted);font-weight:500}
.profile-facts .pill b{font-weight:800}
.profile-phone{display:inline-flex;align-items:center;gap:7px;background:var(--st-green-tint);border:1px solid var(--green-line);color:var(--st-green);font-size:14.5px;font-weight:700;border-radius:999px;padding:8px 16px}

/* profile photo uploader. Avatar in the first column, its buttons stacked
   full-width in the second so their edges line up with each other and with the
   inputs below; the hint spans both columns instead of being squeezed into a
   four-word-wide strip beside the avatar. */
.photo-edit{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.photo-edit .avatar{border:2px solid var(--surface);box-shadow:0 4px 14px rgba(27,67,50,.16)}
.photo-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0}
.photo-btns{display:flex;flex-direction:column;gap:8px;max-width:260px}
.photo-btns .btn{width:100%;padding-left:12px;padding-right:12px}
/* "Премахни" stays the quieter of the two, but it needs the same outline —
   as bare text it read as a stray link floating beside the avatar. */
.photo-btns .btn-ghost{border:1.5px solid var(--line-strong);color:var(--muted-2)}
.photo-btns .btn-ghost:hover{border-color:var(--danger-line);color:var(--danger-ink)}
.photo-btns form{margin:0}
.photo-edit>.photo-hint{grid-column:1/-1}
.photo-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.photo-hint{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.35}
.photo-msg{font-size:13px;font-weight:600;color:var(--st-green)}
.photo-msg.is-err{color:var(--danger-ink)}
.photo-edit.is-busy{opacity:.6;pointer-events:none}
.mini-listing{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.mini-listing.m-green{background:var(--st-green-tint);border-color:var(--green-line)}
.mini-listing.m-gold{background:var(--gold-soft);border-color:var(--gold-line)}
.mini-listing.m-gold .m-title{color:var(--gold)}
.mini-listing .m-title{font-size:14px;font-weight:700}
.mini-listing.m-green .m-title{color:var(--st-green)}
.mini-listing .m-sub{font-size:13px;color:var(--muted)}
.mini-listing .m-arrow{margin-left:auto;color:var(--faint)}

/* bottom tab bar (mobile) — a pill floating clear of every edge rather than a
   panel welded to the bottom, so the page background reads around it. The
   shadow is what separates it from the content, which is why there is no
   border-top any more. */

.tabbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-2);padding:7px 6px;z-index:30;transition:transform .28s ease;will-change:transform}
@media(min-width:900px){.tabbar{display:none}}

:root{--duck-clear:150px}
.tabbar-off{transform:translateY(calc(100% + 10px + var(--duck-clear) + env(safe-area-inset-bottom)))}

.tab{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;gap:3px;color:var(--faint);font-size:11px;font-weight:600}
.tab-active{color:var(--st-primary);font-weight:700}
.tab-ic{display:inline-flex;align-items:center;justify-content:center}

.fab{flex:0 0 auto;width:40px;height:40px;border-radius:999px;background:var(--st-primary-fill);color:#fff;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:500;line-height:1}

/* staff-only Админ bubble, floating clear of the tab bar (~53px of pill on a
   10px inset, plus the home-indicator inset) in the corner the thumb reaches
   first. .bar-off sends it away with the bar it sits above — left behind, it
   would hover alone over the content the scroll was meant to clear. */
.admin-bubble{position:fixed;right:14px;bottom:calc(78px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;background:var(--st-green-fill);color:var(--on-green);box-shadow:0 8px 20px rgba(27,67,50,.34);z-index:29;transition:transform .28s ease}
.admin-bubble:active{background:#12301F}
@media(min-width:900px){.admin-bubble{display:none}}

/* Клуб bubble. On its own it takes the Админ bubble's place; .club-bubble-up
   stacks it one bubble higher, which only happens for a moderator who also
   runs a club. */
.club-bubble{position:fixed;right:14px;bottom:calc(78px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;background:var(--st-primary-fill);color:#FFF9F2;box-shadow:0 8px 20px rgba(158,64,41,.36);z-index:29;transition:transform .28s ease}
.club-bubble-up{bottom:calc(134px + env(safe-area-inset-bottom))}
.club-bubble:active{background:var(--st-primary-dark)}
@media(min-width:900px){.club-bubble{display:none}}

.bar-off{transform:translateY(calc(100% + 78px + var(--duck-clear) + env(safe-area-inset-bottom)))}
.club-bubble-up.bar-off{transform:translateY(calc(100% + 134px + var(--duck-clear) + env(safe-area-inset-bottom)))}

.vv-moving .tabbar,.vv-moving .topnav,.vv-moving .admin-bubble,.vv-moving .club-bubble{transition:none}


@media(prefers-reduced-motion:reduce){.tabbar-off,.topnav-off,.bar-off{transform:none}}

/* misc */
.page-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.page-head h1{font-size:26px}
@media(min-width:900px){.page-head h1{font-size:30px}}
.count{font-size:13px;font-weight:600;color:var(--muted)}
.note-box{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;font-size:15px;line-height:1.5;color:var(--soft);white-space:pre-wrap}
.alert{background:var(--st-green-tint);border:1px solid var(--green-line);color:var(--st-green);border-radius:14px;padding:12px 16px;font-size:14px;font-weight:600}
.alert-err{background:var(--danger-tint);border-color:var(--danger-line);color:var(--danger-ink)}
.section-title{font-size:18px;margin:24px 0 10px}
/* Court detail: breadcrumbs, facts, related clubs */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:10px}
.crumbs a{color:var(--st-primary)}
.crumbs a:hover{text-decoration:underline}
.crumb-sep{color:var(--line-strong)}
.court-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}
.court-pills .surf{font-size:13px;padding:5px 12px}
.pill-ok{background:var(--st-green-tint);border-color:var(--green-line);color:var(--st-green)}
.pill-warn{background:var(--gold-tint);border-color:var(--gold-line);color:var(--gold);font-weight:700}
/* Партньор — the one paid marker on the site. Gold, and always readable as an
   ad: it buys placement and a badge, never the hiding of a free club's data. */
.pill-pro{background:var(--gold-tint);border-color:var(--gold-line);color:var(--gold);font-weight:800}
.court-card .pill-pro{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--gold-line);align-self:flex-start}
/* The club's own offer, at the top of its page. Terracotta so it reads as the
   club talking, not as site chrome. */
.promo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;background:var(--st-primary-tint);border:1px solid rgba(196,85,59,.28);border-radius:16px;padding:12px 16px;font-size:15px;font-weight:700;color:var(--st-primary-dark);max-width:640px}
.promo a{margin-left:auto;text-decoration:underline;white-space:nowrap}
/* "Do you run this club?" — the inbound half of the club funnel, deliberately
   quiet: it sits under the listings, not above them. */

.city-chip{margin-left:10px;padding:4px 10px;border-radius:999px;background:var(--st-green-tint);color:var(--st-green);font-family:var(--rubik);font-weight:700;font-size:13px;letter-spacing:.01em;white-space:nowrap}
.join-box{margin-top:32px;background:var(--st-green-fill);color:var(--on-green);border-radius:var(--radius);padding:22px}
.join-title{font-family:var(--rubik);font-size:21px;font-weight:800;margin:0 0 6px;color:inherit}
.join-lead{margin:0 0 14px;font-size:15px;opacity:.92;max-width:52ch}
.join-form{display:flex;flex-wrap:wrap;gap:8px;max-width:460px}
.join-form .input{flex:1;min-width:200px;background:#fff;color:var(--ink);border-color:transparent}
.join-box .alert{margin-bottom:12px;background:#fff;border-color:transparent}
.join-fine{margin:10px 0 0;font-size:13px;opacity:.78}
.claim-box{margin-top:28px;background:var(--surface);border:1px dashed var(--line-strong);border-radius:16px;padding:14px 16px;max-width:640px;font-size:14px;color:var(--muted-2)}
.claim-box b{display:block;font-family:var(--rubik);font-size:15px;color:var(--ink);margin-bottom:4px}
.claim-box form{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.claim-box .input{flex:1;min-width:180px}
.panel-title{font-size:16px;margin:0 0 2px}
.court-intro{margin:12px 0 0;font-size:15.5px;line-height:1.55;color:var(--soft);max-width:62ch}
/* Buttons stretch to a shared width on a phone: two or three pill buttons of
   whatever their label happens to measure left a ragged stack. */
.court-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
@media(max-width:599px){.court-actions{display:grid;grid-template-columns:1fr}.court-actions .btn{width:100%}}
.btn-outline{background:var(--surface);color:var(--ink);border:1.5px solid var(--line-strong);font-weight:700}
.btn-outline:hover{border-color:var(--st-primary);color:var(--st-primary)}
/* One card of label/value rows rather than a card per fact. Nine bordered
   boxes, each holding a single word, filled most of a phone screen; as rows
   the values line up down the right edge and the whole block is glanceable. */
.fact-list{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:0;max-width:640px}
.fact{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 16px;border-top:1px solid var(--line)}
.fact:first-child{border-top:none}
.fact dt{font-size:14px;font-weight:600;color:var(--muted);flex:none}
.fact dd{margin:0;font-size:15px;font-weight:700;text-align:right;min-width:0;overflow-wrap:anywhere}
.fact dd a{color:var(--st-primary)}
.ulink{color:var(--st-primary);font-weight:700;text-decoration:underline}
.nearby{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;max-width:640px}
.nearby-item{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 16px;border-top:1px solid var(--line)}
.nearby-item:first-child{border-top:none}
.nearby-item:hover{background:var(--surface-2)}
.nearby-name{font-family:var(--rubik);font-weight:700;font-size:15px}
.nearby-dist{font-size:13px;color:var(--muted);font-weight:500;flex:none}
.home-latest{margin-top:28px;padding:0 12px}
.home-latest-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.home-latest-head h2{font-family:var(--rubik);font-weight:800;font-size:20px;color:var(--st-green);margin:0}
.link-all{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--st-primary);white-space:nowrap}
.link-all span{transition:transform .15s ease}
.link-all:hover span{transform:translateX(3px)}
@media(min-width:900px){.home-latest{padding:0}.home-latest-head h2{font-size:24px}}
:focus-visible{outline:2px solid var(--st-primary);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* site footer */
.site-footer{margin-top:48px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:20px;font-size:13px;color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 18px}
.foot-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px}
/* The other editions. Sits between the links and the colophon, a shade quieter
   than both — it is a signpost off the site, not one of its own sections. */
.foot-cities{text-align:center;font-size:12.5px;margin-top:-8px}
.site-footer a{text-decoration:underline}
.site-footer a:hover{color:var(--st-primary)}
.site-footer .lang a{text-decoration:none}
/* The donation link sits with the other footer links, one shade warmer so it
   reads as an offer rather than fine print — but no heavier than 13px. */
.site-footer .foot-support{color:var(--st-primary);text-decoration-style:dotted}

/* support / donation page */
.support{text-align:center}
.support-ball{font-size:44px;line-height:1}
/* .legal a underlines every link in the body copy; the CTA is a button. */
.support .btn{margin-top:8px;color:#fff;text-decoration:none}
.support-note{font-size:13.5px;margin-top:14px}

/* prank "access blocked" overlay (target account) */
html.prank-lock,html.prank-lock body{overflow:hidden!important}
.prank-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 50% 28%,#C4553B 0%,#1B4332 100%);animation:prank-fade .35s ease both}

.prank-page{flex-direction:column;gap:18px}
.prank-out{font-family:var(--rubik);font-weight:700;font-size:14px;color:#fff;opacity:.75;text-decoration:underline;text-underline-offset:3px}
.prank-out:hover{opacity:1}
@keyframes prank-fade{from{opacity:0}to{opacity:1}}
.prank-card{position:relative;max-width:400px;width:100%;background:var(--bg);border-radius:28px;padding:32px 26px 26px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:prank-pop .5s cubic-bezier(.2,1.3,.4,1) both}
@keyframes prank-pop{from{transform:scale(.6) rotate(-6deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.prank-stamp{position:absolute;top:14px;right:-6px;background:var(--danger);color:#fff;font-family:var(--rubik);font-weight:800;font-size:12.5px;letter-spacing:.5px;padding:7px 13px;border-radius:6px;transform:rotate(8deg);box-shadow:0 6px 16px rgba(179,38,30,.5);animation:prank-slam .45s .3s cubic-bezier(.2,1.4,.4,1) both}
@keyframes prank-slam{0%{transform:rotate(8deg) scale(2.6);opacity:0}60%{opacity:1}100%{transform:rotate(8deg) scale(1);opacity:1}}
.prank-photo{position:relative;width:190px;height:190px;margin:6px auto 18px;border-radius:24px;overflow:hidden;border:5px solid var(--knob);box-shadow:0 12px 30px rgba(0,0,0,.28);animation:prank-wiggle 1.4s ease-in-out infinite}
.prank-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.prank-emoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:96px;background:var(--st-primary-tint)}
@keyframes prank-wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.prank-title{font-family:var(--rubik);font-weight:800;font-size:25px;color:var(--st-green);margin-bottom:8px}
.prank-text{font-size:15.5px;line-height:1.5;color:var(--soft)}
.prank-text b{color:var(--st-primary)}
.prank-sub{margin-top:14px;font-family:var(--rubik);font-weight:700;font-size:14px;color:var(--st-primary)}
.prank-close{margin-top:20px;background:var(--st-green-fill);color:var(--on-green);border:none;border-radius:999px;font-family:var(--rubik);font-weight:700;font-size:14px;padding:10px 18px;cursor:pointer}
.prank-close:hover{background:#153728}

/* my listings (profile) + owner box (listing detail) */
.my-listings{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.my-listing{display:flex;align-items:center;gap:12px;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.my-listing-main{font-weight:700;font-size:14.5px;line-height:1.3;flex:1}
.my-listing form{margin:0}
.owner-box{background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;padding:16px}
.owner-box-head{font-family:var(--rubik);font-weight:800;font-size:15px}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:var(--danger-hover)}

/* admin — one tab on screen at a time */
.atabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:16px 0 4px;padding-bottom:2px}
.atabs::-webkit-scrollbar{display:none}
.atabs a{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--muted-2);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:8px 15px;white-space:nowrap}
.atabs a:hover{border-color:var(--st-green);color:var(--st-green)}
.atabs .atab-on{background:var(--st-green-fill);border-color:var(--st-green-fill);color:var(--on-green)}
.atab-badge{background:var(--st-primary-fill);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:1px 7px}
/* The admin city picker: smaller and quieter than the tabs under it, because it
   governs them rather than sitting beside them. */
.acity{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:12px 0 0}
.acity a{font-size:12.5px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.acity a:hover{border-color:var(--st-green);color:var(--st-green)}
.acity .acity-on{background:var(--st-green-fill);border-color:var(--st-green-fill);color:var(--on-green)}
.admin-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:18px 0 10px}
.acard{background:var(--surface);border-radius:14px;padding:14px 16px;border:1px solid var(--line)}
.acard b{font-size:26px;font-family:var(--rubik)}
.acard span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.apanel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:6px 16px 14px}
.arow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--soft)}
.arow:last-of-type{border-bottom:none}
.arow b{font-family:var(--rubik);font-size:17px;color:var(--ink)}
.atable-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line);margin-top:10px}
.atable{width:100%;border-collapse:collapse;background:var(--surface);font-size:14px;min-width:640px}
.atable th{text-align:left;padding:10px 12px;background:var(--st-green-fill);color:var(--on-green);font-size:12.5px;white-space:nowrap}
.atable td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.atable tr:hover td{background:var(--surface-2)}
.btn-xs{padding:5px 12px;font-size:12.5px}

.apager{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:12px}
.apager a,.apager-on,.apager-off,.apager-gap{min-width:32px;padding:6px 10px;border-radius:9px;font-size:14px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.apager a{color:var(--muted-2);background:var(--surface);border:1px solid var(--line-strong)}
.apager a:hover{border-color:var(--st-green);color:var(--st-green)}
.apager-on{background:var(--st-green-fill);color:var(--on-green);border:1px solid var(--st-green-fill)}
.apager-off{color:var(--muted);background:var(--surface);border:1px solid var(--line);opacity:.5}
.apager-gap{color:var(--muted);min-width:0;padding:6px 2px}
.apager-count{margin-left:auto;font-size:12.5px;color:var(--muted)}



.feed-live{min-height:46px}
.feed-live .apager{display:none}
.feed-spin,.feed-end{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;font-size:13.5px;color:var(--muted)}
.feed-ball{width:15px;height:15px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--st-green);animation:feed-turn .7s linear infinite}
@keyframes feed-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.feed-ball{animation-duration:2.4s}}

/* admin → Статистика. Panels of the same width in a fluid grid, each holding
   either a bar list, a column chart or a small two-column table. Nothing here
   is interactive on purpose: numbers you read, not a dashboard you drive. */
.snav{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.snav a{font-size:13px;font-weight:700;color:var(--soft);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.snav a:hover{border-color:var(--line-strong);color:var(--ink)}
.sintro{margin:-6px 0 0;max-width:60ch}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px;margin-top:10px}
.spanel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}

.spanel-wide{grid-column:1/-1}
.spanel h3{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 12px}
.spanel .arow{padding:9px 0;font-size:14px}
.ssub{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:16px 0 10px;padding-top:12px;border-top:1px solid var(--line-soft)}
.sbar{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:14px;color:var(--soft);margin-bottom:11px}
.sbar:last-child{margin-bottom:2px}
.sbar-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbar-v{font-family:var(--rubik);font-weight:700;color:var(--ink);white-space:nowrap}
.sbar-v i{font-style:normal;font-weight:500;color:var(--muted);font-size:12.5px;margin-left:6px}
.sbar .track{grid-column:1/-1;height:6px;border-radius:999px;background:var(--st-green-tint)}
.sbar .fill{display:block;height:100%;border-radius:999px;background:var(--st-green)}

.schart{display:flex;align-items:flex-end;gap:3px;height:104px;margin:22px 0 6px}
.schart span{position:relative;flex:1;border-radius:3px 3px 0 0;background:var(--st-green)}
.schart .wknd{background:var(--st-green-tint)}

.schart b{position:absolute;bottom:100%;left:-4px;right:-4px;padding-bottom:4px;text-align:center;font-family:var(--rubik);font-size:11.5px;font-weight:700;color:var(--soft);z-index:1;text-shadow:0 0 3px var(--surface),0 0 3px var(--surface),0 0 2px var(--surface)}
.schart-dense b{font-size:10px;left:-3px;right:-3px}
.schart span:first-child b{left:0;text-align:left}
.schart span:last-child b{right:0;text-align:right}
.sticks{display:flex;gap:3px;font-size:11.5px;color:var(--muted)}

.sticks span{flex:1;text-align:center;white-space:nowrap}
.sticks .wknd{color:var(--faint)}

@media(max-width:640px){
  .schart b{font-size:10.5px;letter-spacing:-.02em;left:-6px;right:-6px}
  .schart-dense b{font-size:10px;left:-8px;right:-8px}
  .schart-dense span b{display:none}
  .schart-dense span:nth-child(3n+1) b{display:block}
}
@media(max-width:480px){
  .schart-big:not(.schart-dense) span:nth-last-child(even) b{display:none}
}
.stable{width:100%;border-collapse:collapse;font-size:14px;color:var(--soft)}
.stable td{padding:7px 0;border-top:1px solid var(--line-soft);vertical-align:top}
.stable tr:first-child td{border-top:none}
.stable .num{text-align:right;font-family:var(--rubik);font-weight:700;color:var(--ink);white-space:nowrap}
.stable .num .count{font-weight:500}
.son{color:var(--st-green);font-weight:700}
.soff{color:var(--muted);font-weight:600}

.strend{font-style:normal;font-family:var(--rubik);font-size:13px;font-weight:700;margin-left:8px;color:var(--muted)}
.strend.sup{color:var(--st-green)}
.strend.sdown{color:var(--danger-ink)}

/* legal pages */
.legal{max-width:680px;margin:0 auto}
.legal h1{font-size:26px}
.legal h2{font-size:19px;margin:28px 0 10px}
.legal p,.legal li{font-size:15px;line-height:1.6;color:var(--soft)}
.legal ul{padding-left:22px;margin:10px 0}
.legal li{margin-bottom:8px}
.legal a{color:var(--st-primary);text-decoration:underline}
.legal-link{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:var(--st-primary);text-decoration:underline}
/* The footer's "Cookie settings" sits among 13px links, not on its own. */
.site-footer .ck-link{font-size:13px}

/* Collapsible section — keeps optional form fields out of the first read of a
   page without hiding them behind a separate screen. */
.disclosure{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.disclosure>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:14px 16px;font-size:15px;font-weight:700}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.disclosure[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.disclosure>summary:hover{background:var(--surface-2)}
.disclosure-body{display:flex;flex-direction:column;gap:20px;padding:2px 16px 18px;border-top:1px solid var(--line)}
.disclosure-coach{background:var(--gold-soft);border-color:var(--gold-line)}
.disclosure-coach>summary{color:var(--gold)}

.disclosure-danger>summary{color:var(--danger-ink)}

/* Notification checkboxes in profile settings */
.check-row{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--soft);font-weight:500;cursor:pointer;padding:6px 0}
.check-row input{width:18px;height:18px;accent-color:var(--st-green);flex:none}
/* A hint that explains the checkbox above it lines up with that checkbox's
   label, not with the field's left edge. */
.check-row+.photo-hint{padding-left:28px}

/* Profile settings — one tab on screen at a time.
   The tabs are real links (/profil?tab=…) so the page still works with no JS;
   the script on the page upgrades them to an instant in-place switch. Below
   480px only the open tab keeps its label, which is what lets four of them sit
   in one row on a phone instead of scrolling. */
.ptabs{display:flex;gap:4px;margin:16px 0 18px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;overflow-x:auto;scrollbar-width:none;max-width:560px}
.ptabs::-webkit-scrollbar{display:none}
.ptab{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border-radius:999px;font-size:14px;font-weight:700;color:var(--muted-2);white-space:nowrap;transition:background .15s,color .15s}
.ptab:hover{color:var(--ink)}
.ptab-on{background:var(--surface);color:var(--st-green);box-shadow:var(--shadow-1)}
.ptab svg{width:19px;height:19px;flex:none}
@media(max-width:479px){.ptab{padding:9px 12px}.ptab span{display:none}.ptab-on span{display:inline}}
.ptab-panel{display:flex;flex-direction:column;gap:14px}
/* Small caps heading that groups a couple of panels inside one tab. */
.set-head{font-family:var(--rubik);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:8px 0 -4px 4px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 16px;font-size:15px;font-weight:700}

/* Light / dark / system picker: three cards, each showing a miniature of the
   page it switches to, so the choice can be made without reading. */
.theme-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.theme-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px 5px 11px;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:16px;cursor:pointer;font-size:13px;font-weight:700;line-height:1.25;text-align:center;overflow-wrap:anywhere;color:var(--muted-2);transition:border-color .15s,color .15s}
.theme-opt input{position:absolute;opacity:0;pointer-events:none}
.theme-opt:has(input:checked){border-color:var(--st-green);color:var(--st-green)}
.tsw{width:100%;max-width:66px;aspect-ratio:8/5;border-radius:9px;border:1px solid var(--line-strong);position:relative;overflow:hidden}
.tsw::before{content:'';position:absolute;left:7px;top:8px;width:24px;height:5px;border-radius:3px;background:currentColor}
.tsw::after{content:'';position:absolute;left:7px;top:18px;right:7px;height:4px;border-radius:3px;background:currentColor;opacity:.45}
.tsw-light{background:#FAF5EE;color:#1B4332}
.tsw-dark{background:#181411;color:#79C39C}
.tsw-auto{background:linear-gradient(100deg,#FAF5EE 0 50%,#181411 50% 100%);color:#C4553B}

/* Reliability signal */
.rel-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--st-green);background:var(--st-green-tint);border-radius:999px;padding:6px 14px}
.rel-dot{font-size:12px;font-weight:700;color:var(--st-green)}

/* "Кажи ми, когато…" — the saved-filter offer, and the weekly ping. Both are a
   sentence with one action after it, so they share a shape: a row on a wide
   screen, stacked on a phone, where the button goes full width rather than
   ending up as a stub in the corner. */
.watch,.ping{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;padding:14px 16px}
.watch form,.ping form{display:contents}
.watch-txt{flex:1 1 220px;font-size:14.5px;line-height:1.45;font-weight:600;color:var(--soft)}
.watch-on{background:var(--st-green-tint);border-color:transparent}
.watch-on .watch-txt{color:var(--st-green)}
/* The compact variant rides under the filter row on a board that has results,
   where it is an aside rather than the point. */
.watch-sm{padding:10px 14px;border-radius:14px;margin-top:12px}
.watch-sm .watch-txt{font-size:13.5px}
.ping{border-style:dashed;border-color:rgba(196,85,59,.45)}
.ping-on{border-style:solid;background:var(--st-green-tint);border-color:transparent}
.ping-txt{flex:1 1 240px;display:flex;flex-direction:column;gap:3px;font-size:14px;line-height:1.4;color:var(--soft)}
.ping-txt b{font-family:var(--rubik);font-size:15.5px;font-weight:700;color:var(--ink)}
.ping-on .ping-txt,.ping-on .ping-txt b{color:var(--st-green)}
/* On a phone the action takes the full width rather than ending up as a stub in
   the corner — except the extra-small ghost buttons ("Спри"), which are the way
   out of something and should not be the loudest thing in the card. */
@media(max-width:520px){
  .watch .btn:not(.btn-xs),.ping .btn:not(.btn-xs){width:100%}
}

/* The consent card, shown once on the ad someone has just published. Green
   because it is an offer rather than a warning, and full width because it is the
   one thing on that screen that wants answering. */
.consent{display:flex;flex-direction:column;gap:12px;background:var(--st-green-tint);border-radius:18px;padding:16px;margin-top:16px}
.consent-head{font-family:var(--rubik);font-size:16px;font-weight:800;line-height:1.35;color:var(--st-green)}
.consent .check-row{color:var(--st-green)}
.consent .count{color:var(--st-green);opacity:.75}

/* What is here for you — the panel a new player lands on once the profile is
   filled in, and the top of their board. Ads, never a roster of people. */
.foryou{display:flex;flex-direction:column;gap:14px;background:var(--st-green-tint);border-radius:20px;padding:18px 16px}
.foryou-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.foryou-head h2{font-family:var(--rubik);font-size:18px;font-weight:800;color:var(--st-green);margin:0}
.foryou-head .count{color:var(--st-green);opacity:.8}
.foryou-none{font-size:14.5px;line-height:1.5;font-weight:600;color:var(--st-green);margin:0}

/* Player-vs-player safety actions */
.safety-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
.safety-row form{display:inline}

/* Chat overflow menu (block / report) */
.chat-menu{margin-left:auto;position:relative}
.chat-menu summary{list-style:none;cursor:pointer;font-size:22px;line-height:1;color:var(--muted);padding:0 6px}
.chat-menu summary::-webkit-details-marker{display:none}
.chat-menu-pop{position:absolute;right:0;top:28px;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-2);padding:6px;z-index:20;min-width:150px}
.chat-menu-pop form{display:block}
.chat-menu-pop button{width:100%;text-align:left;background:none;border:0;font:inherit;font-size:14px;font-weight:600;color:var(--ink);padding:8px 10px;border-radius:8px;cursor:pointer}
.chat-menu-pop button:hover{background:var(--surface-2)}
.chat-note{margin:8px 16px;background:var(--st-green-tint);color:var(--st-green);border-radius:12px;padding:10px 14px;font-size:13.5px;font-weight:600}

/* "Did you play?" prompt */
.chat-fb{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 16px 10px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;font-size:14px;font-weight:600;color:var(--soft)}
.chat-fb-btns{display:flex;gap:8px;margin-left:auto}
.chat-fb-btns form{display:inline}

/* coaches */
.card-coach{background:var(--surface);border:1px solid var(--gold-line);box-shadow:var(--shadow-1)}
.tag-coach{background:var(--gold-tint);color:var(--gold)}
.tag-trial{background:var(--st-green-tint);color:var(--st-green);font-weight:700}
.card-title-coach{font-size:18px;line-height:1.25;color:var(--st-green)}
.card-price{font-family:var(--rubik);font-weight:800;font-size:16px;color:var(--st-primary);margin-top:4px}
.card-rating{display:block;margin-top:2px}
.stars{color:var(--gold-star);letter-spacing:1px;font-size:13px;white-space:nowrap}
.stars-off{color:var(--track)}
.rating{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--soft);flex-wrap:wrap}
.rating b{font-family:var(--rubik);font-weight:800;color:var(--ink)}
.rating-n{color:var(--muted);font-weight:500}
.rating-none{color:var(--muted);font-weight:500;font-size:13px}
.rating-sm,.rating-sm .stars{font-size:12px}
.rating-lg{font-size:15px}
.rating-lg .stars{font-size:19px}
.coach-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--gold);background:var(--gold-tint);border-radius:999px;padding:5px 13px}

/* coach ad detail: terms */
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin:0}
.term{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.term dt{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.term dd{margin:3px 0 0;font-size:15.5px;font-weight:600}
.term-hi{background:var(--st-green-tint);border-color:var(--green-line)}
.term-hi dd{color:var(--st-green);font-family:var(--rubik);font-weight:800}

/* reviews */
.rev-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.rev-score{font-family:var(--rubik);font-weight:800;font-size:30px;line-height:1}
.rev-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.rev{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 15px}
.rev-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rev-name{font-size:14.5px;font-weight:700}
.rev-when{font-size:12.5px;color:var(--muted);font-weight:500;margin-left:auto}
.rev-ok{font-size:11.5px;font-weight:800;color:var(--st-green);background:var(--st-green-tint);border-radius:999px;padding:2px 9px;white-space:nowrap}
.rev-body{margin:7px 0 0;font-size:15px;line-height:1.5;color:var(--soft);white-space:pre-wrap;overflow-wrap:anywhere}
.rev-mine{border-color:var(--green-line-2);background:var(--st-green-tint)}
/* Star picker: radios laid out right-to-left so plain CSS sibling selectors can
   light up the chosen star and every one before it. */
.star-pick{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.star-pick input{position:absolute;opacity:0;width:1px;height:1px}
.star-pick label{font-size:32px;line-height:1;color:var(--track);cursor:pointer;padding:0 1px;transition:color .1s}
.star-pick label:hover,.star-pick label:hover~label,
.star-pick input:checked~label{color:var(--gold-star)}
.star-pick input:focus-visible~label{outline:2px solid var(--st-primary);outline-offset:2px}

/* Players directory grid */
.players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:14px}
.player-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;transition:border-color .15s,transform .15s}
.player-card:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.player-card-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.player-card-name{font-size:15.5px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.player-card-districts{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* cookie consent — banner + preferences modal (src/consent.js) */
.ck-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line-strong);box-shadow:var(--shadow-2);padding:16px 20px calc(16px + env(safe-area-inset-bottom))}
.ck-bar-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ck-bar-txt{flex:1 1 460px;min-width:0}
.ck-bar-txt h2{font-size:18px;color:var(--ink);margin-bottom:5px}
.ck-bar-txt p{margin:0;font-size:14px;line-height:1.5;color:var(--soft);max-width:72ch}
.ck-bar-btns{display:flex;gap:10px;flex:0 0 auto}
.btn-green{background:var(--st-green-fill);color:var(--on-green)}
.btn-green:hover{box-shadow:0 8px 20px rgba(27,67,50,.28)}
/* Phones: the three choices stack to full width rather than shrinking to
   unreadable pills, and "Accept" stays last so it is never the accidental tap. */
@media(max-width:719px){
  .ck-bar-btns{width:100%;display:grid;grid-template-columns:1fr;gap:8px}
  .ck-bar-txt p{font-size:13.5px}
}

.ck-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.ck-veil{position:absolute;inset:0;background:rgba(20,16,15,.55)}
.ck-card{position:relative;display:flex;flex-direction:column;width:100%;max-width:840px;max-height:calc(100dvh - 40px);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow-2);overflow:hidden}
html.ck-lock,html.ck-lock body{overflow:hidden}
.ck-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.ck-hd h2{font-size:19px;color:var(--ink)}
.ck-x{background:none;border:none;cursor:pointer;font-size:26px;line-height:1;color:var(--muted);padding:0 4px}
.ck-x:hover{color:var(--st-primary)}
.ck-body{flex:1;overflow-y:auto;padding:4px 22px 8px;-webkit-overflow-scrolling:touch}
.ck-intro{font-size:14px;line-height:1.55;color:var(--soft);margin:16px 0 4px}
.ck-more-btn{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;color:var(--st-primary)}
.ck-cat{border-top:1px solid var(--line);padding:14px 0}
.ck-cat-hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ck-acc{display:inline-flex;align-items:center;gap:9px;background:none;border:none;padding:0;cursor:pointer;font-family:var(--rubik);font-weight:800;font-size:16px;color:var(--ink)}
.ck-chev{display:inline-block;color:var(--muted);font-size:18px;line-height:1;transition:transform .15s ease}
.ck-acc[aria-expanded="true"] .ck-chev{transform:rotate(90deg)}
.ck-always{font-size:13px;font-weight:700;color:var(--st-green);flex:none}
.ck-des{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--soft)}
.ck-sw{position:relative;display:inline-flex;cursor:pointer;flex:none}
.ck-sw input{position:absolute;opacity:0;width:0;height:0}
.ck-sw input:checked~.switch{background:var(--st-green-fill)}
.ck-sw input:checked~.switch::after{transform:translateX(19px)}
.ck-sw input:focus-visible~.switch{outline:2px solid var(--st-primary);outline-offset:2px}
.ck-det{margin-top:12px;overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.ck-table{width:100%;border-collapse:collapse;font-size:13px;min-width:460px;background:var(--surface-2)}
.ck-table th{text-align:left;font-weight:700;color:var(--muted-2);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.ck-table td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--soft);vertical-align:top}
.ck-table tr:last-child td{border-bottom:none}
.ck-table code{font-size:12.5px;color:var(--ink);font-weight:700;white-space:nowrap}
.ck-ft{display:flex;gap:10px;padding:16px 22px;border-top:1px solid var(--line)}
.ck-ft .btn{flex:1}
@media(max-width:719px){
  .ck-modal{padding:0;align-items:flex-end}
  .ck-card{max-height:88dvh;border-radius:var(--radius) var(--radius) 0 0;border-bottom:none}
  .ck-ft{flex-direction:column;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* The footer / privacy-policy links that reopen the modal. */
.ck-link{background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:600;color:var(--muted);text-decoration:underline;padding:0}
.ck-link:hover{color:var(--st-primary)}


/* iOS app install banner — homepage only, shown once/day (src/iosPromo.js) */
.iap-bar{position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--surface);border-top:1px solid var(--line-strong);box-shadow:var(--shadow-2);padding:14px 20px calc(14px + env(safe-area-inset-bottom))}
.iap-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:14px}
.iap-icon{border-radius:12px;flex:none}
.iap-txt{flex:1;min-width:0}
.iap-title{font-family:var(--rubik);font-weight:800;font-size:15px;color:var(--ink)}
.iap-sub{font-size:13px;line-height:1.4;color:var(--soft);margin-top:2px}
.iap-install{flex:none}
.iap-x{flex:none;background:none;border:none;cursor:pointer;font-size:24px;line-height:1;color:var(--muted);padding:0 2px}
.iap-x:hover{color:var(--st-primary)}
@media(max-width:719px){
  .iap-sub{display:none}
  .iap-title{font-size:14px}
}