/* Референс пользователя: белые карточки, серый фон, лайм и тёмно-зелёный. */
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Regular.woff") format("woff"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Medium.woff") format("woff"); font-style: normal; font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Inter Login"; src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
:root {
  --bg: #f3f3f3; --card: #fff; --ink: #171b17; --muted: #7d847c;
  --border: #e7eae4; --brand: #16451f; --brand-ink: #fff;
  --danger: #c15a42; --danger-bg: #fff1eb; --ok: #30745b; --ok-bg: #edf6ef;
  --surface-soft: #f7f8f6; --accent: #b1ed72; --sidebar-width: 232px;
  --action: #16451f; --action-hover: #235c2e; --action-ink: #fff;
  --radius-card: 22px; --shadow-float: 0 12px 36px #14201412;
}
body { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 14px; letter-spacing: -.12px; }
.ui-icon { width: 19px; height: 19px; flex-shrink: 0; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
a { text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], select, textarea { background-color: var(--card); color: var(--ink); border-radius: 8px; border-color: var(--border); }
input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #84bd55; outline-offset: 3px; }
.sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: var(--sidebar-width); padding: 32px 16px 22px; background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.workspace-brand { display: block; padding: 0 10px; color: var(--ink); text-decoration: none; }
.preora-identity { display: inline-flex; flex-direction: column; gap: 7px; max-width: 100%; }
.service-name { color: var(--ink); font-family: "Inter", Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -.9px; }
.brand-caption { display: block; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.4; letter-spacing: .2px; }
.workspace .mainnav { display: flex; flex: 0; flex-direction: column; gap: 7px; margin-top: 36px; overflow: visible; }
.workspace .mainnav a { display: flex; align-items: center; gap: 13px; padding: 12px 14px; color: #6f776e; font-size: 13px; border-radius: 999px; }
.workspace .mainnav a.active { background: var(--accent); color: #16451f; font-weight: 600; }
.workspace .mainnav a:hover { background: var(--surface-soft); color: var(--brand); }
.workspace .mainnav a.active:hover { background: #a4e163; }
.workspace .nav-badge { margin-left: auto; background: #d6edc4; color: #16451f; font-size: 10px; }
.sidebar-bottom { margin-top: auto; padding: 24px 12px 0; font-size: 12px; font-weight: 600; }
.connection-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #16451f; }
.sidebar-footnote { display: block; margin: 7px 0 28px; font-weight: 400; font-size: 10px; color: var(--muted); }
.studio-signature { display: block; border-top: 1px solid var(--border); padding-top: 19px; font-size: 12px; letter-spacing: 2px; }
.studio-signature > span { display: block; font-size: 9px; font-weight: 400; letter-spacing: .1px; color: var(--muted); margin-top: 5px; }
.workspace .topbar { margin-left: var(--sidebar-width); background: var(--card); color: var(--ink); border-bottom: 1px solid var(--border); }
.workspace .topbar-inner { max-width: 1560px; height: 76px; padding: 0 36px; gap: 22px; }
.breadcrumbs { flex: 1; color: var(--muted); font-size: 12px; }
.breadcrumbs span { margin: 0 14px; color: #cdd3c9; }
.breadcrumbs strong { color: var(--ink); font-weight: 500; }
@media (min-width: 901px) { .workspace .breadcrumbs > strong { display: none; } }
.demo-pill { display: inline-flex; align-items: center; gap: 6px; color: #42633a; background: #edf5e7; border: 1px solid #d6e8c8; border-radius: 999px; padding: 4px 9px; font-size: 10px; white-space: nowrap; }
.demo-pill > span { width: 5px; height: 5px; border-radius: 50%; background: #16451f; }
.workspace .bell summary { color: var(--muted); padding: 8px; }
.workspace .bell-icon { display: flex; }
.workspace .bell-dot { background: var(--danger); }
.workspace .usermenu summary { color: var(--ink); padding: 6px 0 6px 17px; border-left: 1px solid var(--border); border-radius: 0; }
.workspace .usermenu .uavatar { width: 34px; height: 34px; background: #edf5e7; color: #16451f; font-size: 12px; }
.workspace .usermenu summary .uname { font-size: 12px; font-weight: 500; max-width: 155px; overflow: hidden; text-overflow: ellipsis; }
.workspace .usermenu-drop, .workspace .bell-drop { background: var(--card); box-shadow: var(--shadow-float); border-radius: var(--radius-card); }
.workspace .usermenu-drop a:hover, .workspace .bell-drop a:hover { background: var(--surface-soft); }
.workspace .container { width: auto; max-width: 1560px; margin-left: var(--sidebar-width); padding: 24px 36px 48px; }
.demo-notice { display: flex; align-items: center; gap: 9px; margin-bottom: 27px; color: var(--muted); font-size: 11px; }
.demo-notice .ui-icon { width: 15px; height: 15px; color: #98a08f; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin: 7px 0 26px; }
.eyebrow { font-size: 9px; letter-spacing: 1.7px; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.workspace h1.page-title { margin: 0 0 10px; font-family: "Inter", Arial, sans-serif; font-size: clamp(22px, 2vw, 29px); font-weight: 500; line-height: 1.35; letter-spacing: -.65px; }
.workspace main > h1.page-title { margin: 5px 0 26px; }
.heading-dot { color: var(--accent); }
.page-subtitle { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.page-heading > a { flex-shrink: 0; white-space: nowrap; }
.card { background: var(--card); border-radius: var(--radius-card); padding: 22px; border-color: var(--border); box-shadow: 0 2px 3px #14201402; }
.card h2 { font-size: 20px; font-weight: 600; letter-spacing: -.3px; line-height: 1.35; color: #16451f; }
.card h3 { font-size: 17px; font-weight: 600; line-height: 1.4; color: #16451f; }
.card > h2 { display: flex; align-items: flex-start; gap: 10px; }
.card > h2::before { content: ''; display: block; flex: 0 0 4px; height: 1.1em; margin-top: .12em; border-radius: 3px; background: #b1ed72; }
:root[data-theme="dark"] .card h2, :root[data-theme="dark"] .card h3 { color: #b1ed72; }
.lead-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; list-style: none; cursor: pointer; border-radius: 6px; }
.lead-panel > summary::-webkit-details-marker { display: none; }
.lead-panel > summary::marker { content: ''; }
.lead-panel > summary > h2 { display: flex; align-items: flex-start; gap: 10px; min-width: 0; margin: 0; }
.lead-panel > summary > h2::before { content: ''; display: block; flex: 0 0 4px; height: 1.1em; margin-top: .12em; border-radius: 3px; background: #b1ed72; }
.lead-panel-chevron { flex: 0 0 22px; width: 22px; height: 22px; color: var(--brand, #16451f); transition: transform .18s ease; }
.lead-panel[open] > summary .lead-panel-chevron { transform: rotate(90deg); }
.lead-panel-body { padding-top: 18px; }
:root[data-theme="dark"] .lead-panel-chevron { color: #b1ed72; }
@media (prefers-reduced-motion: reduce) { .lead-panel-chevron { transition: none; } }
.btn-sm, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--action); color: var(--action-ink); border: 1px solid var(--action); border-radius: 999px; font-weight: 500; font-size: 12px; padding: 9px 16px; }
.btn-sm:not(.btn-ghost):not(.btn-danger), button.btn { background: var(--action); color: var(--action-ink); border-color: var(--action); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--border); }
.btn-success { background: var(--action); border-color: var(--action); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: white; }
.btn-sm:not(.btn-ghost):not(.btn-danger):hover, button.btn:hover { background: var(--action-hover); border-color: var(--action-hover); filter: none; }
.btn-sm:hover { filter: brightness(.96); }
.page-heading .btn-sm .ui-icon { width: 15px; height: 15px; }
.workspace .filters { gap: 12px; align-items: end; }
.workspace .filters .fld { flex: 1 1 120px; min-width: 0; }
.workspace .filters .fld:first-child { flex: 2 1 220px !important; }
.workspace .filters .fld:has(.btn-sm) { flex: 0 0 auto; }
.workspace .filters input, .workspace .filters select { width: 100%; min-width: 0; font-size: 12px; height: 38px; }
.workspace .filters label { font-size: 10px; color: var(--muted); font-weight: 500; margin: 0 0 8px; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 24px 0 30px; }
.metric-card { padding: 19px 20px 17px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); }
.metric-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; gap: 7px; }
.metric-label .ui-icon { color: #87967f; width: 17px; height: 17px; }
.metric-card > strong { display: block; font-size: 36px; font-weight: 500; line-height: 1; letter-spacing: -1.5px; margin: 19px 0 12px; font-variant-numeric: tabular-nums; }
.metric-caption { font-size: 10px; color: var(--muted); }
.metric-attention { background: var(--accent); border-color: transparent; color: #16451f; }
.metric-attention .metric-label, .metric-attention .metric-caption, .metric-attention .metric-label .ui-icon { color: #355d26; }
.list-toolbar { gap: 13px; margin: 0 0 14px; padding: 0 2px; flex-wrap: wrap; }
.list-caption { font-size: 15px; font-weight: 600; margin-right: auto; }
.list-caption > span { display: inline-block; background: #edf5e7; color: #16451f; font-size: 10px; padding: 2px 7px; border-radius: 5px; margin-left: 7px; }
.list-toolbar .switch { min-height: 36px; padding: 7px 10px; gap: 8px; border-radius: 9px; font-size: 12px; font-weight: 500; line-height: 1.2; }
#list-results.is-loading > .card { opacity: .5; pointer-events: none; }
.list-toolbar .switch input[type="checkbox"] { appearance: none; -webkit-appearance: none; display: grid; place-content: center; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; padding: 0; border: 1.5px solid #aeb5bf; border-radius: 4px; background: var(--card); outline: none; box-shadow: none; }
.list-toolbar .switch input[type="checkbox"]::before { content: ''; width: 4px; height: 8px; margin-top: -2px; border: solid #173317; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.list-toolbar .switch input[type="checkbox"]:checked { background: #84bd55; border-color: #84bd55; }
.list-toolbar .switch input[type="checkbox"]:checked::before { opacity: 1; }
.list-toolbar .switch:hover { border-color: #84bd55; }
.list-toolbar .switch:has(input:checked) { background: #f1f9e9; border-color: #b8d79d; color: var(--ink); }
.list-toolbar .switch:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }
:root[data-theme="dark"] .list-toolbar .switch:has(input:checked) { background: #263625; border-color: #679846; color: var(--ink); }
.list-toolbar-hint { font-size: 10px; }
#list-results > .card { padding: 0; overflow: hidden; }
.workspace .table-wrap { border-radius: 20px; }
.workspace table.grid { font-size: 12px; border: 0; }
.workspace table.grid th { background: var(--surface-soft); color: var(--muted); padding: 14px 16px; font-size: 10px; font-weight: 500; border-color: var(--border); white-space: nowrap; }
.workspace table.grid td { padding: 18px 16px; border-color: var(--border); vertical-align: middle; }
.workspace table.grid tbody tr:last-child td { border-bottom: 0; }
.workspace table.grid tbody tr:hover td { background-color: #f7faf3; }
.workspace table.grid .lead-num { font-weight: 600; color: var(--brand); font-size: 13px; }
.workspace table.grid tr.closed td { background: #f6f7f4; }
.workspace table.grid tr.done td:first-child { border-left-color: #72a486; }
.workspace table.grid tr.overdue td:first-child { border-left-color: #d49370; }
.source-pill { display: inline-block; margin: 0 0 7px; border-radius: 4px; padding: 1px 6px; background: #edf5e7; color: #42633a; font-size: 9px; font-weight: 500; letter-spacing: .1px; }
.source-soco { background: #eff3ec; color: #62745a; }
.lead-contact { min-width: 215px; max-width: 330px; }
.lead-contact strong { display: block; font-size: 12px; font-weight: 600; }
.contact-person { display: block; color: var(--muted); margin-top: 3px; font-size: 11px; }
.lead-excerpt { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.badge { font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: 5px; white-space: nowrap; }
.badge-new { background: #f0f1ef; color: #66705f; }
.badge-in_progress { background: #fff0e5; color: #9b460c; }
.badge-done { background: #e7f2e7; color: #5d8a64; }
.badge-declined { background: #f9ebe6; color: #b37860; }
.badge-spam { background: #edf0ed; color: #859087; }
.flash { border-radius: 9px; font-size: 12px; }
.flash-warn { background: #fff5ed; color: #9b460c; border-color: #ffddc4; }
.flash-error { background: #fff1eb; color: #aa644b; border-color: #eed5c7; }
.pager { border-top: 1px solid var(--border); margin: 0; padding: 17px 22px; font-size: 11px; }
.msg { border-radius: 9px; border-color: var(--border); }
.msg.report { background: #f1f8e9; border-left-color: #84bd55; }
.chip-active { background: #edf5e7; color: var(--brand); border-color: #d4e6c6; }
.site-card-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.site-card-heading .ui-icon { width: 24px; height: 24px; color: var(--brand); }
.site-card-heading h2 { margin: 0 0 4px; }
.site-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.api-key { max-width: 100%; display: block; overflow-wrap: anywhere; background: var(--surface-soft); padding: 12px; border-radius: 8px; font-size: 11px; margin: 10px 0; }
.site-status { margin-left: auto; font-size: 10px; color: var(--ok); }
.auth-card { max-width: 420px; border-radius: 20px; padding: 36px; box-shadow: 0 18px 65px #14201408; }
.auth-brand { margin-bottom: 35px; }
.auth-card h1 { color: var(--ink); font-family: "Inter", Arial, sans-serif; font-weight: 500; font-size: 24px; letter-spacing: -.7px; }
.auth-card .auth-title { text-align: center; margin-bottom: 24px; }
.login-heading { display: flex; flex-direction: column; gap: 30px; margin-bottom: 28px; text-align: center; }
.login-topline { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.login-wordmark { color: var(--ink); font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -1px; }
.login-caption { color: var(--muted); font-size: 14px; line-height: 1.4; text-align: center; }
.login-heading .auth-title { margin: 0; font-family: "Inter Login", "Inter", Arial, sans-serif; font-size: 28px; font-weight: 600; line-height: 1.25; }
.auth-brand .service-name { font-size: 26px; }
body:not(.workspace) .topbar { background: var(--card); color: var(--ink); border-bottom: 1px solid var(--border); }
.manager-brand .preora-identity { vertical-align: middle; gap: 3px; }
.manager-brand .service-name { font-size: 20px; }
.manager-brand .brand-caption { font-size: 9px; }
.auth-demo { margin-top: 22px; font-size: 11px; color: var(--muted); line-height: 1.7; border-top: 1px solid var(--border); padding-top: 17px; }
:root[data-theme="dark"] { --bg: #131713; --card: #1c231c; --ink: #f3f3f3; --muted: #a3ada0; --border: #354033; --brand: #b1ed72; --brand-ink: #13200f; --surface-soft: #252e23; --danger: #e3a38b; --danger-bg: #392a23; --ok-bg: #263f2b; }
:root[data-theme="dark"] .workspace .mainnav a.active { background: #b1ed72; color: #16451f; }
:root[data-theme="dark"] .workspace .mainnav a { color: var(--muted); }
:root[data-theme="dark"] .metric-attention { background: #b1ed72; border-color: transparent; color: #16451f; }
:root[data-theme="dark"] .demo-pill { background: #34462b; border-color: #4f653e; color: #d5ecbe; }
:root[data-theme="dark"] .workspace table.grid tbody tr:hover td, :root[data-theme="dark"] .workspace table.grid tr.closed td { background: var(--surface-soft); }
:root[data-theme="dark"] .source-pill, :root[data-theme="dark"] .badge-done { background: #2d4532; color: #b4d4b6; }
:root[data-theme="dark"] .badge-new, :root[data-theme="dark"] .source-soco { background: #313a2d; color: #d1ddc7; }
:root[data-theme="dark"] .badge-in_progress { background: #493f28; color: #dcc98c; }
:root[data-theme="dark"] .badge-declined { background: #4d352b; color: #e2b8a1; }
:root[data-theme="dark"] .btn-sm { color: var(--action-ink); }
:root[data-theme="dark"] .btn-sm.btn-ghost { color: var(--ink); background: var(--card); border-color: var(--border); }
:root[data-theme="dark"] .btn-sm.btn-danger { color: white; }
:root[data-theme="dark"] .source-pill { background: #34462b; color: #e2f3d2; }
:root[data-theme="dark"] body input[type="text"], :root[data-theme="dark"] body input[type="email"], :root[data-theme="dark"] body input[type="password"], :root[data-theme="dark"] body input[type="date"], :root[data-theme="dark"] body select, :root[data-theme="dark"] body textarea { background-color: var(--surface-soft); color: var(--ink); border-color: var(--border); color-scheme: dark; }
:root[data-theme="dark"] .workspace table.grid th { background: var(--surface-soft); }
:root[data-theme="dark"] .flash-error { background: var(--danger-bg); color: var(--danger); border-color: #624337; }
:root[data-theme="dark"] .flash-warn { background: #3a251a; color: #ffc49a; border-color: #674026; }
@media (min-width: 1800px) { .workspace .container { margin-right: auto; margin-left: calc(var(--sidebar-width) + (100vw - var(--sidebar-width) - 1560px) / 2); } }
@media (max-width: 1180px) { :root { --sidebar-width: 196px; } .sidebar { padding-left: 10px; padding-right: 10px; } .workspace .topbar-inner, .workspace .container { padding-left: 22px; padding-right: 22px; } .page-heading { align-items: flex-start; } .page-heading > a { font-size: 0; padding: 10px; } .page-heading > a .ui-icon { width: 18px; height: 18px; } .metric-grid { gap: 10px; } .metric-card { padding: 16px; } }
@media (max-width: 850px) { :root { --sidebar-width: 0px; } .sidebar { position: relative; width: 100%; padding: 18px 20px 0; border-right: 0; border-bottom: 1px solid var(--border); } .workspace-brand { font-size: 23px; } .sidebar-label, .sidebar-bottom { display: none; } .workspace .mainnav { flex-direction: row; overflow-x: auto; margin: 17px -20px 0; padding: 0 14px 12px; gap: 5px; } .workspace .mainnav a { flex: 0 0 auto; padding: 9px 12px; gap: 7px; font-size: 12px; } .workspace .mainnav .ui-icon { width: 16px; height: 16px; } .workspace .topbar-inner { height: 60px; } .workspace .container { padding-top: 20px; } .workspace .usermenu summary .uname { display: none; } .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .metric-card > strong { font-size: 32px; margin: 14px 0 10px; } .demo-notice { margin-bottom: 20px; } }
@media (max-width: 760px) { .workspace .table-wrap { overflow: visible; } .workspace table.grid td { padding: 7px 14px; } .workspace table.grid tr { padding: 14px 0; margin: 0; border-radius: 0; border-width: 0 0 1px 3px; border-color: var(--border); } .workspace table.grid td.lead-contact { max-width: none; min-width: 0; } .workspace table.grid tr.done { border-left-color: #72a486; } .workspace table.grid tr.overdue { border-left-color: #d49370; } .site-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .workspace .topbar-inner { padding: 0 16px; gap: 12px; } .breadcrumbs { font-size: 10px; } .breadcrumbs span { margin: 0 7px; } .breadcrumbs > strong { display: block; margin-top: 2px; } .workspace .container { padding: 19px 16px 35px; } .page-heading { gap: 10px; } .workspace h1.page-title { font-size: 25px; } .page-subtitle { font-size: 11px; } .demo-notice { align-items: flex-start; font-size: 10px; } .metric-card { padding: 14px; } .metric-caption { font-size: 9px; } .metric-label { font-size: 10px; } .list-toolbar-hint { display: none; } .card { padding: 17px; } .auth-card { padding: 28px; } }

.ui-ready [data-lead-row] { cursor: pointer; }
.ui-ready [data-lead-row]:hover { box-shadow: inset 0 0 0 9999px rgba(128,128,128,.05); }

:root .flash.flash-toast { position: fixed; right: max(24px,env(safe-area-inset-right)); bottom: max(24px,env(safe-area-inset-bottom)); z-index: 1100; display: flex; align-items: center; gap: 16px; width: max-content; max-width: min(420px,calc(100vw - 32px)); margin: 0; padding: 14px 12px 14px 20px; border: 1px solid #16451f; color: #16451f; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.12); }
.flash-toast > span { min-width: 0; overflow-wrap: anywhere; }
.flash-toast .toast-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.flash-toast .toast-close:hover { background: rgba(128,128,128,.12); }
.flash-toast .toast-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 480px) { .flash.flash-toast { right: max(16px,env(safe-area-inset-right)); bottom: max(16px,env(safe-area-inset-bottom)); } }

.workspace .bars .bar { background: linear-gradient(180deg, #fb923c, #f97316); }