/* Дом клуба: тёмно-синий и золото, спокойная «премиальная» подача в духе Apple. SF на устройствах Apple, Onest как запасной. */
@font-face { font-family:"Onest"; font-weight:100 900; font-display:swap; src:url(fonts/onest-cyrillic.woff2) format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Onest"; font-weight:100 900; font-display:swap; src:url(fonts/onest-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root { color-scheme:light; --bg:#F5F5F7; --card:#FFFFFF; --ink:#1D1D1F; --muted:#6E6E73; --hair:rgba(0,0,0,.10); --hair2:rgba(0,0,0,.06);
  --navy:#1D3557; --on-navy:#FFFFFF; --navy-soft:rgba(29,53,87,.09); --gold:#C8963E; --gold-ink:#8A6420; --gold-hi:#E8CA85; --gold-lo:#B98A32;
  --free:#E7F3EA; --free-line:#2E7D4F; --busy:#F1E8E8; --busy-ink:#9A5A5A; --glass:rgba(255,255,255,.78); --chair:#D9DCE2;
  --shadow:0 1px 1px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.07); }
@media not all { :root { --bg:#000; --card:#1C1C1E; --ink:#F5F5F7; --muted:#98989F; --hair:rgba(255,255,255,.14); --hair2:rgba(255,255,255,.08);
  --navy:#3C6AA6; --on-navy:#FFFFFF; --navy-soft:rgba(100,150,215,.18); --gold:#D4A24B; --gold-ink:#E3BE7A; --gold-hi:#F0D8A0; --gold-lo:#C08F36;
  --free:#16301F; --free-line:#6FCB8F; --busy:#2E2020; --busy-ink:#E0A0A0; --glass:rgba(28,28,30,.78); --chair:#3A3A3F; --shadow:0 1px 1px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5); } }
:root[data-theme=dark] { --bg:#000; --card:#1C1C1E; --ink:#F5F5F7; --muted:#98989F; --hair:rgba(255,255,255,.14); --hair2:rgba(255,255,255,.08);
  --navy:#3C6AA6; --on-navy:#FFFFFF; --navy-soft:rgba(100,150,215,.18); --gold:#D4A24B; --gold-ink:#E3BE7A; --gold-hi:#F0D8A0; --gold-lo:#C08F36;
  --free:#16301F; --free-line:#6FCB8F; --busy:#2E2020; --busy-ink:#E0A0A0; --glass:rgba(28,28,30,.78); --chair:#3A3A3F; --shadow:0 1px 1px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,"SF Pro Display","SF Pro Text",Onest,system-ui,"Segoe UI",sans-serif; font-feature-settings:"tnum" 1; line-height:1.4; font-size:17px; padding-bottom:120px; -webkit-font-smoothing:antialiased; }
button, input { font:inherit; color:inherit; } button { cursor:pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, .desk:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* шапка: стекло, название, переключатель разделов */
.top { position:sticky; top:0; z-index:6; background:var(--glass); -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px); border-bottom:1px solid var(--hair2); padding:10px 20px; }
.bar { max-width:980px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px 16px; }
.brand { color:var(--ink); text-decoration:none; font-weight:600; letter-spacing:-.01em; font-size:17px; }
.who { display:flex; align-items:center; justify-content:flex-end; white-space:nowrap; gap:10px; font-size:14px; color:var(--muted); }
.who input { width:110px; padding:7px 10px; border:1px solid var(--hair); border-radius:10px; background:var(--card); }
.who button { border:0; background:none; color:var(--navy); font-weight:600; padding:8px 4px; min-height:36px; }
.seg { display:inline-flex; gap:2px; padding:3px; border-radius:12px; background:var(--navy-soft); }
.seg button { border:0; background:none; color:var(--muted); padding:0 18px; min-height:36px; border-radius:10px; font-size:14px; font-weight:500; white-space:nowrap; transition:background .15s, color .15s; }
.seg button:hover:not(.on) { color:var(--ink); }
.seg button.on { background:var(--card); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.14), 0 0 0 .5px var(--hair2); }

main { max-width:980px; margin:0 auto; padding:26px 20px; } .tab { display:none; } .tab.on { display:block; }
.lt h1, .lt h2 { margin:0; font-size:clamp(32px,6vw,44px); line-height:1.05; font-weight:700; letter-spacing:-.035em; } .lt p { margin:8px 0 0; color:var(--muted); font-size:17px; max-width:560px; }
.lt { margin-bottom:20px; }

/* главная */
.hero-rule { width:44px; height:2px; margin:18px 0 0; border-radius:2px; background:linear-gradient(90deg,var(--gold-hi),var(--gold-lo)); }
.next { margin:26px 0 0; padding:22px 24px; border-radius:20px; background:var(--navy); color:var(--on-navy); position:relative; overflow:hidden; box-shadow:var(--shadow); }
.next::after { content:""; position:absolute; left:24px; right:24px; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold-hi),transparent); opacity:.8; }
.next small { display:block; opacity:.75; font-size:13px; letter-spacing:.02em; margin-bottom:6px; } .next b { display:block; font-size:clamp(26px,5vw,34px); letter-spacing:-.03em; line-height:1.1; font-weight:700; } .next span { display:block; margin-top:6px; opacity:.85; }
.empty { margin:26px 0 0; color:var(--muted); }
.group { margin:26px 0 0; background:var(--card); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.place { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; background:none; border:0; padding:17px 20px; min-height:68px; position:relative; }
.place + .place::before { content:""; position:absolute; top:0; left:20px; right:0; height:1px; background:var(--hair2); }
.place .t b { display:block; font-size:19px; font-weight:600; letter-spacing:-.02em; } .place .t span { color:var(--muted); font-size:15px; } .place .chev { color:var(--muted); opacity:.6; font-size:22px; }
.place:hover { background:var(--navy-soft); }
.sec { margin:30px 0 8px 4px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.bk { display:flex; flex-wrap:wrap; gap:4px 14px; justify-content:space-between; align-items:center; padding:14px 20px; position:relative; }
.bk + .bk::before { content:""; position:absolute; top:0; left:20px; right:0; height:1px; background:var(--hair2); } .bk b { font-weight:600; } .bk .t { color:var(--muted); font-size:15px; display:block; }
.link { border:0; background:none; color:#C0392B; padding:10px 0; min-height:44px; font-weight:500; } :root[data-theme=dark] .link { color:#FF8A80; } .link:disabled { color:var(--muted); opacity:.6; }

/* выбор дня */
.days { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 14px; scrollbar-width:none; margin:0 -2px; }
.days button { flex:none; width:54px; height:68px; border:0; border-radius:16px; background:var(--card); display:grid; place-items:center; align-content:center; gap:2px; box-shadow:0 0 0 1px var(--hair2); transition:transform .12s; }
.days button small { font-size:12px; color:var(--muted); text-transform:lowercase; } .days button b { font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1; }
.days button.we small { color:var(--gold-ink); } .days button.on { background:var(--navy); box-shadow:0 2px 10px rgba(29,53,87,.35); } .days button.on small, .days button.on b { color:var(--on-navy); } .days button.on small { opacity:.8; }

/* схема коворкинга: тонкие линии */
.split { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:20px; align-items:start; } @media (max-width:860px) { .split { grid-template-columns:1fr; } }
.plan-wrap, .panel, .block { background:var(--card); border-radius:20px; padding:18px; box-shadow:var(--shadow); }
#plan { width:100%; height:auto; display:block; }
#plan .wall { fill:none; stroke:var(--ink); stroke-opacity:.55; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
#plan .window { stroke:#7EA6D6; stroke-width:3; stroke-linecap:round; } #plan .leaf { stroke:var(--gold); stroke-width:1.6; } #plan .swing { fill:none; stroke:var(--gold); stroke-width:1; stroke-dasharray:3 3; }
#plan .zone { fill:var(--muted); font-size:11px; font-weight:600; letter-spacing:.18em; text-anchor:middle; text-transform:uppercase; pointer-events:none; }
#plan .chair { fill:var(--chair); } #plan text.num { font-size:16px; font-weight:600; text-anchor:middle; pointer-events:none; fill:var(--free-line); letter-spacing:-.01em; }
.desk { cursor:pointer; } .desk .top { fill:var(--free); stroke:var(--free-line); stroke-width:1; stroke-opacity:.7; transition:stroke-width .12s; }
.desk.part .top { fill:var(--card); stroke:url(#gold); stroke-width:1.8; stroke-opacity:1; } #plan .desk.part text.num { fill:var(--gold-ink); }
.desk.full .top { fill:var(--busy); stroke:var(--busy-ink); stroke-opacity:.5; } #plan .desk.full text.num { fill:var(--busy-ink); }
.desk.mine .top { fill:var(--navy); stroke:none; } #plan .desk.mine text.num { fill:var(--on-navy); }
.desk .ring { fill:none; stroke:url(#gold); stroke-width:2.2; opacity:0; } .desk.sel .ring { opacity:1; } .desk:hover .top { stroke-width:2; }
.desk.settle { animation:settle .24s ease-out; transform-box:fill-box; transform-origin:center; } @keyframes settle { 0% { transform:scale(1.06); } 60% { transform:scale(.97); } 100% { transform:scale(1); } }
.legend { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--muted); margin-top:12px; } .legend span { display:inline-flex; align-items:center; gap:7px; }
.l { width:14px; height:14px; border-radius:5px; flex:none; display:inline-block; }
.l.free { background:var(--free); box-shadow:inset 0 0 0 1px var(--free-line); } .l.part { background:var(--card); box-shadow:inset 0 0 0 1.6px var(--gold); } .l.mine { background:var(--navy); } .l.full { background:var(--busy); box-shadow:inset 0 0 0 1px var(--busy-ink); }

/* шкала дня */
.panel h3 { margin:0; font-size:22px; font-weight:700; letter-spacing:-.025em; } .muted { color:var(--muted); } .panel .muted { margin:2px 0 0; font-size:15px; }
.tl { display:grid; grid-template-columns:repeat(auto-fill,minmax(156px,1fr)); gap:8px; margin-top:16px; }
.panel .tl { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.cell { min-height:60px; border:0; border-radius:14px; background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 1px var(--hair); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; padding:8px 14px; transition:transform .1s; text-align:left; }
.cell b { font-size:17px; font-weight:600; letter-spacing:-.015em; line-height:1.1; white-space:nowrap; } .cell small { font-size:12px; color:var(--muted); white-space:nowrap; }
.cell:active:not([disabled]) { transform:scale(.97); }
.cell.part { box-shadow:inset 0 0 0 1.6px var(--gold); } .cell.part small { color:var(--gold-ink); }
.cell.busy { background:var(--busy); color:var(--busy-ink); box-shadow:none; cursor:default; } .cell.busy small { color:var(--busy-ink); opacity:.8; }
.cell.mine { background:var(--navy-soft); color:var(--navy); box-shadow:none; cursor:default; } .cell.mine small { color:var(--navy); } :root[data-theme=dark] .cell.mine { color:var(--ink); } 
.cell.past { opacity:.38; cursor:default; box-shadow:none; }
.cell.in { background:var(--navy); color:var(--on-navy); box-shadow:0 0 0 2px var(--gold); } .cell.in small { color:var(--on-navy); opacity:.85; }
.tl-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; } .tl-head b { font-size:19px; font-weight:700; letter-spacing:-.02em; } .tl-head span { color:var(--muted); font-size:14px; }
.tl-hint { margin:14px 2px 0; color:var(--muted); font-size:14px; }
.row { display:flex; align-items:center; gap:10px; } .row .muted { font-size:15px; }
input[type=number] { width:84px; padding:10px 12px; border:1px solid var(--hair); border-radius:12px; background:var(--card); min-height:44px; }
.events { margin:8px 0 0; padding:0; list-style:none; } .events li { padding:12px 0; border-bottom:1px solid var(--hair2); font-size:16px; } .events li:last-child { border:0; }
.notice { margin:0 0 16px; padding:12px 16px; border-radius:14px; background:var(--navy-soft); color:var(--ink); font-size:15px; }
h4 { margin:0 0 4px; font-size:17px; letter-spacing:-.015em; }

/* плавающая панель брони */
.sheet { position:fixed; z-index:8; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); max-width:620px; margin:0 auto; padding:14px 14px 14px 20px; border-radius:22px; background:var(--glass); -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px); box-shadow:0 0 0 1px var(--hair2), 0 18px 50px rgba(0,0,0,.20); }
.sheet .in { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 14px; }
.sheet .what b { display:block; font-size:17px; font-weight:600; letter-spacing:-.015em; } .sheet .what span { color:var(--muted); font-size:14px; }
.btn { border:0; border-radius:14px; background:var(--navy); color:var(--on-navy); font-weight:600; padding:0 24px; min-height:50px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.btn:disabled { opacity:.4; cursor:default; } .btn.ghost { background:none; color:var(--navy); box-shadow:inset 0 0 0 1px var(--hair); } :root[data-theme=dark] .btn.ghost { color:var(--ink); } 
.sheet.done .what b::before { content:"✓ "; color:var(--gold); }
.toast { position:fixed; left:50%; bottom:calc(104px + env(safe-area-inset-bottom)); transform:translate(-50%,12px); opacity:0; background:var(--ink); color:var(--bg); padding:11px 18px; border-radius:14px; transition:.2s; max-width:90vw; z-index:9; pointer-events:none; font-size:15px; }
.toast.on { opacity:1; transform:translate(-50%,0); } .toast.err { background:#B3261E; color:#fff; }
@media (max-width:700px) { .bar { grid-template-columns:1fr auto; } .seg { grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:repeat(4,1fr); } .seg button { padding:0 2px; font-size:13px; } .who { grid-row:1; grid-column:2; } }
@media (max-width:520px) { main { padding:20px 16px; } .top { padding:10px 14px 12px; } .sheet { left:8px; right:8px; } }
@media (prefers-reduced-motion: reduce) { .desk.settle { animation:none; } * { transition:none !important; } }