* {
    margin: 0;
    padding: 0;
}

:root {
    --over-color: var(--tg-theme-text-color);
    --main-bg-color: var(--tg-theme-bg-color);
    --header-bg-color: var(--tg-theme-header-bg-color);
    --header-glass: rgb(from var(--tg-theme-header-bg-color) r g b / 0.5);
    --menu-bg: linear-gradient(70deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.125));
    --menu-color: #fff;
    --text-shadow-c: none;
    --alert-bg: var(--tg-theme-accent-text-color);
    --time-color: var(--tg-theme-text-color);
    --accent: var(--tg-theme-accent-text-color);
    --accent-bg: var(--tg-theme-secondary-bg-color);
    --lessons-b-c: var(--tg-theme-hint-color);
    --days-bg: var(--tg-theme-secondary-bg-color);
    --days-o-color: var(--tg-theme-text-color);
    --shadows: rgba(255, 255, 255, .15);
    --anti-shadows: rgba(0, 0, 0, .2);
    --anti-super-shadows: rgba(0, 0, 0, .7);
    --star-sh: drop-shadow(2px 4px 2em rgba(255, 231, 96, 0.63));
    --acdeac-btn: #50a1af62;
    --runner-sk: linear-gradient(90deg, #ffffff03, #ffffff12, #ffffff03);
    --rotation-line: 90deg;
    --btn-opacity: 0.55;
    --ch-room-bg: rgba(179, 163, 95, 0.3);
    --menu-bg-bg: #00000075;
    --room-green: var(--tg-theme-accent-text-color);
    --star-background-day: 0;
    --only-dark: block;
    --only-light-color: none;
    --day-card-bg: var(--tg-theme-secondary-bg-color);
    --menu-liq-glass: blur(10px);
    --chat-bg: linear-gradient(to bottom, #000000a9, #0000008f);
    --days-selected-filter: none;
    --lst-btn-color: var(--tg-theme-button-color);
    --lst-btn-filter: none;
    --days-selected-bg: var(--tg-theme-button-color);
    --btn-opacity-days: 1;

    --lesson-number-padding: 5px;
    --day-name-letter-sp: 1px;
    --day-name-gap: 0.4em;
    --time-letter-sp: 1px;
    --subject-f-size: 16px;
    --room-letter-sp: 1px;
    --room-f-size: 16px;
    --tname-f-size: 12px;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/raleway-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/raleway-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/raleway-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/raleway-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

button, input, select, textarea {
    font-family: inherit;
    font-variant-numeric: lining-nums;
}

body {
    background: var(--main-bg-color);
    background-size: contain;
    color: var(--over-color);
    scroll-behavior: smooth;
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-variant-numeric: lining-nums;
    min-height: 100vh;
    overflow-x: hidden !important;
}

html {
    /* всегда резервируем место под вертикальный скроллбар: иначе нижнее меню
       «скачет» по ширине, когда скролл у страницы появляется или исчезает;
       both-edges — чтобы отступ был симметричным в десктопных браузерах */
    scrollbar-gutter: stable both-edges;
}

main { overflow-x: hidden; }

.sun {
    position: relative;
    pointer-events: none;
}
.sun::after {
    position: fixed;
    content: "";
    top: var(--star-background-day);
    transform: translate(-50%, -50vh) scale(.9);
    left: 50%;
    width: 50vh;
    height: 50vh;
    background: #ffffff7c;
    border-radius: 50%;
    filter: drop-shadow(2em .5em 6em #ff8411);
    z-index: -1000;
    box-shadow: inset 0 0 2.5em #ff8411a2;
    display: var(--only-dark);
    opacity: .9;
    pointer-events: none;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1em;
    padding: .5em;
    background: var(--header-bg-color);
    position: sticky;
    transition: all .2s ease;
    top: 0;
    z-index: 999;
    padding: 10px !important;
    border-radius: 0 0 35px 35px;
    padding-top: calc(
        var(--tg-safe-area-inset-top, 0px) +
        var(--tg-content-safe-area-inset-top, 0px) + 10px
    ) !important;
}

header h1 {
    display: flex;
    gap: 10px;
    
    svg {
        align-self: center;
        align-items: center;
        align-content: center;
        text-align: center;
        justify-content: center;
    }
}


header h5 {
    color: var(--tg-theme-hint-color)
}

header.scrolling {
    transition: all 1s;
    background-color: var(--header-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all .3s ease;
}

.days ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 1em auto;
    /* единая сетка с карточками пар и нижним меню: 16px отступы, кэп 488 */
    width: calc(100% - 32px);
    max-width: 488px;
    gap: clamp(8px, 2.25vw, 14px);
    user-select: none;
}
.days ul li {
    background-color: var(--days-bg);
    text-align: center;
    color: var(--days-o-color);
    font-weight:800;
    letter-spacing: 2px;
    padding: .5em 4px;
    border-radius: .5em;
    cursor: pointer;
    user-select: none;
    border: 1px solid rgb( from var(--days-o-color) r g b / 0.14);
    position: relative;
    z-index: 1;
    border-radius: 15px;
    transition: transform .15s ease, color .3s ease, background-color .3s ease;
    will-change: transform;
    animation: openingBtn .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    &::after {
        content: "";
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 95%;
        height: 94.5%;
        z-index: -1;
        background:
        var(--days-bg);
        border-radius: 15px;
        opacity: var(--btn-opacity-days);
        transition: opacity .3s ease;
        will-change: opacity;
    }
}

.days ul li:active {
    transform: scale(0.96);
}

.days .selected {
    color: var(--tg-theme-button-text-color);
    background-color: var(--days-selected-bg);
    filter: var(--days-selected-filter);
    --btn-opacity-days: 0.8;
}



.day {
    background: rgb( from var(--day-card-bg) r g b / 0.7);
    border-radius: 35px;
    padding: 1em;
    /* единая сетка с полосой дней и нижним меню (16px, кэп 488) */
    box-sizing: border-box;
    width: calc(100% - 2em);
    max-width: 488px;
    margin-inline: auto;
    margin-top: 1.25em;
    touch-action: pan-y;
    user-select: none;
    overflow-x: hidden;
    transition: transform cubic-bezier(0.215, 0.610, 0.355, 1) 0.5s;
    outline: 2px var(--accent) double;
    filter: drop-shadow(1px 1px 8px rgb( from var(--accent) r g b / 0.5));
    --dynamic-day-bottom-space: 0px;
    margin-bottom: /*var(--dynamic-day-bottom-space)*/ calc(3px + var(--dynamic-day-bottom-space));
}
.day .day-name, .day-name2 {
    display: flex;
    text-align: center;
    padding: 4px;
    letter-spacing: var(--day-name-letter-sp);
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
    gap: var(--day-name-gap);
    font-weight: 600;
    font-size: medium
}
.day .day-name svg, .day-name2 svg {
    margin: auto 0;
    scale: 1.25;
}


.day .lesson-row, .lesson-row2 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(45deg, rgba(from var(--over-color) r g b / 0.1), rgba(from var(--accent) r g b / 0.3));
    padding: 15px;
    border-radius: 15px;
    margin-top: 15px !important;
    border: 1px solid rgba(255,255,255,.2);
}

.lesson-row.is-current, .lesson-row2.is-current {
    border-color: #38e681;
    background: linear-gradient(45deg, rgba(56, 230, 129, .12), rgba(56, 230, 129, .3));
    box-shadow: 0 0 18px rgba(56, 230, 129, .42), inset 0 0 12px rgba(56, 230, 129, .12);
}

.lesson-row.is-upcoming, .lesson-row2.is-upcoming {
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 0 0 transparent;
}

/* ─── Локальные правки на парах ─── */
.lesson-row {
  position: relative;
  -webkit-touch-callout: none;
}
/* отклик на удержание карточки — вход в личную правку */
.lesson-row.is-holding { scale: .985; }
.override-badge {
  position: absolute;
  bottom: 8px;
  right: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: var(--tg-theme-accent-text-color, var(--accent));
  border-radius: 8px;
  width: 28px;
  height: 28px;
  cursor: pointer;
}
.lesson-row.is-overridden {
  outline: 1px dashed rgba(255, 255, 255, 0.2);
  outline-offset: -4px;
}

/* ─── Перемены между парами ─── */
.break-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  min-width: 50%;
  margin: 4px auto;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tg-theme-hint-color, #8a94a6);
  background: color-mix(in srgb, var(--tg-theme-hint-color, #8a94a6) 12%, transparent);
  user-select: none;
}
/* следующая пара тянет за собой margin-top: 15px !important — гасим его,
   чтобы зазор под чипом был равен 4px (паддинг чипа), а не collapsed 15px */
.day .break-chip + .lesson-row { margin-top: 4px !important; }
body.pref-breaks-off .break-chip { display: none !important; }

/* единая сетка с go-widget и нижним меню (16px, кэп 488) */
.now-lesson-summary-container,
.summary-path-next {
    align-self: stretch;
    box-sizing: border-box;
    width: min(100% - 2em, 488px);
    margin-inline: auto;
    padding: 0 0 1em;
}

.summary-path-next {
    &::before {
        content: "ЗАТЕМ";
        font-weight: 100;
        letter-spacing: 1px;
        padding-left: 2rem;
        opacity: .73
    }}

.summary-card, .summary-path-card {
    padding: 1em;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(from var(--accent-bg) r g b / .9), rgba(from var(--accent) r g b / .22));
}

.summary-path-card {
    display: flex;
    /* flex-direction: column; */
    gap: 5px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.summary-card.is-current { border-color: #38e681; filter: drop-shadow(0 0 22px rgba(56, 230, 129, .35)); }
.summary-card.is-upcoming { border-color: #e2bd56; }
.summary-card.is-finished { filter: grayscale(.8); opacity: .58; }
.summary-status { display: flex; align-items: center; gap: .5em; font-size: 1.05em; }
.summary-status span { width: .65em; height: .65em; border-radius: 50%; background: #9a9a9a; }
.summary-card.is-current .summary-status span { background: #38e681; box-shadow: 0 0 12px #38e681; }
.summary-card.is-upcoming .summary-status span { background: #e2bd56; }
.summary-hint { margin-top: .45em; color: var(--tg-theme-hint-color); }
.summary-subject { margin-top: .8em; font-size: 1.25em; }
.summary-details { display: grid; gap: .55em; margin-top: 1em; }
.summary-details span { display: flex; justify-content: space-between; gap: 1em; text-align: right;}
.summary-details b { color: var(--tg-theme-hint-color); }
.summary-map { display: inline-block; margin-top: 1em; color: var(--tg-theme-link-color); font-weight: 600; }
.summary-empty { padding: 1.25em; text-align: center; border-radius: 20px; background: rgba(from var(--accent-bg) r g b / .7); }
.summary-empty p { margin-top: .5em; color: var(--tg-theme-hint-color); }

/* .day .lesson-row, .lesson-row2 { position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(45deg, rgba(from var(--over-color) r g b / 0.1), rgba(from var(--over-color) r g b / 0.35));
    padding: 15px;
    border-radius: 15px;
    margin-top: 15px !important;
} */

/* .subject {
    font-size: var(--subject-f-size);
} */

.subject {
    font-size: var(--subject-f-size);
    /* font-weight: 600; */
}

.mi { fill: currentColor; flex: none; }

.room {
    letter-spacing: var(--room-letter-sp);
    font-size: var(--room-f-size);
}

.lesson-row h4, .lesson-row2 h4 {
    margin: 0;
    padding: 0;
}
/* .day .list-btn {
    position: absolute;
    right: .5em;
    top: .5em;
    background: none;
    padding: 4px;
    border: none;
    font-size: x-large;
    transition: all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity .2s ease-out;
    user-select: none;
    color: var(--lst-btn-color);
    outline: none !important;
    filter: var(--lst-btn-filter);
}
.day .list-btn:active {
    scale: 1.2;
    opacity: 1;
} */


.day .tname { 
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: var(--tname-f-size);
 }
/* .day .tname::before {
    position: absolute;
    top: 0;
    color: var(--tg-theme-hint-color);
    opacity: .9;
} */
.day .teacher {
    word-wrap: balance;
    font-size: 14px;
    position: relative;
    text-align: left;
    padding-top: .25em;
    opacity: .75 !important;
}
/* .day .teacher::after {
    position: absolute;
    top: -.5em;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    height: 2px;
    width: 100%;
    margin: auto;
    background: var(--ch-room-bg);
} */

.lesson {
    margin-top: 1em;
    padding-top: 1em;
    width: 1em;
    height: 1em;
    font-size: larger;
    background: var(--accent);
    border-radius: 50%;
    padding: var(--lesson-number-padding) !important;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    /* border-top: 2px solid var(--lessons-b-c); */
}

@keyframes openingBtn {
    0% {
        scale: 1;
        opacity: 1;
    }
    50% {
        scale: .9;
        opacity: .95;
    }
    100% {
        scale: 1;
        opacity: 1;
    }
}

.time {
    color: var(--time-color);
    letter-spacing: var(--time-letter-sp);
    font-weight: 200;
    font-size: larger;
    padding-top: .2em;
    padding-bottom: .25em;
    text-shadow: 1px 2px 4px var(--text-shadow-c);
    opacity: .8;
}
.time1 {
    color: var(--time-color);
    letter-spacing: 1px;
    font-weight: 200;
    font-size: larger;
    padding-top: .2em;
    padding-bottom: .25em;
    text-shadow: 1px 2px 4px var(--text-shadow-c);
    opacity: .75;
}
.time.now { position: relative; }
.time.now::after {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    top: 50%;
    transform: translateY(-60%);
    background: #85ff15;
    border-radius: 50%;
    margin-left: .5em;
    animation: active 2s infinite;
    opacity: .8;
}

.isNow {
    position: relative;
    animation: activeNoScale 2s infinite;
    display: none;
}
.isNow::after {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    top: 50%;
    transform: translateY(-35%);
    background: #85ff15;
    border-radius: 50%;
    margin-left: .5em;
    animation: active 2s infinite;
    opacity: .8;
}

@keyframes active {
    50% { scale: .94; filter: drop-shadow(0 0 .4em #9bff6abc); }
}
@keyframes activeNoScale {
    50% { text-shadow: 0 0 .4em #86ff6a44; }
}

#gr {
            text-align: center;
            margin: 1.2em;
            letter-spacing: 2px;
            color: var(--accent);
            background: var(--accent-bg);
            padding: 6px 18px;
            border-radius: 36px;
            font-weight: 800;
            backdrop-filter: blur(8px);
            position: relative;
            overflow: hidden !important;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            outline: 3px var(--accent) solid;
            box-shadow: 0 0 14px;
            transition: box-shadow .5s;

        }

        #gr::after {
            position: absolute;
            content: "";
            top: -150%;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 150%;
            background: var(--tg-theme-text-color);
            border-radius: 0 0 50% 50%;
            transition: top 1s cubic-bezier(.6, .3, .1, .9);
        }


        #gr.active::after {
            top: 0%;
        }

        #gr.active {
            box-shadow: none;
        }

        /* Режим преподавателя: «Фамилия И. О.» вместо группы, редактирования нет */
        #gr.teacher-mode {
            cursor: default;
        }

        #alerter .teacher-reg-hint {
            margin: 0.9em auto 0;
            max-width: 34ch;
            font-size: 12px;
            line-height: 1.5;
            opacity: 0.8;
        }

        #alerter .teacher-reg-hint a {
            color: var(--accent);
            text-decoration: underline;
        }

        /* Список групп потока: элемент целиком, перенос — только между элементами.
           .tname-text — один flex-item внутри .tname/.summary-details span,
           иначе каждая группа станет отдельным flex-item'ом с родительским gap */
        .tname-text {
            min-width: 0;
        }

        .tname-group {
            white-space: nowrap;
        }

        /* .summary-details делает flex'ом ВСЕ span внутри (селектор по тегу) —
           возвращаем текстовым блокам строковый поток, иначе список групп
           растягивается gap'ом и space-between на весь блок */
        .summary-details .tname-text {
            display: inline;
        }

        .summary-details .tname-group {
            display: inline;
        }


        #gr::before {
            content: "";
            position: absolute;
            height: 100%;
            width: 6em;
            background: linear-gradient(90deg, #ffffff10, #ffffff8a, #ffffff10);
            overflow: hidden;
            z-index: -1;
            top: 0;
            left: -100%;
            transition: all .2s;
            animation: blicking .5s forwards cubic-bezier(0.215, 0.610, 0.355, 1);
            animation-delay: 500ms;
        }

        #set-group-btn {
            margin: .5em;
            padding: 6px 14px;
            color: var(--tg-theme-button-text-color);
            background: var(--tg-theme-button-color);
            letter-spacing: 1px;
            font-weight: 900;
            border-radius: 24px;
            border: none;
            transition: transform .1s, filter .2s;
            filter: drop-shadow(2px 4px 12px #0000006b);
            font-size: 1.3em;
            outline: none;
            user-select: none;
            /*display: flex;*/
            justify-content: center;
            align-items: center;
            width: calc(100% - 2rem);

            &:active {
                transform: scaleX(1.05) scaleY(0.95);
                opacity: .95;
            }
        }

        #set-group-btn.error {
            background: var(--tg-theme-destructive-text-color);
            animation: error-glow 1s ease-out;
            pointer-events: none;
        }

        #set-group-btn.success {
            background: rgb(from var(--accent) r g b / .95);
            pointer-events: none;
            filter: drop-shadow(0 0 8px rgb(from var(--accent) r g b / .35));
        }

        @keyframes error-glow {
            10%, 60% {
                filter: drop-shadow(0 0 8px var(--tg-theme-destructive-text-color));
            }

        }

        #gr-edit {
            position: fixed;
            top: 0;
            left: 50%;
            width: min(calc(100% - 32px), 488px);
            transform: translateX(-50%);
            display: flex;
            background: linear-gradient(rgb(from var(--accent) r g b / .15), rgb(from var(--tg-theme-header-bg-color) r g b / .85));
            backdrop-filter: blur(18px);
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            text-align: center;
            z-index: 200000;
            padding: 18px 16px 14px;
            margin-top: calc(4em + var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px));
            box-sizing: border-box;
            outline: none;
            border-radius: 28px;
            max-height: calc(100dvh - 5em - var(--tg-content-safe-area-inset-top, 0px) - var(--tg-safe-area-inset-top, 0px));
            overflow: hidden;
            display: none;

            input {
                padding: 1em;
                padding-left: 3.2rem;
                border-radius: 2em;
                border: none;
                background: rgb(from var(--tg-theme-bg-color) r g b / 0.5);
                color: white;
                font-size: 1.2em;
                width: calc(100% - 30px) !important;
                outline: none;
                transition: background .5s;
                letter-spacing: 2px;
                box-shadow: 4px 4px 8px rgb(from var(--tg-theme-bg-color) r g b / 0.75);
                border: 0px solid rgb(from var(--accent) r g b / .75);
                transition: all .1s ease;
                position: relative;
                box-sizing: border-box;
                &:focus {
                    border-bottom: 1px solid rgb(from var(--accent) r g b / .75);
                }

            }

            #gr-e-p-c {
                position: relative;
                display: block;
                width: 100% !important;
                svg {
                    position: absolute;
                    pointer-events: none;
                    top: 50%;
                    transform: translateY(-50%) rotate(15deg) scale(0.9);
                    left: 1.75rem;
                    opacity: .6;
                    transition: opacity .2s, transform .23s ease;
                }
            }

            input::placeholder {
                letter-spacing: 1px;
                transition: letter-spacing .5s ease-in-out, color 1s ease;
                color: var(--tg-theme-hint-color);
                user-select: none;
                -webkit-user-select: none;
            }
            #gr-e-p-c input:placeholder-shown ~ svg{
                opacity: .3;
                transform: translateY(-50%);
            }

            #errs-reg {
                margin: .7em .5em .1em;
            }
        }

        .gr-edit-head {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }

        .gr-edit-head h1 {
            margin: 0;
            flex: 1;
            min-width: 0;
            text-align: left;
            font-size: 1.25em;
        }

        .gr-edit-close-btn {
            flex: none;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid rgb(from var(--tg-theme-hint-color) r g b / 0.3);
            background: rgb(from var(--tg-theme-bg-color) r g b / 0.35);
            color: var(--tg-theme-text-color);
        }

        .gr-edit-close-btn:active {
            transform: scale(.9);
            opacity: .35;
        }

        .tips-res-e-g {
            display: none;
            flex-direction: column;
            gap: 6px;
            width: calc(100% - 30px);
            margin-top: 12px;
            max-height: min(40vh, 340px);
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
            scrollbar-width: thin;
            border-radius: 14px;
            animation: rasing-i-c2 .3s;

            div {
                min-height: 44px;
                display: flex;
                align-items: center;
                padding: 8px 14px;
                border: 1px solid rgb(from var(--tg-theme-hint-color) r g b / 0.25);
                border-radius: 12px;
                line-height: 1.2;
                cursor: pointer;
                transition: background .15s, border-color .15s;
            }

            div[data-tip].active,
            div[data-tip]:active {
                background: rgb(from var(--accent) r g b / 0.18);
                border-color: rgb(from var(--accent) r g b / 0.55);
            }

            div b {
                color: var(--accent);
                font-weight: 700;
            }

            .tips-more {
                min-height: 0;
                justify-content: center;
                padding: 4px;
                border: none;
                color: var(--tg-theme-hint-color);
                font-size: 12px;
                cursor: default;
            }
        }

        @keyframes rasing-i-c2 {
            0% {
                opacity: .1;
            }
        }

        @keyframes rasing-i-c {
            0% {
                transform: translateX(-50%) translateY(-20%);
                opacity: .5;
            }
        }

        @keyframes closing-i-c {
            100% {
                transform: translateX(-50%) translateY(-20%);
                opacity: 0;
            }
        }

@keyframes blicking { 100% { left: 100%; } }

#loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    user-select: none;
}
#loader>div {
    color: #6dd1ff;
    display: flex;
    animation: loader-animation 2s infinite;
    gap: 1em;
    transition: gap 1s ease;
    filter: drop-shadow(0 0 .5em);
    font-size: x-large;
    z-index: 100000001;
    background: none;
}
.loader-container {
    min-width: 100vw;
    min-height: 100vh;
    z-index: 10000000;
    background: #000000dc;
    user-select: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes loader-animation {
    20% { gap: 1em; }
    40% { gap: 0; }
    60% { gap: 1em; transform: rotate(360deg); }
    80% { gap: 0; }
}

.second-header {
    display: flex;
    justify-content: space-around;
    overflow: hidden;
}

.calendar-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: var(--menu-bg-bg);
    backdrop-filter: var(--menu-liq-glass);
    -webkit-backdrop-filter: var(--menu-liq-glass);
    z-index: 200000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}

.calendar-modal.open { opacity: 1; visibility: visible; pointer-events: auto; }

.calendar-card {
    width: 100%;
    max-width: 460px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--main-bg-color);
    border: 1px solid var(--shadows);
    border-radius: 20px;
    box-shadow: 0 20px 40px var(--anti-super-shadows);
    transform: translateY(20px) scale(.96);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.calendar-modal.open .calendar-card { transform: translateY(0) scale(1); }
.calendar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--header-bg-color); border-bottom: 1px solid var(--shadows); }
.calendar-title { font-size: 18px; }
.calendar-close-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--days-bg); color: var(--over-color); }
.calendar-close-btn:active { transform: scale(.9); }
.calendar-body { display: flex; flex-direction: column; gap: 18px; padding: 5px; overflow-y: auto; }
.calendar-week-block { padding: 10px; background: var(--days-bg); border: 1px solid var(--shadows); border-radius: 14px; }
.calendar-week-block.is-current { border-color: var(--accent); }
.calendar-week-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; padding: 0 4px; }
.calendar-week-title { color: var(--accent); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--day-name-letter-sp); }
.calendar-current-badge { padding: 2px 8px; border-radius: 10px; background: var(--accent); color: var(--main-bg-color); font-size: 10px; font-weight: 700; }

/* ─── Кнопки «Поделиться» (базовые + недельные в календаре) ─── */
.share-btn {
  appearance: none;
  border: none;
  background: var(--tg-theme-button-color, var(--accent));
  color: var(--tg-theme-button-text-color, #fff);
  border-radius: 14px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.share-btn:active {
  transform: scale(0.96);
  filter: brightness(0.92);
}
.share-week-type-btn {
  margin-left: auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.share-btn-inline {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--accent-bg, var(--tg-theme-secondary-bg-color));
  color: var(--tg-theme-accent-text-color, var(--accent));
  margin-left: 6px;
}
.share-story-btn {
  background: linear-gradient(135deg, #ff5f6d, #ffc371);
  color: #1a1a1a;
}
.calendar-days-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar-day-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: 8px 0; border: 1px solid var(--shadows); border-radius: 10px; background: var(--main-bg-color); color: var(--over-color); cursor: pointer; user-select: none; transition: transform .2s ease, background .2s ease; }
.calendar-day-btn .calendar-day-name { margin-bottom: 2px; font-size: 10px; opacity: .6; text-transform: uppercase; }
.calendar-day-btn .calendar-day-date { font-size: 12px; font-weight: 700; }
.calendar-day-btn:active:not(:disabled) { transform: scale(.95); }
.calendar-day-btn:disabled { opacity: .3; background: transparent; border-color: transparent; cursor: not-allowed; }
.calendar-day-btn.is-today { background: var(--accent); border-color: var(--accent); color: var(--main-bg-color); }
.calendar-day-btn.is-today .calendar-day-name { opacity: .9; }
.calendar-day-btn.is-today:disabled { opacity: 1; background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.calendar-day-btn.selected-day { outline: 2px solid var(--tg-theme-button-color); outline-offset: -1px; }

.btns {
    margin: auto;
    background: none;
    text-align: center;
    padding: 6px;
    transition: scale .1s, transform 3s cubic-bezier(0.19, 1, 0.22, 1);
    overflow: hidden;
    overflow-x: hidden;
}
.btns:active { scale: .75; }

.btnD { color: #fff; display: flex; justify-content: center; align-items: center; border: none; transition: all .3s ease, transform .1s ease; outline: none !important; user-select: none; }

.btnD span { font-weight: 500; font-size: 11px; white-space: nowrap; letter-spacing: normal; }

@keyframes opening {
    0% { transform: translate(-50%, -40%); opacity: .5; }
}
@keyframes closing {
    100% { transform: translate(-50%, -30%); opacity: .5; }
}
@keyframes OpenObj {
    0% { opacity: .5; scale: 0; }
    100% { opacity: 1; scale: 1; }
}
@keyframes CloseObj {
    0% { opacity: 1; scale: 1; }
    100% { opacity: .5; scale: 0; }
}
@keyframes simpleOpacity {
    0% { opacity: 0; }
}

#schedule-container {
    touch-action: pan-y;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.menu-display {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    text-align: center;
    background: var(--menu-bg);
    padding: 3em;
    min-width: 50vw;
    padding-bottom: 1.5em;
    border-radius: 16px;
    backdrop-filter: var(--menu-liq-glass);
    z-index: 2000;
    display: none;
    transition: opacity .5s;
    overflow: hidden;
}
.menu-display::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-height: 1000vh;
    min-width: 1000vw;
    background: var(--menu-bg-bg);
    z-index: -100;
    animation: simpleOpacity 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.menu-display h1 {
    padding-bottom: 1em;
    letter-spacing: 1px;
}
.menu-display h4 {
    font-size: larger;
    color: var(--menu-color);
    position: relative;
    display: flex;
    flex-direction: column;
}
.menu-display h4 span { letter-spacing: 1.5px; }
.menu-display button {
    background: var(--acdeac-btn);
    border: none;
    padding: 6px;
    border-radius: 24px;
    letter-spacing: 2px;
    color: #ffffff;
    filter: drop-shadow(0 4px .75em #ffffff3f);
    transition: transform .3s;
    outline: none !important;
}
.menu-display button:active { transform: scale(.9); }
.menu-display img {
    align-self: center;
    border-radius: 50%;
    border: none;
    user-select: none;
}
#close-btn-m {
    margin-top: 2em;
    background: #00a8c594;
    outline: none !important;
}
.menu-display span { font-weight: 100; }

#burger-menu.opened-btn { transform: scaleY(1.75); }
#burger-menu.closed-btn { transform: scaleY(1); }

#alerter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000f3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 200000;
    padding: 2em;
    padding-top: 6em;
    box-sizing: border-box;
    display: none;
    outline: none;
}
#alerter h2, #alerter h3, #alerter h6 {
    color: #fff;
    padding: 1em;
}
#alerter h6 {
    letter-spacing: 3px;
    font-weight: 300;
}
#alerter h1 {
    color: var(--accent);
    margin-bottom: 0.5em;
}
#alerter input {
    padding: 1em;
    border-radius: 2em;
    border: none;
    background: rgb(from var(--tg-theme-bg-color) r g b / 0.5);
    color: white;
    font-size: 1.2em;
    width: 80%;
    max-width: 300px;
    outline: none;
    transition: background .5s;
}
#alerter input::placeholder {
    transition: letter-spacing .5s ease-in-out, color 1s ease;
    color: var(--tg-theme-hint-color);
}
#alerter input:focus { outline: none; }
#alerter input:placeholder-shown { background: var(--accent-bg); }

#set-group-btn {
    margin: 1em;
    padding: 1em;
    color: var(--tg-theme-button-text-color);
    background: var(--tg-theme-button-color);
    border-radius: 24px;
    border: none;
    transition: transform .1s, filter .2s;
    filter: drop-shadow(2px 4px 12px #0000006b);
    font-size: 1em;
    outline: none;
    user-select: none;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    width: calc(100% - 2rem);
}
#set-group-btn:active {
    transform: translateY(4px) scale(.95);
    filter: none;
}

#fast-alert {
    justify-content: center;
    flex-direction: column;
    position: absolute;
    background: rgb(from var(--alert-bg) r g b / .7);
    padding: 6px calc(18px + 5vw);
    border-radius: 12px;
    box-shadow: 2px 4px .4em #00000027, inset 4px 0 12px var(--anti-shadows);
    border: 3px solid rgba(255, 255, 255, 0.125);
    text-align: center;
    backdrop-filter: blur(8px);
    right: 0;
    top: 12%;
    display: none;
    transition: all .5s, box-shadow .1s ease;
    /* filter: drop-shadow(4px 4px 6px var(--shadows)); */
    /* выше share-шита (200100) и календаря (200000), из которого шарится неделя */
    z-index: 200200;
}
#fast-alert h2 {
    color: var(--menu-color);
    letter-spacing: 1px;
    font-weight: 100;
    font-size: large;
    position: relative;
}

#unauthorized-container {
    display: none;
    justify-content: center;
    flex-direction: row;
    color: var(--over-color);
    margin: auto;
    text-align: center;
    margin-top: 2em;
    touch-action: pan-y;
}

#empty-container {
    justify-content: center;
    flex-direction: row;
    color: var(--over-color);
    margin: auto;
    margin-top: 1em;
    padding-top: 2em;
    border-top: 1px solid rgb(from var(--lessons-b-c) r g b / 0.5);
    text-align: center;
    touch-action: pan-y;
}

#e-c {
    display: flex;
    flex-direction: column;
    letter-spacing: 2px;
    gap: .5em;
}

.empty-starry { animation: sh1 infinite 12s; }
@keyframes sh1 {
    0% { filter: none; }
    50% { filter: var(--star-sh); }
    100% { filter: none; }
}
@keyframes flyUP {
    0% { transform: translateY(6px); }
    50% {opacity: 1;}
    /* 5% {box-shadow: 2px 4px .4em #00000027, inset 4px 0 12px var(--anti-shadows)}
    10% { opacity: 1; transform: translateY(0); 
    box-shadow: 2px 4px .4em #00000027, inset 4px 0 12px var(--anti-shadows), 0 4px var(--alert-bg);}
    15%, 85% {box-shadow: 2px 4px .4em #00000027, inset 4px 0 12px var(--anti-shadows), 0 4px var(--alert-bg), 0 8px var(--acdeac-btn); opacity: 1;}*/
    100% { transform: translateY(-12px); opacity: 0; } 
}

@keyframes opq1 { 0% { opacity: 0; } }
@keyframes glow { 50% { filter: drop-shadow(4px 4px 2em rgba(255, 217, 0, 0.45)); } }

.assistant>div {
    position: fixed;
    right: 1.5em;
    z-index: 1000;
    bottom: 4em;
    background: none;
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    animation: glow 30s infinite;
}
.assistant>div:hover { scale: 1.2; }

/* Реплики сыграли один раз — Starry выглядывает из-за правого края вполсилы,
   оставаясь кликабельным для ИИ-чата; на ховер-устройствах ховером возвращается */
.assistant.starry-away > div {
    bottom: 4em !important;
    right: -1.3em !important;
    transform: rotate(-10deg);
    opacity: .5;
}
@media (hover: hover) {
    /* !important нужен, чтобы перебить !important-позицию правила прятанья
       (при равной важности wins более специфичный :hover-селектор) */
    .assistant.starry-away > div:hover {
        right: 1.5em !important;
        bottom: 4em !important;
        transform: none;
        opacity: 1;
    }
}

.assistant-say {
    position: fixed;
    right: calc(2em + 70px);
    z-index: 1000;
    bottom: 8em;
    background: rgb(from var(--tg-theme-header-bg-color) r g b / 0.75);
    font-weight: 200;
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    border-radius: 2em;
    border-bottom-right-radius: 0;
    font-size: small;
    backdrop-filter: brightness(50%) blur(9px);
    text-wrap: wrap;
    overflow-wrap: anywhere;
    max-width: calc(100vw - 5em - 70px);
}

/* Starry спрятан за краем — реплика прижимается следом, без дыры справа */
.assistant.starry-away ~ .assistant-say {
    right: 2em;
}

.msg-btn12 {
    display: flex;
    text-align: right;
    justify-content: end;
    gap: 1em;
}

#shocked-assistant {
    position: absolute;
    z-index: 2000000;
    display: none;
    top: 2em;
    left: 50%;
    transform: translateX(-50%);
}
#ctx-assistant-say { padding: .75em; }
#ctx-assistant-say .ai-btn {
    padding: .25em .5em;
    border-radius: 1em;
    border: none;
    color: var(--tg-theme-header-bg-color);
    background: var(--tg-theme-button-color);
}
#ctx-assistant-say h4 { text-wrap: balance; }

#activate-ai-a {
    letter-spacing: 2px;
    transition: all .4s;
    outline: none !important;
}

.my-def-btns {
    padding: 3px 6px;
    border-radius: 24px;
    border: none;
    background: var(--accent);
    box-shadow: 2px 2px 6px black;
    color: var(--tg-theme-button-text-color);
}

#sk {
    border-radius: 30px;
    width: calc(100% - 2rem);
    background: #4f61870a;
    margin-left: 4.5vw;
    margin-right: 4.5vw;
    padding-top: 12px;
    padding-bottom: 12px;
}
h3.skeleton { margin-top: 19px; margin-bottom: 12px; padding: 20px 0;}
h2.skeleton { margin-left: 15vw; margin-right: 15vw; margin-bottom: 32px; }
h4.skeleton { margin-top: 2px; opacity: .8; border-radius: 12px; }
h6.skeleton { opacity: .4; }

.skeleton {
    display: block;
    width: calc(100% - 2rem);
    height: 1.8em;
    margin: 0 auto 12px;
    padding: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 14px 32px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.08) 100%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.8s infinite ease-in-out;
}
    .skeleton::after {
        content: "";
        position: absolute;
        top: 0;
        left: -70%;
        width: 55%;
        height: 100%;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.025) 50%, transparent 100%);
        animation: skeleton-shimmer 1.4s infinite ease-in-out;
    }

@keyframes skeleton-pulse {
    0%, 100% { background-position: 200% 0; }
    50% { background-position: -20% 0; }
}

@keyframes skeleton-shimmer {
    0% { transform: translateX(0); }
    100% { transform: translateX(250%); }
}

.changing-rooms {
    background: var(--ch-room-bg);
    padding: 4px;
    padding-top: 2px;
    text-wrap: nowrap;
    border-radius: 8px;
    position: relative;
}

@keyframes skelet {
    0% { left: 0; }
    50% { left: 150%; }
    100% { left: 0; }
}

@keyframes nothingFly {
    0% { transform: translateY(10%); opacity: .05; }
}

.chat {
    position: fixed;
    inset: 0;
    z-index: 2000000;
    background: var(--chat-bg);
    backdrop-filter: blur(16px);
    padding: 1em;
    width: 100vw;
    height: 100vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    animation: openChat .5s ease forwards;
}

@keyframes openChat {
    0% { transform: translate(-50%, -40%); opacity: 0; }
    100% { transform: translate(-50%, -50%); opacity: 1; }
}

.chat-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.chat-header {
    text-align: center;
    font-size: smaller;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    background-color: var(--tg-theme-header-bg-color);
    padding-top: calc(var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top));
}
.chat-header h1 {
    color: var(--tg-theme-accent-text-color);
    letter-spacing: 1px;
}

#chat-messages {
    display: flex;
    flex-direction: column;
    gap: 1em;
    text-align: right;
    padding: 1em;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    flex: 1;
    min-height: 0;
    overflow-y: auto !important;
}
#chat-messages::-webkit-scrollbar {
    width: .5em;
    cursor: pointer;
    background: transparent;
    color: #2a406e;
}
#chat-messages p {
    background: var(--tg-theme-bg-color);
    padding: .5em;
    border-radius: 1em;
    width: fit-content;
}

.from-user {
    align-self: flex-end;
    text-align: right;
}
.from-user::before {
    content: "You";
    font-size: smaller;
    color: var(--tg-theme-accent-text-color);
    opacity: 0.8;
    letter-spacing: 1px;
    text-align: start;
}
.from-user p { border-top-right-radius: 0 !important; }

.from-bot {
    align-self: flex-start;
    text-align: left;
    line-height: 1em;
}
.from-bot::before {
    content: "Bot";
    font-size: smaller;
    color: var(--tg-theme-accent-text-color);
    margin-right: .5em;
    opacity: 0.8;
    letter-spacing: 1px;
    text-align: end;
}
.from-bot p { border-top-left-radius: 0 !important; }

.input-svg {
    position: absolute;
    right: 1em;
    top: 1em;
    transition: all .1s;
    opacity: 1;
    color: var(--tg-theme-button-color);
    transform: translateX(10%);
}
.input-svg:active {
    scale: .9;
    opacity: .7;
}

#black-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1999;
    background: linear-gradient(0deg, #000000c7, #00000094);
    min-width: 100vw;
    min-height: 100vh;
    backdrop-filter: blur(6px);
    animation: opq1 .5s cubic-bezier(0.19, 1, 0.22, 1);
    overflow: hidden !important;
    display: none;
}

.chat-input {
    display: flex;
    justify-content: center;
    gap: .75em;
    flex-wrap: wrap;
    background: #0000002d;
    padding: 2em;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.chat-input button {
    background: var(--tg-theme-button-color);
    border: none;
    padding: 6px 12px;
    border-radius: 24px;
    letter-spacing: 2px;
    color: var(--tg-theme-button-text-color);
    transition: transform .3s;
    outline: none !important;
}
.chat-input button:active { transform: scale(.9); }

#canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    filter: drop-shadow(0 0 4px #ffffff);
    transition: all .3s ease;
    animation: glow-canvas 8s infinite;
    opacity: .5;
}

.th-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 10px 0;
}
.th-btn svg {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

#themes {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0, 0.75);
    padding: 2em;
    border-radius: 16px;
    backdrop-filter: var(--menu-liq-glass);
    z-index: 2003;
    transition: opacity .5s;
    overflow: hidden;
    display: none;
    color: var(--menu-color);
    width: 90%;
    max-width: 350px;
}

@keyframes glow-canvas {
    0% { filter: drop-shadow(0 0 4px #ffffff); }
    50% { filter: drop-shadow(0 0 8px #fffb00); opacity: 1; }
    100% { filter: drop-shadow(0 0 4px #ffffff); }
}
@keyframes popupBtnText { 100% { opacity: 0; } }

.loading-error {
    padding-left: 1.5em;
    padding-right: 1.5em;
}

.color-slot {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.15);
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #fff;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    font-weight: bold;
}
.color-slot::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}
.color-slot[data-index="0"]::before { content: "О"; }
.color-slot[data-index="1"]::before { content: "В"; }
.color-slot[data-index="2"]::before { content: "А"; }
.color-slot.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px #333;
    transform: scale(1.05);
}
.color-label {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.color-value {
    width: 90px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    text-align: center;
    background: #fff;
    outline: none;
}
.buttons-cont1 button {
    padding: 8px 12px;
    border-radius: 12px;
    outline: none;
    border: none;
    letter-spacing: 1px;
    box-shadow: 2px 2px 4px #0000001e;
    transition: box-shadow .1s ease, transform 0.1s ease;
    cursor: pointer;
}
.buttons-cont1 button:active {
    transform: translateY(2px);
    box-shadow: inset 2px 2px 4px #0000001e;
}

.bottom-menu {
    position: fixed;
    display: flex;
    bottom: 1em;
    z-index: 1000;
    justify-content: space-around;
    background: rgb(from var(--tg-theme-bg-color) r g b / 0.65);
    backdrop-filter: blur(10px);
    border: 3px solid rgb(from var(--accent) r g b / 0.35);
    border-radius: 35px;

    /* единая сетка с карточками пар и полосой дней: 16px по бокам, кэп 488 */
    inset: auto 16px 5px 16px;
    max-width: 488px;
    margin-inline: auto;

    button {
        background: none;
        padding: 0;
        border-radius: 15px;
        background: none;
        border: none;
        transition: filter .2s ease;
    }

}

.bottom-menu .bottom-btn {
    flex: 1 1 0;
    display: grid;
    place-items: center;
    padding: 9px 0;
    color: inherit;
}

.bottom-btn .mi {
    width: 26px;
    height: 26px;
    display: block;
}

.bottom-btn.selected {
    filter: drop-shadow(0 2px 10px var(--accent));
}

.bottom-btn.selected .mi {
    animation: tabPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tabPop {
    0% { transform: scale(0.6) rotate(-8deg); }
    100% { transform: scale(1) rotate(0deg); }
}


#runner-menu {
    position: absolute;
    width: calc(100% / 3);
    height: 100%;
    content: "";
    background: rgb( from var(--accent) r g b / 0.15);
    backdrop-filter: blur(24px);
    border-radius: 35px;
    left: 0;
    z-index: -1 !important;
    transition: left 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

.screen-to-show {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding-top: 5px;
}


#profile-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
}

.profile-header {
    width: 100%;
    box-sizing: border-box;
    padding-inline: 16px;
    padding-top: calc(
        var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px)
    );
}

/* заголовок центрируется на всю ширину, плашка юзера — absolute справа */
.header-row {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 48px = 44px чип + рамка; центр строки держит заголовок на общих 10px */
    min-height: 48px;

    h1 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
}

.profile-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: left;
    padding-left: 16px;
    padding-right: 16px;
    width: calc(100% - 30px);
}

.profile-area>div,  .profile-area>section>div {
    background: rgb(from var(--tg-theme-secondary-bg-color) r g b / 0.6);
    padding: 15px;
    border-radius: 25px;
    position: relative;
    display: flex;
    align-items: center;
    align-content: center;

    span {
        padding-left: 5px;
        letter-spacing: 1.5px;
    }

    svg {
        scale: .7;
        position: absolute;
        right: 0;
        padding: 5px;

        path{transition: opacity .025s;}

        &:active {
            scale: .6;
            path {
                opacity: .8;
            }
        }
    }
}

.profile-area section {
    display: flex;
    flex-direction: row;
    gap: 15px
}

/* аватар-чип в шапке: кольцо 44px, при узких экранах центрированному
   заголовку нужен весь правый простор — имя/юзернейм туда не помещаются */
.cont-profile {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgb(from var(--accent) r g b / .6);
    background-color: rgb(from var(--accent) r g b / .2);

    img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }
}

.avatar-fallback {
    width: 100%;
    height: 100%;
    background: rgb(from var(--accent) r g b / .3);
    color: var(--over-color);
    font-weight: 900;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-fallback[hidden] { display: none; }

.user-lessons, .user-streak {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    p {
        align-self: flex-start;
        font-size: small;
    }
}

/* спан-значения не должны ловить легаси .profile-area>section>div span (padding + letter-spacing) */
.profile-area .user-streak span {
    padding-left: 0;
    letter-spacing: normal;
}

.profile-area .user-streak .streak-value {
    font-size: x-large;
}

.streak-unit {
    font-size: small;
    color: var(--tg-theme-hint-color);
}

.streak-best {
    color: var(--tg-theme-hint-color);
}

.streak-fire {
    animation: streak-flicker 1.6s ease-in-out infinite;
    /* чисто декоративная иконка: не ловит тапы и не подсвечивается в вебвью */
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
}

@keyframes streak-flicker {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

#lessons-all-c {
    font-size: x-large;
}

.profile-stat-a {
    pointer-events: none !important;
}


.user-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0 !important;
}

.teacher-lookup-entry {
    appearance: none;
    border: 0;
    width: 100%;
    min-height: 58px;
    padding: 15px 12px;
    border-radius: 25px;
    background: rgb(from var(--tg-theme-secondary-bg-color) r g b / 0.6);
    color: var(--tg-theme-text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.teacher-lookup-entry > span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    letter-spacing: normal;
}

.teacher-lookup-entry svg {
    flex: none;
}

.teacher-lookup-entry:active {
    transform: scale(0.985);
}

.teacher-lookup-arrow {
    color: var(--tg-theme-hint-color);
}

.teacher-lookup-sheet {
    position: fixed;
    inset: 0;
    z-index: 1100;
    box-sizing: border-box;
    padding:
        calc(18px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px))
        16px
        calc(18px + var(--tg-safe-area-inset-bottom, 0px));
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-text-color, #111);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.teacher-lookup-sheet[hidden] {
    display: none;
}

.teacher-lookup-sheet.is-open {
    opacity: 1;
    transform: translateY(0);
}

.teacher-lookup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.teacher-lookup-heading {
    flex: 1;
    min-width: 0;
}

.teacher-lookup-header h1 {
    margin: 0;
    font-size: 25px;
    line-height: 1.2;
}

.teacher-lookup-header p {
    margin: 5px 0 0;
    color: var(--tg-theme-hint-color);
    font-size: 14px;
}


.teacher-search-field {
    height: 50px;
    min-height: 50px;
    flex-shrink: 0;
    padding: 0 14px;
    border-radius: 18px;
    background: var(--tg-theme-secondary-bg-color);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tg-theme-hint-color);
}

.teacher-search-field:focus-within {
    outline: 2px solid rgb(from var(--accent) r g b / 0.55);
}

.teacher-search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    color: var(--tg-theme-text-color);
    font: inherit;
    font-size: 16px;
}

.teacher-search-field input::placeholder {
    color: var(--tg-theme-hint-color);
}

.teacher-lookup-today {
    flex: none;
    padding: 12px;
    border-radius: 18px;
    background: var(--tg-theme-secondary-bg-color);
}

.teacher-lookup-today[hidden] {
    display: none;
}

.teacher-lookup-today h2 {
    margin: 0 0 9px;
    color: var(--tg-theme-hint-color);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.teacher-lookup-today-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.teacher-lookup-today-list::-webkit-scrollbar {
    display: none;
}

.teacher-today-choice {
    flex: none;
    min-height: 38px;
    max-width: min(78vw, 310px);
    padding: 8px 12px;
    border: 1px solid rgb(from var(--accent) r g b / 0.35);
    border-radius: 14px;
    background: var(--tg-theme-bg-color);
    color: var(--tg-theme-text-color);
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    overflow: hidden;
}

.teacher-today-choice span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-today-choice:active {
    transform: scale(0.985);
}

.teacher-lookup-list,
.teacher-lookup-result {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 8px;
}

.teacher-search-field[hidden],
.teacher-lookup-list[hidden],
.teacher-lookup-result[hidden] {
    display: none;
}

.teacher-choice,
.teacher-result-card,
.teacher-lookup-state {
    border: 0;
    border-radius: 20px;
    background: var(--tg-theme-secondary-bg-color);
    color: var(--tg-theme-text-color);
}

.teacher-choice {
    width: 100%;
    padding: 15px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font: inherit;
    font-weight: 650;
    text-align: left;
}

.teacher-choice:active {
    transform: scale(0.985);
}

.teacher-choice svg {
    flex: none;
    color: var(--tg-theme-hint-color);
}

.teacher-lookup-state {
    padding: 22px 18px;
    text-align: center;
    color: var(--tg-theme-hint-color);
}

.teacher-lookup-state strong {
    display: block;
    margin-bottom: 5px;
    color: var(--tg-theme-text-color);
}

.teacher-retry {
    border: 0;
    border-radius: 16px;
    min-height: 46px;
    padding: 0 18px;
    background: var(--tg-theme-button-color);
    color: var(--tg-theme-button-text-color);
    font: inherit;
    font-weight: 750;
}

.teacher-result-summary {
    padding: 18px;
    border-radius: 22px;
    background: rgb(from var(--accent) r g b / 0.14);
}

.teacher-result-summary h2 {
    margin: 0 0 8px;
    font-size: 20px;
}

.teacher-result-summary p {
    margin: 0;
    color: var(--tg-theme-hint-color);
    line-height: 1.4;
}

.teacher-result-card {
    padding: 16px;
    border: 2px solid transparent;
}

.teacher-result-card.is-current {
    border-color: #38e681;
    filter: drop-shadow(0 0 22px rgba(56, 230, 129, .35));
}

.teacher-result-current-label {
    display: inline-block;
    margin-bottom: 7px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #38e681;
    color: #08391d;
    font-size: 12px;
    font-weight: 800;
}

.teacher-result-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

.teacher-result-card p {
    margin: 5px 0 0;
    color: var(--tg-theme-hint-color);
    line-height: 1.35;
}

.teacher-result-card .teacher-result-detail {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.teacher-result-detail svg {
    margin-top: 1px;
    flex: none;
}

.teacher-result-note {
    margin: 2px 4px 6px;
    color: var(--tg-theme-hint-color);
    font-size: 13px;
    line-height: 1.35;
}

.user-settings > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding-inline: 12px;
}

.user-settings > div > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-settings svg {
     position: relative !important;
     transition: transform .2s ease-in-out, filter .2s ease, opacity .2s ease;
}

/* иконки заголовков всех трёх вкладок — единый размер (26px при тексте 32px) */
header h1,
.summary-header h1,
.header-row h1 {
  /* фиксированная строка — смена метрик шрифта больше не двигает заголовки */
  line-height: 1.2;
}

header h1 svg,
.summary-header h1 svg,
#profile-screen h1 .mi {
  /* 1em: глиф Material Symbols (~0.85em) видимой высотой как текст заголовка */
  width: 1em;
  height: 1em;
  flex: none;
}
/* инлайновые svg карточек могут быть без класса .mi — нормализуем */
.profile-area .user-lessons svg,
.profile-area .user-streak svg {
  scale: none;
  padding: 0;
  width: 26px;
  height: 26px;
  right: 12px;
  top: calc(50% - 13px);
  color: var(--tg-theme-hint-color);
}
.user-settings svg.mi, .user-settings .user-notify-text-svg, .user-settings .user-theme-text-svg { scale: none; padding: 0; width: 24px; height: 24px; }
.sett-app svg.mi, #robot-svg-settings svg.mi { width: 24px; height: 24px; }

.user-notifications, .user-appear, .user-support {
    display: flex;
    justify-content: space-between !important;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-inline: 12px;
    position: relative;
    border-radius: 25px;
    transition: opacity .1s, transform .3s ease;

    &:active {
        opacity: .75;
        transform: translateX(10px);

        .user-notify-text-svg {
            animation: notify-bounce .4s cubic-bezier(.18,.89,.32,1.28);
        }

        .user-theme-text-svg {
            animation: theme-pulse .65s ease-out;
            filter: drop-shadow(0 0 7px rgb(from currentColor r g b / 0.35));
        }

        .user-support-text-svg {
            animation: support-glow .75s ease-out;
        }
    }
}

@keyframes notify-bounce {
    0% { transform: translateX(0) rotate(0deg) scale(1); }
    30% { transform: translateX(3px) rotate(12deg) scale(1.12); }
    55% { transform: translateX(-3px) rotate(-8deg) scale(0.94); }
    75% { transform: translateX(2px) rotate(4deg) scale(1.04); }
    100% { transform: translateX(0) rotate(0deg) scale(1); }
}

@keyframes theme-pulse {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.18) rotate(-12deg); }
    50% { transform: scale(0.95) rotate(10deg); }
    75% { transform: scale(1.08) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes support-glow {
    0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    30% { transform: scale(1.18); filter: drop-shadow(0 0 9px var(--accent)); }
    60% { transform: scale(0.96); filter: drop-shadow(0 0 13px var(--accent)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

.user-appear, .user-support {
    &::before {
        content: "";
        position: absolute;
        background: linear-gradient(90deg, rgba(0,0,0,.001), rgb(from var(--accent) r g b / 0.5), rgba(0,0,0,.001));
        width: 100%; 
        height: 1px;
        left: 50%;
        transform: translateX(-50%);
        top: -5px;
    }
}

#cancel-bg {
            display: none;
            position: absolute;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999999998;
            width: 100vw;
            height: 100vh;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            backdrop-filter: blur(8px);
            overflow: hidden !important;
        }

        .popuper-notifications {
            position: fixed;
            left: 50%;
            top: 50%;
            width: calc(100% - 110px);
            transform: translate(-50%, -50%);
            padding: 15px;
            border-radius: 45px;
            margin-top: 0 !important;
            padding-top: 25px !important;
            display: none;
            flex-direction: column;
            justify-content: space-between;
            gap: 15px;
            background: rgb(from var(--accent) r g b / 0.15);
            backdrop-filter: blur(18px);
            z-index: 999999999;
            animation: show-n-s .3s ease-in-out;


            ul {
                list-style: none;
                text-align: left;
                display: flex;
                flex-direction: column;
                font-size: 15px;



                li {
                    display: flex;
                    align-items: center;
                    text-align: center;

                }

                li svg {
                    scale: .5;
                }
            }
        }

        .popuper-notifications h1, .popuper-notifications p {
            text-align: center;
            margin: 0 !important;
            padding-top: 0 !important;
        }

        .input-container-n {
            position: relative;
            display: block;
            width: 100%;
            height: 60px;
            margin-top: 10px;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            z-index: 999999999;


            input {
                position: absolute;
                opacity: 0;
                width: 0;
                height: 0;
            }
        }

        .switch-track {
            position: absolute;
            inset: 0;
            border-radius: 35px;
            background: #ee3311;
            box-shadow: inset 4px 4px 18px rgba(0, 0, 0, 0.45);
            transition: background 0.8s ease;
        }

        #runner-notiif {
            position: absolute;
            top: 50%;
            left: 4px;
            transform: translateY(-50%);
            width: 52px;
            height: 52px;
            background: rgba(255, 255, 255, .2);
            backdrop-filter: blur(18px);
            border-radius: 50%;
            box-shadow: 4px 1px 6px rgba(0, 0, 0, 0.35), inset 2px 2px 4px rgba(255, 255, 255, .05), inset -2px -2px 4px rgba(0, 0, 0, .15);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, .2);
        }

        #notifications-s-svg {

            width: 24px;

            height: 24px;

        }


        @keyframes bellDingDong {

            0% {

                transform: rotate(20deg);

            }


            100% {

                transform: rotate(-20deg);

            }

        }


        @keyframes show-n-s {

            0% {

                transform: translate(-50%, -30%) scale(.7);

                opacity: 0;

            }

        }

        #notifications-toggle:checked~.switch-track {
            background: #11ee00;
        }

        .switch-track.animated #runner-notiif {
            transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 1s ease;
        }

        #notifications-toggle:checked~.switch-track #runner-notiif {
            left: calc(100% - 56px);
            box-shadow: -4px 1px 6px rgba(0, 0, 0, 0.35), inset -2px -2px 4px rgba(255, 255, 255, .15), inset 2px 2px 4px rgba(0, 0, 0, .05);

            svg {
                animation: bellDingDong .4s ease ;
            }
        }

        #notifications-toggle:focus-visible+.switch-track {
            outline: 3px solid #fff;
            outline-offset: 2px;
        }



        .popuper-appearance {
            display: none;
            flex-direction: column;
            gap: 15px;
            padding: 25px 15px !important;
            width: calc(100% - 90px);
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            justify-content: space-around;
            background: rgb(from var(--accent) r g b / 0.2);
            backdrop-filter: blur(26px);
            z-index: 999999999;
            border-radius: 45px;
            animation: show-n-s .3s ease-in-out;

            p {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 15px;
            }

            b {
                font-size: 15px;
            }
        }

        .popuper-appearance h1, .popuper-appearance p {
            margin: 0 !important;
            padding-top: 0 !important;
        }

        .a-settings-area {
            padding-top: 10px;
            display: flex;
            flex-direction: column;
            gap: 25px;
            text-align: left;
            padding-left: 10px;
        }

        .a-settings-area>div,
        .a-settings-area>label {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .a-settings-area>div>div,
        .a-settings-area>label>div {
            display: flex;
            align-items: center;
            gap: 10px
        }

        #activate-ai-a, #activate-person-a, .a-settings-area .switch-toggle {
            width: 50px;
            position: relative;
            margin-right: 15px;
            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 100%;
                border-radius: 35px;
                padding: 6px;
                background: var(--tg-theme-hint-color);
                box-shadow: inset 4px 4px 6px rgba(0, 0, 0, .25), inset -2px -2px 2px rgba(0, 0, 0, .15);
                transition: background .35s ease;
            }

            &:checked::before {     
                background: rgb(from var(--accent) r g b / 2);
            }

            &:checked::after {
                left: calc(100% - 20px);
                box-shadow: /*-3px 1px 4px rgba(0, 0, 0, .35),*/ inset 2px 2px 2px rgba(0, 0, 0, .075);
                transform: translateY(-50%) rotate(180deg);
            }



            &::after {
                content: "";
                width: 20px;
                height: 20px;
                border-radius: 50%;
                position: absolute;
                left: -1px;
                top: 50%;
                transform: translateY(-50%) rotate(0);
                background: linear-gradient(90deg, var(--over-color), rgb(from var(--over-color) r g b / 0.1));
                border: 1px solid rgba(255, 255, 255, .7);
                transition: left .4s ease, box-shadow .4s ease-in-out, transform .4s ease;
                box-shadow: 3px 1px 4px rgba(0, 0, 0, .5);
            }
        }

        .sett-app {
            transition: opacity .15s ease;

            &:active { opacity: .55; }
        }

        /* иконки строк — фиксированная колонка, текст начинается друг под другом */
        .sett-app > div:first-child {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }

        .sett-app > div:first-child svg,
        .sett-app > div:first-child #robot-svg-settings svg {
            width: 24px;
            height: 24px;
            flex: none;
        }

        .sett-app.set-toggle {
            cursor: pointer;
        }

        .appearance-root {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .set-title {
            font-size: 24px;
            font-weight: 800;
            margin: 4px 0 2px !important;
        }

        .set-sub {
            color: var(--tg-theme-hint-color);
            font-size: 14px;
            margin: 0 0 16px !important;
        }

        .set-group-label {
            color: var(--tg-theme-hint-color);
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .8px;
            margin: 18px 4px 8px !important;
        }

        .soon-tag {
            color: var(--tg-theme-hint-color);
            font-size: 13px;
            font-weight: 600;
        }

        #robot-svg-settings {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;

            &::before {
                    content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 0%;
                height: 3px;
                background: none;
                transform: translate(-50%, -50%) rotate(-45deg);
                border-radius: 2px;
                z-index: 2;
                    transition: background .35s, width .3s ease;
                }
        }

        .a-settings-area > div:has(#activate-ai-a:not(:checked)) #robot-svg-settings::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 125%;
            height: 3px;
            background: #ec3942;
            transform: translate(-50%, -50%) rotate(-45deg);
            border-radius: 2px;
            z-index: 2;
            
        }

        .a-settings-area > div:has(#activate-ai-a:not(:checked)) #robot-svg-settings svg {
            opacity: 0.5;
        }

        #robot-svg-settings svg {
            transition: opacity .5s;
        }

          .a-settings-area > div:has(#activate-person-a:checked) #person-svg-settings {
            animation: jump-p .5s ease;
        }

        
        @keyframes jump-p {
            50% {
                transform: translateY(-5px);
            }
        }

        @keyframes ending {
            100% {
                opacity: 0;
                transform: translateX(-5%);
            }
        }

        @keyframes ending2 {
            100% {
                opacity: 0;
                transform: translateX(5%);
            }
        }

        @keyframes starting {
            0% {
                opacity: 0;
                transform: translateX(10%);
            }

            100% {
                opacity: 1;
                transform: translate(0);
            }
        }

        @keyframes starting2 {
            0% {
                opacity: 0;
                transform: translateX(-10%);
            }

            100% {
                opacity: 1;
                transform: translate(0);
            }
        }

        /* ─── Тумблеры фич: подсветка текущих пар, подсказки-ассистенты ─── */
        body.pref-highlights-off .lesson-row.is-current, body.pref-highlights-off .summary-card.is-current { box-shadow: none; border-color: transparent; background: inherit; }
        body.pref-tips-off .assistant, body.pref-tips-off .assistant-say { display: none !important; }

        .appearance-extras {
          margin: 16px 0 0;
          padding: 14px;
          border-radius: 16px;
          background: var(--accent-bg, rgba(255,255,255,.06));
        }
        .appearance-extras h3 { margin: 0 0 8px; font-size: 15px; }
        .appearance-extras label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 13px; }
        .appearance-extras input { accent-color: var(--accent); }

        #set-app1 {
            animation: starting .5s forwards;
            display: none;
            flex-direction: column;
            justify-content: center !important;
            text-align: center;
            /* align-items: center; */
            
        }


        
                .color-p-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
    align-self: center;
    align-content: center;
    align-items: center;
    gap: 25px;
    margin-bottom: calc(2em + 5px);

    div {
        /* width: calc(30vw - 20px); */
        height: 2em !important;
        align-content: center;
        padding: 5px;
    
    }

}


        .hex-edit-row {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25em;
}

#hex-input {
    width: 190px;
    padding: 8px 12px;
    border: 2px solid rgb(from currentColor r g b / .35);
    border-radius: 12px;
    background: var(--tg-theme-secondary-bg-color);
    color: var(--tg-theme-text-color);
    text-align: center;
    font-size: 14px;
    letter-spacing: 1px;
    outline: none;
    transition: border-color .15s ease, color .15s ease;
}

#hex-input.invalid {
    border-color: #e05555;
    color: #e05555;
}

        .color-p {
    width: 96px;
    box-sizing: border-box;
    text-align: center;
    padding: 5px;
    border-radius: 15px;
    /* margin: 5px; */
    border: 2px solid rgb(from currentColor r g b / .65);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
    box-shadow: none;
    transition: box-shadow .1s ease;
    position: relative;
    overflow: hidden !important;


            &::before {
                content: "";
                position: absolute;
                top: 50%;
                left: -100%;
                /* border-radius: 35px; */
                transform: translateY(-50%);
                height: calc(100% - 10px);
                background: linear-gradient(90deg,rgba(0, 0, 0, 0.001), rgba(255, 255, 255, .5), rgba(0, 0, 0, 0.001));
                width: 100%;
            }
        }

        .color-p.selected {
            box-shadow: 4px 4px 10px rgb(from currentColor r g b / .25);
            background: initial;
            font-weight: 700;
            border-color: currentColor;
        }

        .color-p.selected::before {
            animation: blink-c-p .4s ease forwards;
        }

        @keyframes blink-c-p {
            0% {
                left: -100%;
            }

            100% {
                left: 100%;
            }
        }

        .choose-theme-c {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 10px 0 20px 0 !important;

    label {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        padding-left: calc(1em + 20px);
        cursor: pointer;
        user-select: none;
        opacity: 0.8;
        
        transition: transform 0.15s ease, opacity .1s ease;

        &:active {
            transform: scale(0.98);
        }

        input[type="radio"] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            background: rgb(from var(--tg-theme-hint-color) r g b / .5);
            padding: 5px;
            border-radius: 15px;
            border: 2px solid transparent;
            z-index: -1 !important;
            
            transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
        }

        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 5px;
            transform: translate(0, -50%) scale(0);
            width: 1em;
            height: 1em;
            background: currentColor;
            box-shadow: inset 2px 2px 6px rgba(0, 0, 0, .15);
            border-radius: 50%;
            z-index: -1 !important;
            opacity: 0;

            transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        &:has(input:checked) {
            opacity: 1;
            &::before {
                background: #101820;
                border-color: rgb(from var(--accent) r g b / 0.8);
                box-shadow: 0 4px 12px rgba(248, 249, 250, 0.15);
            }

            &::after {
                opacity: 1;
                transform: translate(0, -50%) scale(1);
            }
        }
    }
}

        @media (max-width: 400px) {
            .choose-theme-c label {
                width: calc(100% - 10px - 1em - 20px) !important;
            }
        }

        .back-to-ap-settins-btn {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 5px;
            padding: 5px;
            /* margin-top: 5px; */
            margin-bottom: 10px;
            width: calc(50%);
            cursor: pointer;
            user-select: none;

            &:active {
                opacity: .7;
            }
        }

        .save-ch-btn {
            display: flex;
            margin-bottom: 5px !important;
            margin-top: 25px !important;
            margin: auto 25px;
            text-align: center;
            background: rgb(from var(--accent) r g b / 0.8);
            align-items: center;
            justify-content: center;
            padding: 5px;
            border-radius: 35px;
            cursor: pointer;
            user-select: none;
            transition: all .2s;
            position: relative;
            overflow: hidden !important;
            animation: shine-btn-s 10s ease-in-out infinite;
            

            &::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 0;
                height: 100%;
                background: inherit;
                border-radius: 35px;
                background: var(--accent);
                
            }

            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 0;
                height: 100%;
                background: inherit;
                border-radius: 35px;
                background: #dcece6;
            }

            
        }

        .save-ch-btn.anim::before {
            animation: width-line-1 1s ease forwards;
        }

        .save-ch-btn.anim::after {
            animation: width-line-2 1s ease forwards;
            animation-delay: 990ms;
        }

        @keyframes width-line-1 {
            0% {
                width: 0;
            }

            100% {
                width: 100%;
            }
        }

        @keyframes width-line-2 {
            0% {
                width: 0;
            }

            100% {
                width: 102%;
                height: 102%;
                padding: 1px;
            }
        }

        #anim-svg-save-e {
            position: absolute;
            transform: translate(-50%, -50%);
            aspect-ratio: 1 / 1;
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: center;
            opacity: 0;
            filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .25));
            transition: transform .15s ease, opacity .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        @keyframes show-a-sg {
            0%{
                opacity: 0;
                transform: translate(-50%, -50%);
            }
            50% {
                opacity: 1;
            }

            100% {
                opacity: 1;
                transform: translate(-50%, 100%);
            }
        }

        #done-svg-c-0 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: none;
            z-index: 9;
            
        }

        #done-svg-c {
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
            animation: draw-1-1 0.8s cubic-bezier(0.65, 0, 0.45, 1) forwards;
        }

        @keyframes draw-1-1 {
            100% {
                stroke-dashoffset: 0;
            }
        }

        .tg-color-container {
            display: none;
            flex-direction: column;
            gap: 15px;
            margin: 15px 0;
        }

        .tg-th-colors {
            display: flex;
            flex-direction: row;
            gap: 15px;
            justify-content: center;
            margin: 15px 0;

            div {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                box-shadow: 4px 4px 6px rgba(0, 0, 0, .25), inset 4px 4px 6px rgba(0, 0, 0, 0.35), inset -2px -2px 2px rgba(255, 255, 255, 0.25);
            }
        }

        .save-ch-btn.disabled {
            opacity: .5;
            filter: brightness(60%) grayscale(.7);
            animation: none !important;
            pointer-events: none;
            user-select: none;
        }

        @keyframes shine-btn-s {
            25% {filter: none;}
            50% {
                filter: drop-shadow(1px 1px 12px rgb(from var(--accent) r g b / 0.5));
            }
            75%{filter: none;}
        }

        .tg-th-colors div:first-child {
            background: var(--tg-theme-bg-color);
        }

        .tg-th-colors div:nth-child(2) {
            background: var(--tg-theme-secondary-bg-color);
        }

        .tg-th-colors div:nth-child(3) {
            background: var(--tg-theme-accent-text-color, var(--tg-theme-button-color));
        }

        .tg-sync-txt-1 {
            color: rgb(114, 250, 52);
            font-size: 12px;
            font-weight: 800;
            margin: 10px 0;

            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            gap: 10px;


            svg {
                scale: .7;
            }
        }

        #set-app2 {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        #demo-lesson {
            text-align: left;
        }

        /* ─── Редактор занятия v2: пресеты и подсветка настраиваемых элементов ─── */
        #demo-lesson.demo-lesson-v2 {
          border-radius: 20px;
          padding: 12px;
          background: linear-gradient(160deg, rgba(255,255,255,0.04), transparent 55%);
          box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
        }
        .lesson-presets {
          display: flex;
          gap: 8px;
          margin-bottom: 10px;
        }
        .lesson-preset-btn {
          flex: 1;
          border: none;
          border-radius: 14px;
          padding: 12px 8px;
          font-weight: 700;
          font-size: 13px;
          background: var(--accent-bg, var(--tg-theme-secondary-bg-color));
          color: var(--tg-theme-text-color);
          cursor: pointer;
          transition: transform 0.15s ease, background 0.15s ease;
        }
        .lesson-preset-btn.is-active {
          background: var(--tg-theme-button-color, var(--accent));
          color: var(--tg-theme-button-text-color, #fff);
          transform: translateY(-1px);
        }
        .lesson-presets-premium {
          margin-top: 8px;
          padding-top: 8px;
          border-top: 1px dashed rgba(255, 255, 255, 0.08);
        }
        .lesson-preset-btn.premium {
          background: color-mix(in srgb, gold 18%, var(--tg-theme-secondary-bg-color, #242F43));
        }
        .lesson-editor-tip {
          margin: 0 0 12px;
          font-size: 12px;
          color: var(--tg-theme-hint-color);
          line-height: 1.4;
        }
        #demo-lesson .to-settings {
          outline: 2px solid var(--tg-theme-button-color, var(--accent));
          outline-offset: 2px;
          border-radius: 8px;
          animation: select-glow 0.45s ease;
        }
        @keyframes select-glow {
          from { filter: brightness(1.4); }
          to { filter: brightness(1); }
        }

        #setting-week-name h4 {
            transition: all .5s;
            width: 100%;
        }

        .settings-container-1 {
            display: flex;
            gap: 15px;
            flex-direction: row !important;
            align-items: center;
            justify-content: center;
            padding: 5px;
            margin: 10px;
        }

        .settings-container-1 svg {
            transition: all .2s ease;

            &:active {
                scale: .88;
                opacity: .8;
            }
        }

        .settings-container-1 .set-content-1 {
            width: 100% !important;
        }

        #setting-week-name {
            display: flex;
            gap: 15px;
            flex-direction: row !important;
            justify-content: center;
            align-items: center;
            padding: 5px;
            margin: 10px;
        }

        .to-settings {
            border: 2px solid #fff !important;
            filter:  drop-shadow(1px 1px 6px var(--accent));
            animation: to-settings-anim .2s;
        }

        @keyframes to-settings-anim {
            0% {
                filter: none;
            }
        }

        .reset-lesson-settings-c-btn {
            display: flex;
            justify-content: center;

            
            background: rgb(from var(--tg-theme-destructive-text-color) r g b / .8);
            padding: 5px 10px;
            border-radius: 35px;
            margin: 0 10px ;

            user-select: none;
            position: relative;
            transition: transform .2s ease, filter .15s, opacity .2s ease-in-out;

            &:active {
                transform: scaleX(1.05) scaleY(0.95);
            }
        }

        .reset-lesson-settings-c-btn.disabled {
            pointer-events: none !important;
            opacity: .25;
            filter: grayscale(1);
        }
    

        .backdrop {
        position: fixed;
        inset: 0;
        z-index: 1999;
        touch-action: none;
        pointer-events: none; /*<- rewrite it*/
        }

        #calendar-schedule-container {
            display: none;

        }

        #summary-screen {
            display: flex;
            flex-direction: column;
            gap: 15px;

        }

        .summary-header {
          position: relative;
          /* во всю ширину экрана — заголовок центрируется ровно по центру,
             кнопка «Поделиться» позиционируется абсолютом и не сдвигает его */
          align-self: stretch;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .summary-header h1 {
            /* +5px гасят паддинг .screen-to-show — строка заголовка на тех же 10px,
               что и на вкладках «Расписание» и «Профиль» */
            padding-top: calc(
                var(--tg-content-safe-area-inset-top, 0px) +
                var(--tg-safe-area-inset-top, 0px) + 5px
            );
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin: 0;
        }

/* ─── Виджет «Куда идти» ─── */
.go-widget {
  /* единая сетка с карточками сводки и нижним меню (16px, кэп 488) */
  box-sizing: border-box;
  width: min(100% - 2em, 488px);
  margin: 8px auto 12px;
  align-self: stretch;
  padding: 16px 18px;
  border-radius: 22px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--tg-theme-button-color, #3390ec) 22%, transparent),
      var(--tg-theme-secondary-bg-color, #242F43));
  position: relative;
  overflow: hidden;
  animation: go-in 0.35s ease;
}
@keyframes go-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.go-widget::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tg-theme-button-color, #3390ec) 28%, transparent);
  pointer-events: none;
}
.go-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tg-theme-hint-color);
  font-weight: 700;
  margin-bottom: 4px;
}
.go-room {
  font-size: clamp(36px, 11vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--tg-theme-text-color);
}
.go-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--tg-theme-hint-color);
}
.go-timer { font-weight: 700; color: var(--tg-theme-accent-text-color, var(--accent)); }
.go-copy-btn {
  margin-top: 12px;
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--tg-theme-bg-color, #171F30) 55%, transparent);
  color: var(--tg-theme-text-color);
  font-weight: 700;
  cursor: pointer;
}
.go-widget.is-urgent-go {
  animation: go-pulse 1.2s ease-in-out infinite;
}
@keyframes go-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 160, 40, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(255, 160, 40, 0); }
}
.go-widget.is-done .go-room { font-size: 28px; }

/* ─── Иконочные кнопки «Поделиться» (главный экран + «Мой день») ─── */
#main-share-btn,
#share-summary-btn {
  position: absolute;
  /* отступ сверху = высота нативных кнопок Telegram (свернуть/меню) */
  top: calc(
    var(--tg-content-safe-area-inset-top, 0px) +
    var(--tg-safe-area-inset-top, 0px) + 8px
  );
  right: calc(14px + var(--tg-safe-area-inset-right, 0px));
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tg-theme-button-color, var(--accent)) 16%, transparent);
  color: var(--tg-theme-button-color, var(--accent));
  cursor: pointer;
  z-index: 1000;
  transition: transform .15s ease, background .2s ease;
}
#main-share-btn:active,
#share-summary-btn:active {
  transform: scale(.9);
  background: color-mix(in srgb, var(--tg-theme-button-color, var(--accent)) 28%, transparent);
}

/* ─── Подсказка «Добавить на экран» ─── */
.home-screen-hint {
  position: absolute;
  /* Слева от кнопки «Поделиться», на той же строке */
  top: calc(
    var(--tg-content-safe-area-inset-top, 0px) +
    var(--tg-safe-area-inset-top, 0px) + 8px
  );
  right: calc(14px + 40px + 8px + var(--tg-safe-area-inset-right, 0px));
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: var(--tg-theme-button-color, var(--accent));
  color: var(--tg-theme-button-text-color, #fff);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tg-theme-button-color, var(--accent)) 45%, transparent);
  cursor: pointer;
  z-index: 1000;
  transition: transform .15s ease, opacity .15s ease;
}
.home-screen-hint svg {
  display: block;
}
.home-screen-hint:active {
  transform: scale(.92);
  opacity: .85;
}

/* ─── Share sheet: превью + отправка дня/недели ─── */
/* 200100 — выше календаря (200000), из которого шарится неделя;
   тост #fast-alert поднят ещё выше */
.share-sheet-modal {
  position: fixed;
  inset: 0;
  z-index: 200100;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.share-sheet-modal[hidden] { display: none; }
.share-sheet-modal.is-open { opacity: 1; }
.share-sheet {
  width: min(100%, 440px);
  max-height: calc(100vh - 40px); /* фолбэк для webview без dvh */
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--tg-theme-bg-color, #171F30);
  border-radius: 22px 22px 0 0;
  padding: 18px 16px calc(18px + var(--tg-safe-area-inset-bottom, 0px));
  transform: translateY(16px);
  transition: transform 0.2s ease;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
}
.share-sheet-modal.is-open .share-sheet { transform: translateY(0); }
/* глобальный header делает шапки колонкой — тут заголовок по центру,
   крестик абсолютом в правый верхний угол */
.share-sheet header {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.share-sheet header h3 { margin: 0; font-size: 18px; }
#share-sheet-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: var(--tg-theme-secondary-bg-color, #242F43);
  color: var(--tg-theme-hint-color);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.share-mode-row {
  display: flex;
  gap: 6px;
  background: var(--tg-theme-secondary-bg-color, #242F43);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 14px;
}
.share-mode-btn {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 10px 10px;
  background: transparent;
  color: var(--tg-theme-hint-color);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.share-mode-btn.is-active {
  background: var(--tg-theme-button-color, var(--accent));
  color: var(--tg-theme-button-text-color, #fff);
}
.share-day-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: 12px;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.share-day-chips.is-drag-scroll { cursor: grabbing; }
.share-day-chips::-webkit-scrollbar { display: none; }
.share-day-chips[hidden] { display: none !important; }
.share-day-chip {
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  padding: 9px 14px;
  background: var(--tg-theme-secondary-bg-color, #242F43);
  color: var(--tg-theme-text-color);
  font: inherit;
  display: flex;
  align-items: baseline;
  gap: 7px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.share-day-chip b { font-size: 13px; font-weight: 700; }
.share-day-chip span {
  font-size: 12px;
  color: var(--tg-theme-hint-color);
  /* lining-nums обязателен: это правило целиком замещает глобальный
     font-variant-numeric, без него даты рендерятся нелинейными цифрами */
  font-variant-numeric: lining-nums tabular-nums;
}
.share-day-chip.is-active {
  background: var(--tg-theme-button-color, var(--accent));
  color: var(--tg-theme-button-text-color, #fff);
}
.share-day-chip.is-active span {
  color: color-mix(in srgb, var(--tg-theme-button-text-color, #fff) 72%, transparent);
}
.share-sub-label {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--tg-theme-hint-color);
}
.share-preview {
  border-radius: 16px;
  overflow: hidden;
  background: var(--tg-theme-secondary-bg-color, #242F43);
  border: 1px solid var(--shadows, rgba(255, 255, 255, 0.08));
  max-height: 46vh;
  overflow-y: auto;
  margin-bottom: 16px;
}
.share-preview-canvas { display: block; width: 100%; height: auto; }
.share-sheet-actions {
  display: flex;
  gap: 8px;
}
.share-sheet-actions > * { flex: 1; }
.share-primary-btn,
.share-ghost-btn {
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.share-primary-btn {
  background: var(--tg-theme-button-color, var(--accent));
  color: var(--tg-theme-button-text-color, #fff);
}
.share-primary-btn:disabled { opacity: 0.6; }
.share-ghost-btn {
  background: var(--tg-theme-secondary-bg-color, #242F43);
  color: var(--tg-theme-text-color);
}
.share-done { text-align: center; }
.share-done-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--tg-theme-secondary-bg-color, #242F43);
  color: var(--tg-theme-link-color, var(--accent));
}
.share-done p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tg-theme-text-color);
}

/* ─── Модалка локальной правки пары ─── */
.override-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.override-modal.is-open { opacity: 1; }
.override-sheet {
  width: min(100%, 440px);
  background: var(--tg-theme-bg-color, #171F30);
  border-radius: 22px 22px 0 0;
  padding: 18px 16px calc(18px + var(--tg-safe-area-inset-bottom, 0px));
  transform: translateY(16px);
  transition: transform 0.2s ease;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
}
.override-modal.is-open .override-sheet { transform: translateY(0); }
/* reset !important-паддингов/фона глобального header (стр. 107) для шапок шитов */
.override-sheet header,
.share-sheet header {
  /* relative, чтобы крестик share-шита позиционировался от шапки */
  position: relative;
  z-index: auto;
  background: none;
  border-radius: 0;
  gap: 0;
  padding: 0 !important;
}
.override-sheet header h3 { margin: 0 0 4px; font-size: 18px; line-height: 1.3; }
.override-sheet header p {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--tg-theme-hint-color);
}
.override-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--tg-theme-hint-color);
}
.override-field input {
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--tg-theme-secondary-bg-color, #242F43);
  color: var(--tg-theme-text-color);
  font: inherit;
  font-size: 15px;
}
.override-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 16px;
  font-size: 14px;
}
.override-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.ov-ghost, .ov-primary {
  border: none;
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 700;
  cursor: pointer;
}
.ov-ghost {
  background: var(--tg-theme-secondary-bg-color, #242F43);
  color: var(--tg-theme-text-color);
}
.ov-primary {
  background: var(--tg-theme-button-color, var(--accent));
  color: var(--tg-theme-button-text-color, #fff);
}

/* ─── Предположительная аудитория (room_guessed) ─── */
.room.room-guessed {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration: underline dotted;
  text-decoration-color: var(--tg-theme-link-color, var(--accent));
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.room-guess-q {
  margin-left: 4px;
  vertical-align: 3px;
  color: var(--tg-theme-link-color, var(--accent));
}
.room-guess-sheet header { text-align: center; }
.room-guess-sheet .room-guess-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--tg-theme-secondary-bg-color, #242F43);
  color: var(--tg-theme-link-color, var(--accent));
}
.room-guess-sheet .room-guess-note {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--tg-theme-text-color);
}
.room-guess-sheet .override-actions { justify-content: center; }
.room-guess-sheet .ov-primary { min-width: 140px; }

/* ─── Скрытые пары: чип под днями недели и список в шите ─── */
.hidden-lessons-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px auto 2px;
  padding: 7px 14px;
  border: none;
  border-radius: 999px;
  background: var(--tg-theme-secondary-bg-color, #242F43);
  color: var(--tg-theme-text-color);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  opacity: .85;
}
.hidden-lessons-chip:active { opacity: 1; }
/* display:flex перебивает UA-правило [hidden], из-за этого чип не исчезал
   после «Показать все» и оставался со старым счётчиком */
.hidden-lessons-chip[hidden] { display: none; }
.hidden-lessons-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  margin-bottom: 14px;
  -webkit-overflow-scrolling: touch;
}
.hidden-lesson-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--tg-theme-secondary-bg-color, #242F43);
}
.hidden-lesson-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.hidden-lesson-info strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hidden-lesson-info span {
  font-size: 11px;
  color: var(--tg-theme-hint-color);
}
.hidden-lesson-info i { font-style: normal; opacity: .8; }
.hidden-lesson-item .ov-primary {
  padding: 8px 12px;
  font-size: 12px;
  flex-shrink: 0;
}
.hidden-lessons-empty {
  padding: 18px 4px;
  text-align: center;
  font-size: 13px;
  color: var(--tg-theme-hint-color);
}

/* ─── Мягкий paywall Premium ─── */
.soft-paywall {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .42);
}
.soft-paywall-card {
  position: relative;
  width: min(100%, 420px);
  padding: 22px 18px calc(18px + var(--tg-safe-area-inset-bottom, 0px));
  border-radius: 24px;
  background: var(--tg-theme-bg-color, #171f30);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .35);
  animation: soft-paywall-rise .25s ease;
}
.soft-paywall-kicker {
  color: var(--tg-theme-link-color, var(--accent));
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.soft-paywall-card h3 { margin: 7px 28px 6px 0; }
.soft-paywall-card p {
  margin: 0 0 16px;
  color: var(--tg-theme-hint-color);
  line-height: 1.45;
  font-size: 13px;
}
.soft-paywall-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  color: var(--tg-theme-hint-color);
  font-size: 26px;
  cursor: pointer;
}
.soft-paywall-primary {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--tg-theme-button-color, var(--accent));
  color: var(--tg-theme-button-text-color, #fff);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
@keyframes soft-paywall-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.loader {
                display: flex;
                position: relative;
                width: 100vw;
                height: 100vh;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                z-index: 99999999999999999;
                box-sizing: border-box;
                overflow: hidden;
                background-color: var(--tg-theme-bg-color);
                /* animation: hide0 1.51s forwards; */

            }

            @keyframes starry-loader {
                0% {
                    transform: rotate(0);
                }

                50% {
                    transform: rotate(360deg);
                    scale: 1.2;
                }

                100% {
                    transform: rotate(0);
                }
            }

            @keyframes hideLoader {
                0% {
                    opacity: 1;
                }

                100% {
                    opacity: 0;
                }
            }

            .starry {
                animation: starry-loader 4s infinite ease-in-out;
            }

            .ground {
                position: absolute;
                bottom: -5%;
                transform: translateY(4px);
                animation: go-line 1.5s infinite linear;
                display: flex;
                gap: 0;
            }

            @keyframes go-line {
                0% {
                    transform: translate(0px, 4px);
                }
                100% {
                    transform: translate(527px, 4px);
                }
            }

            .title-loader {
                position: absolute;
                top: 5%;
                font-size: 3.5em;
                font-weight: 900;
                color: #EFB701;
                letter-spacing: 2px;
                animation: op-title 2s infinite ease-in-out;
            }

            .top-ground {
                position: absolute;
                
                width: 0;
                height: 5px;
                background: #EFB701;
                opacity: .5;
                animation: go-loader 1.49s forwards;
                border-radius: 24px;

                
            }

            @keyframes go-loader {
                100% {
                    width: calc(100% - 30px);
                    opacity: 1;
                }
            }

            @keyframes go-loader-2 {
                100% {
                    opacity: 1;
                    height: calc(100% - 40px);
                }
            }

            @keyframes op-title {
                50% {
                    opacity: .65;
                    letter-spacing: 1px;
                }
            }

            @keyframes hide0 {
                80% {
                    opacity: 1;
                }
                100% {
                    opacity: 0;
                }
            }

            @media (max-width:425px) {
                .title-loader {
                    top: 10%;
                    font-size: 3em;
                }
            }

            @media (max-width:375px) {
                .title-loader {
                    font-size: 2.5em;
                }
            }
/* ─── Анимации отключены системно ─── */
@media (prefers-reduced-motion: reduce) {
  .soft-paywall-card,
  .go-widget,
  .go-widget.is-urgent-go,
  .streak-fire,
  .override-modal,
  .override-sheet {
    animation: none !important;
    transition: none !important;
  }
}