/* Базовые поверхности берём из темы Telegram, чтобы приложение выглядело родным
   и в светлой, и в тёмной теме. Своя палитра — только у обложек. */
:root {
  --bg: var(--tg-theme-secondary-bg-color, #efeff3);
  --surface: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #ffffff));
  --text: var(--tg-theme-text-color, #000000);
  --hint: var(--tg-theme-hint-color, #8a8a8e);
  --sub: var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, #8a8a8e));
  --link: var(--tg-theme-link-color, #2481cc);
  --accent: var(--tg-theme-button-color, #2481cc);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --section-header: var(--tg-theme-section-header-text-color, var(--hint));
  --separator: var(--tg-theme-section-separator-color, rgba(128, 128, 128, 0.22));
  --destructive: var(--tg-theme-destructive-text-color, #dc5a3c);

  /* Обложки: цвет = способ производства */
  --c-text_broll: #0e5a5f;   --i-text_broll: #f4fbfa;   /* Андаманское море */
  --c-voice_broll: #22364a;  --i-voice_broll: #eef3f8;  /* ночной залив */
  --c-infographic: #e9ece5;  --i-infographic: #14211d;  /* карточки серии Millennium */
  --c-avatar: #e4bf55;       --i-avatar: #2a2208;       /* франжипани */
  --c-ready: #4f6430;        --i-ready: #f3f6ec;        /* джунгли */

  --ok: #2e9e68;
  --fix: #dc5a3c;

  --safe-top: calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: calc(var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));

  --gutter: 16px;
  --r-cover: 12px;
  --r-section: 14px;
  font-synthesis: none;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--link); text-decoration: none; }

#app { padding: calc(var(--safe-top) + 12px) 0 calc(var(--safe-bottom) + 96px); max-width: 560px; margin: 0 auto; }

/* ---------- шапка недели ---------- */
.head { padding: 4px var(--gutter) 14px; }
.head h1 { font-size: 26px; line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.head .sub { color: var(--sub); font-size: 14px; margin-top: 4px; }
.progress { display: flex; gap: 3px; margin-top: 14px; }
.progress i { flex: 1; height: 4px; border-radius: 2px; background: var(--separator); }
.progress i.ok { background: var(--ok); }
.progress i.fix { background: var(--fix); }

.tabs { display: flex; margin: 0 var(--gutter) 14px; background: var(--separator); border-radius: 10px; padding: 2px; }
.tabs button { flex: 1; padding: 7px 0; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text); }
.tabs button[aria-selected="true"] { background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }

/* ---------- сводка ---------- */
.note { margin: 0 var(--gutter) 18px; background: var(--surface); border-radius: var(--r-section); padding: 14px 16px; font-size: 15px; }
.note p { margin: 0; }
.note details { margin-top: 10px; border-top: 1px solid var(--separator); padding-top: 10px; }
.note summary { color: var(--link); font-size: 14px; list-style: none; cursor: pointer; }
.note summary::-webkit-details-marker { display: none; }
.note ul { margin: 8px 0 0; padding-left: 18px; color: var(--sub); font-size: 14px; }
.note li + li { margin-top: 6px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -6px var(--gutter) 18px; font-size: 12.5px; color: var(--sub); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend b { width: 10px; height: 10px; border-radius: 3px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(128,128,128,.35); }

/* ---------- лента недели ---------- */
.day { display: grid; grid-template-columns: 38px 1fr 1fr; gap: 8px; padding: 0 var(--gutter) 0 10px; margin-bottom: 22px; }
.day-label { text-align: center; padding-top: 2px; }
.day-label .dw { font-size: 13px; color: var(--sub); font-weight: 500; }
.day-label .dn { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }

.slot { display: block; text-align: left; min-width: 0; }
.cover {
  position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-cover); overflow: hidden;
  padding: 10px 10px 12px; display: flex; flex-direction: column; justify-content: space-between;
}
.cover .route { font-size: 11px; font-weight: 600; opacity: .78; line-height: 1.2; padding-right: 22px; }
.cover .hook {
  font-weight: 800; font-size: 15.5px; line-height: 1.08; letter-spacing: -0.015em;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
  text-wrap: balance;
}
.cover.big .hook { font-size: 19px; -webkit-line-clamp: 9; }
.cover.big .route { font-size: 12px; }
.cover .badge {
  position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800;
}
.cover .badge.ok { background: var(--ok); }
.cover .badge.fix { background: var(--fix); }
.cover .paid { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; background: rgba(0,0,0,.14); }
.cover.extra { opacity: .94; }
.cover > * { position: relative; }
.cover .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover.has-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%), linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 22%); }
.cover.has-video > .route, .cover.has-video > .hook, .cover.has-video > .badge { z-index: 1; color: #fff; }
.cover.has-video > .badge { position: absolute; }
.slot .meta { margin-top: 6px; font-size: 13px; line-height: 1.25; }
.slot .meta b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .meta span { color: var(--sub); font-size: 12px; }
.slot:active .cover { transform: scale(.98); transition: transform .08s; }

[data-route="text_broll"] { background: var(--c-text_broll); color: var(--i-text_broll); }
[data-route="voice_broll"] { background: var(--c-voice_broll); color: var(--i-voice_broll); }
[data-route="infographic"] { background: var(--c-infographic); color: var(--i-infographic); box-shadow: inset 0 0 0 1px rgba(20,33,29,.08); }
[data-route="avatar"] { background: var(--c-avatar); color: var(--i-avatar); }
[data-route="ready"] { background: var(--c-ready); color: var(--i-ready); }

/* ---------- карточка ролика ---------- */
.detail-top { display: grid; grid-template-columns: 42% 1fr; gap: 14px; padding: 4px var(--gutter) 20px; align-items: end; }
.detail-top h2 { font-size: 22px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.facts { margin: 0; font-size: 14px; color: var(--sub); }
.facts div + div { margin-top: 3px; }
.facts dt { display: inline; }
.facts dd { display: inline; margin: 0; color: var(--text); }

.status-line { margin: 0 var(--gutter) 16px; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; font-weight: 500; }
.status-line.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.status-line.fix { background: color-mix(in srgb, var(--fix) 13%, transparent); color: var(--fix); }

.section { margin: 0 0 18px; }
.section h3 { margin: 0 var(--gutter) 6px; padding-left: 16px; font-size: 13px; font-weight: 500; color: var(--section-header); }
.section .box { margin: 0 var(--gutter); background: var(--surface); border-radius: var(--r-section); padding: 12px 16px; }
.section .box > p { margin: 0; }
.hook-quote { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }

.beats { list-style: none; margin: 0; padding: 0; }
.beats li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 9px 0; font-size: 15px; }
.beats li + li { border-top: 1px solid var(--separator); }
.beats .tc { color: var(--sub); font-variant-numeric: tabular-nums; font-size: 14px; }

.refs { list-style: none; margin: 0; padding: 0; }
.refs li + li { border-top: 1px solid var(--separator); }
.refs button, .refs .plain { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; text-align: left; }
.refs .acc { color: var(--link); font-weight: 500; }
.refs .plain .acc { color: var(--text); }
.refs .num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.refs .why { grid-column: 1 / -1; color: var(--sub); font-size: 14px; }

.list { margin: 0; padding-left: 18px; }
.list li + li { margin-top: 6px; }
.empty-line { color: var(--sub); }

.comments { list-style: none; margin: 0; padding: 0; }
.comments li { padding: 10px 0; font-size: 15px; }
.comments li + li { border-top: 1px solid var(--separator); }
.comments .who { font-size: 13px; color: var(--sub); margin-bottom: 2px; }
.comments .who.fix { color: var(--fix); }
.comments .who.ok { color: var(--ok); }

/* ---------- ролики ---------- */
.vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; padding: 0 var(--gutter); }
.vthumb { position: relative; aspect-ratio: 9/16; border-radius: var(--r-cover); overflow: hidden; background: #111; }
.vthumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vthumb .badge { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; }
.vthumb .badge.ok { background: var(--ok); }
.vthumb .badge.fix { background: var(--fix); }
.vthumb .ver { position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 6px; }
.player { padding: 0 var(--gutter) 16px; }
.player video { width: 100%; max-height: 72vh; aspect-ratio: 9/16; object-fit: contain; background: #000; border-radius: var(--r-cover); display: block; }

.blank { margin: 40px var(--gutter); text-align: center; color: var(--sub); }
.blank b { display: block; color: var(--text); font-size: 18px; margin-bottom: 6px; }

/* ---------- запасные кнопки вне Telegram / в старых клиентах ---------- */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 10px var(--gutter) calc(10px + var(--safe-bottom)); display: flex; gap: 8px;
  background: var(--surface); border-top: 1px solid var(--separator);
}
.bar button { flex: 1; padding: 13px 0; border-radius: 12px; font-weight: 600; font-size: 15px; }
.bar .primary { background: var(--accent); color: var(--accent-text); }
.bar .secondary { background: var(--bg); color: var(--accent); }
.bar .back { flex: 0 0 auto; padding: 13px 16px; background: var(--bg); }

/* ---------- лист с правками ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 10; animation: fade .18s ease-out; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; background: var(--surface);
  border-radius: 16px 16px 0 0; padding: 18px var(--gutter) calc(16px + var(--safe-bottom));
  max-width: 560px; margin: 0 auto; animation: rise .22s cubic-bezier(.2,.8,.2,1);
}
.sheet h4 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.sheet .for { color: var(--sub); font-size: 14px; margin-bottom: 12px; }
.sheet textarea {
  width: 100%; min-height: 120px; resize: vertical; border-radius: 12px; border: 1px solid var(--separator);
  background: var(--bg); color: var(--text); font: inherit; padding: 12px; font-size: 16px;
}
.sheet .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.sheet .chips button { font-size: 13.5px; padding: 6px 10px; border-radius: 16px; background: var(--bg); color: var(--text); }
.sheet .err { color: var(--destructive); font-size: 14px; margin-top: 8px; min-height: 1em; }
.sheet .bar-inline { display: flex; gap: 8px; margin-top: 12px; }
.sheet .bar-inline button { flex: 1; padding: 13px 0; border-radius: 12px; font-weight: 600; }
.sheet .bar-inline .primary { background: var(--accent); color: var(--accent-text); }
.sheet .bar-inline .secondary { background: var(--bg); }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + var(--safe-bottom)); transform: translateX(-50%); z-index: 20;
  background: rgba(30,30,30,.92); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14.5px;
  animation: fade .2s ease-out;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 340px) {
  .cover .hook { font-size: 13.5px; }
  .day { grid-template-columns: 32px 1fr 1fr; gap: 6px; }
}

/* ---------- идеи ---------- */
.filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gutter) 12px; margin-top: -4px; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 14px; background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--separator); }
.filters button[aria-selected="true"] { background: var(--text); color: var(--bg, #fff); box-shadow: none; font-weight: 600; }
.ideas { display: grid; gap: 8px; padding: 0 var(--gutter) 24px; }
.idea { background: var(--surface); border-radius: var(--r-section); overflow: hidden; position: relative; transition: opacity .2s; }
.idea::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: transparent; }
.idea.is-want::before { background: var(--ok); }
.idea.is-skip { opacity: .55; }
.idea-main { display: grid; gap: 6px; width: 100%; text-align: left; padding: 13px 16px 4px; }
.idea-tags { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sub); }
.idea-tags b { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.idea-tags em { font-style: normal; color: #a07a12; font-weight: 600; }
.idea-hook { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; }
.idea-ref { font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
.idea-more { padding: 4px 16px 2px; }
.idea-more .beats li { font-size: 14px; padding: 7px 0; grid-template-columns: 56px 1fr; }
.idea-cap { margin: 8px 0 0; font-size: 14px; }
.idea-cap b { font-weight: 600; }
.idea-link { margin-top: 8px; color: var(--link); font-size: 14px; padding: 4px 0; }
.idea-act { display: flex; gap: 6px; padding: 8px 12px 12px; }
.idea-act button { flex: 1; padding: 9px 0; border-radius: 10px; font-size: 14px; font-weight: 500; background: var(--separator); color: var(--text); transition: background .15s, color .15s; }
.idea-act [data-mark="want"][aria-pressed="true"] { background: var(--ok); color: #fff; font-weight: 600; }
.idea-act [data-mark="skip"][aria-pressed="true"] { background: var(--text); color: var(--surface); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .idea, .idea-act button { transition: none; } }