/* Контейнер всех карточек — гибкая сетка на 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__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;
          font-size: 0.7rem;
          font-weight: 600;
          padding: 3px 8px;
          border-radius: 999px;
          background: #fef0e6;
          color: #d97a3a;
        }

        /* Старая разметка (на случай, если где-то ещё используется) */
        .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;
        }