/* Фирстиль — из брендбука v1.5 (стр. 19, 21), не из вёрстки Apps Script.
   Пять цветов, новых не добавляем. Шрифты самохостим: гугловой инфраструктуры мы как раз
   избавляемся, и вешать на неё загрузку каждого экрана в пекарне незачем.
   Файлы урезаны до кириллицы с латиницей и переведены в woff2: 80 КБ вместо 870 КБ. */

@font-face {
  font-family: "TikTok Sans";
  src: url("fonts/tiktok-extrabold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "TikTok Sans";
  src: url("fonts/tiktok-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Брендовая палитра. Роли закреплены брендбуком, перекрашивать по вкусу нельзя. */
  --grey-bread: #4A3933;   /* Серый хлеб — текст и тёмные плашки */
  --cream: #FFF6E7;        /* Крем — основной фон */
  --white-bread: #FFFFFF;  /* Белый хлеб — карточки */
  --sun: #F94721;          /* Яркое солнце — акцент */
  --flour: #FFE0B1;        /* Мука — незаполненная часть полосок */

  /* Функциональный светофор. В брендовую палитру намеренно НЕ входит и рядом с ней не
     смешивается: «Яркое солнце» — акцент, а не тревога. */
  --ok: #2E7D32;
  --warn: #C98A00;
  --bad: #C0392B;

  --radius: 14px;
  --gap: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--cream);
  color: var(--grey-bread);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 620px;
  margin: 0 auto;
  padding: 12px 12px calc(24px + env(safe-area-inset-bottom));
}

h1, h2, .num, .verdict { font-family: "TikTok Sans", "Montserrat", sans-serif; font-weight: 800; }
h2 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin: 18px 0 8px;
     opacity: .65; font-weight: 700; }

.boot { padding: 40px 0; text-align: center; opacity: .6; }

/* --- Шапка --- */
.head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.head img { width: 34px; height: auto; flex: none; }
.head .brand { font-family: "TikTok Sans", sans-serif; font-weight: 800; font-size: 17px;
               line-height: 1.1; }
.head .date { font-size: 12px; opacity: .7; margin-top: 2px; }

/* --- Карточки --- */
.card {
  background: var(--white-bread);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: var(--gap);
}
.card.dark { background: var(--grey-bread); color: var(--cream); }

/* --- Сводка по сети --- */
.verdict { font-size: 26px; line-height: 1.1; margin-bottom: 10px; }
.kpis { display: flex; gap: 8px; }
.kpi { flex: 1; background: var(--cream); border-radius: 10px; padding: 9px 10px; }
.kpi .label { font-size: 11px; opacity: .7; }
.kpi .num { font-size: 22px; line-height: 1.15; }
.kpi .sub { font-size: 11px; opacity: .7; }

/* --- Строка «нужно в день» --- */
.need { margin-top: 10px; padding: 10px 12px; border-radius: 10px;
        background: var(--flour); font-size: 13px; }
.need b { font-family: "TikTok Sans", sans-serif; font-weight: 800; font-size: 17px; }
.need.hold { background: var(--cream); }

/* --- Премиальный фонд: отдельной строкой, не внутри карточки выполнения --- */
.bonus { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bonus .val { font-family: "TikTok Sans", sans-serif; font-weight: 800; font-size: 20px;
              color: var(--sun); white-space: nowrap; }
.bonus .cap { font-size: 11px; opacity: .7; }

/* --- Рейтинг «Греют план» --- */
.rank-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.rank-row .pos { width: 18px; opacity: .55; font-size: 12px; }
.rank-row .nm { flex: 1; }
.rank-row .pc { font-family: "TikTok Sans", sans-serif; font-weight: 800; }

/* --- Компактные строки точек (вместо спидометров) --- */
.point { padding: 10px 12px; margin-bottom: 6px; background: var(--white-bread);
         border-radius: 12px; cursor: pointer; }
.point-head { display: flex; align-items: center; gap: 8px; }
.point-head .nm { flex: 1; font-weight: 700; font-size: 14px; }
.point-head .pc { font-family: "TikTok Sans", sans-serif; font-weight: 800; font-size: 15px;
                  min-width: 58px; text-align: right; }
.point-head .pc small { display: block; font-family: "Montserrat", sans-serif; font-weight: 500;
                        font-size: 9px; opacity: .6; letter-spacing: .04em; }
.chev { width: 10px; opacity: .4; transition: transform .15s; }
.point.open .chev { transform: rotate(90deg); }

/* Полоска: шкала 80–130%, отметка 100% на месте. Спидометр 0–110 прятал всю разницу
   в правом секторе и упирал 123,5 и 124,6 в один и тот же потолок. */
.bar { position: relative; height: 7px; border-radius: 4px; background: var(--flour);
       margin-top: 8px; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; display: block; }
.bar u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--grey-bread);
         opacity: .45; }
.bar-legend { display: flex; justify-content: space-between; font-size: 9px; opacity: .45;
              margin-top: 3px; }

.detail { display: none; margin-top: 10px; border-top: 1px solid var(--flour); padding-top: 10px; }
.point.open .detail { display: block; }
.dl { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.dl span:last-child { font-weight: 700; }

/* --- Спарклайн --- */
.spark { display: block; width: 100%; height: 38px; margin-top: 8px; }

/* --- Легенда --- */
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; opacity: .75;
          padding: 4px 2px 0; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); }
.bg-ok { background: var(--ok); } .bg-warn { background: var(--warn); } .bg-bad { background: var(--bad); }
.muted { opacity: .55; }

/* --- Состояние ошибки: честный текст, а не нули и не вечный спиннер --- */
.error { text-align: center; padding: 34px 18px; }
.error .big { font-family: "TikTok Sans", sans-serif; font-weight: 800; font-size: 20px;
              margin-bottom: 10px; }
.error p { font-size: 14px; opacity: .8; margin: 6px 0; }
.warnbar { background: var(--sun); color: #fff; border-radius: 10px; padding: 9px 12px;
           font-size: 12px; margin-bottom: var(--gap); }

button.rebuild { display: block; width: 100%; margin-top: 14px; padding: 11px;
  border: 0; border-radius: 10px; background: var(--grey-bread); color: var(--cream);
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 13px; cursor: pointer; }