/* ============================================================
   Круг – Telegram Mini App. Флагманская версия.
   Тёмная атмосфера, фирменная орбита, плавные переходы.
   ============================================================ */

:root {
  /* типографика: нативный SF/системный стек (реальный SF Pro в iOS-Telegram, мгновенный первый кадр; Manrope/Inter никогда не грузились) */
  --font-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;

  --amber: #e2a85a;
  --ok: #5dd6a0;

  /* радиусы */
  --r-xl: 22px; --r-lg: 18px; --r-md: 14px; --r-sm: 10px; --r-pill: 999px;
  --r-card: 16px; --r-control: 12px;

  /* iOS-типошкала (px) */
  --t-large: 34px; --t-title1: 28px; --t-title3: 20px;
  --t-body: 17px; --t-callout: 16px; --t-subhead: 15px; --t-foot: 13px; --t-caption: 12px;

  /* 8pt-сетка отступов */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  /* motion: единый язык кривых + длительностей */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --k-standard: cubic-bezier(.32, .72, 0, 1);
  --k-decel: cubic-bezier(.22, 1, .36, 1);
  --k-spring: cubic-bezier(.34, 1.3, .5, 1);
  --d-fast: .16s; --d-base: .3s; --d-slow: .42s;
  /* motion-лейер: именованная шкала + дорогие кривые (touch-friendly, без резины) */
  --motion-instant: .12s; --motion-fast: .18s; --motion-base: .28s; --motion-slow: .48s; --motion-scene: .7s;
  --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-emphasized: cubic-bezier(.2, 0, 0, 1); --ease-spring-soft: cubic-bezier(.34, 1.2, .44, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --maxw: 480px;
}

/* Цветовые/поверхностные токены – в ОДНОМ авторитетном блоке ниже ("iOS PREMIUM TOKENS"). Не возвращать сюда. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
html, body { margin: 0; padding: 0 }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--t-body); line-height: 1.5;
  overscroll-behavior-y: none; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-optical-sizing: auto; letter-spacing: -.006em;
}

/* ===== атмосферный фон (фиксированный, за контентом) ===== */
.aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--bg-grad-1), transparent 60%),
    radial-gradient(90% 60% at 90% 8%, rgba(122,82,194,.16), transparent 55%),
    var(--bg);
}
.aura__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5 }
.aura__blob--1 { width: 320px; height: 320px; top: -120px; left: -80px; background: radial-gradient(circle, rgba(122,82,194,.4), transparent 70%) }
.aura__blob--2 { width: 280px; height: 280px; top: 30%; right: -120px; background: radial-gradient(circle, rgba(226,168,90,.14), transparent 70%) }
html[data-theme="light"] .aura__blob { opacity: .7 }

#app { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; max-width: var(--maxw); margin: 0 auto }

/* ===== экран + переходы (слайд) ===== */
.view {
  min-height: 100dvh;
  padding: calc(var(--safe-top) + .75rem) 1.25rem calc(var(--safe-bot) + 7rem);
}
.view.in-fwd { animation: slideFwd .42s var(--ease) both }
.view.in-back { animation: slideBack .42s var(--ease) both }
.view.in-fade { animation: fadeUp .42s var(--ease) both }
@keyframes slideFwd { from { opacity: 0; transform: translateX(28px) } to { opacity: 1; transform: none } }
@keyframes slideBack { from { opacity: 0; transform: translateX(-28px) } to { opacity: 1; transform: none } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .view, [class*="anim"], .orbit, .orbit *, .mcard__count, .succ-wave, .signal { animation: none !important } .stage-item { opacity: 1 !important; transform: none !important } }

/* ===== MOTION-ЛЕЙЕР (анимируем только transform/opacity) ===== */
.stage-item { will-change: transform, opacity }   /* WAAPI снимет will-change по завершении */
/* «В планах» – мягкий сигнал-пилюля после вступления */
.signal { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .95rem; border-radius: var(--r-pill); background: var(--violet); color: #fff; font-size: .86rem; font-weight: 700; box-shadow: 0 10px 26px rgba(111,75,216,.42); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(8px) }
.signal__ic { display: inline-flex } .signal__ic svg { width: 16px; height: 16px }
/* счётчик мест: мягкий «пуш» при изменении (morph, не резкий текст) */
.mcard__count.is-bumped { animation: countBump var(--motion-slow) var(--ease-spring-soft) }
@keyframes countBump { 0% { transform: scale(1) } 38% { transform: scale(1.13) } 100% { transform: scale(1) } }
/* success-сцена: расходящаяся волна от активной точки */
.succ-wave { position: absolute; left: 50%; top: var(--succ-y, 38%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--violet-bright); opacity: 0; pointer-events: none }
.succ-wave.is-on { animation: succWave 1.15s var(--ease-out) forwards }
@keyframes succWave { 0% { opacity: .65; transform: scale(.35) } 100% { opacity: 0; transform: scale(9) } }

/* ===== фирменная орбита (кольцо Круга + точки) ===== */
.orbit { position: relative; width: var(--orbit-size, 120px); height: var(--orbit-size, 120px); margin: 0 auto; flex: none }
.orbit__ring { position: absolute; inset: 14%; border-radius: 50%; border: 1.5px solid var(--line-2);
  box-shadow: inset 0 0 30px var(--glow); }
.orbit__core { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--violet-bright), var(--violet) 55%, var(--violet-deep));
  box-shadow: 0 0 28px var(--glow); animation: breathe 5s var(--ease-soft) infinite }
.orbit__spin { position: absolute; inset: 0; animation: spin 26s linear infinite }
.orbit__dot { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%;
  background: var(--violet-bright); box-shadow: 0 0 10px var(--glow);
  transform: rotate(var(--a)) translateY(calc(var(--orbit-size, 120px) * -.43)); }
.orbit__dot--sm { width: 5px; height: 5px; margin: -2.5px; opacity: .65 }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes breathe { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 1 } 50% { transform: translate(-50%,-50%) scale(1.12); opacity: .9 } }

/* ===== шапка экрана ===== */
.top { display: flex; align-items: center; gap: .65rem; padding: .2rem 0 1.2rem; min-height: 2.4rem }
.top__logo { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 800; letter-spacing: .02em; font-size: 1.02rem; color: var(--ink) }
.top__logo svg { width: 22px; height: 22px; color: var(--violet-bright) }
.top__spacer { flex: 1 }
.top__title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; margin: 0; color: var(--ink) }
.iconbtn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none }
.iconbtn svg { width: 19px; height: 19px }
.iconbtn:active { transform: scale(.92) }

/* ===== типографика ===== */
.h1 { font-family: var(--font-head); font-weight: 800; font-size: 1.85rem; line-height: 1.12; letter-spacing: -.025em; margin: .1rem 0 .5rem; color: var(--ink) }
.h1 .accent { color: var(--violet-bright) }
.lead { color: var(--muted); font-size: var(--t-callout); line-height: 1.45; margin: 0 0 var(--s5); max-width: 34ch }
.eyebrow { font-family: var(--font-head); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--violet-bright); margin: 0 0 .6rem }
.sec-title { font-family: var(--font-head); font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin: 1.7rem 0 .85rem }

/* ===== главный экран ===== */
.hero { text-align: center; padding: .5rem 0 1.6rem; position: relative }
.hero .orbit { --orbit-size: 104px; margin-bottom: 1.1rem }
.greet { font-family: var(--font-head); font-weight: 800; font-size: 1.95rem; line-height: 1.08; letter-spacing: -.025em; margin: 0 0 .45rem; color: var(--ink) }
.greet .accent { color: var(--violet-bright) }
.hero__sub { color: var(--muted); margin: 0 auto; font-size: 1.04rem; max-width: 30ch }
.statuschip { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; padding: .42rem .9rem; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line); font-size: .85rem; font-weight: 600; color: var(--ink-2) }
.statuschip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(93,214,160,.18); animation: pulse 2.4s var(--ease-soft) infinite }
.statuschip--new .statuschip__dot { background: var(--amber); box-shadow: 0 0 0 4px rgba(226,168,90,.2) }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(93,214,160,.22) } 50% { box-shadow: 0 0 0 7px rgba(93,214,160,0) } }

/* featured-карточка (главное действие) */
.feat { display: block; width: 100%; text-align: left; cursor: pointer; color: #fff; font-family: inherit;
  border: none; border-radius: var(--r-xl); padding: 1.4rem 1.4rem; margin: 0 0 .75rem; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--violet-deep), var(--violet) 70%, #8b5fd6);
  box-shadow: 0 14px 40px rgba(79,45,127,.5); transition: transform .2s var(--ease) }
.feat::after { content: ''; position: absolute; right: -30px; top: -30px; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%) }
.feat:active { transform: scale(.98) }
.feat__k { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; margin: 0 0 .25rem; position: relative }
.feat__s { margin: 0; opacity: .85; font-size: .95rem; position: relative; max-width: 26ch }
.feat__row { display: flex; align-items: center; gap: .9rem; position: relative }
.feat__badge { position: absolute; top: 1.3rem; right: 1.3rem; font-size: .72rem; font-weight: 700; background: rgba(18,10,34,.32); color: #fff; padding: .3rem .65rem; border-radius: var(--r-pill); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); white-space: nowrap }
.feat__arrow { position: absolute; right: 1.3rem; bottom: 1.3rem; width: 26px; height: 26px; opacity: .9 }

/* сетка вторичных карточек */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem }
.gcard { display: flex; flex-direction: column; gap: .55rem; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.05rem; color: var(--ink);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); position: relative; min-height: 124px; min-width: 0; overflow: hidden }
.gcard:active { transform: scale(.97); background: var(--card-hi) }
.gcard__icon { width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--card-hi); border: 1px solid var(--line); color: var(--violet-bright) }
.gcard__icon svg { width: 22px; height: 22px }
.gcard__t { font-family: var(--font-head); font-weight: 700; font-size: 1rem; margin: auto 0 0 }
.gcard__s { color: var(--faint); font-size: .82rem; margin: 0; line-height: 1.3 }

/* ===== прогресс анкеты (точки + счётчик) ===== */
.anketa-top { display: flex; align-items: center; gap: .8rem; margin: .2rem 0 1.6rem }
.steps { display: flex; gap: .35rem; flex: 1 }
.steps__dot { flex: 1; height: 5px; border-radius: 3px; background: var(--line-2); overflow: hidden; position: relative }
.steps__dot.is-done { background: var(--violet) }
.steps__dot.is-now::after { content: ''; position: absolute; inset: 0; background: var(--violet-bright); animation: fillBar .4s var(--ease) both }
@keyframes fillBar { from { transform: translateX(-100%) } to { transform: none } }
.steps__count { font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--faint); flex: none }

/* ===== поля ===== */
.field { margin: 0 0 1.3rem; animation: fadeUp .35s var(--ease) both }
.field__label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1rem; margin: 0 0 .6rem; color: var(--ink) }
.field__hint { color: var(--faint); font-size: .82rem; margin: .5rem 0 0 }
.input, .textarea { width: 100%; background: var(--card); color: var(--ink); border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  padding: .9rem 1rem; font: inherit; font-size: var(--t-body); transition: border-color .2s var(--ease), box-shadow .2s var(--ease) }
.textarea { resize: none; min-height: 5.5rem; line-height: 1.5 }
.input:focus, .textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(122,82,194,.2) }
.input::placeholder, .textarea::placeholder { color: var(--faint) }

/* ===== чипы ===== */
.chips { display: flex; flex-wrap: wrap; gap: .6rem }
.chip { font: inherit; font-size: .98rem; font-weight: 500; padding: .65rem 1.05rem; border-radius: var(--r-pill);
  background: var(--card); border: 1.5px solid var(--line-2); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem; transition: all .18s var(--ease); min-height: 46px }
.chip:active { transform: scale(.95) }
.chip.is-on { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: 0 6px 18px rgba(122,82,194,.4) }
.chip__check { width: 0; height: 15px; opacity: 0; overflow: hidden; transition: all .18s var(--ease); flex: none }
.chip.is-on .chip__check { width: 15px; opacity: 1 }
.chip__check svg { width: 15px; height: 15px; display: block }

/* большие опции-карточки (конструктор) */
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem }
.opt { font: inherit; cursor: pointer; text-align: left; display: flex; align-items: center; gap: .7rem;
  background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--r-md); padding: .85rem .9rem; color: var(--ink);
  transition: all .18s var(--ease); min-height: 58px; min-width: 0 }
.opt > span:last-child { min-width: 0; flex: 1 }
.opt:active { transform: scale(.97) }
.opt.is-on { border-color: var(--violet); background: var(--card-hi); box-shadow: 0 6px 18px rgba(122,82,194,.25) }
.opt__ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--card-hi); color: var(--violet-bright); transition: all .18s var(--ease) }
.opt.is-on .opt__ic { background: var(--violet); color: #fff }
.opt__ic svg { width: 19px; height: 19px }
.opt__t { font-family: var(--font-head); font-weight: 600; font-size: .96rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.opt__s { color: var(--faint); font-size: .76rem; margin: .05rem 0 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* ===== превью встречи (конструктор) ===== */
.preview { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 1.5rem 1.4rem 1.4rem; margin: 1.5rem 0 .3rem;
  background: linear-gradient(160deg, var(--card-solid), rgba(122,82,194,.12)); border: 1px solid var(--line-2); box-shadow: var(--shadow);
  animation: previewIn .45s var(--ease) both }
@keyframes previewIn { from { opacity: 0; transform: translateY(16px) scale(.97) } to { opacity: 1; transform: none } }
.preview::before { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 65%); opacity: .5 }
.preview__top { display: flex; align-items: center; gap: .5rem; position: relative }
.preview__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet-bright); box-shadow: 0 0 0 4px var(--glow) }
.preview__live { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-bright) }
.preview__title { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; margin: .8rem 0 .3rem; position: relative; color: var(--ink) }
.preview__meta { color: var(--muted); margin: 0; position: relative; font-size: 1rem }
.preview__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 0; position: relative }
.preview__tag { font-size: .8rem; color: var(--ink-2); background: var(--card-hi); border: 1px solid var(--line); padding: .32rem .7rem; border-radius: var(--r-pill) }

/* ===== кнопки в потоке ===== */
.btn { font: inherit; font-family: var(--font-head); font-weight: 700; font-size: 1rem; border: none; border-radius: var(--r-md);
  padding: .9rem 1.4rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px;
  transition: transform .15s var(--ease), opacity .2s }
.btn:active { transform: scale(.97) }
.btn--primary { background: linear-gradient(135deg, var(--violet-deep), var(--violet)); color: #fff; box-shadow: 0 10px 28px rgba(122,82,194,.4) }
.btn--ghost { background: var(--card); border: 1.5px solid var(--line-2); color: var(--ink) }
.btn--block { width: 100% }

/* ===== резюме анкеты ===== */
.review { display: flex; flex-direction: column; gap: .1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .4rem 1.1rem; margin: 0 0 1.3rem }
.review__row { display: flex; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line) }
.review__row:last-child { border-bottom: none }
.review__k { color: var(--faint); font-size: .9rem; flex: none; width: 5.5rem }
.review__v { color: var(--ink); font-size: .96rem; font-weight: 500; flex: 1 }

/* ===== профиль ===== */
.pcard { display: flex; align-items: center; gap: 1.1rem; margin: 0 0 1.8rem }
.pavatar { position: relative; width: 76px; height: 76px; flex: none; display: grid; place-items: center }
.pavatar__img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; background: linear-gradient(140deg, var(--violet-deep), var(--violet)); display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem }
.pavatar__ring { position: absolute; inset: 0 }
.pname { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; margin: 0; color: var(--ink) }
.puser { color: var(--faint); margin: .1rem 0 0; font-size: .9rem }
.status-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; padding: .32rem .75rem; border-radius: var(--r-pill); margin-top: .55rem }
.status-pill--new { background: rgba(226,168,90,.16); color: var(--amber) }
.status-pill--none { background: var(--card-hi); color: var(--faint); border: 1px solid var(--line) }

.ladder { display: flex; flex-direction: column; gap: .55rem }
.lstep { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); transition: all .2s var(--ease) }
.lstep.is-current { border-color: var(--violet); background: var(--card-hi); box-shadow: 0 8px 22px rgba(122,82,194,.2) }
.lstep__num { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: .85rem; background: var(--line-2); color: var(--faint) }
.lstep.is-current .lstep__num, .lstep.is-passed .lstep__num { background: linear-gradient(140deg, var(--violet-deep), var(--violet)); color: #fff }
.lstep__t { font-family: var(--font-head); font-weight: 600; margin: 0; font-size: 1rem; color: var(--ink) }
.lstep__s { color: var(--faint); margin: .05rem 0 0; font-size: .82rem }
.lstep__now { margin-left: auto; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--violet-bright); flex: none }

/* ===== пустое состояние / лента ===== */
.empty { text-align: center; padding: 1.5rem 1rem }
.empty .orbit { --orbit-size: 120px; margin: 0 auto 1.6rem }
.empty__t { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; margin: 0 0 .5rem; color: var(--ink) }
.empty__s { color: var(--muted); margin: 0 auto 1.5rem; max-width: 30ch; font-size: .98rem; line-height: 1.5 }
.feed { display: flex; flex-direction: column; gap: .75rem }

/* ===== экран успеха ===== */
.success { text-align: center; padding: 2rem 1rem 1rem }
.success .orbit { --orbit-size: 132px; margin: 0 auto 1.8rem }
.success__check { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 40%; height: 40% }
.success__check svg { width: 100%; height: 100% }
.success__t { font-family: var(--font-head); font-weight: 800; font-size: 1.75rem; margin: 0 0 .65rem; letter-spacing: -.02em; color: var(--ink) }
.success__s { color: var(--muted); margin: 0 auto 1.8rem; max-width: 32ch; line-height: 1.55 }
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .65s .2s var(--ease) forwards }
@keyframes draw { to { stroke-dashoffset: 0 } }

/* ===== скелет загрузки ===== */
.skel { background: linear-gradient(100deg, var(--card) 38%, var(--card-hi) 50%, var(--card) 62%); background-size: 200% 100%; animation: shimmer 1.6s infinite; border-radius: var(--r-md) }
@keyframes shimmer { to { background-position: -200% 0 } }

/* ===== нижняя кнопка (dev-имитация MainButton) ===== */
.devbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; max-width: var(--maxw); margin: 0 auto;
  padding: .7rem 1.25rem calc(.8rem + var(--safe-bot)); background: linear-gradient(to top, var(--bg) 72%, transparent) }
.devbar__main { width: 100%; border: none; border-radius: var(--r-md); min-height: 54px; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: #fff;
  background: linear-gradient(135deg, var(--violet-deep), var(--violet)); cursor: pointer; box-shadow: 0 10px 26px rgba(122,82,194,.45);
  transition: opacity .2s, transform .15s var(--ease) }
.devbar__main:active { transform: scale(.99) }
.devbar__main:disabled { opacity: .4; cursor: default; box-shadow: none }

/* утилиты */
.mt-1 { margin-top: 1rem } .mt-2 { margin-top: 1.5rem }
.center { text-align: center }
.muted { color: var(--muted) }
[hidden] { display: none !important }


/* ============ ФЛАГМАН-ПОЛИРОВКА (аудит 7 линз) ============ */

/* контраст --faint задан в авторитетном блоке токенов ниже */

/* светлая тема: вернуть фирменность орбите и читаемость акцентам */
html[data-theme="light"] .orbit__ring { border-color: var(--line-2); box-shadow: none }
html[data-theme="light"] .h1 .accent,
html[data-theme="light"] .greet .accent,
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .preview__live,
html[data-theme="light"] .lstep__now { color: var(--violet) }

/* пульс статуса своим цветом (амбер для поданной заявки) */
@keyframes pulseAmber { 0%,100% { box-shadow: 0 0 0 3px rgba(226,168,90,.26) } 50% { box-shadow: 0 0 0 7px rgba(226,168,90,0) } }
.statuschip--new .statuschip__dot { animation-name: pulseAmber }

/* hover для desktop / Telegram Desktop / веб */
@media (hover: hover) {
  .feat { transition: transform .2s var(--ease), box-shadow .2s var(--ease) }
  .feat:hover { transform: translateY(-3px); box-shadow: 0 22px 52px rgba(79,45,127,.55) }
  .gcard:hover { transform: translateY(-3px); border-color: var(--line-2) }
  .chip:hover:not(.is-on) { border-color: var(--violet) }
  .opt:hover:not(.is-on) { border-color: var(--line-2) }
  .lstep:hover { border-color: var(--line-2) }
  .iconbtn:hover { background: var(--card-hi) }
  .btn--primary:hover, .devbar__main:hover { filter: brightness(1.07) }
  .btn--ghost:hover { border-color: var(--violet) }
}

/* видимый фокус (клавиатура + доступность) */
.feat:focus-visible, .gcard:focus-visible, .chip:focus-visible, .opt:focus-visible,
.btn:focus-visible, .iconbtn:focus-visible, .lstep:focus-visible, .input:focus-visible,
.textarea:focus-visible, .devbar__main:focus-visible, a:focus-visible {
  outline: 2.5px solid var(--violet-bright); outline-offset: 3px
}
html[data-theme="light"] :focus-visible { outline-color: var(--violet) }

/* disabled для in-flow кнопок */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; box-shadow: none; cursor: default }

/* опции конструктора: перенос в 2 строки вместо обрезки многоточием */
.opt__t { white-space: normal; overflow: visible; text-overflow: clip }
.opt__s { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }

/* featured: место под стрелку + иконка активности в превью */
.feat { padding-right: 3.4rem }
.preview__ic { display: inline-flex; width: 20px; height: 20px; color: var(--violet-bright); vertical-align: -3px; margin-right: .35rem }
.preview__ic svg { width: 100% }

/* поле ввода: глубина в светлой теме */
html[data-theme="light"] .input, html[data-theme="light"] .textarea { box-shadow: inset 0 1px 2px rgba(58,33,96,.05); background: #fbfaf7 }

/* каскадное появление сетки 2x2 на главной */
.grid2 .gcard { animation: fadeUp .45s var(--ease) both }
.grid2 .gcard:nth-child(1){animation-delay:.04s} .grid2 .gcard:nth-child(2){animation-delay:.1s}
.grid2 .gcard:nth-child(3){animation-delay:.16s} .grid2 .gcard:nth-child(4){animation-delay:.22s}

/* фейд контента под нижней кнопкой (и в Telegram тоже) */
.view::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 2.2rem; pointer-events: none; z-index: 70; background: linear-gradient(to top, var(--bg), transparent) }

/* экран ошибки / повтора */
.errbox { text-align: center; padding: 2.5rem 1rem 1rem }
.errbox .orbit { --orbit-size: 96px; margin: 0 auto 1.4rem; opacity: .6 }
.errbox__t { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; margin: 0 0 .5rem; color: var(--ink) }
.errbox__s { color: var(--muted); margin: 0 auto 1.5rem; max-width: 28ch; line-height: 1.5 }

/* ссылка-правила в анкете */
.rules-link { background: none; border: none; color: var(--violet-bright); font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer; padding: 0 }
html[data-theme="light"] .rules-link { color: var(--violet) }

/* широкий экран: планшет 768+ и веб/Telegram Desktop */
@media (min-width: 700px) {
  body { background: radial-gradient(90% 55% at 50% -5%, var(--bg-grad-1), var(--bg) 55%) }
  #app { max-width: 460px; margin: 2rem auto; min-height: auto;
    border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow), 0 0 0 8px rgba(255,255,255,.02) }
  .view { min-height: 80vh; border-radius: 30px }
  .view::after { display: none }
  .devbar { position: sticky; bottom: 0; max-width: 460px; border-radius: 0 0 30px 30px; background: var(--bg) }
}

/* полное покрытие prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .orbit__core, .orbit__spin, .statuschip__dot, .steps__dot.is-now::after,
  .preview, .field, .success, .skel, .grid2 .gcard, .feat,
  .view.in-fwd, .view.in-back, .view.in-fade { animation: none !important }
  .draw { animation: none !important; stroke-dashoffset: 0 }
}


/* ============ РЕДИЗАЙН: iOS + последний Telegram ============ */

/* нижний таб-бар (4 корня) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; max-width: var(--maxw); margin: 0 auto; display: none;
  grid-template-columns: repeat(4,1fr); padding: .35rem .4rem calc(.35rem + var(--safe-bot));
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid var(--line) }
body.has-tabs .tabbar { display: grid }
body.has-tabs .view { padding-bottom: calc(var(--safe-bot) + 5rem) }
body.has-tabs .view::after { display: none }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; padding: .45rem 0 .3rem; color: var(--faint); font: inherit; font-size: .64rem; font-weight: 600; letter-spacing: .01em; transition: color .2s, transform .12s var(--ease) }
.tab svg { width: 26px; height: 26px }
.tab.is-on { color: var(--violet-bright) }
html[data-theme="light"] .tab.is-on { color: var(--violet) }
.tab:active { transform: scale(.88) }
.tab__ic { position: relative; display: grid; place-items: center }
.tab__badge { position: absolute; top: -1px; right: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--bg) }

/* iOS large-title */
.lt { font-family: var(--font-head); font-weight: 800; font-size: 2.05rem; letter-spacing: -.03em; line-height: 1.08; margin: .2rem 0 1.1rem; color: var(--ink) }
.lt .accent { color: var(--violet-bright) }
html[data-theme="light"] .lt .accent { color: var(--violet) }
.lt-sub { color: var(--muted); margin: -.7rem 0 1.3rem; font-size: 1.02rem; max-width: 32ch }

/* inset grouped list со строками-шевронами */
.list { background: var(--card-solid); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); margin: 0 0 1.1rem }
.row { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; min-height: 56px; cursor: pointer; color: var(--ink); text-align: left; width: 100%; background: none; border: none; font: inherit; position: relative; transition: background .15s }
.row + .row::before { content: ""; position: absolute; left: 3.55rem; right: 0; top: 0; height: 1px; background: var(--line) }
.row:active { background: var(--card-hi) }
.row__ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: linear-gradient(140deg, var(--violet), var(--violet-deep)); color: #fff }
.row__ic svg { width: 18px; height: 18px }
.row__ic--amber { background: linear-gradient(140deg, var(--amber), #c0852f) }
.row__b { flex: 1; min-width: 0 }
.row__t { font-family: var(--font-head); font-weight: 600; font-size: var(--t-subhead); margin: 0; color: var(--ink) }
.row__s { color: var(--faint); font-size: .82rem; margin: .05rem 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.row__chev { flex: none; color: var(--faint); width: 16px; height: 16px; opacity: .7 }
.row__val { margin-left: auto; color: var(--muted); font-size: .9rem; flex: none }

/* открытка дня (этичный variable-reward смысла) */
.postcard { background: linear-gradient(150deg, var(--card), rgba(122,82,194,.1)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; margin: 0 0 1.1rem; display: flex; gap: .8rem; align-items: flex-start }
.postcard__q { font-size: 1.4rem; line-height: 1; flex: none; opacity: .85 }
.postcard__t { margin: 0; color: var(--ink-2); font-size: .98rem; line-height: 1.45 }

/* орбита-прогресс: личные зажжённые точки */
.orbit__dot.is-lit { background: var(--violet-bright); box-shadow: 0 0 12px var(--violet-bright); opacity: 1 }
.orbit__dot.is-dim { background: var(--line-2); box-shadow: none; opacity: .5 }
.progress-cap { text-align: center; color: var(--faint); font-size: .82rem; margin: .6rem 0 0 }

/* радиальная карта районов Минска (= кольцо Круга) */
.rmap { display: block; width: 100%; max-width: 340px; margin: .4rem auto 1.1rem }
.rmap__sec { fill: var(--card); stroke: var(--line-2); stroke-width: 1.4; cursor: pointer; transition: fill .25s var(--ease), stroke .2s }
.rmap__sec:hover { fill: var(--card-hi) }
.rmap__sec.is-on { fill: rgba(122,82,194,.28); stroke: var(--violet); stroke-width: 2 }
.rmap__ring { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 3 6; opacity: .55 }
.rmap__lbl { fill: var(--muted); font-family: var(--font-body); font-size: 8.5px; font-weight: 600; text-anchor: middle; pointer-events: none; transition: fill .2s }
.rmap__lbl.is-on { fill: var(--violet-bright) }
html[data-theme="light"] .rmap__sec.is-on { fill: rgba(122,82,194,.16) }
html[data-theme="light"] .rmap__lbl.is-on { fill: var(--violet) }
.district-card { background: var(--card-solid); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; margin: 0 0 1rem; animation: fadeUp .3s var(--ease) both }
.district-card__n { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; margin: 0; color: var(--ink) }
.district-card__land { color: var(--faint); font-size: .85rem; margin: .15rem 0 .7rem }
.district-card__state { color: var(--muted); font-size: .95rem; margin: 0; line-height: 1.5 }

/* приглашение друга: орбита со свободным местом */
.invite-orbit { position: relative; width: 150px; height: 150px; margin: .5rem auto 1.3rem }
.invite-free { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; border: 2px dashed var(--violet-bright); transform: rotate(120deg) translateY(-58px); animation: pulseFree 2.2s var(--ease-soft) infinite }
@keyframes pulseFree { 0%,100% { opacity: .5 } 50% { opacity: 1 } }
.invite-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem }
.invite-count { text-align: center; color: var(--faint); font-size: .85rem; margin: 1rem 0 0 }

/* тактильность кнопок (spring-press) */
.btn, .feat, .gcard, .chip, .opt, .row, .tab, .lstep { transition-property: transform, background, border-color, box-shadow, color; }

/* приветствие-онбординг */
.welcome { text-align: center; padding: 2.5rem 1rem 1rem }
.welcome .orbit { --orbit-size: 130px; margin: 0 auto 1.8rem }
.welcome__t { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; margin: 0 0 .7rem; color: var(--ink) }
.welcome__s { color: var(--muted); margin: 0 auto 1.5rem; max-width: 30ch; line-height: 1.55 }

/* частицы-салют (микро-празднование) */
.spark { position: fixed; left: 50%; top: 38%; width: 6px; height: 6px; border-radius: 50%; background: var(--violet-bright); pointer-events: none; z-index: 90; opacity: 0 }

/* reduced-motion для нового */
@media (prefers-reduced-motion: reduce) {
  .invite-free, .tab, .rmap__sec, .district-card, .spark { animation: none !important }
}


/* ============ ФИКСЫ ПО ФИДБЭКУ: назад / карта / оверфлоу / анимации / цвета ============ */

/* видимая кнопка «назад» на подэкранах (браузер + Telegram) */
.appback { position: fixed; top: calc(var(--safe-top) + .55rem); left: .7rem; z-index: 90; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 68%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--ink); display: none; place-items: center; cursor: pointer; transition: transform .14s var(--ease), background .2s }
body.has-back .appback { display: grid }
.appback:active { transform: scale(.88) }
.appback svg { width: 22px; height: 22px }
.appback:hover { background: var(--card-hi) }
/* когда видна кнопка назад – сдвинуть лого вправо чтобы не наезжало */
body.has-back .top { padding-left: 2.8rem }

/* Яндекс-карта */
.ymap { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); margin: .3rem 0 1rem; background: var(--card-solid); box-shadow: var(--shadow-soft) }
.ymap__frame { width: 100%; height: 300px; border: 0; display: block }

/* надёжный фикс оверфлоу сеток (колонки могут сжиматься меньше контента) */
.opts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.chips { max-width: 100% }
.view, .hero, .list, .preview { max-width: 100%; overflow-wrap: anywhere }

/* анимации экранов без горизонтального клиппинга (сильнее и чисто) */
.view.in-fwd { animation: vIn .4s var(--ease) both }
.view.in-back { animation: vBack .4s var(--ease) both }
.view.in-fade { animation: vIn .4s var(--ease) both }
@keyframes vIn { from { opacity: 0; transform: translateY(18px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes vBack { from { opacity: 0; transform: translateY(-12px) } to { opacity: 1; transform: none } }

/* (удалён глянцевый слой "ярче": свечение орбиты/кнопок/градиенты – противоречил премиум-iOS. Всё плоское, токены ниже.) */

/* reduced-motion: новые анимации тоже */
@media (prefers-reduced-motion: reduce) { .view.in-fwd, .view.in-back, .view.in-fade, .appback { animation: none !important } }

/* ============================================================
   iOS PREMIUM TOKENS – ЕДИНЫЙ авторитетный источник цвета/поверхностей.
   Менять цвет = менять ТОКЕН здесь. Не плодить новые :root-блоки.
   ============================================================ */
html, :root {
  /* тёплый глубокий графит-баклажан: «уютная гостиная», не холодный продукт (Linear/Arc – анти-референс) */
  --bg: #110c14; --bg-grad-1: #1c1526; --bg-grad-2: #0a0709;
  --card: #1b1622; --card-solid: #1b1622; --card-hi: #2a2333;
  --bg-elev: #1b1622; --bg-elev-2: #2a2333;
  --ink: #ffffff; --ink-2: #ece8f2; --muted: #a29cac; --faint: #9b95a5;
  --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.17);
  --violet: #6f4bd8; --violet-deep: #4f2d7f; --violet-press: #5a3fd6; --violet-bright: #b7a3ff; --violet-tint: rgba(111,75,216,.18); --glow: transparent;
  --shadow: 0 14px 34px rgba(0,0,0,.5); --shadow-soft: 0 2px 14px rgba(0,0,0,.42);
}
html[data-theme="light"] {
  --bg: #f2f2f7; --bg-grad-1: #f2f2f7; --bg-grad-2: #f2f2f7;
  --card: #ffffff; --card-solid: #ffffff; --card-hi: #f1f1f5;
  --bg-elev: #ffffff; --bg-elev-2: #f1f1f5;
  --ink: #1c1c1e; --ink-2: #3a3a3c; --muted: #8a8a8e; --faint: #8a8a8e;
  --line: rgba(60,60,67,.18); --line-2: rgba(60,60,67,.29);
  --violet: #6f4bd8; --violet-deep: #5a3fd6; --violet-press: #5a3fd6; --violet-bright: #6f4bd8; --violet-tint: rgba(111,75,216,.12); --glow: transparent;
  --shadow: 0 6px 20px rgba(0,0,0,.08); --shadow-soft: 0 1px 6px rgba(0,0,0,.06);
}
/* атмосферная глубина: мягкий вертикальный градиент + еле уловимая фиолетовая дымка сверху (НЕ блобы) */
.aura { background:
  radial-gradient(135% 82% at 50% -24%, rgba(125,92,255,.15), transparent 56%),
  radial-gradient(72% 46% at 6% 104%, rgba(232,168,124,.07), transparent 60%),
  linear-gradient(180deg, #1c1526 0%, var(--bg) 46%, #0a0709 100%) !important }
html[data-theme="light"] .aura { background:
  radial-gradient(135% 82% at 50% -22%, rgba(111,75,216,.08), transparent 55%),
  radial-gradient(72% 46% at 6% 104%, rgba(216,140,90,.06), transparent 60%),
  linear-gradient(180deg, #f6f1f9 0%, var(--bg) 46%, #efe9ee 100%) !important }
.aura__blob { display: none !important }
/* человеческая фактура: тончайшее зерно (как у Airbnb) – тепло и крафт без глянца */
.aura::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
html[data-theme="light"] .aura::after { opacity: .03 }
/* премиум-объём: тонкий «освещённый» верхний кант карточек (тёмная) / мягкая тень-подъём (светлая) */
.feat { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--shadow-soft) }
.mcard, .list, .preview, .postcard, .ntoggle, .district-card, .jcard, .sos, .match-head, .pavatar__img, .seg { box-shadow: inset 0 1px 0 rgba(255,255,255,.045) }
html[data-theme="light"] .mcard, html[data-theme="light"] .list, html[data-theme="light"] .preview, html[data-theme="light"] .postcard, html[data-theme="light"] .ntoggle, html[data-theme="light"] .district-card, html[data-theme="light"] .jcard, html[data-theme="light"] .sos, html[data-theme="light"] .match-head, html[data-theme="light"] .seg { box-shadow: 0 1px 3px rgba(40,30,70,.05) }
html[data-theme="light"] .feat { box-shadow: 0 8px 22px rgba(111,75,216,.2) }
/* премиум-типографика: легче веса (800 читается «consumer»; Linear ~590 / Apple semibold), плотнее трекинг крупных заголовков */
.lt, .greet { font-weight: 700; letter-spacing: -.04em }
.h1, .feat__k, .success__t, .empty__t, .pname, .preview__title, .welcome__t, .district-card__n, .jcard__t { font-weight: 700 }
.lead, .lt-sub, .hero__sub { letter-spacing: -.01em }
/* орбита-сигнатура: тонкий scroll-параллакс на герое (z-глубина, не глянец) */
.hero .orbit { transform: translateY(calc(var(--sy, 0) * -.05px)); will-change: transform }
@media (prefers-reduced-motion: reduce) { .hero .orbit { transform: none } }
/* tabular-nums: меняющиеся числа не «прыгают» по ширине */
.mcard__count, .stepper__n, .match-head, .progress-cap, .puser, .lstep__num, .review__v { font-variant-numeric: tabular-nums }
.view { padding: calc(var(--safe-top) + 1rem) 1.15rem calc(var(--safe-bot) + 6rem) }
.lt { font-size: var(--t-large); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin: var(--s1) 0 var(--s6) }
.lt-sub { font-size: var(--t-callout); margin: -.9rem 0 var(--s6) }
.h1 { font-size: var(--t-title1); font-weight: 800; letter-spacing: -.03em }
.greet { font-size: var(--t-large); letter-spacing: -.035em }
.sec-title { font-size: var(--t-caption); color: var(--faint); letter-spacing: .04em; margin: var(--s7) 0 var(--s3) }
.accent, .h1 .accent, .lt .accent, .greet .accent { color: var(--violet-bright) }
.orbit__ring { border: 1.5px solid var(--line-2); box-shadow: none }
.orbit__core { background: var(--violet); box-shadow: none; width: 30%; height: 30% }
.orbit__dot { background: var(--violet); box-shadow: none; opacity: .9 }
.orbit__dot.is-dim { background: var(--line-2); opacity: .5 }
.orbit__dot.is-lit { background: var(--violet); box-shadow: none }
.btn { border-radius: 14px; min-height: 50px; font-weight: 700 }
.btn--primary, .devbar__main { background: var(--violet); box-shadow: none }
.btn--primary:active, .devbar__main:active { background: var(--violet-deep) }
.btn--ghost { background: var(--card); border: 1px solid var(--line-2); color: var(--violet-bright) }
.devbar { background: linear-gradient(to top, var(--bg) 80%, transparent) }
.feat { background: var(--violet); box-shadow: var(--shadow-soft); border-radius: 18px }
.feat::after { display: none }
.feat__badge { background: rgba(255,255,255,.22) }
.list { border: 1px solid var(--line); border-radius: 14px; box-shadow: none }
.row__ic { background: var(--violet) }
.row__ic--amber { background: var(--amber) }
.row { min-height: 58px }
.statuschip { background: var(--card); border: 1px solid var(--line) }
.postcard, .preview, .district-card, .pcard, .errbox, .welcome { box-shadow: none }
.preview { background: var(--card); border: 1px solid var(--line) }
.chip { background: var(--card); border: 1px solid var(--line-2) }
.chip.is-on { background: var(--violet); border-color: var(--violet); box-shadow: none; color: #fff }
.opt { background: var(--card); border: 1px solid var(--line-2) }
.opt.is-on { border-color: var(--violet); background: var(--card-hi); box-shadow: none }
.opt__t { white-space: normal }
.tabbar { background: color-mix(in srgb, var(--bg) 86%, transparent); border-top: 1px solid var(--line) }
.tab.is-on { color: var(--violet-bright) }
.ymap { box-shadow: none; border: 1px solid var(--line) }
/* направленные переходы экранов (вертикально, без горизонтального слайда – Влад его отверг) */
.view.in-fwd { animation: vEnterUp .34s var(--k-standard) both }
.view.in-back { animation: vEnterDown .3s var(--k-standard) both }
.view.in-fade { animation: vEnterUp .34s var(--k-standard) both }
@keyframes vEnterUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes vEnterDown { from { opacity: 0; transform: translateY(-12px) } to { opacity: 1; transform: none } }
@keyframes iosIn { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
.appback { background: var(--card); border: 1px solid var(--line) }
/* единый тактильный press (spring) – вместо разнобоя .88/.92/.97/.98/.99 */
.btn:active, .feat:active, .gcard:active, .chip:active, .opt:active, .row:active, .mcard__go:active, .iconbtn:active, .lstep:active, .stepper__b:active, .btn--danger:active, .ntoggle:active { transform: scale(.965) }
.tab:active { transform: scale(.93) }
.devbar__main:active, .mcard__plus:active { transform: scale(.98) }
/* орбита-салют: «сам круг отозвался» на реальном событии (микро-пульс, не дженерик-конфетти) */
.orbit--bloom { animation: orbitBloom .6s var(--k-decel) }
@keyframes orbitBloom { 0% { transform: scale(1) } 40% { transform: scale(1.015) } 100% { transform: scale(1) } }
@media (prefers-reduced-motion: reduce) { .view.in-fwd, .view.in-back, .view.in-fade, .orbit--bloom { animation: none !important } }

/* iOS сегмент-контрол (скользящая пилюля) */
.seg { display: flex; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 3px; margin: 0 0 .3rem }
.seg__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 9px; background: var(--violet); transition: transform .28s cubic-bezier(.32,.72,0,1), opacity .2s }
.seg__opt { flex: 1; position: relative; z-index: 1; border: none; background: none; color: var(--muted); font: inherit; font-weight: 600; font-size: .96rem; padding: .62rem; min-height: 44px; cursor: pointer; transition: color .22s; border-radius: 9px }
.seg__opt.is-on { color: #fff }
@media (prefers-reduced-motion: reduce) { .seg__thumb { transition: none } }

/* тонкий iOS-stagger появления списков/карточек */
.list .row, .ladder .lstep, .feed .preview { animation: iosIn .42s var(--ease) both }
.list .row:nth-child(2), .ladder .lstep:nth-child(2), .feed .preview:nth-child(2) { animation-delay: .05s }
.list .row:nth-child(3), .ladder .lstep:nth-child(3), .feed .preview:nth-child(3) { animation-delay: .1s }
.list .row:nth-child(4), .ladder .lstep:nth-child(4), .feed .preview:nth-child(4) { animation-delay: .15s }
.ladder .lstep:nth-child(5) { animation-delay: .2s }
@media (prefers-reduced-motion: reduce) { .list .row, .ladder .lstep, .feed .preview { animation: none !important } }

/* карточка встречи с RSVP (iOS) */
.mcard { background: var(--card-solid); border: 1px solid var(--line); border-radius: 16px; padding: 1.05rem 1.1rem; margin: 0 0 .7rem }
.mcard__open { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0; cursor: pointer }
.mcard__open:focus-visible { outline: 2.5px solid var(--violet-bright); outline-offset: 2px; border-radius: 6px }
html[data-theme="light"] .mcard__open:focus-visible { outline-color: var(--violet) }
.mcard__top { display: flex; gap: .5rem; align-items: center; margin-bottom: .4rem }
.mcard__when { font-size: .8rem; font-weight: 700; color: var(--violet-bright) }
html[data-theme="light"] .mcard__when { color: var(--violet) }
.mcard__dist { font-size: .78rem; color: var(--faint); margin-left: auto }
.mcard__act { display: inline-flex; vertical-align: -.16em; margin-right: .3rem }
.mcard__act svg { width: 14px; height: 14px }
/* «Круг недели»: выбор «к своим / к новым» (сегмент-контрол) */
.wk-pref { display: flex; gap: .4rem; margin-top: 1rem }
.wk-pref__o { flex: 1; padding: .62rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .18s var(--k-standard), border-color .18s var(--k-standard), color .18s var(--k-standard) }
.wk-pref__o.is-on { background: var(--violet-tint); border-color: var(--violet); color: var(--violet-bright); font-weight: 700 }
html[data-theme="light"] .wk-pref__o.is-on { color: var(--violet) }
/* активац-карточка «первый шаг» */
.firststep { display: block; width: 100%; text-align: left; cursor: pointer; margin-top: .9rem; padding: 1rem 1.1rem; border-radius: 18px; border: 1px solid var(--violet); background: var(--violet-tint); color: var(--ink); font-family: inherit }
.firststep__tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--violet-bright); margin-bottom: .35rem }
html[data-theme="light"] .firststep__tag { color: var(--violet) }
.firststep__k { font-size: 1.05rem; font-weight: 700; margin-bottom: .2rem }
.firststep__s { font-size: .88rem; color: var(--muted); line-height: 1.5 }
.firststep__cta { display: inline-flex; align-items: center; gap: .3rem; margin-top: .65rem; font-weight: 600; color: var(--violet-bright) }
html[data-theme="light"] .firststep__cta { color: var(--violet) }
.firststep__arr svg { width: 16px; height: 16px; vertical-align: middle }
/* ГЛАВНАЯ v2: активность-первая композиция (один сильный CTA + быстрые форматы + что рядом) */
.hero--home { padding-bottom: .2rem }
.hero--home .greet { margin-top: .4rem }
.home-cta { display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left; margin-top: .6rem; padding: 1.05rem 1.2rem; border: none; border-radius: 18px; background: var(--violet); color: #fff; font-family: inherit; cursor: pointer; box-shadow: 0 10px 26px rgba(111,75,216,.32); transition: transform .14s var(--k-standard) }
.home-cta:active { transform: scale(.985) }
.home-cta__b { flex: 1; display: flex; flex-direction: column; gap: .14rem; min-width: 0 }
.home-cta__k { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em }
.home-cta__s { font-size: .85rem; opacity: .82 }
.home-cta__arr { flex: none; display: inline-flex; opacity: .92 }
.home-cta__arr svg { width: 20px; height: 20px }
.qf__lbl { margin: 1.2rem 0 .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint) }
.qf { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: .15rem; margin: 0 -.2rem; padding-left: .2rem; padding-right: .2rem }
.qf::-webkit-scrollbar { display: none }
.qf__b { flex: none; display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 74px; padding: .75rem .4rem; border-radius: 15px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-family: inherit; cursor: pointer; transition: transform .14s var(--k-standard), border-color .16s, background .16s }
.qf__b:active { transform: scale(.94) }
.qf__b:hover { border-color: var(--line-2) }
.qf__ic { display: inline-flex; color: var(--violet-bright) }
.qf__ic svg { width: 23px; height: 23px }
html[data-theme="light"] .qf__ic { color: var(--violet) }
.qf__t { font-size: .78rem; font-weight: 600 }
.home-near { display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left; margin-top: 1.2rem; padding: .95rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font-family: inherit; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.045) }
.home-near:active { transform: scale(.99) }
.home-near__ic { flex: none; display: inline-flex; width: 40px; height: 40px; border-radius: 12px; background: var(--violet-tint); color: var(--violet-bright); align-items: center; justify-content: center }
.home-near__ic svg { width: 20px; height: 20px }
html[data-theme="light"] .home-near__ic { color: var(--violet) }
/* See-Again: выбор «с кем пересечься ещё» (инициалы-чипы) */
.sa-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1.1rem 0 }
.sa-chip { min-width: 48px; height: 48px; padding: 0 .9rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background .16s var(--k-standard), border-color .16s var(--k-standard), color .16s var(--k-standard) }
.sa-chip.is-on { background: var(--violet); border-color: var(--violet); color: #fff }
.sa-report { display: block; width: 100%; margin-top: 1.3rem; background: none; border: none; color: var(--faint); font: inherit; font-size: .82rem; text-align: center; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
.mcard__like-row { margin: -.3rem 0 .7rem }
.mcard__like { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--violet-bright); background: var(--violet-tint); padding: .2rem .55rem; border-radius: var(--r-pill); white-space: nowrap }
html[data-theme="light"] .mcard__like { color: var(--violet) }
.mcard__title { font-family: var(--font-head); font-weight: 700; font-size: var(--t-title3); margin: 0 0 .15rem; color: var(--ink) }
.mcard__meta { color: var(--faint); font-size: .88rem; margin: 0 0 .8rem }
.mcard__bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 0 0 .7rem }
.mcard__fill { display: block; height: 100%; background: var(--violet); border-radius: 3px; transition: width .4s var(--ease) }
.mcard__foot { display: flex; align-items: center; gap: .8rem }
.mcard__count { font-size: .85rem; color: var(--muted); flex: 1; min-width: 0 }
.mcard__go { border: none; background: var(--violet); color: #fff; font: inherit; font-weight: 700; font-size: .92rem; padding: .5rem 1.1rem; border-radius: 11px; min-height: 44px; cursor: pointer; flex: none; transition: transform .14s var(--ease), background .2s }
.mcard__go:active { transform: scale(.95) }
.mcard__go.is-going { background: var(--card-hi); color: var(--violet-bright); box-shadow: inset 0 0 0 1px var(--line-2) }
html[data-theme="light"] .mcard__go.is-going { color: var(--violet) }
.mcard__plus { margin: .7rem 0 0; background: none; border: none; color: var(--violet-bright); font: inherit; font-size: .85rem; font-weight: 600; padding: 0; cursor: pointer }
html[data-theme="light"] .mcard__plus { color: var(--violet) }
@media (prefers-reduced-motion: reduce) { .mcard__fill { transition: none } }

.row--static { cursor: default }
.row--static:active { background: transparent }
.mcard__count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* ============================================================
   HABIT ENGINE x100 – этичный дофамин/привыкание/вирусность
   ============================================================ */

/* подпись «Твой круг: ты + N» (реальные люди из D1) */
.progress-circle { margin: .25rem 0 0; font-size: .9rem; font-weight: 600; color: var(--violet-bright); letter-spacing: .01em }
html[data-theme="light"] .progress-circle { color: var(--violet) }
.puser--circle { color: var(--violet-bright); font-weight: 600 }
html[data-theme="light"] .puser--circle { color: var(--violet) }

/* открытка дня: мягкий reveal один раз в сутки (якорь привычки, без стрика) */
.postcard--reveal { animation: pcReveal .7s var(--ease) both }
@keyframes pcReveal { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .postcard--reveal { animation: none } }

/* состав встречи: инициалы идущих + пустые места (место для друга) */
.mcard__roster { display: flex; gap: .34rem; flex-wrap: wrap; margin: 0 0 .8rem }
.rost { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; flex: none; box-sizing: border-box }
.rost--on { background: var(--violet); color: #fff }
.rost--free { background: none; border: 1.5px dashed var(--line-2) }
.rost--more { background: var(--card-hi); color: var(--muted); font-size: .72rem }
.rost--anon { background: var(--card-hi); color: var(--faint); border: 1px solid var(--line) }
.rost--in { animation: rostIn .4s var(--ease) both }
@keyframes rostIn { from { opacity: 0; transform: scale(.5) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .rost--in { animation: none } }

/* «не хватает одного» = реальная редкость; «группа собралась» = победа */
.mcard.is-last { box-shadow: inset 0 0 0 1px var(--violet) }
.mcard.is-last .mcard__count { color: var(--violet-bright); font-weight: 600 }
html[data-theme="light"] .mcard.is-last .mcard__count { color: var(--violet) }
.mcard.is-full { box-shadow: inset 0 0 0 1px var(--ok) }
.mcard.is-full .mcard__fill { background: var(--ok) }
.mcard__count b { font-weight: 800; color: var(--ink) }

/* инлайн-зов «возьми своего» после RSVP (вирусность на пике эмоции) */
.mcard__invite { display: block; width: 100%; margin: .7rem 0 0; padding: .6rem; background: rgba(122,82,194,.1); border: 1px solid var(--line); border-radius: 11px; color: var(--violet-bright); font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease) }
.mcard__invite.is-in { opacity: 1; transform: none }
html[data-theme="light"] .mcard__invite { color: var(--violet) }
@media (prefers-reduced-motion: reduce) { .mcard__invite { transition: none } }

/* тумблеры согласия на уведомления (строгий opt-in) */
.ntoggles { display: flex; flex-direction: column; gap: .6rem; margin: 1.2rem 0 0 }
.ntoggle { display: flex; align-items: center; gap: .9rem; text-align: left; width: 100%; background: var(--card-solid); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; cursor: pointer; font: inherit; transition: border-color .2s }
.ntoggle.is-on { border-color: var(--violet) }
.ntoggle__b { flex: 1; min-width: 0 }
.ntoggle__t { margin: 0; font-weight: 600; font-size: .98rem; color: var(--ink) }
.ntoggle__s { margin: .15rem 0 0; font-size: .82rem; color: var(--faint); line-height: 1.4 }
.ntoggle__sw { flex: none; width: 46px; height: 28px; border-radius: 14px; background: var(--line-2); position: relative; transition: background .24s var(--ease) }
.ntoggle.is-on .ntoggle__sw { background: var(--violet) }
.ntoggle__knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .24s cubic-bezier(.32,.72,0,1); box-shadow: 0 1px 3px rgba(0,0,0,.3) }
.ntoggle.is-on .ntoggle__knob { transform: translateX(18px) }
@media (prefers-reduced-motion: reduce) { .ntoggle__sw, .ntoggle__knob { transition: none } }

/* приглушённая вторичная кнопка (экран успеха / уведомлений) */
.su-soft { font-size: .9rem !important; color: var(--muted) !important; opacity: .92 }

/* spring-juice: ripple на сплошных кнопках */
.btn, .mcard__go, .feat, .tab { position: relative; overflow: hidden }
.rip { position: absolute; border-radius: 50%; background: currentColor; opacity: .18; transform: scale(0); pointer-events: none; animation: ripple .5s var(--ease) forwards }
.btn--primary .rip, .mcard__go .rip { background: #fff; opacity: .34 }
@keyframes ripple { to { transform: scale(1); opacity: 0 } }
/* pop-отклик на выборе чипа/опции/сегмента */
.chip.pop, .opt.pop, .seg__opt.pop { animation: springPop .28s var(--k-spring) }
@keyframes springPop { 0% { transform: scale(.96) } 45% { transform: scale(1.04) } 100% { transform: scale(1) } }
@media (prefers-reduced-motion: reduce) { .rip { display: none } .chip.pop, .opt.pop, .seg__opt.pop { animation: none } }

/* ============================================================
   БРАТСТВО + ЭСТЕТИКА APPLE (орбита = единственная героическая деталь)
   ============================================================ */
/* орбита: замедлить спин, вернуть ОДНУ дорогую деталь – дыхание ядра + контраст точек */
/* орбита = единственная героическая деталь: плоское ядро + дыхание 4%, без свечения (премиум = сдержанность) */
.orbit__spin { animation-duration: 60s }
.orbit__core { animation: orbitBreath 5.5s var(--k-decel) infinite; box-shadow: none }
.orbit__dot.is-lit { background: var(--violet); box-shadow: none; opacity: 1 }
.orbit__dot.is-dim { background: var(--line-2); box-shadow: none; opacity: .42 }
@keyframes orbitBreath { 0%, 100% { transform: translate(-50%,-50%) scale(1) } 50% { transform: translate(-50%,-50%) scale(1.04) } }
@media (prefers-reduced-motion: reduce) { .orbit__core { animation: none } }

/* маркер основателя (заслуженная редкость первой сотни, нельзя докупить) */
.founder-chip { display: inline-flex; align-items: center; gap: .3rem; margin: .5rem 0 0; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--violet-bright); background: rgba(122,82,194,.14); border: 1px solid rgba(122,82,194,.3); letter-spacing: .01em }
html[data-theme="light"] .founder-chip { color: var(--violet) }

/* «твоя глава» + цель следующего ранга */
.puser--chapter { color: var(--ink-2); font-weight: 600 }
.lstep__goal { margin: .35rem 0 0; font-size: .82rem; font-weight: 600; color: var(--violet-bright); line-height: 1.4 }
html[data-theme="light"] .lstep__goal { color: var(--violet) }

/* «твоё место за столом» при сборе моей встречи */
.mcard__seat { margin: .7rem 0 0; padding: .6rem .8rem; border-radius: 11px; background: rgba(93,214,160,.12); border: 1px solid rgba(93,214,160,.3); color: var(--ok); font-size: .86rem; font-weight: 700; text-align: center; opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease) }
.mcard__seat.is-in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .mcard__seat { transition: none } }

/* главы районов: точка-индикатор на чипе + метка «твоя глава» */
.chip-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--violet-bright); margin-right: .4rem; vertical-align: middle }
html[data-theme="light"] .chip-dot { background: var(--violet) }
.district-card__n { display: flex; align-items: center; flex-wrap: wrap }
.district-card__mine { margin-left: .5rem; padding: .12rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; color: var(--violet-bright); background: rgba(122,82,194,.16) }
html[data-theme="light"] .district-card__mine { color: var(--violet) }
.district-card__state b { color: var(--ink); font-weight: 800 }

/* ============================================================
   READING POLISH (app) – баланс строк, выделение, читаемость
   ============================================================ */
::selection { background: rgba(141,94,232,.3) }
h1, .h1, .lt, .greet, .lead, .empty__t, .success__t, .feat__k, .mcard__title { text-wrap: balance }
.lead, .hero__sub, .row__s, .mcard__meta, .lstep__s, .ntoggle__s, .lt-sub, .field__hint { text-wrap: pretty }
.lead { line-height: 1.5 }
.lstep__s { line-height: 1.5 }

/* SOS-блок безопасности (102 + бот милиции Минска) */
.sos { margin-top: 1.6rem; padding: 1.1rem 1.2rem; border-radius: 16px; background: var(--card-solid); border: 1px solid var(--line) }
.sos__t { margin: 0 0 .3rem; font-weight: 700; font-size: 1rem; color: var(--ink) }
.sos__s { margin: 0 0 .9rem; font-size: .9rem; color: var(--faint); line-height: 1.5 }
.sos__row { display: flex; flex-direction: column; gap: .55rem }
.sos__fine { margin: .7rem 0 0; font-size: .78rem; color: var(--faint); text-align: center }
.btn--danger { background: #e5484d; color: #fff; text-decoration: none }
.btn--danger:active { transform: scale(.97) }
html[data-theme="light"] .btn--danger { background: #d93c41 }

/* ============================================================
   СВОЯ КАРТА (Leaflet + OSM/CARTO) – метки открытых встреч
   ============================================================ */
.leaflet-container { background: var(--card-solid) !important; font-family: var(--font-body) !important }
.lmap { height: 264px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--card-solid); margin: 0 0 .5rem; z-index: 0 }
.lmap__legend { font-size: .76rem; color: var(--faint); margin: 0 0 1rem; line-height: 1.45 }
.lmap__fail { padding: 2.2rem 1rem; text-align: center; color: var(--faint); font-size: .9rem }
/* фирменный пин-точка (метка встречи, не человек) */
.lpin { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--violet); border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45) }
.lpin--full { background: var(--ok) }
/* попап в стиле приложения */
.leaflet-popup-content-wrapper { background: var(--card-solid); color: var(--ink); border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,.45); border: 1px solid var(--line) }
.leaflet-popup-tip { background: var(--card-solid); border: 1px solid var(--line); box-shadow: none }
.leaflet-popup-content { margin: .7rem .9rem; line-height: 1.4 }
.leaflet-popup-close-button { color: var(--faint) !important }
.lpop__t { margin: 0 0 .2rem; font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink) }
.lpop__m { margin: 0 0 .3rem; font-size: .82rem; color: var(--faint) }
.lpop__s { margin: 0; font-size: .82rem; font-weight: 600; color: var(--violet-bright) }
html[data-theme="light"] .lpop__s { color: var(--violet) }
/* контролы карты потише, под тему */
.leaflet-control-zoom a { background: var(--card-solid) !important; color: var(--ink) !important; border-color: var(--line) !important }
.leaflet-bar { border: 1px solid var(--line) !important }
.leaflet-control-attribution { background: rgba(0,0,0,.45) !important; color: var(--faint) !important; font-size: 9px }
.leaflet-control-attribution a { color: var(--muted) !important }

/* ===== движок встреч: окно времени + степпер + тема нативных пикеров ===== */
html { color-scheme: dark }
html[data-theme="light"] { color-scheme: light }
.when { display: flex; flex-direction: column; gap: .55rem }
.when__date { width: 100% }
.when__row { display: flex; gap: .6rem }
.when__lbl { flex: 1; display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .92rem; font-weight: 600 }
.when__time { flex: 1; min-width: 0 }
.stepper { display: flex; align-items: center; justify-content: space-between; margin-top: .9rem }
.stepper__lbl { color: var(--ink); font-size: .98rem; font-weight: 600 }
.stepper__ctl { display: flex; align-items: center; gap: .9rem }
.stepper__b { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card-solid); color: var(--ink); font-size: 1.3rem; font-weight: 700; cursor: pointer; display: grid; place-items: center; line-height: 1 }
.stepper__b:active { transform: scale(.92) }
.stepper__n { min-width: 1.4rem; text-align: center; font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: var(--violet-bright) }
html[data-theme="light"] .stepper__n { color: var(--violet) }

/* юр-дисклеймер согласия (анкета шаг 4) */
.pledge { margin: .7rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--faint); padding: .8rem .9rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px }
.pledge .rules-link { font-size: .82rem }

/* чек-ин: кнопка «нужна помощь» (тёплый янтарь, не тревожно-красный) */
.at-help { color: var(--amber) !important }

/* Фаза 2: заявки на присоединение (голосование) */
.jlist { display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem }
.jcard { background: var(--card-solid); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem }
.jcard__t { margin: 0 0 .15rem; font-weight: 700; font-size: 1.02rem; color: var(--ink) }
.jcard__s { margin: 0 0 .85rem; font-size: .85rem; color: var(--faint) }
.jcard__act { display: flex; gap: .6rem }
.jcard__act .btn { flex: 1; padding: .55rem; min-height: 42px; font-size: .92rem; margin: 0 }

/* подбор по плану: честный callout совпадений */
.match-head { background: var(--violet-tint); border: 1px solid var(--line); border-radius: var(--r-card); padding: .9rem 1.1rem; margin: 0 0 .3rem; color: var(--ink-2); font-size: var(--t-callout); line-height: 1.45 }
.match-head b { color: var(--violet-bright); font-weight: 800; font-size: 1.2rem }
html[data-theme="light"] .match-head b { color: var(--violet) }

/* ============================================================
   REDUCED MOTION – единый авторитетный блок (a11y; здесь когда-то прятался глянец).
   Гарантированно гасит ВСЁ движение и ставит орбиту в статичную позу.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .view.in-fwd, .view.in-back, .view.in-fade,
  .orbit__core, .orbit__spin, .orbit--bloom,
  .statuschip__dot, .steps__dot.is-now::after,
  .preview, .field, .success, .skel, .grid2 .gcard, .feat,
  .invite-free, .tab, .rmap__sec, .district-card, .spark,
  .rost--in, .chip.pop, .opt.pop, .seg__opt.pop, .postcard--reveal,
  .list .row, .ladder .lstep, .feed .preview, .draw { animation: none !important }
  .rip { display: none !important }
  .mcard__fill, .seg__thumb, .ntoggle__sw, .ntoggle__knob,
  .mcard__invite, .mcard__seat, .view, .btn, .feat, .gcard, .chip, .opt, .row { transition: none !important }
  .orbit__core { transform: translate(-50%,-50%) scale(1) !important }
  .draw { stroke-dashoffset: 0 !important }
}


/* ===== Профили + Пульс ===== */
.pulse{display:flex;flex-direction:column;gap:10px}
.pulse-new{display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px;border-radius:16px;border:1px dashed var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;margin-bottom:4px}
.pulse-new__ic{width:20px;height:20px;color:var(--violet-bright,#b7a3ff);flex:none}
.pcardx{padding:14px 16px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm,0 8px 24px rgba(0,0,0,.18))}
.pcardx__top{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.pavatarx{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;background:linear-gradient(135deg,var(--violet,#6f4bd8),var(--violet-deep,#4f2d7f));border:none;cursor:pointer}
.pcardx__id{flex:1;min-width:0}
.pcardx__name{font-weight:700;font-size:14.5px;color:var(--ink)}
.pcardx__meta{font-size:12px;color:var(--muted);margin-top:1px}
.pcardx__tag{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--violet-tint,rgba(111,75,216,.16));color:var(--violet-bright,#b7a3ff);white-space:nowrap}
.pcardx__line{font-size:12.5px;font-weight:600;color:var(--amber,#e2a85a);margin-bottom:4px}
.pcardx__txt{font-size:14px;line-height:1.5;color:var(--ink)}
.pcardx__foot{display:flex;align-items:center;gap:8px;margin-top:12px}
.pcardx__resp{font-size:12px;color:var(--muted);margin-left:auto}
.pcardx__more{margin-left:auto;background:none;border:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 6px}
.react{font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.react.is-on{background:var(--amber-soft,#2c2417);color:var(--amber,#e2a85a);border-color:transparent}
.btn--mini{font-size:12.5px;padding:7px 14px;border-radius:999px}
.btn--mini.is-done{opacity:.6}
.empty{text-align:center;padding:2.6rem 1rem}
.empty__t{font-weight:700;font-size:1.05rem;color:var(--ink)}
.empty__s{font-size:.9rem;color:var(--muted);margin-top:.4rem;max-width:30ch;margin-left:auto;margin-right:auto}
.ta{width:100%;min-height:84px;resize:vertical;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:14px}
.ta-hint{font-size:11.5px;color:var(--muted);margin:.4rem 0 1rem}
.inp{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:14px;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1rem}
.photopick{padding:14px;border-radius:16px;border:1px dashed var(--line);background:var(--card)}
.photopick__btns{display:flex;gap:8px;flex-wrap:wrap}
.photopick__ok{color:var(--ok,#5dd6a0);font-weight:600;font-size:13px;margin-bottom:10px}
.photopick__pend{color:var(--amber,#e2a85a);font-size:12.5px;margin-bottom:10px}
.photopick__rej{color:#e57373;font-size:12.5px;margin-bottom:10px}
.consents{display:flex;flex-direction:column;gap:2px}
.consent{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
.consent__b{flex:1}
.consent__t{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.consent__s{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.consent input{width:20px;height:20px;accent-color:var(--violet,#6f4bd8);flex:none}
.member{text-align:center;padding:1.4rem 1rem .6rem}
.member__ph{width:96px;height:96px;border-radius:50%;display:inline-grid;place-items:center;font-size:36px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--violet,#6f4bd8),var(--violet-deep,#4f2d7f));box-shadow:0 0 0 4px var(--card),0 0 0 6px var(--violet,#6f4bd8)}
.member__name{font-weight:800;font-size:1.3rem;margin-top:.8rem;color:var(--ink)}
.member__meta{font-size:.92rem;color:var(--muted);margin-top:.2rem}
.member__status{font-size:.92rem;color:var(--amber,#e2a85a);margin-top:.5rem}
.member__bio{font-size:.96rem;line-height:1.55;color:var(--ink);margin:1rem 0}
.tagsx{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1rem}
.tagx{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--violet-tint,rgba(111,75,216,.16));color:var(--violet-bright,#b7a3ff)}
.tagx--soft{background:var(--card);border:1px solid var(--line);color:var(--muted)}
.stepper__l{font-size:13px;color:var(--muted);margin-right:auto}


/* ===== Активности · выбор повода (3 шага) ===== */
.kcats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: .4rem }
.kcat { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 15px 15px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); cursor: pointer; text-align: left; color: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease), box-shadow .3s var(--ease), border-color .3s }
.kcat:active { transform: scale(.97) }
.kcat__scene { width: 64px; height: 44px }
.kcat__t { font-weight: 700; font-size: 15px; letter-spacing: -.01em }
.kcats.is-choosing .kcat:not(.is-picked) { opacity: .22; transform: scale(.95) }
.kcat.is-picked { transform: scale(1.05); box-shadow: 0 14px 34px rgba(111, 75, 216, .32); border-color: var(--violet, #6f4bd8) }

.kbanner { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 15px 16px; border-radius: 18px; border: 1px solid transparent; cursor: pointer; color: #fff; text-align: left; background: linear-gradient(135deg, var(--violet-deep, #4f2d7f), var(--violet, #6f4bd8)) }
.kbanner__b { flex: 1 }
.kbanner__t { display: block; font-weight: 700; font-size: 15px }
.kbanner__s { display: block; font-size: 12.5px; opacity: .85; margin-top: 2px }
.kbanner__chev { width: 18px; height: 18px; opacity: .9 }
.klink { display: block; width: 100%; margin-top: 14px; padding: 12px; background: none; border: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
.kback { background: none; border: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; padding: 4px 0; margin-bottom: 6px }
.kback:active { opacity: .6 }

.kfmts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.kfmt { padding: 15px 14px; border-radius: 15px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font: inherit; font-weight: 600; font-size: 14.5px; text-align: left; cursor: pointer; transition: transform .2s var(--ease), border-color .2s }
.kfmt:active { transform: scale(.97) }
.kfmt:hover { border-color: var(--violet, #6f4bd8) }

.kform { display: flex; flex-direction: column; gap: 14px }
.kform .fld { display: flex; flex-direction: column; gap: 6px }
.fld__l { font-size: 13px; font-weight: 600; color: var(--muted) }
.fld__hint { font-size: 12px; color: var(--muted); margin: -.5rem 0 0 }
.kform__note { font-size: .84rem; margin-top: .6rem; line-height: 1.5 }

/* ===== микро-сцены движения ===== */
.kscene { width: 64px; height: 44px; display: block; overflow: visible }
.kscene circle, .kscene rect { transform-box: fill-box; transform-origin: center }
.ks-warm, .ks-blight, .ks-node { fill: var(--amber, #e2a85a) }
.ks-pt, .ks-opt, .ks-seat { fill: var(--violet-bright, #b7a3ff) }
.ks-pt--end { fill: var(--amber, #e2a85a) }
.ks-tbl { fill: var(--violet, #6f4bd8); opacity: .5 }
.ks-steam, .ks-route, .ks-pulse, .ks-conv { fill: none; stroke: var(--violet-bright, #b7a3ff); stroke-linecap: round; stroke-linejoin: round }
.ks-steam { stroke-width: 2; stroke-dasharray: 18; animation: ksSteam 2.6s var(--ease) infinite }
.ks-steam--b { animation-delay: .6s }
.ks-warm { animation: ksWarm 2.6s var(--ease) infinite }
.ks-route { stroke-width: 2; stroke-dasharray: 64; animation: ksDraw 3.2s var(--ease) infinite }
.ks-pt--end { animation: ksPop 3.2s var(--ease) infinite }
.ks-pulse { stroke: var(--amber, #e2a85a); stroke-width: 2.2; stroke-dasharray: 96; animation: ksDraw 1.9s var(--ease) infinite }
.ks-screen { fill: none; stroke: var(--line); stroke-width: 2 }
.ks-glow { fill: var(--violet, #6f4bd8); opacity: .12; animation: ksGlow 3s ease-in-out infinite }
.ks-seat { animation: ksSeat 3s var(--ease) infinite }
.ks-seat--2 { animation-delay: .25s } .ks-seat--3 { animation-delay: .5s } .ks-seat--4 { animation-delay: .75s }
.ks-bpt { fill: none; stroke: var(--violet-bright, #b7a3ff); stroke-width: 2; opacity: .55 }
.ks-blight { animation: ksWarm 2.8s var(--ease) infinite }
.ks-conv { stroke-width: 2; stroke-dasharray: 32; opacity: .7; animation: ksDraw 2.8s var(--ease) infinite }
.ks-conv--2 { animation-delay: .3s } .ks-conv--3 { animation-delay: .6s }
.ks-node { animation: ksWarm 2.8s var(--ease) infinite }
.ks-hint { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 30; animation: ksDraw 3.4s var(--ease) infinite }
@keyframes ksWarm { 0%, 100% { opacity: .6; transform: scale(1) } 50% { opacity: 1; transform: scale(1.12) } }
@keyframes ksSteam { 0% { stroke-dashoffset: 18; opacity: 0 } 40% { opacity: .7 } 100% { stroke-dashoffset: -8; opacity: 0 } }
@keyframes ksDraw { 0% { stroke-dashoffset: 96 } 55%, 100% { stroke-dashoffset: 0 } }
@keyframes ksPop { 0%, 50% { transform: scale(.6); opacity: .4 } 72% { transform: scale(1.08) } 100% { transform: scale(1); opacity: 1 } }
@keyframes ksGlow { 0%, 100% { opacity: .06 } 50% { opacity: .3 } }
@keyframes ksSeat { 0% { opacity: .2; transform: scale(.65) } 50% { opacity: 1; transform: scale(1) } 100% { opacity: .2; transform: scale(.65) } }
@media (prefers-reduced-motion: reduce) { .kscene *, .kcat { animation: none !important } .kcat { transition: none !important } .kcats.is-choosing .kcat:not(.is-picked), .kcat.is-picked { transform: none !important; opacity: 1 !important } .kscene * { stroke-dashoffset: 0 !important; opacity: 1 !important; transform: none !important } .ks-glow { opacity: .2 !important } }

/* ===== поддержать ===== */
.kbadge { display: inline-block; background: var(--amber-soft, #2c2417); color: var(--amber, #e2a85a); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px }
.ktiers { display: flex; gap: 8px; flex-wrap: wrap }
.ktier { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer }
.ktier.is-on { background: var(--violet, #6f4bd8); color: #fff; border-color: transparent }
.kpurps { display: flex; flex-direction: column; gap: 8px }
.kpurp { text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer }
.kpurp.is-on { border-color: var(--violet, #6f4bd8); box-shadow: inset 0 0 0 1px var(--violet, #6f4bd8) }
.kpurp__t { display: block; font-weight: 700; font-size: 14px }
.kpurp__s { display: block; font-size: 12px; color: var(--muted); margin-top: 2px }

/* ===== Встречи Круга ===== */
.oevents { display: flex; flex-direction: column; gap: 14px }
.oevent { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 18px; overflow: hidden; cursor: pointer; padding: 0; color: var(--ink) }
.oevent:active { transform: scale(.99) }
.oevent__cover, .oev__cover { display: flex; align-items: flex-end; padding: 13px }
.oevent__cover { height: 96px }
.oev__cover { height: 144px; border-radius: 18px; margin-bottom: 14px }
.oevent__cover--0 { background: linear-gradient(135deg, #6f4bd8, #4f2d7f) }
.oevent__cover--1 { background: linear-gradient(135deg, #3a2d5c, #e2a85a) }
.oevent__cover--2 { background: linear-gradient(135deg, #4f2d7f, #241f38) }
.oevent__cover--3 { background: linear-gradient(135deg, #7a52c2, #e2a85a) }
.oevent__date { color: #fff; font-weight: 800; font-size: 17px; text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 2px 10px rgba(0, 0, 0, .45) }
.oev__date { color: #fff; font-weight: 800; font-size: 20px; text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 2px 12px rgba(0, 0, 0, .5) }
.oevent__b { padding: 14px }
.oevent__t { font-weight: 700; font-size: 16px }
.oevent__m { font-size: 13px; color: var(--muted); margin-top: 3px }
.oevent__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px }
.oevent__price, .oev__price { color: var(--amber, #e2a85a); font-weight: 700 }
.oev__price { font-size: 18px }
.oevent__cap { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted) }
.oevent__bar { width: 60px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden }
.oevent__bar > span { display: block; height: 100%; background: var(--violet-bright, #b7a3ff) }
.oev__meta { font-size: .95rem; color: var(--muted); margin: -.4rem 0 1rem }
.oev__txt { font-size: .96rem; line-height: 1.55; color: var(--ink) }
.oev__row { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 .4rem }
.oev__small { font-size: .85rem; color: var(--muted) }
.oev__booked { margin-top: 1rem; padding: 13px 15px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--ok, #5dd6a0); font-weight: 600; font-size: 14px }


/* ===== лента особых поводов ===== */
.occs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.occ { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 13px 14px; cursor: pointer; color: var(--ink); display: flex; flex-direction: column; gap: 5px }
.occ:active { transform: scale(.98) }
.occ__top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px }
.occ__tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--violet-tint, rgba(111, 75, 216, .16)); color: var(--violet-bright, #b7a3ff) }
.occ__mine { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--amber-soft, #2c2417); color: var(--amber, #e2a85a) }
.occ__t { font-weight: 700; font-size: 14.5px; line-height: 1.25 }
.occ__line { font-size: 12.5px; color: var(--amber, #e2a85a); font-weight: 600 }
.occ__m { font-size: 12px; color: var(--muted) }
.occ__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px }
.occ__host { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--violet, #6f4bd8), var(--violet-deep, #4f2d7f)) }
.occ__cap { font-size: 12px; color: var(--muted) }
.occ__addr { margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--amber-soft, #2c2417); color: var(--amber, #e2a85a); font-weight: 600; font-size: 13.5px }


/* ===== фото профиля (R2) ===== */
.pavatarx__img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block }
.member__ph-img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block }
.photopick__img { width:72px; height:72px; border-radius:14px; object-fit:cover; display:block; margin-bottom:12px }

/* ===== featured Встреча Круга на Главной ===== */
.home-event { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 .9rem; padding: 14px 16px; border-radius: 18px; border: 1px solid transparent; background: linear-gradient(135deg, var(--violet-deep, #4f2d7f), var(--violet, #6f4bd8)); color: #fff; text-align: left; cursor: pointer }
.home-event:active { transform: scale(.99) }
.home-event__date { font-weight: 800; font-size: 14px; background: rgba(255, 255, 255, .18); padding: 8px 10px; border-radius: 12px; white-space: nowrap }
.home-event__b { flex: 1; display: flex; flex-direction: column; min-width: 0 }
.home-event__k { font-weight: 700; font-size: 15px }
.home-event__s { font-size: 12.5px; opacity: .88; margin-top: 2px }

/* ===== акцентная центральная вкладка «Создать» ===== */
.tab__ic { min-height: 32px }
.tab--accent .tab__ic { width: 32px; height: 32px; border-radius: 50%; background: var(--violet, #6f4bd8); box-shadow: 0 4px 12px rgba(111, 75, 216, .38) }
.tab--accent .tab__ic svg { color: #fff; stroke: #fff }
.tab--accent.is-on .tab__ic { background: var(--violet, #6f4bd8) }
html[data-theme="light"] .tab--accent .tab__ic { background: var(--violet) }

/* --- первый живой контур: Сегодня / двухэтапное подтверждение --- */
.home-today { margin: .2rem 0 .4rem }
.home-today__empty { background: var(--card); border: 1px dashed var(--line); border-radius: 16px; padding: 1.1rem; text-align: center; margin: .4rem 0 .2rem }
.home-today__t { font-weight: 700; color: var(--ink); margin: 0 0 .25rem }
.home-today__s { color: var(--muted); font-size: .9rem; margin: 0 }
.home-today__more { width: 100%; background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: .7rem; color: var(--violet); font-weight: 600; margin-top: .2rem; cursor: pointer }
.feed--home .mcard { margin-bottom: .55rem }
.home-confirm:empty { display: none }
.confirm-card { background: var(--card-solid); border: 1px solid var(--line); border-left: 3px solid var(--amber, #e2a85a); border-radius: 16px; padding: 1rem 1.05rem; margin: .2rem 0 .7rem; box-shadow: 0 6px 18px rgba(31,28,40,.08) }
.confirm-card__tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #c8821f; background: rgba(226,168,90,.14); padding: .2rem .55rem; border-radius: 999px }
.confirm-card__t { font-weight: 700; color: var(--ink); margin: .5rem 0 .15rem; font-size: 1.02rem }
.confirm-card__m { color: var(--muted); font-size: .9rem; margin: 0 0 .5rem }
.confirm-card__ask { color: var(--ink); font-size: .92rem; margin: 0 0 .7rem }
.confirm-card__row { display: flex; gap: .4rem }
.cbtn { flex: 1; padding: .6rem .4rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer }
.cbtn--yes { background: var(--violet, #6f4bd8); border-color: var(--violet, #6f4bd8); color: #fff }
.cbtn--no { color: var(--muted) }
.confirm-done { background: rgba(93,214,160,.12); border: 1px solid rgba(93,214,160,.3); border-radius: 14px; padding: .8rem 1rem; color: var(--ink); font-weight: 600; text-align: center; margin: .2rem 0 .7rem; font-size: .92rem }

/* превью-маркировка (вне реального Telegram) */
.preview-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: #c8821f; color: #fff; font-size: 11px; line-height: 1.3; font-weight: 600; text-align: center; padding: 6px 12px; box-shadow: 0 1px 6px rgba(0,0,0,.18) }
body.has-preview-bar { padding-top: 34px }