/* ==========================================
   FOCUS CRM — каркас и компоненты страниц (тёмная версия).
   Цвета, шрифты, радиусы и свечение — только токены static/css/theme.css (var(--focus-*)).
   ========================================== */

/* Каркас: меню слева + прокручиваемая область справа */
body { display: flex; height: 100vh; height: 100dvh; overflow: hidden; margin: 0; background-color: var(--focus-bg); }





/* Прежний «неон» → фирменная красная кнопка с мягким свечением */
.btn-neon-community { background: var(--focus-red-strong); color: #fff !important; font-weight: 800; border: 1px solid rgba(255, 90, 110, .6); border-radius: 14px; transition: box-shadow .2s, background-color .15s, transform .08s; }
.btn-neon-community:hover { background: #c0172e; box-shadow: var(--focus-glow-red); }
.btn-neon-community:active { transform: translateY(1px); }
.btn-neon-community:focus-visible { box-shadow: var(--focus-focus-ring); }

.main-wrapper { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; width: calc(100% - 268px); }
.main-content { flex-grow: 1; padding: 28px 32px; background-color: var(--focus-bg); overflow-y: auto; position: relative; }
.page-head { position: relative; }
.page-head::before { content: ''; position: absolute; right: -8px; top: -14px; width: 160px; height: 64px; background-image: var(--focus-dots); background-size: 12px 12px; pointer-events: none; -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent); }
.page-head h3 { font-family: var(--focus-font-display); font-weight: 900 !important; color: #fff; letter-spacing: .01em; text-transform: uppercase; position: relative; }
.page-head h3 form { font-family: var(--focus-font-body); text-transform: none; }
.page-head h3 .form-select, .page-head h3 .form-control { font-weight: 600; width: auto; }
.main-content h4.fw-bold, .main-content h5.fw-bold { font-family: var(--focus-font-display); font-weight: 700 !important; text-transform: uppercase; letter-spacing: .02em; font-size: 1rem; line-height: 1.35; }
.main-content h4.fw-bold { font-size: 1.1rem; }
.main-content .card h5.fw-bold, .main-content .neon-stat-box h5.fw-bold { font-size: .9rem; }
/* Заголовок блока и бейдж рядом: на узком экране бейдж переносится, а не сжимает заголовок */
.main-content .d-flex.justify-content-between:has(> h5.fw-bold) { flex-wrap: wrap; gap: 6px 10px; }
.main-content .modal h5, .main-content .modal h4 { font-family: var(--focus-font-body); text-transform: none; letter-spacing: 0; }

/* Шапка на телефоне */
.top-navbar { display: none; }

/* Карточки: тонкая обводка, при наведении — голографическая рамка (без сдвигов) */
.card { border: 1px solid var(--focus-line); box-shadow: var(--focus-shadow-card); margin-bottom: 20px; border-radius: var(--focus-r); background-color: var(--focus-surface); transition: box-shadow .2s ease; }
.card.shadow-sm { box-shadow: var(--focus-shadow-card) !important; }

.table-custom { overflow: hidden; }
.table-custom th { background-color: #0b1222; border-bottom: 2px solid rgba(var(--focus-blue-rgb), .7) !important; color: #fff; font-size: 0.72rem; padding: 13px 10px; text-align: center; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; }
.table-custom td { padding: 11px 10px; vertical-align: middle; text-align: center; font-weight: 600; font-size: 0.93rem; font-variant-numeric: tabular-nums; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Плитки итогов (дашборд, архив) */
.stat-tile { position: relative; overflow: hidden; border: 1px solid var(--focus-line) !important; border-radius: 18px; background: var(--focus-surface) !important; }
.stat-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tile-color, var(--focus-sky)); box-shadow: 0 0 14px var(--tile-color, var(--focus-sky)); }
.stat-tile::after { content: ''; position: absolute; right: 0; bottom: 0; width: 90px; height: 60px; background-image: var(--focus-dots); background-size: 10px 10px; -webkit-mask-image: linear-gradient(135deg, transparent 20%, #000); mask-image: linear-gradient(135deg, transparent 20%, #000); pointer-events: none; }
.stat-tile h6 { color: var(--focus-muted); font-weight: 700; opacity: 1 !important; margin-top: 4px; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem !important; }
.stat-tile h4 { color: #fff; font-family: var(--focus-font-display); font-weight: 700 !important; font-variant-numeric: tabular-nums; font-size: 1.35rem; }
.stat-tile small { color: var(--focus-text-2); font-weight: 600; }
.stat-tile-primary { --tile-color: var(--focus-sky); }
.stat-tile-danger { --tile-color: #ff5a6e; }
.stat-tile-warning { --tile-color: var(--focus-warning-text); }
.stat-tile-info { --tile-color: var(--focus-mint); }
.stat-tile-success { border: 1px solid transparent !important; background: linear-gradient(var(--focus-surface-2), var(--focus-surface-2)) padding-box, var(--focus-holo) border-box !important; box-shadow: var(--focus-glow-holo); }
.stat-tile-success::before { display: none; }
.stat-hero { border: 1px solid rgba(127, 179, 255, .5) !important; border-radius: 18px; background: linear-gradient(120deg, #0a3fa0, var(--focus-blue-strong) 60%, #3a5bd9) !important; box-shadow: var(--focus-glow-blue); position: relative; overflow: hidden; }
.stat-hero::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 45%; background-image: radial-gradient(circle, rgba(255, 255, 255, .18) 1.2px, transparent 1.6px); background-size: 12px 12px; -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent); pointer-events: none; }
.stat-hero > * { position: relative; z-index: 1; }
.stat-hero #live-total { font-family: var(--focus-font-display); font-variant-numeric: tabular-nums; }
.col-share-sasha { color: var(--focus-lilac) !important; }
.col-share-nikita { color: var(--focus-pink) !important; }

/* ЦВЕТОВЫЕ ЗОНЫ KPI: тонированный тёмный фон, яркая обводка, читаемый бейдж */
.kpi-zone-red { border: 1px solid rgba(255, 90, 110, .65) !important; background: linear-gradient(180deg, rgba(255, 90, 110, .12), rgba(255, 90, 110, .04)), var(--focus-surface) !important; }
.kpi-zone-yellow { border: 1px solid rgba(255, 201, 60, .6) !important; background: linear-gradient(180deg, rgba(255, 201, 60, .11), rgba(255, 201, 60, .03)), var(--focus-surface) !important; }
.kpi-zone-green { border: 1px solid rgba(61, 220, 132, .6) !important; background: linear-gradient(180deg, rgba(61, 220, 132, .11), rgba(61, 220, 132, .03)), var(--focus-surface) !important; }
.badge-zone-red { background-color: #ff5a6e; color: var(--focus-ink); border: 1px solid #ff5a6e; }
.badge-zone-yellow { background-color: var(--focus-warning-text); color: var(--focus-ink); border: 1px solid var(--focus-warning-text); }
.badge-zone-green { background-color: var(--focus-success-text); color: var(--focus-ink); border: 1px solid var(--focus-success-text); }
.badge-zone-none { background-color: #98a3c0; color: var(--focus-ink); border: 1px solid #98a3c0; }   /* KPI города: нет данных (только личный процент) */

/* ГЕЙМИФИКАЦИЯ: голографическая монета и значки */
.vip-glow { border: 1px solid rgba(255, 216, 77, .8) !important; box-shadow: 0 0 0 1px rgba(255, 216, 77, .35), 0 0 28px rgba(255, 216, 77, .25) !important; }
.coin-badge { background-color: var(--focus-lilac); background-image: var(--focus-holo); color: var(--focus-ink) !important; border: 0; border-radius: 12px; font-weight: 800; font-size: .95rem; box-shadow: var(--focus-glow-holo); }
.coin-badge i { color: var(--focus-ink); }
.achievement { font-size: 0.82rem; padding: 6px 12px 6px 9px; border-radius: var(--focus-r-pill); border: 1px solid transparent; background: linear-gradient(var(--focus-surface-2), var(--focus-surface-2)) padding-box, var(--focus-holo) border-box; margin-right: 6px; margin-bottom: 8px; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: #fff; box-shadow: 0 0 14px rgba(182, 156, 255, .18); }
.achievement i { font-size: 1rem; color: var(--focus-coin); }
.music-player iframe { border-radius: 14px; width: 100%; height: 100px; border: 1px solid var(--focus-line); background: var(--focus-surface-2); }

/* ПРОФИЛЬ СОТРУДНИКА И СТЕНА (классы neon-* сохранены) */
.neon-profile-header { background: var(--focus-surface); border: 1px solid var(--focus-line-strong); border-radius: var(--focus-r-lg); padding: 40px 28px 28px; position: relative; overflow: hidden; box-shadow: var(--focus-shadow-card); }
.neon-profile-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 14px; background-color: var(--focus-red); background-image: radial-gradient(circle, var(--focus-navy) 2.2px, transparent 2.6px); background-size: 11px 11px; background-position: 3px 1px; border-bottom: 2px solid transparent; box-shadow: 0 2px 0 0 rgba(182, 156, 255, .5); }
.neon-profile-header::after { content: ''; position: absolute; right: 0; top: 14px; width: 220px; height: 140px; background-image: var(--focus-dots); background-size: 12px 12px; -webkit-mask-image: radial-gradient(circle at top right, #000, transparent 70%); mask-image: radial-gradient(circle at top right, #000, transparent 70%); pointer-events: none; }
.neon-profile-header > * { position: relative; z-index: 1; }
.neon-avatar { width: 124px; height: 124px; border-radius: 50%; object-fit: cover; padding: 4px; border: 0; background: var(--focus-holo); box-shadow: var(--focus-glow-holo); }
.neon-title { font-family: var(--focus-font-display); font-weight: 900; font-size: 1.7rem; color: #fff; letter-spacing: .01em; text-transform: uppercase; }
.neon-stat-box { background: var(--focus-surface); border: 1px solid var(--focus-line); border-radius: var(--focus-r); padding: 16px; transition: box-shadow .2s; height: 100%; box-shadow: var(--focus-shadow-card); }
.neon-stat-box h3 { font-variant-numeric: tabular-nums; color: #fff; }
.stat-chip { background: rgba(7, 11, 22, .55); border: 1px solid var(--focus-line); }
.stat-chip .fs-5 { font-variant-numeric: tabular-nums; }
.wall-card { background: var(--focus-surface); border: 1px solid var(--focus-line); border-radius: 20px; overflow: hidden; transition: box-shadow .2s; height: 100%; display: flex; flex-direction: column; box-shadow: var(--focus-shadow-card); }
.wall-img-wrap { width: 100%; height: 320px; overflow: hidden; position: relative; background: var(--focus-surface-2); display: block; }
.wall-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.wall-card:hover .wall-img-wrap img { transform: scale(1.03); }
.wall-comment { background: var(--focus-surface-2); border: 1px solid var(--focus-line); }
.comment-list { max-height: 180px; overflow-y: auto; padding-right: 5px; }
.profile-public-tag { color: #fff; font-family: var(--focus-font-display); font-weight: 900; letter-spacing: .08em; font-size: .85rem; }
.top-post-info { background: var(--focus-surface-2); }

/* Страница входа: тёмный фон, перелив, сетка точек, геометрия (SVG в login.html) */
.main-content.is-login { background-color: var(--focus-bg); padding-top: 96px; overflow-x: hidden; }
.main-content.is-login::after { content: ''; position: absolute; left: 0; top: 0; width: 55%; height: 45%; background-image: var(--focus-dots); background-size: 16px 16px; -webkit-mask-image: radial-gradient(circle at top left, #000, transparent 70%); mask-image: radial-gradient(circle at top left, #000, transparent 70%); pointer-events: none; }
.focus-shapes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.login-page { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px 0 40px; position: relative; z-index: 1; }
.login-card { background: var(--focus-surface); border: 1px solid transparent; background: linear-gradient(var(--focus-surface), var(--focus-surface)) padding-box, var(--focus-holo) border-box; border-radius: 28px; box-shadow: 0 30px 70px rgba(0, 0, 0, .55), var(--focus-glow-holo); padding: 28px 24px; width: 100%; max-width: 440px; position: relative; }
.login-logo { width: 150px; height: auto; display: block; margin: -84px auto 6px; filter: drop-shadow(0 0 22px rgba(var(--focus-blue-rgb), .45)); }
.login-card .neon-title { font-size: 1.45rem; }
.login-tg { background: var(--focus-accent-soft); border: 1px solid rgba(91, 159, 255, .35); border-radius: 18px; padding: 16px; }
.login-tg h6 { color: #fff !important; }
.login-divider { display: flex; align-items: center; gap: 12px; color: var(--focus-muted); font-family: var(--focus-font-display); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; margin: 22px 0 14px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--focus-line-strong); }
.login-card .form-control { min-height: 52px; font-size: 1rem; }
.login-card .btn-primary { min-height: 52px; font-size: 1.05rem; }

/* Магазин и монеты */
.shop-card { border-radius: 20px !important; overflow: hidden; }
.shop-card:hover { box-shadow: var(--focus-glow-holo) !important; }
.shop-price { background-color: var(--focus-lilac); background-image: var(--focus-holo); color: var(--focus-ink); border-radius: var(--focus-r-pill); font-weight: 800; padding: 4px 12px; display: inline-flex; align-items: center; gap: 6px; }
.shop-media { height: 200px; border-bottom: 1px solid var(--focus-line); }
.shop-emoji { font-size: 4.5rem; line-height: 1.1; max-width: 100%; max-height: 100%; padding: 0 12px; overflow: hidden; overflow-wrap: anywhere; text-align: center; color: #fff; }

/* Мобильные: телефон в первую очередь */
@media (max-width: 768px) {
    body { flex-direction: column; }
    .main-wrapper { width: 100%; height: 100%; }
    .top-navbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--focus-bg-deep); z-index: 1030; position: relative; min-height: 62px; flex-shrink: 0; }
    .top-navbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--focus-holo); pointer-events: none; }
    .top-navbar-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
    .top-navbar-brand img { width: 42px; height: auto; filter: drop-shadow(0 0 8px rgba(var(--focus-blue-rgb), .35)); }
    .top-navbar-brand span { font-family: var(--focus-font-display); font-weight: 900; color: #fff; font-size: 1.1rem; letter-spacing: .04em; }
    .top-navbar .btn-menu { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
    .main-content { padding: 22px 14px 28px; }
    .page-head h3 { font-size: 1.15rem !important; }
    .page-head::before { width: 110px; }
    .neon-profile-header { padding: 34px 16px 20px; text-align: center; }
    .neon-avatar { width: 104px; height: 104px; margin-bottom: 12px; }
    .neon-title { font-size: 1.3rem; }
    .wall-img-wrap { height: 260px; }
    .stat-tile h4 { font-size: 1.05rem; }
    .form-control, .form-select { font-size: 16px; }
    .btn:not(.btn-sm):not(.btn-link) { min-height: var(--focus-tap); }
    .btn-sm { min-height: 36px; }
    .main-content.is-login { padding-top: 90px; }
    .login-card { padding: 24px 18px; }
}
/* Центр настроек: бейджи источника значения */
.settings-src { font-weight: 700; letter-spacing: .02em; }
.settings-src-city { background-color: rgba(91, 159, 255, .14); color: var(--focus-link); border: 1px solid rgba(91, 159, 255, .5); }
.settings-src-global { background-color: rgba(182, 156, 255, .14); color: var(--focus-lilac); border: 1px solid rgba(182, 156, 255, .5); }
.settings-src-default { background-color: var(--focus-surface-3); color: var(--focus-text-2); border: 1px solid var(--focus-line-strong); }
.settings-src-override { background-color: var(--focus-warning-soft); color: var(--focus-warning-text); border: 1px solid rgba(255, 201, 60, .5); }
.settings-input-num { max-width: 140px; }
.settings-table .settings-input-num { margin: 0 auto; }
.settings-salary-alert { border-left: 4px solid var(--focus-warning-text); }
/* Конструктор показателей */
.metric-sign-plus { background-color: var(--focus-success-soft); color: var(--focus-success-text); border: 1px solid rgba(61, 220, 132, .5); font-weight: 700; }
.metric-sign-minus { background-color: var(--focus-danger-soft); color: var(--focus-danger-text); border: 1px solid rgba(255, 90, 110, .5); font-weight: 700; }
.metric-sign-none { background-color: transparent; color: var(--focus-muted); border: 1px solid var(--focus-line-strong); }
.metrics-table td { font-size: 0.9rem; }
.metrics-table .metric-source { max-width: 340px; }
.metric-link { color: var(--focus-link); text-decoration: none; border-bottom: 1px dotted var(--focus-link); }
.metric-archived { opacity: 0.55; }
.metric-card { border: 1px solid var(--focus-line); border-radius: 12px; padding: 12px; background: var(--focus-surface-2); }
.metric-flash { box-shadow: 0 0 0 2px var(--focus-sky), var(--focus-glow-blue) !important; transition: box-shadow .3s; }
.metric-actions .btn { min-width: 34px; }
.metrics-table td:first-child { min-width: 210px; }
.metric-actions .btn { padding: 2px 7px; }
.metric-current, .metric-human-box { background: var(--focus-accent-soft); border: 1px solid rgba(91, 159, 255, .35); }
.metric-expr { font-size: 1rem; }
.metric-ops .btn { min-width: 38px; }
.metric-catalog { position: sticky; top: 0; }
.metric-catalog-list { max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.metric-catalog-item { text-align: left; background: var(--focus-surface-2); border: 1px solid var(--focus-line); border-radius: 10px; padding: 6px 10px; color: inherit; }
.metric-catalog-item:hover, .metric-catalog-item:focus { border-color: var(--focus-sky); background: var(--focus-accent-soft); color: #fff; }
/* Распределение прибыли (этап 1В) */
.profit-table td { font-size: 0.9rem; }
.profit-table td:nth-child(2) { min-width: 200px; }
.profit-kind-start td, .profit-kind-remainder td { background: var(--focus-accent-soft); }
.profit-card.profit-kind-start, .profit-card.profit-kind-remainder { border-color: rgba(91, 159, 255, .45); }
.profit-hidden { opacity: 0.6; }
.profit-actions .btn { min-width: 34px; padding: 2px 7px; }
.profit-flag-deduct { background: var(--focus-danger-soft); color: var(--focus-danger-text); border: 1px solid rgba(255, 90, 110, .45); }
.profit-flag-show { background: transparent; color: var(--focus-muted); border: 1px solid var(--focus-line-strong); }
.profit-flag-pos { background: var(--focus-warning-soft, rgba(255, 216, 77, .15)); color: var(--focus-warning-text, #ffd84d); border: 1px solid rgba(255, 216, 77, .45); }
.profit-flag-fund { background: var(--focus-accent-soft); color: var(--focus-sky); border: 1px solid rgba(91, 159, 255, .45); }
.profit-flag-group { background: transparent; color: var(--focus-lilac); border: 1px solid rgba(182, 156, 255, .5); }
.profit-section { margin-top: 1.25rem; margin-bottom: .75rem; }
.profit-bases .form-check { margin-bottom: 0; }
.profit-preview-table td, .profit-preview-table th { font-size: 0.9rem; }
.profit-preview-changed td { background: var(--focus-accent-soft); }
.profit-preview-focus td:first-child { font-weight: 700; color: var(--focus-sky); }
.profit-planned-item:first-of-type { border-top: 0 !important; }
.settings-dated-info, .city-now-hint { line-height: 1.3; }
.metric-steps { display: flex; flex-direction: column; gap: 6px; }
.metric-step { border: 1px solid var(--focus-line); border-radius: 10px; padding: 8px 10px; background: var(--focus-surface-2); }
.metric-step-final { border-color: rgba(61, 220, 132, .6); background: var(--focus-success-soft); }
.metric-step-value { font-weight: 800; font-size: 1.05rem; color: #fff; }
.metric-step-num { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: var(--focus-blue-strong); color: #fff; font-size: 0.72rem; margin-right: 6px; }
.metric-step-subst { color: var(--focus-muted); }
.metric-row-changed td { background: var(--focus-warning-soft); }
.metric-preview-table { max-height: 460px; overflow-y: auto; }
.metric-scope { display: contents; }
.metric-explainable { cursor: pointer; text-decoration: underline dotted var(--focus-sky); text-underline-offset: 4px; }
.metric-explainable:hover, .metric-explainable:focus { outline: none; background: var(--focus-accent-soft); border-radius: 4px; }
.metric-explain-modal { background: var(--focus-surface-2); }
.metric-schema-wrap { position: relative; overflow: auto; }
.metric-schema-lines { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; }
.metric-schema { position: relative; z-index: 1; display: flex; gap: 56px; align-items: flex-start; min-width: min-content; padding: 4px; }
.metric-schema-col { display: flex; flex-direction: column; gap: 10px; width: 230px; flex-shrink: 0; }
.metric-schema-col-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--focus-muted); font-weight: 800; }
.metric-node { text-align: left; border-radius: 12px; padding: 8px 10px; border: 1px solid var(--focus-line-strong); background: var(--focus-surface-2); color: inherit; transition: opacity .2s, box-shadow .2s, border-color .2s; }
.metric-node-title { display: block; font-weight: 700; font-size: 0.9rem; color: #fff; }
.metric-node-src { display: block; font-size: 0.74rem; color: var(--focus-muted); margin-top: 2px; }
.metric-node-formula { border-left: 3px solid var(--focus-sky); }
.metric-node-data { border-left: 3px solid var(--focus-warning-text); }
.metric-node-setting { border-left: 3px solid var(--focus-lilac); }
.metric-node-manual { border-left: 3px solid var(--focus-danger-text); }
.metric-node-builtin { border-left: 3px solid var(--focus-muted); }
.metric-node.is-selected { border-color: var(--focus-success-text); box-shadow: 0 0 0 2px rgba(61, 220, 132, .45); }
.metric-node.is-up { border-color: var(--focus-warning-text); box-shadow: 0 0 12px rgba(255, 201, 60, .35); }
.metric-node.is-down { border-color: var(--focus-sky); box-shadow: 0 0 12px rgba(91, 159, 255, .4); }
.metric-node.is-dim { opacity: 0.25; }
.metric-edge { fill: none; stroke: rgba(195, 203, 224, .3); stroke-width: 1.5; }
.metric-edge.is-up { stroke: var(--focus-warning-text); stroke-width: 2.5; }
.metric-edge.is-down { stroke: var(--focus-sky); stroke-width: 2.5; }
.metric-edge.is-dim { stroke: rgba(195, 203, 224, .08); }
.metric-schema-info { position: sticky; top: 0; z-index: 5; }
.metric-chip { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--focus-surface-3); border: 1px solid var(--focus-line); margin: 1px 0; }
.metric-legend { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 4px; border-radius: 2px; }
.metric-legend-up { background: var(--focus-warning-text); }
.metric-legend-down { background: var(--focus-sky); }
@media (max-width: 767.98px) {
    .metric-schema { flex-direction: column; gap: 34px; min-width: 0; }
    .metric-schema-col { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .metric-schema-col-title { width: 100%; }
    .metric-node { width: calc(50% - 4px); padding: 6px 8px; }
    .metric-node-src { display: none; }
    .metric-catalog { position: static; }
    .metric-schema-info { position: static; }
    .metric-catalog-list { max-height: 260px; }
}
/* Ведомость и ручной ввод */
.payroll-status { font-size: 0.75rem; vertical-align: middle; }
.payroll-status-open, .payroll-status-reopened { background: rgba(91, 159, 255, .14); color: var(--focus-link); border: 1px solid rgba(91, 159, 255, .5); }
.payroll-status-closed { background: var(--focus-warning-soft); color: var(--focus-warning-text); border: 1px solid rgba(255, 201, 60, .5); }
.payroll-status-paid { background: var(--focus-success-soft); color: var(--focus-success-text); border: 1px solid rgba(61, 220, 132, .5); }
.payroll-wrap { max-height: 70vh; }
.payroll-table { font-size: 0.86rem; }
.payroll-table thead th { position: sticky; top: 0; z-index: 2; background: #0b1222; color: #fff; font-size: 0.75rem; vertical-align: bottom; white-space: normal; min-width: 90px; }
.payroll-sticky { position: sticky; left: 0; z-index: 1; background: var(--focus-surface); min-width: 170px; }
.payroll-table thead th.payroll-sticky { z-index: 3; background: #0b1222; }
.payroll-city-row td { background: var(--focus-accent-soft); font-weight: 800; color: #fff; }
.payroll-subtotal td { font-weight: 700; border-top: 1px solid var(--focus-line-strong); background: var(--focus-surface-2); }
.payroll-total td { font-weight: 800; border-top: 2px solid var(--focus-sky); background: #0b1222; color: #fff; }
.payroll-legacy-col { color: var(--focus-muted); border-left: 1px dashed var(--focus-line-strong); }
.payroll-row-mismatch td { background: var(--focus-warning-soft); }
.payroll-mismatch { color: var(--focus-warning-text); font-weight: 800; }
.manual-head, .manual-row { display: flex; gap: 10px; align-items: center; }
.manual-row { padding: 8px; border-radius: 10px; border: 1px solid var(--focus-line); margin-bottom: 6px; background: var(--focus-surface-2); }
.manual-filled { border-color: rgba(91, 159, 255, .5); background: var(--focus-accent-soft); }
.manual-city { font-weight: 800; color: #fff; margin: 12px 0 6px; }
.manual-name { flex: 0 0 24%; } .manual-sum { flex: 0 0 12%; } .manual-value { flex: 0 0 14%; } .manual-comment { flex: 1 1 auto; } .manual-who { flex: 0 0 16%; }
@media (max-width: 767.98px) {
    .manual-row { flex-wrap: wrap; gap: 6px; }
    .manual-name { flex: 1 1 60%; } .manual-sum { flex: 1 1 35%; text-align: right; } .manual-value { flex: 0 0 34%; } .manual-comment { flex: 1 1 60%; } .manual-who { flex: 1 1 100%; }
    .payroll-sticky { min-width: 120px; max-width: 140px; }
}
/* Журнал изменений */
.audit-row { display: flex; gap: 14px; align-items: flex-start; padding: 10px 8px; border-bottom: 1px solid var(--focus-line); }
.audit-head { border-bottom: 1px solid rgba(91, 159, 255, .5); color: #fff; }
.audit-when { flex: 0 0 150px; } .audit-what { flex: 0 0 30%; } .audit-old, .audit-new { flex: 1 1 0; word-break: break-word; } .audit-act { flex: 0 0 120px; }
.audit-section { font-size: 0.68rem; font-weight: 700; margin-bottom: 2px; }
.audit-section-settings { background: rgba(182, 156, 255, .14); color: var(--focus-lilac); border: 1px solid rgba(182, 156, 255, .5); }
.audit-section-metrics { background: rgba(91, 159, 255, .14); color: var(--focus-link); border: 1px solid rgba(91, 159, 255, .5); }
@media (max-width: 991.98px) {
    .audit-row { flex-wrap: wrap; gap: 4px 12px; border: 1px solid var(--focus-line); border-radius: 12px; margin-bottom: 8px; background: var(--focus-surface); }
    .audit-when { flex: 1 1 100%; display: flex; gap: 8px; } .audit-what { flex: 1 1 100%; } .audit-old, .audit-new { flex: 1 1 100%; } .audit-act { flex: 1 1 100%; }
}

/* ==========================================
   НЕОН (ветка feature/design-neon): узкая панель меню, нижний док на телефоне, стекло,
   плитки с иконками, таблицы-«карточки», полосы прогресса, лёгкие анимации.
   Анимации только transform/opacity и только при html.motion (ставит inline-скрипт в <head>:
   нет prefers-reduced-motion и устройство не слабое). Без класса всё показывается сразу.
   Слои (z-index): док 1030 < затемнение меню 1040 < открытое меню 1045 < Fancybox 1050 / окно Bootstrap 1055 < тосты 9999.
   ========================================== */

/* Фон страницы: статичная мягкая сине-сиреневая подсветка в углах (без анимации) */
body { background: radial-gradient(55% 45% at 0% 0%, rgba(10, 108, 255, .11), transparent 62%), radial-gradient(50% 45% at 100% 100%, rgba(109, 74, 232, .11), transparent 62%), var(--focus-bg); }
.main-content { background-color: transparent; }

/* --- Узкая панель меню (ПК и планшет) --- */
.sidebar { width: 96px; flex-shrink: 0; padding: 0 8px 12px; border-right: 1px solid var(--focus-glass-line); overflow-y: auto; overflow-x: hidden; background: rgba(5, 8, 17, .86); z-index: 1050; display: flex; flex-direction: column; scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }
.sidebar-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px 12px; margin: 0 -8px 8px; position: relative; text-align: center; }
.sidebar-brand::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px; background: var(--focus-grad); opacity: .8; }
.sidebar-brand img { width: 44px; height: auto; filter: drop-shadow(0 0 10px rgba(var(--focus-blue-rgb), .4)); }
.sidebar-brand-text { font-family: var(--focus-font-display); font-weight: 900; font-size: .55rem; letter-spacing: .14em; color: #fff; line-height: 1.2; }

.sidebar-quick { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px; padding: 0 !important; }
/* Пункт панели: иконка сверху, подпись мелким капсом */
.sidebar-quick > a, .nav-pills .nav-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 100%; min-height: 62px; padding: 9px 3px; margin: 0 0 2px; border-radius: 16px; border: 1px solid transparent;
    background: transparent; box-shadow: none; color: var(--focus-text-2) !important;
    font-family: var(--focus-font-body); font-size: .58rem; font-weight: 800; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; text-align: center;
    position: relative; transition: background-color .2s ease, color .2s ease, box-shadow .25s ease;
}
.sidebar ul.nav { flex-wrap: nowrap; min-width: 0; }
.sidebar ul.nav > li { min-width: 0; width: 100%; }
.sidebar-quick > a, .nav-pills .nav-link { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.sidebar-quick > a i, .nav-link i { margin: 0; font-size: 1.35rem; line-height: 1; width: auto; color: var(--focus-accent); transition: color .2s, transform .2s; }
.sidebar-quick > .btn-neon-community i { color: var(--focus-danger-text); }
.sidebar-quick > .btn-outline-warning i { color: var(--focus-warning-text); }
.sidebar-quick > a:hover, .nav-pills .nav-link:hover { background: rgba(255, 255, 255, .05); color: #fff !important; transform: none; box-shadow: none; }
.sidebar-quick > a:focus-visible, .nav-pills .nav-link:focus-visible { outline: 0; box-shadow: var(--focus-focus-ring); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff !important; background: var(--focus-grad-soft); border-color: rgba(160, 139, 255, .4);
    box-shadow: var(--focus-glass-hi), 0 0 18px rgba(109, 74, 232, .28);
}
.nav-pills .nav-link.active::before { content: ''; position: absolute; left: -8px; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--focus-grad); box-shadow: 0 0 10px rgba(109, 74, 232, .8); }
.nav-pills .nav-link.active i { color: #fff; }
html.motion .nav-pills .nav-link:hover i, html.motion .sidebar-quick > a:hover i { transform: translateY(-1px) scale(1.06); }
/* Названия разделов — тонкие разделители (текст остаётся в разметке) */
.nav-category { font-size: 0; line-height: 0; height: 1px; margin: 8px 14px; background: var(--focus-glass-line); }
.sidebar-user { margin-top: 10px; padding: 8px 4px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--focus-glass-line); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .55rem; font-weight: 800; color: var(--focus-text-2); text-align: center; }
.sidebar-user > i { font-size: 1.2rem !important; }
.sidebar-user .name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .03em; }
.sidebar-user a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .04); border: 1px solid var(--focus-glass-line); text-decoration: none; font-size: 1rem; transition: box-shadow .2s, border-color .2s; }
.sidebar-user a:hover { border-color: var(--focus-violet-text); box-shadow: 0 0 14px rgba(109, 74, 232, .35); }
.sidebar-user .logout { color: var(--focus-danger-text); }
.sidebar-user .key { color: var(--focus-link); }
.dock-more { display: none; }
.main-wrapper { width: calc(100% - 96px); }

/* --- Заголовок страницы и приветствие --- */
.page-head h3 { letter-spacing: .08em; }
.page-head::before { opacity: .7; }
.page-greeting { width: 100%; order: -1; margin-bottom: -4px; font-family: var(--focus-font-display); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--focus-violet-text); }
.page-greeting i { margin-right: 6px; }

/* --- Стекло: карточки, плитки, профиль --- */
.card, .neon-stat-box, .wall-card, .neon-profile-header, .metric-card {
    background-color: var(--focus-glass); border: 1px solid var(--focus-glass-line); border-radius: var(--focus-r-card);
    box-shadow: var(--focus-glass-hi), 0 14px 34px rgba(0, 0, 0, .32);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card.shadow-sm { box-shadow: var(--focus-glass-hi), 0 14px 34px rgba(0, 0, 0, .32) !important; }
.card:not([class*="bg-"]):hover, .neon-stat-box:hover, .wall-card:hover { border-color: rgba(160, 139, 255, .3); box-shadow: var(--focus-glass-hi), var(--focus-glow-neon); }
/* Небольшие карточки слегка поднимаются при наведении */
html.motion .stat-tile:hover, html.motion .neon-stat-box:hover, html.motion .wall-card:hover, html.motion .shop-card:hover, html.motion .card[class*="kpi-zone"]:hover { transform: translateY(-3px); }
.neon-profile-header { background-color: var(--focus-glass); }
.neon-profile-header::before { height: 10px; box-shadow: none; }
.neon-avatar { background: var(--focus-grad); box-shadow: 0 0 24px rgba(109, 74, 232, .35); }
.stat-chip { background: rgba(255, 255, 255, .035); border: 1px solid var(--focus-glass-line); border-radius: 14px !important; }

/* --- Плитки итогов: крупное число, иконка в светящемся круге, подпись капсом --- */
.stat-tile { background: var(--focus-glass) !important; border: 1px solid var(--focus-glass-line) !important; border-radius: var(--focus-r-card); padding: 18px !important; box-shadow: var(--focus-glass-hi), 0 0 0 1px rgba(var(--tile-rgb, 91, 159, 255), .12), 0 12px 30px rgba(0, 0, 0, .3) !important; }
.stat-tile::before { content: var(--tile-icon, "\F246"); font-family: 'bootstrap-icons'; position: absolute; top: 14px; right: 14px; left: auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.05rem; color: var(--tile-color); background: rgba(var(--tile-rgb, 91, 159, 255), .12); box-shadow: 0 0 16px rgba(var(--tile-rgb, 91, 159, 255), .3); }
.stat-tile h6 { padding-right: 44px; letter-spacing: .1em; }
.stat-tile h4 { font-size: 1.5rem; margin-top: 10px; }
.stat-tile-primary { --tile-color: var(--focus-sky); --tile-rgb: 91, 159, 255; --tile-icon: "\F246"; }
.stat-tile-danger { --tile-color: #ff5a6e; --tile-rgb: 255, 90, 110; --tile-icon: "\F615"; }
.stat-tile-warning { --tile-color: var(--focus-warning-text); --tile-rgb: 255, 201, 60; --tile-icon: "\F4D3"; }
.stat-tile-info { --tile-color: var(--focus-mint); --tile-rgb: 94, 242, 200; --tile-icon: "\F64A"; }
.stat-tile-success { --tile-color: var(--focus-violet-text); --tile-rgb: 160, 139, 255; --tile-icon: "\F673"; background: linear-gradient(160deg, rgba(10, 108, 255, .16), rgba(109, 74, 232, .2)), var(--focus-glass) !important; border-color: rgba(160, 139, 255, .35) !important; }
.stat-tile-success::before { display: flex; }
.stat-hero { background: var(--focus-grad) !important; border: 1px solid rgba(160, 139, 255, .45) !important; border-radius: var(--focus-r-card); box-shadow: 0 0 30px rgba(109, 74, 232, .3) !important; }
.stat-hero h5 { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; font-weight: 800; }

/* Стрелки у значений со знаком (класс ставит static/js/motion.js по знаку числа в тексте) */
.trend-up::before, .trend-down::before { font-family: 'bootstrap-icons'; font-size: .85em; margin-right: .3em; display: inline-block; vertical-align: -.08em; }
.trend-up::before { content: "\F144"; }
.trend-down::before { content: "\F123"; }
.badge.trend-up::before, .badge.trend-down::before { font-size: .9em; }
td.trend-up, span.trend-up:not(.badge), b.trend-up { color: var(--focus-success-text); }
td.trend-down, span.trend-down:not(.badge), b.trend-down { color: var(--focus-danger-text); }

/* --- Таблицы «карточками» (строки — скруглённые полосы) --- */
.main-content .table:not(.payroll-table):not(.table-sm) { border-collapse: separate; border-spacing: 0 6px; margin-top: -6px; }
.main-content .table:not(.payroll-table):not(.table-sm) > :not(caption) > * > * { border-bottom-width: 0; }
.main-content .table:not(.payroll-table):not(.table-sm) > tbody > tr > * { --bs-table-bg: rgba(255, 255, 255, .035); }
.main-content .table:not(.payroll-table):not(.table-sm) > tbody > tr > *:first-child { border-radius: 14px 0 0 14px; }
.main-content .table:not(.payroll-table):not(.table-sm) > tbody > tr > *:last-child { border-radius: 0 14px 14px 0; }
.main-content .table:not(.payroll-table):not(.table-sm) > tbody > tr > *:only-child { border-radius: 14px; }
.main-content .table > thead > tr > th, .table-custom th { background-color: transparent !important; --bs-table-bg: transparent; color: var(--focus-muted); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--focus-glass-line) !important; }
.table-custom th[class*="text-"], .table > thead th[class*="text-"], .table-custom th[class*="col-share"] { color: inherit; }
.table-custom .table { padding: 0 10px 4px; }
.main-content .table > tbody > tr.table-dark > * { --bs-table-bg: rgba(10, 95, 224, .2); color: #fff; border-top: 0; box-shadow: inset 0 1px 0 rgba(160, 139, 255, .35); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(91, 159, 255, .09); color: #fff; }
.main-content .table > tbody > tr > * { transition: background-color .15s; }

/* --- Полосы прогресса (реальные данные: сбор/план, баланс/цена) --- */
.focus-progress { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.focus-progress > span { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--focus-blue), var(--focus-violet-text)); box-shadow: 0 0 10px rgba(109, 74, 232, .55); transform-origin: left center; }
.focus-progress.is-full > span { background: linear-gradient(90deg, #2fc472, var(--focus-success-text)); box-shadow: 0 0 10px rgba(61, 220, 132, .5); }
.progress { --bs-progress-bg: rgba(255, 255, 255, .08); --bs-progress-height: 8px; }
.progress-bar { background-image: linear-gradient(90deg, var(--focus-blue), var(--focus-violet-text)); transform-origin: left center; }

/* --- Монета и значки --- */
.coin-badge { border-radius: 999px; }
.achievement { background: linear-gradient(#141c35, #141c35) padding-box, var(--focus-holo) border-box; }

/* --- Вход и витрины --- */
.main-content.is-login::before { content: ''; position: absolute; inset: 0; background: radial-gradient(42% 36% at 78% 22%, rgba(109, 74, 232, .2), transparent 70%), radial-gradient(40% 34% at 18% 78%, rgba(10, 108, 255, .16), transparent 70%); pointer-events: none; }
.login-card { background: linear-gradient(#121a31, #121a31) padding-box, linear-gradient(135deg, rgba(91, 159, 255, .6), rgba(160, 139, 255, .6), rgba(255, 143, 199, .4)) border-box; box-shadow: var(--focus-glass-hi), 0 30px 70px rgba(0, 0, 0, .55), 0 0 40px rgba(109, 74, 232, .18); }
.shop-card { border-radius: var(--focus-r-card) !important; }

/* --- Анимации (только при html.motion) --- */
@keyframes focusReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes focusGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes focusSheetIn { from { opacity: .4; transform: translateY(40px); } to { opacity: 1; transform: none; } }
html.motion .reveal { animation: focusReveal .38s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 50ms); }
html.motion .grow > span, html.motion .grow.progress-bar { animation: focusGrowX .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .25s; }
/* Набегание числа: настоящий текст остаётся в DOM (прозрачный), бегущее значение — псевдоэлемент из data-countup */
.is-counting { position: relative; color: transparent !important; -webkit-text-fill-color: transparent; }
.is-counting::after { content: attr(data-countup); position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--cu-color, #fff); -webkit-text-fill-color: var(--cu-color, #fff); }

/* --- Телефон: нижний док и меню-шторка --- */
@media (max-width: 768px) {
    .main-wrapper { width: 100%; }
    .sidebar { position: fixed; top: 0; left: -300px; width: 282px; height: 100%; transition: left .25s ease; z-index: 1045; }
    .sidebar.show { left: 0; }
    .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(2, 4, 10, .72); z-index: 1040; }
    .sidebar-overlay.show { display: block; }

    /* Док (включает static/js/motion.js: класс dock-ready и пункты is-dock) */
    .sidebar.dock-ready:not(.show) {
        top: auto; left: 0; right: 0; bottom: 0; width: auto; height: auto; overflow: visible; z-index: 1030;
        flex-direction: row; align-items: stretch; justify-content: space-around; gap: 2px;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        background: rgba(7, 10, 22, .96); border-right: 0; border-top: 1px solid var(--focus-glass-line);
        box-shadow: 0 -12px 30px rgba(0, 0, 0, .45); transition: none;
    }
    .sidebar.dock-ready:not(.show)::before { content: ''; position: absolute; top: -1px; left: 18%; right: 18%; height: 1px; background: var(--focus-grad); box-shadow: 0 0 10px rgba(109, 74, 232, .7); }
    .sidebar.dock-ready:not(.show) > .sidebar-brand, .sidebar.dock-ready:not(.show) > .sidebar-user, .sidebar.dock-ready:not(.show) .nav-category { display: none; }
    .sidebar.dock-ready:not(.show) > .sidebar-quick, .sidebar.dock-ready:not(.show) > ul.nav, .sidebar.dock-ready:not(.show) li.has-dock { display: contents; }
    .sidebar.dock-ready:not(.show) li:not(.has-dock), .sidebar.dock-ready:not(.show) .sidebar-quick > a:not(.is-dock) { display: none; }
    .sidebar.dock-ready:not(.show) .is-dock, .sidebar.dock-ready:not(.show) .dock-more { flex: 1 1 0; min-width: 0; min-height: 56px; margin: 0; padding: 6px 2px; font-size: .52rem; gap: 4px; border-radius: 14px; }
    .sidebar.dock-ready:not(.show) .is-dock i, .sidebar.dock-ready:not(.show) .dock-more i { font-size: 1.3rem; }
    .sidebar.dock-ready:not(.show) .nav-link.active::before { left: 25%; right: 25%; top: -7px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
    .sidebar.dock-ready .dock-more {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; order: 99;
        border: 1px solid transparent; background: transparent; color: var(--focus-text-2);
        font-family: var(--focus-font-body); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1.2;
    }
    .sidebar.dock-ready .dock-more i { color: var(--focus-accent); }
    .sidebar.dock-ready .dock-more:focus-visible { outline: 0; box-shadow: var(--focus-focus-ring); }
    .sidebar.dock-ready.show .dock-more { display: none; }

    /* Открытое меню — шторка снизу с плиткой пунктов */
    .sidebar.dock-ready.show {
        top: auto; left: 0; right: 0; bottom: 0; width: auto; height: auto; max-height: 84vh; overflow-y: auto; z-index: 1045;
        padding: 18px 12px calc(14px + env(safe-area-inset-bottom, 0px)); border-right: 0; border-top: 1px solid rgba(160, 139, 255, .35);
        border-radius: 24px 24px 0 0; background: #0b1124; box-shadow: 0 -20px 50px rgba(0, 0, 0, .6), 0 0 40px rgba(109, 74, 232, .15);
    }
    html.motion .sidebar.dock-ready.show { animation: focusSheetIn .25s cubic-bezier(.2, .7, .2, 1) both; }
    .sidebar.dock-ready.show::before { content: ''; position: absolute; top: 7px; left: 50%; width: 42px; height: 4px; margin-left: -21px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
    .sidebar.dock-ready.show > .sidebar-brand { flex-direction: row; justify-content: center; padding: 4px 0 10px; }
    .sidebar.dock-ready.show > .sidebar-brand::after { left: 25%; right: 25%; }
    .sidebar.dock-ready.show > .sidebar-brand .sidebar-brand-text { font-size: .8rem; }
    .sidebar.dock-ready.show > .sidebar-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .sidebar.dock-ready.show > ul.nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .sidebar.dock-ready.show .nav-category { grid-column: 1 / -1; height: auto; font-size: .6rem; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--focus-muted); background: none; margin: 10px 4px 2px; font-family: var(--focus-font-display); font-weight: 700; }
    .sidebar.dock-ready.show .nav-link.active::before { display: none; }
    .sidebar.dock-ready.show > .sidebar-user { flex-direction: row; justify-content: center; font-size: .75rem; padding: 10px; }

    /* Док не закрывает содержимое: отступ снизу с учётом safe-area */
    .sidebar.dock-ready ~ .main-wrapper .main-content { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
    .stat-tile h4 { font-size: 1.1rem; }
    .stat-tile::before { width: 30px; height: 30px; font-size: .85rem; top: 12px; right: 12px; }
    .stat-tile h6 { padding-right: 34px; }
}

/* Подсказка «сколько до следующей зоны KPI»: кнопка ⓘ рядом с показателем и всплывающий текст (static/js/crm.js) */
.kpi-hint-btn { border: 0; background: transparent; color: inherit; opacity: .7; padding: 0 .3rem; margin-left: .15rem; line-height: 1; font-size: .9em; cursor: pointer; vertical-align: middle; }
.kpi-hint-btn:hover, .kpi-hint-btn:focus-visible { opacity: 1; }
.kpi-hint-btn:focus-visible { outline: 2px solid var(--focus-hint-line); outline-offset: 2px; border-radius: 6px; }
.kpi-hint-tip { position: absolute; z-index: 1070; width: max-content; max-width: min(360px, 90vw); padding: .65rem .8rem; border-radius: 14px; font-family: var(--focus-font-body);
    background: var(--focus-hint-bg); color: var(--focus-hint-text); border: 1px solid var(--focus-hint-line);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45); font-size: .85rem; line-height: 1.4; white-space: pre-line; text-align: left; pointer-events: none;
    transition: none !important; }   /* без переходов: подсказка сразу встаёт у показателя (и при reduced motion) */
.kpi-hint-tip[hidden] { display: none; }
/* Раскладка подсказки (вид из notify_texts.py): заголовок, сетка «Сейчас | Порог зоны | Осталось | Прибавка KPI», строки, итог */
.kpi-hint-tip:not(.kpi-hint-plain) { white-space: normal; }
.kpi-hint-body { white-space: pre-line; }
.kh-dot { display: inline-block; width: .62em; height: .62em; border-radius: 50%; margin-right: .38em; vertical-align: .06em; flex: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .08); }
.kh-dot-green { background: var(--focus-hint-zone-green); }
.kh-dot-yellow { background: var(--focus-hint-zone-yellow); }
.kh-dot-red { background: var(--focus-hint-zone-red); }
.kh-dot-none { background: #98a3c0; }
.kh-head { display: flex; align-items: center; gap: .1rem; font-weight: 700; font-size: .92rem; }
.kh-head .kh-value { margin-left: auto; padding-left: .8rem; font-variant-numeric: tabular-nums; }
.kh-zone { color: var(--focus-hint-muted); font-size: .78rem; margin: .1rem 0 .45rem 1rem; }
.kh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: .1rem .7rem; padding: .45rem 0; border-top: 1px solid var(--focus-hint-sep); }
.kh-label { color: var(--focus-hint-muted); font-size: .7rem; line-height: 1.2; white-space: nowrap; }
.kh-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kh-line { border-top: 1px solid var(--focus-hint-sep); padding-top: .35rem; margin-top: .1rem; }
.kh-line + .kh-line { border-top: 0; padding-top: .1rem; }
.kh-max, .kh-note { font-weight: 600; padding-top: .35rem; }
.kh-head + .kh-zone + .kh-max { border-top: 1px solid var(--focus-hint-sep); }
.kh-rows { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .25rem .55rem; }
.kh-row { display: contents; }
.kh-row .kh-dot { margin-right: 0; }
.kh-row .kh-title { font-weight: 600; }
.kh-left, .kh-gain { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kh-left .kh-dot { margin-left: .2em; margin-right: .25em; }
.kh-gain { font-weight: 700; text-align: right; }
.kh-bonus { grid-column: 2 / -1; color: var(--focus-hint-muted); font-size: .74rem; margin-top: -.15rem; }
.kh-total { display: flex; justify-content: space-between; gap: .8rem; margin-top: .5rem; padding: .35rem .55rem; border-radius: 10px;
    background: var(--focus-hint-total-bg); font-weight: 700; }
.kh-total-value { color: var(--focus-hint-accent); font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .kh-grid { grid-template-columns: repeat(2, minmax(0, auto)); } }
.kpi-zone-hint .kh-zone, .kpi-zone-hint .kh-label, .kpi-zone-hint .kh-bonus { color: inherit; opacity: .85; }

/* Магазин: предпросмотр кадра 16:9 (этап 5Б, static/js/shop.js) */
.shop-crop-frame { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 12px; border: 1px solid var(--focus-line); background: rgba(0, 0, 0, .25); touch-action: none; user-select: none; }
.shop-crop-frame.is-draggable { cursor: grab; }
.shop-crop-frame.is-dragging { cursor: grabbing; }
.shop-crop-img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.shop-edit-current { width: 160px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--focus-line); }

/* Рейтинг и зал славы (этап 6А): цвета — токены theme.css */
.rating-tabs { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.rating-tab { flex: none; padding: .4rem .8rem; border-radius: var(--focus-r-pill); border: 1px solid var(--focus-glass-line); color: var(--focus-text-2); text-decoration: none; font-size: .875rem; white-space: nowrap; }
.rating-tab:hover { color: var(--focus-text); border-color: var(--focus-line-strong); }
.rating-tab.active { background: var(--focus-grad); color: #fff; border-color: transparent; }
.rating-card { border-radius: var(--focus-r-card) !important; }
.rating-me { padding: .6rem .8rem; border-radius: var(--focus-r); background: var(--focus-hint-total-bg); border: 1px solid var(--focus-hint-line); }
.rating-list { counter-reset: none; }
.rating-row, .hall-list li { display: flex; align-items: center; gap: .6rem; padding: .5rem .25rem; border-bottom: 1px solid var(--focus-line); min-width: 0; }
.rating-row:last-child, .hall-list li:last-child { border-bottom: 0; }
.rating-row-me { background: var(--focus-accent-soft); border-radius: var(--focus-r-sm); }
.rating-gap { text-align: center; color: var(--focus-muted); padding: .1rem 0; }
.rating-place { flex: none; width: 2.2rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.rating-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rating-city { display: block; font-size: .75rem; color: var(--focus-muted); }
.rating-value { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rating-top-1 .rating-value { color: var(--focus-coin); }
.hall-card { border-radius: var(--focus-r-card) !important; }
.rating-tab-sm { padding: .3rem .7rem; font-size: .8125rem; }
.rating-tab-scope.active { background: var(--focus-coin); color: var(--focus-ink); }
/* Уровни и звания (этап 6Б): рамка аватара по уровню (только CSS, без анимаций), значок звания. Цвета — токены theme.css */
.lvl-ring { border-radius: 50%; padding: 4px; border: 0; }
.lvl-ring.lvl-1 { background: var(--focus-lvl-1); box-shadow: none; }
.lvl-ring.lvl-2 { background: var(--focus-lvl-2); box-shadow: none; }
.lvl-ring.lvl-3 { background: var(--focus-lvl-3); box-shadow: none; }
.lvl-ring.lvl-4 { background: var(--focus-lvl-4); box-shadow: var(--focus-lvl-4-glow); }
.lvl-ring.lvl-5 { background: var(--focus-lvl-5); box-shadow: var(--focus-lvl-5-glow); padding: 5px; }
.lvl-ring.lvl-6 { background: var(--focus-lvl-6); box-shadow: var(--focus-lvl-6-glow); padding: 5px; }
.lvl-ring.lvl-7 { background: var(--focus-lvl-7); box-shadow: var(--focus-lvl-7-glow); padding: 6px; }
.lvl-ring.lvl-8 { background: var(--focus-lvl-8); box-shadow: var(--focus-lvl-8-glow); padding: 6px; }
.lvl-ring.lvl-sm { padding: 3px !important; }
.lvl-chip { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .15rem .6rem; border-radius: var(--focus-r-pill); background: var(--focus-lvl-chip-bg); border: 1px solid var(--focus-glass-line); font-size: .78rem; font-weight: 700; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.lvl-chip-n { font-variant-numeric: tabular-nums; opacity: .9; }
.lvl-chip.lvl-1 { color: var(--focus-lvl-1-text); }
.lvl-chip.lvl-2 { color: var(--focus-lvl-2-text); border-color: rgba(159, 183, 214, .5); }
.lvl-chip.lvl-3 { color: var(--focus-lvl-3-text); border-color: rgba(91, 159, 255, .55); }
.lvl-chip.lvl-4 { color: var(--focus-lvl-4-text); border-color: rgba(61, 220, 132, .55); }
.lvl-chip.lvl-5 { color: var(--focus-lvl-5-text); border-color: rgba(160, 139, 255, .6); }
.lvl-chip.lvl-6 { color: var(--focus-lvl-6-text); border-color: rgba(255, 211, 106, .6); }
.lvl-chip.lvl-7 { color: var(--focus-lvl-7-text); border-color: rgba(255, 90, 200, .6); }
.lvl-chip.lvl-8 { color: var(--focus-lvl-8-text); border-color: rgba(255, 211, 106, .8); box-shadow: 0 0 10px rgba(255, 211, 106, .3); }
.rating-name .lvl-chip { margin-left: .35rem; font-size: .7rem; padding: .05rem .45rem; }
.lvl-progress { height: 10px; border-radius: var(--focus-r-pill); background: rgba(255, 255, 255, .08); overflow: hidden; }
.lvl-progress > div { height: 100%; border-radius: inherit; background: var(--focus-grad); }
.lvl-hist { font-size: .85rem; }
.lvl-hist li { padding: .3rem 0; border-bottom: 1px solid var(--focus-line); }
.lvl-hist li:last-child { border-bottom: 0; }
.lvl-table input[name^="title_"] { min-width: 8rem; }
.lvl-table input[name^="threshold_"] { width: 6rem; min-width: 5rem; }
.lvl-dist-bar { height: 8px; border-radius: var(--focus-r-pill); background: var(--focus-grad); min-width: 2px; }
.lvl-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.lvl-frames img { width: 64px; height: 64px; object-fit: cover; }
@media (max-width: 576px) {
    .lvl-table th:nth-child(4), .lvl-table td:nth-child(4) { display: none; }
    .lvl-table th, .lvl-table td { padding-left: .2rem; padding-right: .2rem; }
    .lvl-table input[name^="title_"] { min-width: 7.5rem; }
    .lvl-table input[name^="threshold_"] { width: 5.2rem; min-width: 4.6rem; }
}
.rating-ava { flex: none; width: 34px; height: 34px; object-fit: cover; }
/* Личное портфолио сотрудника (этап 6В): сетка квадратных превью, статус кадра виден только владельцу и админам */
.pf-add > summary { list-style: none; display: inline-block; }
.pf-add > summary::-webkit-details-marker { display: none; }
.pf-form { max-width: 520px; background: var(--focus-surface); border: 1px solid var(--focus-line); border-radius: 16px; padding: 1rem; }
.pf-card { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--focus-surface); border: 1px solid var(--focus-line); border-radius: 16px; overflow: hidden; }
.pf-thumb-wrap { display: block; aspect-ratio: 1 / 1; background: var(--focus-surface-2); overflow: hidden; }
.pf-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-badges { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; gap: 4px; flex-wrap: wrap; pointer-events: none; }
.pf-status { display: inline-block; padding: .1rem .5rem; border-radius: var(--focus-r-pill); font-size: .72rem; font-weight: 700; background: rgba(8, 12, 24, .88); color: #fff; border: 1px solid var(--focus-line-strong); }
.pf-status-pending { color: var(--focus-warning-text); border-color: rgba(255, 201, 60, .55); }
.pf-status-approved { color: var(--focus-success-text); border-color: rgba(61, 220, 132, .55); }
.pf-status-rejected { color: var(--focus-danger-text); border-color: rgba(255, 90, 110, .6); }
.pf-status-hidden { color: #c3cbe0; }
.pf-caption { font-size: .82rem; color: var(--focus-text-2, #c3cbe0); padding: .45rem .6rem 0; overflow-wrap: anywhere; }
.pf-reason { font-size: .78rem; color: var(--focus-danger-text); background: var(--focus-danger-soft); margin: .4rem .5rem 0; padding: .3rem .5rem; border-radius: 10px; overflow-wrap: anywhere; }
.pf-actions { display: flex; flex-wrap: wrap; gap: .35rem; padding: .45rem .6rem 0; }
.pf-edit { padding: .35rem .6rem 0; font-size: .82rem; }
.pf-edit > summary { cursor: pointer; color: var(--focus-link); }
.pf-card > :last-child { padding-bottom: .55rem; }
.pf-rejected .pf-thumb, .pf-pending .pf-thumb { opacity: .8; }
.pfr-card { background: var(--focus-surface); border: 1px solid var(--focus-line); border-radius: 16px; padding: .75rem; height: 100%; display: flex; gap: .75rem; }
.pfr-card .pf-thumb-wrap { flex: none; width: 120px; height: 120px; border-radius: 12px; }
.pfr-body { min-width: 0; flex: 1; }
.pfr-body .pf-caption { padding: 0; }
@media (max-width: 576px) {
    .pfr-card { flex-wrap: wrap; }
    .pfr-card .pf-thumb-wrap { width: 96px; height: 96px; }
    .pfr-body { flex-basis: calc(100% - 96px - .75rem); }
    .pfr-body form.flex-grow-1 { flex-basis: 100%; }
}

/* Дата запуска новой системы (profit.launch_date): неделя до запуска — серая строка, в итоги месяца не входит */
.week-pre-launch > td { filter: grayscale(1); }
.week-pre-launch-note, .launch-note { color: var(--focus-text-2); }