/* Медиакит блогера (шаблон ITcode): одна страница сверху вниз — у рекламодателя медиакит, у владельцев кабинет. Цвета — переменные, блогер переопределяет их в brand.css. */
:root { --serif: Georgia, "Times New Roman", serif; --bg: #f5f5f7; --card: #fff; --ink: #18181b; --muted: #6b6b76; --line: #e4e4ea; --accent: #3b5bdb; --accent-ink: #fff; --soft: #e8ecfb; --ok: #2f7a45; --warn: #b4532a;
  --r: 18px; --pad: 16px; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); /* в полноэкранном Telegram --sat/--sab ставит app.js по safe_area_changed + content_safe_area_changed */
  color-scheme: light dark; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
:root[data-scheme="dark"] { --bg: #111114; --card: #1b1b20; --ink: #f1f1f4; --muted: #a0a0ad; --line: #2c2c34; --soft: #23283d; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); overscroll-behavior: none; }
body { font: 15px/1.45 -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif; padding-bottom: calc(100px + var(--sab)); }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: 23px; margin: 30px var(--pad) 12px; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 19px; }
section { scroll-margin-top: 8px; }
button, .btn { font: inherit; touch-action: manipulation; -webkit-user-select: none; user-select: none; cursor: pointer; }
input, textarea, select { font: inherit; font-size: 16px; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; width: 100%; }
textarea { min-height: 84px; resize: vertical; } textarea.sm { min-height: 56px; }
label.f { display: block; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
label.f > input, label.f > textarea, label.f > select { margin-top: 5px; color: var(--ink); }
.out { margin: 40px var(--pad); text-align: center; color: var(--muted); }
.muted { color: var(--muted); } .small { font-size: 13px; } .warn { color: var(--warn); }
.kicker { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lead { margin: -4px var(--pad) 12px; font-size: 14px; color: var(--muted); }
.note { font-size: 13px; color: var(--muted); margin: 4px 0 8px; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin: 0 var(--pad) 12px; padding: 14px; }
.msg { margin: 0 var(--pad) 12px; padding: 12px 14px; border-radius: 14px; background: var(--soft); font-size: 14px; }
.err { color: var(--warn); font-size: 13px; margin: 8px 0 0; }
.link { border: 0; background: none; color: var(--accent); padding: 0; font-size: 15px; }
.dot { display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--warn); color: #fff; font: 600 12px/20px -apple-system, system-ui, sans-serif; text-align: center; letter-spacing: 0; }
/* шапка медиакита */
.hero { padding: calc(14px + var(--sat)) var(--pad) 0; }
.hero .cover { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 62vh; width: 100%; background: var(--soft); }
.hero .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero .cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.62)); }
.hero .cover .t { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; }
.hero h1 { font-size: 32px; line-height: 1.08; }
.hero .cover h1 { text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.hero .plain h1 { margin-top: 6px; }
.hero .about { margin: 12px 2px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 13px; }
.cover .chip { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px; min-width: 0; }
.kpi b { display: block; font-size: 19px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12px; color: var(--muted); line-height: 1.3; display: block; }
/* быстрые переходы по странице — плитки 2×2, без листания вбок */
.jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px var(--pad) 0; }
.jump a { display: flex; align-items: center; min-height: 52px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.25; }
.jump a:active { transform: scale(.98); }
.preview { margin: calc(12px + var(--sat)) var(--pad) 0; padding: 10px 14px; border-radius: 14px; background: var(--ink); color: var(--bg); font-size: 14px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.preview .link { color: inherit; text-decoration: underline; flex: none; }
/* площадки */
.pf-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.badge { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; }
.b-instagram { background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); } .b-vk { background: #0077ff; } .b-youtube { background: #ff0033; }
.b-tiktok { background: #111; box-shadow: inset 0 0 0 2px #25f4ee; } .b-dzen { background: #111; } .b-telegram { background: #2aabee; }
.pf-h .nm { min-width: 0; flex: 1; } .pf-h .nm b { display: block; overflow-wrap: anywhere; } .pf-h .nm span { font-size: 13px; color: var(--muted); }
.pf-h a.go { flex: none; text-decoration: none; padding: 7px 11px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 13px; }
.reach { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 2px; }
.reach b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } .reach span { font-size: 13px; color: var(--muted); }
.st { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.st-h { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 8px; } .st-h > span:last-child { white-space: nowrap; }
.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; } .nums.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nums.c1 { grid-template-columns: minmax(0, 1fr); }
.nums span { background: var(--soft); border-radius: 12px; padding: 7px 9px; font-size: 11.5px; color: var(--muted); line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.nums b { display: block; color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }
.aud { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.th { aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); position: relative; padding: 0; width: 100%; }
.th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th .pl { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 24px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.th.nofile { display: grid; place-items: center; font-size: 11px; color: var(--muted); text-align: center; padding: 4px; }
.empty { font-size: 13px; color: var(--muted); padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; }
/* прайс */
.pg h3 { margin: 2px 0 6px; } .pg .note { margin: 0 0 6px; }
.pi { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); cursor: pointer; }
.pg h3 + .pi, .pg .note + .pi { border-top: 0; }
.pi input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); padding: 0; }
.pi .nm { flex: 1; min-width: 0; } .pi .nm small { display: block; color: var(--muted); font-size: 12.5px; }
.pi .pr { flex: none; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } .pi .pr.deal { font-weight: 500; color: var(--muted); }
/* ответы */
.qa { border-top: 1px solid var(--line); } .qa:first-child { border-top: 0; }
.qa summary { list-style: none; display: flex; gap: 10px; padding: 12px 0; cursor: pointer; font-weight: 600; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-size: 12px; }
.qa summary .q { flex: 1; } .qa summary::after { content: "+"; color: var(--muted); font-weight: 400; } .qa[open] summary::after { content: "–"; }
.qa .a { white-space: pre-wrap; margin: -4px 0 12px 34px; overflow-wrap: anywhere; }
/* кнопки */
.btn { display: block; width: 100%; border: 0; border-radius: 14px; padding: 13px 16px; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-align: center; text-decoration: none; transition: transform .1s ease-out, opacity .1s; }
.btn:active { transform: scale(.98); opacity: .9; } .btn[disabled] { opacity: .5; }
.btn.ghost { background: var(--soft); color: var(--ink); } .btn.sm { width: auto; display: inline-block; padding: 9px 14px; font-size: 14px; margin-top: 12px; }
.box .btn + .btn, .box .btn.ghost { margin-top: 10px; }
.row2 { display: flex; gap: 8px; margin: 0 var(--pad) 12px; } .row2 .btn { margin: 0; }
/* нижняя панель рекламодателя: «Чат» и «Заявка» */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; padding: 10px var(--pad) calc(10px + var(--sab)); background: linear-gradient(180deg, transparent, var(--bg) 35%); }
.bar .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px; }
.bar .btn { box-shadow: 0 8px 24px rgba(0,0,0,.12); min-height: 52px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; padding: 8px 12px; }
.bar .btn.ghost { background: var(--card); border: 1px solid var(--line); flex-direction: row; gap: 6px; }
.bar .btn small { font-weight: 500; font-size: 12px; opacity: .85; font-variant-numeric: tabular-nums; }
/* экраны: чат, заявка */
.topbar { padding: calc(12px + var(--sat)) var(--pad) 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); margin: 4px 0 14px; }
.check input { width: 20px; height: 20px; flex: none; margin: 0; padding: 0; accent-color: var(--accent); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 8px; } .two .wide { grid-column: 1 / -1; }
.fmt { font-size: 13px; color: var(--muted); margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.fmt b { display: block; color: var(--ink); margin-bottom: 4px; } .fmt span { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; color: var(--ink); }
.fmt i { font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; } .fmt .tot { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; font-weight: 600; }
.chat { display: flex; flex-direction: column; gap: 6px; padding: 4px var(--pad) 12px; min-height: 45vh; }
.chat .c { text-align: center; margin: 30px 0; }
.bub { max-width: 82%; padding: 8px 12px 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; align-self: flex-start; border-bottom-left-radius: 6px; }
.bub.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); border-bottom-left-radius: 16px; border-bottom-right-radius: 6px; }
.bub.me a { color: inherit; } .bub.sys { align-self: center; background: var(--soft); border-color: transparent; font-size: 13px; border-radius: 12px; }
.bub .who { display: block; font-size: 12px; margin-bottom: 2px; opacity: .8; } .bub .tm { display: block; font-size: 11px; opacity: .6; text-align: right; margin-top: 2px; }
.cmp { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: flex-end; padding: 10px var(--pad) calc(10px + var(--sab)); background: var(--bg); border-top: 1px solid var(--line); }
.cmp textarea { min-height: 44px; max-height: 140px; resize: none; } .cmp .btn { width: 48px; height: 44px; flex: none; padding: 0; }
.ch-h { padding: 10px var(--pad) 8px; overflow-wrap: anywhere; } .ch-h .small { display: block; margin-top: 2px; } h2.ch { margin-top: 14px; }
/* кабинет владельцев */
.own-h { padding: calc(18px + var(--sat)) var(--pad) 0; } .own-h h1 { font-size: 28px; line-height: 1.12; margin-top: 4px; }
.cl { display: flex; gap: 10px; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; padding: 11px 0; }
.cl:first-child { border-top: 0; padding-top: 2px; } .cl .nm { flex: 1; min-width: 0; } .cl .nm b { display: block; } .cl .nm > span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl .rt { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rq summary { list-style: none; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.rq summary::-webkit-details-marker { display: none; }
.rq summary .nm { flex: 1; min-width: 0; } .rq summary .nm b { display: block; overflow-wrap: anywhere; } .rq summary .nm span { font-size: 13px; color: var(--muted); }
.rq[open] summary { margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.rq p { margin: 5px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.pill { flex: none; font-size: 12px; padding: 4px 9px; border-radius: 999px; background: var(--soft); white-space: nowrap; }
.pill.s-new { background: var(--accent); color: var(--accent-ink); } .pill.s-done { background: color-mix(in srgb, var(--ok) 18%, transparent); } .pill.s-lost { opacity: .6; }
.stt { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.stt button { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 7px 11px; font-size: 13px; }
.stt button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.acc, .mini { margin: 0 var(--pad) 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.acc > summary, .mini > summary { list-style: none; padding: 14px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.acc > summary::-webkit-details-marker, .mini > summary::-webkit-details-marker { display: none; }
.acc > summary::after, .mini > summary::after { content: "›"; color: var(--muted); transform: rotate(90deg); transition: transform .15s; } .acc[open] > summary::after, .mini[open] > summary::after { transform: rotate(-90deg); }
.acc > div { padding: 0 14px 14px; }
.mini { margin: 10px 0 0; border-radius: 12px; background: var(--bg); } .mini > summary { padding: 10px 12px; font-size: 14px; } .mini > div { padding: 0 12px 12px; }
.ed { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; } .ed:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.ed .x { float: right; border: 0; background: none; color: var(--warn); font-size: 13px; padding: 2px 0; }
.sub-h { font-size: 17px; margin: 16px 0 8px; }
.acc .btn { margin-top: 10px; }
/* просмотр на весь экран */
.viewer { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.94); display: flex; flex-direction: column; }
.viewer .vt, .viewer .vb { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #fff; padding: 10px var(--pad); font-size: 14px; }
.viewer .vt { padding-top: calc(10px + var(--sat)); } .viewer .vb { justify-content: center; padding-bottom: calc(14px + var(--sab)); }
.viewer button { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 999px; padding: 9px 16px; } .viewer button.del { background: rgba(220,70,50,.35); }
.viewer .vm { flex: 1; display: grid; place-items: center; min-height: 0; padding: 0 8px; }
.viewer img, .viewer video { max-width: 100%; max-height: 100%; border-radius: 10px; } .vnote { color: #fff; text-align: center; font-size: 13px; }
.toast { position: fixed; left: var(--pad); right: var(--pad); bottom: calc(92px + var(--sab)); z-index: 30; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: var(--bg); font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.toast.bad { background: var(--warn); color: #fff; }
.made { text-align: center; font-size: 12px; color: var(--muted); margin: 30px 0 8px; } .made a { color: inherit; }
@media (hover: hover) and (pointer: fine) { .btn:hover { opacity: .92; } .jump a:hover, .stt button:hover { border-color: var(--muted); } }
@media (min-width: 640px) { body { max-width: 560px; margin: 0 auto; } .bar { max-width: 560px; margin: 0 auto; } .hero .cover { aspect-ratio: 16 / 11; } .thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* отчёт, аналитика, финансы (19.10.2026) */
.chip.on { background: var(--accent, #2a5bd7); color: #fff; border-color: transparent; }
.kpi i { font-style: normal; font-weight: 600; } .kpi i.up { color: #1a9c5b; } .kpi i.dn { color: #c43d2f; }
.hb { display: grid; gap: 6px; margin-top: 8px; } .hb-r { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.hb-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hb-b { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; } .hb-b i { display: block; height: 100%; background: var(--accent, #2a5bd7); border-radius: 4px; }
.hb-v { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; font-variant-numeric: tabular-nums; } .tbl th { text-align: left; color: var(--muted); font-weight: 500; padding: 4px 6px 4px 0; } .tbl td { padding: 5px 6px 5px 0; border-top: 1px solid var(--line); }
.warn-b { border-color: #e8b84a; } .warn-b p { margin: 6px 0 0; font-size: 14px; }
.deal { margin-top: 12px; padding: 10px; border: 1px dashed var(--line); border-radius: 14px; } .deal .btn { margin-top: 6px; }
.exl { margin-top: 10px; display: grid; gap: 6px; } .ex { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 13px; } .ex b { font-variant-numeric: tabular-nums; } .ex .x { border: 0; background: none; color: var(--muted); font-size: 18px; padding: 0 4px; }
.roles { display: grid; gap: 10px; } .roles .btn { flex-direction: column; min-height: 64px; } .roles .btn small { font-weight: 500; font-size: 12px; opacity: .8; }
.agent .box .warn { color: #c43d2f; } .agr { margin-top: 10px; } .agr .pill { font-size: 11px; }
.fmt-pick { display: grid; gap: 4px; margin: 6px 0 10px; } .fmt-pick b { margin-bottom: 4px; }
.tblw { overflow-x: auto; overscroll-behavior-x: contain; } .tblw .tbl { font-size: 12px; } .tblw .tbl th, .tblw .tbl td { padding-right: 5px; } .tblw .tbl td { white-space: nowrap; } .tblw .tbl th:last-child, .tblw .tbl td:last-child { padding-right: 0; }
/* отчёт и финансы: плитки, кнопки периода, таблица и пояснение — с полями по краям, как карточки (19.10) */
#rp-per, #rp-body > .kpis, #fin-body > .kpis, #fin-body > .tblw, #fin-body > .note { margin-left: var(--pad); margin-right: var(--pad); }
#rp-body > .kpis, #fin-body > .kpis { margin-bottom: 12px; }
/* выбор «нативно / полноценная», «деньги / бартер», «рекламодатель / агент» (19.10) */
.lbl { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.box.pref .chips { margin: 8px 0 6px; } .box.pref .note { margin: 0 0 10px; }
.nr .chips { margin: 6px 0 4px; }
.chips button.chip { font: inherit; font-size: 14px; padding: 8px 13px; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.deal .check { margin: 2px 0 10px; }
/* документы на подпись и проекты роликов (19.10.2026) */
.docs { margin-top: 12px; } .box.docs { padding-top: 10px; } .box.docs > .small { margin: 0 0 6px; }
.doc { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; background: var(--card); }
.doc-h { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; } .doc-h b { min-width: 0; overflow-wrap: anywhere; }
.sgs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; } .sg { font-size: 12px; padding: 3px 8px; border-radius: 8px; background: var(--soft); color: var(--muted); }
.sg.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; } .acts .btn { margin: 0; }
.signf { margin-top: 10px; } .signf .check { margin: 8px 0; }
.doc video { display: block; width: 100%; max-height: 60vh; border-radius: 10px; background: #000; margin: 8px 0; }
.doc .rem { white-space: pre-wrap; } .note.pad { margin-left: var(--pad); margin-right: var(--pad); }
.preview { flex-wrap: wrap; } .preview .link + .link { margin-left: auto; }
.roles .btn { display: flex; flex-direction: column; align-items: center; gap: 2px; } .roles .btn small { display: block; font-weight: 400; font-size: 13px; opacity: .85; }
/* автостатистика Instagram/YouTube (19.10.2026) */
.alink { margin: 8px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--soft); } .alink .lk { margin: 0; font-size: 14px; } .alink .lk.on { color: var(--ok); font-weight: 600; }
.alink .acts { margin-top: 8px; } .alink .f { margin-top: 6px; }
.alink p, .toast { overflow-wrap: anywhere; } .alink .note.warn a { word-break: break-all; }
/* файлы в чате и привязка ручной записи (20.10.2026) */
.cmp .att { width: 44px; height: 44px; flex: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; }
.cmp .att.busy { opacity: .5; pointer-events: none; }
.bub .fimg { display: block; margin: 2px 0 4px; } .bub .fimg img { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; }
.bub .ffile { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin: 2px 0 4px; font-weight: 600; text-decoration: none; } .bub .ffile span { overflow-wrap: anywhere; min-width: 0; } .bub .ffile small { font-weight: 400; opacity: .7; }
.lnk { display: grid; gap: 8px; margin-top: 12px; } .lnk .lrow { display: grid; gap: 4px; } .lnk code { overflow-wrap: anywhere; font-size: 13px; user-select: all; }
/* файлы заявки (20.10.2026) */
.upl { cursor: pointer; } .upl.busy { opacity: .5; pointer-events: none; }
.rfiles { display: grid; gap: 6px; margin-top: 12px; } .rfile { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .rfile a { font-weight: 600; overflow-wrap: anywhere; min-width: 0; } .rfile .link { margin-left: auto; }
/* кабинет по вкладкам, экран заявки, этапы (20.10.2026) */
.otabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--card); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + var(--sab)); }
.otabs button { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border: 0; background: none; color: var(--muted); border-radius: 12px; font-size: 11px; }
.otabs button i { font-style: normal; font-size: 20px; line-height: 1.2; } .otabs button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.otabs button.on { color: var(--accent); background: var(--soft); } .otabs .dot { position: absolute; top: 2px; left: 55%; min-width: 18px; height: 18px; font-size: 11px; line-height: 18px; padding: 0 5px; }
.otabs button:active { transform: scale(.96); }
.subtabs { margin: 18px var(--pad) 0; }
.rqf { margin: 0 0 10px; }
.rqrow { display: grid; gap: 4px; width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.rqrow:active { transform: scale(.99); }
.rq-t { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; } .rq-t b { min-width: 0; overflow-wrap: anywhere; } .rq-t .pill { flex-shrink: 0; white-space: nowrap; }
.rq-p { display: flex; gap: 8px; align-items: center; } .rq-next { font-size: 13px; color: var(--ink); } .rq-next.late { color: var(--warn); font-weight: 600; }
.prg { display: inline-block; flex: 1 1 auto; max-width: 160px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; vertical-align: middle; } .prg i { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.rq-hd { margin: 4px var(--pad) 8px; } .rq-hd h1 { font-size: 26px; overflow-wrap: anywhere; } .rq-hd p { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 0; }
.rtabs { position: sticky; top: var(--sat); z-index: 20; display: flex; gap: 4px; margin: 0 0 12px; padding: 8px var(--pad); background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.rtabs::-webkit-scrollbar { display: none; }
.rtabs button { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--card); color: var(--ink); font-weight: 600; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.rtabs button.on { background: var(--accent); color: var(--accent-ink); }
.rqs > details > summary { display: none; } .rqs > details { margin-top: 0; }
.rqd .docs { margin: 0 var(--pad); }
.wk-top { display: flex; gap: 8px; align-items: center; margin: 0 var(--pad) 10px; }
.wk { display: grid; gap: 6px; } .wk-h { display: flex; gap: 10px; align-items: center; } .wk-h b { min-width: 0; overflow-wrap: anywhere; font-size: 16px; }
.wk-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--soft); color: var(--accent); font-weight: 700; font-size: 14px; }
.wk-done .wk-n { background: var(--ok); color: #fff; } .wk-m { margin: 0; }
.steps { display: grid; gap: 4px; margin-top: 4px; }
.stp { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.stp > summary { list-style: none; display: flex; gap: 8px; align-items: center; padding: 10px 12px; cursor: pointer; } .stp > summary::-webkit-details-marker { display: none; }
.stp > summary i { font-style: normal; flex: none; width: 24px; text-align: center; } .stp > summary span { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px; } .stp > summary em { flex: none; font-style: normal; font-size: 12px; color: var(--muted); }
.stp.s-done > summary { opacity: .7; } .stp.s-done > summary i { color: var(--ok); font-weight: 700; }
.stp.s-cur { border-color: var(--accent); background: var(--card); } .stp.s-cur > summary em { color: var(--accent); font-weight: 600; }
.stp.late > summary em { color: var(--warn); }
.stp-b { padding: 0 12px 12px; } .stp-b .tz { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 6px; }
.wfiles { display: grid; gap: 4px; margin: 0 0 8px; } .wfiles a { font-weight: 600; overflow-wrap: anywhere; }
.row-in { display: flex; gap: 8px; } .row-in input { min-width: 0; } .row-in .btn { flex: none; }
.wk-ed > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 6px 0 0; } .wform { margin-top: 8px; }
.stp-b code { overflow-wrap: anywhere; }
.rqrow { width: calc(100% - var(--pad) * 2); } .rqf { margin: 0 var(--pad) 10px; }
.rtabs button { flex: 1 1 auto; justify-content: center; padding: 8px 10px; font-size: 13.5px; }
@media (max-width: 360px) { .otabs button { font-size: 10px; } .rtabs { gap: 3px; padding: 8px 10px; } .rtabs button { padding: 7px 8px; font-size: 12.5px; } }
/* вкладки рекламодателя (20.10.2026): кнопка заявки — над нижними вкладками */
body { padding-bottom: calc(150px + var(--sab)); }
.bar.above { bottom: calc(60px + var(--sab)); padding: 8px var(--pad) 6px; background: linear-gradient(180deg, transparent, var(--bg) 40%); }
.bar .in.one { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .otabs { max-width: 560px; margin: 0 auto; } }
.viewer { z-index: 60; } /* выше нижних вкладок */
.toast { z-index: 70; bottom: calc(132px + var(--sab)); } /* над вкладками и кнопкой заявки */
/* прочитано (20.10.2026): ✓ — отправлено, ✓✓ — собеседник открыл чат после этого сообщения */
.tk { font-style: normal; letter-spacing: -3px; margin-left: 2px; } .tk.rd { color: #4fc3f7; } .bub.me .tk.rd { color: #b3e5fc; }
.seen { align-self: flex-end; margin: -2px 4px 4px; font-size: 11px; color: var(--muted); }
.tk { font-size: 13px; font-weight: 700; } .bub.me .tk { color: #fff; opacity: .55; } .bub.me .tk.rd { color: #fff; opacity: 1; }

/* полноэкранный Telegram (20.10.2026, Виталий: «наезжает на экран, проверь все экраны»): липкие вкладки заявки — ниже кнопок Telegram */
.cmp { padding-bottom: calc(10px + var(--sab)); }
#view.padtop { padding-top: var(--sat); } #view.padtop > .preview:first-child { margin-top: 12px; } /* экраны без шапки и без «← Назад» */
/* чат как в мессенджере (20.10.2026): экран во всю видимую высоту, лента листается внутри, поле ввода — у клавиатуры */
body.chatmode { padding-bottom: 0; overflow: hidden; overscroll-behavior: none; }
body.chatmode .made { display: none; }
body.chatmode #view { position: fixed; left: 0; right: 0; top: var(--vvt, 0px); height: var(--vh, 100dvh); display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
body.chatmode #view > :not(.chat):not(.cmp) { flex: none; }
body.chatmode .chat { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
body.chatmode .cmp { position: static; flex: none; }
body.chatmode .lead { font-size: 13px; margin-bottom: 6px; } body.chatmode h2.ch { margin-top: 8px; }
@media (min-width: 640px) { body.chatmode #view { max-width: 560px; margin: 0 auto; } }
body.chatmode .toast { bottom: calc(84px + var(--sab)); }
/* кто открывал бот (20.10.2026) */
.bp { display: grid; gap: 0; padding: 4px 14px; } .bp-r { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); } .bp-r:last-child { border-bottom: 0; }
.bp-r .nm { display: grid; gap: 2px; min-width: 0; } .bp-r .nm b { overflow-wrap: anywhere; } .bp-a { display: flex; gap: 8px; flex-wrap: wrap; } .bp-a .btn { margin-top: 0 !important; }
.va { margin: 10px var(--pad) 10px; } .va b { font-weight: 700; } .va-btn { margin: 0 0 8px; } label.upl.ro { opacity: .45; pointer-events: none; }
.preview.va { display: block; line-height: 1.45; } .preview.va .link { margin-left: 6px; }
/* голосовые и кружки (21.10.2026) */
.cmp, body.chatmode .cmp { position: relative; }
.cmp .mic { font-size: 20px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cmp:not(.has-t) .mic ~ .snd { display: none; } .cmp.has-t .mic { display: none; }
.cmp.recording .mic { transform: scale(1.18); background: var(--warn); border-color: var(--warn); }
.recbar { position: absolute; left: var(--pad); right: calc(var(--pad) + 60px); top: 10px; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.recbar[hidden] { display: none; }
.recbar .rdot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; flex: none; animation: rblink 1s infinite; }
.recbar .rhint { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@keyframes rblink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .recbar .rdot { animation: none; } }
.cprev { position: fixed; left: 50%; bottom: calc(160px + var(--sab)); transform: translateX(-50%); width: min(60vw, 240px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; z-index: 30; box-shadow: 0 10px 40px rgba(0,0,0,.35); background: #000; }
.cprev[hidden] { display: none; }
.cprev video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.vn { display: flex; align-items: center; gap: 10px; min-width: 200px; margin: 2px 0 2px; }
.vn .vp { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 15px; padding: 0; touch-action: manipulation; }
.bub.me .vn .vp { background: var(--accent-ink); color: var(--accent); }
.vn .vbar { flex: 1; height: 6px; border-radius: 3px; background: currentColor; opacity: .25; position: relative; min-width: 60px; }
.vn .vbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: currentColor; }
.vn .vd { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .75; flex: none; }
.bub.bare { background: none; border-color: transparent; padding: 0; }
.bub.bare .tm { color: var(--muted); opacity: 1; }
.cn { position: relative; width: min(56vw, 220px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #000; cursor: pointer; touch-action: manipulation; }
.cn video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cn .vd { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 12px; color: #fff; background: rgba(0,0,0,.45); padding: 1px 7px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.cn .cplay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 30px; text-shadow: 0 2px 8px rgba(0,0,0,.5); pointer-events: none; }
.cn.on .cplay { display: none; }
/* ответ на сообщение (21.10.2026) */
.bub { touch-action: pan-y; transition: transform .18s ease-out, box-shadow .3s; position: relative; }
.bub.swr::after { content: "↩"; position: absolute; right: -30px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--accent); }
.bub.hl { box-shadow: 0 0 0 3px var(--accent); }
.bub .rq { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid currentColor; background: rgba(127,127,127,.12); color: inherit; border-radius: 8px; padding: 4px 8px; margin: 2px 0 6px; font-size: 13px; line-height: 1.3; }
.bub .rq b { display: block; font-size: 12px; } .bub .rq span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: .85; white-space: normal; }
.bub.bare .rq { color: var(--ink); background: var(--soft); }
.rbar { display: flex; align-items: center; gap: 10px; padding: 8px var(--pad); background: var(--card); border-top: 1px solid var(--line); }
.rbar[hidden] { display: none; }
.rbar .rbi { color: var(--accent); font-size: 18px; flex: none; }
.rbar .rbt { flex: 1; min-width: 0; border-left: 3px solid var(--accent); padding-left: 8px; font-size: 13px; line-height: 1.3; }
.rbar .rbt b { display: block; color: var(--accent); font-size: 12px; } .rbar .rbt span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.rbar .rbx { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 15px; padding: 0; }
@media (prefers-reduced-motion: reduce) { .bub { transition: none; } }
.recbar .rcx { border: 0; background: var(--soft); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; margin-left: auto; }
.recbar .rhint:has(.rcx) { overflow: visible; }
/* данные для маркировки (24.10.2026) */
.mark { margin-bottom: 12px; } .mark .lbl { margin-top: 0; } .mark .check { margin: 4px 0 8px; } .mark .mk-open { margin: 8px 0 10px; font-size: 14px; color: var(--ink); }
.mk-g { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 6px; } .mk-g .check { margin: 2px 0 6px; }
.mk-rc { margin: 0 0 12px; } .mk-v { margin: -4px 0 12px; } .mk-v a, .mk-dl a { overflow-wrap: anywhere; }
.mk-dl { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 6px 10px; margin: 10px 0 12px; font-size: 14px; }
.mk-dl dt { color: var(--muted); } .mk-dl dd { margin: 0; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.mk-t { margin: 4px 0 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
.mkp { margin-top: 10px; } .mkp .pill { font-size: 11px; }
@media (max-width: 360px) { .mk-dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .mk-dl dd { margin-bottom: 8px; } }
/* календарь и условия договора (27.10.2026) */
.cal { padding: 12px 10px; }
.cal-h { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 8px; } .cal-h b { font-size: 16px; } .cal-h .link { font-size: 26px; line-height: 1; min-width: 44px; min-height: 44px; }
.cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-g .cw { text-align: center; font-size: 11px; color: var(--muted); padding: 2px 0 4px; }
.cal-g .cd { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 46px; padding: 5px 0 4px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--ink, inherit); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cal-g .cd.c-out { opacity: .38; } .cal-g .cd.c-today { border-color: var(--accent); } .cal-g .cd.c-busy { background: var(--soft); } .cal-g .cd.c-sel { background: var(--accent); color: #fff; }
.cal-g .cd:active { transform: scale(.95); }
.cal-g .cd i, .cal-leg em { display: flex; gap: 3px; font-style: normal; } .cal-g .cd i em, .cal-leg em { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9aa0aa; }
.k-pub { background: var(--accent) !important; } .k-tz, .k-erid, .k-draft { background: #e0a020 !important; } .k-pay { background: #2ea86b !important; } .k-keep, .k-stat { background: #9aa0aa !important; }
em.late, .cal-g .cd i em.late { background: #e5484d !important; } .cal-g .cd.c-sel i em { box-shadow: 0 0 0 1.5px #fff; }
.cal-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 10px 4px 0; } .cal-leg span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cal-list { margin: 0 var(--pad); }
.cal-list h3 { font-size: 15px; margin: 14px 2px 8px; }
.ev { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.ev.late { border-color: #e5484d; } .ev.done { opacity: .7; } .ev-i { flex: none; font-size: 20px; line-height: 1.2; }
.ev-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ev-t b { overflow-wrap: anywhere; font-weight: 600; }
.ev-rd { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } .ev-rd i { font-style: normal; font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--soft); } .ev-rd i.no { background: #fde8e8; color: #b42318; }
.ev-a { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .ev-a .link { font-size: 13px; white-space: nowrap; min-height: 32px; }
.terms summary { display: flex; flex-direction: column; gap: 2px; cursor: pointer; } .terms .two { margin-top: 10px; }
.busy-n { display: block; margin-top: 4px; }
:root[data-scheme="dark"] .ev-rd i.no { background: #3b1f22; color: #ffb4b0; }
/* из чата — в заявку; ответ на файл свайпом (27.10.2026) */
.ch-rq { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .ch-rq .chip { font-size: 13px; padding: 6px 11px; min-height: 32px; }
.bub .link.inl { display: inline; padding: 0; min-height: 0; font: inherit; text-decoration: underline; color: inherit; font-weight: 600; }
.ffile, .fimg, .fimg img { -webkit-user-drag: none; -webkit-touch-callout: none; }
/* правка сообщений: меню по нажатию на пузырь (27.10.2026) */
.bmenu { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 8px; } .bmenu.me { justify-content: flex-end; }
.bmenu button { font: inherit; font-size: 14px; padding: 7px 12px; min-height: 36px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bmenu button:active { transform: scale(.96); } .rbar.ed .rbi { font-size: 16px; }
/* монтаж (27.10.2026) */
.own-acts { display: flex; flex-wrap: wrap; gap: 8px; } .mont-f .chips { margin: 6px 0 14px; } .mt-it video { width: 100%; max-height: 70vh; border-radius: 12px; background: #000; margin-top: 8px; }
.mt-it p { overflow-wrap: anywhere; } h3.pad { margin: 18px var(--pad) 8px; }
.msg.warn { border-color: #e0a020; background: color-mix(in srgb, #e0a020 12%, var(--card)); margin: 0 0 10px; }

/* Рукописная подпись в PDF внутри мини-приложения. */
.hw-modal { position:fixed;inset:0;z-index:100;background:var(--bg);overflow:auto;overscroll-behavior:contain;padding:calc(12px + var(--sat)) var(--pad) calc(32px + var(--sab)); }
.hw-body { max-width:760px;margin:auto; }
.hw-head { display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;background:var(--bg);z-index:3;padding:8px 0; }
.hw-head h2 { margin:0;font-size:23px; }
.hw-pad { display:block;width:100%;height:160px;background:#fff;border:1px solid var(--line);border-radius:12px;touch-action:none; }
.hw-nav { display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0; }
.hw-page { position:relative;width:100%;background:#fff;border:1px solid var(--line);margin:10px 0 14px; }
.hw-page > img:first-child { display:block;width:100%;height:auto; }
.hw-ink { position:absolute;object-fit:fill;touch-action:none;user-select:none;cursor:move;outline:1px dashed var(--accent); }
.doc-history { margin:12px 0;color:var(--muted); }
.doc-history > .doc { margin-top:10px; }

/* Browser cabinet shares the miniapp API and data, with desktop workspace. */
.web-header {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.web-brand {font-family:var(--serif);font-size:22px;font-weight:700;text-decoration:none;color:var(--ink)}
.web-tools {display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.web-tools button {min-height:40px;font-size:14px}
.web-login {max-width:560px;margin:24px auto;padding:24px}
.web-login h2 {margin:0 0 14px}
.web-login li {margin:8px 0}
.web-login form {margin-top:20px}
.web-login input {letter-spacing:.12em;text-transform:uppercase}
.web button:focus-visible,.web a:focus-visible {outline:3px solid var(--accent);outline-offset:3px}
@media(min-width:900px) {
  html.web body {max-width:1120px;padding-bottom:130px}
  .web .otabs,.web .bar {max-width:1120px}
  .web .hero {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;padding-top:28px}
  .web .hero .cover {grid-row:1/3;aspect-ratio:4/3;max-height:420px}
  .web .hero .about {font-size:19px;margin:0;align-self:end}
  .web .hero .kpis {margin:0;align-self:start}
  .web #s-pf:not([hidden]) {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .web #s-pf>h2 {grid-column:1/-1}
  .web .otabs button {padding:10px;font-size:14px;flex-direction:row;justify-content:center;gap:10px}
  .web body.chatmode #view {max-width:1120px}
  .web .toast {max-width:700px;margin:auto}
}
@media(max-width:600px){.web-login {margin:16px;padding:18px}.web-header{gap:6px}.web-tools{gap:12px}}

.web body.chatmode .web-header {display:none}