:root {
  --ink:#17263d;
  --muted:#6c7889;
  --paper:#f3f5f8;
  --card:#fff;
  --line:#dfe4eb;
  --blue:#315da8;
  --blue-dark:#172f57;
  --blue-soft:#e8effb;
  --cyan:#277c8e;
  --orange:#a6672e;
  --orange-soft:#fff0df;
  --red:#ae463f;
  --red-soft:#fbe8e7;
  --green:#27745a;
  --green-soft:#e4f2ec;
}

* { box-sizing:border-box; }
html { min-width:320px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,system-ui,sans-serif; font-size:14px; }
a { color:inherit; }
button,input,select,textarea { font:inherit; }
button:disabled { cursor:not-allowed; }

.topbar { min-height:72px; display:flex; align-items:center; gap:24px; padding:10px max(24px,calc((100vw - 1420px)/2)); position:sticky; top:0; z-index:30; background:rgba(243,245,248,.94); border-bottom:1px solid rgba(23,38,61,.09); backdrop-filter:blur(15px); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font:700 19px Onest,sans-serif; white-space:nowrap; }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; color:#fff; background:var(--blue-dark); border-radius:11px; }
.topnav { display:flex; align-items:center; gap:3px; flex:1; }
.topnav a,.top-link { padding:9px 10px; color:var(--muted); border-radius:9px; text-decoration:none; font-weight:650; font-size:13px; white-space:nowrap; }
.topnav a:hover,.top-link:hover { color:var(--ink); background:#fff; }
.top-actions,.hero-actions,.form-actions,.mini-actions,.detail-meta { display:flex; align-items:center; gap:9px; }
.top-actions form,.hero-actions form { margin:0; }
.signal-links { display:flex; gap:6px; }
.signal { display:flex; align-items:center; gap:6px; padding:7px 9px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:9px; text-decoration:none; font-size:11px; font-weight:700; white-space:nowrap; }
.signal b { min-width:19px; height:19px; display:grid; place-items:center; color:var(--blue); background:var(--blue-soft); border-radius:6px; }
.signal.danger.active { color:var(--red); border-color:#edc9c6; }
.signal.danger b { color:var(--red); background:var(--red-soft); }

.primary,.secondary,.ghost { display:inline-flex; align-items:center; justify-content:center; min-height:41px; padding:10px 15px; border:1px solid transparent; border-radius:10px; cursor:pointer; text-decoration:none; font-size:13px; font-weight:750; white-space:nowrap; }
.primary { color:#fff; background:var(--blue-dark); box-shadow:0 8px 22px rgba(23,47,87,.16); }
.primary:hover { background:#244778; }
.secondary,.ghost { color:var(--ink); background:#fff; border-color:var(--line); }
.secondary:hover,.ghost:hover { border-color:#b8c3d1; }
.primary.disabled,.secondary.disabled { opacity:.48; box-shadow:none; }
.small { min-height:36px; padding:8px 11px; }
.full { width:100%; }
.muted { margin:0; color:var(--muted); }
.money { white-space:nowrap; font-variant-numeric:tabular-nums; }

.page-shell { width:min(100%,1420px); margin:0 auto; padding:43px 26px 72px; }
.narrow-shell { width:min(100%,980px); }
.hero-row,.detail-head { display:flex; align-items:flex-end; justify-content:space-between; gap:26px; margin-bottom:27px; }
.hero-row.compact { margin-bottom:23px; }
.hero-row h1,.detail-head h1,.form-card h1,.auth-card h1 { margin:0 0 8px; font:650 clamp(30px,4vw,45px) Onest,sans-serif; letter-spacing:-.04em; }
.hero-row.compact h1 { font-size:clamp(29px,3.5vw,40px); }
.eyebrow { margin:0 0 7px; color:var(--blue); text-transform:uppercase; letter-spacing:.13em; font-size:10px; font-weight:800; }

.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:14px; }
.summary-card { min-width:0; min-height:145px; display:flex; flex-direction:column; padding:20px; color:inherit; background:var(--card); border:1px solid var(--line); border-radius:17px; text-decoration:none; }
.summary-card.accent { border-color:#bacceb; background:#f8faff; }
.summary-card.dark { color:#fff; background:var(--blue-dark); border-color:var(--blue-dark); }
.summary-card span { color:var(--muted); font-weight:700; }
.summary-card.dark span,.summary-card.dark small { color:#b9c7dc; }
.summary-card strong { margin-top:auto; overflow:hidden; text-overflow:ellipsis; font:650 34px Onest,sans-serif; letter-spacing:-.04em; }
.summary-card.dark strong { font-size:clamp(22px,2.3vw,32px); }
.summary-card small { margin-top:3px; color:var(--muted); }

.filterbar { display:flex; gap:8px; margin:0 0 14px; }
.filterbar input { flex:1; min-width:190px; }
.filterbar select { width:190px; }
.filterbar input,.filterbar select,.stack-form input,.stack-form select,.stack-form textarea { width:100%; padding:12px 13px; color:var(--ink); background:#fafbfd; border:1px solid var(--line); border-radius:10px; }
.filterbar input:focus,.filterbar select:focus,.stack-form input:focus,.stack-form select:focus,.stack-form textarea:focus { outline:2px solid #c5d5ef; border-color:var(--blue); }

.table-card,.form-card,.auth-card,.conversation-card,.property-card,.integration-card,.security-note { background:var(--card); border:1px solid var(--line); border-radius:17px; }
.table-card { overflow:hidden; }
.table-head,.panel-head,.property-head { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:19px 21px; border-bottom:1px solid var(--line); }
.table-head h2,.panel-head h2,.property-head h2,.integration-card h2 { margin:0; font:650 20px Onest,sans-serif; }
.table-head span { color:var(--muted); font-size:12px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { padding:12px 15px; color:var(--muted); background:#f8f9fb; text-align:left; text-transform:uppercase; letter-spacing:.05em; font-size:10px; white-space:nowrap; }
td { padding:14px 15px; border-top:1px solid var(--line); vertical-align:middle; }
td small { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
tbody tr:hover { background:#fbfcfe; }
.unread-row { background:#f6f9ff; }
.request-title { color:var(--ink); text-decoration:none; font-weight:800; }
.request-title:hover,.row-action a,.property-head a,.mini-actions a { color:var(--blue); }
.unread-dot { display:inline-grid; min-width:20px; height:20px; margin-left:6px; place-items:center; color:#fff; background:var(--blue); border-radius:50%; font-size:10px; font-weight:800; }
.row-action { text-align:right; white-space:nowrap; }
.row-action a,.property-head a,.mini-actions a { text-decoration:none; font-weight:750; }
.empty-cell { padding:54px 20px; color:var(--muted); text-align:center; }
.empty-cell strong,.empty-cell span { display:block; }
.empty-cell strong { margin-bottom:5px; color:var(--ink); }

.status,.source,.connection { display:inline-flex; align-items:center; width:max-content; padding:5px 8px; border-radius:20px; font-size:10px; font-weight:800; white-space:nowrap; }
.status { color:var(--blue-dark); background:#ebeff5; }
.status-new { color:var(--blue); background:var(--blue-soft); }
.status-estimating,.status-offer_sent { color:var(--orange); background:var(--orange-soft); }
.status-waiting { color:#7651a8; background:#f0eafb; }
.status-in_progress { color:var(--cyan); background:#e3f2f5; }
.status-completed { color:var(--green); background:var(--green-soft); }
.status-refused { color:var(--red); background:var(--red-soft); }
.source { color:#536174; background:#edf0f4; }
.source-avito { color:#4772d9; background:#edf1ff; }
.source-telegram { color:#1674a7; background:#e5f4fb; }
.source-email { color:#b14a38; background:#faebe7; }
.overdue { color:var(--red)!important; font-weight:750; }

.detail-head { align-items:center; margin-top:17px; }
.detail-head h1 { margin-top:10px; margin-bottom:7px; }
.inline-back { display:inline-block; margin:0; }
.detail-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(290px,.65fr); gap:14px; align-items:start; }
.conversation-card { overflow:hidden; }
.panel-head p { margin-top:4px; font-size:12px; }
.connection.disconnected { color:var(--orange); background:var(--orange-soft); }
.connection.authorizing { color:#7651a8; background:#f0eafb; }
.connection.connected { color:var(--green); background:var(--green-soft); }
.connection.error { color:var(--red); background:var(--red-soft); }
.connection.manual { color:var(--muted); background:#edf0f4; }
.conversation { min-height:320px; max-height:650px; padding:24px; overflow-y:auto; background:#f8f9fb; }
.bubble-wrap { display:flex; margin-bottom:14px; }
.bubble-wrap.outbound { justify-content:flex-end; }
.bubble-wrap.internal { justify-content:center; }
.bubble { width:min(78%,650px); padding:14px 15px; background:#fff; border:1px solid var(--line); border-radius:14px 14px 14px 4px; box-shadow:0 4px 14px rgba(23,38,61,.04); }
.outbound .bubble { background:#eaf1fc; border-color:#cad9f1; border-radius:14px 14px 4px 14px; }
.internal .bubble { background:#fff8e9; border-color:#eadabb; }
.bubble-meta { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:8px; font-size:11px; }
.bubble-meta span { color:var(--muted); white-space:nowrap; }
.bubble-body { line-height:1.55; overflow-wrap:anywhere; }
.attachment { display:flex; align-items:center; gap:8px; width:max-content; max-width:100%; margin-top:10px; padding:8px 10px; color:var(--blue); background:#fff; border:1px solid #cfdbed; border-radius:8px; text-decoration:none; overflow:hidden; text-overflow:ellipsis; }
.attachment small { color:var(--muted); }
.draft-label,.failed-label { display:block; width:max-content; margin-top:10px; color:var(--orange); font-size:10px; font-weight:800; }
.failed-label { color:var(--red); }
.conversation-empty { min-height:280px; }
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--muted); text-align:center; }
.empty strong { color:var(--ink); }
.composer { padding:20px 22px; border-top:1px solid var(--line); }
.notice { display:flex; flex-direction:column; gap:3px; padding:12px 14px; color:#755225; background:#fff6e9; border:1px solid #ecd8bb; border-radius:10px; font-size:12px; }
.notice span { color:#8d714f; }
.notice.ready { color:var(--green); background:var(--green-soft); border-color:#bedfcf; }
.notice.ready span { color:#4e806d; }
.compact-form { margin-top:14px!important; }

.request-sidebar { display:flex; flex-direction:column; gap:12px; }
.property-card { overflow:hidden; }
.property-head { padding:16px 18px; }
.property-head h2 { font-size:16px; }
.property-card dl { margin:0; }
.property-card dl div { display:grid; grid-template-columns:100px 1fr; gap:12px; padding:12px 18px; border-top:1px solid var(--line); }
.property-card dl div:first-child { border-top:0; }
.property-card dt { color:var(--muted); font-size:11px; }
.property-card dd { margin:0; text-align:right; overflow-wrap:anywhere; font-weight:700; }
.next-action,.next-date,.notes { display:block; margin:17px 18px; }
.next-date { margin-top:-10px; color:var(--muted); font-size:11px; }
.notes { color:#3f4d60; line-height:1.55; }
.overdue-card { border-color:#e6bab6; }
.overdue-card .next-date { color:var(--red); font-weight:800; }

.form-shell,.auth-shell { min-height:calc(100vh - 72px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:45px 20px; }
.form-card,.auth-card { width:min(100%,650px); padding:31px; box-shadow:0 22px 60px rgba(23,38,61,.07); }
.auth-card { width:min(100%,450px); }
.auth-card.wide { width:min(100%,620px); }
.wide-form-shell { justify-content:flex-start; }
.wide-form { width:min(100%,880px); }
.back { width:min(100%,650px); margin-bottom:13px; color:var(--muted); text-decoration:none; }
.wide-form-shell .back { width:min(100%,880px); }
.form-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.mini-actions { margin-top:5px; }
.mini-actions a { padding:7px 9px; background:var(--blue-soft); border-radius:8px; font-size:11px; }
.stack-form { margin-top:24px; }
.stack-form p { display:flex; flex-direction:column; gap:7px; margin:0 0 15px; }
.stack-form label { font-size:12px; font-weight:750; }
.stack-form .helptext { color:var(--muted); font-size:11px; }
.stack-form .helptext ul { margin:4px 0 0; padding-left:18px; }
.stack-form textarea { resize:vertical; }
.errorlist { margin:0 0 5px; padding-left:18px; color:var(--red); }
.form-actions { justify-content:flex-end; margin-top:21px; }
.request-form { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.request-form p:first-of-type,.request-form p:has(textarea),.request-form .errorlist,.request-form .form-actions { grid-column:1/-1; }

.integration-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.integration-card { display:flex; flex-direction:column; min-height:430px; padding:23px; }
.integration-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.integration-icon { width:45px; height:45px; display:grid; place-items:center; color:#fff; background:var(--blue); border-radius:13px; font:700 20px Onest,sans-serif; }
.avito-icon { background:#536ee8; }
.telegram-icon { background:#229ed9; }
.mail-icon { background:#e64b35; }
.integration-card h2 { font-size:23px; }
.integration-card > p { min-height:62px; color:var(--muted); line-height:1.55; }
.integration-card ul { flex:1; margin:15px 0 24px; padding-left:18px; color:#4f5c6d; line-height:1.8; }
.mail-card .stack-form { flex:1; }
.connection-note { margin-top:18px; padding:11px; color:var(--muted); background:#f6f7f9; border-radius:9px; font-size:11px; line-height:1.45; }
.error-note { color:var(--red); background:var(--red-soft); }
.connected-name { min-height:0!important; margin:7px 0 0; color:var(--green)!important; font-weight:800; }
.integration-actions { display:flex; flex-direction:column; gap:8px; }
.integration-actions form { margin:0; }
.danger-button { color:var(--red); }
.form-description { margin:10px 0 0; color:var(--muted); line-height:1.6; }
.external-help { display:inline-block; margin-top:18px; color:var(--blue); font-weight:750; text-decoration:none; }
.secret-note { display:flex; flex-direction:column; gap:4px; margin-top:22px; padding:13px 14px; color:var(--green); background:var(--green-soft); border-radius:10px; font-size:11px; }
.secret-note span { color:#4e806d; line-height:1.45; }
.chat-list > div > label { display:flex; align-items:flex-start; gap:11px; padding:13px 14px; background:#fafbfd; border:1px solid var(--line); border-radius:10px; font-weight:700; }
.chat-list > div { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.chat-list input { width:18px; height:18px; margin:1px 0 0; accent-color:var(--blue); }
.chat-list .errorlist { grid-column:1/-1; }
.security-note { display:flex; gap:18px; margin-top:14px; padding:19px 22px; }
.security-note span { color:var(--muted); }

.messages { width:min(100%,1420px); margin:16px auto -22px; padding:0 26px; }
.message { padding:12px 14px; color:var(--blue-dark); background:var(--blue-soft); border:1px solid #c7d7ef; border-radius:10px; }
.message.error { color:var(--red); background:var(--red-soft); border-color:#e8c2bf; }
.message.info { color:#755225; background:#fff6e9; border-color:#ecd8bb; }
.site-footer { width:min(100%,1420px); margin:0 auto; padding:22px 26px 38px; display:flex; justify-content:space-between; gap:20px; color:var(--muted); border-top:1px solid var(--line); font-size:12px; }

@media (max-width:1100px) {
  .topbar { flex-wrap:wrap; gap:8px 16px; }
  .topnav { order:3; width:100%; overflow-x:auto; }
  .signal-links { margin-left:auto; }
  .top-actions { margin-left:0; }
  .summary-grid { grid-template-columns:1fr 1fr; }
  .detail-grid { grid-template-columns:1fr; }
  .request-sidebar { display:grid; grid-template-columns:repeat(3,1fr); }
  .integration-grid { grid-template-columns:1fr; }
  .integration-card { min-height:auto; }
  .integration-card > p { min-height:0; }
}

@media (max-width:760px) {
  .page-shell { padding:30px 15px 50px; }
  .topbar { padding:10px 15px; }
  .signal-links { order:2; width:100%; margin:0; overflow-x:auto; }
  .top-actions { margin-left:auto; }
  .top-actions .top-link { display:none; }
  .hero-row,.detail-head { align-items:stretch; flex-direction:column; }
  .hero-actions { flex-wrap:wrap; }
  .hero-actions > * { flex:1; }
  .summary-grid { grid-template-columns:1fr; }
  .summary-card { min-height:120px; }
  .filterbar { flex-direction:column; }
  .filterbar select { width:100%; }
  .request-sidebar { display:flex; }
  .bubble { width:92%; }
  .conversation { padding:16px 12px; }
  .composer { padding:17px 14px; }
  .request-form { display:block; }
  .chat-list > div { grid-template-columns:1fr; }
  .form-card,.auth-card,.integration-card { padding:23px 18px; }
  .form-heading { flex-direction:column; }
  .site-footer,.security-note { flex-direction:column; padding-left:15px; padding-right:15px; }
}