:root{
  --bg:#0A0B0D; --surface:#15181D; --surface-2:#1C2026;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --text:#F4F6F8; --muted:#9AA3AD; --accent:#C8F541; --accent-2:#A6E000; --ink:#0A0B0D;
  --radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;padding-bottom:78px;min-height:100vh;
}
svg{display:block}

.topbar{position:sticky;top:0;z-index:10;background:rgba(10,11,13,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:14px 18px;padding-top:max(14px,env(safe-area-inset-top))}
.logo{display:inline-flex;align-items:center;gap:9px;font-family:'Oswald',sans-serif;font-weight:700;font-size:16px;letter-spacing:.04em}
.logo__mark{width:30px;height:30px;display:grid;place-items:center;background:var(--accent);color:var(--ink);border-radius:8px;font-size:16px}

.screens{padding:18px}
.screen{display:none;animation:fade .25s ease}
.screen.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.screen__title{font-family:'Oswald',sans-serif;font-size:26px;font-weight:700;text-transform:uppercase;line-height:1.05}
.screen__sub{color:var(--muted);font-size:14px;margin:8px 0 20px}

.block{margin-bottom:22px}
.label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:600}

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips--scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.chips--scroll::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:var(--surface);border:1px solid var(--line);color:var(--text);
  padding:12px 16px;border-radius:100px;font-size:14px;font-weight:600;cursor:pointer;transition:.2s;white-space:nowrap}
.chip.sel{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.chip__day{display:flex;flex-direction:column;align-items:center;line-height:1.2;min-width:54px}
.chip__day b{font-size:15px}
.chip__day small{font-size:11px;opacity:.7}

.grid-times{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.tslot{background:var(--surface);border:1px solid var(--line);color:var(--text);padding:13px 0;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:.2s;text-align:center}
.tslot.sel{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.empty{color:var(--muted);font-size:14px;padding:6px 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px/1 'Manrope',sans-serif;
  padding:16px 22px;border-radius:100px;border:1px solid transparent;cursor:pointer;transition:.2s}
.btn--accent{background:var(--accent);color:var(--ink)}
.btn--accent:active{background:var(--accent-2)}
.btn--accent:disabled{opacity:.4;pointer-events:none}
.btn--ghost{background:rgba(255,255,255,.05);color:var(--text);border-color:var(--line-2)}
.btn--block{width:100%;margin-top:6px}

/* кабинет */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:12px}
.card h3{font-family:'Oswald',sans-serif;font-size:17px;text-transform:uppercase;margin-bottom:6px}
.card p{color:var(--muted);font-size:14px}
.card__row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.badge{font-size:11px;font-weight:700;padding:5px 10px;border-radius:100px;text-transform:uppercase;letter-spacing:.04em}
.badge--ok{background:rgba(200,245,65,.16);color:var(--accent)}
.badge--wait{background:rgba(255,255,255,.08);color:var(--muted)}
.cab-empty{text-align:center;color:var(--muted);padding:40px 10px}
.cab-empty svg{margin:0 auto 14px;color:var(--accent)}
.skeleton{height:74px;border-radius:var(--radius);margin-bottom:12px;background:linear-gradient(90deg,var(--surface),var(--surface-2),var(--surface));background-size:200% 100%;animation:sk 1.3s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* квиз */
.quiz__progress{height:6px;background:var(--surface);border-radius:100px;overflow:hidden;margin-bottom:22px}
.quiz__progress span{display:block;height:100%;width:0;background:var(--accent);border-radius:100px;transition:width .3s}
.quiz__q{font-family:'Oswald',sans-serif;font-size:21px;font-weight:600;line-height:1.2;margin-bottom:18px;min-height:50px}
.quiz__input{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:15px;color:var(--text);font-size:16px;font-family:inherit;margin-bottom:14px}
.quiz__input:focus{outline:none;border-color:var(--accent)}
.quiz__opts{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.quiz__opt{background:var(--surface);border:1px solid var(--line);color:var(--text);padding:15px 16px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;text-align:left;transition:.2s}
.quiz__opt.sel{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.quiz__nav{display:flex;gap:10px;margin-top:6px}
.quiz__nav .btn{flex:1}
.quiz__done{text-align:center;padding:50px 16px}
.done__icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:rgba(200,245,65,.14);color:var(--accent)}
.quiz__done h2{font-family:'Oswald',sans-serif;font-size:24px;text-transform:uppercase;margin-bottom:10px}
.quiz__done p{color:var(--muted);font-size:15px;max-width:320px;margin:0 auto}

/* таббар */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(10,11,13,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.tab{background:none;border:0;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:11px 0 12px;font:600 11px/1 'Manrope',sans-serif;cursor:pointer;transition:color .2s}
.tab.is-active{color:var(--accent)}

/* тост */
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);z-index:50;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);padding:13px 20px;border-radius:100px;
  font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:.3s;max-width:90%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast--ok{border-color:rgba(200,245,65,.4)}