/* Кабинет менеджеров застройщиков — добавки поверх app.css + rm.css */

/* аватар */
.ava { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, rgba(209,224,90,.22), rgba(237,234,226,.06)); border: 1px solid var(--line-2); color: var(--sand); }
.ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ava b { font-weight: 600; letter-spacing: .02em; }
.ava.md { width: 46px; height: 46px; font-size: 15px; }
.ava.xl { width: 128px; height: 128px; font-size: 38px; margin: 0 auto 18px; box-shadow: 0 0 0 6px rgba(209,224,90,.08), 0 18px 50px rgba(0,0,0,.45); }

/* шаг «Фото» */
.photobox { display: flex; justify-content: center; padding-top: 18px; }
.photopick { display: flex; flex-direction: column; align-items: center; cursor: pointer; position: relative; }
.photopick input, .phchange input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photopick .ava.xl { transition: transform .25s cubic-bezier(.22,1,.36,1); }
.photopick:active .ava.xl { transform: scale(.96); }
.phbtn { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--sand); font-size: 14px; }

/* умная строка проекта */
.geo .fld { width: 100%; box-sizing: border-box; height: 54px; padding: 0 16px; border-radius: 14px; font-size: 16px; }
.psug { flex-direction: column; overflow: visible; gap: 6px; margin-top: 8px; min-height: 0; }
.psug button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 14px; white-space: normal; text-align: left; width: 100%; animation: enter .28s cubic-bezier(.22,1,.36,1) both; }
.psug button small { margin-left: 0; font-size: 12px; }
.psug button.own { border-style: dashed; color: var(--lime); }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pchip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 999px; background: rgba(209,224,90,.12); border: 1px solid rgba(209,224,90,.35); color: var(--sand); font-size: 13.5px; }
.pchip small { color: var(--faint); }
.pchip button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(237,234,226,.1); color: var(--sand); cursor: pointer; font-size: 15px; line-height: 1; }

/* шапка кабинета с аватаром */
.mehead { display: flex; align-items: center; gap: 12px; }
.mehead .title { margin: 2px 0 0; }

/* карточки */
.lead .acts, .lbody.acts { display: flex; gap: 8px; padding: 0 16px 14px; }
.cta.mini { height: 42px; font-size: 14px; flex: 1; }
.ghost.mini { height: 42px; flex: 1; border: 1px solid var(--line-2); border-radius: 999px; color: var(--sand); position: relative; }
.lsub { color: var(--faint); font-size: 12px; margin-left: auto; }
.mgrrow { display: flex; gap: 12px; align-items: flex-start; }
.mgrtxt { flex: 1; min-width: 0; }
.addbtn { margin-bottom: 14px; }
.leads { display: flex; flex-direction: column; gap: 10px; }
.sec { margin: 18px 0 10px; }

/* профиль */
.profile { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.profile .ava.xl { margin-bottom: 4px; }
.phchange { align-self: center; width: auto; padding: 0 18px; margin-bottom: 10px; }

/* формы Артура */
.ovl.on { align-items: flex-end; padding: 0; }
.ovlbox.form { width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; background: var(--ink-2); border: 1px solid var(--line); border-radius: 28px 28px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); box-sizing: border-box; gap: 10px; }
.ovlbox.form .title { margin: 0 0 4px; }
.glbl { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.ovlbox.form .fld { width: 100%; box-sizing: border-box; height: 50px; padding: 0 14px; border-radius: 14px; font-size: 16px; }
.mchips { flex-wrap: wrap; overflow: visible; }
.crow { display: grid; grid-template-columns: 1fr 1.25fr auto; gap: 6px; align-items: center; }
.crow .x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--sand); font-size: 17px; cursor: pointer; }
.preview pre { margin: 6px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(237,234,226,.04); border: 1px dashed var(--line-2); color: var(--sand); font: 500 12.5px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; }
.mfoot { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

/* светлая тема */
html.light .ovlbox.form { background: #fff; }
html.light .pchip { background: rgba(140,160,20,.12); border-color: rgba(120,140,10,.35); color: #1a1a1a; }
html.light .pchip button { background: rgba(0,0,0,.06); color: #1a1a1a; }
html.light .ghost.mini, html.light .phbtn { color: #1a1a1a; }
html.light .preview pre { color: #1a1a1a; background: rgba(0,0,0,.03); }

.ovlbox.form > * { flex-shrink: 0; }
.ovlbox.form .ghost.mini { flex: 0 0 42px; }
.body.ptop { justify-content: flex-start; }
.pbox { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.pbox > * { flex-shrink: 0; }
.pbox .fld { width: 100%; box-sizing: border-box; height: 54px; padding: 0 16px; border-radius: 14px; font-size: 16px; }
.pbox .pchips { margin-bottom: 2px; }
.pbox .fld, .ovlbox.form .fld { flex: 0 0 auto; }
.body.ptop::before { flex: 0 0 0; }
.lead .lbody.acts { display: flex !important; flex-direction: row; align-items: stretch; max-height: none; opacity: 1; overflow: visible; padding: 2px 14px 14px; gap: 8px; border-top: 0; }
.lead .lbody.acts > button { flex: 1 1 0; min-height: 42px; height: 42px; width: auto; }

/* Смена вкладки / ответ на карточке: внутренние «въезды» не повторяются, список проявляется целиком. */
.scene .body.swap .lbody, .scene .body.keep .lbody, .scene .body.keep .psug button { animation: none; }

/* ══════════════════════════════════════════════════════════════════════
   ТЕМА GEMINI (по умолчанию): тёмная база + живой приглушённый градиент.
   Палитра — утверждённая палитра Gemini с визитки. Двигаются только transform
   (поворот и дрейф), без перерисовки — телефону легко. Вуаль сверху глушит
   цвет под текстом, внизу свечение ярче, как у приложения Gemini.
   ══════════════════════════════════════════════════════════════════════ */
.gembg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; display: none; background: #0b0b0c; }
html.gem .gembg { display: block; }
html.gem .amb { display: none; }
.gembg::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax;
  background: conic-gradient(from 0deg, #4285f4, #7b6ad0, #9b72cb, #c76a9e, #d96570, #e28a45, #f9ab00, #d96570, #9b72cb, #1a73e8, #4285f4);
  filter: blur(70px); opacity: 0.30; will-change: transform;
  animation: gemTurn 60s linear infinite;
}
.gembg i { position: absolute; display: block; border-radius: 50%; filter: blur(60px); will-change: transform; }
.gembg .g1 { width: 70vmax; height: 70vmax; left: -25vmax; bottom: -30vmax; background: radial-gradient(circle, rgba(66, 133, 244, 0.55), rgba(66, 133, 244, 0) 65%); animation: gemDrift1 26s ease-in-out infinite; }
.gembg .g2 { width: 60vmax; height: 60vmax; right: -25vmax; bottom: -20vmax; background: radial-gradient(circle, rgba(217, 101, 112, 0.5), rgba(217, 101, 112, 0) 65%); animation: gemDrift2 32s ease-in-out infinite; }
.gembg .g3 { width: 55vmax; height: 55vmax; left: 10vmax; bottom: -35vmax; background: radial-gradient(circle, rgba(155, 114, 203, 0.55), rgba(155, 114, 203, 0) 65%); animation: gemDrift3 38s ease-in-out infinite; }
.gembg .g4 { width: 40vmax; height: 40vmax; right: -10vmax; top: -18vmax; background: radial-gradient(circle, rgba(249, 171, 0, 0.28), rgba(249, 171, 0, 0) 65%); animation: gemDrift1 44s ease-in-out infinite reverse; }
.gembg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.72) 0%, rgba(11, 11, 12, 0.55) 40%, rgba(11, 11, 12, 0.2) 100%);
}
@keyframes gemTurn { to { transform: rotate(360deg); } }
@keyframes gemDrift1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(18vw, -10vh, 0) scale(1.15); } }
@keyframes gemDrift2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-20vw, -14vh, 0) scale(0.9); } }
@keyframes gemDrift3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(0.95); } 50% { transform: translate3d(12vw, -18vh, 0) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .gembg::before, .gembg i { animation: none; } }
/* Первый экран: фон стоит на месте, пока грузится и рисуется кабинет (класс calm ставит
   index.html, снимает pm.js через ~1,8 с после показа). Пауза держит первый кадр
   анимации, поэтому при запуске движения ничего не дёргается. */
html.calm .gembg::before, html.calm .gembg i, html.calm .amb i { animation-play-state: paused; }
/* Слово под логотипом прелоадера показываем уже в нашем шрифте (класс fonts — из pm.js). */
html:not(.fonts) .ld-txt { visibility: hidden; }
/* Карточки на цветном фоне — плотнее, чтобы текст читался. */
html.gem .lead, html.gem .stalert, html.gem .cabstats .stat, html.gem .profile, html.gem .empty { background-color: rgba(14, 14, 16, 0.58); }
html.gem .chips.tabs .chip:not(.on) { background-color: rgba(14, 14, 16, 0.5); }

/* Кнопка темы: показывает следующую тему. */
.themebtn svg { display: none; }
html.gem .themebtn .i-moon { display: block; }
html.dark .themebtn .i-sun { display: block; }
html.light .themebtn .i-sun, html.light .themebtn .i-moon { display: none; }
html.light .themebtn .i-gem { display: block; }
html.gem .themebtn { background: rgba(14, 14, 16, 0.5); }

/* ══════════════ прелоадер v2 ══════════════
   Свечение только под квадратом логотипа: форма постоянная (скруглённый квадрат),
   внутри медленно вращаются цвета. Размытие — на внешнем слое, обрезка — на внутреннем,
   иначе края получаются резкими. Линия в «S» в два раза тоньше и рисуется только вперёд:
   слева направо, держится и уходит вправо. Текст тонкий, мелкий, серый, дышит яркостью. */
.ld-fog { display: none; }
.ld-glow { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; filter: blur(20px); opacity: 0.6; pointer-events: none; }
.ld-glow i { position: absolute; inset: 0; border-radius: 34px; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); transform: translateZ(0); }
.ld-glow i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; background: conic-gradient(from 0deg, #d1e05a, #4fe3c1, #6aa8ff, #a78bfa, #f472b6, #fbbf24, #d1e05a); animation: ldSpin 18s linear infinite; }
.ld-frame svg { overflow: visible; }
.ld-draw { fill: none; stroke: #d1e05a; stroke-width: 19.2; stroke-linecap: round; stroke-dasharray: 156 156; animation: ldDraw 3s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes ldDraw {
  0% { stroke-dashoffset: 156; opacity: 0; }
  6% { opacity: 1; }
  45%, 58% { stroke-dashoffset: 0; }
  94% { opacity: 1; }
  100% { stroke-dashoffset: -156; opacity: 0; }
}
.ld-txt { font-size: 9px; font-weight: 400; letter-spacing: 0.26em; color: var(--mist); background: none; -webkit-background-clip: border-box; background-clip: border-box; animation: ldBreathe 3s ease-in-out infinite; }
@keyframes ldBreathe { 0%, 100% { opacity: 0.28; } 50% { opacity: 1; } }
html.light .ld-glow { opacity: 0.45; }
@media (prefers-reduced-motion: reduce) { .ld-glow i::before, .ld-draw, .ld-txt { animation: none; } .ld-draw { stroke-dashoffset: 0; } }
/* Свечение под квадратом медленно дышит: чуть прозрачнее и чуть меньше, потом обратно.
   Цикл 6 с — ровно два вдоха текста, поэтому всё движется в одном ритме. */
.ld-glow { --glo: 0.6; animation: ldGlowBreathe 6s ease-in-out infinite; }
html.light .ld-glow { --glo: 0.45; }
@keyframes ldGlowBreathe {
  0%, 100% { opacity: var(--glo); transform: scale(1); }
  50% { opacity: calc(var(--glo) * 0.55); transform: scale(0.86); }
}
@media (prefers-reduced-motion: reduce) { .ld-glow { animation: none; opacity: var(--glo); } }
/* Логотип стоит неподвижно, одного размера — дышит только свечение под ним. */
.ld-mark { animation: none; }

/* Анкета: строка «Девелопер» под проектами */
.pbox .glbl.pdev { margin-top: 10px; }
.pchip.dev { background: rgba(237, 234, 226, 0.08); border-color: var(--line-2); }
html.light .pchip.dev { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.14); }

/* Обрезка фото */
.crop { position: fixed; inset: 0; z-index: 95; background: #000; display: flex; flex-direction: column; animation: fadein 0.2s ease both; }
.crop-top { padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 10px; text-align: center; font-size: 13px; color: rgba(237, 234, 226, 0.66); }
.crop-stage { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; }
.crop-stage img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; will-change: transform; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none; }
.crop-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62); border: 1.5px solid rgba(255, 255, 255, 0.85); pointer-events: none; }
.crop-bar { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px calc(env(safe-area-inset-bottom, 0px) + 26px); }
.crop-bar button { width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(237, 234, 226, 0.22); background: rgba(237, 234, 226, 0.08); color: #edeae2; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.crop-bar button:active { transform: scale(0.94); }
.crop-bar button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.crop-bar .ok { background: #d1e05a; border-color: #d1e05a; color: #0b0b0c; }

/* Поля анкеты стоят сразу под заголовком, а не по центру экрана: клавиатура их никогда
   не перекрывает, и iOS не сдвигает страницу вверх. */
.body.ptop .fbox { margin-top: 8px; flex-shrink: 0; }

/* Клавиатура iPhone: кабинет всегда ровно в окно приложения (100%), без высоты из JS. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.card { height: 100%; }
/* Форма Артура — «страница» от верха экрана до низа: при клавиатуре верх и поля стоят на месте,
   уменьшается только низ, а длинная форма прокручивается внутри. */
.ovl.on { align-items: stretch; padding: 10px 0 0; }
.ovlbox.form { max-height: none; height: 100%; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.pbox .addproj { align-self: flex-start; flex: 0 0 auto; height: 40px; padding: 0 16px; }

/* Размер текста не зависит от высоты окна: клавиатура больше не уменьшает заголовок и отступы. */
@media (max-height: 660px) {
  .title { font-size: 23px; }
  .card { padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .scene { padding-top: 10px; }
}

/* Плавные шаги анкеты: уход 0,5 с, появление 1 с (в кабинете — как было). */
html:not(.cab) .scene { transition: opacity 0.5s ease, transform 0.5s ease; }
html:not(.cab) .scene.out { opacity: 0; transform: translateY(-14px); }
html:not(.cab) .scene.in { animation: stepIn 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ticks i { transition: background 1s ease, box-shadow 1s ease, flex-grow 1s ease !important; }

/* «Заявка отправлена»: самолётик Telegram улетает с аватарки, след тает, на аватарке — галочка. */
.avawrap { position: relative; align-self: flex-start; }
.avawrap .ava.xl { margin: 0; }
.fly { position: absolute; left: 50%; top: 50%; width: 320px; height: 220px; margin: -150px 0 0 -160px; pointer-events: none; overflow: visible; }
.flytrail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trline { fill: none; stroke: rgba(237, 234, 226, 0.55); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 8; animation: trFade 1s ease 2.2s both; }
.trmask { fill: none; stroke: #fff; stroke-width: 8; stroke-dasharray: 1; stroke-dashoffset: 1; animation: trDraw 1.6s cubic-bezier(0.45, 0, 0.25, 1) 0.6s both; }
.plane { position: absolute; left: 0; top: 0; width: 34px; height: 34px; offset-rotate: auto 45deg; offset-distance: 0%; opacity: 0; filter: drop-shadow(0 4px 10px rgba(66, 133, 244, 0.45)); animation: planeFly 1.6s cubic-bezier(0.45, 0, 0.25, 1) 0.6s both; }
.plane svg { width: 34px; height: 34px; display: block; transform: translate(-50%, -50%); }
@keyframes planeFly { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes trDraw { to { stroke-dashoffset: 0; } }
@keyframes trFade { to { opacity: 0; } }
.okbadge { position: absolute; right: 2px; bottom: 6px; width: 34px; height: 34px; border-radius: 50%; background: #d1e05a; color: #0b0b0c; font-style: normal; font-weight: 800; font-size: 17px; display: grid; place-items: center; box-shadow: 0 0 0 4px var(--ink), 0 6px 18px rgba(209, 224, 90, 0.45); }
.avawrap.sent .okbadge { animation: okPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.1s both; }
@keyframes okPop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }

/* Первый вход одобренного менеджера */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 99; pointer-events: none; }
.welcome { position: fixed; inset: 0; z-index: 98; display: flex; align-items: center; justify-content: center; padding: 24px max(22px, env(safe-area-inset-left, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)); background: rgba(11, 11, 12, 0.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); animation: fadein 0.4s ease both; transition: opacity 0.45s ease; }
.welcome.bye { opacity: 0; }
.wbox { width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px; animation: stepIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.wbox .ava.xl { margin: 0 0 6px; }
.wbox .cta { margin-top: 10px; }
html.light .welcome { background: rgba(243, 243, 240, 0.78); }
@media (prefers-reduced-motion: reduce) { .plane, .trmask, .trline { animation: none; opacity: 0; } }
.avawrap .ava { position: relative; z-index: 1; }
.avawrap .fly { z-index: 0; }
.avawrap .okbadge { z-index: 2; }

/* Профиль менеджера: аватар по центру, ниже — одна аккуратная карточка «подпись слева — значение справа». */
.profile { align-items: center; gap: 12px; padding: 14px 0 6px; background: none !important; }
html.gem .profile { background: none !important; }
.profile .ava.xl { margin: 0 0 2px; }
.prows { width: 100%; border: 1px solid var(--line); border-radius: 18px; background: rgba(237, 234, 226, 0.03); overflow: hidden; margin-top: 6px; }
html.gem .prows { background: rgba(14, 14, 16, 0.58); }
html.light .prows { background: #fff; }
.prow { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.prow:last-child { border-bottom: 0; }
.prow span { color: var(--faint); flex: 0 0 auto; }
.prow b { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* Удаление менеджера */
.lead .lbody.acts > .delbtn { flex: 0 0 42px; width: 42px; padding: 0; display: grid; place-items: center; color: #ff8a8a; border-color: rgba(255, 107, 107, 0.35); }
.delbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ══════════════ нижнее меню кабинета (как в кабинете партнёра) ══════════════ */
.ptabs { flex: 0 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 10px; padding: 5px; border: 1px solid var(--line); border-radius: 22px; background: rgba(237, 234, 226, 0.035); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html.gem .ptabs { background: rgba(14, 14, 16, 0.6); }
.ptab { position: relative; background: none; border: 0; color: var(--faint); font: 600 10px/1.1 var(--f-ui); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 0 6px; border-radius: 17px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.2s ease, background 0.25s ease, transform 0.15s ease; }
.ptab:active { transform: scale(0.94); }
.ptab svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ptab.on { color: var(--ink); background: var(--lime); }
.ptab .nbadge { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #f5c84b; color: #0b0b0c; font: 800 9.5px/16px var(--f-ui); text-align: center; }
.ptab.on .nbadge { background: var(--ink); color: var(--lime); }
.navava { width: 21px; height: 21px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.navava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptab.on .navava { box-shadow: 0 0 0 1.5px var(--ink); }
html.light .ptabs { background: rgba(255, 255, 255, 0.7); border-color: rgba(20, 20, 24, 0.1); }
html.light .ptab { color: rgba(44, 44, 48, 0.45); }
html.light .ptab.on { color: #0b0b0c; }

/* фильтры раздела (бывшие верхние кнопки) */
.fbar { flex: 0 0 auto; }
.fbar:empty { display: none; }

/* поиск по клиентам */
.sbox { margin-bottom: 4px; }
.sbox .sfld { width: 100%; height: 46px; padding: 0 14px; border-radius: 14px; font-size: 16px; box-sizing: border-box; }

/* «всё подтверждено» */
.allok { display: flex; flex-direction: column; gap: 3px; padding: 16px; border-radius: 18px; border: 1px solid rgba(94, 211, 154, 0.3); background: rgba(94, 211, 154, 0.08); }
.allok b { color: #5ed39a; font-size: 14.5px; }
.allok small { color: var(--faint); font-size: 12.5px; }
html.gem .allok { background-color: rgba(14, 14, 16, 0.58); }
.golink { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }

/* история */
.hlist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(237, 234, 226, 0.03); }
html.gem .hlist { background: rgba(14, 14, 16, 0.58); }
html.light .hlist { background: #fff; }
.hrow { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.hrow:last-child { border-bottom: 0; }
.hrow > i { font-style: normal; font-size: 16px; line-height: 20px; flex: 0 0 20px; text-align: center; }
.hrow b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.hrow small { display: block; color: var(--faint); font-size: 12px; margin-top: 2px; }

/* ══════════════ «Связь»: подключения, по две плитки в ряд ══════════════ */
.svcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.svc { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 10px 12px 12px; border-radius: 18px; border: 1px solid var(--line); background: rgba(237, 234, 226, 0.03); color: var(--sand); text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease, border-color 0.2s ease; }
.svc:active { transform: scale(0.97); }
.svc.on { border-color: rgba(94, 211, 154, 0.38); }
html.gem .svc { background: rgba(14, 14, 16, 0.58); }
html.light .svc { background: #fff; color: #1a1a1a; }
.svc-logo { flex: 0 0 34px; width: 34px; height: 34px; display: block; }
.svc-logo svg { width: 100%; height: 100%; display: block; border-radius: 10px; }
.svc-logo.big { flex-basis: 46px; width: 46px; height: 46px; }
.svc-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.svc-txt b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-txt small { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc.on .svc-txt small { color: #5ed39a; }
.svc-st { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 107, 107, 0.16); color: #ff6b6b; }
.svc.on .svc-st { background: rgba(94, 211, 154, 0.18); color: #5ed39a; }
.svc-st svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* шторка подключения */
.sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(11, 11, 12, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fadein 0.25s ease both; transition: opacity 0.25s ease; }
.sheet.bye { opacity: 0; }
.sheetbox { width: min(520px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0; background: var(--ink-2, #141416); border: 1px solid var(--line); border-bottom: 0; animation: sheetUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.light .sheetbox { background: #fff; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.shead { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.shead b { display: block; font-size: 18px; font-weight: 700; }
.shead small { color: var(--faint); font-size: 12.5px; }
.sheetbox .fld { width: 100%; height: 52px; padding: 0 14px; border-radius: 14px; font-size: 16px; box-sizing: border-box; flex: 0 0 auto; }
.sheetbox > * { flex-shrink: 0; }
.shint { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--faint); }
.sheetbox .svcoff { color: #ff8a8a; border-color: rgba(255, 107, 107, 0.35); }

/* значки каналов на карточке менеджера у Артура */
.svcminis { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.svcm { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; }
.svcm svg { width: 28px; height: 28px; display: block; border-radius: 8px; }

/* ══════════════ «Заявка отправлена»: 3D-самолётик парит на месте ══════════════ */
.p3d { position: relative; width: 220px; height: 190px; align-self: center; perspective: 600px; margin-bottom: 4px; }
.p3d-glow { position: absolute; left: 50%; top: 46%; width: 170px; height: 150px; margin: -75px 0 0 -85px; border-radius: 50%; background: conic-gradient(from 0deg, #4285f4, #9b72cb, #d96570, #f9ab00, #d1e05a, #4285f4); filter: blur(34px); opacity: 0.4; animation: ldSpin 14s linear infinite, p3dBreath 4s ease-in-out infinite; }
@keyframes p3dBreath { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.5; } }
.p3d-orbit { position: absolute; inset: 0; transform-style: preserve-3d; }
.p3d-ring { position: absolute; left: 50%; top: 48%; border-radius: 50%; transform-style: preserve-3d; }
.p3d-ring.r1 { width: 190px; height: 190px; margin: -95px 0 0 -95px; border: 1.5px solid rgba(209, 224, 90, 0.5); border-top-color: transparent; border-left-color: rgba(209, 224, 90, 0.15); animation: ringA 7s linear infinite; }
.p3d-ring.r2 { width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 1.5px dashed rgba(155, 114, 203, 0.55); animation: ringB 11s linear infinite; }
@keyframes ringA { from { transform: rotateX(72deg) rotateZ(0deg); } to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes ringB { from { transform: rotateX(68deg) rotateY(-14deg) rotateZ(360deg); } to { transform: rotateX(68deg) rotateY(-14deg) rotateZ(0deg); } }
.p3d-plane { position: absolute; left: 50%; top: 44%; width: 128px; height: 100px; margin: -50px 0 0 -64px; filter: drop-shadow(0 12px 18px rgba(66, 133, 244, 0.35)); animation: p3dFloat 3.2s ease-in-out infinite; z-index: 2; }
.p3d-plane svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes p3dFloat {
  0%, 100% { transform: translate3d(0, 4px, 0) rotate(-2deg) rotateY(-8deg); }
  50% { transform: translate3d(4px, -9px, 0) rotate(3deg) rotateY(8deg); }
}
.p3d-shadow { position: absolute; left: 50%; bottom: 10px; width: 92px; height: 12px; margin-left: -46px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), transparent); animation: p3dShadow 3.2s ease-in-out infinite; }
@keyframes p3dShadow { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(0.72); opacity: 0.35; } }
.p3d-line { position: absolute; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(237, 234, 226, 0), rgba(237, 234, 226, 0.7)); z-index: 1; animation: p3dLine 1.4s linear infinite; }
.p3d-line.l1 { top: 44%; left: 18px; width: 54px; }
.p3d-line.l2 { top: 56%; left: 28px; width: 40px; animation-delay: 0.45s; }
.p3d-line.l3 { top: 36%; left: 34px; width: 30px; animation-delay: 0.9s; }
@keyframes p3dLine { 0% { transform: translateX(26px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(-34px); opacity: 0; } }
.p3d-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(209, 224, 90, 0.7); animation: p3dTwinkle 2.4s ease-in-out infinite; }
.p3d-dot.d1 { left: 30px; top: 30px; }
.p3d-dot.d2 { right: 26px; top: 46px; animation-delay: 0.6s; background: #d1e05a; }
.p3d-dot.d3 { right: 46px; bottom: 34px; animation-delay: 1.2s; }
.p3d-dot.d4 { left: 52px; bottom: 44px; animation-delay: 1.8s; background: #9bb8ff; }
@keyframes p3dTwinkle { 0%, 100% { transform: scale(0.4); opacity: 0.2; } 50% { transform: scale(1); opacity: 1; } }
html.light .p3d-line { background: linear-gradient(90deg, rgba(20, 20, 24, 0), rgba(20, 20, 24, 0.35)); }
@media (prefers-reduced-motion: reduce) { .p3d-plane, .p3d-ring, .p3d-line, .p3d-dot, .p3d-glow, .p3d-shadow { animation: none; } }
.sheetbox .ghost { height: 50px; min-height: 50px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--sand); font-weight: 600; }
.sheetbox .ghost.mini { height: 42px; min-height: 42px; border-color: transparent; color: var(--faint); font-weight: 500; }
.sheetbox .ghost.mini.svcoff { border-color: rgba(255, 107, 107, 0.35); color: #ff8a8a; }
html.light .sheetbox .ghost { color: #1a1a1a; }

/* Смена фильтра: проявляется только список */
.flist.fl-in { animation: swapIn 0.22s ease-out both; }
.flist.fl-in .lbody { animation: none; }
.flist { display: flex; flex-direction: column; gap: inherit; }

/* ============ календарь на Главной ============ */
.cal { margin-top: 12px; border: 1px solid var(--line); border-radius: 22px; background: rgba(237, 234, 226, 0.03); padding: 12px 10px 10px; overflow: hidden; touch-action: pan-y; }
html.gem .cal { background-color: rgba(14, 14, 16, 0.58); }
html.light .cal { background: #fff; border-color: rgba(0, 0, 0, 0.08); }
.chead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 8px; }
.cnav { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--sand); display: grid; place-items: center; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease; }
.cnav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cnav:active { transform: scale(0.9); }
.ctitle { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.ctitle b { font-size: 16px; font-weight: 600; color: var(--sand); }
.ctitle small { font-size: 12px; color: var(--mist); }
.ctitle u { text-decoration: none; color: var(--lime); cursor: pointer; }
.cweek, .cgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cweek span { text-align: center; font-size: 11px; color: var(--mist); padding: 2px 0 6px; letter-spacing: 0.04em; }
.cweek .we { color: var(--faint); }
.cday { position: relative; height: 44px; border: 0; background: none; border-radius: 12px; color: var(--sand); font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s ease, transform 0.15s ease; }
.cday b { font-size: 14px; font-weight: 500; line-height: 1; }
.cday.mute { pointer-events: none; }
.cday.past b { color: var(--faint); }
.cday.has { background: rgba(209, 224, 90, 0.07); }
.cday.today b { color: var(--lime); font-weight: 700; }
.cday.today::before { content: ""; position: absolute; inset: 2px; border-radius: 11px; border: 1px solid rgba(209, 224, 90, 0.6); pointer-events: none; }
.cday:active { transform: scale(0.92); background: rgba(237, 234, 226, 0.08); }
.cdots { display: flex; gap: 3px; height: 5px; }
.cdots i, .clegend i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.cdots i.on, .clegend i.on { background: var(--lime); box-shadow: 0 0 7px rgba(209, 224, 90, 0.85); }
.cdots i.ring, .clegend i.ring { box-shadow: inset 0 0 0 1.3px var(--lime); }
.cday.past .cdots i { opacity: 0.45; box-shadow: none; }
.cday.past .cdots i.ring { box-shadow: inset 0 0 0 1.3px var(--lime); }
.clegend { display: flex; justify-content: center; gap: 16px; padding-top: 8px; font-size: 11px; color: var(--mist); }
.clegend span { display: flex; align-items: center; gap: 6px; }
.cgrid.cin-r { animation: calR 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.cgrid.cin-l { animation: calL 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes calR { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes calL { from { transform: translateX(-26px); opacity: 0; } to { transform: none; opacity: 1; } }
html.light .cday.today b, html.light .ctitle u { color: #6f7f0a; }
html.light .cdots i.on, html.light .clegend i.on { background: #b8cc1e; box-shadow: 0 0 6px rgba(160, 180, 20, 0.6); }
html.light .cdots i.ring, html.light .clegend i.ring { box-shadow: inset 0 0 0 1.3px #9fb213; }
html.light .cday.has { background: rgba(160, 180, 20, 0.1); }

/* шторка дня */
.dsheet { max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cdhead { display: flex; flex-direction: column; gap: 3px; padding: 2px 2px 4px; }
.cdhead b { font-size: 24px; font-weight: 600; color: var(--sand); }
.cdhead small { font-size: 13px; color: var(--mist); }
.cevs { display: flex; flex-direction: column; gap: 10px; }
.cev { border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: rgba(237, 234, 226, 0.03); display: flex; flex-direction: column; gap: 8px; animation: swapIn 0.3s ease both; }
.cevh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cevt { font-size: 22px; font-weight: 700; color: var(--lime); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.cevf { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--mist); }
.fico { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; background: rgba(209, 224, 90, 0.12); color: var(--lime); }
.fico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fico.logo { background: none; }
.fico.logo svg { width: 22px; height: 22px; stroke: none; }
.cevn { font-size: 18px; font-weight: 600; color: var(--sand); }
.goal { align-self: flex-start; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid transparent; }
.goal.g-inv { color: #a6e3a1; background: rgba(120, 210, 130, 0.12); border-color: rgba(120, 210, 130, 0.3); }
.goal.g-life { color: #9cc3ff; background: rgba(110, 160, 255, 0.12); border-color: rgba(110, 160, 255, 0.3); }
.goal.g-rent { color: #d3b4ff; background: rgba(170, 130, 255, 0.12); border-color: rgba(170, 130, 255, 0.3); }
.goal.g-flip { color: #ffc58a; background: rgba(255, 170, 90, 0.12); border-color: rgba(255, 170, 90, 0.3); }
html.light .goal.g-inv { color: #2f7a35; } html.light .goal.g-life { color: #2c5fb8; } html.light .goal.g-rent { color: #6b3fbf; } html.light .goal.g-flip { color: #a8590d; }
.cdrows { display: flex; flex-direction: column; }
.cdrow { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.cdrow span { color: var(--mist); flex: 0 0 auto; }
.cdrow b { font-weight: 500; color: var(--sand); text-align: right; }
.cev .acts { display: flex; gap: 8px; }
.sheetbox .cev .ghost.mini { border-color: var(--line-2); color: var(--sand); }
html.light .cdhead b, html.light .cevn, html.light .cdrow b { color: #1a1a1a; }
html.light .cevt { color: #6f7f0a; }
html.light .cev { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.08); }

/* форма подстраховки: юнит быстрыми кнопками */
.uchips { margin-top: -2px; }
.lsum.lgoal { color: var(--sand); }
html.light .cdhead small, html.light .cevf, html.light .cdrow span, html.light .ctitle small, html.light .cweek span, html.light .clegend { color: rgba(0, 0, 0, 0.5); }
html.light .cweek .we, html.light .cday.past b { color: rgba(0, 0, 0, 0.3); }
html.light .cday b, html.light .ctitle b { color: #1a1a1a; }
html.light .cnav { color: #1a1a1a; border-color: rgba(0, 0, 0, 0.12); }
html.light .cdrow, html.light .cev { border-color: rgba(0, 0, 0, 0.08); }
html.light .fico { background: rgba(140, 160, 20, 0.14); color: #6f7f0a; }
.dsheet { scrollbar-width: none; }
.dsheet::-webkit-scrollbar { display: none; }

/* ============ Клиенты: быстрые действия, лента, итоги встреч ============ */
.qacts { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.qa { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(237, 234, 226, 0.04); color: var(--sand); font: inherit; font-size: 14.5px; font-weight: 500; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease, border-color 0.2s ease; }
.qa i { font-style: normal; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(209, 224, 90, 0.13); font-size: 14px; }
.qa:active { transform: scale(0.98); border-color: rgba(209, 224, 90, 0.5); }
html.gem .qa { background-color: rgba(14, 14, 16, 0.58); }
html.light .qa { background: #fff; border-color: rgba(0, 0, 0, 0.08); color: #1a1a1a; }
.lead.tap { cursor: pointer; }
.lnote { margin: 0 14px 12px; padding-top: 10px; border-top: 1px solid var(--line); position: relative; }
.lmore { position: absolute; right: 0; top: 12px; font-size: 11.5px; color: var(--lime); }
.fdi { display: flex; gap: 10px; align-items: flex-start; }
.fdi > i { font-style: normal; font-size: 14px; line-height: 1.4; flex: 0 0 auto; }
.fdi p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--sand); }
.fdi small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--mist); }
.lnote .fdi p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 44px; }
.feed { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(237, 234, 226, 0.03); }
.feed.mini { padding: 10px 12px; gap: 9px; border-radius: 14px; }
.feed.mini .fdi p { font-size: 13px; }
.cfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ntlist { display: flex; flex-direction: column; gap: 6px; max-height: 34vh; overflow-y: auto; scrollbar-width: none; }
.ntlist::-webkit-scrollbar { display: none; }
.ntc { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(237, 234, 226, 0.03); color: var(--sand); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: 0 0 auto; }
.ntc b { font-size: 15px; font-weight: 600; }
.ntc small { font-size: 12px; color: var(--mist); }
.ntc.on { border-color: var(--lime); background: rgba(209, 224, 90, 0.1); box-shadow: inset 0 0 0 1px var(--lime); }
.sheetbox .nta { height: auto; min-height: 84px; padding: 12px 14px; line-height: 1.4; resize: none; font-family: inherit; }
.resq { font-size: 16px; font-weight: 600; color: var(--sand); padding: 2px 2px 0; }
.resb { height: 54px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(237, 234, 226, 0.04); color: var(--sand); font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease; }
.resb:active { transform: scale(0.98); }
.resb.ok { border-color: rgba(120, 210, 130, 0.45); }
.resb.mv { border-color: rgba(209, 224, 90, 0.45); }
.resb.no { border-color: rgba(255, 107, 107, 0.45); }
.resopts .chip { height: auto; min-height: 40px; padding: 9px 14px; white-space: normal; text-align: left; }
.resacts { display: flex; gap: 6px; padding: 0 12px 12px; }
.cev .resacts { padding: 0; }
.resmini { flex: 1; height: 38px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(237, 234, 226, 0.04); color: var(--sand); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; padding: 0 6px; -webkit-tap-highlight-color: transparent; }
.resmini.ok { border-color: rgba(120, 210, 130, 0.45); }
.resmini.mv { border-color: rgba(209, 224, 90, 0.45); }
.resmini.no { border-color: rgba(255, 107, 107, 0.45); }
.cdots i.x { box-shadow: inset 0 0 0 1.3px #ff7a7a; }
html.light .fdi p, html.light .ntc b, html.light .resq, html.light .resb, html.light .resmini { color: #1a1a1a; }
html.light .fdi small, html.light .ntc small { color: rgba(0, 0, 0, 0.5); }
html.light .feed, html.light .ntc { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.08); }
html.light .ntc.on { background: rgba(160, 180, 20, 0.12); border-color: #9fb213; box-shadow: inset 0 0 0 1px #9fb213; }
/* 7 каналов: Telegram (подключён сам) — на всю ширину, остальные по два */
.svcgrid .svc[data-svc="tg"] { grid-column: 1 / -1; }

/* ============ барабан даты рождения (как будильник iPhone) ============ */
.bbox { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; }
.wheel { position: relative; display: grid; grid-template-columns: 0.8fr 1.5fr 1.05fr; height: 220px; flex: 0 0 220px; border-radius: 22px; border: 1px solid var(--line); background: rgba(237, 234, 226, 0.03); overflow: hidden; -webkit-user-select: none; user-select: none; }
html.gem .wheel { background-color: rgba(14, 14, 16, 0.58); }
html.light .wheel { background: #fff; border-color: rgba(0, 0, 0, 0.08); }
.wcol { position: relative; height: 220px; perspective: 520px; }
.wscroll { height: 220px; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-y; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.15) 0, #000 38%, #000 62%, rgba(0,0,0,.15) 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,.15) 0, #000 38%, #000 62%, rgba(0,0,0,.15) 100%); }
.wscroll::-webkit-scrollbar { display: none; }
.wpad { height: 88px; }
.wit { height: 44px; line-height: 44px; text-align: center; font-size: 21px; font-weight: 500; color: var(--sand); scroll-snap-align: center; transform-origin: 50% 50% -60px; backface-visibility: hidden; font-variant-numeric: tabular-nums; cursor: pointer; transition: color 0.15s ease; white-space: nowrap; }
.w-m .wit { font-size: 19px; }
.wit.on { color: var(--lime); font-weight: 600; }
html.light .wit { color: #1a1a1a; }
html.light .wit.on { color: #6f7f0a; }
.wband { position: absolute; left: 8px; right: 8px; top: 88px; height: 44px; border-radius: 12px; background: rgba(209, 224, 90, 0.09); border: 1px solid rgba(209, 224, 90, 0.28); pointer-events: none; }
html.light .wband { background: rgba(160, 180, 20, 0.1); border-color: rgba(140, 160, 20, 0.3); }
.bval { height: 22px; text-align: center; font-size: 14px; color: var(--mist); }
.bsheet .wheel { margin: 4px 0 6px; }
.pedit { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--sand); cursor: pointer; text-align: right; }
.pedit.add { color: var(--lime); }
html.light .pedit { color: #1a1a1a; }
html.light .pedit.add { color: #6f7f0a; }

/* кнопка «Моя статистика» — по центру между профилем и меню */
.statbtn { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: 18px auto 4px; padding: 14px 16px; border-radius: 22px; border: 1px solid transparent; color: var(--sand); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(var(--ink-2, #141416), var(--ink-2, #141416)) padding-box, conic-gradient(from var(--sba, 0deg), #d1e05a, #4fe3c1, #6aa8ff, #a78bfa, #f472b6, #fbbf24, #d1e05a) border-box; animation: sbSpin 6s linear infinite; transition: transform 0.15s ease; }
@property --sba { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes sbSpin { to { --sba: 360deg; } }
.statbtn:active { transform: scale(0.98); }
.sbi { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; background: rgba(209, 224, 90, 0.14); color: var(--lime); }
.sbi svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.sbt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sbt b { font-size: 16px; font-weight: 600; }
.sbt small { font-size: 12.5px; color: var(--mist); }
.statbtn > i { font-style: normal; font-size: 26px; color: var(--lime); line-height: 1; }
html.light .statbtn { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--sba, 0deg), #c3d43a, #3cc9a6, #5b93ef, #9474f2, #e45aa1, #f0ac1c, #c3d43a) border-box; color: #1a1a1a; }
.stalert.bday { border-color: rgba(244, 114, 182, 0.4); }
.bdi { font-size: 22px; line-height: 1; }

/* ============ статистика: полноэкранная страница ============ */
.stats { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; background: rgba(11, 11, 12, 0.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: stUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; padding-top: calc(var(--tg-safe-top, 0px) + var(--tg-content-top, 0px)); }
.stats.bye { animation: stDown 0.32s ease both; }
@keyframes stUp { from { transform: translateY(6%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes stDown { to { transform: translateY(6%); opacity: 0; } }
html.light .stats { background: rgba(246, 245, 241, 0.97); }
.sttop { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; }
.stx { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--sand); display: grid; place-items: center; cursor: pointer; padding: 0; }
.stx svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sttl h2 { margin: 2px 0 0; font-size: 24px; font-weight: 600; color: var(--sand); }
.stper { flex: 0 0 auto; padding: 6px 16px 10px; }
.stbody { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; scrollbar-width: none; }
.stbody::-webkit-scrollbar { display: none; }
.sw { position: relative; border: 1px solid var(--line); border-radius: 22px; background: rgba(237, 234, 226, 0.035); padding: 16px; display: flex; flex-direction: column; gap: 8px; animation: swIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.stbody > .sw:nth-child(2), .stbody > .sgrid:nth-child(2) { animation-delay: 0.05s; }
.stbody > :nth-child(3) { animation-delay: 0.1s; } .stbody > :nth-child(4) { animation-delay: 0.15s; } .stbody > :nth-child(5) { animation-delay: 0.2s; } .stbody > :nth-child(n + 6) { animation-delay: 0.25s; }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sgrid .sw { animation: none; }
@keyframes swIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.swl { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); font-weight: 600; }
.sw > b[data-count], .big2 { font-size: 34px; font-weight: 700; color: var(--sand); line-height: 1.05; font-variant-numeric: tabular-nums; }
.big2 { font-size: 28px; }
.sws { font-size: 12.5px; color: var(--mist); }
.hero { align-items: center; padding: 20px 16px 18px; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 220px; height: 220px; left: 50%; top: 4px; margin-left: -110px; border-radius: 50%; background: conic-gradient(from 0deg, #d1e05a, #4fe3c1, #6aa8ff, #a78bfa, #d1e05a); filter: blur(60px); opacity: 0.22; animation: stSpin 14s linear infinite; pointer-events: none; }
.rwrap { position: relative; width: 176px; height: 176px; }
.ring .rbg { fill: none; stroke: rgba(237, 234, 226, 0.08); }
.ring .rfg { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.rmid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rmid b { font-size: 46px; font-weight: 700; color: var(--sand); line-height: 1; font-variant-numeric: tabular-nums; }
.rmid em { font-style: normal; font-size: 20px; font-weight: 600; color: var(--lime); margin-left: 2px; position: relative; top: -14px; }
.rmid > b + em { display: inline; }
.rmid small { margin-top: 6px; font-size: 12px; color: var(--mist); }
.rmid { flex-wrap: nowrap; }
.hsub { position: relative; margin: 6px 0 0; text-align: center; font-size: 13.5px; color: var(--mist); }
.split { display: flex; gap: 14px; }
.split span { display: flex; flex-direction: column; }
.split b { font-size: 26px; font-weight: 700; color: var(--sand); line-height: 1.1; }
.split i { font-style: normal; font-size: 11.5px; color: var(--mist); }
.sbar { display: block; height: 7px; border-radius: 99px; background: rgba(237, 234, 226, 0.08); overflow: hidden; }
.sbar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--lime); transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.sbar.duo { background: rgba(106, 168, 255, 0.55); }
.sbar.duo i { background: linear-gradient(90deg, #d1e05a, #4fe3c1); }
.sbar.ok i { background: linear-gradient(90deg, #4fe3c1, #7ad47f); }
.sbar.mv i { background: linear-gradient(90deg, #d1e05a, #fbbf24); }
.sbar.no i { background: linear-gradient(90deg, #f472b6, #ff7a7a); }
.sbar.hw i { background: linear-gradient(90deg, #6aa8ff, #a78bfa); }
.sbar.rel i { background: linear-gradient(90deg, #d1e05a, #4fe3c1, #6aa8ff); }
.srow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 4px; font-size: 14px; color: var(--sand); }
.srow b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.srow .pct { color: var(--lime); }
.wk { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; height: 132px; align-items: end; padding-top: 6px; }
.wkc { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wkc b { font-size: 11px; color: var(--sand); height: 14px; }
.wkc span { flex: 1; width: 100%; max-width: 26px; display: flex; align-items: flex-end; border-radius: 8px; background: rgba(237, 234, 226, 0.05); overflow: hidden; }
.wkc span i { display: block; width: 100%; height: 0; border-radius: 8px; background: linear-gradient(180deg, #6aa8ff, #4fe3c1); transition: height 1s cubic-bezier(0.22, 1, 0.36, 1); }
.wkc.now span i { background: linear-gradient(180deg, #d1e05a, #4fe3c1); box-shadow: 0 0 12px rgba(209, 224, 90, 0.5); }
.wkc small { font-size: 9.5px; color: var(--faint); }
.bdgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bdg { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 16px; border: 1px dashed var(--line-2); opacity: 0.45; filter: grayscale(1); }
.bdg span { font-size: 24px; line-height: 1; }
.bdg b { font-size: 14px; color: var(--sand); }
.bdg small { font-size: 11.5px; color: var(--mist); line-height: 1.3; }
.bdg.on { opacity: 1; filter: none; border: 1px solid rgba(209, 224, 90, 0.45); background: linear-gradient(135deg, rgba(209, 224, 90, 0.12), rgba(79, 227, 193, 0.06)); }
html.light .sw { background: #fff; border-color: rgba(0, 0, 0, 0.07); }
html.light .sttl h2, html.light .sw > b[data-count], html.light .big2, html.light .rmid b, html.light .split b, html.light .srow, html.light .bdg b, html.light .wkc b { color: #1a1a1a; }
html.light .swl, html.light .sws, html.light .hsub, html.light .rmid small, html.light .split i, html.light .bdg small { color: rgba(0, 0, 0, 0.5); }
html.light .stx { color: #1a1a1a; border-color: rgba(0, 0, 0, 0.12); }
html.light .ring .rbg, html.light .sbar, html.light .wkc span { stroke: rgba(0, 0, 0, 0.07); background: rgba(0, 0, 0, 0.06); }
html.light .rmid em, html.light .srow .pct { color: #6f7f0a; }

@keyframes stSpin { to { transform: rotate(360deg); } }
.rnum { display: flex; align-items: flex-start; }
.rnum em { top: 4px !important; }
.stbody > * { flex-shrink: 0; }