html,body{background:#0d0d18}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* ── PAC Animated Emoji ───────────────────────────── */
@-webkit-keyframes pac-float {
0%,100%{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1);filter:drop-shadow(0 0 0 transparent)}
45%{-webkit-transform:translateY(-4px) scale(1.1);transform:translateY(-4px) scale(1.1);filter:drop-shadow(0 4px 12px rgba(255,255,255,.2))}
}
@keyframes pac-float {
0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 0 transparent)}
45%{transform:translateY(-4px) scale(1.1);filter:drop-shadow(0 4px 12px rgba(255,255,255,.2))}
}
@-webkit-keyframes pac-star {
0%,100%{-webkit-transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 4px #facc15)}
50%{-webkit-transform:scale(1.25) rotate(18deg);transform:scale(1.25) rotate(18deg);filter:drop-shadow(0 0 16px #facc15)}
}
@keyframes pac-star {
0%,100%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 4px #facc15)}
50%{transform:scale(1.25) rotate(18deg);filter:drop-shadow(0 0 16px #facc15)}
}
@-webkit-keyframes pac-hat {
0%,100%{-webkit-transform:translateY(0) rotate(-4deg);transform:translateY(0) rotate(-4deg)}
35%{-webkit-transform:translateY(-8px) rotate(9deg);transform:translateY(-8px) rotate(9deg)}
65%{-webkit-transform:translateY(-3px) rotate(-2deg);transform:translateY(-3px) rotate(-2deg)}
}
@keyframes pac-hat {
0%,100%{transform:translateY(0) rotate(-4deg)}
35%{transform:translateY(-8px) rotate(9deg)}
65%{transform:translateY(-3px) rotate(-2deg)}
}
@-webkit-keyframes pac-chair {
0%,100%{-webkit-transform:rotate(0deg) translateY(0);transform:rotate(0deg) translateY(0)}
30%{-webkit-transform:rotate(-7deg) translateY(-3px);transform:rotate(-7deg) translateY(-3px)}
70%{-webkit-transform:rotate(5deg) translateY(-1px);transform:rotate(5deg) translateY(-1px)}
}
@keyframes pac-chair {
0%,100%{transform:rotate(0deg) translateY(0)}
30%{transform:rotate(-7deg) translateY(-3px)}
70%{transform:rotate(5deg) translateY(-1px)}
}
@-webkit-keyframes pac-mask {
0%,100%{-webkit-transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 4px rgba(139,92,246,.4))}
50%{-webkit-transform:scale(1.18) rotate(-10deg);transform:scale(1.18) rotate(-10deg);filter:drop-shadow(0 0 20px rgba(139,92,246,.9))}
}
@keyframes pac-mask {
0%,100%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 4px rgba(139,92,246,.4))}
50%{transform:scale(1.18) rotate(-10deg);filter:drop-shadow(0 0 20px rgba(139,92,246,.9))}
}
.pac-ae-wrap{width:100%;height:100%;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;overflow:hidden}
.pac-ae-fallback{-webkit-animation:pac-float 2.6s ease-in-out infinite;animation:pac-float 2.6s ease-in-out infinite}
.pac-ae-fallback.s{-webkit-animation:pac-star 2s ease-in-out infinite;animation:pac-star 2s ease-in-out infinite}
.pac-ae-fallback.h{-webkit-animation:pac-hat 2.5s ease-in-out infinite;animation:pac-hat 2.5s ease-in-out infinite}
.pac-ae-fallback.c{-webkit-animation:pac-chair 3s ease-in-out infinite;animation:pac-chair 3s ease-in-out infinite}
.pac-ae-fallback.m{-webkit-animation:pac-mask 2.8s ease-in-out infinite;animation:pac-mask 2.8s ease-in-out infinite}
/* ── end PAC Animated Emoji ──────────────────────── */
:root {
--bg: #0a0a0f;
--card: #1a1a24;
--card2: #22222f;
--border: rgba(255,255,255,.07);
--accent: #8b5cf6;
--accent2: #a78bfa;
--glow: rgba(139,92,246,.25);
--text: #f8f8ff;
--text2: #9090a8;
--text3: #6E7585;
--green: #22c55e;
--gold: #f59e0b;
--r: 18px;
--r2: 12px;
--z-decoration: 2;
--z-fab: 12;
--z-dropdown: 50;
--z-overlay: 200;
--z-modal: 999;
--z-modal-priority: 1100;
--z-toast: 9999;
/* ──── SPACING (8pt grid) ──── */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
/* ──── RADIUS (semantic + legacy --r/--r2) ──── */
--r-xs: 8px;
--r-sm: 10px;
--r-md: 14px;
--r-lg: 18px;
--r-xl: 24px;
--r-pill: 999px;
/* ──── TYPE SCALE (modular 1.20) ──── */
--fs-xs: 12px;
--fs-sm: 13px;
--fs-md: 16px;
--fs-lg: 16px;
--fs-xl: 20px;
--fs-2xl: 24px;
--fs-3xl: 30px;
/* ──── ACCENT TINTS ──── */
--accent-100: rgba(139,92,246,.10);
--accent-200: rgba(139,92,246,.20);
--accent-glow: rgba(139,92,246,.35);
/* ──── SEMANTIC COLORS ──── */
--danger: #ef4444;
--danger-bg: rgba(239,68,68,.12);
--warn: #fb923c;
--warn-bg: rgba(251,146,60,.12);
--info: #60a5fa;
--info-bg: rgba(96,165,250,.12);
/* ──── MOTION ──── */
--dur-fast: 150ms;
--dur-base: 220ms;
--dur-slow: 320ms;
--ease-std: cubic-bezier(.2,.8,.2,1);
--ease-decel: cubic-bezier(0,0,.2,1);
/* ──── SHADOW ──── */
--sh-sm: 0 1px 2px rgba(0,0,0,.32);
--sh-md: 0 8px 16px rgba(0,0,0,.32);
--sh-lg: 0 16px 40px rgba(0,0,0,.45);
}
/* iOS-safe full height */
html {
height: -webkit-fill-available;
height: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
min-height: 100vh;
min-height: -webkit-fill-available;
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
overflow: hidden;
position: fixed;
width: 100%;
top: 0; left: 0; right: 0; bottom: 0;
}
/* SCREENS — position fixed, работает на всех iOS */
.screen {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
flex-direction: column;
background: var(--bg);
overflow: hidden;
}
.screen.active {
display: -webkit-flex; display: flex;
/* overscroll containment — против jitter на конце прокрутки в iOS WebKit */
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* LOADER */
.loader {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--bg);
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: column;
flex-direction: column;
z-index: var(--z-modal);
}
.loader-logo { width: 120px; height: 120px; margin: 0 auto 16px; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; }
.loader-text { font-size: 16px; color: var(--text2); }
@keyframes pac-shimmer { 0% { background-position: -240px 0; } 100% { background-position: calc(240px + 100%) 0; } }
.skel { background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%); background-size: 240px 100%; background-repeat: no-repeat; animation: pac-shimmer 1.5s ease-in-out infinite; border-radius: 8px; }
.skel-line { display:block; height: 12px; margin: 8px 0; }
.skel-line.short { width: 45%; }
.skel-line.medium { width: 72%; }
.skel-line.long { width: 90%; }
/* Universal — все элементы с onclick auto-кликабельные */
[onclick] { cursor: pointer; }
.skel-bubble { align-self: flex-start; max-width: 70%; padding: 14px 16px; border-radius: 18px 18px 18px 4px; height: 16px; margin-bottom: 8px; box-sizing: border-box; }
.skel-bubble.out { align-self: flex-end; border-radius: 18px 18px 4px 18px; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; opacity: 0.6; } }
/* HEADER */
.hdr {
padding: 52px 20px 14px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
gap: 12px;
background: var(--bg);
border-bottom: 1px solid var(--border);
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.hdr-safe { padding-top: env(safe-area-inset-top, 52px); }
.hdr-back { font-size: 28px; color: var(--accent2); cursor: pointer; }
.hdr-ava { width: 38px; height: 38px; border-radius: 12px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 20px; -webkit-flex-shrink: 0; flex-shrink: 0; }
.hdr-info { -webkit-flex: 1; flex: 1; }
.hdr-title { font-size: 16px; font-weight: 700; }
.hdr-sub { font-size: 12px; color: var(--green); }
.chat-header { display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; position:relative; height:56px; padding:0 16px; background:var(--bg); -webkit-flex-shrink:0; flex-shrink:0; }
.chat-back { font-size:30px; color:var(--accent2); cursor:pointer; z-index:var(--z-decoration); min-width:36px; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; opacity:0.85; }
.chat-info { position:absolute; left:0; right:0; text-align:center; pointer-events:none; }
.chat-name { font-size:16px; font-weight:700; }
.chat-sub { font-size:12px; color:var(--text2); margin-top:1px; }
/* ── Режим для слабовидящих ── */
/* Чат */
body.a11y .bubble { font-size: 20px !important; line-height: 1.75 !important; padding: 13px 16px !important; }
body.a11y .bubble.in { border: 2px solid rgba(var(--expert-rgb,100,60,150), 0.45) !important; }
body.a11y .b-time { font-size: 13px !important; }
body.a11y .hdr-ava { width: 50px !important; height: 50px !important; font-size: 25px !important; }
body.a11y .hdr-title { font-size: 20px !important; }
body.a11y .hdr-sub { font-size: 14px !important; }
body.a11y .inp { font-size: 19px !important; padding: 13px 16px !important; }
body.a11y .inp-btn { width: 50px !important; height: 50px !important; font-size: 22px !important; }
body.a11y .input-bar { padding-top: 12px !important; padding-bottom: calc(env(safe-area-inset-bottom,0px) + 12px) !important; }
/* Навигация */
body.a11y .tab-lbl { font-size: 13px !important; font-weight: 600 !important; }
body.a11y .tab-ico { font-size: 26px !important; height: 40px !important; }
/* Карточки экспертов */
body.a11y .exp-name { font-size: 18px !important; }
body.a11y .exp-desc { font-size: 16px !important; }
body.a11y .exp-card { padding: 18px !important; }
/* Профиль / настройки */
body.a11y .s-title { font-size: 16px !important; }
body.a11y .s-sub { font-size: 14px !important; }
body.a11y .s-ico { width: 42px !important; height: 42px !important; font-size: 20px !important; }
body.a11y .sec-label { font-size: 13px !important; }
body.a11y .prof-tile-title { font-size: 13px !important; }
body.a11y .prof-tile-sub { font-size: 12px !important; }
body.a11y .prof-tile { padding: 16px 8px !important; }
body.a11y .prof-tile-ico { font-size: 26px !important; }
/* Кнопки */
body.a11y .sub-buy-btn { font-size: 18px !important; padding: 16px !important; }
body.a11y .home-cta-btn { font-size: 18px !important; padding: 16px !important; }
/* Вкладка Эксперты — hero карточки */
body.a11y .c-hero-bg { height: 180px !important; font-size: 44px !important; }
body.a11y .c-hero-name { font-size: 16px !important; }
body.a11y .c-hero-desc { font-size: 13px !important; }
body.a11y .c-hero-info { bottom: 12px !important; left: 12px !important; }
/* Вкладка Эксперты — мини-сетка */
body.a11y .c-mini-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
body.a11y .c-mini { padding: 14px 10px !important; gap: 8px !important; }
body.a11y .c-mini-ava { width: 48px !important; height: 48px !important; font-size: 26px !important; border-radius: 14px !important; }
body.a11y .c-mini-name { font-size: 14px !important; }
body.a11y .c-mini-dot { width: 8px !important; height: 8px !important; }
/* Вкладка Эксперты — Дворецкий баннер */
body.a11y .c-butler-name { font-size: 16px !important; }
body.a11y .c-butler-sub { font-size: 14px !important; }
body.a11y .c-butler-ico { width: 48px !important; height: 48px !important; font-size: 24px !important; }
/* Вкладка Эксперты — секция-заголовок */
body.a11y .c-sec-lbl { font-size: 14px !important; letter-spacing: .4px !important; }
/* Вкладка Эксперты — специальные сессии */
body.a11y .c-spec-ico { font-size: 28px !important; }
body.a11y .c-spec-name { font-size: 14px !important; }
body.a11y .c-spec-sub { font-size: 12px !important; }
body.a11y .c-spec { padding: 16px 10px !important; gap: 8px !important; }
/* Диалоги */
body.a11y .chat-card-name { font-size: 16px !important; }
body.a11y .chat-card-preview { font-size: 16px !important; }
body.a11y .chat-card-time { font-size: 13px !important; }
body.a11y .chat-card-ava { width: 52px !important; height: 52px !important; font-size: 26px !important; }
/* SCROLL */
.scroll {
-webkit-flex: 1;
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
}
/* TAB BAR */
.tabbar {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items: flex-start;
padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 8px);
background: #0d0d12;
border-top: 1px solid var(--border);
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.tab {
-webkit-flex: 1;
flex: 1;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
gap: 3px;
cursor: pointer;
padding: 4px 0;
}
.tab-ico { width: 44px; height: 36px; border-radius: 12px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 22px; }
.tab.active .tab-ico { background: rgba(139,92,246,.15); }
.tab-lbl { font-size: 12px; font-weight: 500; color: var(--text3); }
.tab.active .tab-lbl { color: var(--accent2); font-weight: 700; }
/* HERO */
.hero { padding: 24px 20px 14px; background: var(--bg); position: relative; }
.hero-grad {
position: absolute;
top: 0; right: 0;
width: 200px; height: 160px;
background: radial-gradient(circle at 80% 30%, rgba(139,92,246,.2) 0%, transparent 70%);
pointer-events: none;
}
.hero-top { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; margin-bottom: 0; }
.hero-greeting { font-size: 14px; color: var(--text2); }
.hero-name { font-size: 26px; font-weight: 800; margin-top: 3px; }
.hero-ava { width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(135deg, var(--accent), #6d28d9); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 22px; overflow: hidden; position: relative; }
/* PLAN CARD */
.plan-card { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.2); border-radius: var(--r); padding: 16px 18px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 14px; }
.plan-icon { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, var(--accent), #7c3aed); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 22px; -webkit-flex-shrink: 0; flex-shrink: 0; }
.plan-name { font-size: 16px; font-weight: 700; }
.plan-desc { font-size: 12px; color: var(--text2); margin-top: 2px; }
.plan-price { margin-left: auto; text-align: right; -webkit-flex-shrink: 0; flex-shrink: 0; }
.plan-price-val { font-size: 16px; font-weight: 800; color: var(--accent2); }
.plan-price-sub { font-size: 12px; color: var(--text2); }
/* STATS */
.stats { display: -webkit-flex; display: flex; gap: 10px; margin-top: 14px; }
.stat { -webkit-flex: 1; flex: 1; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: var(--r2); padding: 12px 8px; text-align: center; }
.stat-v { font-size: 21px; font-weight: 800; }
.stat-l { font-size: 12px; color: var(--text3); margin-top: 2px; }
/* SECTION */
.sec { padding: 10px 20px 0; }
.sec-head { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; margin-bottom: 14px; }
.sec-title { font-size: 18px; font-weight: 700; }
.sec-more { font-size: 13px; color: var(--accent2); font-weight: 500; cursor: pointer; }
/* RECENT */
.recent-item { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.recent-item:last-child { border: none; }
.recent-dot { width: 38px; height: 38px; border-radius: 12px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 19px; -webkit-flex-shrink: 0; flex-shrink: 0; background: rgba(255,255,255,.05); }
.recent-body { -webkit-flex: 1; flex: 1; min-width: 0; }
.recent-title { font-size: 14px; font-weight: 600; }
.recent-prev { font-size: 12px; color: var(--text2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-time { font-size: 12px; color: var(--text3); -webkit-flex-shrink: 0; flex-shrink: 0; }
/* CHAT CARDS */
.chat-card { background: var(--card); border-radius: 18px; padding: 13px 14px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 13px; cursor: pointer; }
.chat-card-ava { position: relative; width: 48px; height: 48px; border-radius: 14px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 24px; -webkit-flex-shrink: 0; flex-shrink: 0; }
.chat-card-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); border: 2px solid var(--card); }
.chat-card-body { -webkit-flex: 1; flex: 1; min-width: 0; }
.chat-card-row1 { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; gap: 8px; }
.chat-card-name { font-size: 14px; font-weight: 700; color: var(--text); }
.chat-card-badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 8px; -webkit-flex-shrink: 0; flex-shrink: 0; }
.chat-card-preview { font-size: 12px; color: var(--text2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-card-row3 { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; margin-top: 4px; }
.chat-card-time { font-size: 12px; color: var(--text3); }
.chat-card-cta { font-size: 12px; font-weight: 600; }
.anna-bio-sub { font-size: 12px; font-weight: 500; color: #a78bfa; margin-top: 1px; }
.chats-wrap { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 8px; padding: 12px 14px; }
.swipe-wrap { position:relative; border-radius:18px; overflow:hidden; }
.swipe-action { position:absolute; right:0; top:0; bottom:0; width:80px; z-index:var(--z-decoration); display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; -webkit-flex-direction:column; flex-direction:column; gap:4px; background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; font-size:12px; font-weight:700; cursor:pointer; border-radius:0 18px 18px 0; -webkit-user-select:none; user-select:none; -webkit-transform:translateX(100%); transform:translateX(100%); transition:transform .25s ease; }
.swipe-action-ico { font-size:18px; }
/* EXPERT CARD */
.exp-list { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 10px; }
.exp-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 16px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 14px; cursor: pointer; position: relative; overflow: hidden; }
.exp-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.exp-ava { width: 48px; height: 48px; border-radius: 16px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 24px; -webkit-flex-shrink: 0; flex-shrink: 0; }
.exp-body { -webkit-flex: 1; flex: 1; min-width: 0; }
.exp-name { font-size: 16px; font-weight: 700; }
.exp-desc { font-size: 12px; color: var(--text2); margin-top: 2px; }
.exp-right { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; gap: 4px; -webkit-flex-shrink: 0; flex-shrink: 0; }
.exp-online { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.exp-cnt { font-size: 12px; color: var(--text3); }
.exp-arr { font-size: 16px; color: var(--text3); }
/* EXPERTS MAGAZINE */
.c-butler-banner { margin: 0 14px 12px; background: linear-gradient(135deg,rgba(124,58,237,.18),rgba(139,92,246,.08)); border: 1px solid rgba(139,92,246,.3); border-radius: 18px; padding: 13px 16px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 12px; cursor: pointer; position: relative; overflow: hidden; }
.c-butler-glow { position: absolute; top: 0; right: 0; width: 120px; height: 70px; background: radial-gradient(circle at 80%,rgba(139,92,246,.2),transparent 70%); pointer-events: none; }
.c-butler-ico { width: 38px; height: 38px; border-radius: 12px; background: rgba(124,58,237,.25); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 18px; -webkit-flex-shrink: 0; flex-shrink: 0; }
.c-butler-text { -webkit-flex: 1; flex: 1; }
.c-butler-name { font-size: 13px; font-weight: 700; color: var(--text); }
.c-butler-sub { font-size: 12px; color: var(--accent2); margin-top: 1px; font-style: italic; }
.c-butler-arr { font-size: 16px; color: rgba(139,92,246,.5); }
.c-sec-lbl { font-size: 12px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .8px; padding: 12px 14px 8px; }
.c-hero-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px; }
.c-hero { border-radius: 18px; overflow: hidden; cursor: pointer; position: relative; border: 1px solid var(--border); }
.c-hero-bg { height: 140px; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: center; justify-content: center; padding-top: 22px; font-size: 32px; position: relative; }
.c-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 35%,rgba(0,0,0,.75) 100%); pointer-events: none; }
.c-hero-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.c-hero-info { position: absolute; bottom: 8px; left: 10px; right: 10px; }
.c-hero-name { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.3; }
.c-hero-desc { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 2px; }
.c-mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 0 14px; }
.c-mini { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 10px 8px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; gap: 4px; cursor: pointer; position: relative; overflow: hidden; text-align: center; }
.c-mini-stripe { position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 14px 14px 0 0; }
.c-mini-ava { width: 36px; height: 36px; border-radius: 12px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 18px; }
.c-mini-name { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.3; }
.c-mini-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--green); }
.c-specs { display: -webkit-flex; display: flex; gap: 8px; padding: 0 14px; }
.c-spec { -webkit-flex: 1; flex: 1; border-radius: 16px; padding: 12px 8px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; gap: 4px; cursor: pointer; text-align: center; }
.c-spec.g { background: linear-gradient(135deg,rgba(13,148,136,.2),rgba(13,148,136,.06)); border: 1px solid rgba(13,148,136,.3); }
.c-spec.c { background: linear-gradient(135deg,rgba(234,179,8,.18),rgba(234,179,8,.05)); border: 1px solid rgba(234,179,8,.3); }
.c-spec-ico { font-size:24px; width:40px; height:40px; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; }
.c-spec-name { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.3; }
.c-spec-sub { font-size: 10px; color: var(--text2); }
.c-vip { font-size: 10px; font-weight: 800; color: #fbbf24; background: rgba(234,179,8,.15); padding: 2px 8px; border-radius: 8px; }
/* CHAT */
.chat-messages { -webkit-flex: 1; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 10px; }
#chat-scroll-fab, #council-scroll-fab { position: absolute; right: 18px; bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); width: 36px; height: 36px; border-radius: 50%; background: var(--card2); border: 1px solid var(--border); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; z-index: var(--z-fab); box-shadow: 0 4px 16px rgba(0,0,0,.5); align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; display: flex; padding: 0; }
#chat-scroll-fab.visible, #council-scroll-fab.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.bw { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.bw.out { -webkit-align-items: flex-end; align-items: flex-end; }
.bw.in { -webkit-align-items: flex-start; align-items: flex-start; }
.bubble { max-width: 80%; padding: 12px 16px; border-radius: 20px; font-size: 14px; line-height: 1.5; word-break: break-word; -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.bubble.out { background: linear-gradient(135deg, #7c3aed, var(--accent)); border-bottom-right-radius: 4px; }
.bubble.in { background: rgba(var(--expert-rgb, 30,20,40), 0.85); border-bottom-left-radius: 4px; border: 1px solid rgba(var(--expert-rgb, 100,60,150), 0.25); }
.b-time { font-size: 12px; color: var(--text3); margin-top: 3px; padding: 0 3px; }
.insight-share-btn { margin-top: 8px; display: flex; gap: 8px; }
.insight-share-btn button { flex: 1; padding: 8px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; }
.insight-share-btn .btn-share { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15) !important; color: #e0d0ff; }
.insight-share-btn .btn-cont { background: transparent; border: 1px solid rgba(255,255,255,0.07) !important; color: var(--text3); }
#insight-modal { display: none; position: fixed; inset: 0; z-index: var(--z-modal-priority); background: rgba(0,0,0,0.85); -webkit-align-items: flex-end; align-items: flex-end; -webkit-justify-content: center; justify-content: center; }
#insight-modal.open { display: -webkit-flex; display: flex; }
#insight-modal-inner { width: 100%; max-width: 420px; border-radius: 24px 24px 0 0; overflow: hidden; padding-bottom: env(safe-area-inset-bottom, 0px); }
.icard-img { padding: 28px 28px 24px; position: relative; overflow: hidden; }
.icard-glow { position: absolute; width: 200px; height: 200px; border-radius: 50%; filter: blur(60px); opacity: 0.22; top: -60px; right: -40px; }
.icard-expert-row { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 10px; margin-bottom: 18px; position: relative; z-index: 1; }
.icard-avatar { width: 36px; height: 36px; border-radius: 50%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; }
.icard-name { font-size: 13px; font-weight: 700; color: #fff; }
.icard-role { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 1px; }
.icard-qmark { font-size: 40px; line-height: 1; margin-bottom: -8px; display: block; position: relative; z-index: 1; opacity: 0.35; }
.icard-quote { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.92); margin: 8px 0 22px; position: relative; z-index: 1; }
.icard-divider { height: 1px; margin-bottom: 16px; position: relative; z-index: 1; opacity: 0.4; }
.icard-footer { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; position: relative; z-index: 1; }
.icard-brand { font-size: 12px; font-weight: 600; opacity: 0.4; color: #fff; }
.icard-tag { font-size: 12px; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.icard-cta { border-top: 1px solid rgba(255,255,255,0.07); }
.icard-cta-btn { width: 100%; padding: 14px; text-align: center; font-size: 13px; font-weight: 600; cursor: pointer; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; gap: 8px; border: none; background: rgba(255,255,255,0.03); }
.icard-close { width: 100%; padding: 12px; text-align: center; font-size: 13px; color: rgba(255,255,255,0.35); cursor: pointer; border: none; background: transparent; }
.voice-btn { display:inline-flex; align-items:center; gap:4px; background:rgba(var(--expert-rgb-full,139,92,246),0.15); border:1.4px solid var(--expert-color-full,#8b5cf6); border-radius:20px; padding:8px 14px; font-size:14px; font-weight:700; color:var(--expert-color-full,#8b5cf6); cursor:pointer; margin-left:4px; margin-top:8px; opacity:1; transition:all .2s; box-shadow:0 1px 4px rgba(var(--expert-rgb-full,139,92,246),0.2); }
.voice-btn:hover { background:rgba(var(--expert-rgb-full,139,92,246),0.25); transform:translateY(-1px); box-shadow:0 3px 8px rgba(var(--expert-rgb-full,139,92,246),0.35); }
.voice-btn:active { opacity:0.8; transform:scale(0.96); }
.voice-btn.first-pulse { animation:voice-attention 1.4s ease-in-out 3; }
@keyframes voice-attention { 0%,100% { box-shadow:0 1px 4px rgba(var(--expert-rgb-full,139,92,246),0.2); transform:scale(1); } 50% { box-shadow:0 4px 16px rgba(var(--expert-rgb-full,139,92,246),0.6); transform:scale(1.05); } }
.voice-hint-banner { background:linear-gradient(135deg,rgba(var(--expert-rgb-full,139,92,246),0.18),rgba(var(--expert-rgb-full,139,92,246),0.08)); border:1px solid rgba(var(--expert-rgb-full,139,92,246),0.35); border-radius:14px; padding:10px 12px; margin:8px 0 12px; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text); }
.voice-hint-banner .vh-close { margin-left:auto; cursor:pointer; padding:4px 8px; opacity:0.5; font-size:16px; line-height:1; }
.voice-hint-banner .vh-close:active { opacity:1; }
.mic-btn { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,rgba(var(--expert-rgb-full,139,92,246),0.32),rgba(var(--expert-rgb-full,139,92,246),0.16)); border:1.6px solid rgba(var(--expert-rgb-full,139,92,246),0.7); cursor:pointer; font-size:19px; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; -webkit-flex-shrink:0; flex-shrink:0; padding:0; transition:all .2s; }
.mic-btn.mic-hint-pulse { -webkit-animation:mic-pulse-soft 2.2s ease-in-out infinite; animation:mic-pulse-soft 2.2s ease-in-out infinite; }
.mic-btn.recording { background:linear-gradient(135deg,rgba(var(--expert-rgb-full,139,92,246),0.55),rgba(var(--expert-rgb-full,139,92,246),0.3)); border-color:rgba(var(--expert-rgb-full,139,92,246),0.95); animation:mic-pulse 0.9s ease-in-out infinite; }
.mic-btn svg { width: 22px; height: 22px; display: block; color: var(--expert-color-full, #8b5cf6); }
body.light .mic-btn svg { color: var(--accent); }
@-webkit-keyframes mic-pulse-soft {
0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(var(--expert-rgb-full,139,92,246),0.55), 0 0 14px rgba(var(--expert-rgb-full,139,92,246),0.35); }
50% { transform:scale(1.12); box-shadow:0 0 0 7px rgba(var(--expert-rgb-full,139,92,246),0.12), 0 0 32px rgba(var(--expert-rgb-full,139,92,246),0.75); }
}
@keyframes mic-pulse-soft {
0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(var(--expert-rgb-full,139,92,246),0.55), 0 0 14px rgba(var(--expert-rgb-full,139,92,246),0.35); }
50% { transform:scale(1.12); box-shadow:0 0 0 7px rgba(var(--expert-rgb-full,139,92,246),0.12), 0 0 32px rgba(var(--expert-rgb-full,139,92,246),0.75); }
}
@keyframes mic-pulse { 0%,100% { transform:scale(1); box-shadow:0 0 14px rgba(var(--expert-rgb-full,139,92,246),0.4); } 50% { transform:scale(1.1); box-shadow:0 0 28px rgba(var(--expert-rgb-full,139,92,246),0.75); } }
.voice-btn.spin { display: inline-block; animation: vspin 0.8s linear infinite; }
@keyframes vspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.rec-timer { font-family: 'SF Mono', ui-monospace, 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--expert-color-full, #8b5cf6); line-height: 1; letter-spacing: -.3px; }
body.light .rec-timer { color: var(--accent); }
#mic-btn-council .rec-timer, .mic-btn[id="mic-btn-council"] .rec-timer { color: #eab308; }
.mic-btn.transcribing { animation: mic-transcribe-pulse 1.2s ease-in-out infinite; }
.mic-btn.transcribing svg { animation: speaker-pulse 1.2s ease-in-out infinite; }
@keyframes mic-transcribe-pulse {
0%, 100% { box-shadow: 0 0 10px rgba(var(--expert-rgb-full,139,92,246),.3); }
50% { box-shadow: 0 0 22px rgba(var(--expert-rgb-full,139,92,246),.7); }
}
@keyframes speaker-pulse {
0%, 100% { opacity: .7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
.voice-btn svg { width: 16px; height: 16px; vertical-align: middle; margin-right: 2px; }
.voice-btn.loading svg, .voice-btn.playing svg { width: 16px; height: 16px; vertical-align: middle; }
.voice-btn.loading svg { animation: speaker-pulse 1.2s ease-in-out infinite; }
.voice-btn.playing svg { animation: speaker-equalizer 0.9s ease-in-out infinite alternate; }
@keyframes speaker-equalizer {
0% { opacity: .65; transform: scale(0.96); }
100% { opacity: 1; transform: scale(1.04); }
}
/* T1: voice-btn в режиме voice-playback превращается в круг 42×42 с SVG play/pause. Без анимаций. */
.voice-btn.is-circle {
width:42px; height:42px; min-width:42px;
padding:0; gap:0;
border-radius:50%;
box-sizing:border-box;
display:-webkit-inline-flex; display:inline-flex;
-webkit-align-items:center; align-items:center;
-webkit-justify-content:center; justify-content:center;
vertical-align:middle;
margin-left:4px; margin-top:0;
box-shadow:none;
-webkit-animation:none; animation:none;
transition:none;
}
.voice-btn.is-circle svg {
width:18px; height:18px;
margin:0; padding:0;
display:block;
-webkit-animation:none; animation:none;
transition:none;
}
.typing { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 4px; padding: 10px 14px; background: var(--card2); border: 1px solid var(--border); border-radius: 20px; border-bottom-left-radius: 4px; }
.typing .typing-label { font-size: 13px; color: var(--text3); margin-right: 4px; font-weight: 500; line-height: 1; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); opacity: .6; -webkit-animation: blink 1.2s ease-in-out infinite; animation: blink 1.2s ease-in-out infinite; }
.dot:nth-child(2) { -webkit-animation-delay: .2s; animation-delay: .2s; }
.dot:nth-child(3) { -webkit-animation-delay: .4s; animation-delay: .4s; }
@-webkit-keyframes blink { 0%,100%{opacity:.3;-webkit-transform:scale(.8);transform:scale(.8)} 50%{opacity:1;-webkit-transform:scale(1);transform:scale(1)} }
@keyframes blink { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }
/* INPUT */
.input-bar { padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 10px); display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; gap: 8px; border-top: 1px solid var(--border); background: var(--bg); -webkit-flex-shrink: 0; flex-shrink: 0; }
.inp { -webkit-flex: 1; flex: 1; min-width: 0; background: var(--card2); border: 1px solid var(--border); border-radius: 999px !important; padding: 12px 18px; font-size: 16px; color: var(--text); outline: none; font-family: inherit; -webkit-appearance: none !important; appearance: none !important; -moz-appearance: none; }
.inp:focus { border-color: rgba(var(--expert-rgb-full,139,92,246),0.5); }
.inp::placeholder { color: var(--text3); }
.inp-btn { width: 42px; height: 42px; border-radius: 50%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 18px; cursor: pointer; -webkit-flex-shrink: 0; flex-shrink: 0; border: none; outline: none; -webkit-appearance: none; }
.inp-btn.mic { background: var(--card2); border: 1px solid var(--border); color: var(--text2); }
.inp-btn.send { background: linear-gradient(135deg, var(--expert-color-full, var(--accent)), color-mix(in srgb, var(--expert-color-full, var(--accent)) 75%, #000)); color: #fff; transition: background .25s ease; }
.inp-btn.send svg { width: 22px; height: 22px; display: block; }
/* T9.3 — TG-style voice UX. Main btn справа = mic (если input пуст) или send (если есть текст). */
.main-action-btn { width:42px; height:42px; min-width:42px; border-radius:50%; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; -webkit-flex-shrink:0; flex-shrink:0; padding:0; border:none; outline:none; -webkit-appearance:none; cursor:pointer; color:#fff; background:linear-gradient(135deg,var(--expert-color-full,var(--accent)),color-mix(in srgb,var(--expert-color-full,var(--accent)) 75%,#000)); transition:width .2s ease, height .2s ease, transform .15s ease, box-shadow .2s ease; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:none; }
.main-action-btn svg { width:20px; height:20px; display:block; pointer-events:none; }
.main-action-btn.holding { width:58px; height:58px; box-shadow:0 0 0 8px rgba(var(--expert-rgb-full,139,92,246),0.18), 0 0 0 18px rgba(var(--expert-rgb-full,139,92,246),0.08); -webkit-animation:pulse-hold 1.4s ease-in-out infinite; animation:pulse-hold 1.4s ease-in-out infinite; }
.main-action-btn.holding svg { width:24px; height:24px; }
@-webkit-keyframes pulse-hold { 0%,100% { box-shadow:0 0 0 8px rgba(var(--expert-rgb-full,139,92,246),0.18), 0 0 0 18px rgba(var(--expert-rgb-full,139,92,246),0.08); } 50% { box-shadow:0 0 0 12px rgba(var(--expert-rgb-full,139,92,246),0.25), 0 0 0 26px rgba(var(--expert-rgb-full,139,92,246),0.12); } }
@keyframes pulse-hold { 0%,100% { box-shadow:0 0 0 8px rgba(var(--expert-rgb-full,139,92,246),0.18), 0 0 0 18px rgba(var(--expert-rgb-full,139,92,246),0.08); } 50% { box-shadow:0 0 0 12px rgba(var(--expert-rgb-full,139,92,246),0.25), 0 0 0 26px rgba(var(--expert-rgb-full,139,92,246),0.12); } }
/* T9.4 #6 — transcribing indicator (3 dots breathing) */
.main-action-btn { position:relative; }
.main-action-btn.transcribing { cursor:wait; -webkit-animation:none; animation:none; }
.main-action-btn.transcribing svg { opacity:0; }
.main-action-btn.transcribing::before,
.main-action-btn.transcribing::after,
.main-action-btn.transcribing > .ts-dot {
content:""; position:absolute; top:50%; left:50%;
width:5px; height:5px; border-radius:50%; background:#fff;
transform:translate(-50%,-50%);
-webkit-animation:ts-breathe 1.2s ease-in-out infinite;
animation:ts-breathe 1.2s ease-in-out infinite;
pointer-events:none;
}
.main-action-btn.transcribing::before { margin-left:-10px; -webkit-animation-delay:-.32s; animation-delay:-.32s; }
.main-action-btn.transcribing::after { margin-left:10px; -webkit-animation-delay:.32s; animation-delay:.32s; }
.main-action-btn.transcribing > .ts-dot { display:block; }
@-webkit-keyframes ts-breathe {
0%,80%,100% { transform:translate(-50%,-50%) scale(.55); opacity:.4; }
40% { transform:translate(-50%,-50%) scale(1.05); opacity:1; }
}
@keyframes ts-breathe {
0%,80%,100% { transform:translate(-50%,-50%) scale(.55); opacity:.4; }
40% { transform:translate(-50%,-50%) scale(1.05); opacity:1; }
}
/* Recording status — заменяет input во время hold */
.rec-status { display:none; -webkit-flex:1; flex:1; min-width:0; -webkit-align-items:center; align-items:center; gap:10px; padding:0 14px; height:44px; }
.rec-status.visible { display:-webkit-flex; display:flex; }
.rec-status .rec-dot { width:10px; height:10px; border-radius:50%; background:#ef4444; -webkit-flex-shrink:0; flex-shrink:0; -webkit-animation:rec-blink 1s ease-in-out infinite; animation:rec-blink 1s ease-in-out infinite; }
.rec-status .rec-time { font-family:'SF Mono',ui-monospace,'JetBrains Mono',monospace; font-size:14px; color:var(--text); font-variant-numeric:tabular-nums; font-weight:600; -webkit-flex-shrink:0; flex-shrink:0; min-width:60px; }
.rec-status .rec-hint { display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:4px; color:var(--text3); font-size:13px; -webkit-flex:1; flex:1; -webkit-justify-content:center; justify-content:center; min-width:0; transition:opacity .2s ease, color .2s ease, transform .15s ease; }
.rec-status .rec-hint .chev { font-size:15px; display:inline-block; -webkit-animation:chev-left 1.5s ease-in-out infinite; animation:chev-left 1.5s ease-in-out infinite; }
.rec-status.cancel-armed .rec-hint { color:#ef4444; transform:translateX(-6px); }
.rec-status.lock-armed .rec-hint { opacity:.35; }
@-webkit-keyframes rec-blink { 0%,100% { opacity:1; } 50% { opacity:.3; } }
@keyframes rec-blink { 0%,100% { opacity:1; } 50% { opacity:.3; } }
@-webkit-keyframes chev-left { 0%,100% { transform:translateX(0); opacity:.7; } 50% { transform:translateX(-4px); opacity:1; } }
@keyframes chev-left { 0%,100% { transform:translateX(0); opacity:.7; } 50% { transform:translateX(-4px); opacity:1; } }
/* Lock affordance — над main-btn во время hold. Свайп вверх → armed → отпустить → locked. */
.lock-aff { position:absolute; right:18px; bottom:74px; width:40px; padding:8px 0; border-radius:24px; background:var(--card2); border:1px solid var(--border); display:none; -webkit-flex-direction:column; flex-direction:column; -webkit-align-items:center; align-items:center; gap:4px; color:var(--text2); z-index:60; transition:background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; pointer-events:none; }
.lock-aff.visible { display:-webkit-flex; display:flex; -webkit-animation:lock-pop .25s cubic-bezier(.34,1.56,.64,1); animation:lock-pop .25s cubic-bezier(.34,1.56,.64,1); }
.lock-aff .lock-ico { width:20px; height:20px; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; }
.lock-aff .lock-ico svg { width:18px; height:18px; }
.lock-aff .lock-chevron { font-size:11px; line-height:1; -webkit-animation:chev-up 1.2s ease-in-out infinite; animation:chev-up 1.2s ease-in-out infinite; color:var(--text3); }
.lock-aff.armed { background:rgba(var(--expert-rgb-full,139,92,246),0.22); border-color:var(--expert-color-full,var(--accent)); color:var(--expert-color-full,var(--accent)); transform:translateY(-4px) scale(1.08); }
.lock-aff.armed .lock-chevron { -webkit-animation:none; animation:none; opacity:1; color:var(--expert-color-full,var(--accent)); }
@-webkit-keyframes lock-pop { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes lock-pop { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@-webkit-keyframes chev-up { 0%,100% { transform:translateY(0); opacity:.5; } 50% { transform:translateY(-3px); opacity:1; } }
@keyframes chev-up { 0%,100% { transform:translateY(0); opacity:.5; } 50% { transform:translateY(-3px); opacity:1; } }
/* Locked bar — палец отпустил, запись продолжается без удержания */
.locked-bar { display:none; -webkit-align-items:center; align-items:center; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0)) 12px; border-top:1px solid var(--border); background:var(--bg); }
.locked-bar.visible { display:-webkit-flex; display:flex; }
.locked-bar .lk-cancel { width:38px; height:38px; min-width:38px; border-radius:50%; background:var(--card2); border:1px solid var(--border); color:#ef4444; cursor:pointer; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; font-size:18px; -webkit-flex-shrink:0; flex-shrink:0; padding:0; outline:none; -webkit-appearance:none; }
.locked-bar .lk-cancel svg { width:16px; height:16px; }
.locked-bar .lk-wave { -webkit-flex:1; flex:1; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:10px; min-width:0; padding:0 6px; }
.locked-bar .lk-wave .rec-dot { width:9px; height:9px; border-radius:50%; background:#ef4444; -webkit-flex-shrink:0; flex-shrink:0; -webkit-animation:rec-blink 1s ease-in-out infinite; animation:rec-blink 1s ease-in-out infinite; }
.locked-bar .lk-wave .rec-time { font-family:'SF Mono',ui-monospace,monospace; font-size:13px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; -webkit-flex-shrink:0; flex-shrink:0; min-width:60px; }
/* T9.4 #1 — live waveform в rec-status во время hold (показывается только когда AnalyserNode запущен) */
.rec-status .rec-wave-canvas { display:none; }
.rec-status.has-live-wave .rec-hint { display:none; }
.rec-status.has-live-wave .rec-wave-canvas {
display:block; -webkit-flex:1; flex:1; min-width:0; height:32px;
}
/* T9.4 #2 — live waveform в locked-bar */
.locked-bar .lk-wave .lk-live-wave {
-webkit-flex:1; flex:1; height:22px; display:block; min-width:0;
}
/* ATTACH MENU */
.plus-btn { width:42px; height:42px; border-radius:50%; background:var(--card2); border:1.4px solid var(--border); cursor:pointer; font-size:22px; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; -webkit-flex-shrink:0; flex-shrink:0; color:var(--text2); transition:transform .2s,background .2s,border-color .2s; -webkit-tap-highlight-color:rgba(0,0,0,0); }
.plus-btn.open { background:rgba(139,92,246,.2); border-color:rgba(139,92,246,.5); color:var(--accent2); transform:rotate(45deg); }
.plus-btn svg { width: 22px; height: 22px; display: block; transition: transform .2s ease; }
.attach-popup { position:absolute; left:14px; bottom:calc(100% + 10px); background:linear-gradient(180deg,rgba(28,20,48,0.96),rgba(18,12,32,0.96)); -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); border:1px solid rgba(167,139,250,0.22); border-radius:22px; padding:6px; width:236px; z-index:var(--z-dropdown); box-shadow:0 18px 56px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset; animation:popIn .22s cubic-bezier(.34,1.56,.64,1); overflow:hidden; }
@keyframes popIn { from{opacity:0;transform:translateY(8px) scale(.95)} to{opacity:1;transform:none} }
.attach-popup-item { display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; cursor:pointer; font-size:14px; color:var(--text); font-weight:500; -webkit-tap-highlight-color:rgba(0,0,0,0); transition:background .18s ease, transform .18s ease; }
.attach-popup-item:hover { background:rgba(167,139,250,0.08); }
.attach-popup-item:active { background:rgba(167,139,250,0.16); transform:scale(.98); }
.attach-popup-ico { width:38px; height:38px; border-radius:12px; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; font-size:19px; -webkit-flex-shrink:0; flex-shrink:0; box-shadow:0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.attach-popup-sub { font-size:11.5px; color:var(--text2); margin-top:2px; line-height:1.3; }
.attach-staged-bar { padding:8px 14px 4px; border-top:1px solid var(--border); background:var(--bg); display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:8px; animation:slideUpAtt .18s ease; }
@keyframes slideUpAtt { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.attach-staged-thumb { width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,#3b2060,#1e1040); display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; font-size:22px; border:1.4px solid rgba(139,92,246,.4); -webkit-flex-shrink:0; flex-shrink:0; position:relative; }
.attach-staged-remove { position:absolute; top:-4px; right:-4px; width:18px; height:18px; background:rgba(30,20,50,.9); border:1px solid var(--border); border-radius:50%; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; font-size:10px; color:var(--text2); cursor:pointer; }
.attach-staged-info { -webkit-flex:1; flex:1; min-width:0; }
.attach-staged-name { font-size:12px; color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.attach-staged-size { font-size:12px; color:var(--text2); margin-top:2px; }
/* PROFILE */
.prof-hero { padding: 14px 18px 14px; background: var(--bg); position: relative; }
.prof-hero-grad { position: absolute; top: 0; left: 0; right: 0; height: 120px; background: radial-gradient(ellipse at 40% 0%, rgba(139,92,246,.16) 0%, transparent 70%); pointer-events: none; }
.prof-hero-row { display: -webkit-flex; display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.prof-hero-info { -webkit-flex: 1; flex: 1; min-width: 0; }
.prof-ava-wrap { position: relative; -webkit-flex-shrink: 0; flex-shrink: 0; }
.prof-ava { width: 60px; height: 60px; border-radius: 19px; background: linear-gradient(135deg, #7c3aed, var(--accent2)); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 26px; overflow:hidden; cursor:pointer; position:relative; }
.prof-ava img { width:100%; height:100%; object-fit:cover; border-radius:19px; }
.prof-ava-cam { position:absolute; bottom:0; right:0; width:21px; height:21px; border-radius:50%; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; font-size:12px; pointer-events:none; }
.prof-badge { position: absolute; bottom: -4px; right: -4px; background: var(--gold); color: #000; font-size: 8px; font-weight: 900; padding: 2px 8px; border-radius: 8px; border: 2px solid var(--bg); }
.prof-name { font-size: 19px; font-weight: 800; color: var(--text); }
.prof-sub { background: linear-gradient(135deg, var(--accent), var(--accent2)); padding: 3px 12px; border-radius: 14px; font-size: 12px; font-weight: 700; color: #fff; display: inline-block; }
.prof-stats { display: -webkit-flex; display: flex; gap: 10px; padding: 0 20px; }
.ps { -webkit-flex: 1; flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: var(--r2); padding: 13px 8px; text-align: center; }
.ps-v { font-size: 22px; font-weight: 800; }
.ps-l { font-size: 12px; color: var(--text3); margin-top: 3px; }
/* SETTINGS */
.s-item { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.s-item:last-child { border: none; }
.s-ico { width: 36px; height: 36px; border-radius: 12px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; -webkit-flex-shrink: 0; flex-shrink: 0; }
.s-body { -webkit-flex: 1; flex: 1; }
.s-title { font-size: 16px; font-weight: 500; }
.s-sub { font-size: 12px; color: var(--text2); margin-top: 1px; }
.s-arr { font-size: 16px; color: var(--text3); opacity: .5; }
.badge-new { font-size: 12px; color: var(--accent2); background: rgba(139,92,246,.15); padding: 3px 8px; border-radius: 8px; font-weight: 700; }
.spacer { height: 20px; }
.sub-toggle{display:-webkit-flex;display:flex;background:var(--card);border-radius:12px;padding:3px;margin:16px 16px 12px}
.sub-tog-btn{-webkit-flex:1;flex:1;text-align:center;padding:8px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;transition:all .2s}
.sub-tog-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.4)}
@keyframes sub-hat{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(-12deg) translateY(-3px)}50%{transform:rotate(7deg) translateY(-1px)}80%{transform:rotate(-4deg) translateY(-2px)}}
.sub-trial-hat{display:inline-block;animation:sub-hat 3s ease-in-out infinite;transform-origin:bottom center}
.sub-state-banner{margin:14px 14px 0;border-radius:16px;padding:14px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:12px}
.sub-state-prog{margin:10px 14px 0}
.sub-state-prog-track{height:4px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.sub-state-prog-fill{height:100%;border-radius:4px;transition:width .4s}
.sub-state-prog-labels{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin-top:4px}
.sub-state-prog-labels span{font-size:12px;color:rgba(255,255,255,.28)}
.sub-days-badge{border-radius:10px;padding:8px 10px;text-align:center;-webkit-flex-shrink:0;flex-shrink:0}
.sub-days-num{font-size:20px;font-weight:800;line-height:1}
.sub-days-lbl{font-size:12px;color:rgba(255,255,255,.38);margin-top:1px}
.sub-curplan-row{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:12px;margin:0 14px;padding:12px;background:rgba(255,255,255,.04);border-radius:14px}
.sub-curplan-ava{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;font-size:20px;position:relative;-webkit-flex-shrink:0;flex-shrink:0}
.sub-curplan-badge{position:absolute;bottom:-4px;right:-4px;font-size:10px;font-weight:700;padding:2px 4px;border-radius:8px;border:1.4px solid #0f0f17;white-space:nowrap}
.sub-cards{padding:0 16px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:12px}
.sub-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px;position:relative;overflow:hidden}
.sub-card.rec{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.06)}
.sub-rec-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12px;font-weight:800;padding:2px 10px;border-radius:0 0 8px 8px;white-space:nowrap}
.sub-card-top{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:12px;margin-bottom:10px}
.sub-card-emo{font-size:26px;-webkit-flex-shrink:0;flex-shrink:0}
.sub-card-name{font-size:16px;font-weight:700}
.sub-card-tag{font-size:12px;color:var(--text2);margin-top:1px}
.sub-card-price{margin-left:auto;text-align:right;-webkit-flex-shrink:0;flex-shrink:0}
.sub-card-stars{font-size:20px;font-weight:800;color:var(--accent2)}
.sub-card-per{font-size:12px;color:var(--text3)}.sub-card-rub{font-size:12px;color:var(--text2);margin-top:1px}
.sub-feats{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:4px;margin-bottom:14px}
.sub-feat{font-size:12px;color:var(--text2);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px}
.sub-feat::before{content:'✓';color:var(--green);font-weight:700;font-size:12px;-webkit-flex-shrink:0;flex-shrink:0}
.sub-buy-btn{width:100%;padding:13px;border-radius:13px;background:linear-gradient(135deg,var(--accent),#7c3aed);color:#fff;font-size:16px;font-weight:700;text-align:center;cursor:pointer;box-shadow:0 4px 14px rgba(124,58,237,.35);border:none;-webkit-tap-highlight-color:transparent}
.sub-buy-btn:active{opacity:.85}
.sub-buy-btn:disabled{opacity:.5;cursor:default}
.sub-card-orig{font-size:12px;color:var(--text3);text-decoration:line-through;margin-top:1px;display:none}
.sub-year-save{font-size:12px;color:var(--green);font-weight:600;padding:8px 12px;background:rgba(16,185,129,.1);border-radius:8px;margin:8px 0 0;text-align:center;display:none}
.pay-sheet-ovl{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:var(--z-overlay);display:none;-webkit-align-items:flex-end;align-items:flex-end;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pay-sheet-ovl.open{display:-webkit-flex;display:flex}
.pay-sheet{width:100%;background:#1e1e2c;border-radius:24px 24px 0 0;padding:0 0 calc(env(safe-area-inset-bottom,0px) + 20px);border-top:1px solid rgba(255,255,255,.1);-webkit-animation:slideUpSheet .28s cubic-bezier(.32,0,.67,0);animation:slideUpSheet .28s cubic-bezier(.32,0,.67,0);will-change:transform}
@keyframes slideUpSheet{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
.pay-sheet-handle{width:48px;height:4px;background:rgba(255,255,255,.25);border-radius:3px;margin:0 auto;padding:18px 0 14px;background-clip:content-box;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
body.pay-sheet-open{overflow:hidden;touch-action:none;overscroll-behavior:contain}
.pay-sheet-ovl.open .pay-sheet{touch-action:none}
.pay-sheet-title{font-size:16px;font-weight:700;text-align:center;padding:0 20px 3px;color:var(--text)}
.pay-sheet-sub{font-size:13px;color:var(--text2);text-align:center;padding:0 20px 16px}
.pay-methods{padding:0 16px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:8px}
.pay-mth{width:100%;padding:13px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:var(--card);color:var(--text);font-size:16px;font-weight:600;text-align:left;cursor:pointer;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:12px;-webkit-tap-highlight-color:transparent}
.pay-mth:active{opacity:.75;-webkit-transform:scale(.98);transform:scale(.98)}
.pay-mth.featured{background:linear-gradient(135deg,rgba(0,180,216,.18),rgba(0,119,182,.1));border-color:rgba(0,180,216,.4)}
.pay-mth-ico{width:40px;height:40px;border-radius:12px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;font-size:20px;-webkit-flex-shrink:0;flex-shrink:0}
.pay-mth-body{-webkit-flex:1;flex:1}
.pay-mth-name{font-size:14px;font-weight:700;color:var(--text)}
.pay-mth-sub{font-size:12px;color:var(--text2);margin-top:1px}
.pay-mth-badge{font-size:12px;font-weight:800;background:linear-gradient(135deg,#00b4d8,#0077b6);color:#fff;padding:2px 8px;border-radius:8px;-webkit-flex-shrink:0;flex-shrink:0}
.pay-divider-or{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;padding:2px 16px;color:var(--text3);font-size:12px}
.pay-divider-or::before,.pay-divider-or::after{content:'';-webkit-flex:1;flex:1;height:1px;background:var(--border)}
.pay-cancel-btn{margin:14px 16px 0;width:calc(100% - 32px);padding:14px;border-radius:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:var(--text);font-size:16px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:rgba(255,255,255,.1)}.pay-cancel-btn:active{background:rgba(255,255,255,.18)}
.toast{position:fixed;bottom:90px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:rgba(30,30,40,.95);color:#fff;padding:12px 20px;border-radius:20px;font-size:14px;font-weight:500;z-index:var(--z-toast);pointer-events:none;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,.5);opacity:0;transition:opacity .25s}
.toast.show{opacity:1}
.sec-label { font-size:12px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.8px; padding:14px 18px 8px; }
.sec-box { margin:0 16px 4px; background:var(--card); border-radius:16px; overflow:hidden; border:1px solid var(--border); }
.sec-box .s-item { padding:12px 14px; }
.prof-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 16px 4px; }
.prof-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 16px 4px; }
.prof-tile { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; text-align:center; position:relative; }
.prof-tile-ico { font-size:20px; width:36px; height:36px; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; }
.prof-tile-title { font-size:12px; font-weight:600; line-height:1.3; }
.prof-tile-sub { font-size:12px; color:var(--text3); }
.sec-box .s-item.vc-sub { background:rgba(124,58,237,.09); border:1px solid rgba(124,58,237,.25); border-radius:13px; margin-bottom:4px; }
.sec-box .s-item.vc-voc { background:rgba(217,119,6,.09); border:1px solid rgba(217,119,6,.25); border-radius:13px; margin-bottom:4px; }
.sec-box .s-item.vc-ref { background:rgba(124,58,237,.09); border:1px solid rgba(124,58,237,.25); border-radius:13px; margin-bottom:4px; }
.sec-box .s-item.vc-gift { background:rgba(5,150,105,.09); border:1px solid rgba(5,150,105,.25); border-radius:13px; }
.sec-box .s-item.vc-hs {
background: linear-gradient(135deg, rgba(236, 72, 153, 0.14) 0%, rgba(139, 92, 246, 0.16) 100%);
border: 1px solid rgba(236, 72, 153, 0.45);
border-radius: 13px;
margin-bottom: 4px;
position: relative;
overflow: visible;
-webkit-animation: pacHsGlow 2.6s ease-in-out 3;
animation: pacHsGlow 2.6s ease-in-out 3;
}
.sec-box .s-item.vc-hs .s-ico {
background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%) !important;
box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.sec-box .s-item.vc-hs .s-ico svg { display: block; }
.sec-box .s-item.vc-hs .s-title { color: #f472b6 !important; font-weight: 600; }
.sec-box .s-item.vc-hs .s-arr { color: #f472b6 !important; opacity: .7; }
.sec-box .s-item.vc-hs .badge-hs {
font-size: 9px; font-weight: 800; letter-spacing: .5px;
color: #fff;
background: linear-gradient(135deg, #ec4899, #8b5cf6);
padding: 3px 7px; border-radius: 6px;
box-shadow: 0 2px 8px rgba(236, 72, 153, 0.45);
margin-right: 6px;
text-transform: uppercase;
}
@-webkit-keyframes pacHsGlow {
0%, 100% { box-shadow: 0 0 0 1px rgba(236,72,153,.30), 0 0 14px rgba(236,72,153,.18); }
50% { box-shadow: 0 0 0 2px rgba(236,72,153,.55), 0 0 28px rgba(236,72,153,.40), 0 0 50px rgba(139,92,246,.20); }
}
@keyframes pacHsGlow {
0%, 100% { box-shadow: 0 0 0 1px rgba(236,72,153,.30), 0 0 14px rgba(236,72,153,.18); }
50% { box-shadow: 0 0 0 2px rgba(236,72,153,.55), 0 0 28px rgba(236,72,153,.40), 0 0 50px rgba(139,92,246,.20); }
}
.prof-stats-a { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 16px 4px; }
.psa-card { border-radius:12px; padding:12px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px; }
.psa-sessions { background:rgba(139,92,246,.1); border:1px solid rgba(139,92,246,.3); }
.psa-streak { background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.25); }
.psa-voice { background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.25); }
.psa-ico { font-size:14px; margin-bottom:1px; }
.psa-v { font-size:16px; font-weight:800; }
.psa-l { font-size:10px; color:var(--text2); }
/* ── FAQ screen ── */
#screen-faq { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.faq-sec-label {
font-size: 12px; font-weight: 700; color: var(--text3);
text-transform: uppercase; letter-spacing: .8px;
padding: 16px 16px 8px;
}
.faq-item {
margin: 0 12px 8px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
cursor: pointer;
transition: border-color .2s;
}
.faq-item.faq-open { border-color: rgba(139,92,246,.4); }
.faq-q {
display: flex; align-items: center; gap: 10px;
padding: 13px 14px;
}
.faq-ico { font-size: 18px; flex-shrink: 0; width: 28px; height:28px; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; text-align: center; }
@keyframes vs-pulse { 0%,100%{transform:scale(1);filter:drop-shadow(0 0 0px rgba(139,92,246,0))} 50%{transform:scale(1.25);filter:drop-shadow(0 0 8px rgba(139,92,246,.7))} }
.faq-ico-vs { display:inline-block; animation: vs-pulse 1.8s ease-in-out infinite; }
.faq-qtext { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text); }
.faq-arr {
font-size: 13px; color: var(--text3); opacity: .6; flex-shrink: 0;
transition: transform .2s;
}
.faq-item.faq-open .faq-arr { transform: rotate(180deg); color: var(--accent2); opacity: 1; }
.faq-ans {
display: none;
padding: 0 14px 14px 52px;
font-size: 13px; color: var(--text2); line-height: 1.65;
}
.faq-item.faq-open .faq-ans { display: block; }
.faq-butler-btn {
margin: 16px 12px 24px;
padding: 14px;
background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(139,92,246,.08));
border: 1px solid rgba(139,92,246,.4);
border-radius: 16px;
display: flex; align-items: center; gap: 13px;
cursor: pointer;
}
.faq-butler-ico {
width: 40px; height: 40px; border-radius: 12px;
background: linear-gradient(135deg,#7c3aed,#a78bfa);
display: flex; align-items: center; justify-content: center;
font-size: 20px; flex-shrink: 0;
}
.faq-butler-body { flex: 1; }
.faq-butler-title { font-size: 14px; font-weight: 700; color: #a78bfa; }
.faq-butler-sub { font-size: 12px; color: var(--text2); margin-top: 2px; }
.faq-butler-arr { font-size: 16px; color: #a78bfa; opacity: .6; }
.prof-tile { position:relative; }
.tile-lock {
display:none; position:absolute; top:6px; right:8px;
color: #fbbf24; opacity:.95;
align-items:center; justify-content:center;
filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
}
.tile-lock svg { display:block; }
body.light .tile-lock { color: #d97706; filter: drop-shadow(0 0 3px rgba(217, 119, 6, 0.5)); }
@keyframes psaPulse {
0%,100% { box-shadow:0 0 0 0 rgba(139,92,246,.0); }
50% { box-shadow:0 0 0 4px rgba(139,92,246,.35); }
}
.psa-pulse { animation: psaPulse 1.4s ease-in-out 10; }
/* streak / voice expand panels */
.stat-expand {
margin: 0 16px 8px;
border-radius: 14px;
padding: 13px 16px;
animation: fadeDown .2s ease;
display: none;
}
.stat-expand.open { display: block; }
@keyframes fadeDown {
from { opacity:0; transform:translateY(-4px); }
to { opacity:1; transform:translateY(0); }
}
.se-streak { background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.2); }
.se-voice { background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.2); }
.se-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.se-row:last-of-type { border-bottom:none; }
.se-label { font-size:12px; color:var(--text2); }
.se-val { font-size:13px; font-weight:700; }
.se-quote { margin-top:8px; font-size:12px; color:var(--text3); font-style:italic; line-height:1.55; }
.se-btn { margin-top:10px; width:100%; padding:10px; border-radius:12px; background:linear-gradient(135deg,#d97706,#fbbf24); border:none; color:#fff; font-size:13px; font-weight:700; cursor:pointer; }
/* ── LIGHT THEME ── */
body.light {
--bg: #f5f3ff;
--card: #ffffff;
--card2: #ede9f8;
--border: rgba(124,58,237,.12);
--accent: #7c3aed;
--accent2: #6d28d9;
--glow: rgba(124,58,237,.25);
--text: #1c1c2e;
--text2: #6b6b88;
--text3: #8B91A0;
--green: #16a34a;
--gold: #d97706;
}
body.light .hdr,
body.light .chat-header { background: #f5f3ff; border-bottom: 1px solid rgba(124,58,237,.1); }
body.light .tabbar { background: #f0eeff; border-top: 1px solid rgba(124,58,237,.12); }
body.light .tab-lbl { color: var(--text3); }
body.light .tab.active .tab-lbl { color: var(--accent); }
body.light .scroll { background: var(--bg); }
body.light .screen { background: var(--bg); }
body.light .bw.in .bubble { background: #e5e0ff; color: var(--text); }
body.light .input-bar { background: #f0eeff; border-color: rgba(124,58,237,.15); }
body.light .inp { background: #ffffff; color: var(--text); border-color: rgba(124,58,237,.2); }
body.light .inp::placeholder { color: var(--text3); }
body.light .inp-btn.send { background: linear-gradient(135deg, var(--expert-color-full, var(--accent)), color-mix(in srgb, var(--expert-color-full, var(--accent)) 80%, #000)); }
body.light .mic-btn { background: rgba(124,58,237,.12); color: var(--accent); }
body.light .prof-hero-grad { background: linear-gradient(180deg, rgba(124,58,237,.15) 0%, transparent 100%); }
body.light .sec-box { background: var(--card); border-color: rgba(124,58,237,.1); }
body.light .chat-messages { background: var(--bg); }
body.light .typing { background: #e5e0ff; }
body.light .typing .dot { background: #a0a0c0; }
body.light .sub-card { background: var(--card); box-shadow: 0 2px 12px rgba(124,58,237,.1); }
body.light .sub-tog-btn { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.15); color: var(--text2); }
body.light .sub-tog-btn.active { background: rgba(124,58,237,.14); border-color: rgba(124,58,237,.45); color: var(--accent2); }
body.light .faq-item { background: var(--card); border-color: rgba(124,58,237,.12); box-shadow: 0 2px 10px rgba(124,58,237,.07); }
body.light .faq-butler-btn { background: linear-gradient(135deg,rgba(124,58,237,.1),rgba(124,58,237,.04)); border-color: rgba(124,58,237,.25); }
body.light .gift-list, body.light .sec-box { background: var(--card); }
body.light .exp-card { box-shadow: 0 2px 14px rgba(0,0,0,.07); }
body.light .c-mini { box-shadow: 0 2px 10px rgba(0,0,0,.07); }
body.light .c-butler-banner { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.3); box-shadow: 0 4px 18px rgba(124,58,237,.15); }
body.light .psa-sessions { background:rgba(124,58,237,.08); border-color:rgba(124,58,237,.25); }
body.light .psa-streak { background:rgba(22,163,74,.08); border-color:rgba(22,163,74,.25); }
body.light .psa-voice { background:rgba(217,119,6,.08); border-color:rgba(217,119,6,.25); }
body.light .se-streak { background:rgba(22,163,74,.07); border-color:rgba(22,163,74,.2); }
body.light .se-voice { background:rgba(217,119,6,.07); border-color:rgba(217,119,6,.2); }
body.light .se-row { border-color: rgba(124,58,237,.08); }
body.light .hdr-back, body.light .chat-back { color: var(--accent2); }
body.light .hdr-title, body.light .chat-name { color: var(--text); }
body.light .prof-tile { background: var(--card); border-color: rgba(124,58,237,.15); box-shadow: 0 2px 10px rgba(124,58,237,.08); }
body.light .stat-expand { background: var(--card2); }
body.light #expert-stats-panel .sec-box { background: var(--card); }
body.light .home-resume-card { box-shadow: 0 4px 18px rgba(124,58,237,.15); }
body.light .c-spec.g { box-shadow: 0 3px 14px rgba(20,184,166,.18); }
body.light .c-spec.c { box-shadow: 0 3px 14px rgba(234,179,8,.18); }
/* HOME — PLAN BADGE */
.home-plan-badge{font-size:12px;font-weight:800;padding:3px 8px;border-radius:8px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;vertical-align:middle;display:inline-block}
.home-plan-badge.free{background:rgba(255,255,255,.1);color:var(--text2)}
/* HOME — BUTLER GREETER */
.butler-greeter{margin:0 16px 4px;background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(139,92,246,.08));border:1px solid rgba(139,92,246,.28);border-radius:18px;padding:13px 14px;display:-webkit-flex;display:flex;align-items:center;gap:10px;cursor:pointer;position:relative;overflow:hidden}
.butler-greeter-glow{position:absolute;top:0;right:0;width:100px;height:60px;background:radial-gradient(circle at 80% 20%,rgba(139,92,246,.2) 0%,transparent 70%);pointer-events:none}
.butler-greeter-ico{width:40px;height:40px;border-radius:13px;background:rgba(124,58,237,.25);display:-webkit-flex;display:flex;align-items:center;justify-content:center;font-size:20px;-webkit-flex-shrink:0;flex-shrink:0}
.butler-greeter-body{-webkit-flex:1;flex:1;min-width:0}
.butler-greeter-name{font-size:14px;font-weight:700;color:var(--text)}
.butler-greeter-says{font-size:12px;color:var(--accent2);margin-top:2px;font-style:italic}
.butler-greeter-cta{font-size:12px;font-weight:700;color:var(--accent2);background:rgba(139,92,246,.18);padding:4px 10px;border-radius:8px;-webkit-flex-shrink:0;flex-shrink:0;white-space:nowrap}
/* HOME — CTA CARD */
.home-cta-card{margin:0 16px 4px;background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(109,40,217,.1));border:1px solid rgba(139,92,246,.35);border-radius:18px;padding:20px 16px;text-align:center;position:relative;overflow:hidden}
.home-cta-glow{position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:140px;height:70px;background:radial-gradient(ellipse,rgba(139,92,246,.35) 0%,transparent 70%);pointer-events:none}
.home-cta-emoji{font-size:30px;margin-bottom:8px}
.home-cta-title{font-size:16px;font-weight:800;color:var(--text);margin-bottom:4px}
.home-cta-sub{font-size:12px;color:var(--accent2);margin-bottom:14px;line-height:1.5}
.home-cta-btn{display:-webkit-flex;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;font-size:16px;font-weight:700;padding:13px;border-radius:13px;box-shadow:0 4px 18px rgba(124,58,237,.45);cursor:pointer;width:100%;border:none;font-family:inherit;-webkit-tap-highlight-color:transparent}
.home-cta-btn:active{opacity:.85}
/* HOME — SPECIALS CHIPS */
.home-specials{display:-webkit-flex;display:flex;gap:8px;margin:10px 16px 4px}
.home-spec-chip{-webkit-flex:1;flex:1;border-radius:16px;padding:13px 8px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;align-items:center;gap:4px;cursor:pointer;text-align:center}
.home-spec-chip.gestalt{background:linear-gradient(135deg,rgba(13,148,136,.2),rgba(13,148,136,.06));border:1px solid rgba(13,148,136,.3)}
.home-spec-chip.council{background:linear-gradient(135deg,rgba(234,179,8,.18),rgba(234,179,8,.05));border:1px solid rgba(234,179,8,.3)}
.home-spec-ico{font-size:22px;width:36px;height:36px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}
.home-spec-name{font-size:12px;font-weight:700;color:var(--text);line-height:1.3}
.home-spec-sub{font-size:12px;color:var(--text2)}
.home-spec-vip{font-size:10px;font-weight:800;color:#fbbf24;background:rgba(234,179,8,.15);padding:2px 8px;border-radius:8px}
.home-spec-chip.council[data-locked="true"] .home-spec-vip{background:rgba(234,179,8,.25);box-shadow:0 0 0 1px rgba(234,179,8,.4)}
/* Match Dialogs ccb-vip-locked style (24.05.2026): yellow text + yellow SVG lock + gold-tint pill */
.home-spec-chip.council[data-locked="true"] .home-spec-vip,
.home-council-promo[data-locked="true"] .home-spec-vip{
display:inline-flex;align-items:center;gap:4px;
}
.home-spec-chip.council[data-locked="true"] .home-spec-vip::before,
.home-council-promo[data-locked="true"] .home-spec-vip::before{
content:"";display:inline-block;width:11px;height:11px;flex-shrink:0;
background:url("data:image/svg+xml;utf8,") no-repeat center / contain;
filter:drop-shadow(0 0 3px rgba(251,191,36,.55));
}
/* HOME — COUNCIL PROMOTED (Phase 2.2.1 — full-width card right after butler-greeter) */
.home-council-promo{margin:10px 16px 0;padding:14px;border-radius:16px;background:linear-gradient(135deg,rgba(234,179,8,.18),rgba(124,58,237,.12));border:1px solid rgba(234,179,8,.35);display:-webkit-flex;display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;cursor:pointer}
.hcp-glow{position:absolute;inset:-40%;background:radial-gradient(circle at 30% 30%,rgba(251,191,36,.22),transparent 60%);pointer-events:none}
.hcp-em{font-size:26px;-webkit-flex-shrink:0;flex-shrink:0;z-index:1}
.hcp-body{-webkit-flex:1;flex:1;z-index:1;min-width:0}
.hcp-ttl{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-0.01em}
.hcp-sub{font-size:11px;color:var(--text2);margin-top:2px;line-height:1.35}
.home-council-promo .home-spec-vip{z-index:1;-webkit-flex-shrink:0;flex-shrink:0}
/* 24.05.2026 — removed duplicate ::before content:"🔒 " rule that caused double lock.
The unified rule outside this file applies SVG lock + gold gradient pill. */
/* ─── COUNCIL ATTENTION ANIMATIONS (19.05.2026) ─── */
@keyframes council-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0), 0 0 0 1px rgba(234,179,8,.35); }
50% { box-shadow: 0 0 22px 2px rgba(251,191,36,.35), 0 0 0 1px rgba(234,179,8,.55); }
}
@keyframes council-star-twinkle {
0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 transparent); }
50% { transform: scale(1.18) rotate(8deg); filter: drop-shadow(0 0 8px rgba(251,191,36,.7)); }
}
@keyframes council-shimmer {
0% { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
15% { opacity: .35; }
85% { opacity: .35; }
100% { transform: translateX(220%) skewX(-20deg); opacity: 0; }
}
.home-council-promo, .c-spec.c, .chats-council-banner {
animation: council-pulse 2.8s ease-in-out infinite;
position: relative;
}
.home-council-promo::after, .c-spec.c::after, .chats-council-banner::after {
content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
animation: council-shimmer 3.4s ease-in-out infinite;
pointer-events: none; border-radius: inherit;
}
.home-council-promo .hcp-em, .c-spec.c .c-spec-ico, .chats-council-banner .ccb-em {
animation: council-star-twinkle 2.6s ease-in-out infinite;
display: inline-block;
}
/* ─── CHATS Council banner (NEW) ─── */
.chats-council-banner {
margin: 12px 16px 8px; padding: 12px 14px; border-radius: 14px;
background: linear-gradient(135deg, rgba(234,179,8,.18), rgba(124,58,237,.10));
border: 1px solid rgba(234,179,8,.35);
display: -webkit-flex; display: flex; align-items: center; gap: 12px;
cursor: pointer; overflow: hidden;
}
.ccb-em { font-size: 22px; -webkit-flex-shrink: 0; flex-shrink: 0; }
.ccb-body { -webkit-flex: 1; flex: 1; min-width: 0; }
.ccb-ttl { font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.ccb-sub { font-size: 11px; color: var(--text2); margin-top: 2px; }
.ccb-arr { font-size: 18px; color: #fbbf24; opacity: .7; -webkit-flex-shrink: 0; flex-shrink: 0; }
.ccb-vip { font-size: 12px; font-weight: 800; color: #fbbf24; background: rgba(234,179,8,.18); padding: 3px 8px; border-radius: 8px; -webkit-flex-shrink: 0; flex-shrink: 0; letter-spacing: .04em; }
.ccb-vip.ccb-vip-locked { background: rgba(234,179,8,.12); }
/* HOME — RESUME CARD */
.home-resume-card{margin:0 16px 4px;background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(109,40,217,.06));border:1px solid rgba(139,92,246,.3);border-radius:18px;padding:14px;cursor:pointer;position:relative;overflow:hidden}
.home-resume-card:active{opacity:.85}
.home-resume-glow{position:absolute;top:0;right:0;width:120px;height:80px;background:radial-gradient(circle at 80% 20%,rgba(139,92,246,.2) 0%,transparent 70%);pointer-events:none}
.home-resume-top{display:-webkit-flex;display:flex;align-items:center;gap:10px;margin-bottom:8px}
.home-resume-ava{width:42px;height:42px;border-radius:13px;display:-webkit-flex;display:flex;align-items:center;justify-content:center;font-size:20px;-webkit-flex-shrink:0;flex-shrink:0}
.home-resume-meta{-webkit-flex:1;flex:1}
.home-resume-label{font-size:12px;font-weight:700;color:var(--accent2);text-transform:uppercase;letter-spacing:.4px}
.home-resume-name{font-size:16px;font-weight:700;color:var(--text);margin-top:1px}
.home-resume-time{font-size:12px;color:var(--text3);-webkit-flex-shrink:0;flex-shrink:0}
.home-resume-preview{font-size:12px;color:var(--text2);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:10px;font-style:italic}
.home-resume-btn{display:-webkit-flex;display:flex;align-items:center;justify-content:center;gap:4px;background:rgba(139,92,246,.2);color:var(--accent2);font-size:13px;font-weight:700;padding:10px;border-radius:12px}
/* ====== ONBOARDING ====== */
#ob-wrap {
position:fixed;inset:0;z-index:9999;
display:none;flex-direction:column;
background:#0a0a14;overflow:hidden;
}
.ob-sub {
position:absolute;inset:0;
display:flex;flex-direction:column;
opacity:0;pointer-events:none;
transform:translateX(30px);
transition:opacity .28s ease,transform .28s ease;
}
.ob-sub.ob-active {
opacity:1;pointer-events:all;transform:translateX(0);
}
.ob-sub.ob-out {
opacity:0;transform:translateX(-30px);pointer-events:none;
}
/* age-gate */
#ob-s0 { padding:16px 14px 14px; gap:10px; }
.ob-adult-card {
flex:1;min-height:0;
background:linear-gradient(145deg,#1a0f3a 0%,#2a1060 45%,#1a0f3a 100%);
border-radius:20px;border:1px solid rgba(167,139,250,.2);
position:relative;overflow:hidden;
display:flex;flex-direction:column;
padding:clamp(14px,2.5vh,22px) 16px clamp(12px,2vh,18px);
box-shadow:0 8px 24px rgba(124,58,237,.2);
}
.ob-adult-card::before {
content:'';position:absolute;top:-40px;right:-30px;
width:160px;height:160px;
background:radial-gradient(circle,rgba(167,139,250,.14) 0%,transparent 65%);
pointer-events:none;
}
.ob-fmt-badge {
display:inline-flex;align-items:center;
background:rgba(167,139,250,.15);
border:1px solid rgba(167,139,250,.28);
border-radius:20px;padding:4px 12px;
font-size:clamp(8px,1.4vh,12px);font-weight:600;color:#c4b5fd;
margin-bottom:clamp(8px,1.5vh,13px);width:fit-content;
}
.ob-headline {
font-size:clamp(22px,3.8vh,30px);font-weight:900;
line-height:1.18;color:#fff;
margin-bottom:clamp(8px,1vh,10px);
}
.ob-headline .ob-acc { color:#a78bfa; }
.ob-subtitle {
font-size:clamp(12px,1.6vh,13px);color:rgba(255,255,255,.45);
line-height:1.45;margin-bottom:clamp(10px,1.8vh,16px);
}
.ob-hero-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:clamp(8px,1.4vh,12px);}.ob-hero-row .ob-headline{margin-bottom:0;}.ob-hero-row .ob-subtitle{flex:1;margin-bottom:0;padding-top:2px;font-size:clamp(10px,1.5vh,12px);}
.ob-cmp { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:clamp(4px,.8vh,8px);flex:1;min-height:0; }
.ob-col {
background:rgba(0,0,0,.28);border-radius:12px;
padding:clamp(4px,.9vh,8px) 8px;display:flex;flex-direction:column;
}
.ob-col-lbl { font-size:clamp(8px,1.2vh,10px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:clamp(3px,.5vh,4px); }
.ob-col-lbl.bef { color:rgba(255,255,255,.28); }
.ob-col-lbl.her { color:#4ade80; }
.ob-row { display:flex;align-items:flex-start;gap:4px;margin-bottom:clamp(2px,.4vh,4px);font-size:clamp(8px,1.3vh,12px);line-height:1.25; }
.ob-row:last-child { margin-bottom:0; }
.ob-row.bef { color:rgba(255,255,255,.32); }
.ob-row.her { color:rgba(255,255,255,.75); }
.ob-ic { font-size:12px;margin-top:1px;flex-shrink:0; }
.ob-row.bef .ob-ic { color:rgba(248,113,113,.65); }
.ob-row.her .ob-ic { color:#4ade80; }
.ob-slide-btn {
width:100%;height:62px;border-radius:18px;
position:relative;overflow:hidden;
cursor:pointer;user-select:none;-webkit-user-select:none;flex-shrink:0;
}
.ob-slide-adult {
background:linear-gradient(270deg,#1a0f3a,#2d1b69,#1a0f3a,#0d1a3a,#1a0f3a);
background-size:400% 400%;animation:ob-aurora-p 4s ease infinite;
border:1.4px solid rgba(167,139,250,.5);
box-shadow:0 0 20px rgba(108,99,255,.2),inset 0 1px 0 rgba(255,255,255,.05);
}
.ob-slide-teen {
background:linear-gradient(270deg,#0a2e1a,#0f4a2a,#163d20,#0a2e1a,#163d20);
background-size:400% 400%;animation:ob-aurora-g 4s ease infinite;
border:1.4px solid rgba(74,222,128,.45);
box-shadow:0 0 20px rgba(34,197,94,.15),inset 0 1px 0 rgba(255,255,255,.04);
}
@keyframes ob-aurora-p{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes ob-aurora-g{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.ob-slide-btn::before {
content:'';position:absolute;top:0;left:-60%;width:50%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
transform:skewX(-15deg);animation:ob-shimmer 3s ease-in-out infinite;
z-index:3;pointer-events:none;
}
.ob-slide-adult::before{animation-delay:0s;}
.ob-slide-teen::before{animation-delay:1.5s;}
@keyframes ob-shimmer{0%{left:-60%}100%{left:160%}}
.ob-slide-fill {
position:absolute;left:0;top:0;bottom:0;width:0%;
border-radius:16px;pointer-events:none;
}
.ob-slide-adult .ob-slide-fill{background:linear-gradient(90deg,rgba(108,99,255,.5),rgba(167,139,250,.35));}
.ob-slide-teen .ob-slide-fill{background:linear-gradient(90deg,rgba(34,197,94,.45),rgba(134,239,172,.3));}
.ob-slide-handle {
position:absolute;left:8px;top:50%;transform:translateY(-50%);
width:50px;height:50px;border-radius:14px;
display:flex;align-items:center;justify-content:center;
font-size:20px;font-weight:700;color:#fff;
pointer-events:none;z-index:2;
}
.ob-slide-adult .ob-slide-handle{background:linear-gradient(135deg,#6c63ff,#a78bfa);box-shadow:0 4px 14px rgba(108,99,255,.55);}
.ob-slide-teen .ob-slide-handle{background:linear-gradient(135deg,#22c55e,#86efac);color:#0a1a0a;box-shadow:0 4px 14px rgba(34,197,94,.4);}
.ob-slide-label {
position:absolute;left:0;right:0;top:0;bottom:0;
display:flex;align-items:center;justify-content:center;
font-size:14px;font-weight:700;pointer-events:none;z-index:1;
transition:opacity .2s;padding-left:62px;padding-right:12px;white-space:nowrap;
}
.ob-slide-adult .ob-slide-label{color:#c4b5fd;}
.ob-slide-teen .ob-slide-label{color:#86efac;}
.ob-slide-arrows{margin-left:4px;opacity:.5;animation:ob-arr 1.6s ease-in-out infinite;letter-spacing:1px;}
@keyframes ob-arr{0%,100%{opacity:.3}50%{opacity:.8}}
.ob-slide-btn.ob-slide-done .ob-slide-label{opacity:0;}
.ob-divider { display:flex;align-items:center;gap:10px;flex-shrink:0; }
.ob-div-line { flex:1;height:1px;background:rgba(255,255,255,.08); }
.ob-div-txt { font-size:12px;color:rgba(255,255,255,.2);font-weight:600;letter-spacing:.06em; }
.ob-teen-card {
flex-shrink:0;
background:linear-gradient(135deg,#0d2d2d 0%,#0a2318 50%,#0d2d2d 100%);
border-radius:20px;border:1.4px solid rgba(52,211,153,.28);overflow:hidden;
box-shadow:0 4px 16px rgba(52,211,153,.09);
}
.ob-teen-inner { padding:clamp(12px,2vh,16px) 16px clamp(10px,1.6vh,14px); }
.ob-teen-lbl {
font-size:clamp(8px,1.3vh,10px);font-weight:700;color:#34d399;
letter-spacing:.1em;text-transform:uppercase;
margin-bottom:clamp(4px,.9vh,8px);display:flex;align-items:center;gap:4px;
}
.ob-gdot { width:4px;height:4px;border-radius:50%;background:#34d399;box-shadow:0 0 4px #34d399;flex-shrink:0; }
.ob-teen-head { font-size:clamp(16px,2.6vh,21px);font-weight:800;color:#fff;margin-bottom:3px; }
.ob-teen-head span { color:#34d399; }
.ob-teen-desc { font-size:clamp(12px,1.5vh,12.4px);color:rgba(255,255,255,.4);line-height:1.4;margin-bottom:clamp(8px,1.5vh,13px); }
.ob-teen-exps { display:flex;align-items:center;gap:10px;margin-bottom:clamp(8px,1.5vh,13px); }
.ob-exp-av { display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0; }
.ob-av-c {
width:clamp(38px,5.5vh,46px);height:clamp(38px,5.5vh,46px);
border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:clamp(16px,2.5vh,21px);border:1.4px solid rgba(52,211,153,.28);
}
.ob-av-c.zst { background:linear-gradient(135deg,#065f46,#0d2d2d); }
.ob-av-c.zsti { background:linear-gradient(135deg,#047857,#0d2d2d); }
.ob-av-nm { font-size:clamp(8px,1.3vh,12px);font-weight:700;color:#34d399; }
.ob-av-rl { font-size:clamp(8.4px,1.2vh,10px);color:rgba(255,255,255,.35);text-align:center;max-width:56px;line-height:1.25; }
.ob-teen-fcts { flex:1;font-size:clamp(10px,1.5vh,12px);color:rgba(255,255,255,.4);line-height:1.7; }
/* ob-btn-teen replaced by ob-slide-btn */
.ob-parental { font-size:clamp(8px,1.3vh,10px);color:rgba(255,255,255,.22);text-align:center;padding:8px 14px clamp(8px,1.4vh,12px);line-height:1.4; }
/* steps 1-3 */
.ob-steps-wrap { padding:0 18px 20px;flex:1;display:flex;flex-direction:column; }
.ob-progress { display:flex;justify-content:center;align-items:center;gap:8px;padding:14px 18px 0;flex-shrink:0;position:relative; }
.ob-back-btn { position:absolute;left:18px;background:none;border:none;color:rgba(255,255,255,.45);font-size:20px;cursor:pointer;line-height:1;padding:0;display:flex;align-items:center; }
.ob-back-btn:hover { color:rgba(255,255,255,.7); }
.ob-pdot { width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);transition:background .3s,width .3s; }
.ob-pdot.cur { background:#a78bfa;width:18px;border-radius:3px; }
.ob-pdot.dn { background:rgba(167,139,250,.45); }
.ob-top { padding:14px 0 18px;flex-shrink:0; }
.ob-logo { font-size:12px;font-weight:700;color:rgba(167,139,250,.6);letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px; }
.ob-slbl { font-size:12px;color:rgba(255,255,255,.35);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px; }
.ob-ttl { font-size:clamp(20px,3.2vh,26px);font-weight:800;line-height:1.2;color:#fff;margin-bottom:8px; }
.ob-sub2 { font-size:13px;color:rgba(255,255,255,.42);line-height:1.5; }
/* name */
.ob-name-wrap { margin-top:24px;flex:1;display:flex;flex-direction:column;gap:12px; }
.ob-name-inp {
background:rgba(255,255,255,.06);border:1.4px solid rgba(255,255,255,.12);
border-radius:14px;padding:16px 18px;font-size:16px;color:#fff;outline:none;
transition:border-color .2s;font-family:inherit;
}
.ob-name-inp::placeholder { color:rgba(255,255,255,.28); }
.ob-name-inp:focus { border-color:rgba(167,139,250,.55);background:rgba(167,139,250,.07); }
.ob-name-hint { font-size:12px;color:rgba(255,255,255,.3);text-align:center; }
/* topics */
.ob-topics { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;flex:1; }
.ob-tc {
background:rgba(255,255,255,.05);border:1.4px solid rgba(255,255,255,.09);
border-radius:16px;padding:16px 14px;cursor:pointer;transition:all .2s;
display:flex;flex-direction:column;gap:8px;
}
.ob-tc:active { transform:scale(.97); }
.ob-tc.sel { background:rgba(124,58,237,.18);border-color:rgba(167,139,250,.5); }
.ob-tc.wide { grid-column:span 2;flex-direction:row;align-items:center;gap:14px; }
.ob-tc-em { font-size:26px;display:block;transition:transform .2s; }
.ob-tc.wide .ob-tc-em { font-size:24px; }
.ob-tc.sel .ob-tc-em { transform:scale(1.1); }
.ob-tc-nm { font-size:13px;font-weight:700;color:#fff; }
.ob-tc-ds { font-size:12px;color:rgba(255,255,255,.38);line-height:1.35; }
/* expert match */
.ob-match-card {
margin-top:20px;flex:1;
background:linear-gradient(145deg,#1a0f3a 0%,#2a1060 50%,#1a0f3a 100%);
border-radius:20px;border:1px solid rgba(167,139,250,.25);
padding:22px 20px 18px;display:flex;flex-direction:column;
align-items:center;text-align:center;position:relative;overflow:hidden;
}
.ob-match-card::before {
content:'';position:absolute;top:-30px;left:50%;transform:translateX(-50%);
width:200px;height:100px;
background:radial-gradient(ellipse,rgba(167,139,250,.18) 0%,transparent 65%);
}
.ob-match-lbl {
font-size:12px;font-weight:700;color:#a78bfa;letter-spacing:.1em;text-transform:uppercase;
margin-bottom:16px;background:rgba(167,139,250,.12);
border:1px solid rgba(167,139,250,.2);border-radius:20px;padding:4px 12px;
}
.ob-exp-big-av {
width:76px;height:76px;border-radius:50%;
background:linear-gradient(135deg,#4c1d95,#7c3aed);
display:flex;align-items:center;justify-content:center;font-size:36px;
border:3px solid rgba(167,139,250,.35);margin-bottom:14px;
box-shadow:0 0 22px rgba(124,58,237,.35);
}
.ob-exp-big-nm { font-size:21px;font-weight:800;color:#fff;margin-bottom:4px; }
.ob-exp-big-rl { font-size:13px;color:#c4b5fd;margin-bottom:12px; }
.ob-exp-big-ds { font-size:13px;color:rgba(255,255,255,.5);line-height:1.55;flex:1; }
/* buttons */
.ob-btn-prim {
background:linear-gradient(135deg,#7c3aed,#9333ea);color:#fff;border:none;
border-radius:14px;padding:14px 20px;font-size:16px;font-weight:700;
width:100%;cursor:pointer;flex-shrink:0;
box-shadow:0 4px 18px rgba(124,58,237,.4);
transition:opacity .2s,transform .15s;margin-top:14px;
}
.ob-btn-prim:disabled { opacity:.32;cursor:not-allowed;box-shadow:none; }
.ob-btn-prim:not(:disabled):active { transform:scale(.98); }
.ob-btn-skip {
background:none;border:none;color:rgba(255,255,255,.3);font-size:13px;
cursor:pointer;padding:10px;width:100%;margin-top:4px;flex-shrink:0;
}
.ob-btn-skip:hover { color:rgba(255,255,255,.5); }
/* teen welcome */
#ob-s-teen { padding:20px 18px 20px; }
.ob-teen-welcome-head { flex-shrink:0;text-align:center;padding:10px 0 18px; }
.ob-teen-welcome-badge {
display:inline-flex;align-items:center;gap:4px;
background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.25);
border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700;color:#34d399;
letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;
}
.ob-tw-title { font-size:clamp(20px,3.2vh,26px);font-weight:900;line-height:1.2;margin-bottom:8px; }
.ob-tw-title span { color:#34d399; }
.ob-tw-sub { font-size:13px;color:rgba(255,255,255,.42);line-height:1.5;padding:0 10px; }
.ob-teen-big-exps { display:flex;gap:12px;flex:1;margin-bottom:14px; }
.ob-texp-card {
flex:1;background:linear-gradient(145deg,#0d2d2d,#0a2318);
border:1.4px solid rgba(52,211,153,.25);border-radius:18px;
padding:16px 12px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
}
.ob-texp-av {
width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:28px;border:2px solid rgba(52,211,153,.3);margin-bottom:3px;
}
.ob-texp-nm { font-size:16px;font-weight:800;color:#34d399; }
.ob-texp-rl { font-size:12px;color:rgba(255,255,255,.45);font-weight:600; }
.ob-texp-tp { font-size:12px;color:rgba(255,255,255,.32);line-height:1.6;margin-top:3px; }
.ob-teen-tags { display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;flex-shrink:0; }
.ob-teen-tag { background:rgba(52,211,153,.09);border:1px solid rgba(52,211,153,.2);border-radius:20px;padding:4px 12px;font-size:11.4px;color:rgba(255,255,255,.55); }
.ob-btn-teen2 {
background:linear-gradient(135deg,#065f46,#047857);color:#fff;border:none;
border-radius:14px;padding:14px 20px;font-size:16px;font-weight:700;
width:100%;cursor:pointer;flex-shrink:0;box-shadow:0 4px 16px rgba(52,211,153,.2);
}
.ob-parental-sm { font-size:12px;color:rgba(255,255,255,.2);text-align:center;margin-top:8px;flex-shrink:0; }
.ob-back-link { background:none;border:none;color:rgba(255,255,255,.3);font-size:13px;cursor:pointer;padding:8px;width:100%;margin-top:2px;flex-shrink:0; }
/* ── Account deletion modal (152-ФЗ ст.14) ─────────────── */
.del-modal-overlay {
position: fixed; inset: 0;
z-index: 99990;
background: rgba(2, 4, 12, .78);
-webkit-backdrop-filter: blur(8px) saturate(140%);
backdrop-filter: blur(8px) saturate(140%);
display: flex; align-items: flex-end; justify-content: center;
opacity: 0;
transition: opacity .22s ease;
padding: 0;
-webkit-overflow-scrolling: touch;
}
.del-modal-overlay.is-open { opacity: 1; }
.del-modal-card {
width: 100%;
max-width: 460px;
margin: 0 auto;
background: linear-gradient(180deg, #1a0d14 0%, #100810 100%);
border-top: 1px solid rgba(248, 113, 113, .35);
border-radius: 24px 24px 0 0;
box-shadow: 0 -16px 60px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .04) inset;
padding: 22px 22px max(22px, env(safe-area-inset-bottom, 22px));
transform: translateY(20px);
transition: transform .26s cubic-bezier(.32, 0, .15, 1);
max-height: 92vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
position: relative;
}
.del-modal-overlay.is-open .del-modal-card { transform: translateY(0); }
@media (min-width: 520px) {
.del-modal-overlay { align-items: center; padding: 24px; }
.del-modal-card { border-radius: 22px; border-top: 1px solid rgba(248, 113, 113, .35); }
}
.del-modal-header {
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px;
}
.del-modal-ico {
width: 44px; height: 44px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(239, 68, 68, .22), rgba(190, 24, 93, .2));
border: 1px solid rgba(239, 68, 68, .42);
display: flex; align-items: center; justify-content: center;
font-size: 22px;
flex-shrink: 0;
box-shadow: 0 6px 18px rgba(239, 68, 68, .22);
}
.del-modal-title {
font-size: 19px;
font-weight: 800;
color: #fef2f2;
letter-spacing: -0.01em;
line-height: 1.25;
}
.del-modal-body { color: var(--text2, rgba(255, 255, 255, .78)); font-size: 14px; line-height: 1.55; }
.del-modal-section-label {
font-size: 12px;
font-weight: 700;
color: rgba(255, 255, 255, .55);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 8px;
}
.del-modal-list {
list-style: none; padding: 0; margin: 0 0 14px;
display: flex; flex-direction: column; gap: 6px;
}
.del-modal-list li {
position: relative;
padding-left: 20px;
color: rgba(255, 255, 255, .82);
font-size: 14px;
line-height: 1.5;
}
.del-modal-list li::before {
content: "";
position: absolute;
left: 4px; top: 9px;
width: 5px; height: 5px;
border-radius: 50%;
background: rgba(248, 113, 113, .85);
box-shadow: 0 0 8px rgba(248, 113, 113, .5);
}
.del-modal-warning {
margin: 6px 0 14px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(234, 88, 12, .08));
border: 1px solid rgba(245, 158, 11, .35);
border-radius: 14px;
font-size: 13.5px;
color: #fde68a;
}
.del-warn-line { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.del-warn-ico { font-size: 16px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.del-warn-sub { color: rgba(253, 230, 138, .78); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.del-warn-cta {
margin-top: 10px;
width: 100%;
padding: 10px 12px;
background: rgba(245, 158, 11, .18);
border: 1px solid rgba(245, 158, 11, .42);
border-radius: 12px;
color: #fde68a;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .15s ease, transform .12s ease;
}
.del-warn-cta:active { transform: scale(.98); background: rgba(245, 158, 11, .28); }
.del-modal-final {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
margin: 4px 0 14px;
background: rgba(239, 68, 68, .08);
border: 1px solid rgba(239, 68, 68, .25);
border-radius: 12px;
color: #fecaca;
font-size: 13.5px;
font-weight: 600;
}
.del-modal-bang { font-size: 15px; line-height: 1; }
.del-modal-input-label {
font-size: 13px;
color: rgba(255, 255, 255, .65);
margin-bottom: 8px;
font-weight: 600;
}
.del-modal-input {
width: 100%;
padding: 13px 14px;
background: rgba(255, 255, 255, .04);
border: 1.5px solid rgba(255, 255, 255, .12);
border-radius: 12px;
color: #fff;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.04em;
text-align: center;
outline: none;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
-webkit-appearance: none;
appearance: none;
font-family: inherit;
}
.del-modal-input::placeholder { color: rgba(255, 255, 255, .25); font-weight: 600; letter-spacing: 0.05em; }
.del-modal-input:focus {
border-color: rgba(239, 68, 68, .55);
background: rgba(239, 68, 68, .06);
box-shadow: 0 0 0 4px rgba(239, 68, 68, .14);
}
.del-modal-status {
margin-top: 10px;
padding: 10px 12px;
background: rgba(239, 68, 68, .12);
border: 1px solid rgba(239, 68, 68, .35);
border-radius: 10px;
color: #fecaca;
font-size: 13px;
line-height: 1.45;
text-align: center;
}
.del-modal-actions {
display: flex; gap: 10px;
margin-top: 18px;
}
.del-btn-secondary {
flex: 0 0 38%;
padding: 14px 12px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 14px;
color: rgba(255, 255, 255, .85);
font-size: 15px;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .15s ease, transform .12s ease;
font-family: inherit;
}
.del-btn-secondary:active { transform: scale(.97); background: rgba(255, 255, 255, .1); }
.del-btn-secondary:disabled { opacity: .5; cursor: not-allowed; }
.del-btn-danger {
flex: 1;
padding: 14px 12px;
background: linear-gradient(135deg, rgba(239, 68, 68, .22), rgba(190, 24, 93, .18));
border: 1.5px solid rgba(239, 68, 68, .35);
border-radius: 14px;
color: #fca5a5;
font-size: 15px;
font-weight: 800;
cursor: not-allowed;
-webkit-tap-highlight-color: transparent;
transition: all .2s ease;
font-family: inherit;
letter-spacing: 0.01em;
opacity: .6;
}
.del-btn-danger.is-armed {
/* WCAG AA: darker stop for ≥4.5:1 white-on-red contrast */
background: linear-gradient(135deg, #b91c1c, #831843);
border-color: #b91c1c;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
cursor: pointer;
opacity: 1;
box-shadow: 0 8px 22px rgba(185, 28, 28, .45), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}
.del-btn-danger.is-armed:active { transform: scale(.98); }
.del-btn-danger:disabled { pointer-events: none; }
/* WCAG 2.4.7: visible focus indicators for keyboard users */
:focus-visible {
outline: 2px solid #f87171;
outline-offset: 2px;
border-radius: inherit;
}
.del-modal-input:focus-visible {
outline: 2px solid #f87171;
outline-offset: 0;
}
/* WCAG 2.3.3: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
.del-modal-overlay,
.del-modal-card,
.del-success-screen,
.del-success-card,
.del-success-ico {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
/* ── Account deletion success screen ─────────────────── */
.del-success-screen {
position: fixed; inset: 0;
z-index: 99999;
background: radial-gradient(ellipse at center, #0e1a14 0%, #060a08 100%);
display: flex; align-items: center; justify-content: center;
padding: 32px 24px;
opacity: 0;
transition: opacity .35s ease;
}
.del-success-screen.is-open { opacity: 1; }
.del-success-card {
text-align: center;
max-width: 360px;
-webkit-animation: del-success-pop .55s cubic-bezier(.16, 1, .3, 1) .08s both;
animation: del-success-pop .55s cubic-bezier(.16, 1, .3, 1) .08s both;
}
.del-success-ico {
width: 88px; height: 88px;
margin: 0 auto 20px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(34, 197, 94, .25), rgba(16, 185, 129, .15));
border: 1.5px solid rgba(34, 197, 94, .5);
display: flex; align-items: center; justify-content: center;
font-size: 44px;
box-shadow: 0 12px 40px rgba(34, 197, 94, .28), 0 0 0 8px rgba(34, 197, 94, .06);
}
.del-success-title {
font-size: 24px;
font-weight: 800;
color: #fff;
letter-spacing: -0.01em;
margin-bottom: 12px;
}
.del-success-sub {
font-size: 15px;
color: rgba(255, 255, 255, .68);
line-height: 1.55;
}
@-webkit-keyframes del-success-pop {
0% { -webkit-transform: scale(.85); transform: scale(.85); opacity: 0; }
100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
@keyframes del-success-pop {
0% { transform: scale(.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
/* WCAG 2.2 SC 2.3.3 — honor user's reduced-motion preference globally (E4) */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
T4 FORWARD TO EXPERT (17.05.2026) — inline forward-chips + handover-card
+ expert-reply-card, рендерятся прямо в чате под bubble эксперта.
Per-expert цвет через CSS-vars --c (hex) и --rgb (R,G,B).
═══════════════════════════════════════════════════════════════════ */
.fwd-block {
align-self: flex-start;
display: flex;
flex-direction: column;
margin: 6px 48px 8px 0;
max-width: calc(100% - 48px);
animation: fwd-in .28s ease;
}
.fwd-lead {
display: flex;
align-items: center;
gap: 6px;
margin: 4px 4px 8px 2px;
font-size: 12px;
color: var(--text2, #9090a8);
line-height: 1.45;
}
.fwd-lead .ico { font-size: 13px; }
.fwd-chips {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
max-width: 320px;
transition: opacity .2s ease;
}
.fwd-chip {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
border-radius: 14px;
cursor: pointer;
position: relative;
overflow: hidden;
font-family: inherit;
text-align: left;
background: linear-gradient(135deg, rgba(var(--rgb, 139,92,246), .16), rgba(var(--rgb, 139,92,246), .06));
border: 1px solid rgba(var(--rgb, 139,92,246), .35);
border-left: 3px solid var(--c, #8b5cf6);
box-shadow: 0 4px 14px -8px rgba(var(--rgb, 139,92,246), .45), inset 0 1px 0 rgba(255,255,255,.04);
color: var(--text, #f8f8ff);
transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
-webkit-tap-highlight-color: transparent;
}
.fwd-chip:hover { transform: translateY(-1px); }
.fwd-chip:active { transform: scale(.98); }
.fwd-chip .ava {
width: 34px;
height: 34px;
border-radius: 11px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
background: radial-gradient(circle at 30% 30%, rgba(var(--rgb, 139,92,246), .55), rgba(var(--rgb, 139,92,246), .18));
border: 1px solid rgba(var(--rgb, 139,92,246), .45);
box-shadow: 0 0 12px rgba(var(--rgb, 139,92,246), .30);
overflow: hidden;
}
.fwd-chip .ava svg { display:block; width:100%; height:100%; }
.fwd-chip .body { flex: 1; min-width: 0; }
.fwd-chip .nm {
font-size: 14px;
font-weight: 700;
color: var(--text, #f8f8ff);
line-height: 1.15;
}
.fwd-chip .sub {
font-size: 11.5px;
color: var(--text2, #9090a8);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fwd-chip .arr {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--c, #8b5cf6);
opacity: .85;
background: rgba(var(--rgb, 139,92,246), .12);
font-size: 14px;
font-weight: 700;
}
/* HANDOVER-card — золотая, как hub-butler */
.fwd-handover {
align-self: flex-start;
margin: 8px 48px 4px 0;
max-width: 88%;
padding: 10px 13px;
background: linear-gradient(135deg, rgba(234,179,8,.16), rgba(124,58,237,.10));
border: 1px solid rgba(234,179,8,.40);
border-radius: 14px;
font-size: 13px;
line-height: 1.45;
color: #e8e8ed;
display: flex;
align-items: flex-start;
gap: 8px;
box-shadow: 0 8px 22px -10px rgba(234,179,8,.20), inset 0 1px 0 rgba(255,255,255,.06);
animation: fwd-in .3s ease;
}
.fwd-handover .ico { font-size: 16px; line-height: 1.2; flex-shrink: 0; }
.fwd-handover b { color: #fbbf24; font-weight: 600; }
.fwd-handover .tx { flex: 1; }
.fwd-handover .dots {
display: inline-flex;
gap: 3px;
margin-left: 6px;
vertical-align: middle;
}
.fwd-handover .dots span {
width: 5px;
height: 5px;
border-radius: 50%;
background: #fbbf24;
animation: fwd-dots-pulse 1.4s ease-in-out infinite;
}
.fwd-handover .dots span:nth-child(2) { animation-delay: .2s; }
.fwd-handover .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes fwd-dots-pulse {
0%, 80%, 100% { opacity: .25; transform: scale(.7); }
40% { opacity: 1; transform: scale(1); }
}
@keyframes fwd-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* EXPERT-REPLY card (ответ нового эксперта inline) */
.fwd-expert-card {
align-self: flex-start;
margin: 6px 48px 10px 0;
max-width: 88%;
padding: 11px 14px;
background: rgba(var(--rgb, 139,92,246), .10);
border: 1px solid rgba(var(--rgb, 139,92,246), .25);
border-left: 3px solid var(--c, #8b5cf6);
border-radius: 4px 18px 18px 4px;
font-size: 14px;
line-height: 1.6;
color: var(--text, #f8f8ff);
box-shadow: 0 6px 18px -10px rgba(var(--rgb, 139,92,246), .30);
animation: fwd-in .35s ease;
}
.fwd-expert-card .hdr {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 12px;
font-weight: 700;
color: var(--c, #8b5cf6);
margin-bottom: 6px;
opacity: .95;
}
.fwd-expert-card .hdr .ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fwd-expert-card .hdr .open-btn {
background: rgba(var(--rgb, 139,92,246), .14);
border: 1px solid rgba(var(--rgb, 139,92,246), .35);
color: var(--c, #8b5cf6);
font-size: 11px;
font-weight: 700;
padding: 4px 9px;
border-radius: 10px;
cursor: pointer;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
flex-shrink: 0;
}
.fwd-expert-card .hdr .open-btn:active { transform: scale(.97); }
.fwd-expert-card .bd {
color: var(--text, #f8f8ff);
font-size: 14px;
line-height: 1.6;
}
.fwd-expert-card .ft {
margin-top: 8px;
display: flex;
align-items: center;
gap: 6px;
}
/* ============================================================
* LIGHT THEME — Stage A overrides (22.05.2026)
* Add-only block. Активны только при body.light.
* Покрывает: .fac-* (Phase E food-card), .jp-* (journal panel),
* .obt-* (onboarding), .intro-* (intro splash).
* Dark theme полностью intact.
* ============================================================ */
/* ── .fac-* — Phase E food analysis card ── */
body.light .fac { background: #ffffff; border-color: rgba(124,58,237,.15); color: var(--text); }
body.light .fac__head { border-bottom-color: rgba(124,58,237,.10); }
body.light .fac__ttl { color: var(--text); }
body.light .fac__hint { color: var(--text3); }
body.light .fac-item { border-bottom-color: rgba(124,58,237,.08); }
body.light .fac-item__name { color: var(--text); }
body.light .fac-item__value { color: var(--text); }
body.light .fac-item__unit { color: var(--text3); }
body.light .fac-item__warn { background: #fef3c7; color: #92400e; }
body.light .fac-step { background: #ede9f8; color: var(--text); }
body.light .fac-step:active { background: #ddd6fe; }
body.light .fac-slider::-webkit-slider-runnable-track { background: linear-gradient(to right, #7c3aed 0 var(--fill,50%), #ede9f8 var(--fill,50%) 100%); }
body.light .fac-slider::-moz-range-track { background: #ede9f8; }
body.light .fac__totals { background: #f5f3ff; }
body.light .fac__totals-kcal { color: var(--text); }
body.light .fac__totals-macro { color: #7c3aed; }
body.light .fac__totals-note { color: var(--text3); }
body.light .fac__details { background: #ede9f8; }
body.light .fac-detail__lbl { color: #7c3aed; }
body.light .fac-detail__val { color: var(--text); }
body.light .fac-detail__bar { background: #ddd6fe; }
body.light .fac-detail__pct { color: var(--text3); }
body.light .fac-btn--save:disabled { background: #c4b5fd; color: #fff; }
body.light .fac-btn--cancel { background: #ede9f8; color: #7c3aed; }
body.light .fac-saved { background: #f0fdf4; color: #16a34a; border-color: #16a34a; }
body.light .fac-error { background: #fee2e2; color: #991b1b; }
body.light .fac-meat-picker { background: rgba(124,58,237,.08); }
body.light .fac-meat-picker__lbl { color: var(--text2); }
body.light .fac-meat-chip { background: #ede9f8; border-color: rgba(124,58,237,.18); color: #7c3aed; }
body.light .fac-meat-chip--on { background: #7c3aed; border-color: #7c3aed; color: #fff; }
/* ── .jp-* — Phase E daily journal panel ── */
body.light .jp { background: var(--bg); }
body.light .jp__head { background: #ffffff; border-bottom-color: rgba(124,58,237,.10); }
body.light .jp__close { color: #7c3aed; }
body.light .jp__ttl { color: var(--text); }
body.light .jp__date-bar { background: #ffffff; border-bottom-color: rgba(124,58,237,.10); }
body.light .jp__arr { color: #7c3aed; }
body.light .jp__arr:disabled { color: var(--text3); }
body.light .jp__date { color: var(--text); }
body.light .jp__date-sub { color: var(--text3); }
body.light .jp__totals { background: #ffffff; border-color: rgba(124,58,237,.15); color: var(--text); }
body.light .jp__totals-kcal { color: var(--text); }
body.light .jp__totals-target { color: var(--text3); }
body.light .jp__progress { background: #ede9f8; }
body.light .jp__macro { background: #f5f3ff; }
body.light .jp__macro-val { color: var(--text); }
body.light .jp__macro-lbl { color: var(--text3); }
body.light .jp__extra { background: #ede9f8; color: #7c3aed; }
body.light .jp__extra.warn { background: #fef3c7; color: #92400e; }
body.light .jp__extra.over { background: #fee2e2; color: #991b1b; }
body.light .jp__section-head { color: var(--text3); }
body.light .jp-meal { background: #ffffff; border-color: rgba(124,58,237,.15); }
body.light .jp-meal:hover { border-color: rgba(124,58,237,.30); }
body.light .jp-meal__name { color: var(--text); }
body.light .jp-meal__time { color: var(--text3); }
body.light .jp-meal__kcal { color: #7c3aed; }
body.light .jp-meal__chev { color: var(--text3); }
body.light .jp-meal.expanded { border-color: #7c3aed; }
body.light .jp-meal__detail { border-top-color: rgba(124,58,237,.15); }
body.light .jp-meal__comp { color: #7c3aed; }
body.light .jp-meal__comp-val { color: var(--text3); }
body.light .jp-meal__totals-row { color: #7c3aed; border-top-color: rgba(124,58,237,.15); }
body.light .jp-meal__act { background: #ede9f8; color: #7c3aed; }
body.light .jp-meal__act--del { background: #fee2e2; color: #991b1b; }
body.light .jp-empty-slot { border-color: rgba(124,58,237,.25); color: var(--text3); }
body.light .jp-empty__ttl { color: var(--text); }
body.light .jp-empty__sub { color: var(--text2); }
body.light .jp-loading { color: var(--text2); }
/* ── .obt-* — Onboarding wizard (text fixes; brand gradients kept) ── */
body.light .obt-back { color: rgba(124,58,237,.65); }
body.light .obt-back:active { color: #7c3aed; background: rgba(124,58,237,.08); }
body.light .obt-ttl { color: var(--text); }
body.light .obt-sub { color: var(--text2); }
body.light .obt-opt { border-color: rgba(124,58,237,.15); }
body.light .obt-opt:active { border-color: rgba(124,58,237,.45); }
body.light .obt-opt-nm { color: var(--text); }
body.light .obt-opt-ds { color: var(--text2); }
body.light .obt-name-input { color: var(--text); }
body.light .obt-name-input::placeholder { color: rgba(28,28,46,.32); }
body.light .obt-name-hint { color: var(--text3); }
body.light .obt-age-row { color: var(--text); }
body.light .obt-age-row b { color: var(--text); }
body.light .obt-age-btn { color: var(--text); border-color: rgba(124,58,237,.20); background: linear-gradient(135deg,rgba(124,58,237,.06),rgba(124,58,237,.02)); }
body.light .obt-priv-row { color: var(--text); }
body.light .obt-priv-row b { color: var(--text); }
body.light .obt-priv-extra { background: rgba(124,58,237,.05); border-color: rgba(124,58,237,.12); color: var(--text2); }
body.light .obt-priv-check { background: rgba(124,58,237,.04); border-color: rgba(124,58,237,.15); }
body.light .obt-priv-check .cb { border-color: rgba(124,58,237,.30); }
body.light .obt-priv-check-tx { color: var(--text); }
body.light .obt-priv-check-tx span { color: var(--text2); }
body.light .obt-consent { background: rgba(124,58,237,.05); border-color: rgba(124,58,237,.12); color: var(--text2); }
body.light .obt-parent-row { color: var(--text); }
body.light .obt-parent-quote { color: var(--text3); }
body.light .obt-parent-btn.secondary { color: var(--text2); background: rgba(124,58,237,.04); border-color: rgba(124,58,237,.15); }
body.light .obt-welcome-sub { color: var(--text2); }
body.light .obt-welcome-chip { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.20); color: #7c3aed; }
/* ── .intro-* — Intro splash (text fixes only; brand CTA kept) ── */
body.light .intro-ttl { color: var(--text); }
body.light .intro-bullet-hk { color: var(--text); }
body.light .intro-bullet-dt { color: var(--text2); }
body.light .intro-brand { color: #7c3aed; }
body.light .intro-mascot-swoosh { border-top-color: rgba(124,58,237,.45); border-right-color: rgba(124,58,237,.15); }
/* ============================================================
* LIGHT THEME — Stage B (22.05.2026) — modal cluster overrides.
* Targets inline-styled modals via #id selectors + !important
* (inline specificity 1000 cannot be beaten otherwise).
* Add-only. Dark theme intact.
* ============================================================ */
/* Modal containers — invert dark gradients to white */
body.light #name-popup,
body.light #gestalt-paywall,
body.light #voice-quota-paywall,
body.light #msg-limit-paywall {
background: #ffffff !important;
border: 1px solid rgba(124,58,237,.15) !important;
box-shadow: 0 24px 64px rgba(124,58,237,.18) !important;
color: var(--text);
}
body.light #ai-info-ovl > div,
body.light #gestalt-disclaimer-ovl > div {
background: #ffffff !important;
border-color: rgba(124,58,237,.20) !important;
box-shadow: 0 24px 64px rgba(124,58,237,.18) !important;
}
/* name-popup input — currently rgba-white bg on white = invisible */
body.light #name-input {
background: rgba(124,58,237,.05) !important;
border-color: rgba(124,58,237,.20) !important;
color: var(--text) !important;
}
/* name-popup cancel button — rgba(255,255,255,.08) bg invisible on white */
body.light #name-popup button[onclick="namePopupClose()"] {
background: rgba(124,58,237,.06) !important;
color: var(--text2) !important;
}
/* gestalt-paywall close button — rgba-white invisible */
body.light #gestalt-paywall button[onclick="gestaltPaywallClose()"] {
background: rgba(124,58,237,.06) !important;
color: var(--text2) !important;
}
/* ai-info: X close button + body text */
body.light #ai-info-ovl button[aria-label="Закрыть"] {
background: rgba(124,58,237,.08) !important;
color: var(--text2) !important;
}
body.light #aiinfo-body { color: var(--text) !important; }
/* gestalt-disclaimer: body text + hotlines + cancel button */
body.light #gestalt-disclaimer-ovl div[data-i18n="gdl_body"] { color: var(--text) !important; }
body.light #gestalt-disclaimer-ovl div[data-i18n="gdl_hotlines"] { color: var(--text2) !important; }
body.light #gestalt-disclaimer-ovl button[onclick*="Cancel"] {
background: rgba(124,58,237,.06) !important;
color: var(--text2) !important;
}
/* ============================================================
* LIGHT THEME — Stage C (22.05.2026) — notif panel + sub state
* Add-only. Dark theme intact.
* NOTE: notif pills меняются через JS inline style на клик.
* Initial state fixed здесь; runtime JS pattern → Stage D.
* ============================================================ */
/* Notifications panel container */
body.light #notif-panel { background: #ffffff !important; }
body.light #notif-panel > div:first-child {
border-bottom: 1px solid rgba(124,58,237,.10) !important;
}
/* Drag handle (top center bar) */
body.light #notif-panel > div:first-child > div:first-child {
background: rgba(124,58,237,.20) !important;
}
/* «Уведомления» header title */
body.light #notif-panel > div:first-child > div:nth-child(2) {
color: var(--text) !important;
}
/* X close button */
body.light #notif-panel > div:first-child > div:last-child {
background: rgba(124,58,237,.08) !important;
color: var(--text2) !important;
}
/* Notification filter pills — initial state (JS overrides on click → Stage D) */
body.light #npill-subscription,
body.light #npill-expert,
body.light #npill-system,
body.light #npill-promo {
border: 1px solid rgba(124,58,237,.20) !important;
color: var(--text2) !important;
}
body.light #npill-all {
/* Active default pill — green tint kept */
border: 1px solid rgba(22,163,74,.45) !important;
background: rgba(22,163,74,.10) !important;
color: #16a34a !important;
}
/* PTR hint + empty state */
body.light #notif-ptr { color: var(--text3) !important; }
body.light #notif-empty > div:nth-child(2) { color: var(--text2) !important; }
body.light #notif-empty > div:last-child { color: var(--text3) !important; }
/* Subscription state UI */
body.light .sub-state-prog-track { background: rgba(124,58,237,.08); }
body.light .sub-state-prog-labels span { color: var(--text3); }
body.light .sub-days-lbl { color: var(--text3); }
body.light .sub-curplan-row { background: rgba(124,58,237,.05); }
body.light .sub-curplan-badge { border-color: #ffffff; }
/* ============================================================
* LIGHT THEME — Stage E (22.05.2026) — final cosmetic polish.
* Forward handover card + from-hub pill + notif bell tile + badge.
* Add-only. Dark theme intact.
* ============================================================ */
/* Forward handover card (yellow tint bg, was #e8e8ed on pale yellow) */
body.light .fwd-handover { color: var(--text); }
body.light .fwd-handover b { color: #b45309; }
/* From-hub pill (yellow on yellow → darker tint for readability) */
body.light #chat-fromhub-pill {
color: #92400e !important;
background: rgba(234,179,8,.20) !important;
border-color: rgba(234,179,8,.50) !important;
}
/* Notif bell tile в header (rgba-white invisible на light header) */
body.light #notif-bell-btn {
background: rgba(124,58,237,.08) !important;
border-color: rgba(124,58,237,.20) !important;
color: #7c3aed !important;
}
/* Notif badge ring — была черная (#0a0a14), в light theme должна сливаться с light header */
body.light #notif-badge { border-color: #f5f3ff !important; }
/* Subscription state banner subtitle — был rgba-white invisible on light-green bg */
body.light #ssb-sub { color: var(--text2) !important; }
/* === Insight Home Feed (Option C — 23.05.2026) ============================
Founder: insight bar в чате блокирует input — переезд в Главную как карточки.
Расположение: после council-promo, перед "Последние". */
.home-insights-sec { margin-top: 8px; }
.home-insights-sec .sec-title {
background: linear-gradient(90deg, #fcd34d, #f59e0b);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
font-weight: 800;
}
.hi-card {
position: relative;
background: linear-gradient(135deg, rgba(251,191,36,0.07), rgba(245,158,11,0.03));
border: 1px solid rgba(251,191,36,0.28);
border-radius: 14px;
padding: 12px 14px;
margin-bottom: 10px;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
transition: transform 0.15s ease, border-color 0.2s ease;
}
.hi-card:active { transform: scale(0.985); }
.hi-card--new::before {
content: 'NEW';
position: absolute; top: -6px; right: 10px;
background: #fbbf24; color: #0a0813;
font-size: 9px; font-weight: 800; letter-spacing: 0.3px;
padding: 2px 7px; border-radius: 8px;
}
.hi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hi-emoji {
width: 24px; height: 24px; border-radius: 50%;
background: rgba(251,191,36,0.14);
display: flex; align-items: center; justify-content: center;
font-size: 13px; flex-shrink: 0;
}
.hi-from { font-size: 11px; color: #fcd34d; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-time { font-size: 10px; color: var(--text3); flex-shrink: 0; }
.hi-quote {
font-size: 13px; line-height: 1.48; color: var(--text);
font-style: italic;
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
overflow: hidden;
}
.hi-actions { display: flex; gap: 6px; margin-top: 10px; }
.hi-act {
flex: 1; padding: 8px; border-radius: 9px;
font-size: 11px; font-weight: 600;
border: 0; cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
touch-action: manipulation;
}
.hi-act-share { background: #8b5cf6; color: #fff; }
.hi-act-share:active { background: #7c3aed; }
.hi-act-open { background: rgba(255,255,255,0.06); color: var(--text2); }
/* Tab badge (home insights counter) */
.tab-badge {
position: absolute; top: -4px; right: -8px;
min-width: 16px; height: 16px; padding: 0 4px;
border-radius: 8px;
font-size: 9px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--bg, #0a0a14);
line-height: 1;
}
.tab-badge--insight {
background: #fbbf24; color: #0a0813;
}
/* Light theme overrides */
body.light .home-insights-sec .sec-title {
background: linear-gradient(90deg, #b45309, #92400e);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
body.light .hi-card {
background: linear-gradient(135deg, rgba(251,191,36,0.14), rgba(245,158,11,0.06));
border: 1px solid rgba(180,83,9,0.32);
}
body.light .hi-card--new::before { background: #d97706; color: #fffbeb; }
body.light .hi-emoji { background: rgba(251,191,36,0.24); }
body.light .hi-from { color: #b45309; }
body.light .hi-time { color: var(--text3); }
body.light .hi-quote { color: var(--text); }
body.light .hi-act-open { background: rgba(0,0,0,0.04); color: var(--text2); }
body.light .tab-badge { border: 2px solid var(--bg); }
body.light .tab-badge--insight { background: #d97706; color: #fffbeb; }
/* Dismiss button (Option A — manual remove, 23.05.2026) */
.hi-card { padding-right: 36px; }
.hi-dismiss {
position: absolute; top: 8px; right: 8px;
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
color: var(--text3);
font-size: 12px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
cursor: pointer; padding: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
touch-action: manipulation;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
z-index: 2;
}
.hi-dismiss:hover, .hi-dismiss:active {
background: rgba(248,113,113,0.16);
border-color: rgba(248,113,113,0.32);
color: #fca5a5;
transform: scale(1.05);
}
.hi-card--leaving {
opacity: 0;
transform: translateX(60%) scale(0.94);
transition: opacity 0.24s ease, transform 0.24s ease, margin 0.24s ease, padding 0.24s ease, max-height 0.24s ease;
max-height: 0;
padding-top: 0; padding-bottom: 0;
margin-bottom: 0;
overflow: hidden;
pointer-events: none;
}
body.light .hi-dismiss {
background: rgba(0,0,0,0.04);
border: 1px solid rgba(0,0,0,0.08);
color: var(--text3);
}
body.light .hi-dismiss:hover, body.light .hi-dismiss:active {
background: rgba(220,38,38,0.10);
border-color: rgba(220,38,38,0.28);
color: #b91c1c;
}
/* === Daily Nutrition Wrap (Phase 1 — 23.05.2026) ============================
Card в journal screen выше списка приёмов. Lucide SVG + functional emoji only. */
.dw-card {
background: #14141f;
border: 1px solid #2a2a3a;
border-radius: 14px;
padding: 14px;
margin-bottom: 14px;
position: relative;
overflow: hidden;
}
.dw-card::before {
content: '';
position: absolute;
top: -50px; right: -50px;
width: 140px; height: 140px;
background: radial-gradient(circle, rgba(167,139,250,0.10), transparent 70%);
pointer-events: none;
}
.dw-card--loading { padding: 18px 14px; }
.dw-loading-spin {
width: 22px; height: 22px;
border: 2px solid rgba(167,139,250,0.18);
border-top-color: #a78bfa;
border-radius: 50%;
animation: dwSpin 0.8s linear infinite;
margin: 0 auto 8px;
}
@keyframes dwSpin { to { transform: rotate(360deg); } }
.dw-loading-txt { text-align: center; font-size: 12px; color: var(--text3); }
.dw-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; position: relative; }
.dw-h-ic { color: #a78bfa; display: flex; align-items: center; }
.dw-h-ttl { font-size: 14px; font-weight: 700; color: var(--text); flex: 1; }
.dw-h-meals { font-size: 10px; color: var(--text3); }
.dw-h-refresh {
width: 26px; height: 26px;
border-radius: 13px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text3);
display: flex; align-items: center; justify-content: center;
cursor: pointer; padding: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
transition: color 0.15s ease, background 0.15s ease;
}
.dw-h-refresh:hover, .dw-h-refresh:active {
color: #a78bfa;
background: rgba(167,139,250,0.12);
}
.dw-cal-row { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.dw-cal-num { font-size: 24px; font-weight: 800; line-height: 1; color: var(--text); white-space: nowrap; }
.dw-cal-target { font-size: 13px; font-weight: 600; color: var(--text3); margin-left: 2px; }
.dw-cal-bar-wrap { flex: 1; min-width: 0; }
.dw-cal-meta { display: flex; justify-content: space-between; font-size: 10px; color: var(--text3); margin-bottom: 5px; }
.dw-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.dw-delta--ok { color: #10b981; }
.dw-delta--under { color: #f59e0b; }
.dw-delta--over { color: #ef4444; }
.dw-cal-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
.dw-cal-bar-fill { display: block; height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.dw-bar--ok { background: linear-gradient(90deg, #10b981, #34d399); }
.dw-bar--under { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.dw-bar--over { background: linear-gradient(90deg, #ef4444, #f87171); }
.dw-macros { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.dw-macro { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.dw-m-lbl { width: 14px; font-weight: 700; color: var(--text2); }
.dw-m-num { width: 86px; color: var(--text3); font-variant-numeric: tabular-nums; }
.dw-m-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.05); overflow: hidden; }
.dw-m-bar-fill { display: block; height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.dw-st { width: 18px; text-align: right; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.dw-st--ok { color: #10b981; }
.dw-st--warn { color: #f59e0b; }
.dw-st--over { color: #ef4444; }
.dw-mini {
display: flex; gap: 10px; flex-wrap: wrap;
font-size: 10px; color: var(--text3);
padding-top: 10px;
border-top: 1px dashed rgba(255,255,255,0.07);
margin-bottom: 12px;
}
.dw-mini b { color: var(--text2); font-weight: 600; }
.dw-vit {
background: rgba(255,255,255,0.04);
border-left: 2px solid #a78bfa;
padding: 10px 12px;
border-radius: 0 8px 8px 0;
margin-bottom: 12px;
}
.dw-vit-h { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #a78bfa; font-weight: 600; margin-bottom: 6px; }
.dw-vit-ava { font-size: 13px; }
.dw-vit-name { letter-spacing: 0.3px; }
.dw-vit-txt { font-size: 12px; line-height: 1.5; color: var(--text2); font-style: italic; }
.dw-recs-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.dw-recs-ic { color: #fcd34d; display: flex; align-items: center; }
.dw-recs-ttl { font-size: 11px; color: #fcd34d; font-weight: 700; letter-spacing: 0.3px; }
.dw-recs-list { display: flex; flex-direction: column; gap: 5px; }
.dw-rec { font-size: 11.5px; line-height: 1.45; color: var(--text2); display: flex; gap: 7px; }
.dw-rec::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #fcd34d; flex-shrink: 0; margin-top: 7px; }
/* Light theme */
body.light .dw-card { background: #ffffff; border: 1px solid rgba(0,0,0,0.06); }
body.light .dw-card::before { background: radial-gradient(circle, rgba(124,58,237,0.06), transparent 70%); }
body.light .dw-h-ic { color: #7c3aed; }
body.light .dw-h-refresh { background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); color: var(--text3); }
body.light .dw-h-refresh:hover, body.light .dw-h-refresh:active { color: #7c3aed; background: rgba(124,58,237,0.08); }
body.light .dw-cal-bar { background: rgba(0,0,0,0.05); }
body.light .dw-m-bar { background: rgba(0,0,0,0.04); }
body.light .dw-delta--over { color: #dc2626; }
body.light .dw-mini { border-top: 1px dashed rgba(0,0,0,0.07); }
body.light .dw-vit { background: rgba(124,58,237,0.04); border-left: 2px solid #7c3aed; }
body.light .dw-vit-h { color: #6d28d9; }
body.light .dw-recs-ic { color: #b45309; }
body.light .dw-recs-ttl { color: #b45309; }
body.light .dw-rec::before { background: #d97706; }
/* Profile stats — orb avatars (23.05.2026, consistency с экспертами screen) */
.s-ico.s-ico--orb {
background: transparent;
border-radius: 50%;
overflow: hidden;
padding: 0;
}
.s-ico.s-ico--orb svg { width: 100%; height: 100%; display: block; }
/* === Body Params screen (Phase 1 — 23.05.2026) ============================ */
.bp-sec { background: #14141f; border: 1px solid #2a2a3a; border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.bp-sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bp-sec-ic { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #7c3aed); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.bp-sec-ttl { font-size: 14px; font-weight: 700; }
.bp-field { margin-bottom: 12px; }
.bp-field:last-child { margin-bottom: 0; }
.bp-lbl { font-size: 11px; color: var(--text3); margin-bottom: 6px; display: block; }
.bp-row { display: flex; gap: 8px; }
.bp-input { flex: 1; padding: 10px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; color: var(--text); font-size: 13px; font-weight: 600; -webkit-appearance: none; }
.bp-input:focus { outline: none; border-color: #a78bfa; }
.bp-suffix { display: flex; align-items: center; padding: 0 12px; font-size: 11px; color: var(--text3); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; }
.bp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bp-chip { padding: 7px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; font-size: 11px; cursor: pointer; color: var(--text2); -webkit-tap-highlight-color: rgba(0,0,0,0); transition: all 0.15s; }
.bp-chip.on { background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(167,139,250,0.12)); border-color: rgba(167,139,250,0.5); color: #c4b5fd; font-weight: 600; }
.bp-act-list { display: flex; flex-direction: column; gap: 5px; }
.bp-act-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); }
.bp-act-opt.on { background: rgba(167,139,250,0.08); border-color: rgba(167,139,250,0.4); }
.bp-act-num { width: 18px; font-size: 12px; font-weight: 700; color: #a78bfa; flex-shrink: 0; }
.bp-act-body { flex: 1; min-width: 0; }
.bp-act-ttl { font-size: 12px; font-weight: 600; }
.bp-act-sub { font-size: 10px; color: var(--text3); margin-top: 1px; }
.bp-act-mult { font-size: 10px; color: var(--text3); flex-shrink: 0; }
.bp-goal-row { display: flex; gap: 6px; }
.bp-goal-card { flex: 1; padding: 12px 8px; text-align: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); }
.bp-goal-card.on { border-color: rgba(167,139,250,0.5); background: rgba(167,139,250,0.08); }
.bp-goal-ic { font-size: 20px; margin-bottom: 4px; }
.bp-goal-ttl { font-size: 11px; font-weight: 700; }
.bp-goal-sub { font-size: 9px; color: var(--text3); margin-top: 2px; }
.bp-preview { background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(52,211,153,0.04)); border: 1px solid rgba(52,211,153,0.32); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.bp-prev-label { font-size: 9px; font-weight: 800; color: #34d399; letter-spacing: 1.5px; }
.bp-prev-h { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 12px; }
.bp-prev-num { font-size: 28px; font-weight: 800; color: #34d399; line-height: 1; }
.bp-prev-sub { font-size: 12px; color: var(--text2); font-weight: 600; }
.bp-prev-macros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.bp-tm { text-align: center; padding: 8px 0; background: rgba(255,255,255,0.04); border-radius: 8px; }
.bp-tm-val { font-size: 14px; font-weight: 700; }
.bp-tm-lbl { font-size: 9px; color: var(--text3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.bp-prev-formula { font-size: 9.5px; color: var(--text3); line-height: 1.5; background: rgba(0,0,0,0.18); padding: 8px 10px; border-radius: 8px; font-family: ui-monospace, monospace; }
.bp-save-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; font-size: 14px; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); margin-top: 4px; }
.bp-save-btn:active { transform: scale(0.98); }
.bp-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
/* Light theme */
body.light .bp-sec { background: #fff; border-color: rgba(0,0,0,0.06); }
body.light .bp-input { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); color: var(--text); }
body.light .bp-suffix { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
body.light .bp-chip { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
body.light .bp-act-opt { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
body.light .bp-goal-card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
body.light .bp-preview { background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(52,211,153,0.02)); border-color: rgba(16,185,129,0.32); }
body.light .bp-prev-num { color: #059669; }
body.light .bp-prev-formula { background: rgba(0,0,0,0.04); }
/* Journal gear icon (Option C — 23.05.2026) → opens body-params */
.jp__gear {
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
color: #c4b5fd;
display: flex; align-items: center; justify-content: center;
cursor: pointer; padding: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
transition: background 0.15s ease, color 0.15s ease;
position: relative;
flex-shrink: 0;
}
.jp__gear:hover, .jp__gear:active { background: rgba(167,139,250,0.16); color: #ddd6fe; }
.jp__gear--pulse::after {
content: '';
position: absolute; inset: -4px;
border-radius: 50%;
border: 2px solid #a78bfa;
animation: jpGearPulse 2s ease-in-out infinite;
pointer-events: none;
}
@keyframes jpGearPulse {
0%, 100% { opacity: 0; transform: scale(0.92); }
50% { opacity: 1; transform: scale(1.10); }
}
body.light .jp__gear { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); color: #6d28d9; }
body.light .jp__gear:hover, body.light .jp__gear:active { background: rgba(124,58,237,0.12); color: #7c3aed; }
body.light .jp__gear--pulse::after { border: 2px solid #7c3aed; }
/* Daily-wrap target meta-bar (Option B — 23.05.2026) */
.dw-target-meta {
display: flex; align-items: center; gap: 6px;
background: rgba(167,139,250,0.10);
border: 1px solid rgba(167,139,250,0.22);
border-radius: 8px;
padding: 6px 10px;
margin-bottom: 12px;
font-size: 10.5px;
color: var(--text2);
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
transition: background 0.15s ease;
}
.dw-target-meta:hover, .dw-target-meta:active { background: rgba(167,139,250,0.16); }
.dw-target-meta > span:first-child { flex: 1; }
.dw-target-meta b { color: #c4b5fd; font-weight: 700; }
.dw-target-link {
color: #a78bfa;
font-weight: 600;
display: flex; align-items: center;
}
.dw-target-link::after { content: '\203A'; margin-left: 3px; font-size: 13px; line-height: 1; }
/* Default state — yellow highlight (стимул задать своё) */
.dw-target-meta--default {
background: linear-gradient(135deg, rgba(252,211,77,0.10), rgba(245,158,11,0.04));
border-color: rgba(252,211,77,0.32);
}
.dw-target-meta--default:hover, .dw-target-meta--default:active {
background: linear-gradient(135deg, rgba(252,211,77,0.16), rgba(245,158,11,0.08));
}
.dw-target-meta--default b { color: #fcd34d; }
.dw-target-meta--default .dw-target-link { color: #fcd34d; }
/* Light theme */
body.light .dw-target-meta { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.20); }
body.light .dw-target-meta b { color: #6d28d9; }
body.light .dw-target-link { color: #7c3aed; }
body.light .dw-target-meta--default { background: linear-gradient(135deg, rgba(217,119,6,0.10), rgba(180,83,9,0.04)); border-color: rgba(180,83,9,0.32); }
body.light .dw-target-meta--default b { color: #b45309; }
body.light .dw-target-meta--default .dw-target-link { color: #b45309; }
/* === Food card — Natural units chips (23.05.2026) ============================ */
.fac-units {
display: flex; gap: 4px; flex-wrap: wrap;
margin: 6px 0;
}
.fac-unit-chip {
padding: 3px 9px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
font-size: 10px;
font-weight: 600;
color: var(--text3);
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
touch-action: manipulation;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.fac-unit-chip:hover, .fac-unit-chip:active { background: rgba(167,139,250,0.10); }
.fac-unit-chip--on {
background: rgba(167,139,250,0.18);
border-color: rgba(167,139,250,0.5);
color: #c4b5fd;
}
/* Macro detail rows (Калории/Б/Ж/У — заголовочный блок) */
.fac-detail--macro .fac-detail__lbl {
color: #fcd34d;
font-weight: 700;
}
.fac-detail-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
margin: 8px 0 6px;
}
.fac-target-note b { color: #c4b5fd; font-weight: 700; }
/* Light theme overrides */
body.light .fac-unit-chip { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); color: var(--text3); }
body.light .fac-unit-chip:hover, body.light .fac-unit-chip:active { background: rgba(124,58,237,0.06); }
body.light .fac-unit-chip--on { background: rgba(124,58,237,0.12); border-color: rgba(124,58,237,0.5); color: #6d28d9; }
body.light .fac-detail--macro .fac-detail__lbl { color: #b45309; }
body.light .fac-detail-divider { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent); }
body.light .fac-target-note b { color: #6d28d9; }
/* Voice demo button spinner (23.05.2026) */
@keyframes vdSpin { to { transform: rotate(360deg); } }
/* Wave hand animation для home greeting (24.05.2026) */
@keyframes pacWave {
0%,60%,100% { transform: rotate(0deg); }
10%,30%,50% { transform: rotate(14deg); }
20%,40% { transform: rotate(-8deg); }
}
/* ─── Stella onboarding form (Phase 1A 24.05.2026) ─── */
.stella-form-wrap { color: var(--text); }
.stella-fld { display: flex; flex-direction: column; gap: 6px; }
.stella-lbl { font-size: 12px; font-weight: 700; color: var(--text2); letter-spacing: 0.01em; }
.stella-inp {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: var(--text);
font-size: 15px;
font-family: inherit;
padding: 12px 14px;
border-radius: 12px;
outline: none;
-webkit-appearance: none;
appearance: none;
width: 100%;
box-sizing: border-box;
transition: border-color 0.18s ease, background 0.18s ease;
}
.stella-inp:focus { border-color: rgba(139,92,246,0.55); background: rgba(139,92,246,0.07); }
.stella-inp::placeholder { color: var(--text3); }
.stella-hint { font-size: 11.5px; color: var(--text3); line-height: 1.35; margin-top: 2px; }
.stella-btn:active { opacity: 0.85; }
.stella-btn:disabled { opacity: 0.55; cursor: not-allowed; }
body.light .stella-inp { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.10); color: #1a1a2a; }
body.light .stella-inp:focus { border-color: rgba(124,58,237,0.55); background: rgba(124,58,237,0.05); }
body.light .stella-inp::placeholder { color: #94949e; }
body.light .stella-lbl { color: #4a4a55; }
body.light .stella-hint { color: #8a8a95; }
/* ─── Stella v2 — welcome card, chips, header pill, loading ─── */
.stella-load { padding: 60px 20px; text-align: center; }
.stella-load-text { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.stella-load-dots { display: inline-flex; gap: 6px; }
.stella-load-dots span {
width: 7px; height: 7px; border-radius: 50%;
background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
animation: stellaLoadPulse 1.2s ease-in-out infinite;
}
.stella-load-dots span:nth-child(2) { animation-delay: 0.18s; }
.stella-load-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes stellaLoadPulse {
0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
40% { opacity: 1; transform: scale(1.15); }
}
.stella-welcome {
padding: 18px 16px 24px;
max-width: 480px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 18px;
}
.stella-welcome-hdr {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.stella-welcome-ttl {
font-size: 18px;
font-weight: 800;
background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
letter-spacing: -0.01em;
}
.stella-welcome-sub {
font-size: 12px;
color: var(--text3);
font-weight: 500;
}
.stella-big-card {
background: linear-gradient(135deg, rgba(139,92,246,0.16), rgba(196,181,253,0.06));
border: 1px solid rgba(139,92,246,0.30);
border-radius: 16px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 11px;
}
.stella-big-head {
font-size: 11px;
font-weight: 800;
color: #c4b5fd;
text-transform: uppercase;
letter-spacing: 0.10em;
margin-bottom: 4px;
}
.stella-big-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 14px;
}
.stella-big-lbl {
color: var(--text2);
font-weight: 600;
}
.stella-big-val {
color: var(--text);
font-weight: 700;
font-feature-settings: "tnum";
}
.stella-big-deg {
color: var(--text3);
font-size: 12px;
font-weight: 500;
margin-left: 2px;
}
.stella-big-na {
color: var(--text3);
font-weight: 500;
font-style: italic;
}
.stella-num-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.stella-num-cell {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
padding: 12px 14px;
text-align: center;
}
.stella-num-lbl {
font-size: 10.5px;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
margin-bottom: 4px;
}
.stella-num-val {
font-size: 26px;
font-weight: 800;
background: linear-gradient(135deg, #fde68a, #f59e0b);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
line-height: 1;
}
.stella-chips-head {
font-size: 11px;
font-weight: 800;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.10em;
margin-top: 6px;
}
.stella-chips {
display: flex;
flex-direction: column;
gap: 8px;
}
.stella-chip {
background: rgba(139,92,246,0.10);
border: 1px solid rgba(139,92,246,0.30);
color: var(--text);
font-size: 14px;
font-weight: 600;
padding: 12px 14px;
border-radius: 12px;
cursor: pointer;
font-family: inherit;
text-align: left;
transition: background 0.15s ease, transform 0.1s ease;
-webkit-tap-highlight-color: transparent;
}
.stella-chip:active {
background: rgba(139,92,246,0.20);
transform: scale(0.985);
}
.stella-form-wrap {
padding: 18px 16px 20px;
max-width: 480px;
margin: 0 auto;
}
.stella-form-hdr {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: 18px;
text-align: center;
}
.stella-form-ttl {
font-size: 16px;
font-weight: 700;
color: var(--text);
}
.stella-form-intro {
font-size: 12.5px;
line-height: 1.5;
color: var(--text2);
max-width: 380px;
}
.stella-f { display: flex; flex-direction: column; gap: 14px; }
.stella-err {
display: none;
color: #fda4af;
font-size: 12.5px;
background: rgba(244,63,94,0.10);
border: 1px solid rgba(244,63,94,0.25);
border-radius: 10px;
padding: 9px 12px;
}
.stella-btn-row {
display: flex;
gap: 10px;
margin-top: 6px;
}
.stella-btn {
flex: 1;
background: linear-gradient(135deg, rgba(139,92,246,0.92), #8b5cf6);
color: #fff;
font-size: 14px;
font-weight: 700;
font-family: inherit;
padding: 13px;
border-radius: 12px;
border: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: opacity 0.15s ease;
}
.stella-btn:active { opacity: 0.85; }
.stella-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.stella-btn-sec {
flex: 0 0 auto;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
color: var(--text2);
font-size: 14px;
font-weight: 600;
font-family: inherit;
padding: 13px 16px;
border-radius: 12px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.stella-btn-sec:active { opacity: 0.85; }
.stella-pill {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(139,92,246,0.16);
border: 1px solid rgba(139,92,246,0.40);
color: #c4b5fd;
font-size: 11px;
font-weight: 700;
padding: 3px 9px;
border-radius: 8px;
margin-left: 8px;
cursor: pointer;
vertical-align: middle;
letter-spacing: 0.02em;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease;
}
.stella-pill:active { background: rgba(139,92,246,0.28); }
/* Light theme */
body.light .stella-welcome-ttl {
background: linear-gradient(135deg, #7c3aed, #6d28d9);
-webkit-background-clip: text;
background-clip: text;
}
body.light .stella-big-card {
background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(124,58,237,0.03));
border-color: rgba(124,58,237,0.25);
}
body.light .stella-big-head { color: #6d28d9; }
body.light .stella-num-cell {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.08);
}
body.light .stella-num-val {
background: linear-gradient(135deg, #d97706, #b45309);
-webkit-background-clip: text;
background-clip: text;
}
body.light .stella-chip {
background: rgba(124,58,237,0.06);
border-color: rgba(124,58,237,0.25);
}
body.light .stella-chip:active { background: rgba(124,58,237,0.14); }
body.light .stella-pill {
background: rgba(124,58,237,0.10);
border-color: rgba(124,58,237,0.30);
color: #6d28d9;
}
body.light .stella-btn-sec {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.10);
color: #4a4a55;
}
/* ─── Stella chart button (bottom-left, parallel to journal-btn) ─── */
.stella-chart-btn {
color: #c4b5fd !important;
background: rgba(139,92,246,0.08) !important;
border-color: rgba(139,92,246,0.35) !important;
}
.stella-chart-btn:active {
background: rgba(139,92,246,0.18) !important;
transform: scale(0.94);
}
body.light .stella-chart-btn {
color: #6d28d9 !important;
background: rgba(124,58,237,0.06) !important;
border-color: rgba(124,58,237,0.30) !important;
}
/* ─── Phase 1B: Stella «Mirror of Stars» (24.05.2026) ─── */
.stella-mirror-btn {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
background: linear-gradient(135deg, rgba(234,179,8,0.18), rgba(139,92,246,0.16));
border: 1px solid rgba(234,179,8,0.40);
border-radius: 16px;
padding: 14px 16px;
cursor: pointer;
font-family: inherit;
text-align: left;
margin-top: 4px;
position: relative;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
transition: transform 0.12s ease;
}
.stella-mirror-btn:active { transform: scale(0.985); }
.stella-mirror-btn::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 30%, rgba(251,191,36,0.18), transparent 65%);
pointer-events: none;
}
.stella-mirror-ico {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #fde68a, #fbbf24);
border-radius: 12px;
color: #1a1300;
flex-shrink: 0;
z-index: 1;
}
.stella-mirror-txt { flex: 1; min-width: 0; z-index: 1; }
.stella-mirror-ttl {
font-size: 14.5px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.01em;
}
.stella-mirror-sub {
font-size: 11.5px;
color: var(--text2);
margin-top: 2px;
line-height: 1.3;
}
.stella-mirror-arr {
font-size: 22px;
color: #fbbf24;
font-weight: 600;
z-index: 1;
}
.stella-mirror-load {
padding: 18px 0;
text-align: center;
}
.stella-mirror-load-inner {
display: inline-block;
background: linear-gradient(135deg, rgba(139,92,246,0.10), rgba(234,179,8,0.08));
border: 1px solid rgba(139,92,246,0.30);
border-radius: 14px;
padding: 18px 28px;
}
.stella-mirror-load-txt {
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-bottom: 10px;
}
.stella-mirror-card {
background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(234,179,8,0.06));
border: 1px solid rgba(139,92,246,0.35);
border-radius: 16px;
padding: 16px 18px;
margin: 6px 12px;
max-width: 92%;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 8px 28px -10px rgba(139,92,246,0.30);
}
.stella-mirror-result { display: flex; flex-direction: column; }
.stella-mirror-hdr {
display: flex;
align-items: center;
gap: 11px;
}
.stella-mirror-hdr-text { flex: 1; }
.stella-mirror-hdr-ttl {
font-size: 13px;
font-weight: 800;
background: linear-gradient(135deg, #fde68a, #f59e0b);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
letter-spacing: 0.02em;
}
.stella-mirror-hdr-cnt {
font-size: 11px;
color: var(--text3);
margin-top: 2px;
}
.stella-mirror-body {
font-size: 14px;
line-height: 1.55;
color: var(--text);
}
.stella-mirror-body p {
margin: 0 0 9px 0;
}
.stella-mirror-body p:last-child { margin-bottom: 0; }
.stella-mirror-foot {
font-size: 11.5px;
color: var(--text3);
font-style: italic;
border-top: 1px dashed rgba(139,92,246,0.25);
padding-top: 9px;
}
/* ─── Phase 1M.9.1 — Share + Voice buttons под Зеркалом звёзд ───────── */
.stella-mirror-actions {
display: flex; gap: 8px;
margin: 10px 0;
}
.stella-mirror-act-btn {
flex: 1;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 10px 12px;
font-size: 12.5px; font-weight: 600;
background: rgba(139,92,246,0.10);
border: 1px solid rgba(139,92,246,0.30);
border-radius: 10px;
color: #c4b5fd;
cursor: pointer;
transition: all 0.15s;
}
.stella-mirror-act-btn:active { transform: scale(0.97); }
.stella-mirror-act-btn:hover { background: rgba(139,92,246,0.16); }
.stella-mirror-act-voice.is-playing {
background: rgba(251,191,36,0.16);
border-color: rgba(251,191,36,0.45);
color: #fbbf24;
animation: stellaPulseVoice 1.4s ease-in-out infinite;
}
@keyframes stellaPulseVoice {
0%,100% { opacity: 1; }
50% { opacity: 0.7; }
}
.stella-mirror-act-btn.is-loading {
background: rgba(139,92,246,0.06);
cursor: wait; color: rgba(196,181,253,0.65);
}
.stella-mir-spin {
display: inline-block; width: 12px; height: 12px;
border: 2px solid rgba(196,181,253,0.3);
border-top-color: #c4b5fd;
border-radius: 50%;
animation: stellaMirSpin 0.7s linear infinite;
}
@keyframes stellaMirSpin {
to { transform: rotate(360deg); }
}
body.light .stella-mirror-act-btn {
background: rgba(124,58,237,0.06) !important;
border-color: rgba(124,58,237,0.25) !important;
color: #6d28d9 !important;
}
body.light .stella-mirror-act-btn:hover { background: rgba(124,58,237,0.12) !important; }
body.light .stella-mirror-act-voice.is-playing {
background: rgba(245,158,11,0.14) !important;
border-color: rgba(245,158,11,0.55) !important;
color: #b45309 !important;
}
/* ─── Phase 1M.9.2 — SVG натальная карта ─────────────────────────────── */
.stella-natal-card {
margin: 14px 0;
padding: 14px 12px 10px;
background: linear-gradient(180deg, rgba(76,29,149,0.16), rgba(15,18,30,0.6));
border: 1px solid rgba(196,181,253,0.30);
border-radius: 18px;
text-align: center;
}
.stella-natal-ttl {
font-size: 12px; font-weight: 700;
background: linear-gradient(135deg, #c4b5fd, #a78bfa 60%, #fbbf24);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase; letter-spacing: 0.10em;
margin-bottom: 10px;
}
.stella-natal-svg-wrap {
display: flex; justify-content: center; align-items: center;
width: 100%; max-width: 320px;
margin: 0 auto;
filter: drop-shadow(0 4px 20px rgba(167,139,250,0.25));
animation: stellaNatalIn 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes stellaNatalIn {
from { transform: scale(0.85) rotate(-12deg); opacity: 0; }
to { transform: scale(1) rotate(0deg); opacity: 1; }
}
.stella-natal-svg {
width: 100%; height: auto; display: block;
max-width: 300px;
}
body.light .stella-natal-card {
background: linear-gradient(180deg, rgba(124,58,237,0.06), rgba(255,255,255,0.4)) !important;
border-color: rgba(124,58,237,0.25) !important;
}
/* ─── Phase 1M.9.3 — Дух-проводник как ARCHETYPE-животное ─────────── */
.stella-totem-card {
background: linear-gradient(180deg, rgba(76,29,149,0.35), rgba(15,18,30,0.7)) !important;
border: 1px solid rgba(251,191,36,0.30) !important;
text-align: center;
padding: 18px 16px !important;
}
.stella-totem-orb-wrap {
display: flex; justify-content: center;
margin: 6px 0 12px;
animation: stellaTotemBreathe 4s ease-in-out infinite;
}
@keyframes stellaTotemBreathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
.stella-totem-orb {
width: 92px; height: 92px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
position: relative;
border: 2px solid rgba(255,255,255,0.18);
}
.stella-totem-orb::before {
content: ''; position: absolute;
top: 10px; left: 18px;
width: 18px; height: 10px;
background: rgba(255,255,255,0.45);
border-radius: 50%;
filter: blur(3px);
}
.stella-totem-emoji {
font-size: 50px;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.stella-totem-meta {
text-align: center;
margin-bottom: 14px;
}
.stella-totem-label {
font-size: 10.5px; font-weight: 700;
color: rgba(196,181,253,0.7);
text-transform: uppercase; letter-spacing: 0.10em;
margin-bottom: 4px;
}
.stella-totem-name {
font-size: 24px; font-weight: 800;
margin-bottom: 4px;
}
.stella-totem-essence {
font-size: 12px;
color: rgba(255,255,255,0.55);
font-style: italic;
}
.stella-totem-body {
text-align: left;
}
.stella-totem-rituals-hdr {
margin: 14px 0 8px;
padding: 6px 0;
font-size: 13px; font-weight: 700;
color: #fbbf24;
border-top: 1px dashed rgba(251,191,36,0.30);
border-bottom: 1px dashed rgba(251,191,36,0.30);
text-align: center;
}
body.light .stella-totem-card {
background: linear-gradient(180deg, rgba(124,58,237,0.06), rgba(255,255,255,0.4)) !important;
border-color: rgba(245,158,11,0.35) !important;
}
body.light .stella-totem-label { color: rgba(67,56,202,0.7) !important; }
body.light .stella-totem-essence { color: rgba(15,23,42,0.55) !important; }
body.light .stella-totem-rituals-hdr {
color: #b45309 !important;
border-color: rgba(180,83,9,0.30) !important;
}
/* ─── Phase 1M.9.4 — Daily morning «🌙 Прогноз на сегодня» card ────── */
.stella-daily-card {
background:
radial-gradient(circle at 20% 0%, rgba(167,139,250,0.20), transparent 50%),
linear-gradient(180deg, rgba(45,30,80,0.55), rgba(15,10,28,0.78)) !important;
border: 1px solid rgba(167,139,250,0.30) !important;
padding: 16px 14px !important;
}
.stella-daily-hdr {
font-size: 11px; font-weight: 700;
color: rgba(196,181,253,0.80);
text-transform: uppercase; letter-spacing: 0.12em;
margin-bottom: 12px;
display: flex; align-items: center;
}
.stella-daily-moon-emoji {
font-size: 14px; margin-right: 2px;
filter: drop-shadow(0 0 6px rgba(196,181,253,0.5));
}
.stella-daily-body {
font-size: 14.5px; line-height: 1.55;
color: rgba(255,255,255,0.92);
font-style: italic;
margin: 0 0 14px;
padding: 0 4px;
text-align: left;
}
.stella-daily-metrics {
display: flex; flex-direction: column; gap: 6px;
padding: 10px 12px;
background: rgba(196,181,253,0.06);
border: 1px solid rgba(196,181,253,0.16);
border-radius: 10px;
margin-bottom: 12px;
}
.stella-daily-metric {
font-size: 12px;
color: rgba(255,255,255,0.82);
display: flex; align-items: center;
flex-wrap: wrap; gap: 4px;
}
.stella-daily-metric-ico {
font-size: 13px;
margin-right: 2px;
}
.stella-daily-metric-lbl {
font-weight: 700;
color: rgba(196,181,253,0.75);
}
.stella-daily-metric-val {
color: rgba(255,255,255,0.92);
}
.stella-daily-energy {
font-weight: 700;
color: #fbbf24;
}
body.light .stella-daily-card {
background: linear-gradient(180deg, rgba(167,139,250,0.10), rgba(255,255,255,0.5)) !important;
border-color: rgba(124,58,237,0.30) !important;
}
body.light .stella-daily-hdr { color: rgba(67,56,202,0.85) !important; }
body.light .stella-daily-body { color: #0f172a !important; }
body.light .stella-daily-metric { color: rgba(15,23,42,0.85) !important; }
body.light .stella-daily-metric-lbl { color: rgba(67,56,202,0.85) !important; }
body.light .stella-daily-metric-val { color: rgba(15,23,42,0.92) !important; }
body.light .stella-daily-energy { color: #d97706 !important; }
body.light .stella-daily-metrics {
background: rgba(124,58,237,0.04) !important;
border-color: rgba(124,58,237,0.18) !important;
}
/* Phase 1M.10.2/3 — VoC + Retrograde metrics rows */
.stella-daily-voc {
border-top: 1px dashed rgba(251,113,133,0.30);
padding-top: 5px;
margin-top: 3px;
}
.stella-daily-voc .stella-daily-metric-lbl { color: #fb7185 !important; }
.stella-daily-voc.is-active .stella-daily-metric-lbl {
color: #ef4444 !important;
font-weight: 800;
text-shadow: 0 0 6px rgba(239,68,68,0.4);
}
.stella-daily-retro .stella-daily-metric-lbl { color: #fbbf24 !important; }
body.light .stella-daily-voc .stella-daily-metric-lbl { color: #dc2626 !important; }
body.light .stella-daily-voc.is-active .stella-daily-metric-lbl { color: #991b1b !important; }
body.light .stella-daily-retro .stella-daily-metric-lbl { color: #b45309 !important; }
/* Phase 1M.10.7-12 bonus rows */
.stella-daily-fstar .stella-daily-metric-lbl,
.stella-daily-fstar .stella-daily-metric-ico { color: #fde68a !important; text-shadow: 0 0 8px rgba(251,191,36,0.5); }
.stella-daily-eclipse {
border-top: 1px dashed rgba(192,38,211,0.30);
padding-top: 5px; margin-top: 3px;
}
.stella-daily-eclipse .stella-daily-metric-lbl { color: #f0abfc !important; font-weight: 800; }
.stella-daily-oob .stella-daily-metric-lbl { color: #c4b5fd !important; }
.stella-daily-decan .stella-daily-metric-lbl { color: rgba(196,181,253,0.7) !important; font-size: 11px; }
.stella-daily-hothouse .stella-daily-metric-lbl { color: #fca5a5 !important; }
body.light .stella-daily-fstar .stella-daily-metric-lbl { color: #b45309 !important; }
body.light .stella-daily-eclipse .stella-daily-metric-lbl { color: #a21caf !important; }
body.light .stella-daily-oob .stella-daily-metric-lbl { color: #6d28d9 !important; }
body.light .stella-daily-hothouse .stella-daily-metric-lbl { color: #b91c1c !important; }
/* ─── Anna Phase 2.A.1 — WOW-дневник ───────────────────────────────── */
.anna-jr-card {
position: relative;
background: linear-gradient(180deg, rgba(232,121,166,0.10), rgba(15,18,30,0.92));
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(232,121,166,0.30);
border-radius: 22px 22px 0 0;
padding: 18px 18px calc(20px + env(safe-area-inset-bottom, 0px));
width: 100%; max-width: 520px;
max-height: calc(92vh - env(safe-area-inset-bottom, 0px));
overflow-y: auto; -webkit-overflow-scrolling: touch;
z-index: 10000;
box-shadow: 0 -8px 36px rgba(0,0,0,0.55);
}
.anna-jr-title {
font-size: 17px; font-weight: 800; color: #fff;
padding-right: 28px; margin-bottom: 16px;
background: linear-gradient(135deg, #f9a8d4, #ec4899);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.anna-jr-lbl {
display: block;
font-size: 11.5px; font-weight: 700;
color: rgba(255,255,255,0.55);
text-transform: uppercase; letter-spacing: 0.06em;
margin: 12px 0 7px;
}
.anna-jr-mood-row {
display: flex; align-items: center; gap: 14px;
margin-bottom: 4px;
}
.anna-jr-mood {
flex: 1;
appearance: none;
height: 8px; border-radius: 8px;
background: linear-gradient(90deg, #ef4444 0%, #fb923c 30%, #fbbf24 50%, #84cc16 70%, #22c55e 100%);
outline: none;
}
.anna-jr-mood::-webkit-slider-thumb {
appearance: none;
width: 24px; height: 24px;
background: #fff; border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.anna-jr-mood::-moz-range-thumb {
width: 24px; height: 24px; background: #fff; border-radius: 50%; border: none; cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.anna-jr-mood-v {
width: 44px; text-align: center;
font-size: 20px; font-weight: 800;
background: linear-gradient(135deg, #ec4899, #be185d);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.anna-jr-chips {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.anna-jr-chip {
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 9px 4px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 11px;
cursor: pointer;
transition: all 0.15s;
}
.anna-jr-chip:hover { background: rgba(255,255,255,0.09); }
.anna-jr-chip:active { transform: scale(0.94); }
.anna-jr-chip.is-on {
background: rgba(232,121,166,0.22);
border-color: rgba(232,121,166,0.65);
box-shadow: 0 3px 12px rgba(232,121,166,0.28);
}
.anna-jr-chip-e { font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; height: 22px; }
.anna-jr-chip-e svg { display: block; }
.anna-jr-chip-l {
font-size: 10.5px; font-weight: 600;
color: rgba(255,255,255,0.7);
}
.anna-jr-chip.is-on .anna-jr-chip-l { color: #f9a8d4; }
.anna-jr-text {
width: 100%; box-sizing: border-box;
padding: 10px 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 11px;
color: #fff; font-size: 13.5px;
outline: none; resize: none;
font-family: inherit;
margin-bottom: 4px;
}
.anna-jr-text:focus { border-color: rgba(232,121,166,0.55); }
.anna-jr-save {
display: block; width: 100%;
margin-top: 16px; padding: 13px;
background: linear-gradient(135deg, #ec4899, #be185d);
border: none; border-radius: 13px;
color: #fff; font-size: 14px; font-weight: 800;
cursor: pointer;
box-shadow: 0 4px 14px rgba(190,24,93,0.35);
transition: transform 0.1s;
}
.anna-jr-save:active { transform: scale(0.98); }
/* Phase 2.A.3.2: Карта состояния entry inside journal modal */
.anna-jr-tests-entry {
display: flex; align-items: center; gap: 12px;
width: 100%; margin-top: 12px;
padding: 12px 14px;
background: rgba(167, 139, 250, 0.10);
border: 1px solid rgba(167, 139, 250, 0.28);
border-radius: 12px;
color: #f1f0ff; text-align: left;
cursor: pointer; transition: background 0.15s ease;
}
.anna-jr-tests-entry:active { background: rgba(167, 139, 250, 0.18); }
.anna-jr-tests-entry-ico {
color: #a78bfa; flex-shrink: 0;
display: inline-flex; align-items: center;
}
.anna-jr-tests-entry-l { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.anna-jr-tests-entry-name { font-size: 14px; font-weight: 600; color: #c4b5fd; }
.anna-jr-tests-entry-sub { font-size: 11.5px; color: rgba(241,240,255,0.55); }
.anna-jr-tests-entry-arrow {
font-size: 22px; color: rgba(167,139,250,0.6);
flex-shrink: 0; font-weight: 300; line-height: 1;
}
body.light .anna-jr-tests-entry {
background: rgba(167, 139, 250, 0.08);
border-color: rgba(167, 139, 250, 0.28);
color: #1e1b4b;
}
body.light .anna-jr-tests-entry-name { color: #6d28d9; }
body.light .anna-jr-tests-entry-sub { color: rgba(30,27,75,0.55); }
body.light .anna-jr-tests-entry-arrow { color: rgba(109,40,217,0.55); }
/* Phase 2.A.4: Voice library entry inside journal modal */
.anna-jr-voice-entry {
display: flex; align-items: center; gap: 12px;
width: 100%; margin-top: 8px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(244, 114, 182, 0.10), rgba(232, 121, 166, 0.06));
border: 1px solid rgba(244, 114, 182, 0.30);
border-radius: 12px;
color: #fff; text-align: left;
cursor: pointer; transition: background 0.15s ease;
}
.anna-jr-voice-entry:active { background: rgba(244, 114, 182, 0.18); }
.anna-jr-voice-entry-ico { color: #f472b6; flex-shrink: 0; display: inline-flex; align-items: center; }
.anna-jr-voice-entry-l { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.anna-jr-voice-entry-name { font-size: 14px; font-weight: 600; color: #f9a8d4; }
.anna-jr-voice-entry-sub { font-size: 11.5px; color: rgba(255,255,255,0.55); }
.anna-jr-voice-entry-arrow { font-size: 22px; color: rgba(244,114,182,0.6); flex-shrink: 0; font-weight: 300; line-height: 1; }
body.light .anna-jr-voice-entry {
background: linear-gradient(135deg, rgba(244,114,182,0.08), rgba(232,121,166,0.03));
border-color: rgba(244,114,182,0.32);
color: #1e1b4b;
}
body.light .anna-jr-voice-entry-name { color: #be185d; }
body.light .anna-jr-voice-entry-sub { color: rgba(30,27,75,0.55); }
body.light .anna-jr-voice-entry-arrow { color: rgba(190,24,93,0.55); }
/* ─── Anna Phase 2.A.4 — Voice Library modal + player ───────────── */
.anna-voice-wrap {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 16px; touch-action: none;
}
.anna-voice-bg { position: absolute; inset: 0; background: rgba(20, 8, 18, 0.85); backdrop-filter: blur(10px); }
.anna-voice-card {
position: relative; z-index: 1;
width: 100%; max-width: 440px;
max-height: calc(100vh - 32px);
overflow-y: auto;
background: linear-gradient(180deg, #1f1424 0%, #160e1c 100%);
border: 1px solid rgba(244, 114, 182, 0.25);
border-radius: 22px;
padding: 22px 18px;
box-shadow: 0 20px 60px rgba(244, 114, 182, 0.16);
color: #f5e8f0;
}
.anna-voice-loading, .anna-voice-err {
padding: 36px 16px; text-align: center;
color: rgba(245,232,240,0.65); font-size: 14px;
}
.anna-voice-err { color: #fca5a5; }
.anna-voice-head { text-align: center; margin-bottom: 18px; }
.anna-voice-h { font-size: 22px; font-weight: 700; margin: 0 0 6px; color: #f9a8d4; }
.anna-voice-sub { font-size: 12px; color: rgba(245,232,240,0.6); margin: 0; }
.anna-voice-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 14px; }
.anna-voice-cat {}
.anna-voice-cat-head {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.10em; text-transform: uppercase;
color: rgba(244,114,182,0.7);
padding: 0 4px 8px;
}
.anna-voice-cat-items { display: flex; flex-direction: column; gap: 6px; }
.anna-voice-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
background: rgba(244, 114, 182, 0.06);
border: 1px solid rgba(244, 114, 182, 0.14);
border-radius: 12px;
color: #f5e8f0; text-align: left;
cursor: pointer; transition: all 0.15s ease;
}
.anna-voice-item:not(.locked):not(.soon):active { background: rgba(244,114,182,0.16); transform: scale(0.98); }
.anna-voice-item.locked { opacity: 0.6; cursor: pointer; }
.anna-voice-item.soon { opacity: 0.45; cursor: default; }
.anna-voice-item-icon {
width: 32px; height: 32px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(244,114,182,0.18); color: #f472b6; flex-shrink: 0;
}
.anna-voice-item.locked .anna-voice-item-icon { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.45); }
.anna-voice-item-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.anna-voice-item-name {
font-size: 14px; font-weight: 600; color: #f5e8f0;
display: flex; align-items: center; gap: 8px;
}
.anna-voice-item-meta { font-size: 11px; color: rgba(245,232,240,0.5); }
.anna-voice-lock {
display: inline-flex; align-items: center; gap: 3px;
font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
padding: 2px 6px; border-radius: 6px;
background: rgba(251,191,36,0.18); color: #fbbf24;
}
.anna-voice-soon {
font-size: 9px; font-weight: 600;
padding: 2px 6px; border-radius: 6px;
background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.45);
text-transform: uppercase; letter-spacing: 0.05em;
}
.anna-voice-cta-sec {
width: 100%; background: transparent;
border: 1px solid rgba(245,232,240,0.18);
color: rgba(245,232,240,0.75);
font-size: 14px; padding: 12px 16px; border-radius: 12px;
cursor: pointer; margin-top: 4px;
}
/* Player */
.anna-voice-player { padding: 4px 0; text-align: center; }
.anna-voice-orb-wrap {
display: flex; align-items: center; justify-content: center;
margin: 8px 0 18px;
height: 130px;
}
.anna-voice-orb {
width: 110px; height: 110px; border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(244,114,182,0.85) 0%, rgba(232,121,166,0.35) 50%, rgba(232,121,166,0.05) 80%);
box-shadow: 0 0 40px rgba(244,114,182,0.4), inset 0 0 20px rgba(255,255,255,0.15);
transition: transform 0.3s ease;
}
.anna-voice-orb.is-playing {
animation: annaVoiceOrbBreath 4s ease-in-out infinite;
}
@keyframes annaVoiceOrbBreath {
0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(244,114,182,0.4), inset 0 0 20px rgba(255,255,255,0.15); }
50% { transform: scale(1.08); box-shadow: 0 0 60px rgba(244,114,182,0.65), inset 0 0 30px rgba(255,255,255,0.25); }
}
.anna-voice-player-title { font-size: 19px; font-weight: 700; color: #f5e8f0; margin-bottom: 4px; }
.anna-voice-player-cat {
font-size: 11px; color: rgba(244,114,182,0.7);
text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
margin-bottom: 18px;
}
.anna-voice-progress-wrap { padding: 0 4px; margin-bottom: 18px; }
.anna-voice-progress-bar {
width: 100%; height: 4px; border-radius: 3px;
background: rgba(245,232,240,0.12); overflow: hidden;
}
.anna-voice-progress-fill {
height: 100%;
background: linear-gradient(90deg, #f472b6, #f9a8d4);
transition: width 0.2s linear;
width: 0%;
}
.anna-voice-time-row {
display: flex; justify-content: space-between;
font-size: 11px; color: rgba(245,232,240,0.55);
margin-top: 6px; font-variant-numeric: tabular-nums;
}
.anna-voice-controls {
display: flex; align-items: center; justify-content: center; gap: 36px;
margin-bottom: 16px;
}
.anna-voice-btn-sec {
width: 56px; height: 56px; border-radius: 50%;
background: rgba(245,232,240,0.07);
border: none;
color: rgba(245,232,240,0.85);
cursor: pointer; transition: background 0.15s ease;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
}
.anna-voice-btn-sec:active { background: rgba(245,232,240,0.14); }
.anna-voice-btn-sec > svg { display: block; }
.anna-voice-btn-play {
width: 72px; height: 72px; border-radius: 50%;
background: linear-gradient(135deg, #f472b6, #db2777);
border: none; color: #fff;
cursor: pointer;
box-shadow: 0 8px 24px rgba(244,114,182,0.45);
display: inline-flex; align-items: center; justify-content: center;
transition: transform 0.12s ease;
}
.anna-voice-btn-play:active { transform: scale(0.94); }
.anna-voice-speed-row {
display: flex; justify-content: center; gap: 10px;
margin-bottom: 14px;
}
.anna-voice-speed {
font-size: 11.5px; font-weight: 600;
padding: 6px 12px; border-radius: 8px;
background: rgba(245,232,240,0.05);
border: 1px solid rgba(245,232,240,0.12);
color: rgba(245,232,240,0.65);
cursor: pointer;
}
.anna-voice-speed.is-on {
background: rgba(244,114,182,0.18);
border-color: rgba(244,114,182,0.4);
color: #f9a8d4;
}
.anna-voice-player-evidence {
font-size: 10.5px; color: rgba(245,232,240,0.4);
text-align: center; margin-bottom: 16px; line-height: 1.4;
}
.anna-voice-player-nav { display: flex; gap: 10px; }
/* Light theme */
body.light .anna-voice-card {
background: linear-gradient(180deg, #fff, #fdf2f8);
color: #831843;
border-color: rgba(244,114,182,0.32);
}
body.light .anna-voice-h { color: #be185d; }
body.light .anna-voice-sub { color: rgba(131,24,67,0.65); }
body.light .anna-voice-cat-head { color: rgba(190,24,93,0.7); }
body.light .anna-voice-item {
background: rgba(244,114,182,0.06);
border-color: rgba(244,114,182,0.22);
color: #831843;
}
body.light .anna-voice-item-name { color: #831843; }
body.light .anna-voice-item-meta { color: rgba(131,24,67,0.5); }
body.light .anna-voice-cta-sec {
border-color: rgba(131,24,67,0.2);
color: rgba(131,24,67,0.7);
}
body.light .anna-voice-player-title { color: #831843; }
body.light .anna-voice-player-cat { color: #be185d; }
body.light .anna-voice-time-row { color: rgba(131,24,67,0.55); }
body.light .anna-voice-btn-sec { background: rgba(131,24,67,0.06); color: rgba(131,24,67,0.85); }
body.light .anna-voice-btn-lbl { color: rgba(131,24,67,0.6); }
body.light .anna-voice-speed {
background: rgba(131,24,67,0.04);
border-color: rgba(131,24,67,0.14);
color: rgba(131,24,67,0.7);
}
body.light .anna-voice-speed.is-on {
background: rgba(244,114,182,0.14);
border-color: rgba(244,114,182,0.4);
color: #be185d;
}
body.light .anna-voice-player-evidence { color: rgba(131,24,67,0.45); }
/* ─── Anna Phase 2.A.5 — «Письмо, которое не отправишь» ───────────── */
.anna-jr-letter-entry {
display: flex; align-items: center; gap: 12px;
width: 100%; margin-top: 8px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(244, 114, 182, 0.10), rgba(232, 121, 166, 0.06));
border: 1px solid rgba(244, 114, 182, 0.30);
border-radius: 12px;
color: #fff; text-align: left;
cursor: pointer; transition: background 0.15s ease;
}
.anna-jr-letter-entry:active { background: rgba(244, 114, 182, 0.18); }
.anna-jr-letter-entry-ico { color: #f472b6; flex-shrink: 0; display: inline-flex; align-items: center; }
.anna-jr-letter-entry-l { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.anna-jr-letter-entry-name { font-size: 14px; font-weight: 600; color: #f9a8d4; }
.anna-jr-letter-entry-sub { font-size: 11.5px; color: rgba(255,255,255,0.55); }
.anna-jr-letter-entry-arrow { font-size: 22px; color: rgba(244,114,182,0.6); flex-shrink: 0; font-weight: 300; line-height: 1; }
body.light .anna-jr-letter-entry {
background: linear-gradient(135deg, rgba(244,114,182,0.08), rgba(232,121,166,0.03));
border-color: rgba(244,114,182,0.32);
color: #1e1b4b;
}
body.light .anna-jr-letter-entry-name { color: #be185d; }
body.light .anna-jr-letter-entry-sub { color: rgba(30,27,75,0.55); }
body.light .anna-jr-letter-entry-arrow { color: rgba(190,24,93,0.55); }
.anna-letter-wrap {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 16px;
}
.anna-letter-bg { position: absolute; inset: 0; background: rgba(20, 8, 18, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.anna-letter-card {
position: relative; z-index: 1;
width: 100%; max-width: 440px;
max-height: calc(100vh - 32px); overflow-y: auto;
background: linear-gradient(180deg, #1f1424 0%, #160e1c 100%);
border: 1px solid rgba(244, 114, 182, 0.25);
border-radius: 22px;
padding: 20px 18px;
box-shadow: 0 20px 60px rgba(244, 114, 182, 0.16);
color: #f5e8f0;
}
.anna-letter-loading, .anna-letter-err {
padding: 36px 16px; text-align: center;
color: rgba(245,232,240,0.65); font-size: 14px;
}
.anna-letter-err { color: #fca5a5; }
.anna-letter-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 14px;
}
.anna-letter-ttl {
flex: 1;
font-size: 17px; font-weight: 700; color: #f9a8d4;
text-align: center;
}
.anna-letter-back, .anna-letter-close-x {
width: 32px; height: 32px; flex-shrink: 0;
background: transparent; border: none; color: rgba(245,232,240,0.55);
font-size: 20px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px;
}
.anna-letter-back:active, .anna-letter-close-x:active { background: rgba(245,232,240,0.08); }
.anna-letter-sub {
font-size: 13px; color: rgba(245,232,240,0.6);
margin-bottom: 12px; text-align: center; line-height: 1.45;
}
.anna-letter-quota {
font-size: 11.5px; font-weight: 600;
color: rgba(244,114,182,0.7);
text-align: center; text-transform: uppercase; letter-spacing: 0.05em;
padding: 4px 10px;
margin-bottom: 14px;
}
.anna-letter-cta-new {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 14px 16px;
background: linear-gradient(135deg, #f472b6, #db2777);
border: none; color: #fff;
font-size: 15px; font-weight: 700;
border-radius: 14px;
box-shadow: 0 6px 20px rgba(244,114,182,0.35);
cursor: pointer;
transition: transform 0.12s ease;
margin-bottom: 8px;
}
.anna-letter-cta-new:active { transform: scale(0.98); }
.anna-letter-cta-step {
display: flex; align-items: center; justify-content: center; gap: 8px;
flex: 1; padding: 12px 16px;
background: linear-gradient(135deg, #f472b6, #db2777);
border: none; color: #fff;
font-size: 14px; font-weight: 600;
border-radius: 12px;
cursor: pointer;
}
.anna-letter-btn-sec {
width: 100%; background: transparent;
border: 1px solid rgba(245,232,240,0.18);
color: rgba(245,232,240,0.75);
font-size: 14px; padding: 11px 14px; border-radius: 12px;
cursor: pointer; margin-top: 4px;
}
.anna-letter-btn-sec:active { background: rgba(245,232,240,0.06); }
.anna-letter-btn-del { color: rgba(252,165,165,0.85); border-color: rgba(252,165,165,0.30); display: flex; align-items: center; justify-content: center; gap: 6px; }
.anna-letter-blocked {
padding: 14px 12px; margin-bottom: 12px;
background: rgba(251,191,36,0.08);
border: 1px solid rgba(251,191,36,0.30);
border-radius: 10px;
font-size: 13px; color: #fbbf24; text-align: center;
}
.anna-letter-hist-ttl {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.10em; text-transform: uppercase;
color: rgba(244,114,182,0.7);
padding: 16px 4px 8px;
}
.anna-letter-hist-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.anna-letter-hist-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 11px 12px;
background: rgba(244,114,182,0.06);
border: 1px solid rgba(244,114,182,0.14);
border-radius: 10px;
color: #f5e8f0; text-align: left;
cursor: pointer;
}
.anna-letter-hist-row:active { background: rgba(244,114,182,0.14); }
.anna-letter-hist-row-name { font-size: 14px; font-weight: 600; }
.anna-letter-hist-row-date { font-size: 11px; color: rgba(245,232,240,0.5); flex-shrink: 0; }
.anna-letter-privacy {
font-size: 11px; color: rgba(245,232,240,0.45);
text-align: center; line-height: 1.5;
margin-top: 14px; padding: 10px 8px;
border-top: 1px solid rgba(245,232,240,0.06);
}
.anna-letter-pick-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
margin-bottom: 12px;
}
.anna-letter-pick {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 14px 10px;
background: rgba(244,114,182,0.06);
border: 1px solid rgba(244,114,182,0.18);
border-radius: 12px;
color: #f5e8f0; cursor: pointer;
min-height: 78px;
transition: all 0.12s ease;
}
.anna-letter-pick:active { background: rgba(244,114,182,0.14); transform: scale(0.97); }
.anna-letter-pick-ico { color: #f472b6; }
.anna-letter-pick-lbl { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.25; }
.anna-letter-grief-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.anna-letter-grief-opt {
width: 100%; padding: 12px 14px;
background: rgba(244,114,182,0.06);
border: 1px solid rgba(244,114,182,0.18);
border-radius: 10px;
color: #f5e8f0; text-align: left;
font-size: 14px; cursor: pointer;
}
.anna-letter-grief-opt:active { background: rgba(244,114,182,0.14); }
.anna-letter-grief-redirect {
padding: 16px 14px; margin: 8px 0;
background: linear-gradient(135deg, rgba(244,114,182,0.10), rgba(232,121,166,0.04));
border: 1px solid rgba(244,114,182,0.25);
border-radius: 14px;
font-size: 14px; line-height: 1.55; color: #f5e8f0;
}
.anna-letter-grounding {
padding: 18px 16px; margin: 8px 0 14px;
background: linear-gradient(135deg, rgba(244,114,182,0.10), rgba(232,121,166,0.04));
border: 1px solid rgba(244,114,182,0.25);
border-radius: 14px;
font-size: 14px; line-height: 1.6; color: #f5e8f0;
}
.anna-letter-input-line {
width: 100%; padding: 12px 14px;
background: rgba(245,232,240,0.04);
border: 1px solid rgba(244,114,182,0.22);
border-radius: 12px;
color: #f5e8f0; font-size: 15px;
outline: none; margin-bottom: 10px;
-webkit-appearance: none;
}
.anna-letter-input-line:focus { border-color: rgba(244,114,182,0.5); }
.anna-letter-step-prog {
flex: 1; font-size: 11.5px; font-weight: 700;
letter-spacing: 0.10em; text-transform: uppercase;
color: rgba(244,114,182,0.7);
text-align: center;
}
.anna-letter-step-ttl { font-size: 19px; font-weight: 700; color: #f9a8d4; margin-bottom: 6px; }
.anna-letter-step-sub { font-size: 13px; color: rgba(245,232,240,0.65); margin-bottom: 12px; line-height: 1.5; }
.anna-letter-textarea {
width: 100%; min-height: 180px; max-height: 380px;
padding: 14px 14px;
background: rgba(245,232,240,0.04);
border: 1px solid rgba(244,114,182,0.22);
border-radius: 12px;
color: #f5e8f0; font-size: 15px; line-height: 1.5;
outline: none; resize: vertical;
font-family: inherit;
-webkit-appearance: none;
}
.anna-letter-textarea:focus { border-color: rgba(244,114,182,0.5); }
.anna-letter-step-actions {
display: flex; gap: 10px; margin-top: 14px;
}
.anna-letter-step-actions .anna-letter-btn-sec { flex: 1; margin-top: 0; max-width: 110px; }
.anna-letter-compile-anim {
padding: 50px 18px; text-align: center;
}
.anna-letter-compile-orb {
width: 80px; height: 80px; border-radius: 50%;
margin: 0 auto 18px;
background: radial-gradient(circle at 30% 30%, rgba(244,114,182,0.9), rgba(232,121,166,0.3) 60%, rgba(232,121,166,0.05) 90%);
box-shadow: 0 0 40px rgba(244,114,182,0.4);
animation: annaLetterCompileOrb 2.4s ease-in-out infinite;
}
@keyframes annaLetterCompileOrb {
0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(244,114,182,0.4); }
50% { transform: scale(1.10); box-shadow: 0 0 60px rgba(244,114,182,0.7); }
}
.anna-letter-compile-msg {
font-size: 14px; color: rgba(245,232,240,0.7);
font-style: italic;
}
.anna-letter-result-text {
padding: 18px 16px;
background: linear-gradient(135deg, rgba(244,114,182,0.06), rgba(232,121,166,0.02));
border: 1px solid rgba(244,114,182,0.22);
border-radius: 14px;
font-size: 15px; line-height: 1.7; color: #f5e8f0;
white-space: pre-wrap;
margin-bottom: 12px;
font-family: 'Georgia', 'Times New Roman', serif;
}
.anna-letter-result-actions { display: flex; gap: 10px; margin-top: 8px; }
.anna-letter-voice-loading {
padding: 18px 14px; text-align: center;
color: rgba(245,232,240,0.6); font-size: 13px;
font-style: italic;
}
.anna-letter-player {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: rgba(244,114,182,0.08);
border: 1px solid rgba(244,114,182,0.24);
border-radius: 12px;
margin-bottom: 8px;
}
.anna-letter-pp {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, #f472b6, #db2777);
border: none; color: #fff; cursor: pointer;
box-shadow: 0 4px 12px rgba(244,114,182,0.35);
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.anna-letter-pp:active { transform: scale(0.94); }
.anna-letter-player-prog {
flex: 1; height: 4px; border-radius: 2px;
background: rgba(245,232,240,0.12); overflow: hidden;
}
.anna-letter-player-prog #anna-letter-prog-fill {
height: 100%;
background: linear-gradient(90deg, #f472b6, #f9a8d4);
transition: width 0.2s linear;
width: 0%;
}
.anna-letter-player-time {
font-size: 11px; color: rgba(245,232,240,0.55);
font-variant-numeric: tabular-nums; flex-shrink: 0;
}
/* Light theme — Anna Letter */
body.light .anna-letter-card {
background: linear-gradient(180deg, #fff, #fdf2f8);
color: #831843; border-color: rgba(244,114,182,0.32);
}
body.light .anna-letter-ttl { color: #be185d; }
body.light .anna-letter-sub { color: rgba(131,24,67,0.65); }
body.light .anna-letter-hist-ttl { color: rgba(190,24,93,0.7); }
body.light .anna-letter-hist-row { background: rgba(244,114,182,0.06); border-color: rgba(244,114,182,0.22); color: #831843; }
body.light .anna-letter-hist-row-date { color: rgba(131,24,67,0.55); }
body.light .anna-letter-pick { background: rgba(244,114,182,0.06); border-color: rgba(244,114,182,0.22); color: #831843; }
body.light .anna-letter-grief-opt { background: rgba(244,114,182,0.06); border-color: rgba(244,114,182,0.22); color: #831843; }
body.light .anna-letter-grief-redirect, body.light .anna-letter-grounding {
background: linear-gradient(135deg, rgba(244,114,182,0.08), rgba(232,121,166,0.03));
border-color: rgba(244,114,182,0.30); color: #831843;
}
body.light .anna-letter-step-ttl { color: #be185d; }
body.light .anna-letter-step-sub { color: rgba(131,24,67,0.65); }
body.light .anna-letter-textarea, body.light .anna-letter-input-line {
background: rgba(244,114,182,0.04); border-color: rgba(244,114,182,0.30); color: #831843;
}
body.light .anna-letter-result-text {
background: linear-gradient(135deg, rgba(244,114,182,0.05), rgba(232,121,166,0.02));
border-color: rgba(244,114,182,0.25); color: #831843;
}
body.light .anna-letter-btn-sec { border-color: rgba(131,24,67,0.2); color: rgba(131,24,67,0.7); }
body.light .anna-letter-quota { color: #be185d; }
body.light .anna-letter-privacy { color: rgba(131,24,67,0.5); }
/* ─── Anna Phase 2.A.3 final — Express radar + Full radar ──────────── */
.anna-jr-express-entry {
display: flex; align-items: center; gap: 12px;
width: 100%; margin-top: 8px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(196,181,253,0.06));
border: 1px solid rgba(167,139,250,0.30);
border-radius: 12px;
color: #fff; text-align: left;
cursor: pointer; transition: background 0.15s ease;
}
.anna-jr-express-entry:active { background: rgba(167,139,250,0.18); }
.anna-jr-express-entry-ico { color: #a78bfa; flex-shrink: 0; display: inline-flex; align-items: center; }
.anna-jr-express-entry-l { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.anna-jr-express-entry-name { font-size: 14px; font-weight: 600; color: #c4b5fd; }
.anna-jr-express-entry-sub { font-size: 11.5px; color: rgba(255,255,255,0.55); }
.anna-jr-express-entry-arrow { font-size: 22px; color: rgba(167,139,250,0.6); flex-shrink: 0; font-weight: 300; line-height: 1; }
body.light .anna-jr-express-entry { background: linear-gradient(135deg, rgba(167,139,250,0.08), rgba(196,181,253,0.03)); border-color: rgba(167,139,250,0.32); color: #1e1b4b; }
body.light .anna-jr-express-entry-name { color: #6d28d9; }
body.light .anna-jr-express-entry-sub { color: rgba(30,27,75,0.55); }
body.light .anna-jr-express-entry-arrow { color: rgba(109,40,217,0.55); }
.anna-tests-radar-cta {
display: flex; align-items: center; gap: 12px;
width: 100%; padding: 12px 14px; margin: 6px 0 12px;
background: linear-gradient(135deg, rgba(167,139,250,0.16), rgba(244,114,182,0.08));
border: 1px solid rgba(167,139,250,0.40);
border-radius: 12px; color: #fff; text-align: left;
cursor: pointer; transition: background 0.15s ease;
}
.anna-tests-radar-cta:active { background: rgba(167,139,250,0.22); }
.anna-tests-radar-cta > svg { color: #a78bfa; flex-shrink: 0; }
.anna-tests-radar-l { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.anna-tests-radar-name { font-size: 14px; font-weight: 700; color: #c4b5fd; }
.anna-tests-radar-sub { font-size: 11.5px; color: rgba(255,255,255,0.60); }
.anna-tests-radar-arrow { font-size: 22px; color: rgba(167,139,250,0.7); flex-shrink: 0; font-weight: 300; line-height: 1; }
body.light .anna-tests-radar-cta {
background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(244,114,182,0.05));
border-color: rgba(167,139,250,0.35); color: #1e1b4b;
}
body.light .anna-tests-radar-name { color: #6d28d9; }
body.light .anna-tests-radar-sub { color: rgba(30,27,75,0.65); }
.anna-radar-wrap {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 16px;
}
.anna-radar-bg { position: absolute; inset: 0; background: rgba(20, 8, 18, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.anna-radar-card {
position: relative; z-index: 1;
width: 100%; max-width: 460px;
max-height: calc(100vh - 32px); overflow-y: auto;
background: linear-gradient(180deg, #1f1424 0%, #160e1c 100%);
border: 1px solid rgba(167,139,250,0.30);
border-radius: 22px;
padding: 20px 18px;
box-shadow: 0 20px 60px rgba(167,139,250,0.18);
color: #f5e8f0;
}
.anna-radar-loading, .anna-radar-err {
padding: 40px 16px; text-align: center;
color: rgba(245,232,240,0.65); font-size: 14px;
}
.anna-radar-err { color: #fca5a5; }
.anna-radar-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 14px;
}
.anna-radar-ttl {
flex: 1; font-size: 17px; font-weight: 700; color: #c4b5fd;
text-align: center;
}
.anna-radar-close-x {
width: 32px; height: 32px; flex-shrink: 0;
background: transparent; border: none; color: rgba(245,232,240,0.55);
font-size: 20px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
}
.anna-radar-close-x:active { background: rgba(245,232,240,0.08); }
.anna-radar-sub {
font-size: 13px; color: rgba(245,232,240,0.65);
margin-bottom: 14px; text-align: center; line-height: 1.45;
}
.anna-radar-step-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.anna-radar-step-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: rgba(167,139,250,0.06);
border: 1px solid rgba(167,139,250,0.18);
border-radius: 10px;
font-size: 13px; color: rgba(245,232,240,0.85);
}
.anna-radar-step-num {
width: 22px; height: 22px; border-radius: 50%;
background: rgba(167,139,250,0.25); color: #c4b5fd;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.anna-radar-cta {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 13px 16px;
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
border: none; color: #fff;
font-size: 15px; font-weight: 700;
border-radius: 14px;
box-shadow: 0 6px 20px rgba(167,139,250,0.35);
cursor: pointer; margin-bottom: 8px;
}
.anna-radar-cta:active { transform: scale(0.98); }
.anna-radar-btn-sec {
width: 100%; background: transparent;
border: 1px solid rgba(245,232,240,0.18);
color: rgba(245,232,240,0.75);
font-size: 14px; padding: 11px 14px; border-radius: 12px;
cursor: pointer; margin-top: 4px;
}
.anna-radar-btn-sec:active { background: rgba(245,232,240,0.06); }
.anna-radar-step-prog {
flex: 1; font-size: 11.5px; font-weight: 700;
letter-spacing: 0.05em; color: rgba(167,139,250,0.8);
text-align: center;
}
.anna-radar-q-prog {
width: 100%; height: 4px; border-radius: 3px;
background: rgba(245,232,240,0.10);
margin-bottom: 18px; overflow: hidden;
}
.anna-radar-q-prog-fill {
height: 100%;
background: linear-gradient(90deg, #a78bfa, #c4b5fd);
transition: width 0.3s ease; width: 0%;
}
.anna-radar-q-instr {
font-size: 12px; color: rgba(245,232,240,0.55);
margin-bottom: 8px;
}
.anna-radar-q-text {
font-size: 16px; font-weight: 600; color: #f5e8f0;
line-height: 1.45; margin-bottom: 16px;
}
.anna-radar-radio-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.anna-radar-radio {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
background: rgba(167,139,250,0.06);
border: 1px solid rgba(167,139,250,0.18);
border-radius: 10px;
color: #f5e8f0; text-align: left;
font-size: 14px; cursor: pointer;
transition: all 0.12s ease;
}
.anna-radar-radio:active { background: rgba(167,139,250,0.14); transform: scale(0.99); }
.anna-radar-radio.is-on { background: rgba(167,139,250,0.20); border-color: rgba(167,139,250,0.5); }
.anna-radar-radio-dot {
width: 16px; height: 16px; border-radius: 50%;
border: 1.5px solid rgba(167,139,250,0.5);
flex-shrink: 0; display: inline-block; position: relative;
}
.anna-radar-radio.is-on .anna-radar-radio-dot::after {
content: ''; position: absolute; inset: 3px;
border-radius: 50%; background: #a78bfa;
}
.anna-radar-radio-lbl { flex: 1; }
.anna-radar-svg-wrap {
display: flex; align-items: center; justify-content: center;
margin: 4px 0 14px;
}
.anna-radar-svg { max-width: 100%; height: auto; }
.anna-radar-legend {
display: flex; flex-direction: column; gap: 4px;
padding: 10px 12px;
background: rgba(167,139,250,0.06);
border: 1px solid rgba(167,139,250,0.16);
border-radius: 10px;
margin-bottom: 12px;
}
.anna-radar-legend-row {
display: flex; align-items: center; gap: 10px;
font-size: 12.5px; color: #f5e8f0;
}
.anna-radar-legend-row.is-empty { color: rgba(245,232,240,0.40); }
.anna-radar-legend-dot {
width: 10px; height: 10px; border-radius: 50%;
flex-shrink: 0;
}
.anna-radar-legend-dot.is-empty {
background: transparent; border: 1.5px dashed rgba(245,232,240,0.30);
}
.anna-radar-legend-lbl { flex: 1; font-weight: 500; }
.anna-radar-legend-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.anna-radar-hint, .anna-radar-coverage {
font-size: 11.5px; color: rgba(245,232,240,0.55);
text-align: center; margin-bottom: 10px; line-height: 1.5;
font-style: italic;
}
.anna-radar-narrative-mount { margin: 8px 0 12px; }
.anna-radar-narrative-loading {
padding: 14px 12px; text-align: center;
font-size: 13px; color: rgba(245,232,240,0.60); font-style: italic;
}
.anna-radar-empty-hint {
padding: 14px 12px; text-align: center;
font-size: 13px; color: rgba(245,232,240,0.55);
}
.anna-radar-narrative {
padding: 14px 14px;
background: linear-gradient(135deg, rgba(244,114,182,0.10), rgba(232,121,166,0.04));
border: 1px solid rgba(244,114,182,0.22);
border-radius: 12px;
}
.anna-radar-narrative-h {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.10em; text-transform: uppercase;
color: rgba(244,114,182,0.75);
margin-bottom: 7px;
}
.anna-radar-narrative-body {
font-size: 14px; line-height: 1.55; color: #f5e8f0;
}
body.light .anna-radar-card {
background: linear-gradient(180deg, #fff, #f5f3ff);
color: #1e1b4b; border-color: rgba(167,139,250,0.32);
}
body.light .anna-radar-ttl { color: #6d28d9; }
body.light .anna-radar-sub { color: rgba(30,27,75,0.65); }
body.light .anna-radar-step-item { background: rgba(167,139,250,0.06); border-color: rgba(167,139,250,0.22); color: #1e1b4b; }
body.light .anna-radar-step-num { background: rgba(167,139,250,0.20); color: #6d28d9; }
body.light .anna-radar-radio { background: rgba(167,139,250,0.05); border-color: rgba(167,139,250,0.20); color: #1e1b4b; }
body.light .anna-radar-radio.is-on { background: rgba(167,139,250,0.15); border-color: rgba(167,139,250,0.45); }
body.light .anna-radar-radio-dot { border-color: rgba(109,40,217,0.5); }
body.light .anna-radar-radio.is-on .anna-radar-radio-dot::after { background: #8b5cf6; }
body.light .anna-radar-legend { background: rgba(167,139,250,0.05); border-color: rgba(167,139,250,0.20); }
body.light .anna-radar-legend-row { color: #1e1b4b; }
body.light .anna-radar-legend-row.is-empty { color: rgba(30,27,75,0.40); }
body.light .anna-radar-hint, body.light .anna-radar-coverage { color: rgba(30,27,75,0.60); }
body.light .anna-radar-narrative { background: linear-gradient(135deg, rgba(244,114,182,0.08), rgba(232,121,166,0.03)); border-color: rgba(244,114,182,0.25); }
body.light .anna-radar-narrative-h { color: #be185d; }
body.light .anna-radar-narrative-body { color: #1e1b4b; }
body.light .anna-radar-btn-sec { border-color: rgba(30,27,75,0.20); color: rgba(30,27,75,0.70); }
body.light .anna-radar-svg text { fill: rgba(30,27,75,0.85) !important; }
/* ─── Stress emoji-row (UI Designer 26.05.2026, breaks WHO-5 carryover bias) ── */
.anna-stress-transition {
text-align: center; padding: 8px 12px;
font-size: 13px; font-weight: 500;
color: #f9a8d4;
background: linear-gradient(135deg, rgba(244,114,182,0.10), rgba(232,121,166,0.04));
border: 1px solid rgba(244,114,182,0.22);
border-radius: 10px;
margin-bottom: 14px;
}
.anna-stress-scale {
display: flex; flex-direction: column; gap: 10px;
padding: 4px 0 8px;
}
.anna-stress-scale__track {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
padding: 8px;
background: rgba(244,114,182,0.06);
border: 1px solid rgba(244,114,182,0.18);
border-radius: 16px;
}
.anna-stress-cell {
min-height: 64px; min-width: 44px;
padding: 10px 0;
border-radius: 12px;
border: 2px solid transparent;
background: rgba(255,255,255,0.04);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 200ms ease;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.anna-stress-cell__emoji {
font-size: 28px; line-height: 1;
filter: grayscale(0.4) opacity(0.7);
transition: filter 200ms ease, transform 200ms ease;
}
.anna-stress-cell:active {
transform: scale(0.93);
background: rgba(244,114,182,0.18);
}
.anna-stress-cell[aria-checked="true"] {
border-color: #f472b6;
background: linear-gradient(135deg, rgba(244,114,182,0.28), rgba(244,114,182,0.12));
box-shadow: 0 0 0 4px rgba(244,114,182,0.18), 0 6px 16px -4px rgba(244,114,182,0.45);
transform: translateY(-2px);
}
.anna-stress-cell[aria-checked="true"] .anna-stress-cell__emoji {
filter: grayscale(0) opacity(1);
transform: scale(1.15);
}
.anna-stress-scale__anchors {
display: flex; justify-content: space-between;
padding: 0 10px;
font-size: 11.5px;
color: rgba(245,232,240,0.55);
letter-spacing: 0.02em;
}
.anna-stress-scale__readout {
text-align: center; font-size: 14px; font-weight: 500;
color: #f472b6; min-height: 20px; margin: 4px 0 0;
transition: opacity 200ms ease;
}
.anna-stress-scale__readout[data-empty="true"] {
color: rgba(245,232,240,0.40); font-weight: 400;
}
/* Light theme */
body.light .anna-stress-transition {
background: linear-gradient(135deg, rgba(244,114,182,0.08), rgba(232,121,166,0.03));
border-color: rgba(244,114,182,0.25); color: #be185d;
}
body.light .anna-stress-scale__track {
background: rgba(244,114,182,0.06); border-color: rgba(244,114,182,0.22);
}
body.light .anna-stress-cell { background: #fff; }
body.light .anna-stress-cell__emoji { filter: grayscale(0.3) opacity(0.75); }
body.light .anna-stress-cell[aria-checked="true"] {
background: linear-gradient(135deg, #fce7f3, #fbcfe8);
box-shadow: 0 0 0 4px rgba(244,114,182,0.22), 0 6px 16px -4px rgba(244,114,182,0.5);
}
body.light .anna-stress-scale__anchors { color: rgba(131,24,67,0.60); }
body.light .anna-stress-scale__readout[data-empty="true"] { color: rgba(131,24,67,0.45); }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.anna-stress-cell, .anna-stress-cell__emoji, .anna-stress-scale__readout { transition: none; }
.anna-stress-cell[aria-checked="true"] { transform: none; }
}
/* ─── Dmitry Phase 2 Sprint 1 — Совет 3-х менторов ────────────────── */
.dmitry-tools-btn { color: #2563eb !important; }
.dmitry-tools-wrap {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: flex-end; justify-content: center;
}
.dmitry-tools-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dmitry-tools-sheet {
position: relative; z-index: 1;
width: 100%; max-width: 440px;
background: linear-gradient(180deg, #0f1729 0%, #0a0f1f 100%);
border-top: 1px solid rgba(37,99,235,0.30);
border-radius: 22px 22px 0 0;
padding: 12px 18px 28px;
color: #e0e7ff;
box-shadow: 0 -20px 60px rgba(37,99,235,0.20);
animation: dmitryToolsSlide 0.22s ease-out;
}
@keyframes dmitryToolsSlide {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.dmitry-tools-handle {
width: 36px; height: 4px; border-radius: 2px;
background: rgba(255,255,255,0.20);
margin: 0 auto 14px;
}
.dmitry-tools-h {
font-size: 13px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(123,167,247,0.7);
text-align: center; margin-bottom: 12px;
}
.dmitry-tool-item {
display: flex; align-items: center; gap: 12px;
width: 100%; padding: 14px 14px;
background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(123,167,247,0.06));
border: 1px solid rgba(37,99,235,0.30);
border-radius: 14px;
color: #fff; text-align: left;
cursor: pointer; transition: background 0.15s ease;
}
.dmitry-tool-item:active { background: rgba(37,99,235,0.22); }
.dmitry-tool-ico { color: #7ba7f7; flex-shrink: 0; display: inline-flex; }
.dmitry-tool-l { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dmitry-tool-name { font-size: 15px; font-weight: 700; color: #c7d8ff; }
.dmitry-tool-sub { font-size: 12px; color: rgba(255,255,255,0.55); }
.dmitry-tool-arrow { font-size: 22px; color: rgba(123,167,247,0.6); flex-shrink: 0; font-weight: 300; line-height: 1; }
.dmitry-tool-soon {
font-size: 11px; color: rgba(255,255,255,0.40);
text-align: center; margin-top: 14px; font-style: italic;
}
.dmitry-board-wrap {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 16px;
}
.dmitry-board-bg { position: absolute; inset: 0; background: rgba(5, 10, 25, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dmitry-board-card {
position: relative; z-index: 1;
width: 100%; max-width: 460px;
max-height: calc(100vh - 32px); overflow-y: auto;
background: linear-gradient(180deg, #0f1729 0%, #0a0f1f 100%);
border: 1px solid rgba(37,99,235,0.30);
border-radius: 22px;
padding: 20px 18px;
box-shadow: 0 20px 60px rgba(37,99,235,0.20);
color: #e0e7ff;
}
.dmitry-board-loading, .dmitry-board-err {
padding: 36px 16px; text-align: center;
color: rgba(224,231,255,0.65); font-size: 14px;
}
.dmitry-board-err { color: #fca5a5; }
.dmitry-board-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 14px;
}
.dmitry-board-ttl {
flex: 1; font-size: 17px; font-weight: 700; color: #c7d8ff;
text-align: center;
}
.dmitry-board-back, .dmitry-board-close-x {
width: 32px; height: 32px; flex-shrink: 0;
background: transparent; border: none; color: rgba(224,231,255,0.55);
font-size: 20px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
}
.dmitry-board-back:active, .dmitry-board-close-x:active { background: rgba(224,231,255,0.08); }
.dmitry-board-sub {
font-size: 13px; color: rgba(224,231,255,0.65);
margin-bottom: 12px; text-align: center; line-height: 1.5;
}
.dmitry-board-quota {
font-size: 11.5px; font-weight: 600;
color: rgba(123,167,247,0.7);
text-align: center; text-transform: uppercase; letter-spacing: 0.05em;
padding: 4px 10px; margin-bottom: 14px;
}
.dmitry-board-cta {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 14px 16px;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
border: none; color: #fff;
font-size: 15px; font-weight: 700;
border-radius: 14px;
box-shadow: 0 6px 20px rgba(37,99,235,0.35);
cursor: pointer; transition: transform 0.12s ease;
margin-bottom: 8px;
}
.dmitry-board-cta:active { transform: scale(0.98); }
.dmitry-board-btn-sec {
width: 100%; background: transparent;
border: 1px solid rgba(224,231,255,0.18);
color: rgba(224,231,255,0.75);
font-size: 14px; padding: 11px 14px; border-radius: 12px;
cursor: pointer; margin-top: 4px;
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.dmitry-board-btn-sec:active { background: rgba(224,231,255,0.06); }
.dmitry-board-blocked {
padding: 14px 12px; margin-bottom: 12px;
background: rgba(251,191,36,0.08);
border: 1px solid rgba(251,191,36,0.30);
border-radius: 10px;
font-size: 13px; color: #fbbf24; text-align: center;
}
.dmitry-board-hist-ttl {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.10em; text-transform: uppercase;
color: rgba(123,167,247,0.7);
padding: 16px 4px 8px;
}
.dmitry-board-hist-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.dmitry-board-hist-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 11px 12px;
background: rgba(37,99,235,0.06);
border: 1px solid rgba(37,99,235,0.18);
border-radius: 10px;
color: #e0e7ff; text-align: left;
cursor: pointer;
}
.dmitry-board-hist-row:active { background: rgba(37,99,235,0.14); }
.dmitry-board-hist-row-q { font-size: 13px; font-weight: 500; flex: 1; }
.dmitry-board-hist-row-date { font-size: 11px; color: rgba(224,231,255,0.5); flex-shrink: 0; }
.dmitry-board-pick-counter {
font-size: 12.5px; font-weight: 600;
color: rgba(123,167,247,0.85);
text-align: center; margin-bottom: 12px;
}
.dmitry-board-school-h {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.10em; text-transform: uppercase;
color: rgba(123,167,247,0.7);
padding: 12px 4px 6px;
}
.dmitry-board-pick-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
margin-bottom: 4px;
}
.dmitry-board-persona {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 10px 6px;
background: rgba(37,99,235,0.06);
border: 2px solid rgba(37,99,235,0.18);
border-radius: 12px;
color: #e0e7ff; cursor: pointer;
min-height: 92px;
transition: all 0.12s ease;
}
.dmitry-board-persona:active { background: rgba(37,99,235,0.14); transform: scale(0.97); }
.dmitry-board-persona.is-sel {
background: linear-gradient(135deg, rgba(37,99,235,0.30), rgba(123,167,247,0.14));
border-color: #2563eb;
box-shadow: 0 0 0 4px rgba(37,99,235,0.18), 0 6px 14px -4px rgba(37,99,235,0.4);
}
.dmitry-board-persona-glyph {
width: 28px; height: 28px; border-radius: 50%;
background: rgba(37,99,235,0.25); color: #c7d8ff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
margin-bottom: 2px;
}
.dmitry-board-persona.is-sel .dmitry-board-persona-glyph { background: #2563eb; color: #fff; }
.dmitry-board-persona-name { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.2; }
.dmitry-board-persona-tag { font-size: 9.5px; color: rgba(224,231,255,0.55); text-align: center; line-height: 1.2; }
.dmitry-board-textarea {
width: 100%; min-height: 140px; max-height: 320px;
padding: 14px;
background: rgba(224,231,255,0.04);
border: 1px solid rgba(37,99,235,0.22);
border-radius: 12px;
color: #e0e7ff; font-size: 15px; line-height: 1.5;
outline: none; resize: vertical;
font-family: inherit; -webkit-appearance: none;
margin-bottom: 12px;
}
.dmitry-board-textarea:focus { border-color: rgba(37,99,235,0.5); }
.dmitry-board-compile {
padding: 50px 18px; text-align: center;
}
.dmitry-board-compile-orb {
width: 70px; height: 70px; border-radius: 50%;
margin: 0 auto 16px;
background: radial-gradient(circle at 30% 30%, rgba(37,99,235,0.9), rgba(123,167,247,0.3) 60%, rgba(37,99,235,0.05) 90%);
box-shadow: 0 0 40px rgba(37,99,235,0.5);
animation: dmitryCompileOrb 2.4s ease-in-out infinite;
}
@keyframes dmitryCompileOrb {
0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(37,99,235,0.5); }
50% { transform: scale(1.10); box-shadow: 0 0 60px rgba(37,99,235,0.8); }
}
.dmitry-board-compile-msg {
font-size: 14px; color: rgba(224,231,255,0.75);
font-style: italic; margin-bottom: 14px;
}
.dmitry-board-think-list {
display: flex; flex-direction: column; gap: 8px;
max-width: 240px; margin: 0 auto;
}
.dmitry-board-think-row {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px;
background: rgba(37,99,235,0.08);
border-radius: 8px;
font-size: 12px; color: rgba(224,231,255,0.7);
text-transform: capitalize;
}
.dmitry-board-think-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #7ba7f7;
animation: dmitryDotPulse 1.4s ease-in-out infinite;
}
@keyframes dmitryDotPulse {
0%, 100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
.dmitry-board-q-bubble {
padding: 12px 14px; margin-bottom: 14px;
background: rgba(37,99,235,0.08);
border-left: 3px solid #2563eb;
border-radius: 8px;
font-size: 14px; line-height: 1.5; color: #e0e7ff;
font-style: italic;
}
.dmitry-board-reply-card {
padding: 14px;
background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(123,167,247,0.03));
border: 1px solid rgba(37,99,235,0.22);
border-radius: 14px;
margin-bottom: 10px;
}
.dmitry-board-reply-card.school-en {
background: linear-gradient(135deg, rgba(168,85,247,0.08), rgba(196,181,253,0.03));
border-color: rgba(168,85,247,0.22);
}
.dmitry-board-reply-h {
display: flex; align-items: center; gap: 8px;
margin-bottom: 8px;
}
.dmitry-board-reply-num {
width: 22px; height: 22px; border-radius: 50%;
background: rgba(37,99,235,0.30); color: #c7d8ff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
}
.dmitry-board-reply-name { font-size: 13px; font-weight: 700; color: #c7d8ff; }
.dmitry-board-reply-body { font-size: 14px; line-height: 1.55; color: #e0e7ff; }
.dmitry-board-consensus-card {
padding: 16px;
background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(245,158,11,0.04));
border: 1px solid rgba(251,191,36,0.30);
border-radius: 14px;
margin-top: 14px; margin-bottom: 14px;
}
.dmitry-board-consensus-h {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.10em; text-transform: uppercase;
color: #fbbf24;
margin-bottom: 8px;
}
.dmitry-board-consensus-body { font-size: 14px; line-height: 1.6; color: #e0e7ff; }
.dmitry-board-result-actions { display: flex; gap: 10px; margin-top: 8px; }
/* Light theme — Dmitry */
body.light .dmitry-board-card, body.light .dmitry-tools-sheet {
background: linear-gradient(180deg, #fff, #eff6ff);
color: #1e3a8a; border-color: rgba(37,99,235,0.32);
}
body.light .dmitry-board-ttl, body.light .dmitry-tool-name { color: #1d4ed8; }
body.light .dmitry-board-sub { color: rgba(30,58,138,0.65); }
body.light .dmitry-board-hist-ttl, body.light .dmitry-board-school-h, body.light .dmitry-tools-h { color: rgba(29,78,216,0.7); }
body.light .dmitry-board-hist-row { background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.22); color: #1e3a8a; }
body.light .dmitry-board-persona { background: rgba(37,99,235,0.05); border-color: rgba(37,99,235,0.20); color: #1e3a8a; }
body.light .dmitry-board-textarea { background: rgba(37,99,235,0.04); border-color: rgba(37,99,235,0.25); color: #1e3a8a; }
body.light .dmitry-board-reply-card { background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(123,167,247,0.02)); border-color: rgba(37,99,235,0.20); color: #1e3a8a; }
body.light .dmitry-board-reply-card.school-en { background: linear-gradient(135deg, rgba(168,85,247,0.06), rgba(196,181,253,0.02)); border-color: rgba(168,85,247,0.20); }
body.light .dmitry-board-reply-body, body.light .dmitry-board-consensus-body { color: #1e3a8a; }
body.light .dmitry-board-btn-sec { border-color: rgba(30,58,138,0.20); color: rgba(30,58,138,0.70); }
/* ─── Dmitry Phase 2 Sprint 2 — Pre-meeting prep ─────────────────── */
.dmitry-prep-step-ttl {
font-size: 18px; font-weight: 700; color: #c7d8ff;
margin-bottom: 4px; text-align: left;
}
.dmitry-prep-step-opt {
font-size: 11.5px; color: rgba(123,167,247,0.7);
margin-bottom: 10px; font-style: italic;
}
.dmitry-prep-step-actions {
display: flex; gap: 10px; margin-top: 12px;
}
.dmitry-prep-step-actions .dmitry-board-btn-sec {
flex: 0 0 auto; max-width: 110px; margin-top: 0;
}
.dmitry-prep-cta-next { flex: 1; margin-bottom: 0; }
.dmitry-prep-meta {
padding: 10px 12px; margin-bottom: 14px;
background: rgba(37,99,235,0.06);
border-left: 3px solid #2563eb;
border-radius: 8px;
font-size: 13px; line-height: 1.55; color: #e0e7ff;
}
.dmitry-prep-meta-row { margin-bottom: 4px; }
.dmitry-prep-meta-row:last-child { margin-bottom: 0; }
.dmitry-prep-meta-k {
display: inline-block; min-width: 50px;
color: rgba(123,167,247,0.85); font-weight: 600;
}
.dmitry-prep-output {
padding: 16px;
background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(123,167,247,0.04));
border: 1px solid rgba(37,99,235,0.30);
border-radius: 14px;
font-size: 14.5px; line-height: 1.65; color: #e0e7ff;
margin-bottom: 14px;
font-family: -apple-system, 'SF Pro Text', Helvetica, Arial, sans-serif;
white-space: normal;
}
.dmitry-prep-followup-form, .dmitry-prep-followup-saved {
padding: 12px 14px; margin-bottom: 12px;
background: rgba(251,191,36,0.08);
border: 1px solid rgba(251,191,36,0.25);
border-radius: 12px;
}
.dmitry-prep-followup-h {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.10em; text-transform: uppercase;
color: #fbbf24;
margin-bottom: 8px;
}
.dmitry-prep-followup-body { font-size: 14px; line-height: 1.55; color: #e0e7ff; }
.dmitry-prep-followup-form .dmitry-board-textarea { min-height: 80px; margin-bottom: 8px; }
.dmitry-prep-followup-form .dmitry-board-btn-sec { margin-top: 4px; }
/* Light theme */
body.light .dmitry-prep-step-ttl { color: #1d4ed8; }
body.light .dmitry-prep-step-opt { color: rgba(29,78,216,0.7); }
body.light .dmitry-prep-meta { background: rgba(37,99,235,0.05); color: #1e3a8a; }
body.light .dmitry-prep-meta-k { color: rgba(29,78,216,0.85); }
body.light .dmitry-prep-output { background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(123,167,247,0.02)); border-color: rgba(37,99,235,0.20); color: #1e3a8a; }
body.light .dmitry-prep-followup-form, body.light .dmitry-prep-followup-saved { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.30); }
body.light .dmitry-prep-followup-body { color: #1e3a8a; }
/* ─── Dmitry Sprint 1.2 — Stakeholder autocomplete + dossier card ───── */
.dmitry-prep-who-wrap {
position: relative;
margin-bottom: 10px;
min-width: 0;
}
.dmitry-prep-who-input {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
background: rgba(37,99,235,0.08);
border: 1px solid rgba(37,99,235,0.30);
border-radius: 12px;
color: #e0e7ff;
font-size: 15px;
font-family: inherit;
outline: none;
transition: border-color 0.15s ease;
-webkit-appearance: none;
appearance: none;
}
.dmitry-prep-who-input:focus { border-color: rgba(37,99,235,0.55); }
.dmitry-prep-who-input::placeholder { color: rgba(224,231,255,0.45); }
.dmitry-prep-autocomplete {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
max-height: 280px;
overflow-y: auto;
background: rgba(20,20,30,0.98);
border: 1px solid rgba(37,99,235,0.30);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
z-index: 100;
padding: 4px;
}
.dmitry-ac-loading,
.dmitry-ac-empty {
padding: 12px 14px;
font-size: 13px;
color: rgba(224,231,255,0.55);
text-align: center;
}
.dmitry-ac-section-hdr {
padding: 8px 12px 4px;
font-size: 11px;
color: rgba(224,231,255,0.45);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.dmitry-ac-row {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
background: transparent;
border: none;
border-radius: 8px;
color: #e0e7ff;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.12s ease;
min-width: 0;
}
.dmitry-ac-row:hover,
.dmitry-ac-row:active { background: rgba(37,99,235,0.14); }
.dmitry-ac-row-new { color: #93c5fd; }
.dmitry-ac-icon {
flex-shrink: 0;
color: rgba(147,197,253,0.85);
}
.dmitry-ac-row-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.dmitry-ac-row-name {
font-size: 14.5px;
font-weight: 500;
word-break: break-word;
overflow-wrap: anywhere;
}
.dmitry-ac-row-meta {
font-size: 12px;
color: rgba(224,231,255,0.55);
}
.dmitry-prep-dossier-slot {
min-width: 0;
}
.dmitry-prep-dossier-loading {
padding: 10px 12px;
font-size: 13px;
color: rgba(224,231,255,0.55);
text-align: center;
}
.dmitry-prep-dossier-empty {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
margin-bottom: 12px;
background: rgba(37,99,235,0.06);
border: 1px solid rgba(37,99,235,0.20);
border-radius: 10px;
color: rgba(224,231,255,0.65);
font-size: 13px;
}
.dmitry-prep-dossier-card {
margin-bottom: 12px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(123,167,247,0.04));
border: 1px solid rgba(37,99,235,0.28);
border-radius: 12px;
color: #e0e7ff;
font-size: 13.5px;
line-height: 1.5;
min-width: 0;
word-break: break-word;
overflow-wrap: anywhere;
}
.dmitry-prep-dossier-hd {
display: flex; align-items: flex-start; gap: 10px;
margin-bottom: 10px;
min-width: 0;
}
.dmitry-prep-dossier-icon {
flex-shrink: 0;
color: rgba(147,197,253,0.95);
margin-top: 2px;
}
.dmitry-prep-dossier-hd-txt { min-width: 0; flex: 1; }
.dmitry-prep-dossier-ttl {
font-size: 14px;
font-weight: 600;
color: #c7d2fe;
margin-bottom: 2px;
word-break: break-word;
}
.dmitry-prep-dossier-sub {
font-size: 12px;
color: rgba(224,231,255,0.6);
}
.dmitry-prep-dossier-section {
padding-top: 8px;
margin-top: 8px;
border-top: 1px solid rgba(37,99,235,0.16);
}
.dmitry-prep-dossier-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.dmitry-prep-dossier-row {
margin-bottom: 4px;
font-size: 13px;
line-height: 1.45;
}
.dmitry-prep-dossier-row:last-child { margin-bottom: 0; }
.dmitry-prep-dossier-row-kind {
color: rgba(147,197,253,0.85);
font-weight: 600;
}
.dmitry-prep-dossier-row-txt {
color: rgba(224,231,255,0.85);
word-break: break-word;
overflow-wrap: anywhere;
}
/* Light theme */
body.light .dmitry-prep-who-input {
background: rgba(37,99,235,0.04);
border-color: rgba(37,99,235,0.25);
color: #1e3a8a;
}
body.light .dmitry-prep-who-input::placeholder { color: rgba(30,58,138,0.45); }
body.light .dmitry-prep-autocomplete {
background: #ffffff;
border-color: rgba(37,99,235,0.25);
box-shadow: 0 8px 24px rgba(30,58,138,0.16);
}
body.light .dmitry-ac-loading,
body.light .dmitry-ac-empty,
body.light .dmitry-ac-row-meta { color: rgba(30,58,138,0.55); }
body.light .dmitry-ac-section-hdr { color: rgba(30,58,138,0.55); }
body.light .dmitry-ac-row { color: #1e3a8a; }
body.light .dmitry-ac-row:hover,
body.light .dmitry-ac-row:active { background: rgba(37,99,235,0.07); }
body.light .dmitry-ac-row-new { color: #2563eb; }
body.light .dmitry-prep-dossier-card {
background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(123,167,247,0.02));
border-color: rgba(37,99,235,0.20);
color: #1e3a8a;
}
body.light .dmitry-prep-dossier-ttl { color: #1d4ed8; }
body.light .dmitry-prep-dossier-sub,
body.light .dmitry-prep-dossier-row-kind { color: rgba(29,78,216,0.85); }
body.light .dmitry-prep-dossier-row-txt { color: #1e3a8a; }
body.light .dmitry-prep-dossier-empty {
background: rgba(37,99,235,0.04);
border-color: rgba(37,99,235,0.18);
color: rgba(30,58,138,0.7);
}
body.light .dmitry-prep-dossier-section { border-top-color: rgba(37,99,235,0.12); }
/* ─── Dmitry Sprint 1.3 (28.05.2026) — Decoder stakeholder multi-link ─── */
.dmitry-dec-sh-block {
margin-bottom: 14px;
padding: 12px 12px 10px;
background: linear-gradient(135deg, rgba(167,139,250,0.07), rgba(123,167,247,0.04));
border: 1px solid rgba(167,139,250,0.25);
border-radius: 12px;
}
.dmitry-dec-sh-chips {
display: flex; flex-wrap: wrap; gap: 6px;
min-height: 18px;
margin-bottom: 8px;
}
.dmitry-dec-sh-empty {
font-size: 12.5px;
color: rgba(224,231,255,0.45);
font-style: italic;
}
.dmitry-dec-sh-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 8px 5px 10px;
background: rgba(167,139,250,0.18);
border: 1px solid rgba(167,139,250,0.42);
border-radius: 999px;
color: #e0e7ff;
font-size: 13px;
max-width: 100%;
}
.dmitry-dec-sh-chip-ico {
flex-shrink: 0;
color: rgba(167,139,250,0.95);
}
.dmitry-dec-sh-chip-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
.dmitry-dec-sh-chip-x {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
background: rgba(167,139,250,0.30);
border: none; border-radius: 50%;
color: #e0e7ff;
font-size: 14px; line-height: 1;
cursor: pointer;
flex-shrink: 0;
padding: 0;
}
.dmitry-dec-sh-chip-x:hover,
.dmitry-dec-sh-chip-x:active { background: rgba(239,68,68,0.45); }
.dmitry-dec-sh-input-wrap {
position: relative;
margin-bottom: 8px;
}
.dmitry-dec-sh-input {
display: block; width: 100%;
padding: 9px 12px;
background: rgba(20,20,30,0.55);
border: 1px solid rgba(167,139,250,0.28);
border-radius: 10px;
color: #e0e7ff;
font-size: 14px;
font-family: inherit;
outline: none;
transition: border-color 0.15s ease;
-webkit-appearance: none;
appearance: none;
}
.dmitry-dec-sh-input:focus { border-color: rgba(167,139,250,0.55); }
.dmitry-dec-sh-input::placeholder { color: rgba(224,231,255,0.42); }
.dmitry-dec-sh-ac { border-color: rgba(167,139,250,0.30); }
.dmitry-dec-sh-suggest-hd {
font-size: 11.5px;
color: rgba(224,231,255,0.5);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.03em;
font-weight: 600;
}
.dmitry-dec-sh-suggest-row {
display: flex; flex-wrap: wrap; gap: 6px;
}
.dmitry-dec-sh-sg-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 10px;
background: rgba(123,167,247,0.10);
border: 1px dashed rgba(123,167,247,0.45);
border-radius: 999px;
color: #c7d2fe;
font-size: 12.5px;
cursor: pointer;
font-family: inherit;
transition: background 0.12s ease, border-color 0.12s ease;
max-width: 100%;
}
.dmitry-dec-sh-sg-chip:hover,
.dmitry-dec-sh-sg-chip:active {
background: rgba(167,139,250,0.18);
border-color: rgba(167,139,250,0.55);
border-style: solid;
}
.dmitry-dec-sh-sg-ctx {
color: rgba(224,231,255,0.45);
font-weight: 400;
}
/* Light theme */
body.light .dmitry-dec-sh-block {
background: rgba(167,139,250,0.05);
border-color: rgba(167,139,250,0.30);
}
body.light .dmitry-dec-sh-chip {
background: rgba(167,139,250,0.12);
border-color: rgba(167,139,250,0.40);
color: #4c1d95;
}
body.light .dmitry-dec-sh-input {
background: rgba(167,139,250,0.04);
border-color: rgba(167,139,250,0.30);
color: #1e1b4b;
}
body.light .dmitry-dec-sh-input::placeholder { color: rgba(76,29,149,0.45); }
body.light .dmitry-dec-sh-sg-chip {
background: rgba(123,167,247,0.06);
border-color: rgba(76,29,149,0.30);
color: #4c1d95;
}
body.light .dmitry-dec-sh-suggest-hd { color: rgba(76,29,149,0.6); }
body.light .dmitry-dec-sh-empty { color: rgba(76,29,149,0.5); }
/* ─── Dmitry Phase 2 Sprint 3 — Journal (decisions + reviews) ──────── */
.dmitry-journal-due-banner {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px; margin-bottom: 12px;
background: linear-gradient(135deg, rgba(251,191,36,0.14), rgba(245,158,11,0.06));
border: 1px solid rgba(251,191,36,0.35);
border-radius: 12px;
cursor: pointer; color: #fbbf24;
font-size: 13.5px; font-weight: 600;
}
.dmitry-journal-due-banner:active { background: rgba(251,191,36,0.22); }
.dmitry-journal-due-banner > span:first-of-type { flex: 1; }
.dmitry-board-tool-arrow { font-size: 20px; flex-shrink: 0; font-weight: 300; line-height: 1; }
.dmitry-journal-cta-row {
display: flex; gap: 8px; margin-bottom: 12px;
}
.dmitry-journal-cta-row .dmitry-board-cta { flex: 1; margin-bottom: 0; padding: 12px; font-size: 13.5px; }
.dmitry-journal-review-cta {
background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
}
.dmitry-journal-mirror-cta {
display: flex; align-items: center; gap: 12px;
width: 100%; padding: 14px;
background: linear-gradient(135deg, rgba(251,191,36,0.14), rgba(245,158,11,0.04));
border: 1px solid rgba(251,191,36,0.30);
border-radius: 14px; color: #fbbf24;
cursor: pointer; margin-bottom: 14px;
text-align: left;
}
.dmitry-journal-mirror-cta:active { background: rgba(251,191,36,0.22); }
.dmitry-journal-mirror-cta.is-locked { opacity: 0.7; }
.dmitry-journal-mirror-l { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dmitry-journal-mirror-name { font-size: 14px; font-weight: 700; }
.dmitry-journal-mirror-sub { font-size: 11.5px; color: rgba(251,191,36,0.65); }
.dmitry-journal-mirror-lock { font-size: 14px; flex-shrink: 0; }
.dmitry-journal-form-label {
font-size: 11.5px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(123,167,247,0.75);
margin: 14px 0 8px; padding: 0 2px;
}
.dmitry-journal-chip-row {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 4px;
}
.dmitry-journal-chip {
padding: 8px 12px;
background: rgba(37,99,235,0.06);
border: 1px solid rgba(37,99,235,0.20);
border-radius: 18px;
color: #e0e7ff;
font-size: 12.5px; font-weight: 500;
cursor: pointer;
}
.dmitry-journal-chip:active { background: rgba(37,99,235,0.18); }
.dmitry-journal-chip.is-sel {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
border-color: #2563eb;
color: #fff; font-weight: 700;
box-shadow: 0 3px 10px rgba(37,99,235,0.35);
}
.dmitry-journal-chip.outcome-worked.is-sel { background: linear-gradient(135deg, #22c55e, #16a34a); border-color: #22c55e; box-shadow: 0 3px 10px rgba(34,197,94,0.35); }
.dmitry-journal-chip.outcome-mixed.is-sel { background: linear-gradient(135deg, #eab308, #ca8a04); border-color: #eab308; box-shadow: 0 3px 10px rgba(234,179,8,0.35); }
.dmitry-journal-chip.outcome-didnt.is-sel { background: linear-gradient(135deg, #ef4444, #dc2626); border-color: #ef4444; box-shadow: 0 3px 10px rgba(239,68,68,0.35); }
.dmitry-journal-slider-row {
display: flex; align-items: center; gap: 12px;
padding: 4px 4px 12px;
}
.dmitry-journal-slider {
flex: 1; -webkit-appearance: none; appearance: none;
height: 6px; border-radius: 3px;
background: linear-gradient(90deg, #2563eb 0%, #2563eb 50%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.10) 100%);
outline: none; touch-action: pan-x;
}
.dmitry-journal-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
cursor: pointer; box-shadow: 0 2px 8px rgba(37,99,235,0.45);
border: 2px solid #fff;
}
.dmitry-journal-slider::-moz-range-thumb {
width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
cursor: pointer; box-shadow: 0 2px 8px rgba(37,99,235,0.45);
border: 2px solid #fff;
}
.dmitry-journal-conf-val {
width: 32px; text-align: center;
font-size: 18px; font-weight: 800; color: #c7d8ff;
font-variant-numeric: tabular-nums;
}
.dmitry-journal-status {
font-size: 10.5px; font-weight: 700; flex-shrink: 0;
padding: 3px 8px; border-radius: 6px;
}
.dmitry-journal-status.verified { background: rgba(34,197,94,0.18); color: #22c55e; }
.dmitry-journal-status.pending { background: rgba(234,179,8,0.18); color: #eab308; }
.dmitry-journal-status.mirror { background: rgba(251,191,36,0.18); color: #fbbf24; padding: 3px 6px; }
.dmitry-journal-due-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.dmitry-journal-due-row {
display: flex; flex-direction: column; gap: 4px;
width: 100%; padding: 12px 14px;
background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(245,158,11,0.04));
border: 1px solid rgba(251,191,36,0.25);
border-radius: 12px; text-align: left;
cursor: pointer; color: #e0e7ff;
}
.dmitry-journal-due-row:active { background: rgba(251,191,36,0.18); }
.dmitry-journal-due-text { font-size: 13.5px; font-weight: 500; }
.dmitry-journal-due-date { font-size: 11px; color: rgba(251,191,36,0.65); }
.dmitry-journal-qa {
padding: 12px 14px; margin-bottom: 8px;
background: rgba(37,99,235,0.06);
border-left: 3px solid #2563eb;
border-radius: 8px;
}
.dmitry-journal-qa-q {
font-size: 11.5px; font-weight: 700;
letter-spacing: 0.03em; color: rgba(123,167,247,0.85);
margin-bottom: 4px;
}
.dmitry-journal-qa-a { font-size: 14px; line-height: 1.55; color: #e0e7ff; }
/* Light theme — Journal */
body.light .dmitry-journal-due-banner { background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(234,179,8,0.04)); border-color: rgba(245,158,11,0.32); color: #b45309; }
body.light .dmitry-journal-form-label { color: rgba(29,78,216,0.75); }
body.light .dmitry-journal-chip { background: rgba(37,99,235,0.05); border-color: rgba(37,99,235,0.22); color: #1e3a8a; }
body.light .dmitry-journal-conf-val { color: #1d4ed8; }
body.light .dmitry-journal-due-row { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.30); color: #1e3a8a; }
body.light .dmitry-journal-due-date { color: rgba(180,83,9,0.65); }
body.light .dmitry-journal-qa { background: rgba(37,99,235,0.05); color: #1e3a8a; }
body.light .dmitry-journal-qa-q { color: rgba(29,78,216,0.85); }
body.light .dmitry-journal-qa-a { color: #1e3a8a; }
body.light .dmitry-journal-mirror-cta { background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(234,179,8,0.02)); border-color: rgba(245,158,11,0.30); color: #b45309; }
body.light .dmitry-journal-mirror-sub { color: rgba(180,83,9,0.65); }
/* ─── Dmitry Phase 2 Sprint 4 — Pre-mortem ────────────────────────── */
.dmitry-pm-section-h {
font-size: 12.5px; font-weight: 700;
letter-spacing: 0.04em;
color: #c7d8ff;
padding: 16px 2px 8px;
}
.dmitry-pm-risks-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.dmitry-pm-risk-row {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 12px;
background: rgba(37,99,235,0.05);
border: 1px solid rgba(37,99,235,0.14);
border-radius: 10px;
}
.dmitry-pm-risk-row.is-top {
background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(245,158,11,0.04));
border-color: rgba(251,191,36,0.32);
}
.dmitry-pm-risk-meter { flex-shrink: 0; }
.dmitry-pm-risk-rating {
display: inline-flex; align-items: center; justify-content: center;
min-width: 48px; padding: 4px 8px;
border-radius: 8px;
font-size: 11px; font-weight: 800;
font-variant-numeric: tabular-nums;
}
.dmitry-pm-risk-rating.high { background: rgba(239,68,68,0.18); color: #ef4444; }
.dmitry-pm-risk-rating.mid { background: rgba(234,179,8,0.18); color: #eab308; }
.dmitry-pm-risk-rating.low { background: rgba(34,197,94,0.18); color: #22c55e; }
.dmitry-pm-risk-text {
font-size: 13.5px; line-height: 1.5; color: #e0e7ff;
}
.dmitry-pm-mit-list { display: flex; flex-direction: column; gap: 10px; }
.dmitry-pm-mit-card {
padding: 12px 14px;
background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(22,163,74,0.04));
border: 1px solid rgba(34,197,94,0.30);
border-radius: 12px;
}
.dmitry-pm-mit-h { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.dmitry-pm-mit-num {
width: 22px; height: 22px; border-radius: 50%;
background: rgba(34,197,94,0.30); color: #22c55e;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.dmitry-pm-mit-risk { font-size: 13px; font-weight: 600; color: #c7d8ff; line-height: 1.45; }
.dmitry-pm-mit-body { display: flex; align-items: flex-start; gap: 8px; padding-left: 32px; }
.dmitry-pm-mit-arrow { color: #22c55e; font-weight: 800; flex-shrink: 0; }
.dmitry-pm-mit-text { font-size: 13.5px; line-height: 1.55; color: #e0e7ff; }
.dmitry-pm-commit-card {
padding: 14px;
background: linear-gradient(135deg, rgba(168,85,247,0.10), rgba(196,181,253,0.04));
border: 1px solid rgba(168,85,247,0.30);
border-radius: 12px;
margin: 14px 0;
}
.dmitry-pm-commit-h {
font-size: 11px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: #c4b5fd;
margin-bottom: 6px;
}
.dmitry-pm-commit-body { font-size: 14px; line-height: 1.55; color: #e0e7ff; font-style: italic; }
.dmitry-pm-saved-status {
text-align: center; padding: 12px;
background: rgba(34,197,94,0.10);
border: 1px solid rgba(34,197,94,0.25);
border-radius: 12px;
font-size: 13px; color: #22c55e; font-weight: 600;
margin-bottom: 8px;
}
.dmitry-pm-saved-badge {
font-size: 12px; opacity: 0.7;
}
/* Light theme */
body.light .dmitry-pm-section-h { color: #1d4ed8; }
body.light .dmitry-pm-risk-row { background: rgba(37,99,235,0.05); border-color: rgba(37,99,235,0.18); }
body.light .dmitry-pm-risk-row.is-top { background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(234,179,8,0.02)); border-color: rgba(245,158,11,0.30); }
body.light .dmitry-pm-risk-text, body.light .dmitry-pm-mit-text { color: #1e3a8a; }
body.light .dmitry-pm-mit-risk { color: #1d4ed8; }
body.light .dmitry-pm-mit-card { background: linear-gradient(135deg, rgba(22,163,74,0.06), rgba(34,197,94,0.02)); border-color: rgba(22,163,74,0.30); }
body.light .dmitry-pm-commit-card { background: linear-gradient(135deg, rgba(168,85,247,0.06), rgba(196,181,253,0.02)); border-color: rgba(168,85,247,0.30); }
body.light .dmitry-pm-commit-h { color: #6d28d9; }
body.light .dmitry-pm-commit-body { color: #1e3a8a; }
/* ─── Dmitry Phase 2 Sprint 5 — Conversation Decoder ──────────────── */
.dmitry-dec-input-tabs {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
margin-bottom: 12px;
}
.dmitry-dec-tab {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 14px 6px;
background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(123,167,247,0.04));
border: 1px solid rgba(37,99,235,0.30);
border-radius: 12px;
color: #c7d8ff;
font-size: 12px; font-weight: 600;
cursor: pointer;
}
.dmitry-dec-tab:active { background: rgba(37,99,235,0.22); transform: scale(0.97); }
.dmitry-dec-tab > svg { color: #7ba7f7; }
.dmitry-dec-privacy {
font-size: 11px; color: rgba(224,231,255,0.55);
padding: 8px 10px;
background: rgba(34,197,94,0.06);
border: 1px solid rgba(34,197,94,0.20);
border-radius: 8px;
text-align: center; margin-bottom: 12px;
}
.dmitry-dec-upload-zone {
width: 100%; padding: 36px 16px;
background: rgba(37,99,235,0.06);
border: 2px dashed rgba(37,99,235,0.32);
border-radius: 14px;
color: #c7d8ff;
display: flex; flex-direction: column; align-items: center; gap: 8px;
cursor: pointer;
}
.dmitry-dec-upload-zone:active { background: rgba(37,99,235,0.14); }
.dmitry-dec-upload-l1 { font-size: 15px; font-weight: 700; }
.dmitry-dec-upload-l2 { font-size: 12px; color: rgba(224,231,255,0.55); }
.dmitry-dec-textfile-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 10px 14px;
margin-bottom: 10px;
background: rgba(37,99,235,0.08);
border: 1px dashed rgba(37,99,235,0.32);
border-radius: 10px;
color: #c7d8ff;
font-size: 13px;
cursor: pointer;
transition: background 0.15s;
}
.dmitry-dec-textfile-btn:active { background: rgba(37,99,235,0.16); }
.dmitry-dec-textfile-btn svg { flex-shrink: 0; }
body.light .dmitry-dec-textfile-btn { background: rgba(37,99,235,0.05); border-color: rgba(37,99,235,0.30); color: #1e3a8a; }
.dmitry-dec-textfile-status {
display: flex; align-items: center; gap: 6px;
padding: 8px 12px;
margin-bottom: 8px;
border-radius: 8px;
font-size: 13px;
line-height: 1.35;
word-break: break-word;
}
.dmitry-dec-textfile-status.success { background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.30); }
.dmitry-dec-textfile-status.error { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.30); }
.dmitry-dec-textfile-status.loading { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.30); }
.dmitry-dec-textfile-status.warn { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.30); }
body.light .dmitry-dec-textfile-status.success { background: rgba(34,197,94,0.08); color: #16a34a; border-color: rgba(34,197,94,0.30); }
body.light .dmitry-dec-textfile-status.error { background: rgba(239,68,68,0.08); color: #dc2626; border-color: rgba(239,68,68,0.30); }
body.light .dmitry-dec-textfile-status.loading { background: rgba(59,130,246,0.08); color: #2563eb; border-color: rgba(59,130,246,0.30); }
body.light .dmitry-dec-textfile-status.warn { background: rgba(245,158,11,0.08); color: #d97706; border-color: rgba(245,158,11,0.30); }
.dmitry-dec-record-area {
display: flex; flex-direction: column; align-items: center; gap: 12px;
padding: 28px 16px;
}
.dmitry-dec-rec-btn {
width: 88px; height: 88px; border-radius: 50%;
background: linear-gradient(135deg, #ef4444, #dc2626);
border: none; color: #fff; cursor: pointer;
box-shadow: 0 8px 24px rgba(239,68,68,0.45);
display: inline-flex; align-items: center; justify-content: center;
transition: transform 0.12s ease;
}
.dmitry-dec-rec-btn:active { transform: scale(0.94); }
.dmitry-dec-rec-btn.is-recording {
animation: dmitryDecRecPulse 1.4s ease-in-out infinite;
}
@keyframes dmitryDecRecPulse {
0%, 100% { box-shadow: 0 8px 24px rgba(239,68,68,0.45); }
50% { box-shadow: 0 8px 32px rgba(239,68,68,0.85), 0 0 0 12px rgba(239,68,68,0.18); }
}
.dmitry-dec-rec-status { font-size: 13px; color: rgba(224,231,255,0.75); }
.dmitry-dec-rec-timer { font-size: 28px; font-weight: 800; color: #c7d8ff; font-variant-numeric: tabular-nums; }
.dmitry-dec-summary {
padding: 14px;
background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(123,167,247,0.04));
border: 1px solid rgba(37,99,235,0.30);
border-radius: 12px;
margin-bottom: 12px;
}
.dmitry-dec-cat-chip {
display: inline-block; padding: 3px 10px;
background: rgba(37,99,235,0.25); color: #c7d8ff;
border-radius: 12px;
font-size: 11px; font-weight: 700;
margin-bottom: 6px;
}
.dmitry-dec-summary-text { font-size: 14px; line-height: 1.5; color: #e0e7ff; font-style: italic; }
.dmitry-dec-hidden-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.dmitry-dec-hidden-card {
padding: 10px 12px;
background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(220,38,38,0.04));
border: 1px solid rgba(239,68,68,0.30);
border-radius: 10px;
}
.dmitry-dec-hidden-signal { font-size: 13px; color: #fca5a5; font-style: italic; margin-bottom: 4px; }
.dmitry-dec-hidden-implies { font-size: 13px; color: #e0e7ff; }
.dmitry-dec-action-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.dmitry-dec-action-card {
padding: 10px 12px;
background: rgba(34,197,94,0.06);
border-left: 3px solid #22c55e;
border-radius: 8px;
}
.dmitry-dec-action-h {
font-size: 11px; color: rgba(34,197,94,0.85); font-weight: 600;
margin-bottom: 4px; display: flex; gap: 6px; align-items: center;
}
.dmitry-dec-action-type {
font-size: 9px; font-weight: 800;
padding: 2px 6px; border-radius: 4px;
letter-spacing: 0.05em;
}
.dmitry-dec-action-type.hidden { background: rgba(239,68,68,0.20); color: #ef4444; }
.dmitry-dec-action-type.soft { background: rgba(234,179,8,0.20); color: #eab308; }
.dmitry-dec-action-text { font-size: 13.5px; line-height: 1.5; color: #e0e7ff; }
.dmitry-dec-decisions-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.dmitry-dec-decision-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: rgba(251,191,36,0.08);
border: 1px solid rgba(251,191,36,0.22);
border-radius: 10px;
cursor: pointer;
}
.dmitry-dec-decision-cb { flex-shrink: 0; width: 18px; height: 18px; cursor: pointer; accent-color: #eab308; }
.dmitry-dec-decision-text { flex: 1; font-size: 13.5px; color: #e0e7ff; line-height: 1.4; }
.dmitry-dec-decision-meta { font-size: 11px; color: #fbbf24; font-weight: 700; flex-shrink: 0; }
.dmitry-dec-steps-list {
margin: 4px 0 8px; padding-left: 24px;
font-size: 13.5px; line-height: 1.6; color: #e0e7ff;
}
.dmitry-dec-steps-list li { margin-bottom: 4px; }
.dmitry-dec-quotes { display: flex; flex-direction: column; gap: 6px; }
.dmitry-dec-quote {
padding: 8px 12px;
background: rgba(37,99,235,0.06);
border-left: 2px solid rgba(123,167,247,0.5);
font-style: italic; font-size: 13px; color: rgba(224,231,255,0.85);
border-radius: 4px;
}
.dmitry-dec-transcript-details {
margin: 8px 0;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 10px 12px;
}
.dmitry-dec-transcript-details summary {
cursor: pointer; font-size: 12px; color: rgba(123,167,247,0.85);
font-weight: 600;
}
.dmitry-dec-transcript {
margin-top: 10px; padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.08);
font-size: 12.5px; line-height: 1.6; color: rgba(224,231,255,0.85);
max-height: 240px; overflow-y: auto; white-space: pre-wrap;
}
.dmitry-dec-deep-card {
padding: 14px;
background: linear-gradient(135deg, rgba(168,85,247,0.10), rgba(196,181,253,0.04));
border: 1px solid rgba(168,85,247,0.28);
border-radius: 12px;
color: #e0e7ff;
}
.dmitry-dec-deep-section {
padding: 10px 0;
border-bottom: 1px solid rgba(168,85,247,0.14);
}
.dmitry-dec-deep-section:last-child { border-bottom: none; }
.dmitry-dec-deep-h {
font-size: 11px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
color: rgba(196,181,253,0.85);
margin-bottom: 6px;
}
.dmitry-dec-deep-body { font-size: 13px; line-height: 1.5; }
.dmitry-dec-deep-text { color: #e0e7ff; }
.dmitry-dec-deep-meta { color: rgba(224,231,255,0.55); font-size: 12px; font-style: italic; }
.dmitry-dec-deep-list {
margin: 4px 0; padding-left: 22px;
font-size: 13px; line-height: 1.55; color: #e0e7ff;
}
.dmitry-dec-deep-list li { margin-bottom: 3px; }
.dmitry-dec-deep-quote {
margin: 6px 0; padding: 8px 12px;
background: rgba(168,85,247,0.06);
border-left: 2px solid rgba(196,181,253,0.5);
border-radius: 4px;
font-size: 12.5px; font-style: italic; color: rgba(224,231,255,0.85);
}
.dmitry-dec-deep-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; margin: 2px 4px 2px 0;
background: rgba(168,85,247,0.10);
border: 1px solid rgba(168,85,247,0.22);
border-radius: 16px;
font-size: 12px;
}
.dmitry-dec-deep-pill-k { font-weight: 600; color: rgba(196,181,253,0.85); }
.dmitry-dec-deep-pill-v { color: #e0e7ff; }
.dmitry-dec-deep-pill.red { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.30); }
.dmitry-dec-deep-pill.red .dmitry-dec-deep-pill-k { color: #fca5a5; }
.dmitry-dec-deep-pill.yellow { background: rgba(234,179,8,0.14); border-color: rgba(234,179,8,0.30); }
.dmitry-dec-deep-pill.yellow .dmitry-dec-deep-pill-k { color: #fcd34d; }
.dmitry-dec-deep-pill.green { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.30); }
.dmitry-dec-deep-pill.green .dmitry-dec-deep-pill-k { color: #86efac; }
.dmitry-dec-deep-pill.highlight { background: rgba(251,191,36,0.14); border-color: rgba(251,191,36,0.35); }
.dmitry-dec-deep-pill.highlight .dmitry-dec-deep-pill-k { color: #fbbf24; }
/* Block-level key-value for long text (>80 chars) — заменяет squished pill */
.dmitry-dec-deep-kv {
padding: 10px 12px; margin: 6px 0;
background: rgba(168,85,247,0.08);
border-left: 3px solid rgba(196,181,253,0.6);
border-radius: 8px;
}
.dmitry-dec-deep-kv-k {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
color: rgba(196,181,253,0.85);
margin-bottom: 4px;
}
.dmitry-dec-deep-kv-v {
font-size: 13.5px; line-height: 1.55; color: #e0e7ff;
}
.dmitry-dec-deep-kv.red { background: rgba(239,68,68,0.08); border-left-color: #ef4444; }
.dmitry-dec-deep-kv.red .dmitry-dec-deep-kv-k { color: #fca5a5; }
.dmitry-dec-deep-kv.yellow { background: rgba(234,179,8,0.08); border-left-color: #eab308; }
.dmitry-dec-deep-kv.yellow .dmitry-dec-deep-kv-k { color: #fcd34d; }
.dmitry-dec-deep-kv.green { background: rgba(34,197,94,0.08); border-left-color: #22c55e; }
.dmitry-dec-deep-kv.green .dmitry-dec-deep-kv-k { color: #86efac; }
.dmitry-dec-deep-kv.highlight { background: rgba(251,191,36,0.10); border-left-color: #fbbf24; }
.dmitry-dec-deep-kv.highlight .dmitry-dec-deep-kv-k { color: #fbbf24; }
body.light .dmitry-dec-deep-kv { background: rgba(168,85,247,0.05); }
body.light .dmitry-dec-deep-kv-v { color: #1e3a8a; }
body.light .dmitry-dec-deep-kv-k { color: rgba(109,40,217,0.85); }
/* ─── Mobile overflow protection — proactive (audit fix 27.05.2026) ── */
/* All decoder text fields: break long words/URLs/tokens. min-width:0 on flex children. */
.dmitry-dec-summary-text,
.dmitry-dec-hidden-signal, .dmitry-dec-hidden-implies,
.dmitry-dec-action-text, .dmitry-dec-action-h,
.dmitry-dec-decision-text,
.dmitry-dec-quote,
.dmitry-dec-deep-text, .dmitry-dec-deep-meta, .dmitry-dec-deep-kv-v,
.dmitry-dec-transcript,
.dmitry-dec-steps-list,
.dmitry-dec-deep-list {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.dmitry-dec-decision-text { min-width: 0; } /* flex:1 child should be allowed to shrink */
.dmitry-dec-hidden-card, .dmitry-dec-action-card, .dmitry-dec-deep-card,
.dmitry-dec-summary, .dmitry-pm-commit-card, .dmitry-dec-decision-row,
.dmitry-dec-quote {
overflow: hidden;
max-width: 100%;
}
/* Same protection для всех Дмитрий wow-fich text outputs */
.dmitry-board-q-bubble, .dmitry-board-reply-body, .dmitry-board-consensus-body,
.dmitry-pm-risk-text, .dmitry-pm-mit-text, .dmitry-pm-commit-body,
.dmitry-prep-output, .dmitry-prep-meta-row,
.dmitry-journal-qa-a, .dmitry-board-hist-row-q {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
/* Pre — JSON raw fallback — force scroll instead of overflow */
.dmitry-dec-deep-raw, .dmitry-dec-transcript {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ─── Descriptive mode cards (28.05.2026 — replaces small icon tabs) ── */
.dmitry-dec-mode-list {
display: flex; flex-direction: column; gap: 10px;
margin-bottom: 12px;
}
.dmitry-dec-mode-card {
display: flex; align-items: center; gap: 14px;
width: 100%; padding: 14px 16px;
background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(123,167,247,0.04));
border: 1px solid rgba(37,99,235,0.30);
border-radius: 14px;
color: #e0e7ff; text-align: left;
cursor: pointer; transition: background 0.15s ease, transform 0.12s ease;
min-height: 64px;
}
.dmitry-dec-mode-card:active { background: rgba(37,99,235,0.22); transform: scale(0.99); }
.dmitry-dec-mode-emoji {
font-size: 32px; line-height: 1;
flex-shrink: 0;
width: 44px; text-align: center;
}
.dmitry-dec-mode-ico {
flex-shrink: 0;
width: 44px; height: 44px;
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(37,99,235,0.18);
color: #7ba7f7;
}
body.light .dmitry-dec-mode-ico { background: rgba(37,99,235,0.12); color: #2563eb; }
.dmitry-dec-hist-ico {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
}
.dmitry-dec-sec-ico {
display: inline-flex; align-items: center; justify-content: center;
vertical-align: middle;
margin-right: 6px;
}
.dmitry-dec-sec-ico svg { display: block; }
.dmitry-dec-mode-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dmitry-dec-mode-name { font-size: 15px; font-weight: 700; color: #c7d8ff; }
.dmitry-dec-mode-sub { font-size: 12.5px; color: rgba(224,231,255,0.65); line-height: 1.4; }
.dmitry-dec-mode-arrow { font-size: 22px; color: rgba(123,167,247,0.5); flex-shrink: 0; font-weight: 300; line-height: 1; }
body.light .dmitry-dec-mode-card { background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(123,167,247,0.02)); border-color: rgba(37,99,235,0.25); color: #1e3a8a; }
body.light .dmitry-dec-mode-name { color: #1d4ed8; }
body.light .dmitry-dec-mode-sub { color: rgba(30,58,138,0.65); }
/* ─── Share button + bottom sheet (28.05.2026) ──────────────────── */
.dmitry-share-actions {
display: flex; gap: 8px; margin-top: 10px;
}
.dmitry-share-cta { flex: 1; margin-bottom: 0; }
.dmitry-share-del { flex: 0 0 auto; max-width: 130px; margin-top: 0; }
.dmitry-share-wrap {
position: fixed; inset: 0; z-index: 10005;
display: flex; align-items: flex-end; justify-content: center;
animation: dmitryShareFadeIn 0.18s ease-out;
}
@keyframes dmitryShareFadeIn { from { opacity: 0; } to { opacity: 1; } }
.dmitry-share-bg {
position: absolute; inset: 0;
background: rgba(0,0,0,0.60);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.dmitry-share-sheet {
position: relative; z-index: 1;
width: 100%; max-width: 460px;
background: linear-gradient(180deg, #0f1729 0%, #0a0f1f 100%);
border-top: 1px solid rgba(37,99,235,0.30);
border-radius: 20px 20px 0 0;
padding: 12px 18px 28px;
color: #e0e7ff;
box-shadow: 0 -20px 60px rgba(37,99,235,0.20);
animation: dmitryShareSlide 0.22s ease-out;
}
@keyframes dmitryShareSlide {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.dmitry-share-handle {
width: 36px; height: 4px; border-radius: 2px;
background: rgba(255,255,255,0.20);
margin: 0 auto 14px;
}
.dmitry-share-h {
font-size: 13px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
color: rgba(123,167,247,0.85);
text-align: center; margin-bottom: 14px;
}
.dmitry-share-opt {
display: flex; align-items: center; gap: 14px;
width: 100%; padding: 14px 16px; margin-bottom: 8px;
background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(123,167,247,0.04));
border: 1px solid rgba(37,99,235,0.25);
border-radius: 14px;
color: #e0e7ff; text-align: left;
cursor: pointer; transition: background 0.15s ease;
min-height: 60px;
}
.dmitry-share-opt:active { background: rgba(37,99,235,0.20); }
.dmitry-share-ico {
flex-shrink: 0;
width: 44px; height: 44px;
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(37,99,235,0.18);
color: #7ba7f7;
}
body.light .dmitry-share-ico { background: rgba(37,99,235,0.12); color: #2563eb; }
.dmitry-share-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dmitry-share-name { font-size: 14.5px; font-weight: 700; color: #c7d8ff; }
.dmitry-share-sub { font-size: 12px; color: rgba(224,231,255,0.55); }
.dmitry-share-arrow { font-size: 22px; color: rgba(123,167,247,0.5); flex-shrink: 0; font-weight: 300; line-height: 1; }
body.light .dmitry-share-sheet { background: linear-gradient(180deg, #fff, #eff6ff); color: #1e3a8a; border-top-color: rgba(37,99,235,0.32); }
body.light .dmitry-share-h { color: rgba(29,78,216,0.85); }
body.light .dmitry-share-opt { background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.25); color: #1e3a8a; }
body.light .dmitry-share-name { color: #1d4ed8; }
body.light .dmitry-share-sub { color: rgba(30,58,138,0.65); }
.dmitry-dec-deep-obj {
display: flex; align-items: flex-start; gap: 10px;
padding: 8px 0;
border-bottom: 1px dashed rgba(168,85,247,0.14);
}
.dmitry-dec-deep-obj:last-child { border-bottom: none; }
.dmitry-dec-deep-sev {
flex-shrink: 0;
padding: 3px 7px; border-radius: 8px;
font-size: 10.5px; font-weight: 800;
font-variant-numeric: tabular-nums;
}
.dmitry-dec-deep-sev.red { background: rgba(239,68,68,0.18); color: #ef4444; }
.dmitry-dec-deep-sev.yellow { background: rgba(234,179,8,0.18); color: #eab308; }
.dmitry-dec-deep-sev.green { background: rgba(34,197,94,0.18); color: #22c55e; }
.dmitry-dec-deep-raw {
font-family: 'SF Mono', Menlo, monospace;
font-size: 11px; color: rgba(224,231,255,0.65);
white-space: pre-wrap; overflow-x: auto;
background: rgba(0,0,0,0.20); padding: 8px; border-radius: 6px;
}
/* Light theme — deep */
body.light .dmitry-dec-deep-card { background: linear-gradient(135deg, rgba(168,85,247,0.06), rgba(196,181,253,0.02)); border-color: rgba(168,85,247,0.22); }
body.light .dmitry-dec-deep-h { color: #6d28d9; }
body.light .dmitry-dec-deep-text, body.light .dmitry-dec-deep-list { color: #1e3a8a; }
body.light .dmitry-dec-deep-meta { color: rgba(30,58,138,0.55); }
body.light .dmitry-dec-deep-quote { background: rgba(168,85,247,0.04); color: rgba(30,58,138,0.85); }
body.light .dmitry-dec-deep-pill-v { color: #1e3a8a; }
body.light .dmitry-dec-deep-pill-k { color: rgba(109,40,217,0.85); }
/* Light theme */
body.light .dmitry-dec-tab { background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.25); color: #1e3a8a; }
body.light .dmitry-dec-privacy { background: rgba(34,197,94,0.05); border-color: rgba(34,197,94,0.25); color: rgba(22,101,52,0.85); }
body.light .dmitry-dec-upload-zone { background: rgba(37,99,235,0.05); border-color: rgba(37,99,235,0.30); color: #1e3a8a; }
body.light .dmitry-dec-rec-timer { color: #1d4ed8; }
body.light .dmitry-dec-summary { background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(123,167,247,0.02)); border-color: rgba(37,99,235,0.22); }
body.light .dmitry-dec-summary-text { color: #1e3a8a; }
body.light .dmitry-dec-hidden-card { background: linear-gradient(135deg, rgba(239,68,68,0.06), rgba(220,38,38,0.02)); border-color: rgba(239,68,68,0.30); }
body.light .dmitry-dec-hidden-implies { color: #1e3a8a; }
body.light .dmitry-dec-action-text { color: #1e3a8a; }
body.light .dmitry-dec-decision-row { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.30); }
body.light .dmitry-dec-decision-text { color: #1e3a8a; }
body.light .dmitry-dec-decision-meta { color: #b45309; }
body.light .dmitry-dec-steps-list { color: #1e3a8a; }
body.light .dmitry-dec-quote { background: rgba(37,99,235,0.04); color: rgba(30,58,138,0.85); }
.anna-jr-close-btn {
display: block; width: 100%;
margin-top: 8px; padding: 9px;
background: transparent; border: none;
color: rgba(255,255,255,0.45);
font-size: 12.5px; cursor: pointer;
}
/* Weekly insight card в чате */
.anna-weekly-card {
background:
radial-gradient(circle at 0% 0%, rgba(232,121,166,0.15), transparent 60%),
linear-gradient(180deg, rgba(45,15,35,0.55), rgba(15,10,18,0.78)) !important;
border: 1px solid rgba(232,121,166,0.32) !important;
padding: 16px 14px !important;
}
.anna-weekly-hdr {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10.5px; font-weight: 800;
color: #f9a8d4;
text-transform: uppercase; letter-spacing: 0.10em;
margin-bottom: 10px;
}
.anna-weekly-stats {
display: flex; flex-wrap: wrap; gap: 12px;
margin-bottom: 12px;
padding: 8px 12px;
background: rgba(232,121,166,0.06);
border: 1px solid rgba(232,121,166,0.18);
border-radius: 10px;
font-size: 11.5px;
color: rgba(255,255,255,0.75);
}
.anna-weekly-stat b { color: #f9a8d4; }
.anna-weekly-body {
font-size: 13.5px; line-height: 1.6;
color: rgba(255,255,255,0.92);
}
.anna-journal-btn { color: #e879a6 !important; }
body.light .anna-jr-card {
background: linear-gradient(180deg, rgba(232,121,166,0.06), #fff) !important;
border-color: rgba(190,24,93,0.30) !important;
}
body.light .anna-jr-lbl { color: rgba(15,23,42,0.55) !important; }
body.light .anna-jr-chip {
background: rgba(15,23,42,0.03) !important;
border-color: rgba(15,23,42,0.10) !important;
}
body.light .anna-jr-chip.is-on {
background: rgba(232,121,166,0.14) !important;
border-color: rgba(190,24,93,0.55) !important;
}
body.light .anna-jr-chip-l { color: rgba(15,23,42,0.7) !important; }
body.light .anna-jr-chip.is-on .anna-jr-chip-l { color: #be185d !important; }
body.light .anna-jr-text {
background: rgba(15,23,42,0.03) !important;
border-color: rgba(15,23,42,0.14) !important;
color: #0f172a !important;
}
body.light .anna-jr-close-btn { color: rgba(15,23,42,0.45) !important; }
body.light .anna-weekly-card {
background: linear-gradient(180deg, rgba(232,121,166,0.06), rgba(255,255,255,0.5)) !important;
border-color: rgba(190,24,93,0.30) !important;
}
body.light .anna-weekly-hdr { color: #be185d !important; }
body.light .anna-weekly-stats {
background: rgba(232,121,166,0.05) !important;
border-color: rgba(190,24,93,0.18) !important;
color: rgba(15,23,42,0.75) !important;
}
body.light .anna-weekly-stat b { color: #be185d !important; }
body.light .anna-weekly-body { color: #0f172a !important; }
/* Phase 2.A.1.C — Push settings inside journal modal */
.anna-jr-push-wrap {
margin-top: 14px;
padding: 12px 14px;
background: rgba(232,121,166,0.06);
border: 1px solid rgba(232,121,166,0.18);
border-radius: 12px;
}
.anna-jr-push-toggle {
display: flex; align-items: center; gap: 9px;
cursor: pointer;
font-size: 13px; color: rgba(255,255,255,0.85);
}
.anna-jr-push-toggle input[type="checkbox"] { accent-color: #ec4899; width: 16px; height: 16px; }
.anna-jr-push-toggle-ico { display: inline-flex; align-items: center; color: #ec4899; }
.anna-jr-push-toggle-lbl { font-weight: 600; }
.anna-jr-push-time-row {
display: flex; align-items: center; gap: 8px;
margin-top: 10px;
}
.anna-jr-push-time-lbl { font-size: 12px; color: rgba(255,255,255,0.6); }
.anna-jr-push-time {
padding: 6px 9px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 8px;
color: #fff; font-size: 13px;
font-family: inherit;
}
.anna-jr-push-test {
margin-left: auto;
padding: 6px 11px;
background: rgba(232,121,166,0.18);
border: 1px solid rgba(232,121,166,0.45);
border-radius: 8px;
color: #f9a8d4;
font-size: 11.5px; font-weight: 600;
cursor: pointer;
}
.anna-jr-push-test:active { transform: scale(0.96); }
body.light .anna-jr-push-wrap {
background: rgba(232,121,166,0.05) !important;
border-color: rgba(190,24,93,0.20) !important;
}
body.light .anna-jr-push-toggle { color: rgba(15,23,42,0.85) !important; }
body.light .anna-jr-push-time-lbl { color: rgba(15,23,42,0.6) !important; }
body.light .anna-jr-push-time {
background: #fff !important;
border-color: rgba(15,23,42,0.18) !important;
color: #0f172a !important;
}
body.light .anna-jr-push-test { color: #be185d !important; }
/* ─── Anna Phase 2.A.2 — SOS button & modal & crisis card ────────── */
/* Warm-calm palette: amber #d9a26b · sand #e9c884 · sage #a8c9b8 · warm coral #d97757 */
.anna-sos-btn {
position: relative;
animation: annaSosPulse 2.6s ease-in-out infinite;
}
@keyframes annaSosPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(217,162,107,0.5); }
50% { box-shadow: 0 0 0 7px rgba(217,162,107,0); }
}
/* SOS modal */
.anna-sos-wrap {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 16px;
/* Block any scroll passthrough behind */
touch-action: none;
overscroll-behavior: contain;
}
.anna-sos-bg {
position: absolute; inset: 0;
background: rgba(20, 14, 10, 0.78);
backdrop-filter: blur(8px);
}
.anna-sos-card {
position: relative; z-index: 1;
width: 100%; max-width: 420px;
background: linear-gradient(180deg, #2b2018 0%, #1f1813 100%);
border: 1px solid rgba(217,162,107,0.28);
border-radius: 22px;
padding: 24px 22px 22px;
box-shadow: 0 20px 60px rgba(217,162,107,0.16), 0 0 80px rgba(217,162,107,0.06);
color: #f5ebd7;
overscroll-behavior: contain;
}
.anna-sos-stage { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.anna-sos-stage-num {
font-size: 11px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(217,162,107,0.85);
text-align: center;
}
.anna-sos-h {
font-size: 22px; font-weight: 700;
line-height: 1.25; margin: 0;
text-align: center; color: #f5ebd7;
}
.anna-sos-hint {
font-size: 13.5px; line-height: 1.45;
color: rgba(245,235,215,0.72);
text-align: center; margin: 0;
}
.anna-sos-slider-row { display: flex; align-items: center; gap: 14px; padding: 8px 4px; }
/* Custom pointer-based slider — replaces native input[type=range] (iOS leaks touchmove) */
.anna-sos-cs {
position: relative;
flex: 1;
height: 38px;
cursor: pointer;
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.anna-sos-cs-track {
position: absolute;
left: 13px; right: 13px; top: 50%;
height: 8px; border-radius: 6px;
transform: translateY(-50%);
background: linear-gradient(90deg, #a8c9b8 0%, #e9c884 50%, #d97757 100%);
pointer-events: none;
}
.anna-sos-cs-thumb {
position: absolute;
top: 50%;
width: 26px; height: 26px; border-radius: 50%;
background: #fff;
border: 3px solid #d9a26b;
box-shadow: 0 2px 10px rgba(0,0,0,0.45);
transform: translate(-50%, -50%);
pointer-events: none;
transition: transform 0.08s ease;
}
.anna-sos-cs:active .anna-sos-cs-thumb {
transform: translate(-50%, -50%) scale(1.15);
}
/* Global lock when SOS modal open.
NOTE: scroll containment is done in JS (_annaSosCollectScrollers) which
freezes every actually-scrollable element by computed style. These CSS
rules are belt-and-braces — they cover the known scroll containers across
screens (the previous version targeted #chat / .chat-wrap / .chat-area
which do not exist in this app's DOM and therefore did nothing).
FIX 25.05.2026: removed .screen and .screen.active from selector list —
.screen is the tab container (already overflow:hidden, never scrolls
itself) and applying touch-action:none to it KILLS the horizontal
tab-swipe gesture if the lock ever lingers (any class-restore failure,
any partial-cleanup path, any future modal stacking). The actual inner
scrollers (.chat-messages, #chat-msgs, #council-messages, .obt-scr,
.jp__body) are still covered, plus JS hard-freezes every detected
scroller by computed style. */
body.anna-sos-locked,
body.anna-sos-locked .chat-messages,
body.anna-sos-locked #chat-msgs,
body.anna-sos-locked #council-messages,
body.anna-sos-locked .obt-scr,
body.anna-sos-locked .jp__body {
touch-action: none !important;
overflow: hidden !important;
-webkit-overflow-scrolling: auto !important;
overscroll-behavior: none !important;
}
.anna-sos-num {
font-size: 32px; font-weight: 800;
color: #d9a26b; min-width: 40px; text-align: center;
}
.anna-sos-cta {
background: linear-gradient(135deg, #d9a26b, #b87f4f);
color: #fff; font-weight: 700; font-size: 15px;
padding: 14px 18px; border-radius: 14px; border: none;
cursor: pointer; transition: transform 0.15s ease;
box-shadow: 0 6px 18px rgba(217,162,107,0.35);
}
.anna-sos-cta:active { transform: scale(0.97); }
.anna-sos-close {
background: transparent; border: none;
color: rgba(245,235,215,0.5); font-size: 13px;
padding: 8px; cursor: pointer;
}
/* Stage 2: grounding — sand/amber */
.anna-sos-ground-big {
font-size: 64px; font-weight: 800;
color: #d9a26b; text-align: center;
text-shadow: 0 0 24px rgba(217,162,107,0.4);
line-height: 1;
}
/* Stage 3: breath orb — warm peach inhale → soft sage exhale */
.anna-sos-breath-wrap {
display: flex; flex-direction: column; align-items: center; gap: 12px;
padding: 18px 0 10px;
}
.anna-sos-breath-orb {
width: 140px; height: 140px; border-radius: 50%;
background: radial-gradient(circle, rgba(217,162,107,0.5) 0%, rgba(217,162,107,0.12) 70%);
border: 2px solid rgba(217,162,107,0.35);
transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1), background 1.5s ease;
transform: scale(0.6);
}
.anna-sos-breath-orb.breath-inhale1 {
transform: scale(1.0);
background: radial-gradient(circle, rgba(233,200,132,0.65) 0%, rgba(217,162,107,0.18) 70%);
transition: transform 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.anna-sos-breath-orb.breath-inhale2 {
transform: scale(1.3);
background: radial-gradient(circle, rgba(245,235,215,0.45) 0%, rgba(233,200,132,0.22) 70%);
border-color: rgba(245,235,215,0.42);
transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.anna-sos-breath-orb.breath-exhale {
transform: scale(0.55);
background: radial-gradient(circle, rgba(168,201,184,0.5) 0%, rgba(168,201,184,0.08) 70%);
border-color: rgba(168,201,184,0.5);
transition: transform 7.5s cubic-bezier(0.4, 0, 0.6, 1), background 6s ease, border-color 6s ease;
}
.anna-sos-breath-text {
font-size: 16px; font-weight: 600;
color: rgba(245,235,215,0.92);
text-align: center; min-height: 22px;
}
/* Progress bar (replaces 14 dots) */
.anna-sos-progress-wrap {
width: 100%; padding: 4px 4px 0;
display: flex; flex-direction: column; gap: 6px;
}
.anna-sos-progress-bar {
width: 100%; height: 6px; border-radius: 4px;
background: rgba(245,235,215,0.12);
overflow: hidden; position: relative;
}
.anna-sos-progress-fill {
height: 100%; border-radius: 4px;
background: linear-gradient(90deg, #a8c9b8, #d9a26b);
width: 0%; transition: width 0.4s ease;
}
.anna-sos-progress-meta {
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; color: rgba(245,235,215,0.6);
font-variant-numeric: tabular-nums;
}
.anna-sos-skip-btn {
margin-top: 4px;
background: transparent; border: 1px solid rgba(245,235,215,0.18);
color: rgba(245,235,215,0.6); font-size: 12px;
padding: 8px 14px; border-radius: 10px; cursor: pointer;
align-self: center;
}
/* Result stage */
.anna-sos-result { text-align: center; padding: 8px 0; }
.anna-sos-result.improved .anna-sos-result-ico { color: #a8c9b8; }
.anna-sos-result .anna-sos-result-ico {
color: #e9c884;
margin: 0 auto 8px;
display: flex; justify-content: center;
}
.anna-sos-result-body {
font-size: 14px; line-height: 1.55;
color: rgba(245,235,215,0.85);
padding: 0 8px; margin: 4px 0 12px;
}
/* Crisis card in chat */
.anna-crisis-card {
margin: 12px 4px;
padding: 16px;
background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.08));
border: 1.5px solid rgba(239,68,68,0.42);
border-radius: 16px;
display: flex; flex-direction: column; gap: 10px;
box-shadow: 0 6px 20px rgba(239,68,68,0.18);
}
.anna-crisis-card.sev-high {
background: linear-gradient(135deg, rgba(239,68,68,0.22), rgba(220,38,38,0.14));
border-color: rgba(239,68,68,0.6);
box-shadow: 0 6px 24px rgba(239,68,68,0.28);
}
.anna-crisis-head {
display: flex; align-items: center; gap: 10px;
}
.anna-crisis-ico { color: #ef4444; flex-shrink: 0; }
.anna-crisis-title {
font-size: 14.5px; font-weight: 700;
color: #fecaca;
}
.anna-crisis-card.sev-high .anna-crisis-title { color: #fee2e2; }
.anna-crisis-call {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: rgba(239,68,68,0.18);
border: 1px solid rgba(239,68,68,0.42);
border-radius: 12px;
color: #fff; text-decoration: none;
font-size: 14px;
transition: background 0.15s ease;
}
.anna-crisis-call:active { background: rgba(239,68,68,0.32); }
.anna-crisis-call.alt {
background: rgba(99,102,241,0.12);
border-color: rgba(99,102,241,0.32);
padding: 9px 12px; font-size: 13px;
}
.anna-crisis-call svg { color: #fecaca; flex-shrink: 0; }
.anna-crisis-call.alt svg { color: #c7d2fe; }
.anna-crisis-sub {
font-size: 11px;
color: rgba(255,255,255,0.6);
font-weight: 400;
}
.anna-crisis-sos-btn {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff; font-weight: 700; font-size: 14px;
padding: 11px 14px; border-radius: 12px; border: none;
cursor: pointer; margin-top: 2px;
box-shadow: 0 4px 14px rgba(239,68,68,0.35);
}
/* Light theme — warm cream */
body.light .anna-sos-card {
background: linear-gradient(180deg, #fffaf2, #fff5e6);
color: #3d2f20;
border-color: rgba(217,162,107,0.35);
box-shadow: 0 20px 60px rgba(217,162,107,0.18);
}
body.light .anna-sos-h { color: #3d2f20; }
body.light .anna-sos-hint { color: rgba(61,47,32,0.7); }
body.light .anna-sos-breath-text { color: rgba(61,47,32,0.88); }
body.light .anna-sos-result-body { color: rgba(61,47,32,0.78); }
body.light .anna-sos-close { color: rgba(61,47,32,0.5); }
body.light .anna-sos-progress-bar { background: rgba(61,47,32,0.1); }
body.light .anna-sos-progress-meta { color: rgba(61,47,32,0.55); }
body.light .anna-sos-skip-btn {
border-color: rgba(61,47,32,0.18);
color: rgba(61,47,32,0.6);
}
body.light .anna-crisis-card {
background: linear-gradient(135deg, #fef2f2, #fee2e2);
}
body.light .anna-crisis-title { color: #991b1b; }
body.light .anna-crisis-card.sev-high .anna-crisis-title { color: #7f1d1d; }
body.light .anna-crisis-call {
background: rgba(239,68,68,0.1);
color: #0f172a;
border-color: rgba(239,68,68,0.32);
}
body.light .anna-crisis-call svg { color: #b91c1c; }
body.light .anna-crisis-call.alt {
background: rgba(99,102,241,0.08);
border-color: rgba(99,102,241,0.28);
}
body.light .anna-crisis-call.alt svg { color: #4338ca; }
body.light .anna-crisis-sub { color: rgba(15,23,42,0.55); }
/* ─── Anna Phase 2.A.3.2 — Tests (Карта состояния) ───────────────── */
.anna-tests-wrap {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 16px; touch-action: none;
}
.anna-tests-bg {
position: absolute; inset: 0;
background: rgba(8, 6, 18, 0.78);
backdrop-filter: blur(8px);
}
.anna-tests-card {
position: relative; z-index: 1;
width: 100%; max-width: 460px;
max-height: calc(100vh - 32px);
overflow-y: auto;
background: linear-gradient(180deg, #1c1830 0%, #15122a 100%);
border: 1px solid rgba(167, 139, 250, 0.28);
border-radius: 22px;
padding: 22px 20px;
box-shadow: 0 20px 60px rgba(167, 139, 250, 0.18);
color: #f1f0ff;
}
.anna-tests-loading, .anna-tests-err, .anna-tests-empty {
padding: 30px 16px; text-align: center;
color: rgba(241, 240, 255, 0.65);
font-size: 14px;
}
.anna-tests-err { color: #fca5a5; }
.anna-tests-head { text-align: center; margin-bottom: 16px; }
.anna-tests-h {
font-size: 22px; font-weight: 700; margin: 0 0 8px;
color: #c4b5fd;
}
.anna-tests-hint {
font-size: 13px; line-height: 1.5; margin: 0;
color: rgba(241, 240, 255, 0.7);
}
.anna-tests-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.anna-tests-row {
display: flex; align-items: center; gap: 12px;
padding: 14px 14px;
background: rgba(167, 139, 250, 0.07);
border: 1px solid rgba(167, 139, 250, 0.18);
border-radius: 14px;
}
.anna-tests-row-l { flex: 1; min-width: 0; }
.anna-tests-row-name { font-size: 15px; font-weight: 600; color: #f1f0ff; margin-bottom: 4px; }
.anna-tests-row-meta { font-size: 11px; color: rgba(241,240,255,0.55); margin-bottom: 4px; }
.anna-tests-row-last { font-size: 12px; color: #c4b5fd; }
.anna-tests-row-go {
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
color: #fff; font-weight: 600; font-size: 13px;
padding: 10px 16px; border-radius: 10px; border: none;
cursor: pointer; white-space: nowrap; flex-shrink: 0;
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
}
.anna-tests-row-go:active { transform: scale(0.97); }
.anna-tests-cta-secondary {
width: 100%; background: transparent;
border: 1px solid rgba(241, 240, 255, 0.18);
color: rgba(241, 240, 255, 0.75);
font-size: 14px; padding: 12px 16px; border-radius: 12px;
cursor: pointer;
}
.anna-tests-cta-primary {
flex: 1; background: linear-gradient(135deg, #a78bfa, #8b5cf6);
color: #fff; font-weight: 700; font-size: 14px;
padding: 12px 16px; border-radius: 12px; border: none;
cursor: pointer;
}
/* Test runner */
.anna-test-head { margin-bottom: 18px; }
.anna-test-progress-meta {
font-size: 11px; color: rgba(196, 181, 253, 0.85);
text-transform: uppercase; letter-spacing: 0.06em;
font-weight: 700; margin-bottom: 8px; text-align: center;
}
.anna-test-progress-bar {
width: 100%; height: 5px; border-radius: 4px;
background: rgba(241, 240, 255, 0.12); overflow: hidden;
}
.anna-test-progress-fill {
height: 100%;
background: linear-gradient(90deg, #a78bfa, #c4b5fd);
transition: width 0.3s ease;
}
.anna-test-question-wrap { padding: 8px 0 16px; }
.anna-test-instruction {
font-size: 13px; line-height: 1.5;
color: rgba(241, 240, 255, 0.6);
text-align: center; margin-bottom: 16px;
padding: 10px 12px;
background: rgba(167, 139, 250, 0.08);
border-radius: 10px;
}
.anna-test-question {
font-size: 17px; font-weight: 600; line-height: 1.4;
color: #f1f0ff; text-align: center; margin-bottom: 18px;
}
.anna-test-opts { display: flex; flex-direction: column; gap: 8px; }
.anna-test-opt {
display: flex; align-items: center; gap: 12px;
padding: 14px 14px;
background: rgba(241, 240, 255, 0.05);
border: 1.5px solid rgba(241, 240, 255, 0.12);
border-radius: 12px;
color: #f1f0ff; font-size: 14px;
cursor: pointer; text-align: left;
transition: all 0.15s ease;
}
.anna-test-opt-radio {
width: 20px; height: 20px; border-radius: 50%;
border: 2px solid rgba(241, 240, 255, 0.3);
flex-shrink: 0; position: relative;
}
.anna-test-opt.is-on {
background: rgba(167, 139, 250, 0.18);
border-color: #a78bfa;
}
.anna-test-opt.is-on .anna-test-opt-radio {
border-color: #a78bfa;
}
.anna-test-opt.is-on .anna-test-opt-radio::after {
content: '';
position: absolute; top: 50%; left: 50%;
width: 10px; height: 10px; border-radius: 50%;
background: #a78bfa;
transform: translate(-50%, -50%);
}
.anna-test-opt-lbl { flex: 1; }
.anna-test-nav { display: flex; gap: 10px; margin-top: 16px; }
.anna-test-back, .anna-test-next, .anna-test-submit {
flex: 1;
font-size: 14px; font-weight: 600;
padding: 12px 14px; border-radius: 12px; border: none;
cursor: pointer;
transition: opacity 0.15s ease;
}
.anna-test-back {
background: transparent;
border: 1px solid rgba(241, 240, 255, 0.18);
color: rgba(241, 240, 255, 0.75);
}
.anna-test-back:disabled { opacity: 0.3; cursor: default; }
.anna-test-next, .anna-test-submit {
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
color: #fff;
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
}
.anna-test-next:disabled, .anna-test-submit:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
/* Result */
.anna-test-result { padding: 4px 0; }
.anna-test-result-head { text-align: center; margin-bottom: 16px; }
.anna-test-result-title {
font-size: 11px; text-transform: uppercase;
letter-spacing: 0.08em; font-weight: 700;
color: rgba(196, 181, 253, 0.75); margin-bottom: 6px;
}
.anna-test-result-big {
font-size: 56px; font-weight: 800;
color: #c4b5fd; line-height: 1;
}
.anna-test-result-max {
font-size: 22px; color: rgba(241, 240, 255, 0.45); font-weight: 500;
}
.anna-test-result-bar {
width: 100%; height: 8px; border-radius: 5px;
background: rgba(241, 240, 255, 0.12);
overflow: hidden; margin: 14px 0;
}
.anna-test-result-fill {
height: 100%;
background: linear-gradient(90deg, #a78bfa, #c4b5fd);
transition: width 0.5s ease;
}
.anna-test-result.sev-mild .anna-test-result-fill { background: linear-gradient(90deg, #fbbf24, #fcd34d); }
.anna-test-result.sev-moderate .anna-test-result-fill { background: linear-gradient(90deg, #fb923c, #fbbf24); }
.anna-test-result.sev-moderately_severe .anna-test-result-fill { background: linear-gradient(90deg, #f87171, #fb923c); }
.anna-test-result.sev-severe .anna-test-result-fill { background: linear-gradient(90deg, #ef4444, #f87171); }
.anna-test-result-sev {
font-size: 14px; text-align: center;
color: rgba(241, 240, 255, 0.78); margin-bottom: 14px;
}
.anna-test-result-sev b { color: #c4b5fd; font-weight: 700; }
/* Crisis card embedded in result */
.anna-test-crisis {
margin: 16px 0;
padding: 16px 14px;
background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.08));
border: 1.5px solid rgba(239,68,68,0.42);
border-radius: 14px;
}
.anna-test-crisis.sev-high {
background: linear-gradient(135deg, rgba(239,68,68,0.22), rgba(220,38,38,0.14));
border-color: rgba(239,68,68,0.6);
}
.anna-test-crisis-msg {
font-size: 13.5px; line-height: 1.55;
color: rgba(254, 226, 226, 0.92);
margin-bottom: 12px;
white-space: pre-wrap;
}
.anna-test-crisis-call {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: rgba(239,68,68,0.2);
border: 1px solid rgba(239,68,68,0.42);
border-radius: 12px;
color: #fff; text-decoration: none;
font-size: 14px;
}
.anna-test-crisis-call svg { color: #fecaca; flex-shrink: 0; }
.anna-test-crisis-sub { font-size: 11px; color: rgba(255,255,255,0.6); font-weight: 400; }
.anna-test-result-nav { display: flex; gap: 10px; margin-top: 6px; }
/* Anna narrative (LLM-generated breakdown — 2.A.3.3) */
.anna-test-narrative {
margin: 14px 0;
padding: 14px 14px;
background: linear-gradient(135deg, rgba(232,121,166,0.10), rgba(232,121,166,0.04));
border: 1px solid rgba(232,121,166,0.32);
border-radius: 14px;
}
.anna-test-narrative-head {
display: flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 700;
letter-spacing: 0.04em; text-transform: uppercase;
color: #f9a8d4; margin-bottom: 10px;
}
.anna-test-narrative-head svg { color: #ec4899; flex-shrink: 0; }
.anna-test-narrative-body {
font-size: 14px; line-height: 1.55;
color: rgba(241,240,255,0.92);
white-space: pre-wrap;
}
.anna-test-narrative-loading {
display: flex; align-items: center; gap: 10px;
color: rgba(241,240,255,0.55); font-size: 13px;
font-style: italic;
}
.anna-test-narrative-spin {
width: 14px; height: 14px; border-radius: 50%;
border: 2px solid rgba(232,121,166,0.25);
border-top-color: #ec4899;
animation: ann-spin 0.9s linear infinite;
flex-shrink: 0;
}
@keyframes ann-spin { to { transform: rotate(360deg); } }
.anna-test-narrative-err {
color: rgba(252,165,165,0.85); font-size: 13px;
}
body.light .anna-test-narrative {
background: linear-gradient(135deg, rgba(232,121,166,0.08), rgba(232,121,166,0.03));
border-color: rgba(232,121,166,0.32);
}
body.light .anna-test-narrative-head { color: #be185d; }
body.light .anna-test-narrative-body { color: rgba(30,27,75,0.88); }
body.light .anna-test-narrative-loading { color: rgba(30,27,75,0.55); }
/* Light theme */
body.light .anna-tests-card {
background: linear-gradient(180deg, #fff, #f5f3ff);
color: #1e1b4b;
border-color: rgba(167, 139, 250, 0.32);
}
body.light .anna-tests-h { color: #6d28d9; }
body.light .anna-tests-hint { color: rgba(30,27,75,0.7); }
body.light .anna-tests-row {
background: rgba(167, 139, 250, 0.08);
border-color: rgba(167, 139, 250, 0.25);
}
body.light .anna-tests-row-name { color: #1e1b4b; }
body.light .anna-tests-row-meta { color: rgba(30,27,75,0.55); }
body.light .anna-tests-row-last { color: #6d28d9; }
body.light .anna-tests-cta-secondary {
border-color: rgba(30,27,75,0.18);
color: rgba(30,27,75,0.7);
}
body.light .anna-test-question { color: #1e1b4b; }
body.light .anna-test-instruction {
background: rgba(167,139,250,0.1);
color: rgba(30,27,75,0.7);
}
body.light .anna-test-progress-meta { color: #6d28d9; }
body.light .anna-test-opt {
background: rgba(167, 139, 250, 0.05);
border-color: rgba(30,27,75,0.12);
color: #1e1b4b;
}
body.light .anna-test-opt.is-on {
background: rgba(167, 139, 250, 0.18);
}
body.light .anna-test-result-sev { color: rgba(30,27,75,0.78); }
body.light .anna-test-result-sev b { color: #6d28d9; }
body.light .anna-test-back { border-color: rgba(30,27,75,0.2); color: rgba(30,27,75,0.7); }
/* ─── Phase 1M.10.5 — Solar Return card ──────────────────────────── */
.stella-sr-card {
background:
radial-gradient(circle at 50% 0%, rgba(251,191,36,0.20), transparent 60%),
linear-gradient(180deg, rgba(45,30,15,0.55), rgba(15,10,5,0.78)) !important;
border: 1px solid rgba(251,191,36,0.35) !important;
}
.stella-sr-card .stella-syn-hdr-ttl {
background: linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #ec4899 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
body.light .stella-sr-card {
background: linear-gradient(180deg, rgba(251,191,36,0.06), rgba(255,255,255,0.5)) !important;
border-color: rgba(245,158,11,0.40) !important;
}
body.light .stella-sr-card .stella-syn-hdr-ttl {
background: linear-gradient(135deg, #b45309 0%, #c2410c 50%, #be185d 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ─── Phase 1M.9.5 — Follow-up reflection на ключевые даты 30д ─────── */
.stella-reflect-card {
background: linear-gradient(180deg, rgba(251,191,36,0.10), rgba(15,18,30,0.7)) !important;
border: 1px solid rgba(251,191,36,0.32) !important;
padding: 16px 14px !important;
}
.stella-reflect-hdr {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10.5px; font-weight: 700;
color: rgba(251,191,36,0.9);
text-transform: uppercase; letter-spacing: 0.10em;
margin-bottom: 10px;
}
.stella-reflect-ttl {
font-size: 16px; font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.stella-reflect-hint {
font-size: 12.5px;
color: rgba(255,255,255,0.65);
line-height: 1.5;
margin-bottom: 14px;
}
.stella-reflect-emojis {
display: flex; justify-content: space-between; gap: 4px;
margin-bottom: 12px;
}
.stella-reflect-emoji {
flex: 1;
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 9px 4px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 10px;
cursor: pointer;
transition: all 0.18s;
}
.stella-reflect-emoji:hover { background: rgba(255,255,255,0.08); }
.stella-reflect-emoji:active { transform: scale(0.94); }
.stella-reflect-emoji.is-picked {
background: rgba(251,191,36,0.20);
border-color: rgba(251,191,36,0.60);
transform: scale(1.05);
box-shadow: 0 4px 14px rgba(251,191,36,0.25);
}
.stella-reflect-emoji-glyph { font-size: 24px; line-height: 1; }
.stella-reflect-emoji-lbl {
font-size: 9.5px; font-weight: 600;
color: rgba(255,255,255,0.6);
text-transform: uppercase; letter-spacing: 0.03em;
}
.stella-reflect-emoji.is-picked .stella-reflect-emoji-lbl { color: #fbbf24; }
.stella-reflect-comment {
width: 100%; box-sizing: border-box;
padding: 9px 11px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
color: #fff; font-size: 13px;
resize: none; outline: none;
margin-bottom: 10px;
font-family: inherit;
}
.stella-reflect-comment:focus { border-color: rgba(251,191,36,0.45); }
.stella-reflect-actions {
display: flex; gap: 8px;
}
.stella-reflect-btn-skip {
flex: 0 0 auto;
padding: 11px 16px;
background: transparent;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 10px;
color: rgba(255,255,255,0.55);
font-size: 12.5px; font-weight: 600;
cursor: pointer;
}
.stella-reflect-btn-skip:hover { background: rgba(255,255,255,0.04); }
.stella-reflect-btn-save {
flex: 1;
padding: 11px 16px;
background: linear-gradient(135deg, #eab308, #fbbf24);
border: none;
border-radius: 10px;
color: #1a1408;
font-size: 13px; font-weight: 800;
cursor: pointer;
box-shadow: 0 4px 12px rgba(234,179,8,0.32);
transition: opacity 0.15s, transform 0.1s;
}
.stella-reflect-btn-save:active { transform: scale(0.97); }
.stella-reflect-btn-save.is-disabled,
.stella-reflect-btn-save[disabled] {
opacity: 0.35; cursor: not-allowed; box-shadow: none;
}
.stella-reflect-remaining {
margin-top: 10px;
font-size: 11px;
color: rgba(255,255,255,0.4);
text-align: center;
font-style: italic;
}
.stella-reflect-done {
text-align: center; padding: 22px 16px !important;
}
.stella-reflect-done-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 50px; height: 50px;
margin: 0 auto 10px;
background: linear-gradient(135deg, #22c55e, #16a34a);
border-radius: 50%;
color: #fff; font-size: 24px; font-weight: 700;
box-shadow: 0 4px 14px rgba(34,197,94,0.35);
}
.stella-reflect-done-txt {
font-size: 13px; color: rgba(255,255,255,0.85);
line-height: 1.5;
}
body.light .stella-reflect-card {
background: linear-gradient(180deg, rgba(251,191,36,0.06), rgba(255,255,255,0.5)) !important;
border-color: rgba(245,158,11,0.35) !important;
}
body.light .stella-reflect-ttl { color: #0f172a !important; }
body.light .stella-reflect-hint { color: rgba(15,23,42,0.65) !important; }
body.light .stella-reflect-hdr { color: #b45309 !important; }
body.light .stella-reflect-emoji {
background: rgba(15,23,42,0.03) !important;
border-color: rgba(15,23,42,0.10) !important;
}
body.light .stella-reflect-emoji.is-picked {
background: rgba(251,191,36,0.16) !important;
border-color: rgba(245,158,11,0.60) !important;
}
body.light .stella-reflect-emoji-lbl { color: rgba(15,23,42,0.55) !important; }
body.light .stella-reflect-emoji.is-picked .stella-reflect-emoji-lbl { color: #b45309 !important; }
body.light .stella-reflect-comment {
background: rgba(15,23,42,0.03) !important;
border-color: rgba(15,23,42,0.14) !important;
color: #0f172a !important;
}
body.light .stella-reflect-btn-skip {
border-color: rgba(15,23,42,0.16) !important;
color: rgba(15,23,42,0.55) !important;
}
body.light .stella-reflect-done-txt { color: rgba(15,23,42,0.85) !important; }
.stella-mirror-toast {
position: fixed;
bottom: 110px;
left: 50%;
transform: translateX(-50%);
background: rgba(15,15,25,0.92);
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 12px 18px;
border-radius: 12px;
z-index: 10000;
max-width: 86%;
text-align: center;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
transition: opacity 0.3s ease;
border: 1px solid rgba(139,92,246,0.4);
}
.stella-mirror-toast.err {
background: rgba(40,15,25,0.95);
border-color: rgba(244,63,94,0.45);
}
/* Light theme */
body.light .stella-mirror-btn {
background: linear-gradient(135deg, rgba(234,179,8,0.12), rgba(124,58,237,0.08));
border-color: rgba(234,179,8,0.35);
}
body.light .stella-mirror-card {
background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(234,179,8,0.05));
border-color: rgba(124,58,237,0.25);
}
body.light .stella-mirror-hdr-ttl {
background: linear-gradient(135deg, #d97706, #b45309);
-webkit-background-clip: text;
background-clip: text;
}
body.light .stella-mirror-load-inner {
background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(234,179,8,0.04));
border-color: rgba(124,58,237,0.20);
}
body.light .stella-mirror-toast {
background: rgba(255,255,255,0.95);
color: #1a1a2a;
border-color: rgba(124,58,237,0.35);
}
/* Mirror selfie trigger button (input bar, parallel to chart-btn) */
.stella-mirror-inp-btn {
color: #fbbf24 !important;
background: linear-gradient(135deg, rgba(234,179,8,0.18), rgba(251,191,36,0.10)) !important;
border-color: rgba(234,179,8,0.45) !important;
}
.stella-mirror-inp-btn:active {
background: linear-gradient(135deg, rgba(234,179,8,0.30), rgba(251,191,36,0.18)) !important;
transform: scale(0.94);
}
body.light .stella-mirror-inp-btn {
color: #b45309 !important;
background: linear-gradient(135deg, rgba(234,179,8,0.12), rgba(251,191,36,0.06)) !important;
border-color: rgba(234,179,8,0.40) !important;
}
/* ─── Phase 1C: Stella «Fate Scenario 30 days» (24.05.2026) ─── */
.stella-fate-btn {
color: #fde68a !important;
background: linear-gradient(135deg, rgba(124,58,237,0.20), rgba(234,179,8,0.14)) !important;
border-color: rgba(124,58,237,0.45) !important;
}
.stella-fate-btn:active {
background: linear-gradient(135deg, rgba(124,58,237,0.30), rgba(234,179,8,0.22)) !important;
transform: scale(0.94);
}
body.light .stella-fate-btn {
color: #6d28d9 !important;
background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(234,179,8,0.06)) !important;
border-color: rgba(124,58,237,0.35) !important;
}
.stella-fate-result { display: flex; flex-direction: column; }
.stella-fate-card {
background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(15,15,30,0.4));
border: 1px solid rgba(124,58,237,0.45);
border-radius: 18px;
padding: 18px 20px;
margin: 8px 12px;
max-width: 94%;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: 0 12px 32px -12px rgba(124,58,237,0.40);
position: relative;
overflow: hidden;
}
.stella-fate-card::before {
content: "";
position: absolute;
inset: -50% -20% auto auto;
width: 60%; height: 80%;
background: radial-gradient(circle, rgba(251,191,36,0.16), transparent 65%);
pointer-events: none;
}
.stella-fate-hdr {
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 1;
}
.stella-fate-hdr-text { flex: 1; min-width: 0; }
.stella-fate-hdr-ttl {
font-size: 13.5px;
font-weight: 800;
background: linear-gradient(135deg, #c4b5fd 0%, #fde68a 60%, #fbbf24 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
letter-spacing: 0.02em;
line-height: 1.2;
}
.stella-fate-hdr-range {
font-size: 12px;
font-weight: 700;
color: var(--text);
margin-top: 3px;
}
.stella-fate-hdr-cnt {
font-size: 10.5px;
color: var(--text3);
margin-top: 2px;
letter-spacing: 0.02em;
}
.stella-fate-body {
font-size: 14px;
line-height: 1.62;
color: var(--text);
position: relative;
z-index: 1;
max-height: 540px;
overflow-y: auto;
padding-right: 4px;
-webkit-overflow-scrolling: touch;
}
.stella-fate-body p {
margin: 0 0 11px 0;
}
.stella-fate-body p:last-child { margin-bottom: 0; }
.stella-fate-foot {
display: flex;
flex-direction: column;
gap: 8px;
border-top: 1px dashed rgba(124,58,237,0.30);
padding-top: 11px;
position: relative;
z-index: 1;
}
.stella-fate-foot-hint {
font-size: 11.5px;
color: var(--text3);
font-style: italic;
}
.stella-fate-refresh {
align-self: flex-start;
background: rgba(124,58,237,0.18);
border: 1px solid rgba(124,58,237,0.40);
color: #c4b5fd;
font-size: 12px;
font-weight: 700;
font-family: inherit;
padding: 7px 12px;
border-radius: 9px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.stella-fate-refresh:active { background: rgba(124,58,237,0.30); }
body.light .stella-fate-card {
background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(234,179,8,0.04));
border-color: rgba(124,58,237,0.25);
}
body.light .stella-fate-hdr-ttl {
background: linear-gradient(135deg, #6d28d9 0%, #b45309 100%);
-webkit-background-clip: text;
background-clip: text;
}
body.light .stella-fate-refresh {
background: rgba(124,58,237,0.08);
border-color: rgba(124,58,237,0.25);
color: #6d28d9;
}
/* ─── Phase 1D: Biorhythm form section + welcome plate (24.05.2026) ─── */
.stella-bio-wrap {
display: flex;
flex-direction: column;
margin-top: 6px;
border: 1px dashed rgba(139,92,246,0.30);
border-radius: 12px;
padding: 12px 14px;
background: rgba(139,92,246,0.04);
}
.stella-bio-toggle {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.stella-bio-toggle input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: #8b5cf6;
cursor: pointer;
margin: 0;
}
.stella-bio-toggle-label {
font-size: 13.5px;
font-weight: 700;
color: var(--text);
}
.stella-bio-section {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 12px;
}
.stella-bio-intro {
font-size: 11.5px;
line-height: 1.5;
color: var(--text2);
font-style: italic;
}
.stella-bio-gender-row {
display: flex;
gap: 8px;
}
.stella-bio-gender-btn {
flex: 1;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: var(--text2);
font-size: 13px;
font-weight: 600;
padding: 9px 12px;
border-radius: 10px;
cursor: pointer;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.stella-bio-gender-btn:active { opacity: 0.85; }
.stella-bio-gender-btn.on {
background: rgba(139,92,246,0.18);
border-color: rgba(139,92,246,0.55);
color: #c4b5fd;
}
.stella-bio-subblock {
display: flex;
flex-direction: column;
gap: 11px;
padding: 12px 14px;
background: rgba(139,92,246,0.06);
border-radius: 10px;
border: 1px solid rgba(139,92,246,0.20);
}
.stella-bio-subblock-ttl {
font-size: 12px;
font-weight: 800;
color: #c4b5fd;
letter-spacing: 0.02em;
margin-bottom: 2px;
}
.stella-bio-privacy {
font-size: 11px;
color: var(--text3);
text-align: center;
padding: 6px 8px;
background: rgba(0,0,0,0.18);
border-radius: 8px;
letter-spacing: 0.01em;
}
.stella-bio-plate {
display: flex;
align-items: center;
gap: 7px;
padding: 9px 13px;
border-radius: 11px;
font-size: 12.5px;
font-weight: 600;
background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(196,181,253,0.04));
border: 1px solid rgba(139,92,246,0.25);
}
.stella-bio-plate--f {
background: linear-gradient(135deg, rgba(244,114,182,0.14), rgba(196,181,253,0.06));
border-color: rgba(244,114,182,0.30);
}
.stella-bio-plate--m {
background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(139,92,246,0.06));
border-color: rgba(251,191,36,0.28);
}
.stella-bio-plate-emoji {
font-size: 16px;
line-height: 1;
}
.stella-bio-plate-lbl {
color: var(--text2);
font-weight: 700;
}
.stella-bio-plate-val {
color: var(--text);
font-weight: 700;
}
.stella-bio-plate-sep {
color: var(--text3);
opacity: 0.6;
}
/* Light theme */
body.light .stella-bio-wrap {
background: rgba(124,58,237,0.03);
border-color: rgba(124,58,237,0.25);
}
body.light .stella-bio-gender-btn {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.08);
color: #4a4a55;
}
body.light .stella-bio-gender-btn.on {
background: rgba(124,58,237,0.10);
border-color: rgba(124,58,237,0.40);
color: #6d28d9;
}
body.light .stella-bio-subblock {
background: rgba(124,58,237,0.04);
border-color: rgba(124,58,237,0.18);
}
body.light .stella-bio-subblock-ttl { color: #6d28d9; }
body.light .stella-bio-privacy {
background: rgba(0,0,0,0.04);
color: #707080;
}
body.light .stella-bio-plate {
background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(124,58,237,0.02));
border-color: rgba(124,58,237,0.18);
}
body.light .stella-bio-plate--f {
background: linear-gradient(135deg, rgba(244,114,182,0.08), rgba(124,58,237,0.03));
border-color: rgba(244,114,182,0.25);
}
body.light .stella-bio-plate--m {
background: linear-gradient(135deg, rgba(217,119,6,0.06), rgba(124,58,237,0.03));
border-color: rgba(217,119,6,0.25);
}
/* ─── Phase 1E: Stella «Electional Dates» (24.05.2026) ─── */
.stella-elect-btn {
color: #f0abfc !important;
background: linear-gradient(135deg, rgba(217,70,239,0.18), rgba(139,92,246,0.10)) !important;
border-color: rgba(217,70,239,0.40) !important;
}
.stella-elect-btn:active {
background: linear-gradient(135deg, rgba(217,70,239,0.30), rgba(139,92,246,0.18)) !important;
transform: scale(0.94);
}
body.light .stella-elect-btn {
color: #a21caf !important;
background: linear-gradient(135deg, rgba(217,70,239,0.10), rgba(124,58,237,0.05)) !important;
border-color: rgba(217,70,239,0.30) !important;
}
/* Modal */
.stella-elect-modal-wrap {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: flex-end;
justify-content: center;
animation: stellaElectIn 0.22s ease-out;
}
@keyframes stellaElectIn {
from { opacity: 0; }
to { opacity: 1; }
}
.stella-elect-modal-bg {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.stella-elect-modal-card {
position: relative;
width: 100%;
max-width: 520px;
max-height: 88vh;
overflow-y: auto;
background: linear-gradient(135deg, #1a1a2e 0%, #0d0d18 100%);
border-top: 1px solid rgba(139,92,246,0.40);
border-radius: 24px 24px 0 0;
padding: 18px 18px 24px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: 0 -16px 48px -8px rgba(139,92,246,0.45);
animation: stellaElectSlide 0.28s cubic-bezier(0.16,1,0.3,1);
-webkit-overflow-scrolling: touch;
}
@keyframes stellaElectSlide {
from { transform: translateY(20%); }
to { transform: translateY(0); }
}
.stella-elect-modal-hdr {
display: flex;
align-items: flex-start;
gap: 12px;
}
.stella-elect-modal-hdr-text { flex: 1; min-width: 0; }
.stella-elect-modal-ttl {
font-size: 16px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.2;
}
.stella-elect-modal-sub {
font-size: 12px;
color: var(--text2);
margin-top: 3px;
line-height: 1.4;
}
.stella-elect-modal-close {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
color: var(--text2);
font-size: 22px;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-family: inherit;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.stella-elect-chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.stella-elect-chip {
display: flex;
align-items: center;
gap: 9px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: var(--text);
font-size: 12.5px;
font-weight: 600;
font-family: inherit;
padding: 11px 12px;
border-radius: 12px;
cursor: pointer;
text-align: left;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s, border-color 0.15s;
min-height: 56px;
}
.stella-elect-chip:active {
background: rgba(139,92,246,0.18);
transform: scale(0.985);
}
.stella-elect-chip.on {
background: linear-gradient(135deg, rgba(217,70,239,0.18), rgba(139,92,246,0.10));
border-color: rgba(217,70,239,0.55);
color: #f0abfc;
}
.stella-elect-chip-em {
width: 20px;
height: 20px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #c4b5fd;
opacity: 0.9;
transition: color 0.15s ease;
}
.stella-elect-chip-em svg { display: block; }
.stella-elect-chip.on .stella-elect-chip-em {
color: #f0abfc;
opacity: 1;
}
body.light .stella-elect-chip-em { color: #7c3aed; }
body.light .stella-elect-chip.on .stella-elect-chip-em { color: #a21caf; }
.stella-elect-custom-wrap {
margin-top: 4px;
}
/* Result card */
.stella-elect-result { display: flex; flex-direction: column; }
.stella-elect-card {
background: linear-gradient(135deg, rgba(217,70,239,0.14), rgba(15,15,30,0.5));
border: 1px solid rgba(217,70,239,0.40);
border-radius: 18px;
padding: 18px 20px;
margin: 8px 12px;
max-width: 94%;
display: flex;
flex-direction: column;
gap: 13px;
box-shadow: 0 12px 32px -12px rgba(217,70,239,0.35);
}
.stella-elect-hdr {
display: flex;
align-items: center;
gap: 12px;
}
.stella-elect-hdr-text { flex: 1; min-width: 0; }
.stella-elect-hdr-ttl {
font-size: 13.5px;
font-weight: 800;
background: linear-gradient(135deg, #f0abfc 0%, #c4b5fd 70%, #fbbf24 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
letter-spacing: 0.02em;
line-height: 1.2;
}
.stella-elect-hdr-cat {
font-size: 12px;
font-weight: 700;
color: var(--text);
margin-top: 3px;
}
.stella-elect-hdr-cnt {
font-size: 10.5px;
color: var(--text3);
margin-top: 2px;
}
.stella-elect-mr {
font-size: 11.5px;
color: #fda4af;
background: rgba(244,63,94,0.10);
border: 1px solid rgba(244,63,94,0.25);
padding: 8px 11px;
border-radius: 9px;
font-weight: 600;
}
.stella-elect-body {
font-size: 14px;
line-height: 1.62;
color: var(--text);
max-height: 540px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.stella-elect-body p { margin: 0 0 11px 0; }
.stella-elect-body p:last-child { margin-bottom: 0; }
.stella-elect-foot {
font-size: 11.5px;
color: var(--text3);
font-style: italic;
border-top: 1px dashed rgba(217,70,239,0.30);
padding-top: 11px;
}
/* Light theme */
body.light .stella-elect-modal-card {
background: linear-gradient(135deg, #fafafa 0%, #f0f0f5 100%);
border-color: rgba(124,58,237,0.30);
}
body.light .stella-elect-modal-close {
background: rgba(0,0,0,0.04);
border-color: rgba(0,0,0,0.08);
}
body.light .stella-elect-chip {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.08);
}
body.light .stella-elect-chip.on {
background: linear-gradient(135deg, rgba(217,70,239,0.08), rgba(124,58,237,0.05));
border-color: rgba(217,70,239,0.40);
color: #a21caf;
}
body.light .stella-elect-card {
background: linear-gradient(135deg, rgba(217,70,239,0.06), rgba(124,58,237,0.03));
border-color: rgba(217,70,239,0.25);
}
body.light .stella-elect-hdr-ttl {
background: linear-gradient(135deg, #a21caf 0%, #6d28d9 100%);
-webkit-background-clip: text;
background-clip: text;
}
/* ─── Phase 1H: Synastry — bottom button + form chips + result card ─── */
.stella-syn-btn {
color: #fda4af !important;
background: linear-gradient(135deg, rgba(244,114,182,0.18), rgba(244,63,94,0.10)) !important;
border-color: rgba(244,114,182,0.40) !important;
}
.stella-syn-btn:active {
background: linear-gradient(135deg, rgba(244,114,182,0.30), rgba(244,63,94,0.18)) !important;
transform: scale(0.94);
}
body.light .stella-syn-btn {
color: #be185d !important;
background: linear-gradient(135deg, rgba(244,114,182,0.10), rgba(244,63,94,0.05)) !important;
border-color: rgba(244,114,182,0.30) !important;
}
.stella-syn-form { display: flex; flex-direction: column; gap: 12px; }
.stella-syn-rel-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.stella-syn-rel-chip {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: var(--text2);
font-size: 12px;
font-weight: 600;
font-family: inherit;
padding: 7px 11px;
border-radius: 9px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.stella-syn-rel-chip:active { opacity: 0.85; }
.stella-syn-rel-chip.on {
background: linear-gradient(135deg, rgba(244,114,182,0.20), rgba(244,63,94,0.10));
border-color: rgba(244,114,182,0.55);
color: #fda4af;
}
body.light .stella-syn-rel-chip {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.08);
color: #4a4a55;
}
body.light .stella-syn-rel-chip.on {
background: linear-gradient(135deg, rgba(244,114,182,0.10), rgba(244,63,94,0.05));
border-color: rgba(244,114,182,0.40);
color: #be185d;
}
.stella-syn-result { display: flex; flex-direction: column; }
.stella-syn-card {
background: linear-gradient(135deg, rgba(244,114,182,0.14), rgba(15,15,30,0.5));
border: 1px solid rgba(244,114,182,0.40);
border-radius: 18px;
padding: 18px 20px;
margin: 8px 12px;
max-width: 94%;
display: flex;
flex-direction: column;
gap: 13px;
box-shadow: 0 12px 32px -12px rgba(244,114,182,0.35);
}
.stella-syn-hdr {
display: flex;
align-items: center;
gap: 12px;
}
.stella-syn-hdr-text { flex: 1; min-width: 0; }
.stella-syn-hdr-ttl {
font-size: 13.5px;
font-weight: 800;
background: linear-gradient(135deg, #fda4af 0%, #f0abfc 60%, #c4b5fd 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
letter-spacing: 0.02em;
line-height: 1.2;
}
.stella-syn-hdr-partner {
font-size: 12px;
font-weight: 600;
color: var(--text);
margin-top: 3px;
}
.stella-syn-hdr-cnt {
font-size: 10.5px;
color: var(--text3);
margin-top: 2px;
}
.stella-syn-body {
font-size: 14px;
line-height: 1.62;
color: var(--text);
max-height: 540px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.stella-syn-body p { margin: 0 0 11px 0; }
.stella-syn-body p:last-child { margin-bottom: 0; }
.stella-syn-foot {
font-size: 11.5px;
color: var(--text3);
font-style: italic;
border-top: 1px dashed rgba(244,114,182,0.30);
padding-top: 11px;
}
body.light .stella-syn-card {
background: linear-gradient(135deg, rgba(244,114,182,0.06), rgba(124,58,237,0.03));
border-color: rgba(244,114,182,0.25);
}
body.light .stella-syn-hdr-ttl {
background: linear-gradient(135deg, #be185d 0%, #a21caf 50%, #6d28d9 100%);
-webkit-background-clip: text;
background-clip: text;
}
/* Phase 1I — Spirit Guide voice row (24.05.2026) */
.stella-sg-voice-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--text);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
padding: 2px 0;
}
.stella-sg-voice-row input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: #8b5cf6;
cursor: pointer;
margin: 0;
}
/* ─── Phase 1J (24.05.2026): unified Stella menu button + bottom-sheet ─── */
.stella-menu-btn {
color: #c4b5fd !important;
background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(196,181,253,0.10)) !important;
border-color: rgba(139,92,246,0.55) !important;
position: relative;
box-shadow: 0 0 0 0 rgba(139,92,246,0.4);
animation: stellaMenuPulse 3.5s ease-in-out infinite;
}
.stella-menu-btn:active {
background: linear-gradient(135deg, rgba(139,92,246,0.35), rgba(196,181,253,0.18)) !important;
transform: scale(0.94);
animation: none;
}
@keyframes stellaMenuPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.0); }
50% { box-shadow: 0 0 12px 2px rgba(139,92,246,0.28); }
}
body.light .stella-menu-btn {
color: #7c3aed !important;
background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(124,58,237,0.04)) !important;
border-color: rgba(124,58,237,0.40) !important;
}
.stella-menu-card {
position: relative;
width: 100%;
max-width: 520px;
max-height: 86vh;
overflow-y: auto;
background: linear-gradient(135deg, #1a1a2e 0%, #0d0d18 100%);
border-top: 1px solid rgba(139,92,246,0.45);
border-radius: 24px 24px 0 0;
padding: 18px 18px 28px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: 0 -16px 48px -8px rgba(139,92,246,0.50);
animation: stellaElectSlide 0.28s cubic-bezier(0.16,1,0.3,1);
-webkit-overflow-scrolling: touch;
}
.stella-menu-hdr {
display: flex;
align-items: flex-start;
gap: 12px;
}
.stella-menu-hdr-text { flex: 1; min-width: 0; }
.stella-menu-hdr-ttl {
font-size: 16px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.2;
}
.stella-menu-hdr-sub {
font-size: 12px;
color: var(--text2);
margin-top: 3px;
line-height: 1.4;
}
.stella-menu-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.stella-menu-item {
display: flex;
align-items: center;
gap: 13px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: var(--text);
font-family: inherit;
padding: 13px 14px;
border-radius: 13px;
cursor: pointer;
text-align: left;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
width: 100%;
min-height: 62px;
}
.stella-menu-item:active {
background: rgba(139,92,246,0.18);
border-color: rgba(139,92,246,0.40);
transform: scale(0.987);
}
.stella-menu-item.is-locked {
opacity: 0.62;
background: rgba(255,255,255,0.025);
}
.stella-menu-item.is-locked:active {
background: rgba(234,179,8,0.10);
border-color: rgba(234,179,8,0.30);
}
.stella-menu-ico {
width: 38px;
height: 38px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.06);
flex-shrink: 0;
}
.stella-menu-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.stella-menu-ttl {
font-size: 14.5px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.2;
}
.stella-menu-sub {
font-size: 11.5px;
color: var(--text2);
line-height: 1.35;
}
.stella-menu-arr {
font-size: 22px;
color: var(--text3);
font-weight: 500;
flex-shrink: 0;
margin-left: 4px;
}
.stella-menu-lock {
color: #fbbf24;
flex-shrink: 0;
margin-left: 4px;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 4px rgba(251,191,36,0.4));
}
/* Light theme */
body.light .stella-menu-card {
background: linear-gradient(135deg, #fafafa 0%, #f0f0f5 100%);
border-color: rgba(124,58,237,0.30);
}
body.light .stella-menu-item {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.08);
}
body.light .stella-menu-item:active {
background: rgba(124,58,237,0.07);
border-color: rgba(124,58,237,0.30);
}
body.light .stella-menu-ico {
background: rgba(0,0,0,0.05);
}
/* ─── Phase 1K (24.05.2026): Stella onboarding promo card на главной ─── */
.stella-home-promo {
margin: 14px 16px;
background: linear-gradient(135deg, rgba(139,92,246,0.30) 0%, rgba(196,181,253,0.10) 50%, rgba(251,191,36,0.12) 100%);
border: 1px solid rgba(196,181,253,0.45);
border-radius: 20px;
padding: 18px 18px 20px;
display: none;
flex-direction: column;
gap: 12px;
position: relative;
overflow: hidden;
cursor: pointer;
box-shadow: 0 12px 32px -10px rgba(139,92,246,0.40);
animation: stellaPromoGlow 4s ease-in-out infinite;
}
@keyframes stellaPromoGlow {
0%, 100% { box-shadow: 0 12px 32px -10px rgba(139,92,246,0.40); }
50% { box-shadow: 0 12px 40px -8px rgba(139,92,246,0.60), 0 0 30px -4px rgba(251,191,36,0.20); }
}
.stella-home-promo::before {
content: "";
position: absolute;
inset: -50% -20% auto auto;
width: 70%; height: 80%;
background: radial-gradient(circle, rgba(251,191,36,0.18), transparent 65%);
pointer-events: none;
}
.stella-home-promo::after {
content: "";
position: absolute;
bottom: -30%; left: -10%;
width: 60%; height: 70%;
background: radial-gradient(circle, rgba(196,181,253,0.18), transparent 65%);
pointer-events: none;
}
.stella-home-promo:active {
transform: scale(0.99);
}
.stella-home-promo-dismiss {
position: absolute;
top: 8px; right: 10px;
color: rgba(255,255,255,0.50);
width: 28px; height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
border-radius: 50%;
z-index: 3;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
}
.stella-home-promo-dismiss:active {
background: rgba(255,255,255,0.08);
}
.stella-home-promo-hdr {
display: flex;
align-items: center;
gap: 14px;
z-index: 1;
position: relative;
}
.stella-home-promo-orb {
width: 56px; height: 56px;
flex-shrink: 0;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #c4b5fd, #8b5cf6);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px -4px rgba(139,92,246,0.55);
animation: stellaPromoOrb 2.8s ease-in-out infinite;
}
@keyframes stellaPromoOrb {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
.stella-home-promo-text { flex: 1; min-width: 0; }
.stella-home-promo-eyebrow {
font-size: 10.5px;
font-weight: 800;
color: #fbbf24;
text-transform: uppercase;
letter-spacing: 0.10em;
margin-bottom: 3px;
}
.stella-home-promo-ttl {
font-size: 17px;
font-weight: 800;
background: linear-gradient(135deg, #c4b5fd 0%, #fde68a 70%, #fbbf24 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.15;
letter-spacing: -0.01em;
}
.stella-home-promo-sub {
font-size: 12.5px;
color: rgba(255,255,255,0.78);
line-height: 1.45;
z-index: 1;
position: relative;
}
.stella-home-promo-features {
display: flex;
flex-wrap: wrap;
gap: 7px;
z-index: 1;
position: relative;
}
.stella-home-promo-feat {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
color: #e5e5f0;
font-size: 11px;
font-weight: 600;
padding: 5px 9px;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.stella-home-promo-feat svg { width: 11px; height: 11px; flex-shrink: 0; }
.stella-home-promo-cta {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
color: #fff;
font-size: 14px;
font-weight: 800;
padding: 12px 16px;
border-radius: 12px;
text-align: center;
box-shadow: 0 6px 18px -4px rgba(139,92,246,0.55);
z-index: 1;
position: relative;
letter-spacing: 0.01em;
}
.stella-home-promo-time {
font-size: 10.5px;
color: rgba(255,255,255,0.55);
text-align: center;
z-index: 1;
position: relative;
}
/* Light theme */
body.light .stella-home-promo {
background: linear-gradient(135deg, rgba(124,58,237,0.10) 0%, rgba(196,181,253,0.06) 50%, rgba(234,179,8,0.06) 100%);
border-color: rgba(124,58,237,0.30);
box-shadow: 0 12px 32px -10px rgba(124,58,237,0.30);
}
body.light .stella-home-promo-dismiss { color: rgba(0,0,0,0.40); }
body.light .stella-home-promo-dismiss:active { background: rgba(0,0,0,0.05); }
body.light .stella-home-promo-ttl {
background: linear-gradient(135deg, #6d28d9 0%, #b45309 100%);
-webkit-background-clip: text;
background-clip: text;
}
body.light .stella-home-promo-sub { color: #4a4a55; }
body.light .stella-home-promo-feat {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.08);
color: #4a4a55;
}
body.light .stella-home-promo-time { color: #8a8a95; }
/* Phase 1M.1 — Двухколоночная строка для Фамилия + Имя (24.05.2026) */
.stella-fio-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.stella-fio-cell { min-width: 0; }
#stella-city-resolved,
#stella-current-city-resolved {
background: rgba(196,181,253,0.10);
border: 1px dashed rgba(196,181,253,0.35);
padding: 6px 9px;
border-radius: 8px;
margin-top: 6px;
color: var(--text2);
}
#stella-city-resolved b,
#stella-current-city-resolved b { color: #c4b5fd; font-weight: 700; }
body.light #stella-city-resolved,
body.light #stella-current-city-resolved {
background: rgba(124,58,237,0.05);
border-color: rgba(124,58,237,0.30);
color: #4a4a55;
}
body.light #stella-city-resolved b,
body.light #stella-current-city-resolved b { color: #6d28d9; }
/* Phase 1M.2 — Synastry chips сгруппированы по контексту (24.05.2026) */
/* Parent .stella-syn-rel-chips это flex-row (legacy для одиночных chips).
Когда внутри groups — каждая group_lbl и chips-row занимает FULL WIDTH через flex-basis:100%
→ label и chips ниже на своих строках, чипы внутри row wrap'аются как row. */
.stella-syn-rel-group-lbl {
flex: 0 0 100%;
width: 100%;
font-size: 11px;
font-weight: 800;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.10em;
margin-top: 12px;
margin-bottom: 2px;
display: flex;
align-items: center;
gap: 6px;
}
.stella-syn-rel-group-ico {
display: inline-flex;
align-items: center;
justify-content: center;
color: #c4b5fd;
flex-shrink: 0;
opacity: 0.9;
}
body.light .stella-syn-rel-group-ico { color: #7c3aed; }
.stella-syn-rel-group-lbl:first-child { margin-top: 0; }
.stella-syn-rel-chips-row {
flex: 0 0 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* Phase 1M.3 — Profile reading card (sky/cyan tone отличается от synastry rose) */
.stella-profile-card {
background: linear-gradient(135deg, rgba(125,211,252,0.14), rgba(15,15,30,0.5)) !important;
border-color: rgba(125,211,252,0.40) !important;
box-shadow: 0 12px 32px -12px rgba(125,211,252,0.35) !important;
}
.stella-profile-card .stella-syn-hdr-ttl {
background: linear-gradient(135deg, #7dd3fc 0%, #c4b5fd 60%, #fda4af 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.stella-profile-card .stella-syn-foot {
border-top-color: rgba(125,211,252,0.30);
}
body.light .stella-profile-card {
background: linear-gradient(135deg, rgba(14,165,233,0.06), rgba(124,58,237,0.03)) !important;
border-color: rgba(14,165,233,0.25) !important;
}
body.light .stella-profile-card .stella-syn-hdr-ttl {
background: linear-gradient(135deg, #0284c7 0%, #6d28d9 50%, #be185d 100%);
-webkit-background-clip: text;
background-clip: text;
}
/* Phase 1M.4 — 12 houses grid + house-card (emerald tone) */
.stella-house-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.stella-house-chip {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: var(--text);
font-family: inherit;
padding: 11px 12px;
border-radius: 12px;
cursor: pointer;
text-align: left;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
min-height: 56px;
}
.stella-house-chip:active {
background: rgba(52,211,153,0.14);
border-color: rgba(52,211,153,0.40);
transform: scale(0.985);
}
.stella-house-chip-num {
width: 24px;
font-size: 14px;
font-weight: 800;
color: #34d399;
text-align: center;
flex-shrink: 0;
}
.stella-house-chip-ico {
display: inline-flex;
align-items: center;
justify-content: center;
color: #c4b5fd;
width: 22px;
height: 22px;
flex-shrink: 0;
}
.stella-house-chip-lbl {
font-size: 12px;
font-weight: 600;
color: var(--text);
line-height: 1.25;
min-width: 0;
}
body.light .stella-house-chip {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.08);
}
body.light .stella-house-chip:active {
background: rgba(5,150,105,0.08);
border-color: rgba(5,150,105,0.30);
}
body.light .stella-house-chip-num { color: #059669; }
body.light .stella-house-chip-ico { color: #7c3aed; }
.stella-house-card {
background: linear-gradient(135deg, rgba(52,211,153,0.14), rgba(15,15,30,0.5)) !important;
border-color: rgba(52,211,153,0.40) !important;
box-shadow: 0 12px 32px -12px rgba(52,211,153,0.35) !important;
}
.stella-house-card .stella-syn-hdr-ttl {
background: linear-gradient(135deg, #34d399 0%, #c4b5fd 60%, #fde68a 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.stella-house-card .stella-syn-foot {
border-top-color: rgba(52,211,153,0.30);
}
body.light .stella-house-card {
background: linear-gradient(135deg, rgba(5,150,105,0.06), rgba(124,58,237,0.03)) !important;
border-color: rgba(5,150,105,0.25) !important;
}
body.light .stella-house-card .stella-syn-hdr-ttl {
background: linear-gradient(135deg, #059669 0%, #6d28d9 50%, #b45309 100%);
-webkit-background-clip: text;
background-clip: text;
}
/* ─── Phase 1M.5 — Журнал ключевых событий + rectification ─────────── */
.stella-events-card {
position: relative;
background: rgba(15,18,30,0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(251,113,133,0.22);
border-radius: 18px 18px 0 0;
padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
width: 100%;
max-width: 520px;
max-height: calc(92vh - env(safe-area-inset-bottom, 0px));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 10000;
box-shadow: 0 -8px 36px rgba(0,0,0,0.55);
}
.stella-events-hdr { margin-bottom: 14px; padding-right: 28px; }
.stella-events-ttl {
font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 6px;
}
.stella-events-hint {
font-size: 12.5px; color: rgba(255,255,255,0.6); line-height: 1.5;
}
.stella-events-empty {
text-align: center; padding: 22px 8px; font-size: 13px; color: rgba(255,255,255,0.48);
background: rgba(255,255,255,0.03); border-radius: 12px;
border: 1px dashed rgba(255,255,255,0.12);
}
.stella-events-list {
display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
}
.stella-event-row {
display: flex; align-items: center; gap: 10px;
padding: 9px 10px;
background: rgba(251,113,133,0.07);
border: 1px solid rgba(251,113,133,0.16);
border-radius: 10px;
}
.stella-event-date {
font-size: 11.5px; font-weight: 600; color: #fb7185;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.stella-event-text {
flex: 1; font-size: 12.5px; color: rgba(255,255,255,0.86);
overflow: hidden; text-overflow: ellipsis;
}
.stella-event-del {
flex-shrink: 0; padding: 4px;
background: transparent; border: none; cursor: pointer;
color: rgba(255,255,255,0.4);
transition: color 0.15s;
}
.stella-event-del:active, .stella-event-del:hover { color: #fb7185; }
.stella-events-actions {
display: flex; gap: 8px;
}
.stella-events-add-btn, .stella-events-go-btn {
flex: 1;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 12px 10px;
font-size: 13px; font-weight: 600;
border-radius: 12px; border: none; cursor: pointer;
transition: transform 0.1s, opacity 0.15s;
}
.stella-events-add-btn {
background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.9);
border: 1px solid rgba(255,255,255,0.14);
}
.stella-events-go-btn {
background: linear-gradient(135deg, #fb7185, #c026d3);
color: #fff;
box-shadow: 0 4px 14px rgba(251,113,133,0.32);
}
.stella-events-go-btn.is-disabled, .stella-events-go-btn[disabled] {
opacity: 0.4; cursor: not-allowed; box-shadow: none;
}
/* Waiting state — кнопка кликабельна, показывает toast «добавь ещё N событий» */
.stella-events-go-btn.is-waiting {
background: rgba(251,113,133,0.18);
color: rgba(255,255,255,0.78);
box-shadow: none;
border: 1px dashed rgba(251,113,133,0.5);
}
.stella-events-go-btn.is-waiting:active { transform: scale(0.97); }
body.light .stella-events-go-btn.is-waiting {
background: rgba(251,113,133,0.10) !important;
color: #be123c !important;
border-color: rgba(251,113,133,0.55) !important;
}
.stella-events-add-btn:active, .stella-events-go-btn:not(.is-disabled):active {
transform: scale(0.97);
}
/* Add event modal */
.stella-events-add-card {
position: relative;
background: rgba(15,18,30,0.96);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(251,113,133,0.22);
border-radius: 18px 18px 0 0;
padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
width: 100%; max-width: 520px;
max-height: calc(92vh - env(safe-area-inset-bottom, 0px));
overflow-y: auto; -webkit-overflow-scrolling: touch;
z-index: 10001;
box-shadow: 0 -8px 36px rgba(0,0,0,0.55);
}
.stella-events-add-ttl {
font-size: 17px; font-weight: 700; color: #fff;
padding-right: 28px; margin-bottom: 14px;
}
.stella-events-add-lbl {
display: block;
font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.5);
text-transform: uppercase; letter-spacing: 0.04em;
margin: 10px 0 6px;
}
.stella-events-add-input {
width: 100%; box-sizing: border-box;
padding: 11px 12px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
color: #fff; font-size: 13.5px;
outline: none; transition: border-color 0.15s;
}
.stella-events-add-input:focus { border-color: rgba(251,113,133,0.55); }
.stella-event-type-chips {
display: flex; flex-wrap: wrap; gap: 6px;
}
.stella-event-type-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 7px 10px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
color: rgba(255,255,255,0.78);
font-size: 11.5px; font-weight: 500;
cursor: pointer; transition: all 0.15s;
}
.stella-event-type-chip .stella-event-type-ico {
display: inline-flex; align-items: center; color: #fb7185; flex-shrink: 0;
}
.stella-event-type-chip.is-on {
background: rgba(251,113,133,0.18);
border-color: rgba(251,113,133,0.55);
color: #fff;
}
.stella-event-type-chip.is-on .stella-event-type-ico { color: #fff; }
.stella-events-add-save {
display: block; width: 100%;
margin-top: 14px; padding: 13px;
background: linear-gradient(135deg, #fb7185, #c026d3);
color: #fff;
font-size: 14px; font-weight: 600;
border: none; border-radius: 12px;
cursor: pointer;
transition: opacity 0.15s, transform 0.1s;
}
.stella-events-add-save.is-disabled, .stella-events-add-save[disabled] {
opacity: 0.35; cursor: not-allowed;
}
.stella-events-add-save:not(.is-disabled):active { transform: scale(0.98); }
/* Event correlation result card */
.stella-event-card {
background: linear-gradient(135deg, rgba(251,113,133,0.10), rgba(192,38,211,0.06)) !important;
border-color: rgba(251,113,133,0.30) !important;
}
.stella-event-card .stella-syn-hdr-ttl {
background: linear-gradient(135deg, #fb7185 0%, #c026d3 60%, #f59e0b 100%);
-webkit-background-clip: text;
background-clip: text;
}
.stella-event-rect {
margin: 12px 0 0;
padding: 12px 12px;
background: rgba(245,158,11,0.10);
border: 1px solid rgba(245,158,11,0.32);
border-radius: 12px;
}
.stella-event-rect-hdr {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 700;
color: #fbbf24;
text-transform: uppercase; letter-spacing: 0.05em;
margin-bottom: 6px;
}
.stella-event-rect-body {
font-size: 12.5px; line-height: 1.55;
color: rgba(255,255,255,0.86);
}
/* Light theme overrides */
body.light .stella-events-card,
body.light .stella-events-add-card {
background: #fff !important;
border-color: rgba(251,113,133,0.30) !important;
box-shadow: 0 12px 40px rgba(2,6,23,0.18) !important;
}
body.light .stella-events-ttl,
body.light .stella-events-add-ttl { color: #0f172a !important; }
body.light .stella-events-hint { color: rgba(15,23,42,0.62) !important; }
body.light .stella-events-empty {
background: rgba(15,23,42,0.03) !important;
color: rgba(15,23,42,0.5) !important;
border-color: rgba(15,23,42,0.12) !important;
}
body.light .stella-event-row {
background: rgba(251,113,133,0.06) !important;
border-color: rgba(251,113,133,0.22) !important;
}
body.light .stella-event-text { color: rgba(15,23,42,0.85) !important; }
body.light .stella-event-del { color: rgba(15,23,42,0.4) !important; }
body.light .stella-events-add-btn {
background: rgba(15,23,42,0.04) !important;
color: rgba(15,23,42,0.9) !important;
border-color: rgba(15,23,42,0.14) !important;
}
body.light .stella-events-add-lbl { color: rgba(15,23,42,0.55) !important; }
body.light .stella-events-add-input {
background: #fff !important;
border-color: rgba(15,23,42,0.18) !important;
color: #0f172a !important;
}
body.light .stella-event-type-chip {
background: rgba(15,23,42,0.04) !important;
border-color: rgba(15,23,42,0.14) !important;
color: rgba(15,23,42,0.75) !important;
}
body.light .stella-event-type-chip.is-on {
background: rgba(251,113,133,0.14) !important;
border-color: rgba(251,113,133,0.6) !important;
color: #be123c !important;
}
body.light .stella-event-card {
background: linear-gradient(135deg, rgba(251,113,133,0.06), rgba(192,38,211,0.03)) !important;
border-color: rgba(251,113,133,0.30) !important;
}
body.light .stella-event-card .stella-syn-hdr-ttl {
background: linear-gradient(135deg, #e11d48 0%, #a21caf 60%, #b45309 100%);
-webkit-background-clip: text;
background-clip: text;
}
body.light .stella-event-rect {
background: rgba(245,158,11,0.08) !important;
border-color: rgba(245,158,11,0.30) !important;
}
body.light .stella-event-rect-hdr { color: #b45309 !important; }
body.light .stella-event-rect-body { color: rgba(15,23,42,0.85) !important; }
/* ─── Phase 1M.6 — История имён + нумерология overlay ─────────────── */
.stella-names-card { border-color: rgba(129,140,248,0.30) !important; }
.stella-name-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: rgba(129,140,248,0.07);
border: 1px solid rgba(129,140,248,0.18);
border-radius: 10px;
}
.stella-name-text { flex: 1; min-width: 0; }
.stella-name-full {
display: flex; align-items: center; gap: 8px;
font-size: 13.5px; font-weight: 600; color: #fff;
}
.stella-name-curbadge {
display: inline-block; padding: 1px 7px;
background: rgba(129,140,248,0.30);
border: 1px solid rgba(129,140,248,0.55);
border-radius: 999px;
font-size: 9.5px; font-weight: 700;
color: #c7d2fe;
text-transform: uppercase; letter-spacing: 0.06em;
}
.stella-name-period {
font-size: 11px; color: rgba(255,255,255,0.55);
margin-top: 2px;
}
.stella-name-curlbl {
display: flex; align-items: center; gap: 8px;
margin-top: 12px; padding: 9px 12px;
background: rgba(129,140,248,0.07);
border: 1px solid rgba(129,140,248,0.18);
border-radius: 10px;
font-size: 12.5px; color: rgba(255,255,255,0.85);
cursor: pointer;
}
.stella-name-curlbl input[type=checkbox] { accent-color: #818cf8; }
.stella-names-go-btn {
flex: 1;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 12px 10px;
font-size: 13px; font-weight: 600;
border-radius: 12px; border: none; cursor: pointer;
background: linear-gradient(135deg, #818cf8, #c026d3);
color: #fff;
box-shadow: 0 4px 14px rgba(129,140,248,0.32);
transition: transform 0.1s;
}
.stella-names-go-btn:active { transform: scale(0.97); }
.stella-names-go-btn.is-waiting {
background: rgba(129,140,248,0.18);
color: rgba(255,255,255,0.78);
box-shadow: none;
border: 1px dashed rgba(129,140,248,0.5);
}
.stella-name-card {
background: linear-gradient(135deg, rgba(129,140,248,0.12), rgba(192,38,211,0.07)) !important;
border-color: rgba(129,140,248,0.30) !important;
}
.stella-name-card .stella-syn-hdr-ttl {
background: linear-gradient(135deg, #818cf8 0%, #c026d3 60%, #f59e0b 100%);
-webkit-background-clip: text; background-clip: text;
}
body.light .stella-names-card { border-color: rgba(129,140,248,0.30) !important; }
body.light .stella-name-row {
background: rgba(129,140,248,0.06) !important;
border-color: rgba(129,140,248,0.22) !important;
}
body.light .stella-name-full { color: #0f172a !important; }
body.light .stella-name-curbadge {
background: rgba(129,140,248,0.18) !important;
border-color: rgba(129,140,248,0.55) !important;
color: #4338ca !important;
}
body.light .stella-name-period { color: rgba(15,23,42,0.55) !important; }
body.light .stella-name-curlbl {
background: rgba(129,140,248,0.06) !important;
border-color: rgba(129,140,248,0.22) !important;
color: rgba(15,23,42,0.85) !important;
}
body.light .stella-names-go-btn.is-waiting {
background: rgba(129,140,248,0.10) !important;
color: #4338ca !important;
border-color: rgba(129,140,248,0.55) !important;
}
body.light .stella-name-card {
background: linear-gradient(135deg, rgba(129,140,248,0.08), rgba(192,38,211,0.04)) !important;
border-color: rgba(129,140,248,0.30) !important;
}
body.light .stella-name-card .stella-syn-hdr-ttl {
background: linear-gradient(135deg, #4338ca 0%, #a21caf 60%, #b45309 100%);
-webkit-background-clip: text; background-clip: text;
}
/* ─── Phase 1M.7 — Menu sections + VIP gating ────────────────────────── */
.stella-menu-section-lbl {
display: flex; align-items: center; gap: 8px;
margin: 12px 4px 6px;
font-size: 10.5px; font-weight: 700;
color: rgba(196,181,253,0.55);
text-transform: uppercase; letter-spacing: 0.10em;
}
.stella-menu-section-lbl::before,
.stella-menu-section-lbl::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(196,181,253,0.18), transparent);
}
.stella-menu-section-lbl-deep {
color: rgba(251,113,133,0.55);
}
.stella-menu-section-lbl-deep::before,
.stella-menu-section-lbl-deep::after {
background: linear-gradient(90deg, transparent, rgba(251,113,133,0.20), transparent);
}
.stella-menu-section-lbl:first-of-type { margin-top: 4px; }
.stella-menu-vip {
display: inline-flex; align-items: center; justify-content: center;
padding: 3px 9px;
background: linear-gradient(135deg, #fbbf24, #d97706);
color: #2a1a05;
font-size: 10px; font-weight: 800;
letter-spacing: 0.08em;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(251,191,36,0.35);
text-shadow: 0 1px 0 rgba(255,255,255,0.18);
}
.stella-menu-item.is-vip-locked {
position: relative;
}
.stella-menu-item.is-vip-locked .stella-menu-ico {
opacity: 0.65;
}
.stella-menu-item.is-vip-locked .stella-menu-sub {
color: rgba(251,191,36,0.7);
}
body.light .stella-menu-section-lbl { color: rgba(67,56,202,0.65) !important; }
body.light .stella-menu-section-lbl::before,
body.light .stella-menu-section-lbl::after {
background: linear-gradient(90deg, transparent, rgba(67,56,202,0.18), transparent) !important;
}
body.light .stella-menu-section-lbl-deep { color: rgba(225,29,72,0.65) !important; }
body.light .stella-menu-section-lbl-deep::before,
body.light .stella-menu-section-lbl-deep::after {
background: linear-gradient(90deg, transparent, rgba(225,29,72,0.18), transparent) !important;
}
body.light .stella-menu-vip {
color: #fff !important;
background: linear-gradient(135deg, #f59e0b, #b45309) !important;
}
/* ════════════════════════════════════════════════════════════════════
Dmitry Sprint 2.1 — Аудит недели (Weekly Audit)
Indigo palette #6366f1. Dark+light themes. Overflow protection canon.
════════════════════════════════════════════════════════════════════ */
.dmitry-audit-card-wrap {
/* Override default board card border for audit modal */
border-color: rgba(99,102,241,0.32);
}
.dmitry-audit-gear {
width: 32px; height: 32px; flex-shrink: 0;
background: transparent; border: none; color: rgba(99,102,241,0.75);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
}
.dmitry-audit-gear:active { background: rgba(99,102,241,0.12); }
.dmitry-audit-card {
margin: 6px 0 14px;
padding: 14px 14px 12px;
background: linear-gradient(180deg, rgba(99,102,241,0.10), rgba(79,70,229,0.04));
border: 1px solid rgba(99,102,241,0.30);
border-radius: 16px;
min-width: 0; word-break: break-word; overflow-wrap: anywhere;
}
.dmitry-audit-hdr {
font-size: 11.5px; font-weight: 800;
letter-spacing: 0.06em; text-transform: uppercase;
color: rgba(165,180,252,0.85);
text-align: center; margin-bottom: 10px;
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.dmitry-audit-hdr-ico { font-size: 14px; line-height: 1; }
.dmitry-audit-body {
font-size: 14px; line-height: 1.55; color: #e0e7ff;
white-space: normal; min-width: 0;
}
.dmitry-audit-body .dmitry-audit-section-h {
margin-top: 12px; margin-bottom: 4px;
font-size: 12.5px; font-weight: 800;
color: #c7d2fe;
letter-spacing: 0.02em;
display: flex; gap: 6px; align-items: baseline;
}
.dmitry-audit-body .dmitry-audit-section-h:first-child { margin-top: 0; }
.dmitry-audit-body .dmitry-audit-section-h span { color: #c7d2fe; text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.07em; }
.dmitry-audit-stats-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin: 14px 0 6px;
}
.dmitry-audit-stat {
padding: 8px 4px;
background: rgba(99,102,241,0.08);
border: 1px solid rgba(99,102,241,0.18);
border-radius: 10px;
text-align: center;
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.dmitry-audit-stat-num {
font-size: 18px; font-weight: 800;
color: #c7d2fe;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.dmitry-audit-stat-lbl {
font-size: 10px; color: rgba(199,210,254,0.65);
text-transform: lowercase;
word-break: keep-all;
}
.dmitry-audit-actions {
display: flex; gap: 8px; margin-top: 12px; align-items: stretch;
}
/* 28.05.2026 — выровнены equal flex:1 (founder feedback: «приляпанная сбоку»).
Override base .dmitry-board-btn-sec which has `flex: 0 0 auto; max-width: 110px`
that was preventing voice button from stretching. Use combined selector for higher specificity. */
.dmitry-audit-actions .dmitry-audit-share-btn,
.dmitry-audit-actions .dmitry-audit-voice-btn {
flex: 1 1 0 !important;
max-width: none !important;
min-width: 0 !important;
padding: 12px 14px !important;
font-size: 14px !important;
height: 48px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.dmitry-audit-regen-btn { width: 100%; margin-top: 10px; font-size: 13px; }
.dmitry-audit-empty {
padding: 26px 16px 22px; text-align: center;
}
.dmitry-audit-empty-ico {
margin: 0 auto 14px;
color: rgba(165,180,252,0.55);
width: 64px; height: 64px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(99,102,241,0.08);
border-radius: 50%;
border: 1px solid rgba(99,102,241,0.20);
}
.dmitry-audit-empty-h {
font-size: 15px; font-weight: 700; color: #c7d2fe;
margin-bottom: 6px;
}
.dmitry-audit-empty-sub {
font-size: 13px; line-height: 1.5; color: rgba(224,231,255,0.65);
margin-bottom: 18px;
}
/* Settings panel */
.dmitry-audit-settings-panel {
display: flex; flex-direction: column; gap: 14px;
padding-top: 4px;
}
.dmitry-audit-toggle-row {
display: flex; align-items: center; gap: 14px;
padding: 12px 14px;
background: rgba(99,102,241,0.06);
border: 1px solid rgba(99,102,241,0.20);
border-radius: 12px;
cursor: pointer;
}
.dmitry-audit-toggle-l {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.dmitry-audit-toggle-name { font-size: 14px; font-weight: 700; color: #c7d2fe; }
.dmitry-audit-toggle-sub { font-size: 12px; color: rgba(224,231,255,0.55); }
.dmitry-audit-toggle {
flex-shrink: 0;
width: 44px; height: 26px;
appearance: none; -webkit-appearance: none;
background: rgba(99,102,241,0.20); border-radius: 13px;
position: relative; cursor: pointer;
border: 1px solid rgba(99,102,241,0.30);
transition: background 0.18s ease;
}
.dmitry-audit-toggle::before {
content: ''; position: absolute; top: 2px; left: 2px;
width: 20px; height: 20px; border-radius: 50%;
background: #fff;
transition: transform 0.18s ease;
}
.dmitry-audit-toggle:checked { background: #6366f1; border-color: #6366f1; }
.dmitry-audit-toggle:checked::before { transform: translateX(18px); }
.dmitry-audit-field {
display: flex; flex-direction: column; gap: 8px;
}
.dmitry-audit-field-l {
font-size: 12.5px; font-weight: 600;
color: rgba(165,180,252,0.8);
letter-spacing: 0.03em; text-transform: uppercase;
}
.dmitry-audit-day-row {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.dmitry-audit-day-btn {
padding: 8px 0;
background: rgba(99,102,241,0.08);
border: 1px solid rgba(99,102,241,0.20);
border-radius: 8px;
color: rgba(224,231,255,0.75);
font-size: 12.5px; font-weight: 600;
cursor: pointer;
text-align: center;
min-width: 0;
}
.dmitry-audit-day-btn:active { background: rgba(99,102,241,0.16); }
.dmitry-audit-day-btn.dmitry-audit-day-sel {
background: linear-gradient(135deg, #6366f1, #4f46e5);
border-color: #4f46e5;
color: #fff;
}
.dmitry-audit-hour-sel {
width: 100%; padding: 11px 12px;
background: rgba(99,102,241,0.08);
border: 1px solid rgba(99,102,241,0.25);
border-radius: 10px;
color: #e0e7ff;
font-size: 14px; font-weight: 600;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.dmitry-audit-vip-card {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(217,119,6,0.05));
border: 1px solid rgba(245,158,11,0.30);
border-radius: 12px;
cursor: pointer;
}
.dmitry-audit-vip-card:active { background: rgba(245,158,11,0.16); }
.dmitry-audit-vip-ico {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(245,158,11,0.18);
color: #fbbf24;
}
.dmitry-audit-vip-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dmitry-audit-vip-name { font-size: 14px; font-weight: 700; color: #fbbf24; }
.dmitry-audit-vip-sub { font-size: 12px; color: rgba(255,255,255,0.55); }
.dmitry-audit-vip-arrow { font-size: 22px; color: rgba(251,191,36,0.55); flex-shrink: 0; font-weight: 300; line-height: 1; }
/* Chat-injected audit card */
.dmitry-mirror-result {
margin: 8px 0;
width: 100%;
min-width: 0;
}
.dmitry-mirror-result .dmitry-audit-card {
margin: 0;
}
/* Light theme */
body.light .dmitry-audit-card-wrap { border-color: rgba(99,102,241,0.40); }
body.light .dmitry-audit-card {
background: linear-gradient(180deg, rgba(99,102,241,0.10), rgba(79,70,229,0.04));
border-color: rgba(99,102,241,0.32);
}
body.light .dmitry-audit-hdr { color: rgba(67,56,202,0.85); }
body.light .dmitry-audit-body { color: #1e293b; }
body.light .dmitry-audit-body .dmitry-audit-section-h,
body.light .dmitry-audit-body .dmitry-audit-section-h span { color: #4338ca; }
body.light .dmitry-audit-stat {
background: rgba(99,102,241,0.06);
border-color: rgba(99,102,241,0.20);
}
body.light .dmitry-audit-stat-num { color: #4338ca; }
body.light .dmitry-audit-stat-lbl { color: rgba(67,56,202,0.60); }
body.light .dmitry-audit-empty-h { color: #4338ca; }
body.light .dmitry-audit-empty-sub { color: rgba(30,41,59,0.65); }
body.light .dmitry-audit-empty-ico {
background: rgba(99,102,241,0.06);
border-color: rgba(99,102,241,0.22);
color: rgba(67,56,202,0.55);
}
body.light .dmitry-audit-toggle-row {
background: rgba(99,102,241,0.05);
border-color: rgba(99,102,241,0.22);
}
body.light .dmitry-audit-toggle-name { color: #4338ca; }
body.light .dmitry-audit-toggle-sub { color: rgba(30,41,59,0.60); }
body.light .dmitry-audit-field-l { color: rgba(67,56,202,0.75); }
body.light .dmitry-audit-day-btn {
background: rgba(99,102,241,0.06);
border-color: rgba(99,102,241,0.22);
color: rgba(30,41,59,0.75);
}
body.light .dmitry-audit-hour-sel {
background: rgba(99,102,241,0.06);
border-color: rgba(99,102,241,0.28);
color: #1e3a8a;
}
/* END Dmitry Sprint 2.1 */
/* ═══════════════════════════════════════════════════════════════════════
Dmitry Sprint 2.2 (28.05.2026) — Спарринг трудного разговора
Red/orange palette + multi-turn chat UI + debrief card
═══════════════════════════════════════════════════════════════════════ */
/* Tool item — red/orange accent */
.dmitry-tool-ico-sparring {
background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(249,115,22,0.18));
color: #f97316;
border-color: rgba(249,115,22,0.45);
}
body.light .dmitry-tool-ico-sparring {
background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(249,115,22,0.10));
color: #c2410c;
border-color: rgba(249,115,22,0.35);
}
/* Modal wrap reuses .dmitry-board-wrap.
Card has subtle red/orange tint at top. */
.dmitry-sparring-card-wrap {
border-color: rgba(249,115,22,0.32);
background-image: linear-gradient(180deg, rgba(249,115,22,0.10), transparent 120px);
}
body.light .dmitry-sparring-card-wrap {
border-color: rgba(249,115,22,0.28);
background-image: linear-gradient(180deg, rgba(249,115,22,0.07), transparent 120px);
}
.dmitry-sparring-head .dmitry-board-ttl {
background: linear-gradient(135deg, #f97316, #ef4444);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.dmitry-sparring-cta {
background: linear-gradient(135deg, #f97316, #ef4444) !important;
border-color: rgba(239,68,68,0.55) !important;
box-shadow: 0 4px 16px rgba(239,68,68,0.25);
}
.dmitry-sparring-cta:disabled {
opacity: 0.45;
filter: grayscale(0.5);
cursor: not-allowed;
}
.dmitry-sparring-cta[disabled] { opacity: 0.45; filter: grayscale(0.5); cursor: not-allowed; }
/* Back arrow in wizard header */
.dmitry-sparring-back {
background: transparent;
border: none;
color: rgba(249,115,22,0.85);
font-size: 26px;
line-height: 1;
padding: 4px 10px 4px 0;
cursor: pointer;
font-weight: 400;
}
.dmitry-sparring-back:hover { color: #f97316; }
body.light .dmitry-sparring-back { color: rgba(194,65,12,0.85); }
/* Step pill */
.dmitry-sparring-step-pill {
display: inline-block;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
color: rgba(249,115,22,0.85);
background: rgba(249,115,22,0.10);
border: 1px solid rgba(249,115,22,0.30);
border-radius: 12px;
margin-bottom: 14px;
}
body.light .dmitry-sparring-step-pill {
color: #c2410c;
background: rgba(249,115,22,0.07);
border-color: rgba(249,115,22,0.25);
}
.dmitry-sparring-step-h {
font-size: 17px;
font-weight: 700;
color: #fafafa;
margin: 0 0 6px;
}
.dmitry-sparring-step-sub {
font-size: 13px;
color: rgba(250,250,250,0.62);
margin: 0 0 14px;
line-height: 1.4;
}
body.light .dmitry-sparring-step-h { color: #1f2937; }
body.light .dmitry-sparring-step-sub { color: rgba(31,41,55,0.62); }
/* Mode picker grid */
.dmitry-sparring-mode-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin: 8px 0 16px;
}
.dmitry-sparring-mode-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 14px 16px;
background: rgba(255,255,255,0.03);
border: 1.5px solid rgba(255,255,255,0.10);
border-radius: 14px;
cursor: pointer;
transition: all 0.18s ease;
text-align: left;
color: inherit;
font-family: inherit;
}
.dmitry-sparring-mode-card:hover { background: rgba(255,255,255,0.06); }
.dmitry-sparring-mode-card.selected {
background: rgba(249,115,22,0.12);
border-color: rgba(249,115,22,0.60);
box-shadow: 0 0 0 3px rgba(249,115,22,0.10);
}
.dmitry-sparring-mode-ico {
display: inline-flex;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.85);
flex-shrink: 0;
}
.dmitry-sparring-mode-card.mode-friendly .dmitry-sparring-mode-ico {
background: rgba(34,197,94,0.14); color: #4ade80;
}
.dmitry-sparring-mode-card.mode-skeptical .dmitry-sparring-mode-ico {
background: rgba(234,179,8,0.14); color: #facc15;
}
.dmitry-sparring-mode-card.mode-hostile .dmitry-sparring-mode-ico {
background: rgba(239,68,68,0.16); color: #f87171;
}
.dmitry-sparring-mode-label {
font-size: 16px;
font-weight: 700;
color: #fafafa;
}
.dmitry-sparring-mode-sub {
font-size: 13px;
color: rgba(250,250,250,0.55);
line-height: 1.35;
}
body.light .dmitry-sparring-mode-card {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.10);
}
body.light .dmitry-sparring-mode-card.selected {
background: rgba(249,115,22,0.08);
border-color: rgba(249,115,22,0.50);
box-shadow: 0 0 0 3px rgba(249,115,22,0.07);
}
body.light .dmitry-sparring-mode-label { color: #1f2937; }
body.light .dmitry-sparring-mode-sub { color: rgba(31,41,55,0.60); }
/* Starter chips */
.dmitry-sparring-starter-row {
display: flex;
gap: 8px;
margin: 8px 0 16px;
}
.dmitry-sparring-starter-chip {
flex: 1;
padding: 12px 10px;
background: rgba(255,255,255,0.03);
border: 1.5px solid rgba(255,255,255,0.10);
border-radius: 12px;
font-size: 14px;
font-weight: 600;
color: rgba(255,255,255,0.85);
cursor: pointer;
transition: all 0.15s ease;
font-family: inherit;
}
.dmitry-sparring-starter-chip:hover { background: rgba(255,255,255,0.06); }
.dmitry-sparring-starter-chip.selected {
background: rgba(249,115,22,0.12);
border-color: rgba(249,115,22,0.55);
color: #fed7aa;
}
body.light .dmitry-sparring-starter-chip {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.10);
color: #1f2937;
}
body.light .dmitry-sparring-starter-chip.selected {
background: rgba(249,115,22,0.08);
border-color: rgba(249,115,22,0.45);
color: #c2410c;
}
/* Paywall block (free user) */
.dmitry-sparring-paywall {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 12px 14px;
background: rgba(249,115,22,0.08);
border: 1px solid rgba(249,115,22,0.30);
border-radius: 12px;
font-size: 13px;
color: rgba(254,215,170,0.95);
line-height: 1.45;
margin: 10px 0 12px;
}
.dmitry-sparring-paywall svg { color: rgba(249,115,22,0.80); flex-shrink: 0; margin-top: 1px; }
body.light .dmitry-sparring-paywall {
background: rgba(249,115,22,0.06);
border-color: rgba(249,115,22,0.25);
color: #9a3412;
}
/* Status bar (in chat) */
.dmitry-sparring-status-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(249,115,22,0.08);
border-radius: 10px;
font-size: 12px;
font-weight: 500;
color: rgba(254,215,170,0.85);
margin: 6px 0 8px;
width: fit-content;
}
.dmitry-sparring-status-bar svg { color: rgba(249,115,22,0.80); }
body.light .dmitry-sparring-status-bar {
background: rgba(249,115,22,0.06);
color: #9a3412;
}
/* Chat scroll area */
.dmitry-sparring-chat {
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px 4px;
max-height: 50vh;
overflow-y: auto;
margin: 4px 0 8px;
-webkit-overflow-scrolling: touch;
}
.dmitry-sparring-bubble {
max-width: 82%;
padding: 10px 14px;
border-radius: 14px;
font-size: 14px;
line-height: 1.42;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
white-space: normal;
}
.dmitry-sparring-bubble-me {
align-self: flex-end;
background: linear-gradient(135deg, #4f46e5, #6366f1);
color: #fff;
border-bottom-right-radius: 4px;
}
.dmitry-sparring-bubble-them {
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.dmitry-sparring-bubble-them-friendly {
background: rgba(34,197,94,0.14);
color: #d1fae5;
border: 1px solid rgba(34,197,94,0.25);
}
.dmitry-sparring-bubble-them-skeptical {
background: rgba(234,179,8,0.14);
color: #fef9c3;
border: 1px solid rgba(234,179,8,0.28);
}
.dmitry-sparring-bubble-them-hostile {
background: rgba(239,68,68,0.14);
color: #fee2e2;
border: 1px solid rgba(239,68,68,0.30);
}
body.light .dmitry-sparring-bubble-them-friendly {
background: rgba(34,197,94,0.10); color: #166534; border-color: rgba(34,197,94,0.30);
}
body.light .dmitry-sparring-bubble-them-skeptical {
background: rgba(234,179,8,0.10); color: #854d0e; border-color: rgba(234,179,8,0.32);
}
body.light .dmitry-sparring-bubble-them-hostile {
background: rgba(239,68,68,0.08); color: #991b1b; border-color: rgba(239,68,68,0.30);
}
/* Typing indicator */
.dmitry-sparring-typing {
display: inline-flex !important;
gap: 4px;
padding: 12px 14px;
}
.dmitry-sparring-typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: 0.55;
animation: dmitrySparringTyping 1.0s infinite ease-in-out;
}
.dmitry-sparring-typing span:nth-child(2) { animation-delay: 0.15s; }
.dmitry-sparring-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes dmitrySparringTyping {
0%, 60%, 100% { transform: scale(0.8); opacity: 0.4; }
30% { transform: scale(1.1); opacity: 0.95; }
}
/* Input bar */
.dmitry-sparring-input-bar {
display: flex;
gap: 8px;
align-items: flex-end;
padding: 8px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
margin: 6px 0 8px;
}
.dmitry-sparring-input {
flex: 1;
background: transparent;
border: none;
outline: none;
resize: none;
color: inherit;
font-family: inherit;
font-size: 14px;
line-height: 1.4;
padding: 8px 6px;
max-height: 120px;
overflow-y: auto;
}
.dmitry-sparring-input::placeholder { color: rgba(255,255,255,0.40); }
.dmitry-sparring-send-btn {
width: 38px;
height: 38px;
flex-shrink: 0;
background: linear-gradient(135deg, #f97316, #ef4444);
border: none;
border-radius: 50%;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.12s ease, opacity 0.12s ease;
}
.dmitry-sparring-send-btn:hover { transform: scale(1.05); }
.dmitry-sparring-send-btn:active { transform: scale(0.95); }
.dmitry-sparring-send-btn:disabled { opacity: 0.4; cursor: wait; }
body.light .dmitry-sparring-input-bar {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.10);
}
body.light .dmitry-sparring-input::placeholder { color: rgba(0,0,0,0.35); }
/* Sprint 2.2.5 — Voice input mic button (Sparring chat reply) */
.dmitry-sparring-mic-btn {
width: 38px;
height: 38px;
flex-shrink: 0;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 50%;
color: rgba(255,255,255,0.78);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
position: relative;
}
.dmitry-sparring-mic-btn:hover { transform: scale(1.05); background: rgba(255,255,255,0.10); }
.dmitry-sparring-mic-btn:active { transform: scale(0.95); }
.dmitry-sparring-mic-btn:disabled { opacity: 0.4; cursor: wait; }
.dmitry-sparring-mic-btn.is-recording {
background: linear-gradient(135deg, #ef4444, #b91c1c);
border-color: rgba(239,68,68,0.85);
color: #fff;
animation: dmitry-sparring-mic-pulse 1.1s ease-in-out infinite;
}
.dmitry-sparring-mic-btn.is-recording::after {
content: attr(data-timer);
position: absolute;
top: -24px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
font-weight: 700;
color: #ef4444;
background: rgba(0,0,0,0.85);
padding: 2px 6px;
border-radius: 6px;
white-space: nowrap;
pointer-events: none;
}
body.light .dmitry-sparring-mic-btn.is-recording::after {
background: rgba(0,0,0,0.85);
color: #fca5a5;
}
@keyframes dmitry-sparring-mic-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
50% { box-shadow: 0 0 0 8px rgba(239,68,68,0.05); }
}
body.light .dmitry-sparring-mic-btn {
background: rgba(0,0,0,0.04);
border-color: rgba(0,0,0,0.12);
color: rgba(0,0,0,0.68);
}
body.light .dmitry-sparring-mic-btn:hover { background: rgba(0,0,0,0.08); }
body.light .dmitry-sparring-mic-btn.is-recording {
background: linear-gradient(135deg, #ef4444, #b91c1c);
color: #fff;
}
/* Sprint 2.2.5 — Closing banner (LLM signals end of conversation) */
.dmitry-sparring-closing-banner {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
margin: 8px 0;
background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(249,115,22,0.08));
border: 1px solid rgba(245,158,11,0.40);
border-radius: 12px;
font-size: 12.5px;
line-height: 1.4;
color: rgba(252,211,77,0.95);
animation: dmitry-sparring-banner-in 0.25s ease-out;
}
.dmitry-sparring-closing-banner svg {
flex-shrink: 0;
color: rgba(252,211,77,0.95);
margin-top: 1px;
}
@keyframes dmitry-sparring-banner-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
body.light .dmitry-sparring-closing-banner {
background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(249,115,22,0.06));
border-color: rgba(180,83,9,0.40);
color: rgba(146,64,14,1);
}
body.light .dmitry-sparring-closing-banner svg { color: rgba(180,83,9,1); }
/* Sprint 2.2.5 — Max-turn locked input bar */
.dmitry-sparring-input-bar.is-locked {
opacity: 0.55;
pointer-events: none;
}
.dmitry-sparring-limit-msg {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 12px;
margin: 4px 0 8px;
background: rgba(239,68,68,0.10);
border: 1px solid rgba(239,68,68,0.35);
border-radius: 12px;
font-size: 12.5px;
color: rgba(252,165,165,1);
text-align: center;
}
body.light .dmitry-sparring-limit-msg {
background: rgba(239,68,68,0.08);
border-color: rgba(185,28,28,0.40);
color: rgba(153,27,27,1);
}
/* End → debrief button */
.dmitry-sparring-end-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 16px;
background: rgba(239,68,68,0.10);
border: 1.5px solid rgba(239,68,68,0.40);
border-radius: 12px;
font-size: 14px;
font-weight: 600;
color: #f87171;
cursor: pointer;
font-family: inherit;
margin-top: 4px;
transition: all 0.15s ease;
}
.dmitry-sparring-end-btn:hover {
background: rgba(239,68,68,0.18);
border-color: rgba(239,68,68,0.60);
}
body.light .dmitry-sparring-end-btn {
background: rgba(239,68,68,0.06);
border-color: rgba(239,68,68,0.30);
color: #b91c1c;
}
/* Debrief card */
.dmitry-sparring-debrief-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 14px;
background: linear-gradient(180deg, rgba(249,115,22,0.06), transparent);
border: 1px solid rgba(249,115,22,0.25);
border-radius: 16px;
margin: 6px 0 10px;
}
body.light .dmitry-sparring-debrief-card {
background: linear-gradient(180deg, rgba(249,115,22,0.04), transparent);
border-color: rgba(249,115,22,0.20);
}
.dmitry-sparring-debrief-section { display: flex; flex-direction: column; gap: 8px; }
.dmitry-sparring-debrief-h {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: rgba(249,115,22,0.90);
}
.dmitry-sparring-debrief-h svg { color: rgba(249,115,22,0.80); flex-shrink: 0; }
body.light .dmitry-sparring-debrief-h { color: #c2410c; }
body.light .dmitry-sparring-debrief-h svg { color: #c2410c; }
.dmitry-sparring-debrief-quote {
padding: 10px 14px;
background: rgba(255,255,255,0.03);
border-left: 3px solid rgba(249,115,22,0.55);
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,0.92);
font-style: italic;
}
body.light .dmitry-sparring-debrief-quote {
background: rgba(0,0,0,0.02);
border-left-color: rgba(249,115,22,0.55);
color: #1f2937;
}
.dmitry-sparring-debrief-phrase {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
font-size: 14px;
line-height: 1.45;
color: rgba(255,255,255,0.92);
}
.dmitry-sparring-debrief-num {
flex-shrink: 0;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f97316, #ef4444);
border-radius: 50%;
font-size: 12px;
font-weight: 700;
color: #fff;
}
body.light .dmitry-sparring-debrief-phrase {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
color: #1f2937;
}
.dmitry-sparring-debrief-avoid .dmitry-sparring-debrief-h { color: rgba(239,68,68,0.95); }
.dmitry-sparring-debrief-avoid .dmitry-sparring-debrief-h svg { color: rgba(239,68,68,0.85); }
body.light .dmitry-sparring-debrief-avoid .dmitry-sparring-debrief-h { color: #b91c1c; }
.dmitry-sparring-debrief-row-avoid {
padding: 10px 12px;
background: rgba(239,68,68,0.07);
border-left: 3px solid rgba(239,68,68,0.55);
border-radius: 8px;
font-size: 14px;
line-height: 1.45;
color: rgba(254,202,202,0.95);
}
body.light .dmitry-sparring-debrief-row-avoid {
background: rgba(239,68,68,0.05);
border-left-color: rgba(239,68,68,0.50);
color: #991b1b;
}
.dmitry-sparring-debrief-batna .dmitry-sparring-debrief-h { color: rgba(99,102,241,0.95); }
.dmitry-sparring-debrief-batna .dmitry-sparring-debrief-h svg { color: rgba(99,102,241,0.85); }
.dmitry-sparring-debrief-batna .dmitry-sparring-debrief-quote {
border-left-color: rgba(99,102,241,0.55);
}
body.light .dmitry-sparring-debrief-batna .dmitry-sparring-debrief-h { color: #4338ca; }
body.light .dmitry-sparring-debrief-batna .dmitry-sparring-debrief-quote {
border-left-color: rgba(99,102,241,0.50);
}
/* Action buttons */
.dmitry-sparring-debrief-actions {
display: flex;
gap: 6px;
margin-top: 4px;
}
.dmitry-sparring-action-btn {
flex: 1;
font-size: 12px !important;
padding: 10px 6px !important;
gap: 4px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.dmitry-sparring-action-btn svg { flex-shrink: 0; }
/* 28.05.2026 hotfix — UX feedback on debrief buttons (busy/success states). */
.dmitry-sparring-action-btn[disabled] { cursor: wait !important; pointer-events: none; }
.dmitry-sparring-action-btn-success {
background: rgba(34, 197, 94, 0.15) !important;
border-color: rgba(34, 197, 94, 0.5) !important;
color: #22c55e !important;
cursor: default !important;
pointer-events: none;
}
.dmitry-sparring-action-btn-success svg { stroke: #22c55e !important; }
.dmitry-spin-mini {
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid rgba(255, 255, 255, 0.25);
border-top-color: currentColor;
border-radius: 50%;
animation: dmspin 0.8s linear infinite;
vertical-align: middle;
flex-shrink: 0;
}
@keyframes dmspin { to { transform: rotate(360deg); } }
.dmitry-sparring-debrief-confirm {
display: none;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 10px 12px;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.25);
border-radius: 10px;
color: #22c55e;
font-size: 13px;
line-height: 1.35;
}
.dmitry-sparring-debrief-confirm svg { flex-shrink: 0; stroke: #22c55e; }
/* Small-screen tweaks */
@media (max-width: 360px) {
.dmitry-sparring-action-btn { font-size: 11px !important; padding: 8px 4px !important; }
.dmitry-sparring-bubble { max-width: 88%; }
.dmitry-sparring-debrief-confirm { font-size: 12px; padding: 8px 10px; }
}
/* END Dmitry Sprint 2.2 */
/* ═══════════════════════════════════════════════════════════════════════
Dmitry Sprint 2.3 refactor (28.05.2026) — Audit folded into Journal,
Sparring folded into Prep via hard-conversation toggle.
Tools sheet returns to 5 items.
═══════════════════════════════════════════════════════════════════════ */
/* Weekly Audit card inside Decision Journal home */
.dmitry-journal-audit-card {
margin: 12px 0 16px;
padding: 14px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(99,102,241,0.14), rgba(139,92,246,0.10));
border: 1px solid rgba(99,102,241,0.30);
display: flex;
flex-direction: column;
gap: 10px;
}
body.light .dmitry-journal-audit-card {
background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.06));
border-color: rgba(99,102,241,0.28);
}
.dmitry-journal-audit-hd {
display: flex;
align-items: center;
gap: 8px;
}
.dmitry-journal-audit-ico {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px;
background: rgba(99,102,241,0.22);
color: #a5b4fc;
}
body.light .dmitry-journal-audit-ico { color: #4338ca; background: rgba(99,102,241,0.16); }
.dmitry-journal-audit-ttl {
font-size: 14px;
font-weight: 700;
color: #c7d2fe;
letter-spacing: 0.02em;
text-transform: uppercase;
}
body.light .dmitry-journal-audit-ttl { color: #3730a3; }
.dmitry-journal-audit-body { display: flex; flex-direction: column; gap: 4px; }
.dmitry-journal-audit-meta {
font-size: 11px;
color: rgba(199,210,254,0.7);
letter-spacing: 0.04em;
}
body.light .dmitry-journal-audit-meta { color: rgba(67,56,202,0.7); }
.dmitry-journal-audit-snippet {
font-size: 13.5px;
line-height: 1.45;
color: #e0e7ff;
font-style: italic;
}
body.light .dmitry-journal-audit-snippet { color: #1e1b4b; }
.dmitry-journal-audit-empty {
font-size: 13px;
line-height: 1.45;
color: rgba(199,210,254,0.78);
}
body.light .dmitry-journal-audit-empty { color: rgba(30,27,75,0.78); }
.dmitry-journal-audit-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 14px;
border-radius: 10px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #ffffff;
border: none;
font-size: 14px;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.dmitry-journal-audit-cta:active { transform: scale(0.98); }
.dmitry-journal-audit-settings {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-end;
padding: 6px 10px;
border-radius: 8px;
background: transparent;
border: 1px solid transparent;
color: rgba(199,210,254,0.7);
font-size: 12px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.dmitry-journal-audit-settings:active { color: #c7d2fe; }
body.light .dmitry-journal-audit-settings { color: rgba(67,56,202,0.7); }
body.light .dmitry-journal-audit-settings:active { color: #4338ca; }
/* Hard-conversation toggle on last step of Prep wizard */
.dmitry-prep-hard-toggle-wrap {
margin: 14px 0 4px;
padding: 12px;
border-radius: 12px;
background: rgba(249,115,22,0.06);
border: 1px dashed rgba(249,115,22,0.32);
display: flex;
flex-direction: column;
gap: 10px;
}
body.light .dmitry-prep-hard-toggle-wrap {
background: rgba(249,115,22,0.04);
border-color: rgba(249,115,22,0.28);
}
.dmitry-prep-hard-toggle {
display: flex;
align-items: center;
gap: 10px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-size: 14px;
color: #f5f5f7;
text-align: left;
}
body.light .dmitry-prep-hard-toggle { color: #1c1c1e; }
.dmitry-prep-hard-toggle-track {
position: relative;
width: 40px;
height: 22px;
border-radius: 22px;
background: rgba(120,120,128,0.30);
flex-shrink: 0;
transition: background-color 200ms ease;
}
.dmitry-prep-hard-toggle.is-on .dmitry-prep-hard-toggle-track {
background: linear-gradient(135deg, #ef4444, #f97316);
}
.dmitry-prep-hard-toggle-knob {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.30);
transition: transform 200ms ease;
}
.dmitry-prep-hard-toggle.is-on .dmitry-prep-hard-toggle-knob {
transform: translateX(18px);
}
.dmitry-prep-hard-toggle-l {
font-weight: 500;
flex: 1;
}
.dmitry-prep-sparring-cta-card {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(239,68,68,0.14), rgba(249,115,22,0.12));
border: 1px solid rgba(249,115,22,0.45);
}
body.light .dmitry-prep-sparring-cta-card {
background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(249,115,22,0.07));
border-color: rgba(249,115,22,0.35);
}
.dmitry-prep-sparring-cta-ico {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
background: rgba(249,115,22,0.20);
color: #f97316;
flex-shrink: 0;
}
body.light .dmitry-prep-sparring-cta-ico { color: #c2410c; background: rgba(249,115,22,0.14); }
.dmitry-prep-sparring-cta-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dmitry-prep-sparring-cta-h {
font-size: 13px;
font-weight: 600;
color: #fed7aa;
line-height: 1.3;
}
body.light .dmitry-prep-sparring-cta-h { color: #7c2d12; }
.dmitry-prep-sparring-cta-sub {
font-size: 11.5px;
color: rgba(254,215,170,0.78);
line-height: 1.3;
}
body.light .dmitry-prep-sparring-cta-sub { color: rgba(124,45,18,0.78); }
.dmitry-prep-sparring-cta-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 12px;
border-radius: 8px;
background: linear-gradient(135deg, #ef4444, #f97316);
color: #ffffff;
border: none;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
flex-shrink: 0;
}
.dmitry-prep-sparring-cta-btn:active { transform: scale(0.97); }
/* END Dmitry Sprint 2.3 refactor */
/* ═══════════════════════════════════════════════════════════════════════
Dmitry Sprint 2.3 (28.05.2026) — GROW (Goal-Reality-Options-Will) coach.
Inline в обычном чате Бизнес-коуча, НЕ tools-sheet item.
Palette: purple gradient suggestion, emerald success, neutral progress.
═══════════════════════════════════════════════════════════════════════ */
/* ── Suggestion card (после user message, before bot reply) ── */
.dmitry-grow-suggestion-card {
background: linear-gradient(135deg, rgba(139,92,246,0.16), rgba(99,102,241,0.14));
border: 1px solid rgba(139,92,246,0.40);
border-radius: 14px;
padding: 12px 14px;
margin: 4px 0;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
word-break: break-word;
transition: opacity 0.2s ease;
}
body.light .dmitry-grow-suggestion-card {
background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(99,102,241,0.07));
border-color: rgba(139,92,246,0.30);
}
.dmitry-grow-suggestion-h {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: #c4b5fd;
line-height: 1.3;
}
body.light .dmitry-grow-suggestion-h { color: #6d28d9; }
.dmitry-grow-suggestion-h svg { color: #a78bfa; flex-shrink: 0; }
body.light .dmitry-grow-suggestion-h svg { color: #7c3aed; }
.dmitry-grow-suggestion-sub {
font-size: 12.5px;
color: rgba(196,181,253,0.78);
line-height: 1.4;
}
body.light .dmitry-grow-suggestion-sub { color: rgba(109,40,217,0.78); }
.dmitry-grow-suggestion-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
.dmitry-grow-suggestion-yes,
.dmitry-grow-suggestion-no {
flex: 1 1 auto;
min-width: 120px;
padding: 9px 14px;
border-radius: 10px;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
transition: transform 0.1s ease, opacity 0.2s ease;
}
.dmitry-grow-suggestion-yes {
background: linear-gradient(135deg, #8b5cf6, #6366f1);
color: #fff;
border-color: rgba(139,92,246,0.55);
}
.dmitry-grow-suggestion-yes:active { transform: scale(0.97); }
.dmitry-grow-suggestion-no {
background: rgba(255,255,255,0.06);
color: rgba(196,181,253,0.9);
border-color: rgba(139,92,246,0.30);
}
body.light .dmitry-grow-suggestion-no {
background: rgba(139,92,246,0.06);
color: #6d28d9;
}
.dmitry-grow-suggestion-no:active { transform: scale(0.97); }
.dmitry-grow-suggestion-dismissed,
.dmitry-grow-suggestion-accepted {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: rgba(196,181,253,0.7);
padding: 6px 0;
}
.dmitry-grow-suggestion-accepted { color: #22c55e; }
.dmitry-grow-suggestion-accepted svg { color: #22c55e; }
/* ── Step indicator + progress dots ── */
.dmitry-grow-coach-q-wrap { /* container wrapper for step indicator + bubble */ }
.dmitry-grow-step-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.02em;
color: #a78bfa;
padding: 4px 10px;
background: rgba(139,92,246,0.14);
border: 1px solid rgba(139,92,246,0.30);
border-radius: 999px;
margin-bottom: 6px;
text-transform: uppercase;
}
body.light .dmitry-grow-step-indicator {
color: #6d28d9;
background: rgba(139,92,246,0.10);
border-color: rgba(139,92,246,0.25);
}
.dmitry-grow-step-ico { display: inline-flex; }
.dmitry-grow-step-ttl { white-space: nowrap; }
.dmitry-grow-dots {
display: inline-flex;
gap: 6px;
margin-bottom: 6px;
}
.dmitry-grow-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(196,181,253,0.25);
transition: background 0.25s ease, transform 0.25s ease;
}
.dmitry-grow-dot.is-filled {
background: #a78bfa;
transform: scale(1.15);
}
body.light .dmitry-grow-dot { background: rgba(139,92,246,0.18); }
body.light .dmitry-grow-dot.is-filled { background: #7c3aed; }
/* Coach question bubble — slight purple tint */
.bubble.in.dmitry-grow-coach-q {
border-left: 3px solid rgba(139,92,246,0.55);
background: rgba(139,92,246,0.08);
}
body.light .bubble.in.dmitry-grow-coach-q {
background: rgba(139,92,246,0.05);
border-left-color: rgba(124,58,237,0.50);
}
/* ── Completion card ── */
.dmitry-grow-completion-card {
background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(16,185,129,0.12));
border: 1px solid rgba(34,197,94,0.45);
border-radius: 14px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
word-break: break-word;
}
body.light .dmitry-grow-completion-card {
background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(16,185,129,0.07));
border-color: rgba(34,197,94,0.35);
}
.dmitry-grow-completion-h {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
color: #86efac;
letter-spacing: 0.01em;
}
body.light .dmitry-grow-completion-h { color: #15803d; }
.dmitry-grow-completion-h svg { color: #22c55e; flex-shrink: 0; }
.dmitry-grow-completion-body {
font-size: 14px;
color: rgba(220,252,231,0.92);
line-height: 1.55;
white-space: pre-wrap;
}
body.light .dmitry-grow-completion-body { color: rgba(20,83,45,0.92); }
.dmitry-grow-completion-row {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 10px;
background: rgba(0,0,0,0.18);
border-radius: 8px;
}
body.light .dmitry-grow-completion-row { background: rgba(34,197,94,0.06); }
.dmitry-grow-completion-row-l {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: rgba(134,239,172,0.78);
}
body.light .dmitry-grow-completion-row-l { color: rgba(21,128,61,0.78); }
.dmitry-grow-completion-row-v {
font-size: 13.5px;
color: rgba(220,252,231,0.95);
line-height: 1.4;
}
body.light .dmitry-grow-completion-row-v { color: rgba(20,83,45,0.95); }
.dmitry-grow-completion-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
.dmitry-grow-action-btn {
flex: 1 1 auto;
min-width: 120px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 12px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
transition: transform 0.1s ease, opacity 0.2s ease, background 0.2s ease;
}
.dmitry-grow-action-journal {
background: linear-gradient(135deg, #22c55e, #10b981);
color: #fff;
border-color: rgba(34,197,94,0.55);
}
.dmitry-grow-action-journal:active { transform: scale(0.97); }
.dmitry-grow-action-share {
background: rgba(255,255,255,0.06);
color: rgba(220,252,231,0.92);
border-color: rgba(34,197,94,0.30);
}
body.light .dmitry-grow-action-share {
background: rgba(34,197,94,0.06);
color: #15803d;
}
.dmitry-grow-action-share:active { transform: scale(0.97); }
.dmitry-grow-action-btn-success {
background: rgba(34,197,94,0.22) !important;
color: #22c55e !important;
border-color: rgba(34,197,94,0.60) !important;
cursor: default;
pointer-events: none;
}
.dmitry-grow-action-btn-success svg { stroke: #22c55e !important; }
/* ── Journal entry button (GROW) ── */
.dmitry-journal-grow-cta {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
margin-top: 10px;
background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(99,102,241,0.12));
border: 1px solid rgba(139,92,246,0.40);
border-radius: 12px;
cursor: pointer;
color: #c4b5fd;
text-align: left;
transition: transform 0.1s ease, background 0.2s ease;
}
body.light .dmitry-journal-grow-cta {
background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(99,102,241,0.07));
border-color: rgba(139,92,246,0.30);
color: #6d28d9;
}
.dmitry-journal-grow-cta:active { transform: scale(0.98); }
.dmitry-journal-grow-cta svg {
color: #a78bfa;
flex-shrink: 0;
}
body.light .dmitry-journal-grow-cta svg { color: #7c3aed; }
.dmitry-journal-grow-l {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.dmitry-journal-grow-name {
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.dmitry-journal-grow-sub {
font-size: 11.5px;
color: rgba(196,181,253,0.78);
line-height: 1.3;
}
body.light .dmitry-journal-grow-sub { color: rgba(109,40,217,0.78); }
/* ── Start modal (from Дневник entry) ── */
.dmitry-grow-start-card {
max-width: 480px;
}
/* END Dmitry Sprint 2.3 GROW */
/* ═══════════════════════════════════════════════════════════════════════
Sprint 2.2.6 (28.05.2026) — Universal voice mic button (.pac-mic-btn)
───────────────────────────────────────────────────────────────────────
One mic UX for ALL textarea/input locations across the app.
Used by helper _pacMicToggle() in core.ts. Singleton — only one
recording active at any time across the whole TMA.
═══════════════════════════════════════════════════════════════════════ */
/* Wrapper that turns a standalone textarea into a textarea-with-corner-mic */
.pac-textarea-wrap {
position: relative;
display: block;
width: 100%;
}
/* Extra bottom-right padding on the textarea so text never collides with mic */
.pac-textarea-has-mic {
padding-right: 52px !important;
padding-bottom: 12px !important;
}
/* Universal mic button — base */
.pac-mic-btn {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(37, 99, 235, 0.12);
border: 1px solid rgba(37, 99, 235, 0.30);
color: rgba(224, 231, 255, 0.85);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease, color 0.15s ease;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
flex: 0 0 auto;
}
.pac-mic-btn:hover { background: rgba(37, 99, 235, 0.18); }
.pac-mic-btn:active { transform: scale(0.93); }
.pac-mic-btn:disabled { opacity: 0.5; cursor: wait; }
.pac-mic-btn:focus-visible {
outline: 2px solid rgba(96, 165, 250, 0.7);
outline-offset: 2px;
}
/* Corner-positioned variant (default when rendered via _pacMicBtnHTML) */
.pac-mic-btn.pac-mic-btn-corner {
position: absolute;
right: 8px;
bottom: 8px;
z-index: 2;
}
/* Recording state — red pulse, stop icon, timer badge above */
.pac-mic-btn[data-recording="1"] {
background: rgba(239, 68, 68, 0.20);
border-color: rgba(239, 68, 68, 0.7);
color: #ef4444;
animation: pac-mic-pulse 1s infinite ease-out;
}
.pac-mic-btn[data-recording="1"]::after {
content: attr(data-timer);
position: absolute;
top: -24px;
right: 50%;
transform: translateX(50%);
font-size: 11px;
color: #ef4444;
font-weight: 700;
background: rgba(0, 0, 0, 0.72);
padding: 2px 7px;
border-radius: 5px;
white-space: nowrap;
pointer-events: none;
}
@keyframes pac-mic-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
50% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); }
}
/* Light theme overrides */
body.light .pac-mic-btn {
background: rgba(37, 99, 235, 0.08);
border-color: rgba(37, 99, 235, 0.30);
color: rgba(30, 58, 138, 0.85);
}
body.light .pac-mic-btn:hover { background: rgba(37, 99, 235, 0.14); }
body.light .pac-mic-btn[data-recording="1"] {
background: rgba(239, 68, 68, 0.10);
border-color: #dc2626;
color: #dc2626;
}
body.light .pac-mic-btn[data-recording="1"]::after {
color: #dc2626;
background: rgba(255, 255, 255, 0.92);
border: 1px solid #dc2626;
}
/* END Sprint 2.2.6 Universal mic */
/* ────────────────────────────────────────────────────────────────────────
Sprint #75 (29.05.2026) — Voice quota card in Subscription screen
Populated by _pacRenderQuotaCardInSubscription() via _pacFetchVoiceQuota()
──────────────────────────────────────────────────────────────────────── */
.pac-quota-card {
margin: 14px 14px 8px;
padding: 16px 16px 14px;
background: linear-gradient(180deg, rgba(245, 158, 11, 0.06), rgba(124, 58, 237, 0.04));
border: 1px solid rgba(245, 158, 11, 0.22);
border-radius: 18px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
}
.pac-quota-card-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.pac-quota-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(245, 158, 11, 0.14);
border: 1px solid rgba(245, 158, 11, 0.32);
color: #fbbf24;
flex-shrink: 0;
}
.pac-quota-card-title {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--text);
flex: 1;
}
.pac-quota-card-tier {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
padding: 3px 9px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text2);
}
.pac-quota-stats {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.pac-quota-stats-main {
display: inline-flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.pac-quota-stats-label {
font-size: 13px;
color: var(--text2);
}
.pac-quota-stats-value {
font-size: 22px;
font-weight: 800;
color: var(--gold, #fbbf24);
line-height: 1;
}
.pac-quota-stats-sep {
font-size: 13px;
color: var(--text3);
}
.pac-quota-stats-total {
font-size: 15px;
font-weight: 600;
color: var(--text2);
}
.pac-quota-stats-pct {
font-size: 12px;
font-weight: 700;
color: var(--text3);
}
.pac-quota-bar {
height: 8px;
background: rgba(255, 255, 255, 0.06);
border-radius: 5px;
overflow: hidden;
margin-bottom: 10px;
position: relative;
}
.pac-quota-bar-fill {
height: 100%;
background: linear-gradient(90deg, #22c55e, #fbbf24);
border-radius: 5px;
transition: width 0.4s ease, background 0.3s ease;
}
.pac-quota-bar-fill[data-zone="low"] {
background: linear-gradient(90deg, #f59e0b, #f97316);
}
.pac-quota-bar-fill[data-zone="critical"] {
background: linear-gradient(90deg, #ef4444, #dc2626);
}
.pac-quota-bar-fill[data-zone="empty"] {
background: rgba(239, 68, 68, 0.55);
width: 100% !important;
opacity: 0.4;
}
.pac-quota-meta {
font-size: 12px;
color: var(--text3);
line-height: 1.5;
margin-bottom: 10px;
}
.pac-quota-meta b {
color: var(--text2);
font-weight: 700;
}
.pac-quota-warn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: rgba(239, 68, 68, 0.10);
border: 1px solid rgba(239, 68, 68, 0.32);
border-radius: 10px;
color: #fca5a5;
font-size: 12px;
font-weight: 600;
margin-bottom: 10px;
}
.pac-quota-empty {
font-size: 13px;
color: var(--text2);
line-height: 1.5;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px dashed rgba(255, 255, 255, 0.12);
border-radius: 12px;
margin-bottom: 10px;
text-align: center;
}
.pac-quota-buy-btn {
width: 100%;
padding: 12px 14px;
border-radius: 12px;
border: none;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #1a1408;
font-size: 14px;
font-weight: 800;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.28);
transition: transform 0.15s ease, box-shadow 0.2s ease;
margin-bottom: 8px;
}
.pac-quota-buy-btn:active {
transform: scale(0.98);
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.22);
}
.pac-quota-manage-btn {
width: 100%;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: transparent;
color: var(--text2);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
}
.pac-quota-manage-btn:active {
background: rgba(255, 255, 255, 0.04);
}
/* Inline counter badge near voice buttons (optional Step 2) */
.pac-voice-counter {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
padding: 2px 7px;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
background: rgba(245, 158, 11, 0.14);
border: 1px solid rgba(245, 158, 11, 0.28);
color: #fbbf24;
line-height: 1.2;
vertical-align: middle;
}
/* Improved Voicepack paywall sheet (Step 3) */
.pac-voicepack-sheet #vqp-state-line,
.pac-voicepack-sheet #vqp-reset-line {
line-height: 1.5;
}
/* END Sprint #75 voice quota UI */