/* ==================================================================
   Задача №405. Оформление мобильного кабинета исполнителя.

   Один набор переменных на все экраны: до этого цвета и отступы
   были разбросаны по шести файлам стилей и расходились между собой.
   Здесь же тёмная тема, крупный шрифт по настройке телефона,
   нижняя панель вкладок, полоска перехода, заглушки загрузки,
   тосты и пустые состояния.
   ================================================================== */

:root {
    /* Цвета */
    --mc-bg: #f4f6fa;
    --mc-surface: #ffffff;
    --mc-surface-soft: #f7f9fd;
    --mc-line: #e5e9f3;
    --mc-ink: #1f2440;
    --mc-ink-soft: #6b7793;
    --mc-ink-mute: #98a1b8;
    --mc-brand: #3b6ef2;
    --mc-brand-soft: #eaf0ff;
    --mc-brand-ink: #ffffff;
    --mc-good: #17a673;
    --mc-good-soft: #e8f7f0;
    --mc-warn: #d98324;
    --mc-warn-soft: #fdf4e7;
    --mc-bad: #d64550;
    --mc-bad-soft: #fdeced;

    /* Размеры */
    --mc-radius: 16px;
    --mc-radius-sm: 12px;
    --mc-gap: 12px;
    --mc-pad: 16px;
    --mc-tap: 44px;                 /* минимальная цель нажатия */
    --mc-header: 56px;
    --mc-tabbar: 62px;

    /* Тени */
    --mc-shadow: 0 2px 10px rgba(31, 36, 64, .06);
    --mc-shadow-up: 0 -2px 16px rgba(31, 36, 64, .08);
    --mc-shadow-pop: 0 12px 32px rgba(31, 36, 64, .18);

    /* Безопасные зоны телефона (вырез, домашняя полоска) */
    --mc-safe-top: env(safe-area-inset-top, 0px);
    --mc-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Тёмная тема по настройке телефона. Отдельного переключателя нет
   намеренно: человек уже выбрал её один раз в системе. */
@media (prefers-color-scheme: dark) {
    :root {
        --mc-bg: #12151f;
        --mc-surface: #1b2030;
        --mc-surface-soft: #222839;
        --mc-line: #2c3448;
        --mc-ink: #eef1f8;
        --mc-ink-soft: #a6b0c6;
        --mc-ink-mute: #7e89a1;
        --mc-brand: #6d97ff;
        --mc-brand-soft: #222c47;
        --mc-good: #34c48c;
        --mc-good-soft: #16302a;
        --mc-warn: #e5a44f;
        --mc-warn-soft: #33291a;
        --mc-bad: #f0757f;
        --mc-bad-soft: #341f24;
        --mc-shadow: 0 2px 10px rgba(0, 0, 0, .4);
        --mc-shadow-up: 0 -2px 16px rgba(0, 0, 0, .45);
        --mc-shadow-pop: 0 12px 32px rgba(0, 0, 0, .55);
    }

    body { background: var(--mc-bg); color: var(--mc-ink); }

    .card, .modal-content, .list-group-item, .app-drawer,
    .assistant-panel, .mc-card { background: var(--mc-surface); color: var(--mc-ink); }

    .form-control, .form-select, textarea, input[type="text"],
    input[type="search"], input[type="number"] {
        background: var(--mc-surface-soft);
        color: var(--mc-ink);
        border-color: var(--mc-line);
    }

    .text-muted, small { color: var(--mc-ink-soft) !important; }
}

/* Крупный шрифт: телефон отдаёт увеличенный корневой размер, и вся
   вёрстка тянется за ним. Опора на rem вместо жёстких пикселей. */
html { -webkit-text-size-adjust: 100%; }

/* ==================================================================
   Нижняя панель вкладок
   ================================================================== */

.mc-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    display: flex;
    align-items: stretch;
    background: var(--mc-surface);
    border-top: 1px solid var(--mc-line);
    box-shadow: var(--mc-shadow-up);
    padding-bottom: var(--mc-safe-bottom);
    /* Панель не должна мигать при инерционной прокрутке в WebView. */
    transform: translateZ(0);
}

.mc-tab {
    position: relative;
    flex: 1 1 0;
    min-height: var(--mc-tabbar);
    min-width: var(--mc-tap);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px;
    text-decoration: none;
    color: var(--mc-ink-mute);
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
    background: transparent;
    border: 0;
    transition: color .18s ease, transform .12s ease;
}

.mc-tab i { font-size: 18px; }
.mc-tab span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-tab:active { transform: scale(.94); }
.mc-tab.is-active { color: var(--mc-brand); font-weight: 600; }

/* Тонкая черта над выбранной вкладкой — заметно, но не кричит. */
.mc-tab.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--mc-brand);
}

.mc-tab-badge {
    position: absolute;
    top: 6px;
    left: 50%;
    margin-left: 4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--mc-bad);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--mc-surface);
}

/* Контенту нужно место под панелью, иначе она перекрывает кнопки. */
body.has-tabbar .pjax-container {
    padding-bottom: calc(var(--mc-tabbar) + var(--mc-safe-bottom) + 12px);
}

/* Чат теперь отдельная вкладка — плавающая кнопка чата не нужна:
   две одинаковые двери рядом только мешают друг другу. */
body.has-tabbar .chat-fab { display: none; }

/* Помощник поднимается над панелью вкладок и не наезжает на «Чат». */
body.has-tabbar .assistant {
    bottom: calc(var(--mc-tabbar) + var(--mc-safe-bottom) + 16px);
    z-index: 1032;
}

body.has-tabbar .assistant-hello { max-width: 62vw; }

/* ==================================================================
   Полоска перехода: видно, что нажатие сработало
   ================================================================== */

.mc-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 2000;
    background: linear-gradient(90deg, var(--mc-brand), #8aa9ff);
    box-shadow: 0 0 8px rgba(59, 110, 242, .6);
    opacity: 0;
    transition: width .2s ease, opacity .25s ease;
    pointer-events: none;
}

.mc-progress.is-on { opacity: 1; }

/* ==================================================================
   Заглушки загрузки вместо крутящегося кружка
   ================================================================== */

.mc-skeleton { display: grid; gap: var(--mc-gap); }

.mc-skeleton-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius);
    padding: var(--mc-pad);
    display: grid;
    gap: 10px;
}

.mc-bone {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        var(--mc-surface-soft) 25%, var(--mc-line) 37%, var(--mc-surface-soft) 63%);
    background-size: 400% 100%;
    animation: mc-bone 1.4s ease infinite;
}

.mc-bone.w-40 { width: 40%; }
.mc-bone.w-60 { width: 60%; }
.mc-bone.w-80 { width: 80%; }
.mc-bone.tall { height: 20px; }

@keyframes mc-bone {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ==================================================================
   Появление экрана
   ================================================================== */

/* Появление экрана — только по прозрачности.
   Сдвиг делать нельзя: элемент с анимацией движения становится точкой
   отсчёта для всего закреплённого внутри, и панель разделов вместе
   с помощником переставали держаться за края экрана. */
.mc-enter { animation: mc-enter .26s ease both; }

@keyframes mc-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Системная настройка «уменьшить движение» — уважаем: для части людей
   анимации вызывают тошноту, а не радость. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==================================================================
   Кнопка в работе: нажали — видно, что идёт отправка
   ================================================================== */

.mc-busy { position: relative; pointer-events: none; opacity: .75; }

.mc-busy > * { visibility: hidden; }

.mc-busy::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: mc-spin .7s linear infinite;
    visibility: visible;
}

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

/* ==================================================================
   Тосты — с возможностью отменить действие
   ================================================================== */

.mc-toasts {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--mc-tabbar) + var(--mc-safe-bottom) + 14px);
    z-index: 1900;
    display: grid;
    gap: 8px;
    pointer-events: none;
}

.mc-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--mc-radius-sm);
    background: #22283a;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: var(--mc-shadow-pop);
    pointer-events: auto;
    animation: mc-toast-in .22s ease both;
}

.mc-toast.is-out { animation: mc-toast-out .2s ease both; }
.mc-toast.is-good { background: #14603f; }
.mc-toast.is-bad { background: #7a2027; }
.mc-toast span { flex: 1; }

.mc-toast button {
    flex: none;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font: inherit;
    font-weight: 600;
}

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

@keyframes mc-toast-out {
    to { opacity: 0; transform: translateY(10px); }
}

/* ==================================================================
   Галочка успеха
   ================================================================== */

.mc-done {
    position: fixed;
    inset: 0;
    z-index: 1950;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 20, 32, .45);
    backdrop-filter: blur(2px);
    animation: mc-fade .2s ease both;
}

.mc-done__circle {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: var(--mc-good);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 44px rgba(23, 166, 115, .45);
    animation: mc-pop .42s cubic-bezier(.2, .9, .3, 1.4) both;
}

.mc-done__circle i { font-size: 52px; color: #fff; }

.mc-done__text {
    position: absolute;
    bottom: 34%;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

@keyframes mc-pop {
    0% { transform: scale(.2); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes mc-fade { from { opacity: 0; } to { opacity: 1; } }

/* ==================================================================
   Пустые состояния: не «ничего нет», а что делать дальше
   ================================================================== */

.mc-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 34px 20px;
    text-align: center;
}

.mc-empty svg { width: 132px; height: 104px; }
.mc-empty b { font-size: 16px; color: var(--mc-ink); }
.mc-empty span { font-size: 13.5px; color: var(--mc-ink-soft); max-width: 34ch; line-height: 1.5; }

.mc-empty .mc-btn { margin-top: 6px; }

/* ==================================================================
   Общие кнопки и карточки раздела
   ================================================================== */

.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--mc-tap);
    padding: 0 18px;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius-sm);
    background: var(--mc-surface);
    color: var(--mc-ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}

.mc-btn:active { transform: translateY(1px); }
.mc-btn--main { background: var(--mc-brand); border-color: transparent; color: var(--mc-brand-ink); }
.mc-btn--soft { background: var(--mc-brand-soft); border-color: transparent; color: var(--mc-brand); }
.mc-btn--wide { width: 100%; }

.mc-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius);
    padding: var(--mc-pad);
    box-shadow: var(--mc-shadow);
}

/* ==================================================================
   Доступность: видимый фокус и достаточные цели нажатия
   ================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--mc-brand);
    outline-offset: 2px;
    border-radius: 8px;
}

.app-nav-btn,
.mc-tab,
.mc-btn,
.btn {
    min-height: var(--mc-tap);
}

/* Экранным дикторам — сообщения, которые видит зрячий пользователь. */
.mc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==================================================================
   Нет связи
   ================================================================== */

.mc-offline {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--mc-header) + var(--mc-safe-top));
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--mc-warn-soft);
    color: var(--mc-warn);
    font-size: 13.5px;
    font-weight: 600;
    transform: translateY(-120%);
    transition: transform .25s ease;
}

.mc-offline.is-on { transform: none; }

/* ==================================================================
   Главная: экран дня
   ================================================================== */

.mc-home {
    display: grid;
    gap: var(--mc-gap);
    padding: 12px 12px 4px;
}

.mc-home__hello { padding: 2px 4px 0; line-height: 1.3; }
.mc-home__hello span { display: block; font-size: 13px; color: var(--mc-ink-soft); }
.mc-home__hello b { font-size: 20px; color: var(--mc-ink); }

.mc-money { display: grid; gap: 6px; }
.mc-money__label { font-size: 12.5px; color: var(--mc-ink-soft); }

.mc-money__sum {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--mc-ink);
    line-height: 1.1;
}

.mc-money__diff { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.mc-money__diff.is-up { color: var(--mc-good); }
.mc-money__diff.is-down { color: var(--mc-bad); }

/* Мини-график: один столбик — один день */
.mc-spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 56px;
    margin-top: 10px;
}

.mc-spark__bar {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 3px 3px 2px 2px;
    background: var(--mc-line);
    transition: height .3s ease;
}

.mc-spark__bar.is-paid { background: linear-gradient(180deg, var(--mc-brand), #7fa0ff); }

.mc-spark__scale {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--mc-ink-mute);
    margin-top: 4px;
}

.mc-money__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    min-height: var(--mc-tap);
    color: var(--mc-brand);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* Плитки «что в руках» */
.mc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.mc-tile {
    display: grid;
    align-content: center;
    gap: 4px;
    min-height: 84px;
    padding: 12px 10px;
    background: var(--mc-surface);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius-sm);
    text-align: center;
    text-decoration: none;
    color: var(--mc-ink);
    box-shadow: var(--mc-shadow);
}

.mc-tile__num { font-size: 26px; font-weight: 800; line-height: 1; }
.mc-tile__num--text { font-size: 16px; font-weight: 700; }
.mc-tile__label { font-size: 11.5px; color: var(--mc-ink-soft); line-height: 1.25; }
.mc-tile.is-warn { border-color: var(--mc-warn); background: var(--mc-warn-soft); }
.mc-tile.is-warn .mc-tile__num { color: var(--mc-warn); }
.mc-tile.is-bad { border-color: var(--mc-bad); background: var(--mc-bad-soft); }
.mc-tile.is-bad .mc-tile__num { color: var(--mc-bad); }

/* Зов к действию: предложения ждут ответа */
.mc-call {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--mc-radius);
    background: linear-gradient(120deg, var(--mc-brand), #6f8dff);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(59, 110, 242, .28);
    animation: mc-call-in .35s ease both;
}

.mc-call__icon {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: 17px;
}

.mc-call__text { flex: 1; display: grid; gap: 2px; }
.mc-call__text b { font-size: 15px; }
.mc-call__text span { font-size: 12.5px; opacity: .9; }

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

/* Быстрые действия */
.mc-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.mc-quick__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 12px 14px;
    background: var(--mc-surface);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius-sm);
    color: var(--mc-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.mc-quick__item i { color: var(--mc-brand); font-size: 16px; width: 20px; text-align: center; }

/* ==================================================================
   Липкая панель фильтров списка
   ================================================================== */

.mc-filter {
    position: sticky;
    top: calc(var(--mc-header) + var(--mc-safe-top));
    z-index: 30;
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    margin: 0 -12px 10px;
    background: var(--mc-bg);
    border-bottom: 1px solid var(--mc-line);
}

.mc-filter__search { position: relative; }

.mc-filter__search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mc-ink-mute);
    font-size: 14px;
}

.mc-filter__search input {
    width: 100%;
    min-height: var(--mc-tap);
    padding: 0 14px 0 36px;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius-sm);
    background: var(--mc-surface);
    color: var(--mc-ink);
    font-size: 15px;
}

/* Чипсы площадок: горизонтальная лента, не переносится в три ряда */
.mc-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mc-chips::-webkit-scrollbar { display: none; }

.mc-chip {
    flex: none;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--mc-line);
    border-radius: 18px;
    background: var(--mc-surface);
    color: var(--mc-ink-soft);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.mc-chip.is-on {
    background: var(--mc-brand);
    border-color: transparent;
    color: #fff;
}

.mc-filter__count {
    font-size: 12.5px;
    color: var(--mc-ink-soft);
}

.mc-filter__count b { color: var(--mc-ink); }

/* ==================================================================
   Предложения: отсчёт брони, смахивание, причины отказа
   ================================================================== */

.mc-swipe-hint {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px;
    padding: 8px 12px;
    border-radius: var(--mc-radius-sm);
    background: var(--mc-surface-soft);
    color: var(--mc-ink-mute);
    font-size: 12px;
}

.mc-swipe-hint span:first-child { color: var(--mc-bad); }
.mc-swipe-hint span:last-child { color: var(--mc-good); }

.mc-offer {
    position: relative;
    touch-action: pan-y;
    transition: transform .22s ease, opacity .22s ease;
}

/* Пока тянут карточку — видно, что произойдёт */
.mc-offer.is-take { box-shadow: inset 0 0 0 2px var(--mc-good); }
.mc-offer.is-refuse { box-shadow: inset 0 0 0 2px var(--mc-bad); }
.mc-offer.is-going-right { transform: translateX(120%); opacity: 0; }
.mc-offer.is-going-left { transform: translateX(-120%); opacity: 0; }

.mc-offer__time {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--mc-ink-soft);
}

.mc-offer__time em { font-style: normal; color: var(--mc-ink-mute); }
.mc-offer__time.is-soon { color: var(--mc-warn); font-weight: 600; }
.mc-offer__time.is-over { color: var(--mc-bad); }

/* Причины отказа: панель снизу, большими целями под палец */
.mc-reasons {
    position: fixed;
    inset: 0;
    z-index: 1800;
    background: rgba(16, 20, 32, .45);
    display: flex;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}

.mc-reasons.is-open { opacity: 1; visibility: visible; }

.mc-reasons__box {
    width: 100%;
    display: grid;
    gap: 8px;
    padding: 16px 14px calc(16px + var(--mc-safe-bottom));
    background: var(--mc-surface);
    border-radius: 20px 20px 0 0;
    transform: translateY(16px);
    transition: transform .22s ease;
}

.mc-reasons.is-open .mc-reasons__box { transform: none; }

.mc-reasons__ttl {
    font-size: 16px;
    font-weight: 700;
    color: var(--mc-ink);
    margin-bottom: 4px;
}

.mc-reasons__cancel { color: var(--mc-ink-soft); }

/* ==================================================================
   Отправка скриншота
   ================================================================== */

.mc-rules {
    display: block;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--mc-radius-sm);
    background: var(--mc-brand-soft);
    color: var(--mc-ink-soft);
    font-size: 12.5px;
    line-height: 1.5;
}

.mc-rules b { color: var(--mc-ink); }

.mc-upload-note {
    margin: 12px 0 0;
    font-size: 13.5px;
    color: var(--mc-ink-soft);
}

.mc-upload-note.is-bad { color: var(--mc-bad); font-weight: 600; }

.mc-upload-bar {
    height: 6px;
    margin-top: 10px;
    border-radius: 4px;
    background: var(--mc-line);
    overflow: hidden;
}

.mc-upload-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--mc-brand), #8aa9ff);
    transition: width .2s ease;
}

.mc-spark-empty {
    margin-top: 12px;
    padding: 16px;
    border-radius: var(--mc-radius-sm);
    background: var(--mc-surface-soft);
    color: var(--mc-ink-mute);
    font-size: 13px;
    text-align: center;
}

.mc-filter__now {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--mc-brand-soft);
    color: var(--mc-brand);
    font-size: 11.5px;
    font-weight: 700;
}

.mc-tab.is-long span { font-size: 9.6px; letter-spacing: -.01em; }

/* ==================================================================
   Задача №406. Настройки кабинета
   ================================================================== */

.mc-settings { display: grid; gap: 14px; padding: 12px; }

.mc-settings__lead {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--mc-ink-soft);
}

.mc-settings__form { display: grid; gap: 10px; }

/* Переключатель: вся строка — цель нажатия, как в настройках телефона */
.mc-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 14px 16px;
    background: var(--mc-surface);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow);
    cursor: pointer;
}

.mc-switch__icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--mc-brand-soft);
    color: var(--mc-brand);
    font-size: 16px;
}

.mc-switch__text { flex: 1; display: grid; gap: 3px; min-width: 0; }
.mc-switch__text b { font-size: 15px; color: var(--mc-ink); }
.mc-switch__text span { font-size: 12.5px; line-height: 1.45; color: var(--mc-ink-soft); }

.mc-switch input { position: absolute; opacity: 0; pointer-events: none; }

.mc-switch__box {
    flex: none;
    width: 52px;
    height: 31px;
    border-radius: 16px;
    background: var(--mc-line);
    transition: background .2s ease;
    position: relative;
}

.mc-switch__box::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(16, 20, 32, .28);
    transition: transform .2s cubic-bezier(.3, .8, .4, 1.2);
}

.mc-switch input:checked ~ .mc-switch__box { background: var(--mc-good); }
.mc-switch input:checked ~ .mc-switch__box::after { transform: translateX(21px); }
.mc-switch input:focus-visible ~ .mc-switch__box { outline: 3px solid var(--mc-brand); outline-offset: 2px; }

.mc-settings__note {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--mc-radius-sm);
    background: var(--mc-brand-soft);
    color: var(--mc-ink-soft);
    font-size: 13px;
    line-height: 1.5;
}

.mc-settings__note i { color: var(--mc-brand); margin-top: 2px; }

/* Кнопка «скрыть» в карточке наставника */
.mentor-hide {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin-top: 10px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mc-ink-mute);
    font-size: 13px;
    font-weight: 600;
}

.mentor-hide:active { transform: scale(.97); }

/* ---------- Стиль интерфейса: размер и плотность ---------- */

/* Крупный: тем, кому мелко — больше текст, выше цели нажатия. */
body[data-style="large"] {
    --mc-tap: 52px;
    --mc-gap: 14px;
    --mc-pad: 18px;
    --mc-tabbar: 70px;
    font-size: 17.5px;
}

body[data-style="large"] .mc-tab { font-size: 12.5px; }
body[data-style="large"] .mc-tab i { font-size: 21px; }
body[data-style="large"] .mc-money__sum { font-size: 36px; }
body[data-style="large"] .mc-tile__num { font-size: 30px; }
body[data-style="large"] .mc-tile__label { font-size: 13px; }
body[data-style="large"] .mc-btn { font-size: 16.5px; }
body[data-style="large"] .card-body,
body[data-style="large"] .detail-value,
body[data-style="large"] .review-content { font-size: 16.5px; }

/* Компактный: на экран помещается больше карточек. */
body[data-style="compact"] {
    --mc-gap: 8px;
    --mc-pad: 12px;
    --mc-radius: 12px;
    --mc-radius-sm: 10px;
    --mc-tabbar: 56px;
    font-size: 14.5px;
}

body[data-style="compact"] .mc-tab { font-size: 10px; }
body[data-style="compact"] .mc-tab i { font-size: 16px; }
body[data-style="compact"] .mc-money__sum { font-size: 27px; }
body[data-style="compact"] .mc-tile { min-height: 70px; }
body[data-style="compact"] .mc-tile__num { font-size: 22px; }
body[data-style="compact"] .mc-quick__item { min-height: 48px; }
body[data-style="compact"] .review-content { font-size: 14px; }

/* ---------- Настройки: разделы, плитки тем и стилей ---------- */

.mc-settings__block { display: grid; gap: 10px; }

.mc-settings__ttl {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mc-ink-mute);
}

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

.mc-theme {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 10px 10px 12px;
    background: var(--mc-surface);
    border: 2px solid var(--mc-line);
    border-radius: var(--mc-radius);
    cursor: pointer;
    transition: border-color .18s ease, transform .12s ease;
}

.mc-theme:active { transform: scale(.98); }
.mc-theme input { position: absolute; opacity: 0; pointer-events: none; }
.mc-theme.is-on { border-color: var(--mc-brand); }

.mc-theme > i {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 17px;
    color: var(--mc-brand);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .18s ease, transform .2s cubic-bezier(.2, .9, .3, 1.4);
}

.mc-theme.is-on > i { opacity: 1; transform: none; }

/* Маленький «экранчик» с цветами темы: видно, что получишь */
.mc-theme__demo {
    position: relative;
    display: block;
    height: 74px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .06);
}

.mc-theme__bar { position: absolute; inset: 0 0 auto 0; height: 16px; }

.mc-theme__card {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 24px;
    height: 34px;
    border-radius: 7px;
    padding: 7px;
    display: grid;
    gap: 5px;
    align-content: start;
}

.mc-theme__card span { display: block; height: 5px; border-radius: 3px; }
.mc-theme__card span:first-child { width: 62%; }
.mc-theme__card span:last-child { width: 38%; }

.mc-theme__dot {
    position: absolute;
    right: 9px;
    bottom: 7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.mc-theme__name { font-size: 14px; font-weight: 700; color: var(--mc-ink); }
.mc-theme__hint { font-size: 11.5px; line-height: 1.35; color: var(--mc-ink-soft); }

/* Стили интерфейса */
.mc-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.mc-style {
    position: relative;
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
    padding: 12px 8px;
    background: var(--mc-surface);
    border: 2px solid var(--mc-line);
    border-radius: var(--mc-radius-sm);
    cursor: pointer;
}

.mc-style input { position: absolute; opacity: 0; pointer-events: none; }
.mc-style.is-on { border-color: var(--mc-brand); }
.mc-style b { font-size: 13.5px; color: var(--mc-ink); }
.mc-style__hint { font-size: 11px; line-height: 1.35; color: var(--mc-ink-soft); }

.mc-style__demo { display: grid; gap: 3px; width: 40px; margin-bottom: 2px; }
.mc-style__demo span { display: block; height: 5px; border-radius: 3px; background: var(--mc-line); }
.mc-style.is-on .mc-style__demo span { background: var(--mc-brand); }
.mc-style__demo--large span { height: 8px; }
.mc-style__demo--compact { gap: 2px; }
.mc-style__demo--compact span { height: 3px; }

/* Опасное действие держим отдельно и внизу */
.mc-danger {
    margin-top: 10px;
    padding: 14px;
    border: 1px solid var(--mc-bad);
    border-radius: var(--mc-radius);
    background: var(--mc-bad-soft);
}

.mc-danger .mc-settings__ttl { color: var(--mc-bad); }
.mc-danger .mc-settings__lead { color: var(--mc-ink-soft); }

.mc-btn--danger { background: var(--mc-bad); border-color: transparent; color: #fff; }

/* ---------- Режим оформления: три плитки ---------- */

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

.mc-mode {
    position: relative;
    display: grid;
    gap: 3px;
    justify-items: center;
    text-align: center;
    padding: 14px 8px 12px;
    background: var(--mc-surface);
    border: 2px solid var(--mc-line);
    border-radius: var(--mc-radius-sm);
    cursor: pointer;
    transition: border-color .18s ease, transform .12s ease;
}

.mc-mode:active { transform: scale(.97); }
.mc-mode input { position: absolute; opacity: 0; pointer-events: none; }
.mc-mode.is-on { border-color: var(--mc-brand); background: var(--mc-brand-soft); }
.mc-mode i { font-size: 19px; color: var(--mc-ink-mute); margin-bottom: 2px; }
.mc-mode.is-on i { color: var(--mc-brand); }
.mc-mode b { font-size: 13.5px; color: var(--mc-ink); }
.mc-mode span { font-size: 11px; line-height: 1.3; color: var(--mc-ink-soft); }

/* Плитка темы: слева светлый вид, справа тёмный */
.mc-theme__demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 66px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--mc-line);
}

.mc-theme__half { position: relative; display: block; height: 100%; }
.mc-theme__bar { position: absolute; inset: 0 0 auto 0; height: 14px; }

.mc-theme__line {
    position: absolute;
    left: 7px;
    right: 7px;
    top: 24px;
    height: 6px;
    border-radius: 3px;
}

.mc-theme__dot {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}