/* Контейнер всех карточек — гибкая сетка на CSS Grid */
        .custom-grafik-container {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 1rem;
          padding: 1rem;
          background-color: #f5f5f5;      /* фон контейнера */
          border-radius: 8px;             /* скруглённые углы */
          box-sizing: border-box;
        }
        
        /* Карточка */
        .grafik-card {
          position: relative;
          background-color: var(--surface);
          border: 1px solid var(--border);
          border-radius: 12px;
          padding: 1rem;
          box-shadow: 0 1px 3px rgba(20, 60, 100, 0.04);
          transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
          display: flex;
          flex-direction: column;
          height: 100%;
        }
        .grafik-card:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(44, 182, 125, 0.10);
          border-color: rgba(44, 182, 125, 0.30);
        }

        .grafik-card__header {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          margin-bottom: 0.75rem;
        }
        /* Лейбл «Поверка» в строке мета — становится цветным при особом статусе. */
        .grafik-card__pov-label {
          font-weight: 600;
        }
        .grafik-card__pov-label--ok         { font-weight: inherit; color: var(--text-muted); }
        .grafik-card__pov-label--expired    { color: #c62828; }
        .grafik-card__pov-label--this-month { color: #b06f00; }
        .grafik-card__pov-label--soon       { color: #d97a3a; }

        /* === Уведомление «Скоро истекает срок поверки» на главной === */
        .pov-notice {
          background: #fff;
          border: 1px solid rgba(217, 122, 58, 0.30);
          border-left: 4px solid #d97a3a;
          border-radius: 12px;
          padding: 14px 16px;
          margin: 12px 0;
          box-shadow: 0 1px 3px rgba(20, 60, 100, 0.04);
        }
        .pov-notice__head {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          margin-bottom: 10px;
        }
        .pov-notice__icon {
          flex-shrink: 0;
          width: 36px;
          height: 36px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #fef0e6;
          color: #d97a3a;
          font-size: 1rem;
        }
        .pov-notice__head-text { flex: 1; min-width: 0; }
        .pov-notice__title {
          font-weight: 600;
          color: #1f3540;
          font-size: 0.98rem;
          line-height: 1.25;
        }
        .pov-notice__sub {
          color: var(--text-muted);
          font-size: 0.82rem;
          line-height: 1.35;
          margin-top: 2px;
        }
        .pov-notice__list {
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 6px;
        }
        .pov-notice__item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 10px;
          padding: 8px 10px;
          background: #fef7f1;
          border-radius: 8px;
        }
        .pov-notice__meter {
          display: flex;
          align-items: center;
          gap: 10px;
          min-width: 0;
        }
        .pov-notice__meter > i {
          color: #d97a3a;
          font-size: 0.95rem;
          flex-shrink: 0;
        }
        .pov-notice__meter-name {
          display: block;
          color: #1f3540;
          font-weight: 500;
          font-size: 0.9rem;
          line-height: 1.2;
          overflow-wrap: anywhere;
        }
        .pov-notice__meter-zav {
          display: block;
          color: var(--text-muted);
          font-size: 0.78rem;
          line-height: 1.2;
          margin-top: 1px;
        }
        .pov-notice__date {
          flex-shrink: 0;
          font-weight: 600;
          color: #b06f00;
          font-size: 0.85rem;
          padding: 3px 9px;
          background: #fff;
          border: 1px solid rgba(217, 122, 58, 0.35);
          border-radius: 999px;
          white-space: nowrap;
        }
        .pov-notice__footer {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 6px;
          margin-top: 12px;
          padding-top: 10px;
          border-top: 1px dashed rgba(217, 122, 58, 0.25);
          color: var(--text-muted);
          font-size: 0.85rem;
        }
        .pov-notice__footer > i {
          color: #d97a3a;
        }
        .pov-notice__phone {
          color: var(--accent-info);
          font-weight: 600;
          text-decoration: none;
        }
        .pov-notice__phone:hover {
          text-decoration: underline;
        }
        .pov-notice__sep {
          color: var(--text-muted);
          opacity: 0.6;
        }
        @media (max-width: 480px) {
          .pov-notice__item {
            gap: 8px;
          }
          .pov-notice__date {
            font-size: 0.78rem;
            padding: 2px 8px;
          }
        }

        /* Акцент строки «Поверка ...»: цветной текст по обе стороны, без заливки. */
        .grafik-card__meta-row--pov-expired .grafik-card__meta-value,
        .grafik-card__meta-row--pov-expired .grafik-card__pov-label    { color: #c62828; }
        .grafik-card__meta-row--pov-this-month .grafik-card__meta-value,
        .grafik-card__meta-row--pov-this-month .grafik-card__pov-label { color: #b06f00; }
        .grafik-card__meta-row--pov-soon .grafik-card__meta-value,
        .grafik-card__meta-row--pov-soon .grafik-card__pov-label       { color: #d97a3a; }
        .grafik-card__meta-row--pov-expired .grafik-card__meta-value,
        .grafik-card__meta-row--pov-this-month .grafik-card__meta-value,
        .grafik-card__meta-row--pov-soon .grafik-card__meta-value {
          font-weight: 600;
        }
        .grafik-card__icon {
          flex-shrink: 0;
          width: 40px;
          height: 40px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.05rem;
          background: #e8f7f0;
          color: var(--accent-info);
        }
        .grafik-card[data-cat="water"]    .grafik-card__icon { background: #e6f1fb; color: #2a7ed1; }
        .grafik-card[data-cat="hot"]      .grafik-card__icon { background: #fdecea; color: #d65160; }
        .grafik-card[data-cat="heat"]     .grafik-card__icon { background: #fef0e6; color: #d97a3a; }
        .grafik-card[data-cat="power"]    .grafik-card__icon { background: #fff7d6; color: #c79c1d; }

        .grafik-card__title {
          font-size: 0.95rem;
          font-weight: 600;
          color: #1f3540;
          line-height: 1.3;
          padding-top: 2px;
          flex: 1;
          min-width: 0;
        }

        .grafik-card__main {
          margin-bottom: 0.75rem;
          padding-bottom: 0.75rem;
          border-bottom: 1px dashed var(--border);
        }
        .grafik-card__main-label {
          display: block;
          font-size: 0.72rem;
          font-weight: 600;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--text-muted);
          margin-bottom: 2px;
        }
        .grafik-card__main-value {
          font-size: 1.6rem;
          font-weight: 700;
          color: #1f3540;
          line-height: 1;
          letter-spacing: -0.01em;
        }
        .grafik-card__main-value-unit {
          font-size: 0.85rem;
          color: var(--text-muted);
          font-weight: 500;
          margin-left: 4px;
        }

        .grafik-card__meta {
          font-size: 0.85rem;
          line-height: 1.5;
          color: var(--text-muted);
          flex: 1;
        }
        .grafik-card__meta-row {
          display: flex;
          justify-content: space-between;
          gap: 8px;
          padding: 2px 0;
        }
        .grafik-card__meta-label {
          color: var(--text-muted);
        }
        .grafik-card__meta-value {
          color: #1f3540;
          font-weight: 500;
          text-align: right;
        }

        .grafik-card__badge {
          position: absolute;
          top: 10px;
          right: 10px;
          max-width: calc(100% - 20px);
          font-size: 0.7rem;
          font-weight: 600;
          padding: 3px 8px;
          border-radius: 999px;
          background: #fef0e6;
          color: #d97a3a;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        /* Поверка истекла — красный бейдж + красная рамка карточки. */
        .grafik-card__badge--expired {
          background: #fdecea;
          color: #c62828;
        }
        .grafik-card--expired {
          border-color: rgba(198, 40, 40, 0.35);
          background: linear-gradient(0deg, rgba(198, 40, 40, 0.04), rgba(198, 40, 40, 0.04)), var(--surface);
        }
        .grafik-card--expired:hover {
          box-shadow: 0 8px 20px rgba(198, 40, 40, 0.10);
          border-color: rgba(198, 40, 40, 0.45);
        }
        /* Поверка в текущем месяце — янтарный бейдж + мягкая янтарная рамка. */
        .grafik-card__badge--this-month {
          background: #fff4d6;
          color: #b06f00;
        }
        .grafik-card--this-month {
          border-color: rgba(217, 122, 58, 0.35);
        }
        .grafik-card--this-month:hover {
          box-shadow: 0 8px 20px rgba(217, 122, 58, 0.10);
          border-color: rgba(217, 122, 58, 0.45);
        }

        /* Старая разметка (на случай, если где-то ещё используется) */
        .grafik-card__body {
          font-size: .95rem;
          color: #333333;
          line-height: 1.4;
          flex: 1;
        }
        
        /* Красивый выпадающий список месяцев (История показаний) */
        .month-dropdown {
          position: relative;
          width: 100%;
          margin-top: 6px;
        }
        
        .md-trigger {
          width: 100%;
          background: #fff;
          border: 1px solid #e0e0e0;
          border-radius: 10px;
          padding: 12px 44px 12px 14px;
          color: #333;
          font-weight: 600;
          text-align: left;
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-shadow: 0 2px 5px rgba(0,0,0,0.06);
          transition: box-shadow .25s, border-color .25s, background .25s;
          cursor: pointer;
        }
        
        .md-trigger:hover {
          box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        
        .md-arrow {
          color: var(--accent-info);
          font-size: 0.9em;
          transition: transform .2s ease;
        }
        
        .month-dropdown.open .md-arrow {
          transform: rotate(180deg);
        }
        
        .md-panel {
          position: absolute;
          top: calc(100% + 6px);
          left: 0;
          right: 0;
          background: #fff;
          border: 1px solid #e0e0e0;
          border-radius: 12px;
          box-shadow: 0 12px 20px rgba(0,0,0,.12);
          padding: 8px;
          z-index: 10000;
          opacity: 0;
          transform: translateY(-8px);
          pointer-events: none;
          transition: opacity .2s, transform .2s;
        }
        
        .month-dropdown.open .md-panel {
          opacity: 1;
          transform: translateY(0);
          pointer-events: auto;
        }
        
        .md-search {
          display: flex;
          align-items: center;
          background: #f5f7ff;
          border-radius: 8px;
          padding: 6px 10px;
          margin-bottom: 6px;
        }
        
        .md-search input {
          width: 100%;
          border: none;
          outline: none;
          background: transparent;
          color: var(--text);
          font-weight: 600;
        }
        
        .md-list {
          max-height: 260px;
          overflow: auto;
          margin: 0;
          padding: 0;
          list-style: none;
        }
        
        .md-option {
          padding: 10px 12px;
          border-radius: 8px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #333;
        }
        
        .md-option:hover,
        .md-option.md-focus {
          background: #f0f4ff;
        }
        
        .md-option.md-selected {
          background: #eaf1ff;
          font-weight: 700;
        }
        
        .md-empty {
          padding: 12px;
          text-align: center;
          color: #888;
        }
        
        /* Скрытие нативного селекта (оставляем в DOM для событий) */
        #history-readings-page select#month-select {
          display: none !important;
        }

        /* ============================================================
           История показаний — аналитический экран по одному счётчику.
           Шрифты унаследованы от проекта (Montserrat 600, 1rem = 16px).
           Размеры выбраны крупнее средних, чтобы экран был «читаемым»
           для бабушек и без увеличения масштаба.
           ============================================================ */

        /* ---- Шапка ---- */
        .hist-toolbar {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 130px auto;
            gap: 12px;
            align-items: end;
            margin-bottom: 16px;
        }
        .hist-toolbar__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
        .hist-toolbar__label {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-muted);
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }
        /* Нативный год-селект — единый стиль с custom-meter дропдауном ниже */
        .hist-toolbar__field .form-control {
            height: 44px;
            padding: 0 14px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            background: #fff;
            color: var(--text);
            font-weight: 600;
            font-size: 0.95rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.06);
            transition: box-shadow .25s, border-color .25s;
        }
        .hist-toolbar__field .form-control:hover {
            box-shadow: 0 4px 10px rgba(0,0,0,0.10);
        }
        .hist-toolbar__csv {
            height: 44px;
            padding: 0 18px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            background: #fff;
            color: var(--text);
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.06);
            transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
        }
        .hist-toolbar__csv:hover:not(:disabled) {
            background: #f3faf6;
            border-color: #cfe9dc;
            color: #2cb67d;
            box-shadow: 0 4px 10px rgba(0,0,0,0.10);
        }
        .hist-toolbar__csv:disabled { opacity: 0.5; cursor: not-allowed; }

        /* ---- Кастомный дропдаун счётчика (по аналогии с .month-dropdown) ---- */
        .hist-meter-dd { position: relative; }
        .hist-meter-dd__trigger {
            width: 100%;
            height: 44px;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 0 44px 0 14px;
            color: var(--text);
            font-weight: 600;
            font-size: 0.95rem;
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 5px rgba(0,0,0,0.06);
            transition: box-shadow .25s, border-color .25s;
            cursor: pointer;
            position: relative;
        }
        .hist-meter-dd__trigger:hover {
            box-shadow: 0 4px 10px rgba(0,0,0,0.10);
        }
        .hist-meter-dd__label {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex: 1;
        }
        .hist-meter-dd__icon {
            width: 28px; height: 28px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            background: #e8f7f0;
            color: var(--accent-info);
            flex-shrink: 0;
        }
        .hist-meter-dd__icon[data-cat="water"] { background: #e6f1fb; color: #2a7ed1; }
        .hist-meter-dd__icon[data-cat="hot"]   { background: #fdecea; color: #d65160; }
        .hist-meter-dd__icon[data-cat="heat"]  { background: #fef0e6; color: #d97a3a; }
        .hist-meter-dd__icon[data-cat="power"] { background: #fff7d6; color: #c79c1d; }
        .hist-meter-dd__text {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .hist-meter-dd__arrow {
            color: var(--accent-info);
            font-size: 0.7rem;
            position: absolute;
            right: 14px;
            top: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transform: translateY(-50%);
            transition: transform .2s ease;
            pointer-events: none;
        }
        .hist-meter-dd.is-open .hist-meter-dd__arrow { transform: translateY(-50%) rotate(180deg); }

        .hist-meter-dd__panel {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            box-shadow: 0 12px 24px rgba(0,0,0,.14);
            padding: 6px;
            z-index: 1000;
            opacity: 0;
            transform: translateY(-8px);
            pointer-events: none;
            transition: opacity .2s, transform .2s;
            max-height: 320px;
            overflow-y: auto;
        }
        .hist-meter-dd.is-open .hist-meter-dd__panel {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .hist-meter-dd__option {
            padding: 10px 12px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text);
            font-weight: 600;
            font-size: 0.9rem;
        }
        .hist-meter-dd__option:hover,
        .hist-meter-dd__option.is-focus { background: #f0f4ff; }
        .hist-meter-dd__option.is-selected {
            background: #eaf1ff;
            font-weight: 700;
        }
        .hist-meter-dd__option-zav {
            color: var(--text-muted);
            font-weight: 500;
            font-size: 0.82rem;
            margin-left: auto;
            flex-shrink: 0;
        }

        /* ---- Сводная карточка: иконка + название + 4 KPI ----
           Размеры/жирность синхронизированы с .grafik-card («Приборы учёта»):
           заголовок 0.95rem/600, KPI-лейбл 0.72rem/600 uppercase, значение
           1.6rem/700, единица 0.85rem/500, мета 0.85rem. ---------------- */
        .hist-summary {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 1px 3px rgba(20, 60, 100, 0.04);
            animation: histFadeIn 0.28s ease both;
        }
        .hist-summary__head {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding-bottom: 0.75rem;
            border-bottom: 1px dashed var(--border);
            margin-bottom: 0.75rem;
        }
        .hist-summary__icon {
            flex-shrink: 0;
            width: 40px; height: 40px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.05rem;
            background: #e8f7f0;
            color: var(--accent-info);
        }
        .hist-summary[data-cat="water"] .hist-summary__icon { background: #e6f1fb; color: #2a7ed1; }
        .hist-summary[data-cat="hot"]   .hist-summary__icon { background: #fdecea; color: #d65160; }
        .hist-summary[data-cat="heat"]  .hist-summary__icon { background: #fef0e6; color: #d97a3a; }
        .hist-summary[data-cat="power"] .hist-summary__icon { background: #fff7d6; color: #c79c1d; }

        .hist-summary__titles { min-width: 0; flex: 1; padding-top: 2px; }
        .hist-summary__title  { font-size: 0.95rem; font-weight: 600; color: #1f3540; line-height: 1.3; }
        .hist-summary__sub    { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }

        .hist-summary__kpis {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
        }
        .hist-kpi {
            display: flex; flex-direction: column;
            padding: 0.75rem;
            background: #fafcfd;
            border: 1px solid var(--border);
            border-radius: 10px;
            min-width: 0;
            transition: transform .18s ease, box-shadow .18s ease;
        }
        .hist-kpi:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20, 60, 100, 0.06); }
        .hist-kpi__label {
            display: block;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--text-muted);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .hist-kpi__value {
            font-size: 1.6rem;
            font-weight: 700;
            color: #1f3540;
            line-height: 1;
            letter-spacing: -0.01em;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .hist-kpi__unit {
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text-muted);
            margin-left: 4px;
        }
        .hist-kpi--accent {
            background: linear-gradient(0deg, rgba(44, 182, 125, 0.08), rgba(44, 182, 125, 0.08)), #fff;
            border-color: rgba(44, 182, 125, 0.32);
        }
        .hist-kpi--accent .hist-kpi__value { color: #1a7a3e; }

        /* ---- График ---- */
        .hist-chart-wrap {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 16px 18px 10px;
            margin-bottom: 14px;
            box-shadow: 0 1px 3px rgba(20, 60, 100, 0.04);
            animation: histFadeIn 0.32s ease both;
        }
        .hist-chart-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .hist-chart-title {
            font-size: 0.95rem;
            font-weight: 700;
            color: #1f3540;
        }
        .hist-chart-legend {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        .hist-chart-legend__item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--text-muted);
        }
        .hist-chart-legend__sw {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            background: #2cb67d;
            display: inline-block;
        }
        .hist-chart-legend__item--prev .hist-chart-legend__sw { background: #a8dec5; }
        .hist-chart-legend__item--avg  .hist-chart-legend__sw {
            background: transparent;
            border-top: 2px dashed #7a8d9a;
            height: 0;
            border-radius: 0;
            width: 14px;
        }
        .hist-chart {
            position: relative;
            width: 100%;
        }
        .hist-chart canvas {
            display: block;
            width: 100%;
            height: 320px;       /* крупнее на десктопе */
        }
        /* Скролл-обёртка — нужна только на мобилке. На десктопе график
           вписан в ширину контейнера и `overflow: visible` — иначе тултип
           обрезается слева/справа. */
        .hist-chart-scroll {
            position: relative;
            overflow: visible;
            width: 100%;
        }
        .hist-chart-tip {
            position: absolute;
            top: 4px;
            min-width: 160px;
            background: #fff;
            color: #1f3540;
            padding: 8px 10px;
            border: 1px solid var(--border);
            border-radius: 10px;
            font-size: 0.85rem;
            font-weight: 500;
            box-shadow: 0 6px 16px rgba(20, 60, 100, 0.10);
            pointer-events: none;
            z-index: 5;
            animation: histTipIn 0.12s ease both;
        }
        .hist-tip__head {
            font-weight: 700;
            color: #1f3540;
            margin-bottom: 6px;
            padding-bottom: 5px;
            border-bottom: 1px dashed var(--border);
        }
        .hist-tip__row {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            line-height: 1.5;
            color: var(--text-muted);
        }
        .hist-tip__row strong {
            font-weight: 600;
            color: #1f3540;
        }
        .hist-tip__row--muted strong { color: var(--text-muted); }

        /* ---- Таблица помесячно (только Месяц / Показание / Расход) ---- */
        .hist-table-wrap {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 6px;
            margin-bottom: 14px;
            box-shadow: 0 1px 3px rgba(20, 60, 100, 0.04);
            animation: histFadeIn 0.36s ease both;
        }
        .hist-table { width: 100%; border-collapse: collapse; }
        .hist-table th, .hist-table td {
            padding: 12px 14px;
            text-align: left;
            border-bottom: 1px solid var(--border);
            color: #1f3540;
            vertical-align: middle;
            font-size: 0.95rem;
        }
        .hist-table th {
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--text-muted);
            letter-spacing: 0.03em;
            text-transform: uppercase;
            background: #fafcfd;
            white-space: nowrap;
        }
        /* Месяц в строке — bold 700, чтобы визуально вести по столбцу. */
        .hist-table tbody td:first-child { font-weight: 700; }
        .hist-table tbody tr:last-child td { border-bottom: 0; }
        .hist-table tbody tr {
            transition: background 0.15s;
        }
        .hist-table tbody tr:hover td { background: #fafcfd; }
        /* Строка итога — вся жирная 700, выделена зелёной заливкой. */
        .hist-table__total td { background: #f5fbf7; font-weight: 700; }
        .hist-table__total tr:hover td { background: #f5fbf7; }
        .hist-cell-unit  { color: var(--text-muted); font-size: 0.85em; margin-left: 3px; }
        .hist-cell-muted { color: var(--text-muted); }

        /* ---- Анимации ---- */
        @keyframes histFadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes histTipIn {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .hist-summary, .hist-chart-wrap, .hist-table-wrap, .hist-chart-tip { animation: none; }
            .hist-kpi { transition: none; }
        }

        /* ---- Мобильная адаптация ---- */
        @media (max-width: 720px) {
            .hist-toolbar {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto;
                gap: 10px;
            }
            /* На мобиле каждое поле — на всю ширину, своей строкой.
               Узкая колонка под «Год» делала кнопку нечитаемой. */
            .hist-toolbar__field--meter,
            .hist-toolbar__field--year { grid-column: 1 / -1; }
            .hist-toolbar__csv {
                grid-column: 1 / -1;
                width: 100%;
                justify-content: center;
            }
            .hist-summary__kpis {
                grid-template-columns: 1fr 1fr;
            }

            /* На мобиле графику нужно больше высоты — пользователь смотрит
               сверху вниз, а не слева направо. */
            .hist-chart canvas { height: 280px; }
            .hist-chart-title  { font-size: 1rem; }
            .hist-chart-legend__item { font-size: 0.85rem; }

            /* Горизонтально-скроллируемый график — 12 месяцев не влезают
               на узкий экран, подписи склеиваются. Делаем canvas шире
               экрана + overflow-x на обёртке. Подсказка снизу — только
               на мобиле (на десктопе и так всё помещается). */
            .hist-chart-scroll {
                overflow-x: auto;
                overflow-y: visible;
                -webkit-overflow-scrolling: touch;
                /* «карман» по краям, чтобы тултип не упирался в границы */
                margin: 0 -4px;
                padding: 0 4px 4px;
                /* красивый scrollbar */
                scrollbar-width: thin;
                scrollbar-color: #cdd7df transparent;
            }
            .hist-chart-scroll::-webkit-scrollbar { height: 6px; }
            .hist-chart-scroll::-webkit-scrollbar-thumb {
                background: #cdd7df; border-radius: 3px;
            }
            .hist-chart-scroll::-webkit-scrollbar-track { background: transparent; }
            /* canvas внутри скролла — фиксированная ширина (12 × 50px + поля) */
            .hist-chart-scroll .hist-chart {
                width: 640px;     /* помещаются 12 месяцев с воздухом */
                min-width: 100%;
            }
            .hist-chart-hint {
                display: block;
                margin-top: 6px;
                font-size: 0.78rem;
                color: var(--text-muted);
                text-align: center;
            }
            .hist-chart-hint i { margin-right: 4px; opacity: 0.7; }

            /* Таблица → компактные карточки. Каждая карточка — единый
               блок (без вложенных «белых прямоугольников»): месяц
               заголовком сверху, под ним пара «лейбл — значение».
               !important на background — потому что глобальные правила
               .table tbody tr:nth-of-type(odd)/:hover (см. 09-notify.css)
               на тач-устройствах залипают после тапа и выдают серый
               артефакт внутри карточки. Здесь это поведение лишнее. */
            .hist-table { border: 0; }
            .hist-table thead { display: none; }
            .hist-table tbody tr,
            .hist-table tbody tr:nth-of-type(odd),
            .hist-table tbody tr:hover {
                display: block;
                margin-bottom: 8px;
                background: var(--surface) !important;
                border: 1px solid var(--border);
                border-radius: 10px;
                padding: 10px 12px;
                box-shadow: 0 1px 2px rgba(20, 60, 100, 0.03);
            }
            .hist-table tbody tr:hover td {
                background: transparent !important; /* отменяем десктопный hover внутри карточки */
            }
            .hist-table td {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                gap: 10px;
                padding: 3px 0;
                border: 0;
                text-align: right;
                font-size: 0.92rem;
                font-weight: 600;
                background: transparent;
            }
            .hist-table td::before {
                content: attr(data-label);
                color: var(--text-muted);
                font-weight: 500;
                font-size: 0.82rem;
                margin-right: auto;
                text-align: left;
            }
            /* Заголовок месяца — компактно сверху, без отдельного блока */
            .hist-table td:first-child {
                font-size: 0.95rem;
                font-weight: 700;
                color: #1f3540;
                padding: 0 0 6px;
                margin-bottom: 4px;
                border-bottom: 1px dashed var(--border);
                display: block;
                text-align: left;
            }
            .hist-table td:first-child::before { display: none; }

            /* Итоговая карточка — зелёный акцент */
            /* Итоговая карточка — зелёная заливка. !important — потому что
               блок «.hist-table tbody tr/:nth-of-type(odd)/:hover» выше тоже
               использует !important для фикса серого артефакта на тач-устройствах. */
            .hist-table tbody tr.hist-table__total,
            .hist-table tbody tr.hist-table__total:nth-of-type(odd),
            .hist-table tbody tr.hist-table__total:hover {
                background: #f5fbf7 !important;
                border-color: rgba(44, 182, 125, 0.30);
            }
            .hist-table__total td { background: transparent !important; }
            .hist-table__total td:first-child {
                color: #1a7a3e;
                border-bottom-color: rgba(44, 182, 125, 0.30);
            }

            .hist-cell-unit { font-size: 0.78rem; }
        }

        /* ============================================================
           История начислений и оплат — переиспользует .hist-* классы.
           Здесь — только мелкие уточнения: KPI с длинными суммами
           (49 728,20 руб.) обрезались ellipsis-ом → тут разрешаем
           перенос «руб.» на свою строку и слегка ужимаем шрифт.
           ============================================================ */

        /* KPI оплат: сумма + единица «руб.» — уменьшаем размер, чтобы
           4-значные тысячи влезали без обрезки. */
        .pay-summary .hist-kpi__value {
            font-size: 1.4rem;
            white-space: normal;            /* позволяем переносу «руб.» */
            line-height: 1.1;
        }
        .pay-summary .hist-kpi__unit {
            margin-left: 4px;
            white-space: nowrap;
        }
        /* KPI «Текущий долг» / «Переплата» — цветные акценты */
        .hist-kpi--debt {
            background: linear-gradient(0deg, rgba(198, 40, 40, 0.07), rgba(198, 40, 40, 0.07)), #fff;
            border-color: rgba(198, 40, 40, 0.32);
        }
        .hist-kpi--debt .hist-kpi__value { color: #c62828; }
        .hist-kpi--credit {
            background: linear-gradient(0deg, rgba(44, 182, 125, 0.08), rgba(44, 182, 125, 0.08)), #fff;
            border-color: rgba(44, 182, 125, 0.32);
        }
        .hist-kpi--credit .hist-kpi__value { color: #1a7a3e; }

        /* На мобиле сетка KPI — 2 колонки, и сумма всё ещё может быть
           длинной → ещё уменьшаем шрифт значения. */
        @media (max-width: 720px) {
            .pay-summary .hist-kpi__value {
                font-size: 1.15rem;
            }
            .pay-summary .hist-kpi__unit {
                font-size: 0.78rem;
                display: inline-block;
            }
        }

        /* Тулбар оплат: один селектор «Год», узкий по содержимому. */
        .pay-toolbar { grid-template-columns: 200px; }
        @media (max-width: 720px) {
            .pay-toolbar { grid-template-columns: 1fr; }
        }

        /* CSV-кнопка живёт в шапке графика — компактная, справа от
           легенды. На мобиле выезжает на следующую строку (flex-wrap у
           .hist-chart-head уже стоит). */
        .pay-csv-btn {
            height: 36px;
            padding: 0 14px;
            font-size: 0.85rem;
            margin-left: auto;
        }
        @media (max-width: 720px) {
            .pay-csv-btn {
                width: 100%;
                justify-content: center;
                margin-left: 0;
                margin-top: 4px;
                order: 3;            /* кнопка после заголовка и легенды */
            }
        }

        /* === История начислений и оплат: колонки сальдо === */
        /* Знак сальдо: + долг (красный), − переплата (зелёный), 0 = серый. */
        .payment-history-table .saldo {
            font-variant-numeric: tabular-nums; /* цифры одной ширины — колонки выравниваются */
            font-weight: 600;
            white-space: nowrap;
        }
        .payment-history-table .saldo--debt   { color: #c62828; }
        .payment-history-table .saldo--credit { color: #2cb67d; }
        .payment-history-table .saldo--zero,
        .payment-history-table .saldo--empty  { color: var(--text-muted); font-weight: 500; }

        /* Мобильная адаптация для .payment-history-table убрана —
           теперь таблица унаследовала и класс .hist-table, и его
           мобильную «карточную» раскладку (см. блок выше @720px).
           Дубликат правил приводил к расхождению по padding/font-size. */