@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --canvas: #f3f4f6;
  --paper: #ffffff;
  --ink: #1b1f27;
  --ink-2: #4a5160;
  --ink-3: #8a919e;
  --line: #e2e5ea;
  --line-2: #d3d8df;
  --wait: #d63b2f;
  --wait-bg: #fdecea;
  --new: #2563c9;
  --new-bg: #e8f0fc;
  --sent: #2f8a4a;
  --sent-bg: #e7f4ea;
  --closed: #8a919e;
  --broken: #a8620a;
  --broken-bg: #fff3dc;
  --sel: #e9eefb;
  --sel-line: #b9c7ef;
  --pl-accent: #4f46e5;
  --font: 'Golos Text', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 var(--font); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--ink-3); }
.ink2 { color: var(--ink-2); }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-go] { cursor: pointer; }

.btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--paper); cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.small { height: 30px; padding: 0 10px; font-size: 13px; }

.count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e7e9ee; color: var(--ink-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.count.wait { background: var(--wait); color: #fff; }
.count.new { background: var(--new-bg); color: var(--new); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.dot.wait { background: var(--wait); }
.dot.new { background: var(--new); }
.dot.live { background: #37b24d; box-shadow: 0 0 0 3px #37b24d22; }
.dot.idle { background: #ced4da; }

.st { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.st-waiting { background: var(--wait-bg); color: var(--wait); }
.st-new { background: var(--new-bg); color: var(--new); }
.st-seen { background: transparent; color: var(--ink-3); padding: 0; }
.st-sent { background: var(--sent-bg); color: var(--sent); }
.st-closed { background: #eef0f3; color: var(--ink-2); }
.st-broken { background: var(--broken-bg); color: var(--broken); }

.thumb { position: relative; flex: none; border: 1px solid var(--line); border-radius: 5px; background: #fff center/cover no-repeat; overflow: hidden; }
.thumb.md { display: flex; flex-direction: column; gap: 4px; padding: 7px 6px; background: #fbfbfc; }
.thumb.md i { display: block; height: 3px; border-radius: 2px; background: #d9dde3; }
.thumb.md i:first-child { width: 60%; height: 4px; background: #9aa1ab; }
.thumb .more { position: absolute; right: 3px; bottom: 3px; padding: 0 5px; border-radius: 4px; background: #1b1f27cc; color: #fff; font-size: 11px; }

.row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; }
.row:hover { background: #eceef2; }
.row.sel { background: var(--sel); box-shadow: inset 0 0 0 1px var(--sel-line); }
.row .body { min-width: 0; flex: 1; }
.row .t { font-weight: 500; }
.row .a { color: var(--ink-2); font-size: 13px; }
.row .m { color: var(--ink-3); font-size: 12.5px; }
.row .side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.card { display: flex; flex-direction: column; gap: 7px; }
.card .thumb { width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; }
.card .thumb.md { padding: 16px 14px; gap: 7px; }
.card .thumb.md i { height: 5px; }
.card.wide { grid-column: span 2; }
.card.wide .thumb { aspect-ratio: 32 / 10; }
.card .t { font-weight: 500; font-size: 13.5px; }
.card .m { display: flex; gap: 8px; align-items: center; color: var(--ink-3); font-size: 12.5px; }
.card:hover .thumb { border-color: var(--ink-3); }
.card.waiting .thumb { box-shadow: 0 0 0 2px var(--wait); border-color: var(--wait); }
.card.new .thumb::after { content: ''; position: absolute; top: 7px; right: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--new); box-shadow: 0 0 0 2px #fff; }

.day { margin: 22px 0 10px; font-weight: 600; color: var(--ink-2); font-size: 13px; }
.day:first-child { margin-top: 0; }
.section-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }

.later { position: relative; border: 1.5px dashed #c4cad3; border-radius: 8px; color: var(--ink-3); background: repeating-linear-gradient(-45deg, transparent 0 8px, #f0f2f5 8px 9px); }
.later::before { content: 'потом'; position: absolute; top: -9px; left: 10px; padding: 0 6px; background: var(--paper); color: var(--ink-3); font-size: 11px; font-weight: 600; border-radius: 4px; }

.dot.block { background: #ea580c; box-shadow: 0 0 0 3px #ea580c33; }
.st-block { background: #fde7dc; color: #c2410c; }
.status.blocked > .clip { color: #c2410c; font-weight: 500; }
.thumb.q { align-items: center; justify-content: center; background: #fff4ee; }
.thumb.q b { font-size: 20px; color: #c2410c; }
.thumb.qt { justify-content: flex-start; align-items: flex-start; gap: 6px; padding: 14px 16px; }
.thumb.qt span { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.thumb.qt small { font-size: 12.5px; color: var(--ink-2); }
.status { flex-wrap: wrap; row-gap: 4px; }
.agents span { white-space: nowrap; }
.thumb .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: #1b1f27cc; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.bigplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 22px; border-radius: 30px; background: #1b1f27cc; color: #fff; font-size: 18px; }
.filmstrip { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 4px; }
.fday { flex: none; display: flex; flex-direction: column; gap: 4px; }
.pick .thumb { outline: 2px solid var(--ink); outline-offset: 1px; }
.pick.now .thumb { outline-color: var(--new); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; font-size: 13px; }
.seg span, .seg a { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; color: var(--ink-2); cursor: pointer; }
.seg span.on, .seg a.on { background: var(--ink); color: #fff; }
.newpill { display: inline-flex; align-items: center; height: 30px; cursor: pointer; padding: 0 9px; border-radius: 11px; background: var(--new); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; }
.bell { font-size: 12.5px; padding: 4px 10px; white-space: nowrap; }
.qa .q.sel { background: #fff4ee; box-shadow: inset 3px 0 0 #ea580c; }
.row.r-blocking .t { color: #c2410c; }

.deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: 16px; align-items: start; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.panel.hot { border-color: #f1b8b1; box-shadow: inset 0 3px 0 var(--wait); }
.panel.asleep { background: #fafbfc; }
.panel .nm { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.panel .pj { font-size: 12.5px; color: var(--ink-3); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tile .thumb { width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; box-shadow: 0 0 0 2px var(--wait); border-color: var(--wait); }
.tile.t-broken .thumb { box-shadow: 0 0 0 2px var(--broken); border-color: var(--broken); }
.tile.t-blocking .thumb { box-shadow: 0 0 0 2px #ea580c; border-color: #ea580c; }
.tile .t { font-size: 13.5px; font-weight: 500; }
.tile .a { font-size: 12.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.newrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.newrow .thumb { width: 64px; height: 42px; }
.newrow .thumb::after { content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--new); box-shadow: 0 0 0 1.5px #fff; }
.pfoot { display: flex; gap: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.pfoot a { display: inline-flex; gap: 5px; align-items: center; min-height: 30px; }
.quiet { font-size: 13px; color: var(--ink-3); }
.loose.block { border-color: #f5b48f; background: #fff8f3; }
.loose { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--paper); border: 1px solid #f1b8b1; border-radius: 12px; margin-bottom: 16px; }

/* fake plannotator inside the iframe */
.pl { display: grid; grid-template-columns: 220px 1fr 270px; grid-template-rows: 44px 1fr; height: 100%; background: #f5f6f8; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-family: Inter, 'Segoe UI', sans-serif; font-size: 13px; }
.pl-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #fff; border-bottom: 1px solid #e6e8ec; }
.pl-top b { font-weight: 600; }
.pl-top .sp { flex: 1; }
.pl-top .done { background: var(--pl-accent); color: #fff; padding: 5px 12px; border-radius: 6px; font-weight: 500; }
.pl-left { background: #fff; border-right: 1px solid #e6e8ec; padding: 10px 8px; }
.pl-left .tabs { display: flex; gap: 6px; margin-bottom: 10px; color: #6b7280; font-size: 12px; }
.pl-left .tabs span:nth-child(2) { color: var(--pl-accent); background: #eef0ff; padding: 1px 6px; border-radius: 4px; }
.pl-left .toc { padding: 5px 8px; border-radius: 5px; color: #374151; }
.pl-left .toc:first-of-type { background: #eef0f4; }
.pl-mid { overflow: hidden; padding: 18px 24px; background-image: linear-gradient(#e9ebef 1px, transparent 1px), linear-gradient(90deg, #e9ebef 1px, transparent 1px); background-size: 22px 22px; }
.pl-doc { max-width: 760px; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px #0000001a; padding: 22px 34px; }
.pl-doc h1 { font-size: 22px; margin: 0 0 6px; }
.pl-doc blockquote { margin: 0 0 12px; padding: 6px 12px; border-left: 3px solid #c7cbe8; color: #4b5563; background: #f7f7fc; }
.pl-doc h2 { font-size: 16px; margin: 16px 0 6px; }
.pl-doc mark { background: #fde68a; box-shadow: 0 0 0 2px #fcd34d; border-radius: 2px; }
.pl-doc img { max-width: 100%; border: 1px solid var(--line); border-radius: 6px; display: block; }
.pl-doc .tools { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 6px; color: #4b5563; font-size: 12px; }
.pl-doc .tools span { border: 1px solid #e5e7eb; padding: 2px 8px; border-radius: 5px; }
.pl-right { background: #fff; border-left: 1px solid #e6e8ec; padding: 12px; }
.pl-right .ann { margin-top: 10px; padding: 10px; border: 1px solid #fcd34d; background: #fffbeb; border-radius: 8px; }
.pl-right .ann q { display: block; color: #6b7280; font-size: 12px; margin-bottom: 4px; }
.pl-diff .file { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 5px; font-family: var(--mono); font-size: 12px; }
.pl-diff .add { color: #2f8a4a; } .pl-diff .del { color: #d63b2f; }
.pl-code { font-family: var(--mono); font-size: 12px; line-height: 1.7; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px #0000001a; overflow: hidden; }
.pl-code div { padding: 0 14px; white-space: pre; }
.pl-code .a { background: #e6f6ea; } .pl-code .d { background: #fdecea; }
.pl-code .h { background: #f1f3f5; color: #6b7280; padding: 6px 14px; }

/* read-only article */
.article { max-width: 860px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 28px 40px 36px; }
.article h1 { font-size: 24px; margin: 0 0 8px; letter-spacing: -0.01em; }
.article blockquote { margin: 0 0 16px; padding: 8px 14px; border-left: 3px solid var(--line-2); color: var(--ink-2); background: #f8f9fa; }
.article h2 { font-size: 17px; margin: 22px 0 8px; }
.article img { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; display: block; }
.article table { border-collapse: collapse; } .article td, .article th { border: 1px solid var(--line); padding: 5px 10px; text-align: left; }

.banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.banner.sent { background: var(--sent-bg); color: #1f5e32; }
.banner.closed { background: #eef0f3; color: var(--ink-2); }
.banner.broken { background: var(--broken-bg); color: #7a4706; }
.banner.new { background: var(--new-bg); color: #1d4a94; }
.banner .sp { flex: 1; }

.viewer { display: flex; flex-direction: column; height: 100%; gap: 10px; }
.viewer .stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #e9ebef; border-radius: 10px; padding: 24px; }
.viewer .stage img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 2px 12px #0000001f; background: #fff; }
.viewer .bar { display: flex; align-items: center; gap: 8px; }
.hint { font-size: 13px; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; }

.sentcard { max-width: 640px; margin: 64px auto 0; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 28px 32px; }
.sentcard h2 { margin: 0 0 4px; font-size: 20px; }
.sentcard .q { margin: 14px 0; padding: 10px 14px; border-radius: 8px; background: #f6f7f9; color: var(--ink-2); font-size: 13.5px; }
.sentcard .q div + div { margin-top: 4px; }
.sentcard .next { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px; border: 1px solid var(--line-2); border-radius: 10px; }

.arch { display: grid; grid-template-columns: 110px 1fr; gap: 0 18px; }
.arch .when { padding-top: 12px; color: var(--ink-3); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.arch .entry { padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
.arch .entry .h { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.arch .entry .h b[data-go] { display: inline-flex; align-items: center; min-height: 30px; }
.arch .entry .x { margin-top: 5px; color: var(--ink-2); font-size: 13px; }
.arch .entry .x div { padding-left: 10px; border-left: 2px solid var(--line-2); margin-top: 3px; }
.arch .draw { display: flex; gap: 8px; margin-top: 8px; }
.arch .draw .thumb { width: 150px; height: 94px; }

.qa { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.qa .q { display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
.qa .q:first-child { border-top: 0; }
.qa .n { font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.qa .rec { grid-column: 2; color: var(--ink-2); font-size: 13px; }
.qa .later { grid-row: 1 / 3; grid-column: 3; display: flex; gap: 6px; align-items: center; padding: 8px 10px; }

.status { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; min-width: 0; }
.agents { display: inline-flex; gap: 6px; }
.agents span { font-size: 12px; padding: 1px 7px; border-radius: 10px; background: #eef0f3; color: var(--ink-2); }

.empty { max-width: 560px; margin: 72px auto 0; text-align: center; }
.empty h2 { font-size: 22px; margin: 0 0 6px; }

/* prototype chrome, not part of the design */
.proto-nav { position: fixed; right: 14px; bottom: 14px; z-index: 50; width: 230px; max-height: 70vh; overflow: auto; background: #1b1f27; color: #cfd4db; border-radius: 10px; padding: 8px; font-size: 12.5px; box-shadow: 0 6px 24px #0000004d; }
.proto-nav b { display: block; color: #fff; padding: 4px 8px 6px; }
.proto-nav a { display: block; padding: 4px 8px; border-radius: 5px; }
.proto-nav a:hover, .proto-nav a.on { background: #343a46; color: #fff; }
.proto-nav.min a { display: none; }
body.shot .proto-nav { display: none; }

.phone-wrap { display: flex; gap: 48px; justify-content: center; align-items: flex-start; padding: 36px; }
.phone { width: 390px; height: 800px; border: 10px solid #1b1f27; border-radius: 44px; background: var(--canvas); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 40px #00000026; }
.phone-notes { max-width: 420px; color: var(--ink-2); }
.phone-notes li { margin-bottom: 8px; }