/* FAI Landing — pixel port from DesignCanvas */
.fai-root,.fai-root *{box-sizing:border-box}
/* Палитра: холодные нейтрали + СИНИЙ бренд-градиент (#1A3E6E → #3D81DB, как в лого).
   Раньше была индиго/фиолет (#4f46e5 / #7c3aed) — увели в синь, включая тон нейтралей и теней. */
.fai-root{
 --fai-bg:#f7f9fc; --fai-bg-2:#eaeff8; --fai-surface:#ffffff; --fai-glass:rgba(255,255,255,.72);
 --fai-ink:#152036; --fai-ink-soft:#44526e; --fai-ink-mute:#8493ad;
 --fai-border:rgba(20,40,90,.08); --fai-border-2:rgba(20,40,90,.14);
 --fai-accent:#2456e2; --fai-accent-2:#3d81db;
 --fai-accent-soft:rgba(36,86,226,.09); --fai-glow:rgba(46,107,255,.36);
 --fai-grad:linear-gradient(135deg,var(--fai-accent),var(--fai-accent-2));
 --fai-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 2px 4px rgba(20,35,70,.04),0 22px 48px -26px rgba(20,40,95,.18);
 --fai-shadow-hi:0 1px 0 rgba(255,255,255,.7) inset,0 4px 10px rgba(20,35,70,.06),0 34px 64px -28px rgba(18,45,120,.30);
}
.fai-root a{color:var(--fai-accent-2);text-decoration:none}
.fai-root a:hover{color:var(--fai-accent)}
@keyframes fai-float{0%{transform:translateY(0) scale(1,1)}25%{transform:translateY(-9px) scale(.97,1.04)}50%{transform:translateY(-18px) scale(1.06,.92)}75%{transform:translateY(-8px) scale(.98,1.02)}100%{transform:translateY(0) scale(1,1)}}
@keyframes fai-floats{0%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-11px) scale(1.035,.965)}100%{transform:translateY(0) scale(1,1)}}
@keyframes fai-squish{0%,100%{transform:scale(1,1);filter:brightness(1) saturate(1)}50%{transform:scale(1.14,.88);filter:brightness(1.14) saturate(1.2)}}
@keyframes fai-wobble{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes fai-blink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes fai-corepulse{0%,100%{opacity:.5;filter:brightness(1)}50%{opacity:1;filter:brightness(1.25)}}
@keyframes fai-aurora1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7%,-5%) scale(1.16)}}
@keyframes fai-aurora2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6%,6%) scale(1.2)}}
@keyframes fai-ring{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.95)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.26)}}
@keyframes fai-spark{0%{top:-12%;opacity:0}25%{opacity:1}100%{top:112%;opacity:0}}
@keyframes fai-shine{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes fai-glowpulse{0%,100%{opacity:.55;filter:brightness(1)}50%{opacity:1;filter:brightness(1.3) saturate(1.15)}}
@keyframes fai-dot{0%,100%{transform:scale(1);opacity:.55;filter:brightness(1)}50%{transform:scale(1.7);opacity:1;filter:brightness(1.3)}}
@keyframes fai-eq{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
@keyframes fai-livedot{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes fai-gaugedraw{from{stroke-dasharray:0 100}to{stroke-dasharray:75 100}}

/* Hover helpers (from style-hover) */
.fai-root a.fai-nav:hover{color:var(--fai-accent-2)!important}
.fai-root .fai-cta-pill:hover{filter:brightness(1.08);transform:translateY(-1px) scale(1.1)}
.fai-root .fai-chip:hover{border-color:var(--fai-accent)!important;color:var(--fai-accent-2)!important;transform:translateY(-1px) scale(1.1)}
.fai-root .fai-cta-primary:hover{transform:translateY(-2px) scale(1.11);box-shadow:0 20px 40px -10px var(--fai-glow)}
.fai-root .fai-cta-secondary:hover{border-color:var(--fai-accent)!important;transform:translateY(-2px) scale(1.11)}
.fai-root .fai-card:hover{transform:translateY(-7px) scale(1.07);box-shadow:var(--fai-shadow-hi)}
.fai-root .fai-card-sm:hover{transform:translateY(-7px) scale(1.08)}
.fai-root .fai-plan:hover{transform:translateY(-7px) scale(1.07)}
.fai-root .fai-plan-feat:hover{transform:translateY(-8px) scale(1.045)}
.fai-root .fai-btn-outline:hover{border-color:var(--fai-accent)!important}
.fai-root .fai-btn-grad:hover{transform:translateY(-1px) scale(1.1);filter:brightness(1.05)}
.fai-root .fai-btn-ink:hover{filter:brightness(1.15)}
.fai-root .fai-btn-grad-block:hover{transform:translateY(-1px) scale(1.1)}
.fai-root button{font-family:inherit}
.fai-root a{text-decoration:none}
.fai-root ul{margin:0;padding:0;list-style:none}
.fai-landing-shell{margin:0;padding:0;min-height:100vh}
.fai-landing-shell .mud-main-content{padding:0!important}
/* Segment chips active state */
.fai-root .fai-chip.is-active{border-color:var(--fai-accent)!important;color:var(--fai-accent-2)!important;background:var(--fai-accent-soft)!important}

/* Равная высота карточек тарифной сетки: список фич растягивается, футер прижат к низу */
.fai-root .fai-plan{display:flex;flex-direction:column}
.fai-root .fai-plan ul{flex:1}
.fai-root .fai-plan-feat{display:flex;flex-direction:column}
.fai-root .fai-plan-feat>div:last-child{flex:1;display:flex;flex-direction:column}
.fai-root .fai-plan-feat>div:last-child ul{flex:1}

/* Тумблер месяц/год на странице тарифов */
.fai-root .fai-bill-btn{padding:9px 22px;border-radius:999px;border:0;background:transparent;color:var(--fai-ink-soft);font-size:14px;font-weight:600;cursor:pointer;transition:all .25s ease}
.fai-root .fai-bill-btn.is-active{background:var(--fai-grad);color:#fff;box-shadow:0 8px 18px -6px var(--fai-glow)}

/* Chat sphere on funnel (same face as chat voice) */
.fai-funnel-sphere{
  display:flex;justify-content:center;align-items:center;
  width:200px;height:200px;margin:0 auto 16px;
}
.fai-funnel-sphere__wrap{
  width:200px;height:200px;margin:0;
  transform:scale(1.85);
  transform-origin:center center;
  filter:drop-shadow(0 14px 36px rgba(9,134,249,.28));
}
.fai-funnel-sphere .ch-bot-floor{display:none}

/* ── Ссылки-действия на странице профиля ── */
.fai-root .fai-profile-link {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 14px; border-radius: 12px;
    background: var(--fai-bg-2); border: 1px solid var(--fai-border);
    color: var(--fai-ink); font-size: 14px; font-weight: 600;
    text-decoration: none; transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.fai-root .fai-profile-link:hover {
    background: var(--fai-accent-soft); border-color: var(--fai-accent);
    color: var(--fai-accent); transform: translateX(2px);
}
.fai-root .fai-profile-link svg { color: var(--fai-accent-2); flex-shrink: 0; }
.fai-root .fai-profile-link--danger { color: #d64545; }
.fai-root .fai-profile-link--danger svg { color: #d64545; }
.fai-root .fai-profile-link--danger:hover {
    background: #fdecec; border-color: #f2b8b8; color: #c0392b;
}

/* ══════════════════════════════════════════════════════════════════════════
   Личный кабинет (/profile)

   Отдельные классы вместо развёрнутых inline-стилей: разметка стала читаемой,
   а карточки получили спокойный ховер (лёгкий подъём без «прыжка» на 7%, как у
   маркетинговых .fai-card — на дашборде такое движение мешает).
   ══════════════════════════════════════════════════════════════════════════ */
.fai-root .fai-cab { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

.fai-root .fai-cab-card {
    background: var(--fai-surface); border: 1px solid var(--fai-border);
    border-radius: 20px; padding: 24px; box-shadow: var(--fai-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fai-root .fai-cab-card--hover:hover {
    transform: translateY(-3px); box-shadow: var(--fai-shadow-hi); border-color: var(--fai-border-2);
}

/* ── Шапка ── */
.fai-root .fai-cab-hero {
    display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
    padding: 28px; position: relative; overflow: hidden;
}
/* Мягкое свечение в углу — «живая» шапка без тяжёлых картинок. */
.fai-root .fai-cab-hero::after {
    content: ''; position: absolute; top: -60%; right: -8%; width: 320px; height: 320px;
    background: radial-gradient(circle, var(--fai-accent-soft), transparent 70%);
    pointer-events: none;
}
.fai-root .fai-cab-avatar {
    width: 74px; height: 74px; border-radius: 20px; flex-shrink: 0;
    background: var(--fai-grad); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font: 700 30px/1 Montserrat, sans-serif;
    box-shadow: 0 10px 24px -8px var(--fai-glow);
    cursor: pointer; overflow: hidden; position: relative;
    transition: transform .16s ease, box-shadow .16s ease;
}
.fai-root .fai-cab-avatar-wrap {
    width: 74px; height: 74px; flex-shrink: 0; position: relative;
}
.fai-root .fai-cab-avatar-wrap:hover .fai-cab-avatar { transform: translateY(-2px); box-shadow: 0 14px 30px -8px var(--fai-glow); }
.fai-root .fai-cab-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Значок камеры — подсказка, что аватар без фото кликабелен. */
.fai-root .fai-cab-avatar-cam {
    position: absolute; right: -4px; bottom: -4px;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--fai-surface); color: var(--fai-accent-2);
    border: 2px solid var(--fai-surface); box-shadow: 0 4px 10px -3px rgba(20,40,95,.3);
}
.fai-root .fai-cab-avatar-file { display: none; }   /* скрыт; вызывается по <label for> */

/* Наведение на фото — панель действий: открыть / редактировать / заменить. */
.fai-root .fai-cab-avatar-actions {
    position: absolute; inset: 0; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: rgba(12, 20, 40, .52); opacity: 0;
    transition: opacity .16s ease;
}
.fai-root .fai-cab-avatar--photo:hover .fai-cab-avatar-actions,
.fai-root .fai-cab-avatar-wrap:hover .fai-cab-avatar-actions { opacity: 1; }
.fai-root .fai-cab-avatar-actions button,
.fai-root .fai-cab-avatar-actions label {
    width: 30px; height: 30px; border-radius: 9px; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.16); color: #fff; padding: 0;
    transition: background .14s ease;
}
.fai-root .fai-cab-avatar-actions button:hover,
.fai-root .fai-cab-avatar-actions label:hover { background: rgba(255,255,255,.34); }
.fai-root .fai-cab-avatar-actions button:disabled { opacity: .5; cursor: default; }
.fai-root .fai-cab-avatar-remove {
    margin-left: 10px; padding: 0; border: none; background: none; cursor: pointer;
    font: 500 12.5px var(--font-ui); color: var(--fai-accent-2); text-decoration: underline;
}
.fai-root .fai-cab-avatar-remove:hover { color: var(--fai-accent); }
.fai-root .fai-cab-avatar-remove:disabled { opacity: .5; cursor: default; }
.fai-root .fai-cab-eyebrow {
    font: 700 11px/1 Montserrat, sans-serif; letter-spacing: .12em; text-transform: uppercase;
    color: var(--fai-ink-mute); margin: 0 0 7px;
}
.fai-root .fai-cab-name {
    font-family: Montserrat, sans-serif; font-weight: 600; letter-spacing: -.02em;
    font-size: clamp(22px, 3vw, 30px); margin: 0 0 3px;
}
.fai-root .fai-cab-sub { font-size: 14.5px; color: var(--fai-ink-soft); margin: 0; }
.fai-root .fai-cab-hero-side {
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
    position: relative; z-index: 1;
}
.fai-root .fai-cab-plan {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 15px; border-radius: 999px;
    background: var(--fai-accent-soft); color: var(--fai-accent-2);
    font-size: 13px; font-weight: 600; white-space: nowrap;
}

/* ── Статистика ── */
.fai-root .fai-cab-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px;
}
.fai-root .fai-cab-stat { display: flex; flex-direction: column; gap: 6px; }
.fai-root .fai-cab-stat-badge {
    width: 40px; height: 40px; border-radius: 12px; margin-bottom: 8px;
    display: flex; align-items: center; justify-content: center;
}
.fai-root .fai-cab-stat--a .fai-cab-stat-badge { background: rgba(36,86,226,.10);  color: #2456e2; }
.fai-root .fai-cab-stat--b .fai-cab-stat-badge { background: rgba(91,91,214,.10);   color: #5b5bd6; }
.fai-root .fai-cab-stat--c .fai-cab-stat-badge { background: rgba(139,92,246,.11);  color: #8b5cf6; }
.fai-root .fai-cab-stat-val {
    font: 700 27px/1 Montserrat, sans-serif; color: var(--fai-ink); letter-spacing: -.01em;
}
.fai-root .fai-cab-stat-label { font-size: 13px; color: var(--fai-ink-soft); }

/* ── Две колонки (подписка + действия) ── */
.fai-root .fai-cab-grid2 {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
}
.fai-root .fai-cab-h3 {
    font-family: Montserrat, sans-serif; font-weight: 600; font-size: 18px; margin: 0 0 14px;
}
.fai-root .fai-cab-feat { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.fai-root .fai-cab-feat li {
    display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--fai-ink-soft);
}
.fai-root .fai-cab-feat svg { color: var(--fai-accent-2); flex-shrink: 0; }
.fai-root .fai-cab-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Недавние чаты ── */
.fai-root .fai-cab-recent { display: flex; flex-direction: column; gap: 6px; }
.fai-root .fai-cab-chat {
    display: flex; align-items: center; gap: 13px;
    padding: 12px 14px; border-radius: 13px; text-decoration: none;
    border: 1px solid transparent; transition: background .15s ease, border-color .15s ease;
}
.fai-root .fai-cab-chat:hover { background: var(--fai-bg-2); border-color: var(--fai-border); }
.fai-root .fai-cab-chat-icon {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    background: var(--fai-accent-soft); color: var(--fai-accent-2);
    display: flex; align-items: center; justify-content: center;
}
.fai-root .fai-cab-chat-body { flex: 1; min-width: 0; }
.fai-root .fai-cab-chat-title {
    font-size: 14px; font-weight: 600; color: var(--fai-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fai-root .fai-cab-chat-meta { font-size: 12px; color: var(--fai-ink-mute); margin-top: 2px; }
.fai-root .fai-cab-chat-arrow { color: var(--fai-ink-mute); flex-shrink: 0; transition: transform .15s ease, color .15s ease; }
.fai-root .fai-cab-chat:hover .fai-cab-chat-arrow { color: var(--fai-accent); transform: translateX(3px); }

.fai-root .fai-cab-empty { text-align: center; padding: 26px 16px; }
.fai-root .fai-cab-empty-icon {
    width: 52px; height: 52px; border-radius: 15px; margin: 0 auto 14px;
    background: var(--fai-accent-soft); color: var(--fai-accent-2);
    display: flex; align-items: center; justify-content: center;
}
.fai-root .fai-cab-empty p { color: var(--fai-ink-soft); font-size: 14px; margin: 0 0 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   Мобильная версия FAI/MAS

   mas-landing.css исходно не содержал ни одного @media — страницы верстались только
   под десктоп. Здесь добавлены: мобильное меню-«бургер» в шапке и брейкпоинты для
   секций (сетки, отступы), чтобы ничего не переполнялось на телефоне.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Шапка: бургер по умолчанию скрыт, инлайн-навигация видна ── */
.fai-root .fai-burger { display: none; }
.fai-root .fai-burger__btn {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 11px;
    color: var(--fai-ink); background: transparent; border: 1px solid var(--fai-border);
}
.fai-root .fai-burger__btn::-webkit-details-marker { display: none; }   /* убрать треугольник Safari */
.fai-root .fai-burger[open] .fai-burger__btn { background: var(--fai-accent-soft); }
.fai-root .fai-burger__menu {
    position: absolute; right: 16px; top: 62px;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 190px; padding: 8px;
    background: var(--fai-surface); border: 1px solid var(--fai-border);
    border-radius: 14px; box-shadow: var(--fai-shadow-hi);
}
.fai-root .fai-burger__link {
    padding: 11px 13px; border-radius: 9px;
    font: 600 14.5px var(--font-ui); color: var(--fai-ink) !important;
}
.fai-root .fai-burger__link:hover { background: var(--fai-bg-2); }
.fai-root .fai-burger__link--cta {
    margin-top: 4px; text-align: center;
    background: var(--fai-grad); color: #fff !important;
}

/* ── Планшет: прячем инлайн-навигацию, показываем бургер ── */
@media (max-width: 900px) {
    .fai-root .fai-hnav { display: none !important; }
    .fai-root .fai-burger { display: block; position: relative; margin-left: auto; }
    /* CTA-пилюля из шапки уезжает в меню — в узкой строке она тесна рядом с бургером. */
    .fai-root .fai-hdr__cta { display: none !important; }
    .fai-root .fai-hdr__row { gap: 14px; padding: 11px 18px; }
}

/* ── Телефон: сжимаем секционные отступы и сетки ── */
@media (max-width: 640px) {
    /* Секции лендинга обычно имеют вертикальные отступы 72–100px — на телефоне это
       экраны пустоты. Ужимаем через переменную-множитель там, где отступы заданы инлайн:
       инлайн переопределить нельзя, поэтому режем типовые контейнеры по padding-inline. */
    .fai-root section { padding-left: 16px !important; padding-right: 16px !important; }

    /* Любые авто-сетки лендинга/кабинета к одной колонке — minmax(280–320px) переполнял
       узкие экраны. Перекрываем минимум столбца. */
    .fai-root [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .fai-root .fai-cab-stats { grid-template-columns: 1fr 1fr; }   /* статы кабинета — 2 в ряд, компактно */

    .fai-root .fai-cab { padding-left: 4px; padding-right: 4px; }
    .fai-root .fai-cab-hero { padding: 20px; }
    .fai-root .fai-cab-card { padding: 18px; }
}

/* ── Узкий телефон: типографика заголовков и кнопки на всю ширину ── */
@media (max-width: 400px) {
    .fai-root .fai-cab-stats { grid-template-columns: 1fr; }
    .fai-root .fai-cta-primary,
    .fai-root .fai-cta-pill { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Кабинет: ценностная полоса, уровень, недельная активность
   ══════════════════════════════════════════════════════════════════════════ */

/* Полоса «результат»: слева — оценка сэкономленного времени (градиент), справа — уровень. */
.fai-root .fai-cab-strip {
    display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 16px;
}
.fai-root .fai-cab-value {
    display: flex; flex-direction: column; gap: 3px; justify-content: center;
    padding: 22px 24px; border-radius: 20px; color: #fff;
    background: var(--fai-grad); box-shadow: 0 18px 40px -18px var(--fai-glow);
    position: relative; overflow: hidden;
}
.fai-root .fai-cab-value::after {
    content: ''; position: absolute; right: -30%; top: -60%;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
}
.fai-root .fai-cab-value-eyebrow {
    font: 700 10.5px/1 Montserrat, sans-serif; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.82);
}
.fai-root .fai-cab-value-num {
    font: 800 40px/1 Montserrat, sans-serif; letter-spacing: -.02em; margin-top: 4px;
}
.fai-root .fai-cab-value-unit { font-size: 22px; margin-left: 3px; opacity: .9; }
.fai-root .fai-cab-value-cap { font: 500 12px/1.45 var(--font-ui); color: rgba(255,255,255,.85); margin-top: 4px; }

/* Уровень + прогресс-бар. */
.fai-root .fai-cab-level {
    display: flex; flex-direction: column; justify-content: center; gap: 10px;
    padding: 22px 24px; border-radius: 20px;
    background: var(--fai-surface); border: 1px solid var(--fai-border); box-shadow: var(--fai-shadow);
}
.fai-root .fai-cab-level-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fai-root .fai-cab-level-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 13px; border-radius: 999px; background: var(--fai-accent-soft); color: var(--fai-accent-2);
    font: 700 13px Montserrat, sans-serif;
}
.fai-root .fai-cab-level-badge::before { content: '★'; }
.fai-root .fai-cab-level-count { font: 600 12.5px var(--font-ui); color: var(--fai-ink-soft); }
.fai-root .fai-cab-level-bar {
    height: 10px; border-radius: 999px; background: var(--fai-bg-2); overflow: hidden;
}
.fai-root .fai-cab-level-bar > span {
    display: block; height: 100%; border-radius: 999px; background: var(--fai-grad);
    transition: width .6s cubic-bezier(.22,1,.36,1);
}
.fai-root .fai-cab-level-hint { font: 500 12px var(--font-ui); color: var(--fai-ink-mute); }

/* Недельная активность — столбики. */
.fai-root .fai-cab-chart-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.fai-root .fai-cab-chart-sums { display: flex; gap: 16px; font: 500 12.5px var(--font-ui); color: var(--fai-ink-soft); }
.fai-root .fai-cab-chart-sums b { color: var(--fai-ink); font-weight: 700; }
.fai-root .fai-cab-chart {
    display: flex; align-items: flex-end; gap: 10px; height: 120px;
}
.fai-root .fai-cab-bar {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 7px; height: 100%;
}
.fai-root .fai-cab-bar-fill {
    width: 100%; max-width: 34px; border-radius: 8px 8px 4px 4px;
    background: var(--fai-bg-2); transition: height .6s cubic-bezier(.22,1,.36,1);
}
.fai-root .fai-cab-bar--on .fai-cab-bar-fill { background: var(--fai-grad); box-shadow: 0 6px 14px -6px var(--fai-glow); }
.fai-root .fai-cab-bar-day { font: 600 11px var(--font-ui); color: var(--fai-ink-mute); }
.fai-root .fai-cab-stat--d .fai-cab-stat-badge { background: rgba(16,185,129,.11); color: #10b981; }

/* Узкий экран — полоса в один столбец. */
@media (max-width: 640px) {
    .fai-root .fai-cab-strip { grid-template-columns: 1fr; }
    .fai-root .fai-cab-value-num { font-size: 34px; }
}