@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#eef2fb; --muted:#8993a5; --line:#273142; --paper:#0a0d13; --card:#121721; --accent:#6690ff; --accent-bg:#182544; --green:#55d991; --green-bg:#173326; --red:#ff7469; --red-bg:#38211f; --amber:#f2ba52; --amber-bg:#352b1b; --nav:#080b10; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(circle at 72% -12%, #172443 0, transparent 38%),var(--paper); color:var(--ink); font-family:'Manrope',sans-serif; font-size:14px; }
a { color:inherit; }
button,input,select { font:inherit; }
main { min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; width:224px; background:rgba(8,11,16,.95); color:#dce4f4; padding:28px 20px; display:flex; flex-direction:column; z-index:10; border-right:1px solid #202838; backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:11px; border:0; padding:0; background:none; color:inherit; text-decoration:none; font-weight:700; letter-spacing:-.02em; font-size:14px; cursor:pointer; }
.brand span span { color:#6f788b; font-weight:500; }
.brand-mark { width:29px; height:29px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(135deg,#81a4ff,#507af0); color:#07132e; font-family:'Manrope',sans-serif; font-weight:800; font-size:14px; box-shadow:0 0 24px #6690ff38; }
nav { margin-top:32px; display:grid; gap:3px; overflow-y:auto; scrollbar-width:none; }
nav::-webkit-scrollbar { display:none; }
nav button { width:100%; color:#778195; border:0; background:transparent; text-align:left; padding:8px 10px; border-radius:8px; font-size:12px; display:flex; gap:12px; align-items:center; transition:.2s; cursor:pointer; }
nav button i { font-style:normal; font-size:9px; color:#505a6d; font-weight:700; letter-spacing:.08em; }
nav button:hover, nav button.active { color:#f5f7ff; background:#151d2c; }
nav button.active:after { content:""; margin-left:auto; width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px #6690ff99; }
.overview-parent { font-weight:700; }
.overview-parent.group-active { color:#b8c6e8; }
.overview-parent .nav-caret { margin-left:auto; color:#65728a; font-size:11px; }
.overview-parent.active .nav-caret { display:none; }
.nav-subgroup { position:relative; display:grid; gap:2px; margin:1px 0 4px 16px; padding-left:10px; }
.nav-subgroup:before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:#273247; }
.nav-subgroup button { padding:6px 8px; font-size:11px; color:#6f7b91; }
.nav-subgroup button i { font-size:8px; }
.nav-subgroup button.active { color:#dbe4ff; background:#131d30; }
.nav-divider { height:1px; margin:5px 8px; background:#202838; }
.sidebar-foot { margin-top:auto; color:#727c8f; font-size:10px; }
.legend { display:grid; gap:8px; border-bottom:1px solid #202838; padding-bottom:18px; margin-bottom:16px; }
.legend span { display:flex; gap:9px; align-items:center; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex:0 0 auto; background:var(--green); box-shadow:0 0 0 3px var(--green-bg); }
.dot.bad { background:var(--red); box-shadow:0 0 0 3px var(--red-bg); }
.dot.unknown { background:var(--amber); box-shadow:0 0 0 3px var(--amber-bg); }
.sidebar .dot { box-shadow:none; }
.content { margin-left:224px; padding:46px clamp(28px,4vw,64px) 30px; max-width:1560px; }
header { display:flex; justify-content:space-between; gap:30px; align-items:flex-start; margin-bottom:32px; }
.kicker,.section-title>div>span { text-transform:uppercase; letter-spacing:.16em; color:#7486ad; font-size:10px; font-weight:800; margin:0 0 8px; }
h1,h2 { font-family:'Manrope',sans-serif; margin:0; letter-spacing:-.045em; }
h1 { font-size:38px; line-height:1.12; font-weight:700; }
.subtitle { color:var(--muted); margin:10px 0 0; font-size:13px; }
.subtitle a { color:var(--red); font-weight:700; text-decoration:none; border-bottom:1px solid #7c3733; }
.refresh-panel { text-align:right; color:var(--muted); font-size:11px; display:grid; gap:12px; }
.refresh-panel>div { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.fresh-dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px var(--green-bg); }
.switch-row { display:flex; justify-content:flex-end; align-items:center; gap:9px; cursor:pointer; }
.switch-row input { position:absolute; opacity:0; }
.switch { width:31px; height:17px; border-radius:20px; background:#35423c; padding:2px; transition:.2s; }
.switch:after { content:""; display:block; width:13px; height:13px; border-radius:50%; background:#dce7e1; transition:.2s; box-shadow:0 1px 3px #0008; }
.switch-row input:checked+.switch { background:var(--accent); }
.switch-row input:checked+.switch:after { transform:translateX(14px); }
.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.summary-card,.card { background:linear-gradient(145deg,rgba(20,26,37,.98),rgba(15,20,29,.98)); border:1px solid var(--line); border-radius:13px; box-shadow:0 14px 36px rgba(0,0,0,.16); }
.summary-card { padding:18px 20px; min-width:0; }
.summary-card>p { margin:0 0 12px; color:var(--muted); font-size:11px; }
.summary-card>strong { font-family:'Manrope',sans-serif; font-size:28px; font-weight:700; line-height:1; letter-spacing:-.05em; }
.summary-card>strong small { font-family:'Manrope',sans-serif; color:#9ba49f; font-size:11px; font-weight:500; }
.summary-card>span { display:block; color:#7d8799; font-size:9px; margin-top:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.good-text { color:var(--green)!important; }
.bad-text { color:var(--red)!important; }
.mini-bar { display:flex; gap:3px; margin-top:16px; }
.mini-bar i { display:block; height:4px; flex:1; border-radius:4px; background:#43b878; box-shadow:0 0 8px #43b87824; }
.mini-bar i.bad { background:var(--red); }.mini-bar i.unknown { background:var(--amber); }
.services-bar { gap:2px; }.services-bar i { height:7px; min-width:2px; }
.backup-line { height:4px; background:#243029; position:relative; border-radius:5px; margin-top:16px; }
.backup-line span { display:block; height:100%; width:46%; background:#4cae75; border-radius:5px; }.backup-line i { position:absolute; left:46%; top:-3px; height:10px; width:1px; background:var(--green); }.backup-line b { position:absolute; right:0; top:-2px; width:8px; height:8px; border:1px solid #58665f; border-radius:50%; background:#17201c; }
.task-name { color:#bec8dc; font-size:10px; margin-top:16px; padding-bottom:5px; border-bottom:4px solid #223456; }
.card { padding:24px; margin-bottom:14px; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }
.section-title h2 { font-size:23px; font-weight:600; }
.count-badge { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:var(--red); background:var(--red-bg); font-size:11px; font-weight:700; }
.attention { border-color:#55302d; box-shadow:inset 3px 0 0 var(--red),0 14px 40px #0002; }
.attention-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.attention-list>div { background:#211816; border:1px solid #422825; border-radius:8px; padding:13px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }
.alert-icon,.unknown-icon { width:25px; height:25px; display:grid; place-items:center; border-radius:7px; color:var(--red); background:var(--red-bg); font-weight:800; font-size:12px; }
.unknown-icon { color:var(--amber); background:var(--amber-bg); }
.attention-list strong { font-size:12px; }.attention-list p { margin:3px 0 0; color:var(--muted); font-size:10px; }.attention-list time,.row time { color:#68766e; font-size:9px; white-space:nowrap; }
.two-col { display:grid; grid-template-columns:1.15fr .85fr; gap:14px; }
.section-stat { font-size:10px; color:#8b968f; }.section-stat b { color:var(--ink); }
.rows { border-top:1px solid var(--line); }
.row { display:grid; grid-template-columns:auto minmax(110px,1fr) minmax(100px,auto) 70px; align-items:center; gap:12px; padding:12px 2px; border-bottom:1px solid #222b3b; }
.row-main { display:grid; gap:3px; min-width:0; }.row-main strong { font-size:11px; }.row-main span { color:#7d8799; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-note { font-size:9px; color:var(--green); text-align:right; }.row-note.bad { color:var(--red); }.row-note.unknown { color:var(--amber); }
.text-button { border:0; background:none; color:#88a7ff; padding:16px 0 0; font-size:10px; font-weight:700; cursor:pointer; }.text-button span { padding-left:5px; }
.checkin-list>div { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:10px 0 16px; border-bottom:1px solid var(--line); }
.ring { width:52px; height:52px; border-radius:50%; border:5px solid #24352c; border-top-color:var(--green); display:grid; place-content:center; text-align:center; }.ring.lime { border-top-color:#9fc956; }.ring strong { font-family:'Manrope',sans-serif; font-size:14px; font-weight:700; line-height:1; }.ring span { font-size:7px; color:var(--muted); }
.checkin-list strong { font-size:11px; }.checkin-list p { margin:4px 0 0; font-size:9px; color:var(--muted); }
.pill { font-size:8px; font-weight:700; padding:5px 8px; border-radius:20px; }.ok-pill { color:var(--green); background:var(--green-bg); }
.window-scale { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; margin-top:18px; color:#65736b; font-size:8px; }.window-scale i { height:3px; background:#243029; border-radius:4px; }.window-scale b { display:block; height:100%; background:#4a9c6b; border-radius:4px; }
.services-section { padding-bottom:18px; }
.segmented { padding:3px; background:#0d1118; border:1px solid #222b3b; border-radius:7px; display:flex; }.segmented button { border:0; background:transparent; color:#7a8496; padding:6px 10px; border-radius:5px; font-size:9px; cursor:pointer; }.segmented button.selected { background:var(--accent-bg); color:#cbd7ff; box-shadow:inset 0 0 0 1px #304a80,0 1px 6px #0005; }
.service-map { display:grid; grid-template-columns:repeat(20,1fr); gap:4px; margin-bottom:20px; }.service-map button { border:1px solid #254734; height:24px; border-radius:4px; background:#183326; color:#67d99b; font-size:7px; cursor:help; }.service-map button.bad { border-color:#5b2f2b; background:var(--red-bg); color:var(--red); }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:10px; } th { color:#758095; font-size:8px; text-transform:uppercase; letter-spacing:.08em; text-align:left; padding:0 10px 9px; } td { padding:10px; border-top:1px solid #222b3b; color:#8a95a8; } td:first-child { color:var(--ink); width:36%; }
details summary { cursor:pointer; list-style:none; } details summary::-webkit-details-marker { display:none; }
td summary { display:flex; align-items:center; gap:10px; } td code { display:block; margin:8px 0 0 18px; width:max-content; max-width:100%; background:#0c1017; border:1px solid var(--line); padding:6px; border-radius:4px; color:#a1abc0; user-select:all; }
.server-tag { background:#1a2230; border:1px solid #2b3548; border-radius:4px; padding:4px 7px; font-size:8px; color:#98a3b8; }.footnote { color:#6f798c; font-size:8px; margin:12px 0 0; }
.wide-left { grid-template-columns:1.25fr .75fr; }
.schedule-row { border-top:1px solid var(--line); }.schedule-row summary { display:grid; grid-template-columns:minmax(160px,1fr) 65px 90px 16px; align-items:center; gap:10px; padding:13px 2px; }.next-time { display:flex; align-items:center; gap:13px; }.next-time span { width:90px; color:var(--accent); font-size:9px; }.next-time b { font-size:10px; }.run-state { display:flex; align-items:center; gap:8px; color:var(--green); font-size:9px; }.run-state.bad { color:var(--red); }.chevron { color:#8f9993; }.schedule-detail { padding:0 0 12px 103px; color:var(--muted); font-size:9px; }
.business-card select { border:1px solid var(--line); background:#0d1118; border-radius:6px; padding:6px 8px; color:#aeb8cc; font-size:9px; }.business-kpis { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.business-kpis>div { padding:14px; background:#0d1118; border:1px solid #222b3b; border-radius:8px; display:grid; }.business-kpis span,.revenue>span { color:var(--muted); font-size:9px; }.business-kpis strong { font-family:'Manrope',sans-serif; font-size:26px; font-weight:700; letter-spacing:-.05em; margin:4px 0; }.business-kpis small,.revenue small { color:#788396; font-size:7px; }
.revenue { padding:18px 0 14px; border-bottom:1px solid var(--line); }.revenue div { display:flex; gap:20px; margin:6px 0; }.revenue strong { font-family:'Manrope',sans-serif; font-size:17px; font-weight:700; letter-spacing:-.03em; }
.orders { padding:14px 0; border-bottom:1px solid var(--line); }.orders summary { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; color:#8c97aa; font-size:9px; }.orders summary>b { font-size:8px; color:#9aa6bb; }.stacked { height:6px; display:flex; gap:2px; }.stacked i { background:var(--green); }.stacked i:nth-child(2){background:#82b696}.stacked i:nth-child(3){background:var(--amber)}.stacked i:nth-child(4){background:var(--red)}
.order-detail { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:12px; font-size:8px; }.order-detail span { display:flex; align-items:center; gap:6px; }.order-detail b { margin-left:auto; }.order-detail i { width:6px; height:6px; border-radius:50%; background:var(--green); }.order-detail .s2{background:#82b696}.order-detail .s3{background:var(--amber)}.order-detail .s4{background:var(--red)}
.admin-link { display:flex; justify-content:space-between; color:var(--accent); text-decoration:none; font-size:9px; font-weight:700; padding-top:15px; }
.projects-section { margin-top:0; }.search { display:flex; align-items:center; gap:7px; border:1px solid var(--line); padding:7px 9px; border-radius:7px; color:#707b8e; background:#0d1118; }.search input { border:0; outline:0; width:120px; font-size:9px; color:var(--ink); background:transparent; }.search input::placeholder{color:#687286}.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.project { padding:16px; border:1px solid var(--line); background:#0f141d; border-radius:9px; text-decoration:none; transition:.2s; }.project:hover { border-color:#4365ae; transform:translateY(-2px); background:#131b29; box-shadow:0 10px 28px #0005; }.project-top { display:flex; justify-content:space-between; align-items:start; margin-bottom:18px; }.project-icon { width:28px; height:28px; border-radius:7px; display:grid; place-items:center; background:var(--accent-bg); color:#86a6ff; font-family:'Manrope',sans-serif; font-weight:800; }.external { color:#697589; }.project>strong { font-size:11px; }.project>p { color:var(--muted); font-size:9px; min-height:25px; margin:6px 0 16px; }.project>div:last-child { display:flex; justify-content:space-between; color:#737e91; font-size:7px; }.project>div:last-child b { color:var(--green); }.project.frozen { opacity:.65; }.project.frozen>div:last-child b { color:#7c8799; }.project.local>div:last-child b { color:var(--amber); }
.sources { display:grid; grid-template-columns:1fr 1.4fr; gap:30px; align-items:center; background:linear-gradient(145deg,#1d1a12,#17150f); border-color:#4b4026; }.sources>div { display:flex; align-items:center; gap:13px; }.sources strong { font-size:11px; }.sources p { margin:4px 0 0; color:var(--muted); font-size:9px; }.sources ul { margin:0; padding:0; list-style:none; }.sources li { display:grid; grid-template-columns:110px 1fr; padding:7px 0; border-bottom:1px solid #3b3321; font-size:9px; }.sources li span { color:#9a927f; }
.overview-scan { display:grid; grid-template-columns:1.15fr .85fr; gap:14px; }
.scan-card { margin-bottom:14px; padding-bottom:18px; }
.scan-card .section-title { margin-bottom:14px; }
.inline-action { border:0; background:none; color:var(--accent); font-size:10px; font-weight:700; padding:5px; cursor:pointer; }
.compact-map { grid-template-columns:repeat(20,1fr); margin:0; gap:5px; }
.compact-map span { display:block; height:18px; border-radius:4px; background:#183326; border:1px solid #254734; }
.compact-map span.bad { background:var(--red-bg); border-color:#5b2f2b; }
.next-runs { display:grid; }
.next-runs>div { display:grid; grid-template-columns:60px 1fr auto; gap:12px; align-items:center; min-height:34px; border-top:1px solid var(--line); font-size:10px; }
.next-runs b { color:var(--accent); }.next-runs span { color:var(--ink); font-weight:600; }.next-runs em { color:var(--muted); font-style:normal; font-size:9px; }
.compact-sources { grid-template-columns:1fr auto; padding:15px 18px; }
.workspace-view { animation:view-in .2s ease-out; }
.single-view { min-height:420px; }
.business-card.single-view { max-width:760px; }
.admin-link { width:100%; border:0; background:none; cursor:pointer; }
footer { display:flex; align-items:center; justify-content:space-between; padding:14px 4px 0; color:#687386; font-size:8px; } footer span { font-weight:700; color:#8490a3; } footer button { border:0; background:none; color:#8490a3; font:inherit; cursor:pointer; }
@keyframes view-in { from { opacity:0; transform:translateY(5px) } to { opacity:1; transform:none } }

.target-cards { display:grid; gap:7px; }
.target-card { border:1px solid var(--line); background:#0e141d; border-radius:9px; overflow:hidden; }
.target-card>summary { display:grid; grid-template-columns:auto minmax(110px,1fr) minmax(100px,auto) 70px; align-items:center; gap:12px; padding:12px; }
.target-card[open]>summary { border-bottom:1px solid var(--line); }
.target-metrics { display:grid; grid-template-columns:repeat(4,1fr) 1.25fr; gap:14px; align-items:end; padding:12px 14px; }
.target-metrics>span { display:grid; gap:4px; }.target-metrics small,.server-stats small { color:var(--muted); font-size:8px; }.target-metrics b,.server-stats b { font-size:10px; }
.latency-bars { height:30px; display:flex; align-items:flex-end; gap:2px; }.latency-bars i { flex:1; min-width:2px; border-radius:2px 2px 0 0; background:#5278d7; opacity:.8; }
.cert-list { display:grid; }.cert-list>div { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; padding:13px 0; border-top:1px solid var(--line); }.cert-list strong { font-size:11px; }.cert-list p { margin:3px 0 0; color:var(--muted); font-size:9px; }.cert-list>div>b { color:var(--green); font-size:8px; }.cert-list>div:first-child>b { color:var(--amber); }.cert-days { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--green); background:var(--green-bg); font-weight:800; font-size:11px; }.cert-days.warning { color:var(--amber); background:var(--amber-bg); }

.server-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.server-card { background:#0e141d; border:1px solid var(--line); border-radius:10px; padding:15px; }.server-card>div:first-child { display:flex; align-items:center; gap:9px; }.server-kind { color:#657188; font-size:7px; letter-spacing:.1em; }.state-label { margin-left:auto; color:var(--green); font-size:8px; }.state-label.bad { color:var(--red); }.state-label.unknown { color:var(--amber); }.server-card h3 { margin:14px 0 5px; font-size:12px; }.server-card code { color:var(--muted); font-size:9px; }.server-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:15px 0 10px; }.server-stats span { display:grid; gap:3px; }.server-bars i.bad { background:var(--red); }.server-bars i.unknown { background:var(--amber); opacity:.45; }

.primary-button { border:0; border-radius:7px; padding:8px 13px; background:var(--accent); color:#07132e; font-size:10px; font-weight:800; cursor:pointer; }
.link-form { display:grid; grid-template-columns:1.5fr .6fr 1fr auto; gap:9px; align-items:end; padding:13px; margin-bottom:14px; border:1px solid #31446f; background:#111b2e; border-radius:9px; }.link-form label { display:grid; gap:5px; color:var(--muted); font-size:8px; }.link-form input { min-width:0; border:1px solid var(--line); border-radius:6px; background:#090d14; color:var(--ink); padding:8px; font-size:10px; }
.links-table,.file-list { border:1px solid var(--line); border-radius:9px; overflow:hidden; }.links-head,.link-row { display:grid; grid-template-columns:70px 1.2fr 1.2fr 1fr 70px 30px; align-items:center; gap:12px; padding:10px 12px; }.links-head,.file-head { color:#69758a; background:#0c1119; font-size:8px; text-transform:uppercase; letter-spacing:.06em; }.link-row { min-height:51px; border-top:1px solid var(--line); font-size:9px; }.link-row code { color:#a7b9ec; }.truncate { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); }.copy-link { border:0; background:none; color:#b1bed5; text-align:left; font-size:9px; cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.copy-link b { display:block; color:var(--accent); font-size:7px; margin-top:3px; }.row-menu { border:0; background:none; color:#77839a; cursor:pointer; }

.file-actions { display:flex; gap:7px; }.file-actions>button:not(.primary-button),.chat-header button { border:1px solid var(--line); background:#131b27; color:#aeb9cd; padding:7px 11px; border-radius:7px; font-size:9px; cursor:pointer; }.breadcrumbs { display:flex; align-items:center; gap:8px; margin:-5px 0 14px; color:#6f7a8e; font-size:9px; }.breadcrumbs button { border:0; background:none; color:var(--accent); padding:0; cursor:pointer; }.file-head { display:grid; grid-template-columns:1fr 90px 110px 90px 30px; gap:12px; padding:10px 12px; }.file-row { display:grid; grid-template-columns:30px 1fr 90px 110px 90px 30px; align-items:center; gap:12px; padding:10px 12px; border-top:1px solid var(--line); font-size:9px; }.file-icon { width:27px; height:27px; border-radius:6px; display:grid; place-items:center; background:#182544; color:#82a2f6; font-size:7px; font-weight:800; }.file-icon.folder { color:var(--amber); background:var(--amber-bg); }.file-icon.image { color:#b18cff; background:#2a2141; }.file-row>span:not(.file-icon) { color:var(--muted); }.public-tag,.private-tag { width:max-content; padding:4px 6px; border-radius:12px; color:var(--accent)!important; background:var(--accent-bg); font-size:7px; }.private-tag { color:#8994a7!important; background:#1c2430; }.public-share { display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding:13px; border:1px solid #31446f; background:#111b2e; border-radius:9px; }.public-share>div { display:flex; align-items:center; gap:12px; }.public-share>div>span { width:28px; height:28px; display:grid; place-items:center; border-radius:7px; background:var(--accent-bg); color:var(--accent); }.public-share p { margin:3px 0 0; color:var(--muted); font-size:9px; }
.file-link-action { width:max-content; border:0; background:none; color:var(--accent); padding:0; font:inherit; cursor:pointer; }.no-file-link { color:#515d70!important; }

.formatter-view { min-height:520px; background:linear-gradient(145deg,rgba(20,26,37,.98),rgba(15,20,29,.98)); border:1px solid var(--line); border-radius:13px; padding:24px; }.formatter-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; }.formatter-toolbar>div>span,.formatter-grid label>span { display:block; color:var(--muted); font-size:9px; margin-bottom:8px; }.product-tabs { display:flex; gap:5px; flex-wrap:wrap; }.product-tabs button { border:1px solid var(--line); background:#0d1118; color:#7f899b; border-radius:7px; padding:7px 10px; font-size:9px; cursor:pointer; }.product-tabs button.selected { color:#ccd7f9; border-color:#405c9d; background:var(--accent-bg); }.formatter-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.formatter-grid label { position:relative; }.formatter-grid textarea { width:100%; height:365px; resize:none; border:1px solid var(--line); background:#090d14; color:var(--ink); border-radius:9px; padding:15px; font:500 12px/1.7 'Manrope',sans-serif; outline:none; }.formatter-grid textarea:focus { border-color:#4c6fbb; }.copy-result { position:absolute; right:10px; bottom:10px; border:1px solid #405c9d; background:#172542; color:#9fb7ff; border-radius:7px; padding:7px 10px; font-size:9px; cursor:pointer; }

.chat-layout { display:grid; grid-template-columns:320px 1fr; gap:14px; }.chat-list,.chat-preview { margin:0; min-height:520px; }.count-badge.neutral { color:var(--accent); background:var(--accent-bg); }.chat-list>button { width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:10px; text-align:left; border:0; border-top:1px solid var(--line); background:none; color:var(--ink); padding:12px 4px; cursor:pointer; }.chat-list>button.selected { background:#151f31; margin:0 -9px; padding-inline:13px; width:calc(100% + 18px); border-radius:8px; }.chat-avatar { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--accent-bg); color:#9bb3f9; font-weight:800; }.chat-list button div { min-width:0; }.chat-list small,.chat-list p,.chat-list time { color:var(--muted); font-size:8px; }.chat-list p { margin:4px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.chat-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:15px; border-bottom:1px solid var(--line); }.chat-header>div { display:grid; gap:4px; }.chat-header span { color:var(--muted); font-size:9px; }.messages { min-height:375px; padding:20px 0; display:grid; align-content:start; gap:12px; }.messages>div { width:max-content; max-width:70%; background:#1a2330; padding:9px 12px; border-radius:4px 10px 10px 10px; }.messages>div.own { margin-left:auto; background:#182544; border-radius:10px 4px 10px 10px; }.messages b,.messages time { font-size:8px; color:var(--accent); }.messages p { margin:4px 0; font-size:10px; }.messages time { display:block; text-align:right; color:var(--muted); }.message-box { display:grid; grid-template-columns:1fr auto; gap:8px; }.message-box input { border:1px solid var(--line); background:#090d14; color:var(--ink); border-radius:8px; padding:10px 12px; font-size:10px; }

.chat-archive { display:grid; grid-template-columns:290px minmax(0,1fr); align-items:start; gap:12px; }.chat-directory { position:sticky; top:18px; overflow:hidden; border:1px solid var(--line); border-radius:11px; background:#0e141d; }.chat-directory-head { display:grid; gap:11px; padding:16px; border-bottom:1px solid var(--line); background:#111923; }.chat-directory-head>div { display:flex; align-items:center; justify-content:space-between; }.chat-directory-head>div span { font-size:15px; font-weight:800; }.chat-directory-head>div b { min-width:27px; padding:4px 7px; text-align:center; border-radius:999px; color:#aabfff; background:#1b2945; font-size:11px; }.chat-directory-head label { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:7px; padding:9px 10px; border:1px solid #2b3749; border-radius:8px; background:#090e16; color:#647189; }.chat-directory-head input { min-width:0; border:0; outline:0; background:none; color:var(--ink); font:inherit; font-size:13px; }.chat-directory-list { max-height:615px; overflow-y:auto; scrollbar-width:thin; }.chat-directory-list>button { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:10px; padding:12px 13px; border:0; border-bottom:1px solid #202938; background:none; color:var(--ink); text-align:left; cursor:pointer; }.chat-directory-list>button:hover { background:#121b28; }.chat-directory-list>button.selected { background:#152039; box-shadow:inset 3px 0 var(--accent); }.chat-directory-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:#1a2947; color:#a9bdff; font-size:13px; font-weight:800; }.chat-directory-list>button>span:nth-child(2) { min-width:0; display:grid; gap:3px; }.chat-directory-list strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.chat-directory-list small,.chat-directory-list em { overflow:hidden; color:#6f7d93; font-size:10px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }.chat-directory-list em { font-size:11px; }.chat-directory-list>button>b { color:#718098; font-size:10px; font-weight:650; white-space:nowrap; }.chat-directory-empty { padding:26px 16px; text-align:center; color:var(--muted); font-size:12px; }
.chat-explorer { margin:0; padding:0; overflow:hidden; }.chat-explorer-head { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 22px 16px; }.archive-label { color:#7c8bb0; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }.chat-explorer-head h2 { margin:6px 0 4px; font-size:23px; }.chat-explorer-head p { margin:0; color:var(--muted); font-size:13px; }.chat-search { width:min(390px,42%); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:10px 12px; border:1px solid #2d3a50; background:#090e16; border-radius:9px; color:#65728a; }.chat-search input { min-width:0; border:0; outline:0; background:none; color:var(--ink); font:inherit; font-size:14px; }.chat-search kbd { color:#667288; font:600 11px/1 'Manrope',sans-serif; border:1px solid #2a3444; border-radius:4px; padding:4px 5px; }
.chat-tabs { display:flex; gap:24px; padding:0 22px; border-bottom:1px solid var(--line); }.chat-tabs button { position:relative; display:flex; align-items:center; gap:7px; padding:12px 0 13px; border:0; background:none; color:#7f8a9e; font-size:14px; cursor:pointer; }.chat-tabs button span { color:#59667b; font-size:11px; }.chat-tabs button.active { color:#dfe6f5; }.chat-tabs button.active:after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:var(--accent); }
.message-type-filters,.media-type-filters { display:flex; gap:6px; padding:14px 22px; overflow-x:auto; border-bottom:1px solid var(--line); scrollbar-width:thin; }.message-type-filters button,.media-type-filters button { flex:0 0 auto; border:1px solid #273246; background:#0d131d; color:#8490a5; border-radius:999px; padding:7px 10px; font:inherit; font-size:12px; cursor:pointer; }.message-type-filters button.active,.media-type-filters button.active { color:#cbd8ff; border-color:#4564a5; background:#172541; }.media-type-filters button { display:flex; gap:7px; }.media-type-filters button b { color:#64728a; font-weight:650; }
.archive-messages { min-height:330px; display:grid; align-content:start; gap:8px; padding:18px 22px; background:linear-gradient(180deg,#0c121b,#0b1017); }.archive-messages article { width:min(680px,86%); padding:11px 13px; border:1px solid #243044; border-radius:10px; background:#151e2a; }.archive-messages article.system-message { width:100%; text-align:center; background:#111821; border-style:dashed; }.archive-messages article>div { display:flex; align-items:center; gap:8px; }.archive-messages strong { color:#afc1f5; font-size:12px; }.archive-messages time { margin-left:auto; color:#68758b; font-size:11px; }.message-kind { color:#8896ac; background:#202b3a; border-radius:4px; padding:3px 5px; font:600 10px/1 'Manrope',sans-serif; }.archive-messages p { margin:7px 0 0; font-size:14px; line-height:1.45; }.media-attachment { margin-top:9px; padding:7px 9px; border:1px solid #39558f; border-radius:6px; background:#16233c; color:#abc0ff; font-size:12px; cursor:pointer; }.archive-compose { display:grid; grid-template-columns:1fr auto; gap:8px; padding:14px 22px 18px; border-top:1px solid var(--line); }.archive-compose input { min-width:0; border:1px solid #2c384b; background:#090d14; color:var(--ink); border-radius:8px; padding:11px 12px; font-size:14px; }
.media-workspace { display:grid; grid-template-columns:minmax(0,1fr) 245px; min-height:420px; }.media-gallery { display:grid; grid-template-columns:repeat(4,minmax(135px,1fr)); gap:10px; align-content:start; padding:16px 18px 22px 22px; }.media-card { min-width:0; overflow:hidden; border:1px solid #253044; border-radius:9px; background:#101721; }.media-preview { width:100%; aspect-ratio:1.35; display:grid; place-items:center; align-content:center; gap:8px; border:0; background:radial-gradient(circle at 25% 20%,#294370,#172339 55%,#101722); color:#a9bfff; cursor:pointer; }.media-card.video .media-preview,.media-card.video_note .media-preview { background:radial-gradient(circle at 55% 30%,#56426e,#25213a 58%,#151522); }.media-card.animation .media-preview,.media-card.sticker .media-preview { background:radial-gradient(circle at 25% 25%,#544532,#262319 58%,#171610); }.media-card.document .media-preview,.media-card.audio .media-preview,.media-card.voice .media-preview { background:radial-gradient(circle at 25% 25%,#275052,#18292d 58%,#111a1c); }.media-preview>span { font-size:24px; font-weight:800; }.media-preview small { color:#92a2bc; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }.media-card>div { position:relative; padding:10px 11px 11px; }.media-card strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.media-card p { margin:5px 0 0; color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.media-card>div>span { position:absolute; right:10px; bottom:10px; color:#718098; font-size:10px; }
.media-authors { border-left:1px solid var(--line); padding:16px; }.media-authors>div { display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; color:#7f8ba0; font-size:12px; }.media-authors>div b { color:#aebad0; }.media-authors>button { width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; padding:10px 0; border:0; border-top:1px solid #202a39; background:none; color:var(--ink); text-align:left; cursor:pointer; }.participant-initial { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:#192640; color:#a9bfff; font-size:12px; font-weight:800; }.media-authors>button>span:nth-child(2) { display:grid; gap:3px; }.media-authors strong { font-size:12px; }.media-authors small { color:var(--muted); font-size:11px; }.media-authors>button>b { color:#8f9bb0; font-size:12px; }
.chat-participants-view { display:grid; gap:8px; padding:16px 22px 22px; }.participant-legend { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; }.participant-legend span { flex:0 0 auto; padding:5px 8px; border-radius:5px; background:#111925; color:#778499; font-size:11px; }.chat-participants-view article { display:grid; grid-template-columns:190px 1fr; align-items:center; gap:18px; padding:13px; border:1px solid #232d3d; border-radius:9px; background:#0e151f; }.participant-name { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; }.participant-name div { display:grid; gap:3px; }.participant-name strong { font-size:13px; }.participant-name small { color:var(--muted); font-size:11px; }.participant-name>b { grid-column:2; color:#77859b; font-size:11px; }.participant-counts { display:grid; grid-template-columns:repeat(8,minmax(46px,1fr)); gap:5px; }.participant-counts span { display:grid; gap:4px; padding:7px 5px; text-align:center; border-radius:6px; background:#151f2d; }.participant-counts small { color:#6f7c91; font-size:9px; overflow:hidden; text-overflow:ellipsis; }.participant-counts b { font-size:12px; }

.menu-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }.menu-grid button { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:15px; border:1px solid var(--line); background:#0e141d; color:var(--ink); text-align:left; border-radius:9px; cursor:pointer; }.menu-grid button:hover { border-color:#405c9d; background:#121b2b; }.menu-grid button>span { color:#657189; font-size:8px; }.menu-grid p { margin:4px 0 0; color:var(--muted); font-size:8px; }.menu-grid button>b { color:var(--accent); }.system-links { display:flex; align-items:center; gap:8px; margin-top:18px; padding-top:15px; border-top:1px solid var(--line); }.system-links>span { margin-right:auto; color:var(--muted); font-size:9px; }.system-links button { border:1px solid var(--line); background:#121923; color:#a9b4c7; padding:7px 10px; border-radius:7px; font-size:9px; cursor:pointer; }

.system-preview { min-height:540px; display:grid; place-items:center; position:relative; }.login-card { width:min(410px,100%); display:grid; justify-items:center; text-align:center; padding:42px; background:linear-gradient(145deg,#151c28,#0e141d); border:1px solid var(--line); border-radius:16px; box-shadow:0 25px 80px #0005; }.brand-mark.large { width:45px; height:45px; font-size:18px; margin-bottom:22px; }.login-card h2 { font-size:26px; }.login-card>p:not(.kicker) { max-width:300px; color:var(--muted); line-height:1.6; font-size:11px; }.login-card .primary-button { width:100%; margin:16px 0 12px; padding:11px; }.login-card small { color:#6e798d; font-size:8px; }.logout-card { position:absolute; right:20px; bottom:20px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:13px; background:#111923; border:1px solid var(--line); border-radius:10px; }.logout-card>span { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:var(--green); background:var(--green-bg); }.logout-card p { margin:3px 0 0; color:var(--muted); font-size:8px; }.logout-card button { border:0; background:none; color:var(--accent); font-size:9px; cursor:pointer; }

.error-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.error-grid article { padding:20px; background:#0e141d; border:1px solid var(--line); border-radius:10px; }.error-grid article>span { font-size:9px; color:var(--red); background:var(--red-bg); border-radius:20px; padding:5px 7px; }.error-grid h3 { margin:18px 0 8px; font-size:14px; }.error-grid p { color:var(--muted); font-size:9px; line-height:1.6; min-height:58px; }.error-grid .inline-action { padding-left:0; }
.public-mode .sidebar,.public-mode header,.public-mode footer { display:none; }.public-mode .content { margin:0 auto; max-width:1180px; min-height:100vh; display:grid; align-content:center; }.public-mode .errors-view { width:100%; }

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

@media (max-width:1100px) { .summary-grid { grid-template-columns:1fr 1fr; }.two-col,.wide-left { grid-template-columns:1fr; }.project-grid{grid-template-columns:1fr 1fr}.service-map{grid-template-columns:repeat(13,1fr)}.server-grid{grid-template-columns:1fr 1fr}.menu-grid,.error-grid{grid-template-columns:1fr 1fr}.chat-layout{grid-template-columns:280px 1fr}.target-metrics{grid-template-columns:repeat(2,1fr)}.latency-bars{grid-column:1/-1}.media-gallery{grid-template-columns:repeat(3,minmax(135px,1fr))}.chat-participants-view article{grid-template-columns:160px 1fr}.participant-counts{overflow-x:auto;grid-template-columns:repeat(8,54px)} }
@media (max-width:720px) {
  .sidebar { position:sticky; top:0; width:100%; height:58px; padding:0 16px; flex-direction:row; align-items:center; justify-content:space-between; }
  .brand span:not(.brand-mark),.sidebar-foot { display:none; } nav { margin:0; display:flex; overflow-x:auto; gap:2px; } nav button { width:auto; padding:9px; font-size:0; flex:0 0 auto; } nav button i { font-size:9px; } nav button.active:after,.nav-caret,.nav-divider { display:none; }.nav-subgroup{display:contents}.nav-subgroup:before{display:none}.nav-subgroup button{padding:9px;margin:0}.overview-parent{font-weight:500}
  .content { margin:0; padding:26px 14px; }.content header { display:grid; }.refresh-panel { text-align:left; }.refresh-panel>div,.switch-row { justify-content:flex-start; }
  h1 { font-size:31px; }.summary-grid { grid-template-columns:1fr 1fr; gap:8px; }.summary-card { padding:15px; }.summary-card>strong { font-size:24px; }
  .attention-list { grid-template-columns:1fr; }.card { padding:18px; }.two-col { gap:0; }.section-title { align-items:flex-end; }
  .service-map { grid-template-columns:repeat(10,1fr); }.segmented button { padding:6px; }.table-wrap { margin:0 -18px; padding:0 18px; } table { min-width:600px; }
  .schedule-row summary { grid-template-columns:1fr 54px 16px; }.schedule-row .run-state { display:none; }.next-time { display:grid; gap:3px; }.next-time span { width:auto; }.schedule-detail { padding-left:0; }
  .project-grid { grid-template-columns:1fr; }.project>p { min-height:auto; }.sources { grid-template-columns:1fr; gap:15px; }.overview-scan { grid-template-columns:1fr; gap:0; }.compact-map{grid-template-columns:repeat(13,1fr)}.search input{width:82px} footer p{display:none}
  .server-grid,.menu-grid,.error-grid,.formatter-grid,.chat-layout{grid-template-columns:1fr}.target-card>summary{grid-template-columns:auto 1fr 60px}.target-card .row-note{display:none}.target-metrics{grid-template-columns:1fr 1fr}.links-table,.file-list{overflow-x:auto}.links-head,.link-row{min-width:720px}.file-head,.file-row{min-width:650px}.link-form{grid-template-columns:1fr 1fr}.link-form label:first-child{grid-column:1/-1}.formatter-grid textarea{height:260px}.chat-list{min-height:auto}.chat-preview{min-height:480px}.menu-grid button{min-height:70px}.logout-card{position:static;margin-top:14px;width:100%}.system-preview{display:block}.file-actions{flex-wrap:wrap}.chat-archive{grid-template-columns:1fr}.chat-directory{position:static}.chat-directory-list{max-height:280px}.chat-picker{display:flex;overflow-x:auto}.chat-picker button{min-width:230px}.chat-explorer-head{align-items:stretch;flex-direction:column}.chat-search{width:100%}.media-workspace{grid-template-columns:1fr}.media-authors{border-left:0;border-top:1px solid var(--line)}.media-gallery{grid-template-columns:repeat(3,minmax(120px,1fr));padding:14px}.chat-participants-view article{grid-template-columns:1fr}.participant-counts{padding-bottom:4px}
}
@media (max-width:430px) { .summary-grid{grid-template-columns:1fr}.summary-card:nth-child(4){display:none}.section-title h2{font-size:20px}.refresh-panel{gap:10px}.row{grid-template-columns:auto 1fr 62px}.row-note{display:none}.project-grid{gap:7px}.business-kpis{grid-template-columns:1fr 1fr}.sources li{grid-template-columns:90px 1fr}.server-grid,.menu-grid,.error-grid{grid-template-columns:1fr}.link-form{grid-template-columns:1fr}.link-form label:first-child{grid-column:auto}.formatter-toolbar{align-items:stretch;flex-direction:column}.target-metrics{grid-template-columns:1fr 1fr}.public-share{align-items:flex-start;gap:10px}.system-links{align-items:stretch;flex-direction:column}.system-links>span{margin:0}.login-card{padding:30px 20px}.chat-directory-list{max-height:225px}.chat-explorer-head{padding:17px}.chat-tabs{gap:16px;padding:0 17px}.message-type-filters,.media-type-filters{padding-inline:17px}.media-gallery{grid-template-columns:1fr 1fr;gap:8px}.media-card>div>span{position:static;display:block;margin-top:5px}.archive-messages{padding-inline:14px}.archive-messages article{width:100%}.archive-compose{grid-template-columns:1fr;padding-inline:14px}.chat-participants-view{padding-inline:14px} }

/* ── Добавлено при переносе макета в приложение ─────────────────────────
   Макет не знал о меню приложения, выходе и публичных страницах. Всё
   остальное выше взято из макета без изменений. */
.app-links { margin-top:18px; padding-top:16px; border-top:1px solid #202838; display:grid; gap:2px; }
.app-links .label { text-transform:uppercase; letter-spacing:.16em; color:#4f596c; font-size:9px; font-weight:800; margin-bottom:6px; }
.app-links a { display:flex; align-items:center; gap:10px; color:#6d7788; text-decoration:none; padding:7px 10px; border-radius:8px; font-size:12px; transition:.2s; }
.app-links a:hover { color:#dbe3f4; background:#151d2c; }
.app-links form { margin:4px 0 0; }
.app-links button { width:100%; text-align:left; border:0; background:none; color:#8a5c5c; padding:7px 10px; border-radius:8px; font-size:12px; cursor:pointer; transition:.2s; }
.app-links button:hover { color:var(--red); background:#1f1614; }
.sidebar-user { color:#5c6679; font-size:9px; padding:0 10px 10px; overflow:hidden; text-overflow:ellipsis; }

/* Тона статусов заказа: у соседа их восемь, и красить по порядку, как в
   макете, нельзя — порядок меняется. */
.stacked i.t-good, .order-detail i.t-good { background:var(--green); }
.stacked i.t-wait, .order-detail i.t-wait { background:var(--amber); }
.stacked i.t-bad, .order-detail i.t-bad { background:var(--red); }
.delta { font-weight:700; }
.delta.up { color:var(--green); }
.delta.down { color:var(--red); }

/* Состояния, которых в макете не было. */
.ring.amber { border-top-color:var(--amber); }
.ring.red { border-top-color:var(--red); }
.pill.unknown-pill { color:var(--amber); background:var(--amber-bg); }
.pill.bad-pill { color:var(--red); background:var(--red-bg); }
.empty { color:var(--muted); font-size:10px; padding:14px 2px; }
[data-view][hidden], [hidden] { display:none !important; }

/* Публичные страницы: тот же язык, но без админской оболочки. */
.public-page { min-height:100vh; display:grid; place-items:center; padding:40px 16px; }
.public-page .card { width:100%; max-width:760px; }

/* Раскрывающиеся действия в строках (ссылки, файлы) — в макете это «•••». */
details > summary { cursor:pointer; }
.row-drawer { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; padding:14px 2px 18px; border-bottom:1px solid var(--line); }
.row-drawer .link-form { margin:0; flex:1 1 420px; }
.danger-button { border:1px solid rgba(248,116,105,.35); background:rgba(248,116,105,.12); color:var(--red); border-radius:7px; padding:8px 14px; font-size:10px; font-weight:700; cursor:pointer; }
.danger-button:hover { background:rgba(248,116,105,.2); }
.panel-note { font-size:10px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; margin-bottom:12px; }
.add-link > summary { list-style:none; }
.add-link > summary::-webkit-details-marker { display:none; }
.upload-form { display:flex; align-items:center; gap:8px; }
.upload-form input[type=file] { width:150px; font-size:9px; color:var(--muted); }
.public-wide { max-width:1100px; margin:0 auto; padding:44px clamp(16px,4vw,48px); }
.public-head { display:block; margin-bottom:26px; }
.public-head h1 { font-size:32px; }

/* В макете пункты навигации — кнопки, у нас это ссылки (адрес раздела должен
   открываться в новой вкладке и попадать в закладки). Правила те же. */
nav a { width:100%; color:#778195; text-decoration:none; padding:8px 10px; border-radius:8px;
        font-size:12px; display:flex; gap:12px; align-items:center; transition:.2s; }
nav a i { font-style:normal; font-size:9px; color:#505a6d; font-weight:700; letter-spacing:.08em; }
nav a:hover, nav a.active { color:#f5f7ff; background:#151d2c; }
nav a.active:after { content:""; margin-left:auto; width:5px; height:5px; border-radius:50%;
                     background:var(--accent); box-shadow:0 0 8px #6690ff99; }
nav a.group-active { color:#c3ccdd; }
.nav-subgroup a { padding-left:18px; font-size:11px; }

/* Макет прячет шапку на публичных страницах (`.public-mode header`), а нашим
   нужна своя: посторонний должен понимать, куда попал. */
.public-mode .public-head { display:block; }

/* Выбор файлов: системный input выглядит инородно рядом с кнопками макета. */
.upload-form { display:flex; align-items:center; gap:8px; }
.upload-form input[type=file] { position:absolute; width:1px; height:1px; opacity:0; }
.upload-form .file-pick { border:1px solid var(--line); background:#0d1118; color:#aeb8cc;
    border-radius:7px; padding:7px 12px; font-size:9px; cursor:pointer; }
.upload-form .file-pick:hover { border-color:#3a4763; color:#dbe3f4; }

/* ── Повтор правил макета для ссылок ───────────────────────────────────
   В макете эти элементы — кнопки, а у нас ссылки: состояние страницы живёт
   в адресе, и раздел должен открываться в новой вкладке и попадать в
   закладки. Правила скопированы один в один, меняется только селектор. */
.chat-directory-list>a { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:10px; padding:12px 13px; border:0; border-bottom:1px solid #202938; background:none; color:var(--ink); text-align:left; cursor:pointer; }
.chat-directory-list>a:hover { background:#121b28; }
.chat-directory-list>a.selected { background:#152039; box-shadow:inset 3px 0 var(--accent); }
.chat-directory-list>a>span:nth-child(2) { min-width:0; display:grid; gap:3px; }
.chat-directory-list>a>b { color:#718098; font-size:10px; font-weight:650; white-space:nowrap; }
.chat-tabs a { position:relative; display:flex; align-items:center; gap:7px; padding:12px 0 13px; border:0; background:none; color:#7f8a9e; font-size:14px; cursor:pointer; }
.chat-tabs a span { color:#59667b; font-size:11px; }
.chat-tabs a.active { color:#dfe6f5; }
.chat-tabs a.active:after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:var(--accent); }
.message-type-filters a, .media-type-filters a { flex:0 0 auto; border:1px solid #273246; background:#0d131d; color:#8490a5; border-radius:999px; padding:7px 10px; font:inherit; font-size:12px; cursor:pointer; }
.message-type-filters a.active, .media-type-filters a.active { color:#cbd8ff; border-color:#4564a5; background:#172541; }
.media-type-filters a { display:flex; gap:7px; }
.media-type-filters a b { color:#64728a; font-weight:650; }
.media-authors>a { width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; padding:10px 0; border:0; border-top:1px solid #202a39; background:none; color:var(--ink); text-align:left; cursor:pointer; }
.media-authors>a>span:nth-child(2) { display:grid; gap:3px; }
.media-authors>a>b { color:#8f9bb0; font-size:12px; }
.menu-grid a { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:15px; border:1px solid var(--line); background:#0e141d; color:var(--ink); text-align:left; border-radius:9px; cursor:pointer; }
.menu-grid a:hover { border-color:#405c9d; background:#121b2b; }
.menu-grid a>span { color:#657189; font-size:8px; }
.menu-grid a>b { color:var(--accent); }
.menu-grid a {min-height:70px}
.chat-picker a {min-width:230px}
.chat-directory-list a, .chat-tabs a, .media-type-filters a,
.message-type-filters a, .media-authors a, .menu-grid a { text-decoration:none; }
a.media-preview { text-decoration:none; }

/* Размер стоит в углу карточки, как в макете. Но имена у нас длиннее
   («Анна Петрова · 29.09.2026 10:31»), и строка автора под него наезжала —
   оставляем ей поле. */
.media-card p { padding-right:62px; }

/* ── Просмотр медиа на месте ───────────────────────────────────────────
   Лёгкие типы (фото, стикеры) показываются миниатюрой в сетке, тяжёлые
   открываются поверх страницы по клику: кружок весит 3,7 МБ, и грузить
   их десятками ради сетки нельзя. */
.media-preview.has-thumb { padding:0; overflow:hidden; background:#0c1017; }
.media-preview.has-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.media-card.sticker .media-preview.has-thumb img { object-fit:contain; padding:10px; }
.media-audio { width:100%; height:30px; margin-top:8px; }

.media-viewer { border:0; padding:0; background:transparent; max-width:min(1100px,92vw); max-height:92vh; }
.media-viewer::backdrop { background:rgba(5,8,13,.86); backdrop-filter:blur(6px); }
.viewer-stage { display:grid; place-items:center; min-height:200px; }
.viewer-stage img, .viewer-stage video { max-width:min(1100px,92vw); max-height:76vh; border-radius:12px; display:block; }
.viewer-stage video.round { border-radius:50%; width:min(460px,80vw); height:min(460px,80vw); object-fit:cover; }
.viewer-stage audio { width:min(520px,86vw); }
.viewer-meta { display:flex; align-items:center; gap:14px; justify-content:center; padding:14px 8px 4px; color:var(--muted); font-size:10px; }
.viewer-meta strong { color:var(--ink); font-size:12px; }
.viewer-download { color:var(--accent); font-weight:700; text-decoration:none; }
.viewer-close { position:fixed; top:18px; right:22px; border:0; background:rgba(20,26,37,.9); color:#cbd5e8;
    width:34px; height:34px; border-radius:50%; font-size:14px; cursor:pointer; }
.viewer-nav { position:fixed; top:50%; transform:translateY(-50%); border:0; background:rgba(20,26,37,.9);
    color:#cbd5e8; width:38px; height:60px; border-radius:10px; font-size:22px; cursor:pointer; }
.viewer-nav.prev { left:18px; } .viewer-nav.next { right:18px; }
.viewer-close:hover, .viewer-nav:hover { color:#fff; background:#1d2636; }
@media (max-width:720px) { .viewer-nav { display:none; } }

/* Вложения в ленте: мелкие превью прямо под сообщением. */
.message-files { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.message-file { border:1px solid #273246; background:#0d131d; color:#8490a5; border-radius:8px;
    padding:6px 10px; font:inherit; font-size:11px; cursor:pointer; text-decoration:none; }
.message-file:hover { border-color:#4564a5; color:#cbd8ff; }
.message-file.has-thumb { padding:0; overflow:hidden; width:86px; height:64px; }
.message-file.has-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* Раздел «Бизнес»: период общий для всех карточек, карточки друг под другом. */
.business-toolbar { max-width:760px; display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-bottom:12px; color:var(--muted); font-size:9px; }
.business-toolbar select { border:1px solid var(--line); background:#0d1118; border-radius:6px; padding:6px 8px; color:#aeb8cc; font-size:9px; }
.business-stack { max-width:760px; display:grid; gap:14px; }
.business-stack .business-card { margin:0; }
.crm-kpis { grid-template-columns:repeat(4,1fr); }
.crm-kpis strong { font-size:21px; }
.crm-groups { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:14px 0; border-bottom:1px solid var(--line); }
.crm-group h3,.crm-top h3 { margin:0 0 6px; color:var(--muted); font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.crm-row,.crm-top>div { display:grid; grid-template-columns:1fr auto; gap:2px 8px; padding:6px 0; border-top:1px solid #1b2230; font-size:9px; color:#9aa6bb; }
.crm-row:first-of-type { border-top:0; }
.crm-row b,.crm-top b { color:var(--ink); font-family:'Manrope',sans-serif; font-size:12px; }
.crm-row small,.crm-top small { grid-column:1/-1; color:#788396; font-size:7px; }
.crm-top { padding:14px 0 0; }
.crm-top>div:first-of-type { border-top:0; }
.crm-note { margin:6px 0 0; color:#788396; font-size:7px; }
@media (max-width:720px) { .crm-kpis { grid-template-columns:1fr 1fr; } .crm-groups { grid-template-columns:1fr; gap:6px; } }
.crm-card .revenue small { display:block; margin-top:5px; line-height:1.5; }