/* Панель активности Мини — публичная страница.
 * Визуал — рабочий стол amoCRM: тёмно-синие карточки на синем градиенте, заголовки капсом,
 * крупные цифры (фиолетовый/зелёный), тонкие разделители, PT Sans. Светлая тема — те же
 * пропорции на светлом фоне. Размеры завязаны на viewport (ТВ с 3–4 метров) через --u.
 */
:root {
  --u: clamp(12px, 1.1vw, 20px);           /* базовая единица: 1 «шрифтовой» шаг */
  --bg1: #0b5fb0; --bg2: #16a3dc;          /* градиент рабочего стола amoCRM */
  --card: #0e2a45; --card-2: #0a2238;
  --text: #ffffff; --muted: #8fa3b8; --line: rgba(255,255,255,.14);
  --accent: #b18cff;                       /* фиолетовые «большие цифры» */
  --green: #2ee06b; --yellow: #ffd13a; --red: #ff5a6a;
  --track: rgba(255,255,255,.12);
  --bar-bg: rgba(0,0,0,.18); --btn: rgba(255,255,255,.14);
  --font: "PT Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html[data-theme="light"] {
  --bg1: #e9eef3; --bg2: #f6f8fa;
  --card: #ffffff; --card-2: #f4f6f9;
  --text: #1e2a36; --muted: #6d7b8a; --line: rgba(20,40,60,.12);
  --accent: #6d3fe0;
  --green: #1fae5a; --yellow: #d9a800; --red: #e0455e;
  --track: rgba(20,40,60,.1);
  --bar-bg: rgba(255,255,255,.7); --btn: rgba(20,40,60,.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); color: var(--text);
  background: linear-gradient(135deg, var(--bg1), var(--bg2)) fixed;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

/* Embed (iframe на рабочем столе amoCRM / в левом меню): без шапки, без градиента — сама карточка */
html[data-embed="1"] body { background: var(--card); }
html[data-embed="1"] .am-bar { display: none; }
html[data-embed="1"] .am { padding: 0; }
html[data-embed="1"] .am-card { border-radius: 0; box-shadow: none; }

.am { display: flex; flex-direction: column; height: 100vh; overflow: hidden; padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); gap: var(--u); }

/* Раскрыт список без активности: панель не ужимается, а растёт и прокручивается */
html[data-grow] .am { height: auto; min-height: 100vh; overflow: visible; }
html[data-grow] .am-card, html[data-grow] .am-rows { flex: none; overflow: visible; }

/* ---- шапка ---- */
.am-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--u); flex-wrap: wrap; }
.am-brand { display: flex; align-items: center; gap: .6em; font-size: calc(var(--u) * 1.1); font-weight: 700; letter-spacing: .02em; }
.am-logo { display: inline-flex; color: var(--text); opacity: .9; }
.am-sep, .am-panel-name { font-weight: 400; opacity: .85; }
.am-tools { display: flex; align-items: center; gap: .8em; font-size: calc(var(--u) * .9); }
.am-updated { color: var(--text); opacity: .75; }
.am-ic { width: 2.2em; height: 2.2em; border: 0; border-radius: 50%; background: var(--btn); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.am-ic:hover { filter: brightness(1.15); }
.am-go { color: var(--text); background: var(--btn); text-decoration: none; padding: .5em 1em; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.am-go:hover { filter: brightness(1.15); }

/* ---- карточка ---- */
.am-card {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--card); border-radius: 10px; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
/* Одна сетка на шапку и строки: --grid собирает app.js из --cw (обычная колонка) и --cwm (деньги),
 * чтобы заголовок, итог и норма стояли ровно над кольцами своей колонки. */
:root { --rowpad: 15px; --cols: 3; --cw: calc(var(--u) * 9); --cwm: calc(var(--u) * 12); --cgap: calc(var(--u) * 1.6); --grid: 1fr var(--cw) var(--cw) var(--cw); }
.am-head { display: grid; grid-template-columns: var(--grid); align-items: start; gap: var(--cgap); padding-bottom: var(--u); border-bottom: 1px solid var(--line); }
.am-caption { font-size: calc(var(--u) * 1.05); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text); opacity: .9; min-width: 0; }
.am-caption small { display: block; margin-top: .4em; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); font-size: .85em; }
.am-totals { display: contents; }                /* итоги — прямые ячейки сетки шапки */
.am-total { text-align: center; min-width: 0; }
.am-total-label { font-size: calc(var(--u) * .8); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.2; min-height: 2.4em; display: flex; align-items: flex-end; justify-content: center; }
.am-total-sub { margin-top: .35em; font-size: calc(var(--u) * .78); line-height: 1.2; color: var(--muted); font-variant-numeric: tabular-nums; }
.am-total-value { margin-top: .1em; font-size: calc(var(--u) * 2.8); line-height: 1.05; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.am-total-value.money { font-size: calc(var(--u) * 1.9); line-height: 1.55; }
.am-total-value.none { color: var(--muted); opacity: .5; }

/* переключатель «Темп дня» ↔ «За день» */
/* Без жирности и без переноса внутри пилюли: текст обоих режимов одной ширины (tabular-nums у времени),
 * иначе высота шапки и всей панели прыгала при чередовании режимов. */
.am-mode { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-top: .7em; cursor: pointer; }
.am-pause { width: 1.9em; height: 1.9em; border: 0; border-radius: 50%; background: var(--btn); color: var(--text); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; opacity: 0; transition: opacity .15s; font-size: calc(var(--u) * .8); }
.am-mode:hover .am-pause, .am-mode.paused .am-pause, .am-pause:focus-visible { opacity: 1; }
.am-mode.paused .am-pause { background: var(--accent); color: #fff; }
.am-mode.paused .am-mode-pill.on { box-shadow: inset 0 0 0 1px var(--accent); }
.am-mode-pill { position: relative; overflow: hidden; font-size: calc(var(--u) * .8); font-weight: 400; letter-spacing: .02em; text-transform: none; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); background: var(--btn); border-radius: 999px; padding: .35em .9em; opacity: .7; }
.am-mode-pill.on { color: var(--text); opacity: 1; box-shadow: inset 0 0 0 1px var(--line); }
.am-mode-pill i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform .1s linear; }

/* ---- подсказки «?» ---- */
.am-help { display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; margin-left: .45em; vertical-align: middle; flex: none;
  border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; opacity: .55; font: inherit; font-size: .8em; font-weight: 700; line-height: 1; letter-spacing: 0; cursor: help; padding: 0; }
.am-help:hover, .am-help:focus-visible { opacity: 1; outline: none; }
.am-total-label .am-help { font-size: .9em; }
.am-tip { position: fixed; z-index: 10; max-width: 22em; padding: .6em .9em; border-radius: 8px; background: #1e2a36; color: #fff; font-family: var(--font); font-size: calc(var(--u) * .85); font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; box-shadow: 0 6px 24px rgba(0,0,0,.35); pointer-events: none; }
.am-tip::before { content: ""; position: absolute; left: 50%; top: -5px; margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom-color: #1e2a36; }
.am-tip.up::before { top: auto; bottom: -5px; border-bottom: 0; border-top: 5px solid #1e2a36; }
html[data-theme="light"] .am-tip { background: #1e2a36; }

/* ---- строки ---- */
.am-rows { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; --row: 1; overflow: hidden; }
.am-row {
  display: grid; grid-template-columns: var(--grid); align-items: center;
  gap: var(--cgap); padding: calc(var(--u) * .55 + var(--rowpad)) 0; border-bottom: 1px solid var(--line);
  font-size: calc(var(--u) * var(--row));
}
.am-row:last-child { border-bottom: 0; }
.am-name { font-size: 1.25em; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-last { display: block; font-size: .7em; color: var(--muted); margin-top: .15em; }
.am-last.hot { color: var(--green); }
.am-last.cold { color: var(--red); }
.am-cell { display: flex; align-items: center; justify-content: center; min-width: 0; }
/* ссылка с цифры в amoCRM — визуально ничем не отличается от текста */
.am-link { display: inline-flex; flex-direction: column; align-items: center; gap: inherit; color: inherit; text-decoration: none; cursor: pointer; }
.am-link.off { cursor: default; }
.am-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.am-num { font-size: 1.9em; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.am-num.zero { opacity: .35; }
.am-num.money { font-size: 1.35em; white-space: nowrap; }

/* кольцо прогресса к дневной норме */
.am-ring { position: relative; width: 4.2em; height: 4.2em; }
.am-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.am-ring .tr { fill: none; stroke: var(--track); stroke-width: 3.2; }
.am-ring .fl { fill: none; stroke: var(--green); stroke-width: 3.2; stroke-linecap: round; transition: stroke-dashoffset .6s ease, stroke .3s; }
.am-ring .n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.35em; font-weight: 700; font-variant-numeric: tabular-nums; }
.am-ring.c-green .fl { stroke: var(--green); }
.am-ring.c-yellow .fl { stroke: var(--yellow); }
.am-ring.c-red .fl { stroke: var(--red); }
.am-ring.c-zero .fl { stroke: transparent; }
.am-ring.c-zero .n { opacity: .5; }
.am-ring.rate .n { font-size: 1.05em; letter-spacing: -.02em; }
@keyframes am-flip { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: rotateX(0); opacity: 1; } }
.flip { animation: am-flip .45s cubic-bezier(.2,.7,.3,1) both; transform-origin: center; backface-visibility: hidden; }
.am-ring.done::after { content: ""; position: absolute; inset: -.3em; border-radius: 50%; box-shadow: 0 0 0 .18em rgba(46,224,107,.18); }

/* ---- итоговая строка под таблицей ---- */
.am-sum { flex: none; border-top: 1px solid var(--line); border-bottom: 0; padding: calc(var(--u) * .7) 0 calc(var(--u) * .3); font-size: var(--u); }
.am-sum .am-name { font-size: 1em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.am-sum .am-cell { flex-direction: column; gap: .1em; }
.am-sum .am-link { gap: .1em; }
.am-sum .am-num { font-size: 1.6em; color: var(--accent); }
.am-sum .am-num.money { font-size: 1.2em; }
.am-sum small { font-size: .78em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- без активности ---- */
.am-idle { margin-top: var(--u); padding-top: calc(var(--u) * .8); border-top: 1px solid var(--line); font-size: calc(var(--u) * .95); color: var(--muted); display: flex; flex-wrap: wrap; gap: .4em 1em; align-items: baseline; }
.am-idle b { color: var(--text); font-weight: 700; }
.am-idle .who { opacity: .85; }
.am-idle button { border: 0; background: var(--btn); color: var(--text); border-radius: 999px; padding: .25em .8em; cursor: pointer; font: inherit; font-size: .85em; }
.am-idle .am-rows-idle { flex: 0 0 100%; width: 100%; margin-top: calc(var(--u) * .3); }   /* раскрытый список — строкой под заголовком */
.am-row.mut { opacity: .55; }

.am-note { margin-top: var(--u); font-size: calc(var(--u) * .9); color: var(--muted); }
.am-note.warn { color: var(--yellow); }

/* ---- футер-полоска: объявление платформы (tip) или дефолт — полная «Панель активности» ---- */
.am-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--u);
  margin: auto calc(var(--u) * -1.8) calc(var(--u) * -1.4); padding-top: 0; padding: calc(var(--u) * .9) calc(var(--u) * 1.8);
  background: var(--card-2); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px;
  color: var(--muted); text-decoration: none; font-size: calc(var(--u) * .95); line-height: 1.35; }
.am-foot { margin-top: auto; }                  /* полоска прижата к низу карточки, пустота — над ним */
.am-sum, .am-idle, .am-note { padding-bottom: calc(var(--u) * .9); }   /* чтобы не слипались с полоской, когда пустоты нет */
.am-foot b { color: var(--text); font-weight: 700; }
.am-foot-cta { flex: none; color: var(--accent); font-weight: 700; white-space: nowrap; }
.am-foot:hover .am-foot-cta { text-decoration: underline; }
html[data-embed="1"] .am-foot { border-radius: 0; }
/* сторож: полоска, спрятанная обрезкой iframe, переезжает наверх карточки */
.am-foot.am-foot-top { margin: calc(var(--u) * -1.4) calc(var(--u) * -1.8) var(--u); border-top: 0; border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
html[data-embed="1"] .am-foot.am-foot-top { border-radius: 0; }
@media (max-width: 720px) { .am-foot { flex-direction: column; align-items: flex-start; gap: .4em; } }

/* ---- состояния ---- */
.am-state { min-height: 100vh; display: grid; place-items: center; padding: var(--u); }
.am-state-card { background: var(--card); border-radius: 10px; padding: calc(var(--u) * 2) calc(var(--u) * 2.5); max-width: 42em; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.am-state-title { font-size: calc(var(--u) * 1.5); font-weight: 700; }
.am-state-text { margin-top: .6em; color: var(--muted); line-height: 1.5; font-size: calc(var(--u) * 1); }
.am-btn { margin-top: 1.2em; border: 0; border-radius: 6px; padding: .7em 1.4em; background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }

/* ---- узкие экраны (телефон / узкий iframe) ---- */
@media (max-width: 720px) {
  :root { --cw: calc(var(--u) * 4.6); --cwm: calc(var(--u) * 6.4); --cgap: calc(var(--u) * .6); }
  /* Узко: имя и подпись — отдельной строкой на всю ширину, колонки метрик делят ширину поровну;
   * панель прокручивается, а не ужимается в экран. */
  .am, .am-rows { height: auto; min-height: 0; overflow: visible; }
  .am { min-height: 100vh; }
  .am-head, .am-row { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .am-caption, .am-name { grid-column: 1 / -1; }
  .am-name { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
  .am-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .am-last { flex: none; margin-top: 0; }
  .am-row { --rowpad: 6px; padding: calc(var(--u) * .5 + var(--rowpad)) 0 calc(var(--u) * .7 + var(--rowpad)); row-gap: calc(var(--u) * .4); }
  .am-total-label { font-size: calc(var(--u) * .62); letter-spacing: .05em; }
  .am-total-value { font-size: calc(var(--u) * 1.8); }
  .am-total-value.money { font-size: calc(var(--u) * 1.1); }
  .am-total-sub { display: none; }
  .am-sum .am-name { font-size: .8em; }
  .am-ring { width: 3.4em; height: 3.4em; }
}
@media (prefers-reduced-motion: reduce) { .am-ring .fl { transition: none; } }