/* Файл хранит стили экранов Unscroll: стартовый экран, знакомство, главный экран, перехват, День рефлексии, разговор,
   дела, полезное, магазин и подарок, зоопарк, раздел «Я» и общие доработки компонентов. */

/* ------------------------------------------------ КАРКАС ------------------------------------------------ */

/* браузер не может сдвинуть весь экран при фокусе поля или открытии клавиатуры */
.app {
    overflow: clip;
}

/* пока питомец говорит, приветствие под облачком прячется */
.app[data-speaking="1"] .home-hello {
    opacity: 0;
}

.home-hello {
    transition: opacity 0.3s ease;
}

.screen {
    visibility: hidden;
    transition: opacity 0.32s var(--ease-out), transform 0.42s var(--ease-out), visibility 0s linear 0.42s;
}

.screen[data-active="1"] {
    visibility: visible;
    transition: opacity 0.32s var(--ease-out), transform 0.42s var(--ease-out), visibility 0s;
}

.layers {
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
}

/* листы поверх сцены (магазин, разговор) почти не затемняют питомца: примерка и реакции видны */
.layer[data-name="shop"] .backdrop,
.layer[data-name="chat"] .backdrop,
.layer[data-name="member"] .backdrop {
    background: rgba(24, 18, 60, 0.08);
}

/* оверлей поверх сцены: непрозрачная панель под ним уходит, питомец снова виден */
.app[data-stage-focus="1"] .screen--panel[data-active="1"] {
    opacity: 0;
    transform: scale(0.97);
    pointer-events: none;
}

.app[data-stage-focus="1"] .tabbar,
.app[data-stage-focus="1"] .screen--home .home,
.app[data-stage-focus="1"] .screen--zoo .zoo {
    opacity: 0;
    pointer-events: none;
}

.screen--home .home,
.screen--zoo .zoo {
    transition: opacity 0.3s ease;
}

.grow { flex: 1; min-width: 0; }
.center { text-align: center; }

[data-custom-scroll="1"] { scrollbar-width: none; }
[data-custom-scroll="1"]::-webkit-scrollbar { display: none; }

.app[data-theme="evening"] .scrollbar__thumb {
    background: var(--scrollbar-thumb-dark, rgba(255, 255, 255, 0.34));
}

.step-in {
    animation: step-in 0.42s var(--ease-out) both;
}

@keyframes step-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes pop-in {
    0% { opacity: 0; transform: scale(0.6); }
    70% { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-12deg) scale(1.06); }
    40% { transform: rotate(10deg) scale(1.06); }
    60% { transform: rotate(-6deg); }
    80% { transform: rotate(4deg); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ------------------------------------------------ ДОРАБОТКИ КОМПОНЕНТОВ ------------------------------------------------ */

.btn--big {
    min-height: 62px;
    font-size: 19px;
    border-radius: 22px;
}

.btn--big.btn--icon {
    width: 62px;
    min-width: 62px;
}

.btn--big svg {
    width: 24px;
    height: 24px;
}

.icon-button--flat {
    background: transparent;
    box-shadow: none;
    color: var(--muted);
}

.link-button--muted {
    color: var(--muted);
    font-size: 15px;
}

.pill--fire b,
.pill--coins b {
    min-width: 1ch;
}

.pill--coins {
    background: linear-gradient(180deg, #FFF6D6, #FFE38A);
    border-color: #FFF1B8;
    color: #6A4A00;
}

.pill--fire {
    background: linear-gradient(180deg, #FFF0E6, #FFD3BA);
    border-color: #FFE6D6;
    color: #8A2E00;
}

.pill--small {
    height: 34px;
    font-size: 15px;
}

.pill--small svg {
    width: 22px;
    height: 22px;
}

.input--big {
    min-height: 64px;
    font-size: 24px;
    font-weight: 900;
    text-align: center;
}

.input--small {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 16px;
    border-radius: 14px;
}

.input--code {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.3em;
    text-align: center;
    text-transform: uppercase;
}

.segmented--mini button {
    min-height: 34px;
    font-size: 14px;
}

/* вкладки листа группы переносятся на вторую строку, а не прокручиваются вбок */
.segmented--scroll {
    flex-wrap: wrap;
}

.segmented--scroll button {
    flex: 0 0 auto;
    padding: 0 14px;
}

.chip--small {
    min-height: 34px;
    padding: 0 12px;
    font-size: 14px;
}

.chip--tiny {
    min-height: 24px;
    padding: 0 9px;
    font-size: 12px;
}

.chips--center {
    justify-content: center;
}

.chips--big .chip {
    min-height: 48px;
    font-size: 16px;
}

.note-line,
.done-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 12px;
    font-size: 14px;
    color: var(--muted);
}

.note-line svg,
.done-line svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--violet);
}

.done-line {
    justify-content: center;
    min-height: 54px;
    margin: 0;
    font-size: 17px;
    font-weight: 900;
    color: var(--mint-deep);
}

.done-line svg {
    color: var(--mint);
}

.progress {
    height: 10px;
    border-radius: 999px;
    background: var(--surface-press);
    overflow: hidden;
}

.progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--mint);
    transition: width 0.8s var(--ease-out);
}

.progress--thin {
    height: 6px;
}

.pet-avatar {
    flex: none;
    display: block;
    filter: drop-shadow(0 3px 6px rgba(60, 40, 140, 0.18));
}

.item-art {
    width: 100%;
    height: 100%;
}

/* листы: тело тянется по содержимому, длинное прокручивается внутри */
.sheet__body {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
}

.sheet[data-full="1"] .sheet__body {
    flex: 1 1 auto;
}

.sheet__body > .scroll-area {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.sheet__content > * + * {
    margin-top: 12px;
}

.sheet__content > .stack + .stack {
    margin-top: 12px;
}

/* ------------------------------------------------ ОБЛАЧКО И ПОДПИСИ ------------------------------------------------ */

.speech {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    max-width: min(300px, calc(100% - 24px));
    padding: 12px 16px;
    border-radius: 22px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    color: #1E1A33;
    background: #FFFFFF;
    box-shadow: 0 10px 28px rgba(40, 30, 110, 0.22);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.speech[data-visible="1"] {
    opacity: 1;
    animation: speech-pop 0.4s var(--spring);
}

/* узкий телефон: облачко не заходит на кнопки подарка, магазина и чата справа */
@media (max-width: 420px) {
    .speech {
        max-width: calc(100% - 128px);
        padding: 10px 14px;
        font-size: 15px;
    }
}

.speech::after {
    content: "";
    position: absolute;
    left: var(--tail-x, 50%);
    bottom: -8px;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 3px;
    background: inherit;
    transform: rotate(45deg);
}

@keyframes speech-pop {
    from { scale: 0.7; }
    to { scale: 1; }
}

.zoo-labels {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.zoo-label {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    color: #1E1A33;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 16px rgba(30, 20, 90, 0.2);
    transition: opacity 0.2s ease;
}

.zoo-label--hidden {
    opacity: 0;
}

.zoo-label__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #FFFFFF;
}

/* ------------------------------------------------ СТАРТ И ВХОД ------------------------------------------------ */

.welcome {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(var(--safe-top) + 22px) 16px calc(var(--safe-bottom) + 16px);
}

.welcome__brand {
    align-self: center;
}

.brand-word {
    display: inline-block;
    padding: 8px 22px;
    border-radius: 999px;
    font-size: 26px;
    font-weight: 1000;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    background: var(--violet);
    box-shadow: 0 10px 26px rgba(123, 97, 255, 0.45);
    animation: float 4s ease-in-out infinite;
}

.welcome__bottom {
    width: min(100%, 480px);
    margin: 0 auto;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 32px;
    animation: step-in 0.6s var(--ease-out) both;
}

.welcome__title {
    margin: 0;
    font-size: 27px;
    font-weight: 1000;
    line-height: 1.12;
    letter-spacing: -0.01em;
}

.welcome__text {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--ink-soft);
}

.welcome__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.welcome__footer .segmented {
    flex: none;
}

.auth-form .btn {
    margin-top: 4px;
}

.consent-line {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
}

.consent-line a {
    color: var(--violet);
    font-weight: 800;
}

/* ------------------------------------------------ ЗНАКОМСТВО ------------------------------------------------ */

.ob {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 12px calc(var(--safe-bottom) + 12px);
    pointer-events: none;
}

.ob__card {
    position: relative;
    width: min(100%, 520px);
    max-height: 64%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 18px;
    border-radius: 32px;
    pointer-events: auto;
}

.ob__progress {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-press);
    overflow: hidden;
}

.ob__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--violet);
    transition: width 0.5s var(--spring);
}

.ob__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

.ob__meta .icon-button {
    width: 36px;
    height: 36px;
}

.ob__step {
    font-size: 13px;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ob__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px;
    margin: -6px;
}

.ob__title {
    margin: 0;
    font-size: 24px;
    font-weight: 1000;
    line-height: 1.15;
}

.ob__hint {
    margin: -6px 0 0;
    color: var(--muted);
    font-size: 15px;
}

.ob__note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 12px 14px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--violet-deep);
    background: color-mix(in srgb, var(--violet) 10%, transparent);
}

.ob__note svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.choice-grid {
    display: grid;
    gap: 10px;
}

.choice-grid--2 { grid-template-columns: repeat(2, 1fr); }
.choice-grid--3 { grid-template-columns: repeat(3, 1fr); }

.choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 92px;
    padding: 12px 8px;
    border-radius: 22px;
    font-weight: 900;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface-soft);
    border: 3px solid transparent;
    transition: transform 0.25s var(--spring), border-color 0.2s ease, background 0.2s ease;
}

.choice:active {
    transform: scale(0.95);
}

.choice[aria-pressed="true"] {
    border-color: var(--violet);
    background: color-mix(in srgb, var(--violet) 12%, var(--surface-solid));
    animation: choice-pick 0.35s var(--spring);
}

/* выбранный вариант пружинит, но не исчезает и не мигает */
@keyframes choice-pick {
    0% { transform: scale(0.95); }
    60% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

.choice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--violet), var(--lilac));
}

.choice[aria-pressed="true"] .choice__icon {
    background: var(--pink);
}

.choice__icon svg {
    width: 24px;
    height: 24px;
}

.choice__label {
    text-align: center;
    line-height: 1.2;
}

.choice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.choice--row {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 62px;
    padding: 8px 14px;
    gap: 14px;
    font-size: 16px;
}

.choice--feed {
    flex-direction: row;
    min-height: 58px;
    justify-content: flex-start;
    padding: 8px 14px;
}

.feed-dot {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    background: var(--feed);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--feed) 22%, transparent);
}

.choice--look {
    min-height: 120px;
}

.choice--look .pet-avatar {
    transition: transform 0.4s var(--spring);
}

.choice--look[aria-pressed="true"] .pet-avatar {
    transform: scale(1.12) rotate(-4deg);
}

/* квиз: компактные плитки, шкалы радости и стресса, выбор друга из 14 животных, вылупление */




.level {
    display: inline-flex;
    gap: 3px;
    flex: none;
}

.level i {
    width: 7px;
    height: 20px;
    border-radius: 4px;
    background: var(--surface-press);
}

.level i.on {
    background: var(--level);
}

.companion-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.companion {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 16px;
    background: var(--surface-soft);
    border: 3px solid transparent;
    transition: transform 0.25s var(--spring), border-color 0.2s ease, background 0.2s ease;
}

.companion:active {
    transform: scale(0.94);
}

.companion[aria-pressed="true"] {
    border-color: var(--violet);
    background: color-mix(in srgb, var(--violet) 12%, var(--surface-solid));
}

.companion .pet-avatar {
    width: 82%;
    height: auto;
}

.companion-name {
    margin: 0;
    min-height: 20px;
    text-align: center;
    font-size: 15px;
    font-weight: 900;
    color: var(--ink-soft);
}


.ob__body {
    overflow-x: hidden;
}





.ob--hatch {
    justify-content: flex-end;
}

.hatch-card {
    width: min(100%, 520px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-radius: 32px;
    text-align: center;
    pointer-events: auto;
    animation: pop-in 0.4s var(--spring);
}

.big-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.big-stepper__value {
    min-width: 110px;
    text-align: center;
    font-size: 46px;
    font-weight: 1000;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.big-stepper__value small {
    font-size: 18px;
    color: var(--muted);
}

.big-value {
    text-align: center;
    font-size: 40px;
    font-weight: 1000;
    line-height: 1.1;
    background: var(--violet);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.inline-add {
    display: flex;
    gap: 8px;
}

.advice {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 20px;
    text-align: left;
    font-weight: 900;
    color: var(--mint-deep);
    background: color-mix(in srgb, var(--mint) 14%, var(--surface-solid));
    border: 2px dashed color-mix(in srgb, var(--mint) 60%, transparent);
}

/* ------------------------------------------------ ГЛАВНЫЙ ЭКРАН ------------------------------------------------ */

.home {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.home-top {
    position: absolute;
    top: calc(var(--safe-top) + 12px);
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.stage-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 92px;
    padding: 6px 14px 8px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 900;
    color: var(--ink);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 22px rgba(40, 30, 110, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.stage-chip__bar {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-press);
    overflow: hidden;
}

.stage-chip__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mint), #B9EA6C);
    transition: width 0.8s var(--ease-out);
}

.home-hello {
    position: absolute;
    top: calc(var(--safe-top) + 70px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.home-hello__text {
    font-size: 22px;
    font-weight: 1000;
    color: #FFFFFF;
    text-shadow: 0 2px 12px rgba(30, 20, 90, 0.35);
}

.mood-chip {
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    color: #FFFFFF;
    background: rgba(30, 20, 90, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mood-chip:empty {
    display: none;
}

.home-side {
    position: absolute;
    right: 12px;
    top: calc(var(--safe-top) + 132px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.float-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    color: var(--violet);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 20px rgba(40, 30, 110, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.25s var(--spring);
}

.float-btn:active {
    transform: scale(0.88);
}

.float-btn svg {
    width: 26px;
    height: 26px;
}

.float-btn--gift svg {
    width: 34px;
    height: 34px;
}

.float-btn--gift .dot {
    position: absolute;
    top: 6px;
    right: 6px;
}

.float-btn--gift[data-ready="1"] {
    animation: wiggle 1.4s ease-in-out infinite;
    animation-delay: 1s;
    background: linear-gradient(180deg, #FFF0F7, #FFD6E8);
}

.float-btn--gift[data-ready="0"] {
    opacity: 0.7;
}

.float-btn--gift[data-ready="0"] .dot {
    display: none;
}

.bw-banner {
    position: absolute;
    top: calc(var(--safe-top) + 132px);
    left: 12px;
    right: 76px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 22px;
    color: #FFFFFF;
    background: rgba(28, 24, 48, 0.82);
    box-shadow: var(--shadow-float);
    animation: step-in 0.5s var(--ease-out);
}

.bw-banner__icon svg {
    width: 26px;
    height: 26px;
}

.bw-banner__text {
    flex: 1;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.home-bottom {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(var(--safe-bottom) + var(--tabbar-height) + 14px);
    width: min(calc(100% - 24px), 520px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.norm-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 12px 12px 12px;
    border-radius: 28px;
}

.norm-ring {
    position: relative;
    flex: none;
    width: 86px;
    height: 86px;
    --ring: var(--mint);
}

.norm-card[data-state="near"] .norm-ring { --ring: var(--yellow); }
.norm-card[data-state="over"] .norm-ring { --ring: var(--red); }
.norm-card[data-state="bw"] .norm-ring { --ring: #8A86A0; }

.norm-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.norm-ring__track {
    fill: none;
    stroke: var(--surface-press);
    stroke-width: 11;
}

.norm-ring__value {
    fill: none;
    stroke: var(--ring);
    stroke-width: 11;
    stroke-linecap: round;
    transition: stroke-dasharray 1s var(--ease-out), stroke 0.4s ease;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ring) 50%, transparent));
}

.norm-ring__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.norm-ring__center b {
    font-size: 25px;
    font-weight: 1000;
    font-variant-numeric: tabular-nums;
}

.norm-ring__center small {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
    white-space: nowrap;
}

.norm-ring__center .norm-ring__unit {
    margin-top: 1px;
    font-size: 10px;
}

.norm-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.norm-info__title {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.norm-info__state {
    font-size: 19px;
    font-weight: 1000;
    line-height: 1.15;
}

.norm-card[data-state="over"] .norm-info__state,
.norm-card[data-state="bw"] .norm-info__state {
    color: var(--red);
}

.norm-info__saved {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 13px;
    color: var(--muted);
}

.norm-info__saved svg {
    width: 16px;
    height: 16px;
    color: var(--mint);
}

.norm-info__saved b {
    color: var(--mint-deep);
    font-weight: 1000;
}

.app[data-theme="evening"] .norm-info__saved b {
    color: var(--mint);
}

.home-task {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    border-radius: 22px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 22px rgba(40, 30, 110, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: step-in 0.5s var(--ease-out);
    transition: opacity 0.3s ease, transform 0.4s var(--spring);
}

.home-task[data-done="1"] {
    opacity: 0.4;
    transform: scale(0.96);
}

.home-task__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 800;
}

.home-task__time {
    font-size: 13px;
    font-weight: 900;
    color: var(--muted);
}

.task-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: transparent;
    border: 3px solid color-mix(in srgb, var(--ink) 20%, transparent);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.3s var(--spring);
}

.task-check svg {
    width: 20px;
    height: 20px;
}

.task-check:active {
    transform: scale(0.85);
}

.home-task[data-done="1"] .task-check,
.task[data-done="true"] .task-check {
    color: #FFFFFF;
    border-color: var(--mint);
    background: var(--mint);
}

.home-actions {
    display: flex;
    gap: 10px;
}

.home-actions .btn--pink {
    font-size: 20px;
}

/* лист минут */
.minutes-block {
    --tint: var(--violet);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: none;
    background: var(--surface-soft);
    border: 2px solid transparent;
}

.minutes-block--focus {
    border-color: color-mix(in srgb, var(--tint) 50%, transparent);
}

.minutes-block__head {
    display: flex;
    gap: 12px;
    align-items: center;
}

.minutes-block__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 15px;
    color: #FFFFFF;
    background: var(--tint);
}

.minutes-block__title {
    font-size: 17px;
    font-weight: 900;
}

.minutes-block .slider::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, var(--tint) 0 var(--value), var(--surface-press) var(--value) 100%);
}

/* ------------------------------------------------ ОВЕРЛЕИ ПОВЕРХ СЦЕНЫ ------------------------------------------------ */

.overlay--stage {
    justify-content: space-between;
    padding: calc(var(--safe-top) + 10px) 12px calc(var(--safe-bottom) + 12px);
    background: linear-gradient(180deg, rgba(20, 14, 60, 0.12) 0%, transparent 18%, transparent 40%, rgba(20, 14, 60, 0.28) 100%);
}

.ov-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ov-top__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 900;
    color: var(--ink);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.ov-top__title svg {
    width: 20px;
    height: 20px;
    color: var(--violet);
}

.ov-card {
    position: relative;
    width: min(100%, 520px);
    max-height: 62%;
    margin: 0 auto;
    padding: 20px;
    overflow-y: auto;
    border-radius: 32px;
    animation: step-in 0.45s var(--ease-out);
}

.ov-card > .step-in {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ov-card__title {
    margin: 0;
    font-size: 24px;
    font-weight: 1000;
    line-height: 1.15;
}

.ov-card__question {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 900;
    color: var(--ink-soft);
}

.ov-card__anyway {
    align-self: center;
}

.ov-loading {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.ov-loading .loader__dot {
    background: var(--violet);
}

.feed-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.feed-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 20px;
    font-weight: 900;
    color: #FFFFFF;
    background: var(--feed);
    box-shadow: 0 6px 0 color-mix(in srgb, var(--feed) 70%, #000000), 0 10px 20px color-mix(in srgb, var(--feed) 35%, transparent);
    transition: transform 0.2s var(--spring);
}

.feed-tile:active {
    transform: translateY(4px);
}

.feed-tile__icon {
    display: inline-flex;
    padding: 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
}

.feed-tile__icon svg {
    width: 22px;
    height: 22px;
}

.ic-task {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 14px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--important) 14%, var(--surface-solid));
    border: 2px solid color-mix(in srgb, var(--important) 50%, transparent);
}

.ic-task[data-importance="fire"] {
    background: color-mix(in srgb, var(--fire) 14%, var(--surface-solid));
    border-color: color-mix(in srgb, var(--fire) 55%, transparent);
    animation: pulse-border 1.6s ease-in-out infinite;
}

.ic-task[data-importance="later"] {
    background: color-mix(in srgb, var(--later) 12%, var(--surface-solid));
    border-color: color-mix(in srgb, var(--later) 45%, transparent);
}

@keyframes pulse-border {
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--fire) 18%, transparent); }
}

.ic-task__title {
    flex: 1 1 100%;
    font-size: 18px;
    font-weight: 900;
}

.ic-task__time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 900;
    color: var(--muted);
}

.ic-task__time svg {
    width: 16px;
    height: 16px;
}

.ic-blocked {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    color: #FFFFFF;
    background: var(--red);
}

.ic-blocked svg {
    width: 30px;
    height: 30px;
    flex: none;
}

.ic-blocked div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ic-blocked span {
    font-size: 13px;
    opacity: 0.9;
}

.energy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.energy-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 118px;
    padding: 14px;
    border-radius: 24px;
    text-align: left;
    color: #FFFFFF;
    transition: transform 0.25s var(--spring);
}

.energy-tile:active {
    transform: scale(0.95);
}

.energy-tile svg {
    width: 34px;
    height: 34px;
    margin-bottom: auto;
}

.energy-tile b {
    font-size: 18px;
    font-weight: 1000;
}

.energy-tile small {
    font-size: 12px;
    opacity: 0.9;
}

.energy-tile--tired {
    background: linear-gradient(140deg, #5B6CFF, #8E7BFF);
    box-shadow: 0 10px 22px rgba(91, 108, 255, 0.35);
}

.energy-tile--active {
    background: var(--orange-deep);
    box-shadow: 0 10px 22px rgba(255, 138, 61, 0.35);
}

.ic-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--mint) 14%, var(--surface-solid));
    animation: pop-in 0.5s var(--spring);
}

.ic-pick div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ic-pick small {
    font-size: 12px;
    font-weight: 900;
    color: var(--mint-deep);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.replace-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.replace-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 8px 14px 8px 8px;
    border-radius: 20px;
    text-align: left;
    font-weight: 800;
    background: var(--surface-soft);
    animation: step-in 0.4s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 60ms);
    transition: transform 0.2s var(--spring), background 0.2s ease;
}

.replace-item:active {
    transform: scale(0.97);
    background: var(--surface-press);
}

.replace-item > span:nth-child(2) {
    flex: 1;
}

.replace-item > i svg {
    width: 20px;
    height: 20px;
    color: var(--muted);
}

.replace-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 14px;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--violet), var(--lilac));
}

.replace-item__icon svg {
    width: 22px;
    height: 22px;
}

.replace-item--breath .replace-item__icon {
    background: var(--sky);
}

.apps-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 18px;
    background: var(--surface-soft);
    text-align: center;
}

.app-tile b {
    font-size: 13px;
}

.app-tile small {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.2;
}

.app-tile__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 14px;
    font-size: 20px;
    font-weight: 1000;
    color: #FFFFFF;
    background: var(--app);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--app) 40%, transparent);
}

.breath {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 6px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breath__ring,
.breath__core {
    position: absolute;
    border-radius: 50%;
}

.breath__ring {
    inset: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--sky) 30%, transparent), transparent 70%);
    animation: breathe calc(var(--breath) * 2) ease-in-out infinite;
}

.breath__core {
    width: 46%;
    height: 46%;
    background: linear-gradient(135deg, var(--sky), var(--mint));
    box-shadow: 0 0 40px color-mix(in srgb, var(--sky) 60%, transparent);
    animation: breathe-core calc(var(--breath) * 2) ease-in-out infinite;
}

.breath__text {
    position: relative;
    font-size: 22px;
    font-weight: 1000;
    color: #FFFFFF;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

@keyframes breathe {
    0%, 100% { transform: scale(0.55); opacity: 0.6; }
    50% { transform: scale(1); opacity: 1; }
}

@keyframes breathe-core {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.75); }
}

.victory {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.victory__burst {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    color: #FFFFFF;
    background: radial-gradient(circle at 35% 30%, #FFE38A, var(--yellow) 45%, var(--orange));
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--yellow) 25%, transparent), 0 14px 30px rgba(255, 138, 61, 0.45);
    animation: pop-in 0.6s var(--spring);
}

.victory__burst svg {
    width: 52px;
    height: 52px;
}

.victory__title {
    margin: 4px 0 0;
    font-size: 36px;
    font-weight: 1000;
    background: var(--violet);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.victory__coins {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px 6px 8px;
    border-radius: 999px;
    font-size: 22px;
    font-weight: 1000;
    color: #6A4A00;
    background: linear-gradient(180deg, #FFF1B8, #FFC93C);
    animation: pop-in 0.6s var(--spring) 0.15s both;
}

.victory__coins svg {
    width: 30px;
    height: 30px;
}

.victory__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 900;
    color: #FFFFFF;
    background: var(--violet);
}

.victory__badge svg {
    width: 18px;
    height: 18px;
}

.ic-anyway {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    font-weight: 800;
    color: var(--ink-soft);
    background: var(--surface-soft);
}

.ic-anyway svg {
    width: 28px;
    height: 28px;
    flex: none;
    color: var(--orange);
}

/* ------------------------------------------------ ДЕНЬ РЕФЛЕКСИИ ------------------------------------------------ */

.overlay--reflection {
    background: linear-gradient(180deg, rgba(16, 12, 40, 0.3) 0%, transparent 25%, transparent 38%, rgba(16, 12, 40, 0.45) 100%);
}

.rf-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 12px;
}

.rf-dots span {
    width: 26px;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-press);
    transition: background 0.3s ease, width 0.3s var(--spring);
}

.rf-dots span[data-done="true"] {
    background: var(--violet);
}

.rf-intro__text {
    margin: 0;
    font-size: 18px;
    line-height: 1.45;
    color: var(--ink-soft);
}

.rf-nav {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.support-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.support-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--sky) 10%, var(--surface-solid));
    animation: step-in 0.4s var(--ease-out) both;
    animation-delay: calc(var(--i) * 70ms);
}

.support-card b {
    font-size: 15px;
    color: var(--ink);
}

.rf-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    font-size: 17px;
    font-weight: 800;
}

.rf-done p {
    margin: 0;
}

.rf-done__sun {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    color: #FFFFFF;
    background: radial-gradient(circle at 35% 30%, #FFF1B8, var(--yellow) 50%, var(--orange));
    box-shadow: 0 0 40px rgba(255, 201, 60, 0.6);
    animation: pop-in 0.7s var(--spring);
}

.rf-done__sun svg {
    width: 46px;
    height: 46px;
}

.ai-take {
    padding: 14px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--violet) 10%, var(--surface-solid));
}

.ai-take__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--violet);
}

.ai-take__title svg {
    width: 16px;
    height: 16px;
}

.ai-take p {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.45;
}

/* помощь при тревожных словах */
.safety-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--pink) 10%, var(--surface-solid));
    border: 2px solid color-mix(in srgb, var(--pink) 35%, transparent);
}

.safety-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 1000;
    color: var(--pink-deep);
}

.safety-card__title svg {
    width: 22px;
    height: 22px;
}

.safety-card__label {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.hotline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 16px;
    text-decoration: none;
    color: var(--ink);
    background: var(--surface-solid);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--pink) 25%, transparent);
}

.hotline__phone {
    font-size: 20px;
    font-weight: 1000;
    color: var(--pink-deep);
}

.hotline__title {
    font-size: 13px;
    color: var(--muted);
}

/* ------------------------------------------------ РАЗГОВОР ------------------------------------------------ */

.sheet--chat {
    height: 66%;
}

.sheet--chat .sheet__body {
    flex: 1 1 auto;
}

.chat {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat__hint {
    align-self: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
    background: var(--surface-soft);
    text-align: center;
}

.chat__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bubble {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    animation: bubble-in 0.35s var(--spring);
}

@keyframes bubble-in {
    from { opacity: 0; transform: translateY(8px) scale(0.92); }
    to { opacity: 1; transform: none; }
}

.bubble--me {
    align-self: flex-end;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--violet), #9A85FF);
    border-bottom-right-radius: 6px;
}

.bubble--pet {
    color: var(--ink);
    background: var(--surface-soft);
    border-bottom-left-radius: 6px;
}

.bubble-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.bubble-row__avatar {
    flex: none;
}

.bubble--typing {
    display: inline-flex;
    gap: 5px;
    padding: 14px 16px;
}

.bubble--typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
    animation: typing 1s ease-in-out infinite;
}

.bubble--typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble--typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(-5px); opacity: 1; }
}

.chat-event {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 800;
    background: color-mix(in srgb, var(--mint) 14%, var(--surface-solid));
    animation: pop-in 0.4s var(--spring);
}

.chat-event svg {
    width: 18px;
    height: 18px;
    color: var(--mint-deep);
}

.composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.composer__input {
    flex: 1;
    min-height: 50px;
    max-height: 140px;
    padding: 13px 16px;
    border: 2px solid transparent;
    border-radius: 22px;
    resize: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
    background: var(--surface-soft);
    outline: none;
}

.composer__input:focus {
    border-color: var(--violet);
    background: var(--surface-solid);
}

.composer__mic,
.composer__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #FFFFFF;
    transition: transform 0.2s var(--spring);
}

.composer__mic:active,
.composer__send:active {
    transform: scale(0.88);
}

.composer__mic svg,
.composer__send svg {
    width: 24px;
    height: 24px;
}

.composer__mic {
    background: linear-gradient(180deg, #6CC0FF, var(--sky));
}

.composer__mic[data-listening="1"] {
    background: linear-gradient(180deg, #FF7F7F, var(--red));
    animation: listening 1.1s ease-in-out infinite;
}

@keyframes listening {
    50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--red) 25%, transparent); }
}

.composer__send {
    background: linear-gradient(180deg, #9A85FF, var(--violet));
}

/* ------------------------------------------------ ДЕЛА ------------------------------------------------ */

.task-composer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.task-composer__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-composer__row .segmented {
    flex: 1;
}

.importance-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.importance {
    --imp: var(--important);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 8px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 900;
    color: var(--ink-soft);
    background: var(--surface-soft);
    border: 2px solid transparent;
    transition: transform 0.2s var(--spring), background 0.2s ease, color 0.2s ease;
}

.importance svg {
    width: 18px;
    height: 18px;
    color: var(--imp);
}

.importance--fire { --imp: var(--fire); }
.importance--later { --imp: var(--later); }

.importance[aria-pressed="true"] {
    color: #FFFFFF;
    background: var(--imp);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--imp) 40%, transparent);
    transform: scale(1.03);
}

.importance[aria-pressed="true"] svg {
    color: #FFFFFF;
}

.time-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 10px;
    border-radius: 14px;
    background: var(--surface-soft);
    color: var(--muted);
}

.time-field svg {
    width: 18px;
    height: 18px;
}

.time-field input {
    width: 76px;
    border: 0;
    outline: none;
    font-weight: 900;
    font-size: 15px;
    background: transparent;
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
}

.toggle-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 15px;
    color: #FFFFFF;
    background: var(--red);
}

.toggle-row__icon svg {
    width: 22px;
    height: 22px;
}

.toggle-row__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-row__body small {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.3;
}

.task-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task {
    --imp: var(--important);
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px 12px 16px;
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    animation: step-in 0.35s var(--ease-out) both;
    transition: opacity 0.3s ease, transform 0.35s var(--spring);
}

.task::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 5px;
    border-radius: 0 6px 6px 0;
    background: var(--imp);
}

.task[data-importance="fire"] { --imp: var(--fire); }
.task[data-importance="later"] { --imp: var(--later); }

.task[data-done="true"] {
    opacity: 0.55;
}

.task[data-done="true"] .task__title {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.task--pop {
    animation: task-pop 0.45s var(--spring);
}

@keyframes task-pop {
    40% { transform: scale(1.04); }
}

.task--leaving {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
}

.task__body {
    flex: 1;
    min-width: 0;
}

.task__title {
    font-size: 17px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.task__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 800;
    color: var(--muted);
}

.task__meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.task__meta svg {
    width: 14px;
    height: 14px;
}

.task__overdue {
    color: var(--red);
}

/* ------------------------------------------------ ПОЛЕЗНОЕ ------------------------------------------------ */

.tool-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.tool-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 130px;
    padding: 14px;
    border-radius: 26px;
    text-align: left;
    color: #FFFFFF;
    /* плотный ровный цвет и толстый нижний край, как у кнопок: плитка похожа на игровую кнопку, а не на глянцевый баннер */
    background: var(--tint-a);
    box-shadow: 0 6px 0 color-mix(in srgb, var(--tint-a) 72%, #000000), 0 10px 20px color-mix(in srgb, var(--tint-a) 22%, transparent);
    overflow: hidden;
    animation: step-in 0.45s var(--ease-out) both;
    animation-delay: calc(var(--i) * 40ms);
    transition: transform 0.2s var(--spring), box-shadow 0.2s var(--spring);
}

.tool-tile:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--tint-a) 75%, #000000), 0 6px 12px color-mix(in srgb, var(--tint-a) 25%, transparent);
}

.tool-tile--wide {
    grid-column: span 2;
    min-height: 104px;
}

.tool-tile__icon {
    display: inline-flex;
    padding: 9px;
    border-radius: 16px;
    color: var(--tint-a);
    background: #FFFFFF;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--tint-a) 72%, #000000);
    margin-bottom: auto;
}

.tool-tile__icon svg {
    width: 26px;
    height: 26px;
}

.tool-tile__title {
    font-size: 18px;
    font-weight: 1000;
    line-height: 1.15;
}

.tool-tile__sub {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.92;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tool-tile__done {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    padding: 5px;
    border-radius: 50%;
    color: var(--mint-deep);
    background: #FFFFFF;
}

.tool-tile__done svg {
    width: 16px;
    height: 16px;
}

.focus-pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.focus-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 20px 10px;
    border-radius: 26px;
    color: #FFFFFF;
    background: var(--violet);
    box-shadow: 0 6px 0 var(--violet-deep), 0 12px 24px rgba(123, 97, 255, 0.35);
    transition: transform 0.2s var(--spring);
}

.focus-option {
    position: relative;
    padding: 14px 10px;
}

.focus-option:nth-child(2) {
    background: var(--sky-deep);
    box-shadow: 0 6px 0 #3B4BD6, 0 12px 24px rgba(59, 168, 255, 0.35);
}

.focus-option:nth-child(3) {
    background: var(--mint-deep);
    box-shadow: 0 6px 0 #0B7A5D, 0 12px 24px rgba(17, 165, 126, 0.35);
}

.focus-option:nth-child(4) {
    background: var(--orange-deep);
    box-shadow: 0 6px 0 #C4631F, 0 12px 24px rgba(255, 138, 61, 0.35);
}

.focus-option[aria-pressed="true"] {
    outline: 4px solid var(--ink);
    outline-offset: 3px;
}

.focus-option b {
    font-size: 40px;
}

.focus-option__chance {
    position: absolute;
    top: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    font-style: normal;
    font-size: 11px;
    font-weight: 1000;
    color: #FFFFFF;
}

/* мелкий белый текст шанса читается на более темных синем и янтарном */
.focus-option__chance--rare {
    left: 8px;
    background: #1E88E5;
}

.focus-option__chance--epic {
    right: 8px;
    background: #D97706;
}

.activity-pick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.activity-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 13px;
    color: var(--ink);
    background: var(--surface-soft);
    border: 3px solid transparent;
    transition: transform 0.25s var(--spring), border-color 0.2s ease;
}

.activity-option:active {
    transform: scale(0.95);
}

.activity-option[aria-pressed="true"] {
    border-color: var(--violet);
    background: color-mix(in srgb, var(--violet) 12%, var(--surface-solid));
}

.activity-option__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--violet), var(--lilac));
}

.activity-option[aria-pressed="true"] .activity-option__icon {
    background: var(--pink);
}

.activity-option__icon svg {
    width: 22px;
    height: 22px;
}


.note-line--muted {
    font-size: 13px;
}

.coins-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 14px;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 800;
    color: #6A4A00;
    background: #FFF1C2;
}

.coins-rule svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.focus-doing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 900;
    color: var(--violet-deep);
    background: color-mix(in srgb, var(--violet) 12%, var(--surface-solid));
}

.focus-doing svg {
    width: 20px;
    height: 20px;
}

.focus-reward {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 900;
}

.focus-reward span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
}

.focus-reward__coins {
    color: #6A4A00;
    background: #FFE38A;
}

.focus-reward__coins svg {
    width: 18px;
    height: 18px;
}

.focus-reward__rare {
    color: #FFFFFF;
    background: #3BA8FF;
}

.focus-reward__epic {
    color: #FFFFFF;
    background: #FFB020;
}

.focus-option:active {
    transform: translateY(4px);
}

.focus-option b {
    font-size: 48px;
    font-weight: 1000;
    line-height: 1;
}

.focus-option small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 10px 3px 4px;
    border-radius: 999px;
    font-weight: 900;
    color: #6A4A00;
    background: #FFE38A;
}

.focus-option small svg {
    width: 20px;
    height: 20px;
}

.overlay--focus {
    background: linear-gradient(180deg, rgba(20, 16, 60, 0.35), rgba(20, 16, 60, 0.6));
}

.overlay--focus .ov-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.focus-ring {
    position: relative;
    width: 210px;
    height: 210px;
    /* мягкое свечение кольца - круглой тенью, а не фильтром: фильтр на карточке со стеклом давал светлый квадрат */
    border-radius: 50%;
    box-shadow: 0 0 26px rgba(123, 97, 255, 0.22);
}

.focus-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.focus-ring__track {
    fill: none;
    stroke: var(--surface-press);
    stroke-width: 9;
}

.focus-ring__value {
    fill: none;
    stroke: var(--violet);
    stroke-width: 9;
    stroke-linecap: round;
    transition: stroke-dasharray 1s linear;
}

.focus-ring__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.focus-ring__center b {
    font-size: 46px;
    font-weight: 1000;
    font-variant-numeric: tabular-nums;
}

.focus-ring__center small {
    color: var(--muted);
    font-weight: 800;
}

.face-down {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 18px;
    font-weight: 800;
    color: var(--ink-soft);
    background: var(--surface-soft);
    transition: background 0.3s ease, color 0.3s ease;
}

.face-down svg {
    width: 22px;
    height: 22px;
    transform: rotate(180deg);
}

.face-down[data-down="1"] {
    color: #FFFFFF;
    background: var(--mint);
}

.word-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 18px;
    border-radius: 28px;
    text-align: center;
    color: #FFFFFF;
    background: var(--sky-deep);
    box-shadow: 0 14px 30px rgba(59, 168, 255, 0.35);
}

.word-card__lang {
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.22);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.word-card__word {
    font-size: 44px;
    font-weight: 1000;
    line-height: 1.05;
    animation: pop-in 0.5s var(--spring);
}

.word-card__ipa {
    font-size: 16px;
    opacity: 0.85;
}

.word-card__translation {
    margin-top: 4px;
    font-size: 22px;
    font-weight: 900;
}

.word-card__example {
    margin: 4px 0 8px;
    font-size: 15px;
    font-style: italic;
    opacity: 0.92;
}

.word-card .btn {
    --btn-a: #FFFFFF;
    --btn-b: #FFFFFF;
    --btn-edge: rgba(0, 0, 0, 0.15);
    color: var(--sky-deep);
}

.gratitude-item {
    display: flex;
    align-items: center;
    gap: 10px;
    animation: step-in 0.4s var(--ease-out) both;
    animation-delay: calc(var(--i) * 50ms);
}

.gratitude-item__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    font-weight: 1000;
    color: #FFFFFF;
    background: var(--pink);
}

.journal-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.journal-history__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 14px;
    background: var(--surface-soft);
}

.journal-history__item b {
    font-size: 12px;
    color: var(--muted);
}

.add-book {
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: none;
    background: var(--surface-soft);
}

.book-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.book {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.book__cover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 72px;
    flex: none;
    border-radius: 8px 14px 14px 8px;
    color: #FFFFFF;
    background: linear-gradient(145deg, hsl(var(--h) 80% 62%), hsl(calc(var(--h) + 40) 80% 52%));
    box-shadow: inset 6px 0 0 rgba(0, 0, 0, 0.12), 0 6px 14px rgba(40, 30, 110, 0.2);
}

.book__cover svg {
    width: 26px;
    height: 26px;
}

.book__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.book__title {
    font-size: 17px;
    font-weight: 900;
}

.book__meta {
    font-size: 13px;
    color: var(--muted);
}

.book[data-status="done"] .progress span {
    background: var(--orange);
}

.book__log {
    display: flex;
    gap: 6px;
}

.book__log .input {
    min-width: 0;
}

.habit-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.habit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    animation: step-in 0.4s var(--ease-out) both;
    animation-delay: calc(var(--i) * 50ms);
}

.habit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 16px;
    color: #FFFFFF;
}

.habit__icon svg {
    width: 24px;
    height: 24px;
}

.habit__icon--water { background: linear-gradient(135deg, #3BA8FF, #7FD3FF); }
.habit__icon--sport { background: var(--orange); }
.habit__icon--sleep { background: linear-gradient(135deg, #5B42E0, #9A85FF); }
.habit__icon--care { background: linear-gradient(135deg, #FF4F9A, #FF8FC4); }

.habit__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.habit__week {
    display: flex;
    gap: 4px;
}

.habit__week span {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: var(--surface-press);
    transition: background 0.3s ease, transform 0.3s var(--spring);
}

.habit__week span[data-on="true"] {
    background: var(--mint);
}

.habit__week span:last-child {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--violet) 40%, transparent);
}

.mini-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mini-stepper__value {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 46px;
    line-height: 1.05;
}

.mini-stepper__value b {
    font-size: 22px;
    font-weight: 1000;
}

.mini-stepper__value small {
    font-size: 11px;
    color: var(--muted);
}

.app-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
}

.app-row > i svg {
    width: 20px;
    height: 20px;
    color: var(--muted);
}

.app-row__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.app-row__body small {
    color: var(--muted);
}

.insight-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.insight {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 20px;
    background: var(--surface-soft);
    animation: step-in 0.45s var(--ease-out) both;
    animation-delay: calc(var(--i) * 90ms);
}

.insight p {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
}

.insight__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    font-weight: 1000;
    color: #FFFFFF;
    background: var(--pink);
}

.offline-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 18px;
    border-radius: 28px;
    text-align: center;
    color: #FFFFFF;
    background: var(--orange-deep);
}

.offline-card p {
    margin: 0;
    font-size: 24px;
    font-weight: 1000;
    line-height: 1.2;
}

.offline-card__sun svg {
    width: 54px;
    height: 54px;
    animation: spin 12s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------ МАГАЗИН И ПОДАРОК ------------------------------------------------ */

.sheet--shop {
    max-height: 62%;
}

.shop {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.shop__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shop__head .segmented {
    flex: 1;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.shop-item {
    --rarity: #B7B3CC;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px 8px;
    border-radius: 22px;
    background: var(--surface-soft);
    border: 3px solid transparent;
    transition: transform 0.25s var(--spring), border-color 0.2s ease;
}

.shop-item--rare { --rarity: #3BA8FF; }
.shop-item--epic { --rarity: #FFB020; }

.shop-item:active {
    transform: scale(0.94);
}

.shop-item[aria-pressed="true"] {
    border-color: var(--violet);
    animation: pop-in 0.35s var(--spring);
}

.shop-item__art {
    display: block;
    width: 64px;
    height: 64px;
    padding: 6px;
    border-radius: 20px;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rarity) 30%, #FFFFFF), color-mix(in srgb, var(--rarity) 12%, #FFFFFF));
}

.shop-item--epic .shop-item__art {
    box-shadow: 0 0 18px color-mix(in srgb, var(--rarity) 55%, transparent);
}

.shop-item__name {
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    line-height: 1.15;
    min-height: 2.3em;
    display: flex;
    align-items: center;
}

.shop-item__price,
.shop-item__state {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    font-weight: 1000;
}

.shop-item__price svg {
    width: 18px;
    height: 18px;
}

.shop-item__state {
    font-size: 12px;
    color: var(--mint-deep);
}

.shop-item__state svg {
    width: 14px;
    height: 14px;
}

.shop-item__rarity {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    font-size: 0;
    background: var(--rarity);
}

.shop-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shop-footer__info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 17px;
}

.rarity-text {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: #FFFFFF;
    background: #9C98B5;
}

.rarity-text--rare { background: var(--sky); }
.rarity-text--epic { background: linear-gradient(90deg, var(--yellow), var(--orange)); }

.overlay--gift {
    background: radial-gradient(circle at 50% 30%, rgba(255, 201, 60, 0.18), transparent 60%), linear-gradient(180deg, transparent 40%, rgba(20, 14, 60, 0.3));
}

.gift-box-wrap {
    display: flex;
    justify-content: center;
    padding: 18px 0 6px;
}

.gift-box {
    position: relative;
    width: 150px;
    height: 140px;
    animation: float 2.6s ease-in-out infinite;
}

.gift-box__body {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 92px;
    border-radius: 18px;
    background: linear-gradient(180deg, #FF8FC4, var(--pink));
    box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.1), 0 16px 30px rgba(255, 79, 154, 0.4);
}

.gift-box__lid {
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
    height: 34px;
    border-radius: 14px;
    background: linear-gradient(180deg, #FFA8D0, #FF6FAE);
    z-index: 2;
    transition: transform 0.6s var(--spring);
}

.gift-box__ribbon {
    position: absolute;
    left: 50%;
    top: 30px;
    bottom: 0;
    width: 22px;
    margin-left: -11px;
    background: var(--yellow);
    z-index: 3;
}

.gift-box__bow {
    position: absolute;
    left: 50%;
    top: 4px;
    width: 64px;
    height: 34px;
    margin-left: -32px;
    z-index: 4;
    background:
        radial-gradient(ellipse 16px 13px at 16px 17px, var(--yellow) 98%, transparent),
        radial-gradient(ellipse 16px 13px at 48px 17px, var(--yellow) 98%, transparent);
    transition: transform 0.6s var(--spring);
}

.gift-box[data-opening="1"] {
    animation: gift-shake 0.5s ease-in-out 2;
}

.gift-box[data-opening="1"] .gift-box__lid,
.gift-box[data-opening="1"] .gift-box__bow {
    transform: translateY(-40px) rotate(-14deg);
    transition-delay: 0.8s;
}

@keyframes gift-shake {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-8deg) scale(1.04); }
    75% { transform: rotate(8deg) scale(1.04); }
}

.gift-odds {
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

.overlay--gift .ov-card > * + * {
    margin-top: 12px;
}

.gift-reveal {
    --glow: #B7B3CC;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0 4px;
    text-align: center;
}

.gift-reveal--rare { --glow: #3BA8FF; }
.gift-reveal--epic { --glow: #FFB020; }

.gift-reveal__glow {
    position: absolute;
    top: -10px;
    left: 50%;
    width: 220px;
    height: 220px;
    margin-left: -110px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--glow) 45%, transparent), transparent, color-mix(in srgb, var(--glow) 45%, transparent), transparent);
    filter: blur(6px);
    animation: spin 6s linear infinite;
    pointer-events: none;
}

.gift-reveal__art {
    position: relative;
    width: 120px;
    height: 120px;
    padding: 14px;
    border-radius: 34px;
    background: radial-gradient(circle at 50% 40%, #FFFFFF, color-mix(in srgb, var(--glow) 25%, #FFFFFF));
    box-shadow: 0 0 30px color-mix(in srgb, var(--glow) 60%, transparent);
    animation: pop-in 0.7s var(--spring);
}

.gift-reveal__art--coins svg {
    width: 100%;
    height: 100%;
}

.gift-reveal__label {
    position: relative;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.gift-reveal__name {
    position: relative;
    font-size: 26px;
    font-weight: 1000;
}

/* ------------------------------------------------ ЗООПАРК ------------------------------------------------ */

.zoo {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.zoo-top {
    position: absolute;
    top: calc(var(--safe-top) + 12px);
    left: 0;
    right: 0;
    padding: 0 12px;
}

.group-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.group-tabs::-webkit-scrollbar {
    display: none;
}

.group-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    font-weight: 900;
    color: var(--ink);
    background: var(--glass);
    border: 2px solid var(--glass-border);
    box-shadow: 0 6px 16px rgba(40, 30, 110, 0.16);
}

.group-tab svg {
    width: 18px;
    height: 18px;
    color: var(--pink);
}

.group-tab[aria-pressed="true"] {
    color: #FFFFFF;
    background: var(--violet);
    border-color: transparent;
}

.group-tab[aria-pressed="true"] svg {
    color: #FFFFFF;
}

.group-tab--add {
    width: 42px;
    padding: 0;
    justify-content: center;
}

.zoo-consent {
    position: absolute;
    top: calc(var(--safe-top) + 66px);
    left: 12px;
    right: 12px;
    width: min(calc(100% - 24px), 520px);
    margin: 0 auto;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
}

.zoo-consent svg {
    width: 26px;
    height: 26px;
    flex: none;
    color: var(--violet);
}

.zoo-consent div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zoo-empty {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(var(--safe-bottom) + var(--tabbar-height) + 14px);
    width: min(calc(100% - 24px), 520px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.zoo-empty h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 1000;
}

.zoo-empty p {
    margin: 0 0 4px;
    color: var(--ink-soft);
}

.zoo-dock {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(var(--safe-bottom) + var(--tabbar-height) + 14px);
    width: min(calc(100% - 24px), 520px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 28px;
}

.zoo-dock__info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.zoo-dock__kind {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 900;
    color: #FFFFFF;
    background: var(--pink);
}

.zoo-dock__kind svg {
    width: 15px;
    height: 15px;
}

.zoo-dock__code {
    flex: 1;
    color: var(--muted);
}

.zoo-dock__code b {
    color: var(--ink);
    letter-spacing: 0.12em;
}

.zoo-dock .icon-button {
    width: 36px;
    height: 36px;
}

.zoo-dock__buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.dock-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 900;
    color: var(--ink-soft);
}

.dock-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 17px;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--violet), var(--lilac));
    box-shadow: 0 4px 0 var(--violet-deep);
    transition: transform 0.2s var(--spring);
}

.dock-button:nth-child(2) .dock-button__icon { background: linear-gradient(135deg, var(--yellow-deep), var(--yellow)); box-shadow: 0 4px 0 #C48A00; }
.dock-button:nth-child(3) .dock-button__icon { background: linear-gradient(135deg, var(--pink), #FF8FC4); box-shadow: 0 4px 0 var(--pink-deep); }
.dock-button:nth-child(4) .dock-button__icon { background: linear-gradient(135deg, var(--mint-deep), var(--mint)); box-shadow: 0 4px 0 #0B7F61; }
.dock-button:nth-child(5) .dock-button__icon { background: linear-gradient(135deg, var(--sky-deep), var(--sky)); box-shadow: 0 4px 0 #1468A8; }

.dock-button:active .dock-button__icon {
    transform: translateY(3px);
}

.dock-button__icon svg {
    width: 24px;
    height: 24px;
}

.kind-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.kind-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.kind-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    background: var(--surface-soft);
    border: 3px solid transparent;
    transition: transform 0.2s var(--spring);
}

.kind-tile svg {
    width: 28px;
    height: 28px;
    color: var(--violet);
}

.kind-tile[aria-pressed="true"] {
    border-color: var(--violet);
    background: color-mix(in srgb, var(--violet) 12%, var(--surface-solid));
    animation: pop-in 0.35s var(--spring);
}

.member-card {
    display: flex;
    align-items: center;
    gap: 16px;
}

.member-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.member-card__body b {
    font-size: 20px;
}

.state-pill {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: #FFFFFF;
    background: var(--state);
}

.restorer-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 18px;
    text-align: left;
    font-weight: 800;
    background: color-mix(in srgb, var(--pink) 10%, var(--surface-solid));
    transition: transform 0.2s var(--spring);
}

.restorer-option:active {
    transform: scale(0.97);
}

.restorer-option svg {
    width: 20px;
    height: 20px;
    color: var(--pink);
}

.lock-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border-radius: 22px;
    font-weight: 800;
    color: var(--ink-soft);
    background: var(--surface-soft);
}

.lock-card svg {
    width: 30px;
    height: 30px;
    flex: none;
    color: var(--violet);
}

.share-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.share-row__label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 4px;
    font-size: 13px;
    font-weight: 900;
    color: var(--muted);
}

.share-row__label svg {
    width: 16px;
    height: 16px;
}

.gchat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gmsg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 84%;
}

.gmsg--me {
    align-self: flex-end;
    align-items: flex-end;
}

.gmsg__name {
    padding: 0 10px;
    font-size: 12px;
    font-weight: 900;
    color: var(--violet);
}

.gmsg__bubble {
    padding: 9px 14px;
    border-radius: 18px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
    background: var(--surface-soft);
}

.gmsg--me .gmsg__bubble {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--violet), #9A85FF);
}

.respect {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: var(--orange-deep);
    background: color-mix(in srgb, var(--orange) 14%, transparent);
    transition: transform 0.2s var(--spring);
}

.respect:active {
    transform: scale(0.85);
}

.respect svg {
    width: 15px;
    height: 15px;
}

.gevent {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--sky) 10%, var(--surface-solid));
}

.gevent > i {
    display: inline-flex;
    flex: none;
}

.gevent > i svg {
    width: 26px;
    height: 26px;
    flex: none;
    color: var(--sky);
}

.gevent > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 14px;
}

.gevent--support {
    background: color-mix(in srgb, var(--pink) 12%, var(--surface-solid));
}

.gevent--support > i svg,
.gevent--restorer > i svg {
    color: var(--pink);
}

.gevent--restorer {
    background: color-mix(in srgb, var(--pink) 8%, var(--surface-solid));
}

.gevent--success {
    background: color-mix(in srgb, var(--yellow) 18%, var(--surface-solid));
}

.gevent--success > i svg {
    color: var(--yellow-deep);
}

.gsystem {
    align-self: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
}

.together {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 900;
}

.together b {
    font-size: 26px;
    font-weight: 1000;
}

.leader__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.leader__head > div {
    display: flex;
    flex-direction: column;
}

.leader__head small {
    font-size: 12px;
    font-weight: 900;
    color: var(--yellow-deep);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.leader__head b {
    font-size: 20px;
}

.leader__crown {
    display: inline-flex;
    padding: 8px;
    border-radius: 14px;
    color: #FFFFFF;
    background: var(--yellow-deep);
}

.leader__crown svg {
    width: 24px;
    height: 24px;
}

.leader__path-title {
    margin: 14px 0 8px;
    font-size: 13px;
    font-weight: 900;
    color: var(--muted);
}

.leader-path {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    height: 110px;
}

.leader-path__day {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.leader-path__bar {
    width: 100%;
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, var(--yellow), var(--orange));
    animation: grow-up 0.7s var(--ease-out) both;
    transform-origin: bottom;
}

.leader-path__day[data-status="recovery"] .leader-path__bar {
    background: linear-gradient(180deg, var(--lilac), var(--violet));
}

.leader-path__day small {
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
}

@keyframes grow-up {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

.board {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.board-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    border-radius: 18px;
    background: var(--surface-soft);
    animation: step-in 0.4s var(--ease-out) both;
    animation-delay: calc(var(--i) * 60ms);
}

.board-row--me {
    background: color-mix(in srgb, var(--violet) 12%, var(--surface-solid));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--violet) 40%, transparent);
}

.board-row__place {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 1000;
    color: var(--muted);
}

.board-row__place--1 { color: #FFFFFF; background: linear-gradient(135deg, #FFD96B, #FFB020); }
.board-row__place--2 { color: #FFFFFF; background: linear-gradient(135deg, #DDE2EE, #A9B1C5); }
.board-row__place--3 { color: #FFFFFF; background: linear-gradient(135deg, #F2B98A, #C97A42); }

.board-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.board-row__value {
    font-size: 14px;
    font-weight: 1000;
    white-space: nowrap;
}

.challenge {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.challenge__head {
    display: flex;
    gap: 12px;
    align-items: center;
}

.challenge__head > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.challenge__head small {
    color: var(--muted);
}

.challenge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 16px;
    color: #FFFFFF;
    background: var(--pink);
}

.challenge[data-kind="pair"] .challenge__icon {
    background: var(--mint-deep);
}

.challenge__icon svg {
    width: 24px;
    height: 24px;
}

.challenge__people {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.challenge__person {
    display: grid;
    grid-template-columns: minmax(70px, 1fr) 2fr auto;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 800;
}

.challenge__person svg {
    width: 14px;
    height: 14px;
    color: var(--yellow-deep);
    vertical-align: -2px;
}

.challenge__person small {
    color: var(--muted);
    font-weight: 800;
}

.challenge .btn {
    align-self: flex-start;
}

.meeting {
    display: flex;
    align-items: center;
    gap: 12px;
}

.meeting__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 16px;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--mint-deep), var(--mint));
}

.meeting__icon svg {
    width: 24px;
    height: 24px;
}

.meeting__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.meeting__body small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-weight: 700;
}

.meeting__body small svg {
    width: 14px;
    height: 14px;
}

.overlay--qr {
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 14, 60, 0.55);
}

.qr-card {
    width: min(100%, 360px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    animation: pop-in 0.45s var(--spring);
}

.qr-card h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 1000;
}

.qr {
    width: 100%;
    max-width: 260px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(40, 30, 110, 0.2);
}

.qr-card__code {
    font-size: 26px;
    font-weight: 1000;
    letter-spacing: 0.2em;
}

.scanner {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    aspect-ratio: 1;
    background: #000000;
}

.scanner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scanner__frame {
    position: absolute;
    inset: 18%;
    border: 4px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
    animation: float 2s ease-in-out infinite;
}

.people-search {
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: none;
    background: var(--surface-soft);
}

.people-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.person {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    animation: step-in 0.4s var(--ease-out) both;
    animation-delay: calc(var(--i) * 50ms);
}

.person__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.person__body small {
    color: var(--muted);
}

/* ------------------------------------------------ Я ------------------------------------------------ */

/* карточка профиля: цвета из облика питомца, питомец на круглом коврике, как в его комнате */
.me-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: color-mix(in srgb, var(--pet-light) 9%, var(--surface-solid));
    border: 2px solid color-mix(in srgb, var(--pet) 22%, transparent);
    box-shadow: 0 5px 0 color-mix(in srgb, var(--pet) 28%, transparent), var(--shadow-card);
}

.me-card__portrait {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(circle, #F7B5BA 0 47%, #EC97A1 47% 53%, #F7B5BA 53% 64%, #EC97A1 64% 69%, #F3A8AF 69%);
    box-shadow: inset 0 -4px 0 rgba(150, 60, 80, 0.14);
}

.me-card__portrait .pet-avatar {
    width: 74px;
    height: auto;
}

.me-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
}

.me-card__name {
    font-size: 22px;
    font-weight: 1000;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.me-card__login {
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
}

.me-card__pet {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 900;
}

.me-card__pet-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.me-card__stage {
    flex: none;
    padding: 2px 9px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 1000;
    color: color-mix(in srgb, var(--pet) 72%, #000000);
    background: color-mix(in srgb, var(--pet) 16%, var(--surface-solid));
}

.app[data-theme="evening"] .me-card__stage {
    color: color-mix(in srgb, var(--pet) 55%, #FFFFFF);
}

.me-card__growth {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.me-card__growth .progress span {
    background: var(--pet);
}

.me-card__growth small {
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
}

.consent-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    color: var(--red);
}

.consent-status[data-ok="true"] {
    color: var(--mint-deep);
}

.consent-status svg {
    width: 24px;
    height: 24px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px;
}

.card + .stat-grid .card,
.stat-grid .card + .card {
    margin-top: 0;
}

.stat svg {
    width: 28px;
    height: 28px;
    color: var(--tint);
    margin-bottom: 4px;
}

.stat b {
    font-size: 24px;
    font-weight: 1000;
    line-height: 1.1;
}

.stat span {
    font-size: 13px;
    color: var(--muted);
    font-weight: 800;
}

.saved-human {
    display: flex;
    align-items: center;
    gap: 12px;
}

.saved-human__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    color: #FFFFFF;
    background: var(--tint-a);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--tint-a) 60%, #000000);
}

.saved-human__icon svg {
    width: 26px;
    height: 26px;
}

.saved-human p {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.3;
}

.chart-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chart-card .segmented {
    align-self: flex-start;
}

.chart-wrap {
    height: 160px;
}

.chart {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart__bar {
    fill: var(--violet);
    animation: grow-up 0.6s var(--ease-out) both;
    transform-box: fill-box;
    transform-origin: bottom;
}

.chart__bar--over {
    fill: var(--red);
}

.chart__dot {
    fill: var(--surface-solid);
    stroke: var(--mint);
    stroke-width: 2.5;
}

.chart__norm {
    fill: none;
    stroke: var(--mint);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1 6;
}

.chart__baseline {
    stroke: var(--muted);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    opacity: 0.5;
}

.chart__label {
    font-size: 10px;
    font-weight: 800;
    text-anchor: middle;
    fill: var(--muted);
}

.chart-legend,
.calendar-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
}

.chart-legend__bar {
    width: 10px;
    height: 14px;
    border-radius: 3px;
    background: var(--violet);
}

.chart-legend__line {
    width: 18px;
    height: 0;
    margin-left: 10px;
    border-top: 3px dotted var(--mint);
}

.calendar__month {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 1000;
    text-transform: capitalize;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 10px;
}

.calendar__weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
}

.calendar__day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 900;
    color: var(--ink-soft);
    background: var(--surface-soft);
}

.calendar__day--ok { color: #FFFFFF; background: linear-gradient(135deg, var(--mint), #6BE3C1); }
.calendar__day--recovery { color: #FFFFFF; background: linear-gradient(135deg, var(--violet), var(--lilac)); }
.calendar__day--over { color: #FFFFFF; background: linear-gradient(135deg, #B9B6C8, #8E8AA6); }
.calendar__day--open { background: color-mix(in srgb, var(--sky) 18%, var(--surface-solid)); }
.calendar__day--today { box-shadow: 0 0 0 3px var(--pink); }

.calendar-legend__dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    margin-left: 8px;
}

.calendar-legend__dot:first-child { margin-left: 0; }
.calendar-legend__dot--ok { background: var(--mint); }
.calendar-legend__dot--recovery { background: var(--violet); }

.badge-map {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.badge-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 6px;
    border-radius: 20px;
    text-align: center;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    animation: step-in 0.4s var(--ease-out) both;
    animation-delay: calc(var(--i) * 30ms);
}

.badge-tile b {
    font-size: 13px;
    line-height: 1.15;
}

.badge-tile small {
    font-size: 11px;
    line-height: 1.2;
    color: var(--muted);
}

.badge-tile__medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: #FFFFFF;
    background: var(--yellow-deep);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow) 30%, transparent), 0 8px 16px rgba(255, 138, 61, 0.35);
}

.badge-tile__medal svg {
    width: 28px;
    height: 28px;
}

.badge-tile[data-earned="false"] {
    opacity: 0.55;
}

.badge-tile[data-earned="false"] .badge-tile__medal {
    color: var(--muted);
    background: var(--surface-press);
    box-shadow: none;
}

.settings {
    padding: 4px 14px;
}

.settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 8px 0;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.settings-row:last-child {
    border-bottom: 0;
}

.settings-row > i svg {
    width: 18px;
    height: 18px;
    color: var(--muted);
}

.settings-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 13px;
    color: var(--violet);
    background: color-mix(in srgb, var(--violet) 12%, transparent);
}

.settings-row__icon svg {
    width: 20px;
    height: 20px;
}

.settings-row__label {
    flex: 1;
    min-width: 0;
    font-weight: 800;
}

.settings-row__label b {
    margin-left: 8px;
    color: var(--violet);
}

.settings-row__value {
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--muted);
}

.settings-row__select {
    max-width: 50%;
    min-height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    font-weight: 900;
    color: var(--ink);
    background: var(--surface-soft);
    outline: none;
}

.settings-row__field {
    width: 46%;
}

.settings-row--slider {
    flex-wrap: wrap;
}

.settings-row--slider .slider {
    flex: 1 1 100%;
}

.me-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.me-footer a {
    text-decoration: none;
}

.me-footer__logout {
    color: var(--red);
}

/* ------------------------------------------------ ШИРОКИЙ ЭКРАН ------------------------------------------------ */

@media (min-width: 900px) {
    .home-top,
    .zoo-top {
        left: 50%;
        right: auto;
        width: 560px;
        transform: translateX(-50%);
    }

    .home-side {
        right: calc(50% - 300px);
    }

    .bw-banner {
        left: calc(50% - 280px);
        right: calc(50% - 220px);
    }

    .tool-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tool-tile--wide {
        grid-column: span 1;
        min-height: 130px;
    }
}

@media (max-height: 700px) {
    .home-hello {
        display: none;
    }

    .norm-ring {
        width: 72px;
        height: 72px;
    }

    .btn--big {
        min-height: 54px;
    }
}

/* ------------------------------------------------ ЗАСТАВКА ------------------------------------------------ */

.splash {
    position: absolute;
    inset: 0;
    z-index: 94;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #FFFAF0 55%, #FFF1E2 100%);
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.app:not([data-state="loading"]) .splash {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash__logo {
    width: min(82vw, 560px);
    height: auto;
}

.splash__bar {
    position: relative;
    width: 120px;
    height: 6px;
    border-radius: 999px;
    background: #F1E4F7;
    overflow: hidden;
}

.splash__bar span {
    position: absolute;
    inset: 0;
    width: 40%;
    border-radius: inherit;
    background: var(--violet);
    animation: splash-bar 1.1s ease-in-out infinite;
}

@keyframes splash-bar {
    from { transform: translateX(-110%); }
    to { transform: translateX(280%); }
}

.status {
    z-index: 97;
}

/* логотип на стартовом экране */
.brand-logo {
    display: block;
    height: 64px;
    width: auto;
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(255, 250, 240, 0.92);
    box-shadow: 0 10px 26px rgba(67, 36, 110, 0.22);
    animation: float 4s ease-in-out infinite;
}

/* ------------------------------------------------ ЧИТАТЕЛЬСКИЙ ДНЕВНИК ------------------------------------------------ */

.reading-log {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    margin-bottom: 14px;
}

.reading-log .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.reading-log .textarea {
    min-height: 70px;
}

.diary-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.diary-entry {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 20px;
    background: var(--surface-soft);
    animation: step-in 0.4s var(--spring) both;
    animation-delay: calc(var(--i) * 40ms);
}

.diary-entry__cover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 54px;
    border-radius: 8px 12px 12px 8px;
    color: #FFFFFF;
    background: linear-gradient(160deg, hsl(var(--h) 75% 62%), hsl(calc(var(--h) + 30) 70% 50%));
    box-shadow: inset 4px 0 0 rgba(0, 0, 0, 0.15);
}

.diary-entry__cover svg {
    width: 22px;
    height: 22px;
}

.diary-entry__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.diary-entry__body small {
    color: var(--muted);
    font-weight: 700;
}

.diary-entry__body p {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.35;
}

/* ------------------------------------------------ МИР: УРОВЕНЬ И СТРОЙКА ------------------------------------------------ */

.world-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 22px;
    pointer-events: auto;
}

.world-bar__level {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
}

.world-bar__level b {
    font-size: 15px;
    font-weight: 1000;
    white-space: nowrap;
}

.world-bar__level small {
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
}

.world-bar .progress {
    height: 7px;
}

.world-build-hint {
    align-self: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 14px;
    color: #FFFFFF;
    background: rgba(40, 30, 90, 0.72);
    backdrop-filter: blur(6px);
    pointer-events: none;
    animation: pop-in 0.35s var(--spring);
}

.world-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.world-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 900;
    background: var(--surface-soft);
}

.world-item .item-art {
    width: 56px;
    height: 56px;
}

.world-item:active {
    transform: scale(0.95);
}

/* ------------------------------------------------ СЕТЬ И КОМНАТЫ ------------------------------------------------ */

.zoo-modes {
    display: flex;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    background: var(--surface-soft);
    pointer-events: auto;
}

.zoo-modes button {
    flex: 1 1 0;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 14px;
    color: var(--muted);
}

.zoo-modes button[aria-selected="true"] {
    color: #FFFFFF;
    background: var(--violet);
}

.room-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.room-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 22px;
    text-align: left;
    background: var(--surface-soft);
}

.room-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    color: #FFFFFF;
    background: var(--sky-deep);
}

.room-card__icon svg {
    width: 24px;
    height: 24px;
}

.room-card__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.room-card__body b {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.room-card__body small {
    color: var(--muted);
    font-weight: 700;
}

.room-live {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 1000;
    color: #FFFFFF;
    background: #FF4F6E;
}

.room-live::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FFFFFF;
    animation: pulse-dot 1.2s ease-in-out infinite;
}

@keyframes pulse-dot {
    50% { opacity: 0.35; }
}

.room-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 28px;
    pointer-events: auto;
}

.room-panel__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* длинное название комнаты переносится на вторую строку, а не обрезается */
.room-panel__title {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 17px;
    font-weight: 1000;
    line-height: 1.15;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.room-timer {
    font-size: 30px;
    font-weight: 1000;
    font-variant-numeric: tabular-nums;
    text-align: center;
    background: var(--violet);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.room-chat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
    padding-right: 4px;
}

.room-chat__message {
    font-size: 14px;
    line-height: 1.3;
}

.room-chat__message b {
    margin-right: 6px;
    color: var(--violet-deep);
}

.room-chat__form {
    display: flex;
    gap: 8px;
}

.room-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 1000;
    letter-spacing: 0.12em;
    color: var(--violet-deep);
    background: color-mix(in srgb, var(--violet) 12%, var(--surface-solid));
    line-height: 1;
}

/* значок копирования на одной оси с кодом */
.room-code i {
    display: flex;
    flex: none;
}

.room-code svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* верх мира: переключатель групп и сети над вкладками групп */
.zoo-top .zoo-modes {
    width: min(100%, 360px);
    margin: 0 auto 8px;
    box-shadow: var(--shadow-soft, 0 6px 18px rgba(60, 40, 120, 0.12));
}

.zoo-modes button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.zoo-modes svg {
    width: 18px;
    height: 18px;
}

.zoo-build {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(var(--safe-bottom) + var(--tabbar-height) + 14px);
    width: min(calc(100% - 24px), 520px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.zoo-build .btn {
    pointer-events: auto;
}

.dock-button__icon--world {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    color: #FFFFFF;
    background: var(--mint-deep);
}

.dock-button__icon--world svg {
    width: 24px;
    height: 24px;
}

.world-bar {
    padding: 4px 2px 2px;
}

.world-placed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: var(--muted);
}

.world-placed .item-art {
    width: 96px;
    height: 96px;
}

.zoo-dock--network {
    max-height: 62%;
}

.net-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.net-head b {
    font-size: 20px;
    font-weight: 1000;
}

.net-head span {
    font-size: 14px;
    color: var(--muted);
}

.net-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 0 4px;
    /* список комнат плавно уходит под кнопки, а не обрезается ровной линией */
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
}

.net-scroll .section__title {
    margin: 6px 0 8px;
}

.empty--small {
    padding: 14px;
}

.zoo-dock--room {
    max-height: 58%;
}

.kind-tile--club {
    --tint-a: #FF8A3D;
    --tint-b: #FFC93C;
}

.settings-row__label small {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

.victory__coins--growth {
    color: #0B7A5D;
    background: #C9F5E3;
}

.coins-rule--shop {
    margin: 0 0 12px;
    font-size: 13px;
}

.item-art--model {
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(60, 40, 120, 0.18));
}

.segmented button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.segmented button svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.reading-log .row .input {
    min-width: 0;
    font-size: 14px;
    padding-left: 12px;
    padding-right: 8px;
}

/* ------------------------------------------------ ТЕЛЕФОН: КВИЗ, ДОМ, РОВНЫЕ КНОПКИ ------------------------------------------------ */

/* шапка карточки квиза одной строкой: назад, прогресс, номер шага */
.ob__meta {
    gap: 10px;
    min-height: 36px;
}

.ob__meta .ob__progress {
    flex: 1 1 auto;
}

.ob__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ob__label {
    font-size: 17px;
    font-weight: 900;
    color: var(--ink-soft);
}

.mini-stepper--big {
    gap: 10px;
}

.mini-stepper__number {
    min-width: 46px;
    text-align: center;
    font-size: 28px;
    font-weight: 1000;
    font-variant-numeric: tabular-nums;
}

.chips--nowrap {
    flex-wrap: nowrap;
}

.chips--nowrap .chip {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 0 4px;
}

/* иконка и подпись в кнопках всегда на одной оси, длинная подпись не вылезает за кнопку */
.btn,
.chip,
.importance,
.choice--row,
.choice--feed {
    align-items: center;
}

.btn > span,
.chip > span {
    min-width: 0;
}

.btn svg,
.chip svg,
.importance svg {
    flex: none;
    display: block;
}

.importance {
    white-space: nowrap;
    font-size: 13px;
    gap: 5px;
    padding: 0 6px;
}

/* время дела: своя иконка часов, системный значок выбора невидим, но нажимается по всему полю */
.time-field {
    position: relative;
}

.time-field input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    opacity: 0;
    cursor: pointer;
}

/* плитки «Полезного» в половину ширины: длинное слово переносится по слогам, а не обрезается */
.tool-tile:not(.tool-tile--wide) .tool-tile__title {
    font-size: 16px;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* вкладки листа группы: ровная сетка в две строки */
.segmented--scroll {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmented--scroll button {
    padding: 0 6px;
    white-space: nowrap;
}

.zoo-dock--network .row .btn,
.zoo-empty .row .btn {
    gap: 6px;
    padding: 0 10px;
    font-size: 14px;
    white-space: nowrap;
}

/* форма дела: «добавить» рядом с названием, ниже день и время; важность по ширине подписей */
.task-composer__title {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.task-composer__title .field {
    flex: 1 1 auto;
    min-width: 0;
}

.task-composer__title .btn--icon {
    flex: none;
    min-height: 56px;
}

.importance-picker {
    display: flex;
}

.importance-picker .importance {
    flex: 1 1 auto;
}

.task-composer__row .time-field {
    flex: none;
    gap: 4px;
    padding: 0 10px;
}

.task-composer__row .time-field input {
    width: 58px;
}

/* узкий телефон: у важности остаются цвет и подпись, значки прячутся, чтобы три кнопки поместились в строку */
@media (max-width: 380px) {
    .importance-picker .importance i {
        display: none;
    }
}

/* невысокий экран телефона в браузере: всё компактнее, чтобы питомец оставался виден над панелями */
@media (max-height: 740px) {
    .ob {
        padding-bottom: calc(var(--safe-bottom) + 8px);
    }

    .ob__card {
        gap: 8px;
        padding: 12px 14px 14px;
        border-radius: 26px;
        max-height: 80%;
    }

    .ob__title {
        font-size: 20px;
    }

    .ob__body {
        gap: 10px;
    }

    .ob__note {
        padding: 8px 12px;
        font-size: 13px;
    }

    .big-value {
        font-size: 32px;
    }

    .choice--row {
        min-height: 46px;
        padding: 6px 12px;
        font-size: 15px;
    }

    .choice--feed {
        min-height: 46px;
    }

    .input--big {
        min-height: 52px;
        font-size: 20px;
    }

    .btn--big {
        min-height: 52px;
        font-size: 18px;
    }

    .welcome__bottom {
        padding: 16px;
        gap: 10px;
    }

    .welcome__title {
        font-size: 23px;
    }

    .welcome__text {
        font-size: 15px;
    }

    .home-bottom {
        gap: 8px;
        bottom: calc(var(--safe-bottom) + var(--tabbar-height) + 10px);
    }

    .norm-card {
        gap: 10px;
        padding: 8px 10px;
        border-radius: 24px;
    }

    .norm-ring {
        width: 70px;
        height: 70px;
    }

    .norm-ring__center b {
        font-size: 21px;
    }

    .norm-ring__center small {
        margin-top: 2px;
    }

    .home-side {
        top: calc(var(--safe-top) + 64px);
    }

    .float-btn {
        width: 46px;
        height: 46px;
        border-radius: 16px;
    }

    .ov-card {
        padding: 14px 16px;
        max-height: 66%;
    }

    .hatch-card {
        padding: 14px;
    }
}

/* совсем низкий экран (маленький телефон с панелями браузера): стартовая карточка и логотип еще компактнее */
@media (max-height: 640px) {
    .welcome {
        padding-top: calc(var(--safe-top) + 12px);
    }

    .brand-logo {
        height: 48px;
        padding: 7px 18px;
    }

    .welcome__bottom {
        padding: 14px;
        gap: 8px;
        border-radius: 26px;
    }

    .welcome__title {
        font-size: 20px;
    }

    .welcome__text {
        margin: 0;
        font-size: 14px;
    }

    .welcome__bottom .btn--big {
        min-height: 48px;
    }

    .welcome__bottom .btn--ghost {
        min-height: 44px;
    }
}