:root{
  --blue-1:#1c4a7e;--blue-2:#3c79c5;--blue-3:#63b0ff;
  --yellow-1:#fed20d;--yellow-2:#ffc500;
  --radius-lg:16px;--radius-sm:8px;
}
body{margin:0;padding:16px;font-family:sans-serif;background:#f5f7fa}

/* ---------- HEADER ---------- */
#header{background:linear-gradient(135deg,var(--blue-1),var(--blue-2),var(--blue-3));
        color:#fff;border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:18px}
#header-row{display:flex;justify-content:space-between;align-items:center}
.h-item{flex:1;text-align:center}.h-icon{width:28px;height:28px;object-fit:contain;margin-bottom:2px}
.h-label{font-size:.78rem;opacity:.85}.h-value{font-weight:600;font-size:.9rem;line-height:1.35}

/* ---------- ACCOUNT CARD ---------- */
.card{background:#fff;border-radius:var(--radius-lg);padding:16px;
      box-shadow:0 2px 6px rgba(0,0,0,.07);margin-bottom:14px}
.row{margin:6px 0}.title{font-weight:600}
.buttons{margin-top:12px;display:flex;gap:10px}
.btn{flex:1;padding:10px;font-size:.87rem;border:none;border-radius:var(--radius-sm);
     cursor:pointer;display:inline-flex;justify-content:center;align-items:center;
     transition:transform .15s ease,box-shadow .15s ease}
.btn:active{transform:scale(.97)}
.btn-settings{background:linear-gradient(135deg,var(--blue-1),var(--blue-2));
              color:#fff;box-shadow:0 2px 4px rgba(28,74,126,.35)}
.btn-settings:hover{box-shadow:0 4px 6px rgba(28,74,126,.45)}
/* Кнопка Статистика */
/* Мягкий жёлтый + обводка как у активных дней */
.btn-stats{
  background: linear-gradient(135deg, #fff4bf, #ffe28a);
  color: var(--blue-1);
  border: 1px solid #f7d36b;                 /* ← такая же обводка */
  box-shadow: 0 2px 4px rgba(255,197,0,.32);
}
.btn-stats:hover{
  background: linear-gradient(135deg, #ffefab, #ffd96a); /* как у hover чипов */
  border-color: #f6c447;                                 /* ← как у hover чипов */
  box-shadow: 0 4px 6px rgba(255,197,0,.42);
}

/* ---------- MODALS ---------- */    
/* NEW: плавный лоадер и блокировка ввода только в момент загрузки настроек */
.modal-content.is-loading{position:relative}
.modal-content.is-loading .loading-overlay{display:flex}
.loading-overlay{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(255,255,255,.6); backdrop-filter:blur(2px);
  border-radius:var(--radius-lg); z-index:5;
  pointer-events: none; /* НЕ перехватывает клики, кнопка ← остаётся кликабельной */
}
.loading-spinner{
  width:36px; height:36px;
  border:3px solid rgba(28,74,126,.15);
  border-top-color:var(--blue-2);
  border-radius:50%;
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* блокируем все клики внутри, но оставляем доступной кнопку закрытия */
.modal-content.is-loading *{pointer-events:none}
.modal-content.is-loading #settings-close{pointer-events:auto}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;
               justify-content:center;align-items:flex-start;padding-top:60px;z-index:1000}
.modal-content{width:100%;max-width:410px;max-height:90vh;overflow-y:auto;
               border-radius:var(--radius-lg);background:#fff;
               box-shadow:0 4px 12px rgba(0,0,0,.15)}
.modal-close{background:none;border:none;cursor:pointer;font-size:2rem;font-weight:700;
             line-height:1;color:var(--blue-1);padding:0 4px}
.stats-header{display:flex;align-items:center;gap:6px;padding:12px 16px 4px}
.stats-title{flex:1;font-weight:600;font-size:1.05rem;text-align:center;color:#666666}

/* skeleton-лоадеры */
.account-loading{height:118px;border-radius:var(--radius-lg);margin-bottom:14px;
                 background:linear-gradient(90deg,#f0f0f0 25%,#e4e4e4 37%,#f0f0f0 63%);
                 background-size:400% 100%;animation:shimmer 1.2s infinite}
.widget-loading{height:180px;border-radius:8px;
                background:linear-gradient(90deg,#f0f0f0 25%,#e2e2e2 37%,#f0f0f0 63%);
                background-size:400% 100%;animation:shimmer 1.2s infinite;margin-bottom:8px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* switches */
.switch{position:relative;display:inline-block;width:50px;height:28px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#ccc;transition:.4s;border-radius:28px;cursor:pointer}
.slider:before{content:"";position:absolute;height:22px;width:22px;left:3px;bottom:3px;
               background:#fff;transition:.4s;border-radius:50%}
input:checked+.slider{background:var(--blue-2)}input:checked+.slider:before{transform:translateX(22px)}
.options{margin:6px 0 0 28px;font-size:.9rem;display:none}
.options label{display:flex;align-items:center;margin-bottom:4px}.options input{margin-right:8px}

/* toast */
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
       background:var(--blue-1);color:#fff;padding:8px 16px;border-radius:var(--radius-sm);
       box-shadow:0 2px 6px rgba(0,0,0,.2);display:none;font-size:.9rem;z-index:1001}

/* masonry-сетка виджетов */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
            gap:16px;grid-auto-flow:dense}
.widget-card{background:#fff;border-radius:var(--radius-lg);box-shadow:0 2px 6px rgba(0,0,0,.07);
             padding:16px;display:flex;flex-direction:column}
.widget-title{font-weight:600;margin-bottom:8px;color:#666666}
.metric-cards{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.metric-card{flex:1 1 110px;background:#f5f7fa;padding:8px;border-radius:8px;
             text-align:center;font-size:.78rem;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.metric-card b{display:block;margin-top:2px;font-size:.9rem}

/* контейнер пагинации — включаем вертикальное выравнивание */
#pagination {
  display: none;
  justify-content: center;
  align-items: center;      /* <-- вертикальное выравнивание */
  margin-bottom: 16px;
}

/* сам спан с номером страницы */
.pagination-info {
  font-size: 0.8rem;        /* чуть меньше */
  line-height: 1;           /* убираем лишние отступы по высоте */
  margin: 0 12px;           /* можно скорректировать отступы при необходимости */
}

.btn {
  text-decoration: none; /* убираем подчёркивание у всех кнопок-ссылок */
}

/* Стили для блока инструкции */
.instruction-text {
  font-size: 0.85rem;      /* чуть меньше базового */
  color: #666666;          /* слегка серый */
  line-height: 1.6;        /* увеличенный межстрочный интервал */
  margin-bottom: 12px;     /* дополнительный отступ снизу */
}

/* 1. Ссылки — насыщенный синий */
a {
  color: #007acc;
  text-decoration: none; /* если нужно убрать подчёркивание */
}

/* 2. Общий текст внутри карточек — мягкий серый */
.row {
  color: #666666;  /* можно подобрать более светлый/тёмный оттенок при необходимости */
}
/* Общее для всех SVG-иконок */

/* Белые иконки в шапке */
#header .h-icon {
  color: #fff;
}

#header .h-icon path,
#header .h-icon circle,
#header .h-icon rect,
#header .h-icon polygon {
fill: currentColor !important;
}

/* Размер иконки */
.account-icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  margin-right: 0.5em;
}

/* Фон-круг */
.account-icon .icon-bg {
  fill: var(--yellow-1);
}

/* Сам логотип (стрелка) */
.account-icon .icon-arrow {
  fill: var(--blue-1);
}

/* Текст метки */
.row.title .account-label {
  color: #666666; /* серый */
}

/* белая заливка для хедера */
#header .h-icon {
  width: 28px;
  height: 28px;
  color: #fff;         /* currentColor → белый */
}
/* Заливка путей внутри SVG наследует currentColor */
#header .h-icon path {
  fill: currentColor;
}

/* 1) Устанавливаем у контейнера SVG белый цвет */
#header .h-icon {
  color: #fff;       /* для элементов с fill="currentColor" */
  fill: #fff !important; /* на всякий случай, если у SVG есть встроенный fill */
}

/* 2) Принудительно перекрашиваем все пути/примитивы внутри */
#header .h-icon path,
#header .h-icon circle,
#header .h-icon rect,
#header .h-icon polygon {
  fill: #fff !important;
  stroke: #fff !important; /* если в иконках есть обводка */
}
.toast-error{background:#d9534f}   /* красный */


/* Индикатор статуса подключения */
.status-badge {
  display: inline-block;
  font-size: .75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e0e0e0;
  color: #444;
  vertical-align: middle;
  margin-left: 6px;
}
.status-ok        { background:#e6f4ea; color:#137333; }  /* зелёный */
.status-timeout   { background:#fff4e5; color:#a15c00; }  /* янтарный */
.status-api_error { background:#fff4e5; color:#a15c00; }  /* янтарный */
.status-token_expired,
.status-no_token  { background:#fde8e8; color:#b42318; }  /* красный */
.status-unknown   { background:#eee;     color:#666;   }  /* серый */

/* Бейджи для настроек (вкл/выкл) */
.flag-badge{
  display:inline-block;
  font-size:.75rem;
  padding:2px 8px;
  border-radius:999px;
  vertical-align:middle;
  margin-left:6px;
  background:#eee; color:#666; /* дефолт, если что-то не распознали */
}
.flag-on  { background:#e6f4ea; color:#137333; } /* зелёный (вкл)  */
.flag-off { background:#fde8e8; color:#b42318; } /* красный (выкл) */

/* --- Legal footer --- */
.legal-footer{
  margin: 20px 0 6px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: .78rem;
  color: #8a8f98;
  user-select: none;
}
.legal-footer a{
  color: currentColor !important;      /* наследуем приглушённый цвет */
  text-decoration: underline;          /* подчёркивание для кликабельности */
  opacity: .95;
}
.legal-footer a:hover{ opacity: 1; }
.legal-sep{ margin: 0 .5rem; opacity: .5; }

/* Небольшая поддержка тёмной темы устройств */
@media (prefers-color-scheme: dark){
  .legal-footer{ color: #aeb4bc; }
}

/* --- AI schedule chips (layout only; ~20% smaller) --- */
.ai-schedule {
  margin: 6px 0 0 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 столбца */
  gap: 8px;                                        /* ровные отступы */
  align-items: stretch;
}

/* Все 8 чипов (включая "Каждый день") располагаются в сетке 2×4 */
.ai-schedule .day-grid {
  display: contents; /* «растворяем» внутреннюю сетку */
  margin: 0;
  max-width: none;
}

/* Чипы (~20% меньше) */
.ai-schedule .chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;                 /* равномерная ширина */
  padding: 5px 8px;            /* было 6px 10px */
  border-radius: 999px;
  background: #f0f3f8;
  color: #305376;
  font-size: 0.70rem;          /* было .86rem */
  border: 1px solid #d8e1ee;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: background .15s ease, 
              box-shadow .15s ease, 
              color .15s ease, 
              border-color .15s ease;
}

/* Убираем левый отступ между чипами */
.ai-schedule .chip + .chip {
  margin-left: 0;
}

.ai-schedule .chip input {
  display: none;
}

/* Активные дни — желтые, как кнопка "Статистика" */
.ai-schedule .chip.active {
  background: linear-gradient(135deg, #fff4bf, #ffe28a); /* пастельный жёлтый градиент */
  border-color: #ffd666;                                 /* тёплая граница */
  color: var(--blue-1);                                  /* читабельный синий как в теме */
  box-shadow: 0 1px 2px rgba(255, 197, 0, .22);          /* лёгкий «солнечный» глянец */
}

/* Google Sheets widget */
.gs-widget{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #e7ebf3;
  background:#f8fafc;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.gs-icon{
  width:26px;
  height:26px;
  flex-shrink:0;
}
.gs-info{
  min-width:0;
  flex:1;
}
.gs-title{
  font-weight:600;
  color:#666666;
  font-size:.9rem;
  margin-bottom:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gs-link{
  font-size:.85rem;
  color:#1c4a7e;
  background-image:linear-gradient(135deg, var(--blue-2), var(--blue-3));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-decoration:underline;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
}