@charset "UTF-8";

:root {
  --bg: #fbfdfe;
  --surface: #fff;
  --ink: #031a31;
  --muted: #456579;
  --line: #d7e5ec;
  --line-strong: #d7e5ec;
  --accent: #00728e;
  --accent-hover: #005e78;
  --accent-ink: #ffffff;
  --sidebar: #031a31;
  --danger: #b54f41;
  --warning: #97651c;
  --green: #456579;
  --radius: 14px;
  --sidebar-width: 232px;
  --shadow: 0 10px 35px rgb(24 35 27 / 7%);
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 320px; font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .48; cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
button svg, a svg { flex: 0 0 auto; }
svg { display: block; }
img { display: block; max-width: 100%; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #00728e;
  outline-offset: 3px;
}
[hidden] { display: none !important; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: 32px; line-height: 1.2; font-weight: 650; letter-spacing: -.95px; }
h2 { margin-bottom: 8px; font-size: 19px; line-height: 1.35; font-weight: 650; letter-spacing: -.3px; }
h3 { margin-bottom: 8px; font-size: 15px; line-height: 1.4; font-weight: 650; }
p { margin-bottom: 14px; }
small { font-size: 12px; }
.muted, .text-muted, .subtle { color: var(--muted); }
.eyebrow { margin-bottom: 15px; color: var(--muted); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 1.5px; }
.mono, code { font-family: Consolas, "Courier New", monospace; font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.app-shell, .shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; flex-direction: column; width: var(--sidebar-width); padding: 31px 18px 20px; background: var(--sidebar); color: #fbfdfe; }
.brand, .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 12px; margin-bottom: 35px; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; color: var(--sidebar); background: var(--accent); border-radius: 10px; font-size: 19px; font-weight: 800; letter-spacing: -2px; }
.brand-name { font-size: 21px; line-height: 1.1; font-weight: 700; letter-spacing: -.7px; }
.brand-name small, .brand-sub { display: block; margin-top: 5px; font-size: 9px; line-height: 1.3; color: #648293; font-weight: 500; text-transform: uppercase; letter-spacing: 2.05px; }
.nav-section, .nav-label { padding: 0 13px; margin-bottom: 10px; color: #648293; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.7px; }
.nav, .sidebar-nav { display: flex; flex-direction: column; gap: 5px; }
.nav a, .nav button, .nav-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 45px; width: 100%; padding: 11px 13px; border: 0; border-radius: 9px; background: transparent; color: #bdd7e2; text-align: left; font-size: 12.5px; transition: background .16s, color .16s; }
.nav svg, .nav-item svg { width: 18px; height: 18px; opacity: .8; }
.nav a:hover, .nav button:hover, .nav-item:hover { background: #031a31; color: white; }
.nav .active, .nav-item.active { background: var(--accent); color: var(--accent-ink); font-weight: 650; }
.nav .active svg, .nav-item.active svg { opacity: 1; }
.nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; min-height: 19px; margin-left: auto; padding: 1px 6px; border-radius: 5px; background: rgb(255 255 255 / 8%); font-size: 10px; }
.active .nav-count { background: rgb(33 37 34 / 10%); }
.sidebar-spacer { flex: 1; min-height: 50px; }
.sidebar-note, .sidebar-status { margin: 30px 4px 18px; padding: 15px 12px; border: 1px solid #24465d; border-radius: 10px; color: #bdd7e2; font-size: 11px; }
.sidebar-note strong, .sidebar-status strong { display: block; margin-bottom: 7px; color: #effafd; font-size: 12px; font-weight: 500; }
.sidebar-note p, .sidebar-status p { margin: 0; line-height: 1.6; }
.sidebar-footer, .user-profile { display: flex; gap: 10px; align-items: center; padding: 16px 9px 0; border-top: 1px solid #24465d; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #effafd; color: #24465d; font-size: 11px; font-weight: 650; flex: 0 0 auto; }
.sidebar .avatar { background: #24465d; color: #bdd7e2; }
.user-name { font-size: 11px; font-weight: 600; }
.user-role { color: #648293; font-size: 10px; }
.sidebar-footer .icon-btn { margin-left: auto; color: #648293; }
.main, .main-content { margin-left: var(--sidebar-width); min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 15px 38px; background: white; border-bottom: 1px solid var(--line); }
.breadcrumbs { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #648293; }
.breadcrumbs strong { color: #456579; font-weight: 500; }
.topbar-actions, .header-actions, .page-actions, .actions, .toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topbar-actions { justify-content: flex-end; }
.content, .page-content { padding: 33px 38px 44px; max-width: 1720px; margin: 0 auto; }
.page-head, .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.page-head p, .page-header p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.page-head .page-actions, .page-header .page-actions { padding-top: 5px; justify-content: flex-end; }
.menu-toggle, .mobile-menu { display: none; }

.btn, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 39px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink); font-size: 11.5px; line-height: 1.4; font-weight: 600; white-space: nowrap; transition: background .16s, border-color .16s, transform .16s; }
.btn:hover, .button:hover { background: #effafd; border-color: #bdd7e2; }
.btn svg, .button svg { width: 15px; height: 15px; }
.btn-primary, .btn.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: #031a31; }
.btn-primary:hover, .btn.primary:hover, .button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-dark { background: var(--sidebar); border-color: var(--sidebar); color: #fff; }
.btn-dark:hover { background: #24465d; color: #fff; }
.btn-ghost, .btn.ghost { background: transparent; border-color: transparent; }
.btn-danger, .btn.danger { color: var(--danger); background: #fff8f6; border-color: #f0d6d1; }
.btn-sm, .btn.small { min-height: 31px; padding: 6px 10px; font-size: 10.5px; }
.btn-wide, .full-width { width: 100%; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 8px; border: 1px solid transparent; border-radius: 7px; color: #456579; background: transparent; }
.icon-btn:hover { background: #effafd; }
.icon-btn svg { width: 17px; height: 17px; }
.text-btn { border: 0; padding: 0; background: none; font-size: 11px; color: #24465d; font-weight: 600; }
.text-btn:hover { text-decoration: underline; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.badge, .status, .pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 5px; background: #effafd; color: #456579; font-size: 10px; line-height: 1.4; font-weight: 500; white-space: nowrap; }
.badge.green, .badge.success, .status.active, .status.success, .pill.green { color: #456579; background: #effafd; }
.badge.yellow, .badge.warning, .status.warning, .pill.yellow { color: #a8782b; background: #fcf4e4; }
.badge.red, .badge.danger, .status.error, .pill.red { color: #aa6557; background: #faf0ec; }
.badge.dark { color: #bdd7e2; background: #24465d; }
.badge.demo { background: #effafd; color: #456579; }
.connection-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; color: #456579; }
.connection-badge .dot { background: #b79d60; }
.notice, .banner { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 24px; padding: 14px 17px; border: 1px solid #effafd; border-radius: 10px; background: #effafd; color: #456579; font-size: 11px; line-height: 1.65; }
.notice svg, .banner svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; }
.notice strong, .banner strong { font-weight: 650; color: #24465d; }
.notice p, .banner p { margin: 0; }
.notice.warning, .banner.warning { background: #fff9ed; border-color: #f0e5ca; color: #937841; }
.notice.error { background: #fff4f1; border-color: #f2d6ce; color: var(--danger); }

.stat-grid, .stats-grid, .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 25px; }
.stat-card, .metric-card { position: relative; padding: 20px 22px 19px; background: white; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.stat-top, .stat-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 11px; color: #648293; }
.stat-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: #effafd; border-radius: 7px; color: #648293; }
.stat-icon svg { width: 14px; height: 14px; }
.stat-value, .metric-value { font-size: 29px; font-weight: 600; line-height: 1.3; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: 17px; color: #648293; font-weight: 400; }
.stat-bottom, .stat-foot { display: flex; gap: 8px; align-items: center; margin-top: 11px; font-size: 10px; color: #648293; }
.stat-trend, .trend { color: #456579; font-size: 10px; font-weight: 500; }
.stat-trend.negative, .trend.negative { color: #b17b50; }
.dashboard-grid, .overview-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(270px, 1fr); gap: 22px; margin-bottom: 25px; align-items: stretch; }
.panel, .card { background: white; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.panel-head, .panel-header, .card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 23px 24px 0; margin-bottom: 22px; }
.panel-head h2, .panel-header h2, .card-header h2 { margin: 0; font-size: 15px; font-weight: 650; }
.panel-head p, .panel-header p { margin: 5px 0 0; color: #648293; font-size: 10px; }
.panel-body, .card-body { padding: 0 24px 24px; }
.panel-footer { padding: 15px 24px; border-top: 1px solid var(--line); color: #648293; font-size: 10px; }
.chart-card { overflow: hidden; }
.chart-legend { display: flex; gap: 16px; align-items: center; color: #648293; font-size: 10px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 7px; height: 7px; border-radius: 2px; background: #00728e; }
.chart { min-height: 210px; width: 100%; }
.chart svg, .chart-svg { width: 100%; height: auto; min-height: 185px; overflow: visible; }
.chart-grid { stroke: #effafd; stroke-width: 1; }
.chart-label { fill: #648293; font-size: 10px; font-family: inherit; }
.chart-line { fill: none; stroke: #00728e; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-area { fill: #00728e; opacity: .14; }
.chart-empty, .empty-chart { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; padding: 25px; color: #648293; text-align: center; }
.chart-empty svg, .empty-chart svg { margin-bottom: 14px; width: 32px; height: 32px; color: #bdd7e2; }
.chart-empty strong, .empty-chart strong { font-size: 13px; color: #456579; font-weight: 500; }
.chart-empty p, .empty-chart p { max-width: 300px; margin: 7px 0 0; font-size: 11px; }
.attention-list { display: flex; flex-direction: column; }
.attention-item { display: flex; gap: 12px; padding: 15px 0; border-bottom: 1px solid #effafd; }
.attention-item:first-child { padding-top: 0; }
.attention-item:last-child { border-bottom: 0; padding-bottom: 0; }
.attention-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; background: #fbf4e7; color: #b08a44; border-radius: 8px; }
.attention-icon svg { width: 15px; height: 15px; }
.attention-item h3 { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; }
.attention-item p { margin: 0; color: #648293; font-size: 10.5px; line-height: 1.6; }
.attention-item .text-btn { display: inline-block; margin-top: 7px; }

.toolbar, .table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px 20px; flex-wrap: wrap; }
.search, .search-field { position: relative; display: flex; align-items: center; gap: 9px; min-width: 220px; }
.search svg, .search-field svg { position: absolute; left: 12px; width: 15px; height: 15px; color: #648293; pointer-events: none; }
.search input, .search-field input { width: 100%; min-height: 36px; padding: 9px 12px 9px 35px; background: #fbfdfe; border: 1px solid #effafd; border-radius: 8px; font-size: 11px; }
.search input::placeholder, .search-field input::placeholder { color: #648293; }
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-chip { padding: 7px 11px; border: 1px solid var(--line); background: white; border-radius: 7px; font-size: 10px; color: #456579; }
.filter-chip.active { background: #effafd; border-color: #bdd7e2; color: #24465d; }
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line-strong); margin-bottom: 24px; }
.tab { position: relative; min-height: 43px; padding: 0 0 14px; border: 0; background: none; color: #648293; font-size: 12px; white-space: nowrap; }
.tab.active { color: #24465d; font-weight: 600; }
.tab.active::after { position: absolute; inset: auto 0 -1px; height: 2px; border-radius: 2px; background: #648293; content: ""; }
.tab .badge { margin-left: 6px; padding: 1px 5px; }
.table-wrap, .table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; }
th { padding: 12px 17px; background: #fbfdfe; color: #648293; font-size: 10px; font-weight: 500; white-space: nowrap; border-block: 1px solid var(--line); }
td { padding: 18px 17px; border-bottom: 1px solid #effafd; color: #456579; font-variant-numeric: tabular-nums; vertical-align: middle; }
th:first-child, td:first-child { padding-left: 24px; }
th:last-child, td:last-child { padding-right: 24px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfdfe; }
.client-cell { display: flex; gap: 11px; align-items: center; min-width: 200px; }
.client-icon, .client-avatar { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 8px; background: #effafd; color: #456579; font-size: 11px; font-weight: 600; }
.client-cell strong, .cell-title { display: block; font-size: 11.5px; color: #24465d; font-weight: 600; }
.client-cell small, .cell-sub { display: block; margin-top: 4px; color: #648293; font-size: 9.5px; }
.client-link { cursor: pointer; }
.table-number { text-align: right; }
.row-actions { display: flex; justify-content: flex-end; gap: 4px; }
.row-actions .icon-btn { width: 29px; height: 29px; padding: 6px; }
.row-actions .icon-btn svg { width: 14px; height: 14px; }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 24px; border-top: 1px solid var(--line); color: #648293; font-size: 10px; }
.pagination { display: flex; gap: 6px; align-items: center; }
.pagination button { width: 27px; height: 27px; border: 1px solid var(--line); background: white; border-radius: 6px; font-size: 10px; color: #456579; }
.pagination button.active { background: #effafd; border-color: #bdd7e2; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 55px 30px; text-align: center; }
.empty-state > svg { width: 38px; height: 38px; color: #648293; margin-bottom: 17px; }
.empty-state h2, .empty-state h3 { margin: 0 0 8px; color: #24465d; font-size: 17px; }
.empty-state p { max-width: 430px; margin: 0 0 20px; color: #648293; font-size: 12px; line-height: 1.8; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-field, .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 17px; min-width: 0; }
.form-field label, .field label, label.field-label { color: #24465d; font-size: 11px; font-weight: 600; }
.form-field input, .form-field textarea, .form-field select, .field input, .field textarea, .field select, input.form-control, select.form-control, textarea.form-control { width: 100%; min-height: 42px; padding: 11px 13px; border: 1px solid #bdd7e2; border-radius: 8px; background: #fff; color: #24465d; font-size: 12px; outline-offset: 2px; }
textarea { resize: vertical; line-height: 1.7; min-height: 100px; }
input::placeholder, textarea::placeholder { color: #648293; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: #648293; }
.field-help, .form-hint { font-size: 10px; color: #648293; line-height: 1.65; }
.field-error, .form-error { color: var(--danger); font-size: 11px; line-height: 1.6; }
.field-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.char-count { color: #648293; font-size: 10px; }
.form-section { margin-bottom: 26px; }
.form-section h3 { margin-bottom: 16px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 9px; }
.checkbox-label { display: flex; gap: 9px; align-items: center; font-size: 11px; color: #456579; }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: #456579; }
.settings-grid, .connection-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .8fr); gap: 24px; }
.settings-card, .connection-card { padding: 25px; }
.connection-state { padding: 19px; border-radius: 10px; border: 1px solid #effafd; background: #fbfdfe; margin-bottom: 22px; }
.connection-state h3 { margin: 0 0 7px; font-size: 13px; }
.connection-state p { margin: 0; color: #648293; font-size: 11px; }
.detail-list { margin: 0; padding: 0; list-style: none; }
.detail-list li { padding: 13px 0; border-bottom: 1px solid var(--line); color: #648293; font-size: 11px; }
.detail-list li:last-child { border-bottom: 0; }
.detail-list strong { display: block; margin-bottom: 4px; color: #24465d; font-weight: 500; }
.step-list { margin: 0; padding-left: 18px; color: #648293; font-size: 11px; line-height: 1.8; }
.step-list li { padding: 4px 0; }
.connection-scope { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 10px; color: #648293; }

.backdrop, .overlay-backdrop, .drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgb(22 31 20 / 34%); animation: fade-in .18s ease-out; }
.drawer { position: fixed; z-index: 80; inset: 0 0 0 auto; display: flex; flex-direction: column; width: min(570px, 100%); background: white; box-shadow: -15px 0 70px rgb(23 33 18 / 14%); animation: drawer-in .22s ease-out; }
.drawer-head, .drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 28px; border-bottom: 1px solid var(--line); }
.drawer-head h2, .drawer-header h2 { margin: 0 0 6px; font-size: 21px; }
.drawer-head p, .drawer-header p { margin: 0; color: #648293; font-size: 10px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 25px 28px; }
.drawer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 28px; border-top: 1px solid var(--line); background: #fbfdfe; }
.drawer-footer .muted { font-size: 10px; }
.ad-preview { padding: 20px; border-radius: 10px; border: 1px solid #effafd; background: #fbfdfe; margin-bottom: 22px; }
.ad-preview-label { margin-bottom: 12px; color: #648293; font-size: 9px; text-transform: uppercase; letter-spacing: 1.1px; }
.ad-preview h3, .preview-title { color: #3c6b91; font-size: 18px; font-weight: 500; line-height: 1.4; margin: 0 0 7px; }
.ad-preview .preview-url { color: #456579; font-size: 10px; margin-bottom: 9px; overflow-wrap: anywhere; }
.ad-preview p { margin: 0; color: #456579; font-size: 11px; line-height: 1.7; }
.diff, .diff-box { margin: 12px 0; padding: 15px; border: 1px solid var(--line); border-radius: 9px; font-size: 11px; }
.diff-before, .diff-old { padding: 9px 11px; background: #fcf2ef; color: #a66e60; border-radius: 5px; margin-bottom: 7px; overflow-wrap: anywhere; }
.diff-after, .diff-new { padding: 9px 11px; background: #effafd; color: #456579; border-radius: 5px; overflow-wrap: anywhere; }
.diff-label { display: block; margin-bottom: 5px; font-size: 9px; text-transform: uppercase; letter-spacing: .8px; opacity: .8; }
.change-card { padding: 21px 24px; margin-bottom: 14px; }
.change-card .change-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.change-card h3 { margin: 0; font-size: 12px; }
.modal-wrap { position: fixed; z-index: 90; inset: 0; display: flex; justify-content: center; align-items: center; padding: 24px; background: rgb(22 31 20 / 34%); }
.modal { width: min(480px, 100%); max-height: calc(100dvh - 48px); overflow: auto; padding: 28px; border-radius: 17px; background: white; box-shadow: var(--shadow); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.modal-head h2 { margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
#toast-root { position: fixed; z-index: 150; right: 25px; bottom: 25px; display: flex; flex-direction: column; gap: 10px; max-width: min(390px, calc(100% - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 15px 19px; border: 1px solid #effafd; border-radius: 10px; background: white; box-shadow: 0 8px 40px rgb(21 32 16 / 14%); font-size: 12px; color: #456579; animation: toast-in .2s ease-out; }
.toast.error { border-color: #eed4c9; color: #a6634c; }
.toast svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }

.login-shell { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr); background: white; }
.login-brand { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 49px 58px 35px; color: #effafd; background: var(--sidebar); }
.login-brand .brand { padding: 0; margin: 0; }
.login-brand .brand-mark { width: 38px; height: 38px; }
.login-brand .brand-name { font-size: 24px; }
.login-brand-content { position: relative; z-index: 1; padding-block: 70px; max-width: 520px; }
.login-brand .eyebrow { color: #648293; font-size: 10px; }
.login-brand h1 { max-width: 500px; margin: 0 0 25px; font-size: clamp(44px, 4.7vw, 68px); line-height: 1.06; font-weight: 500; letter-spacing: -2.8px; }
.login-brand h1 span, .login-brand h1 em { color: var(--accent); font-style: normal; }
.login-brand-content > p { max-width: 350px; margin: 0; color: #648293; font-size: 13px; line-height: 1.9; }
.login-brand-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 20px; color: #648293; font-size: 10px; }
.login-orbit { position: absolute; right: -120px; bottom: 35px; width: 410px; height: 410px; border: 1px solid #24465d; border-radius: 50%; }
.login-orbit::before, .login-orbit::after { content: ""; position: absolute; inset: 65px; border: 1px solid #24465d; border-radius: 50%; }
.login-orbit::after { inset: 130px; border-color: #24465d; }
.login-orbit i { position: absolute; width: 18px; height: 18px; left: 48px; top: 50px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 8px #031a31; }
.login-main, .login-form-side { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 45px; }
.login-card { width: 100%; max-width: 365px; }
.login-card h2 { margin-bottom: 10px; font-size: 29px; line-height: 1.25; font-weight: 600; letter-spacing: -.7px; }
.login-card > p { margin-bottom: 31px; color: #648293; font-size: 12px; line-height: 1.8; }
.login-card .form-field { margin-bottom: 20px; }
.login-card .form-field input { min-height: 47px; background: #fbfdfe; }
.login-card .btn-primary { width: 100%; min-height: 46px; margin-top: 5px; font-size: 12px; }
.login-card .form-error { margin: 15px 0; padding: 10px 12px; background: #fff4f0; border-radius: 7px; }
.login-security { display: flex; align-items: flex-start; gap: 9px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 10px; color: #648293; line-height: 1.7; }
.login-security svg { width: 15px; height: 15px; margin-top: 1px; flex: 0 0 auto; color: #648293; }
.login-footer { width: 100%; max-width: 365px; margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; color: #648293; }
.skeleton { background: #effafd; border-radius: 5px; min-height: 16px; }
.loading { opacity: .65; pointer-events: none; }
.spin { animation: spin 1s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawer-in { from { transform: translateX(30px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (min-width: 1700px) {
  .content, .page-content { padding-top: 42px; }
  .stat-card, .metric-card { padding: 24px 27px; }
  .stat-value, .metric-value { font-size: 33px; }
}
@media (max-width: 1190px) {
  .topbar { padding-inline: 25px; }
  .content, .page-content { padding: 28px 25px 38px; }
  .stat-grid, .stats-grid, .stats { gap: 11px; }
  .stat-card, .metric-card { padding: 17px 16px; }
  .stat-value, .metric-value { font-size: 24px; }
  .dashboard-grid, .overview-grid { gap: 16px; grid-template-columns: minmax(0, 1.4fr) minmax(255px, 1fr); }
  .panel-head, .panel-header, .card-header { padding: 20px 19px 0; }
  .panel-body, .card-body { padding-inline: 19px; }
  .chart-legend { gap: 8px; }
  .login-brand { padding-inline: 38px; }
}
@media (max-width: 1000px) {
  :root { --sidebar-width: 207px; }
  .sidebar { padding-inline: 12px; }
  .brand, .sidebar-brand { gap: 8px; padding-inline: 10px; }
  .brand-name { font-size: 19px; }
  .stat-grid, .stats-grid, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .dashboard-grid, .overview-grid { grid-template-columns: 1fr; }
  .attention-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .attention-item { padding: 0; border: 0; }
  .settings-grid, .connection-grid { grid-template-columns: 1fr; }
  .page-head, .page-header { gap: 15px; flex-wrap: wrap; }
  .page-head .page-actions, .page-header .page-actions { padding-top: 0; justify-content: flex-start; }
  .login-shell { grid-template-columns: minmax(0, 1fr) minmax(360px, 1.05fr); }
  .login-brand { padding: 35px 30px; }
  .login-brand h1 { font-size: 45px; letter-spacing: -1.8px; }
  .login-main, .login-form-side { padding: 35px; }
}
@media (max-width: 760px) {
  :root { --sidebar-width: 232px; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; width: 232px; padding: 28px 18px 20px; z-index: 65; }
  .sidebar.open, .sidebar.is-open, body.menu-open .sidebar { transform: translateX(0); }
  .main, .main-content { margin-left: 0; }
  .menu-toggle, .mobile-menu { display: inline-flex; }
  .topbar { padding: 12px 20px; min-height: 64px; gap: 12px; }
  .topbar .breadcrumbs { margin-right: auto; }
  .topbar-actions { gap: 7px; }
  .topbar-actions .connection-badge { max-width: 125px; font-size: 9px; }
  .content, .page-content { padding: 25px 20px 35px; }
  h1 { font-size: 28px; letter-spacing: -.7px; }
  .page-head, .page-header { margin-bottom: 23px; }
  .page-head p, .page-header p { max-width: 470px; }
  .stat-grid, .stats-grid, .stats { gap: 12px; margin-bottom: 20px; }
  .stat-card, .metric-card { padding: 17px 19px; }
  .stat-value, .metric-value { font-size: 27px; }
  .panel-head, .panel-header, .card-header { padding-inline: 20px; }
  .toolbar, .table-toolbar { padding-inline: 20px; gap: 12px; }
  .search, .search-field { min-width: 0; flex: 1 1 200px; }
  .panel-footer, .table-footer { padding-inline: 20px; }
  .tabs { gap: 21px; overflow-x: auto; }
  .tab { font-size: 11px; }
  .client-table, .campaign-table { min-width: 760px; }
  th:first-child, td:first-child { padding-left: 20px; }
  th:last-child, td:last-child { padding-right: 20px; }
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { min-height: 0; padding: 28px 30px 25px; }
  .login-brand .brand { margin-bottom: 45px; }
  .login-brand-content { padding-block: 0 25px; max-width: 520px; }
  .login-brand h1 { max-width: 440px; margin-bottom: 16px; font-size: 47px; letter-spacing: -1.7px; }
  .login-brand-content > p { max-width: 390px; font-size: 12px; }
  .login-brand-footer { display: none; }
  .login-orbit { width: 300px; height: 300px; right: -110px; bottom: -80px; }
  .login-main, .login-form-side { padding: 37px 30px; align-items: stretch; }
  .login-card, .login-footer { max-width: 460px; margin-inline: auto; }
  .login-card h2 { font-size: 26px; }
  .login-card > p { margin-bottom: 24px; }
}
@media (max-width: 450px) {
  .topbar { padding-inline: 13px; gap: 5px; }
  .breadcrumbs { gap: 6px; font-size: 9px; }
  .topbar-actions > .btn { padding: 7px 9px; min-height: 32px; font-size: 9px; }
  .topbar-actions .badge { font-size: 8px; }
  .content, .page-content { padding: 23px 16px 30px; }
  h1 { font-size: 27px; }
  .page-head, .page-header { gap: 17px; }
  .page-head p, .page-header p { font-size: 11px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; min-height: 38px; padding-inline: 11px; font-size: 10.5px; }
  .stat-grid, .stats-grid, .stats { gap: 10px; }
  .stat-card, .metric-card { padding: 15px 14px; }
  .stat-top, .stat-label { margin-bottom: 10px; font-size: 10px; }
  .stat-icon { width: 24px; height: 24px; }
  .stat-value, .metric-value { font-size: 24px; }
  .stat-value small { font-size: 13px; }
  .stat-bottom, .stat-foot { gap: 5px; flex-wrap: wrap; font-size: 9px; }
  .notice, .banner { padding: 13px; font-size: 10px; gap: 9px; }
  .panel-head, .panel-header, .card-header { padding: 19px 17px 0; margin-bottom: 18px; flex-wrap: wrap; gap: 11px; }
  .panel-head h2, .panel-header h2 { font-size: 14px; }
  .panel-body, .card-body { padding: 0 17px 20px; }
  .attention-list { grid-template-columns: 1fr; gap: 18px; }
  .attention-item { padding: 0; }
  .toolbar, .table-toolbar { padding: 0 17px 17px; }
  .toolbar-actions, .filters { gap: 6px; }
  .filter-chip { font-size: 9px; padding: 7px 9px; }
  .table-footer { padding: 14px 17px; font-size: 9px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .settings-card, .connection-card { padding: 20px; }
  .drawer-head, .drawer-header { padding: 22px 20px; }
  .drawer-body { padding: 20px; }
  .drawer-footer { padding: 16px 20px; align-items: flex-start; flex-wrap: wrap; }
  .drawer-footer .actions { width: 100%; }
  .drawer-footer .actions .btn { flex: 1; }
  .drawer-head h2, .drawer-header h2 { font-size: 20px; }
  .modal-wrap { padding: 16px; }
  .modal { padding: 23px 20px; }
  #toast-root { right: 16px; bottom: 16px; }
  .login-brand { padding: 24px 25px 25px; }
  .login-brand .brand { margin-bottom: 34px; }
  .login-brand h1 { font-size: 41px; letter-spacing: -1.6px; }
  .login-main, .login-form-side { padding: 30px 25px; }
  .login-card h2 { font-size: 25px; }
  .login-footer { margin-top: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Server application components. */
.main-shell { display: flex; flex-direction: column; min-height: 100dvh; margin-left: var(--sidebar-width); min-width: 0; }
.main-shell .page-content { width: 100%; flex: 1; }
.sidebar > .brand { margin-bottom: 28px; padding-inline: 10px; }
.sidebar .brand-mark { background: var(--accent); color: #031a31; }
.sidebar .brand-mark svg { width: 27px; height: 27px; }
.sidebar .brand-name { font-size: 22px; letter-spacing: -.7px; }
.sidebar .brand-name > span { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: #648293; letter-spacing: .4px; }
.brand-caption { font-size: 7px; letter-spacing: 1.2px; color: #648293; margin-top: 7px; }
.workspace-switch { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 9px; margin-bottom: 30px; border: 1px solid #24465d; border-radius: 8px; background: #031a31; color: #bdd7e2; font-size: 10px; text-align: left; }
.workspace-switch > svg { margin-left: auto; color: #648293; }
.user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: #24465d; color: #bdd7e2; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.sidebar nav { display: flex; flex-direction: column; gap: 5px; }
.sidebar-bottom { margin-top: auto; padding-top: 40px; }
.connection-mini { display: flex; align-items: center; gap: 9px; padding: 13px 10px; margin-bottom: 11px; border: 1px solid #24465d; border-radius: 8px; }
.connection-mini strong { display: block; color: #bdd7e2; font-size: 10px; font-weight: 500; }
.connection-mini small { display: block; margin-top: 3px; color: #648293; font-size: 9px; }
.connection-mini .icon-button { margin-left: auto; width: 22px; height: 28px; padding: 3px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #a99462; flex-shrink: 0; }
.status-dot.green { background: #648293; }
.profile-button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 19px 7px 0; margin-top: 18px; border: 0; border-top: 1px solid #24465d; color: #bdd7e2; background: none; text-align: left; }
.profile-button strong { display: block; font-size: 10px; font-weight: 500; }
.profile-button small { display: block; margin-top: 4px; color: #648293; font-size: 9px; }
.profile-button > svg { margin-left: auto; color: #648293; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 8px; border: 0; border-radius: 7px; color: #648293; background: transparent; flex-shrink: 0; }
.icon-button:hover { color: #24465d; background: #effafd; }
.sidebar .icon-button:hover { color: #bdd7e2; background: #24465d; }
.mobile-menu-button { display: none; }
.demo-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #effafd; border-radius: 5px; font-size: 9px; color: #456579; }
.demo-pill > span { width: 5px; height: 5px; border-radius: 50%; background: #648293; }
.select-control { display: inline-flex; min-height: 37px; padding: 8px 10px; border: 1px solid #bdd7e2; border-radius: 7px; background: white; color: #456579; font-size: 10px; line-height: 1.5; }
select.select-control { min-width: 150px; max-width: 210px; padding-right: 24px; }
.date-range { display: inline-flex; align-items: center; gap: 7px; }
.date-range .select-control { width: 117px; min-width: 0; }
.date-range > span { color: #648293; font-size: 10px; }
.page-actions { align-items: center; }
.page-header .eyebrow { margin-bottom: 11px; font-size: 9px; }
.page-header .subtitle { font-size: 11px; }
.button.small { min-height: 31px; padding: 6px 10px; font-size: 10px; }
.button.ghost { background: transparent; border-color: transparent; }
.button.danger { color: var(--danger); background: #fff4ef; border-color: #eed4c9; }
.button.secondary { background: white; }
.button.secondary:hover { background: #effafd; }
.badge.info { color: #456579; background: #effafd; }
.notice-icon { flex-shrink: 0; padding-top: 1px; }
.error-notice { background: #fff4f0; border-color: #edd8cf; color: #a56b55; }
.error-notice > span { flex: 1; }
.loading-bar { position: fixed; z-index: 160; inset: 0 0 auto var(--sidebar-width); height: 3px; background: #648293; }
.stat-label > svg { padding: 4px; box-sizing: content-box; width: 15px; height: 15px; background: #effafd; border-radius: 6px; color: #648293; }
.stat-foot { color: #648293; }
.chart-panel .panel-header { align-items: flex-start; }
.panel-header .panel-subtitle { margin-top: 6px; color: #648293; font-size: 10px; }
.tabs.compact { border: 1px solid #effafd; border-radius: 7px; gap: 0; padding: 3px; margin: 0; flex-shrink: 0; }
.tabs.compact .tab { min-height: 26px; border-radius: 4px; padding: 5px 9px; font-size: 9px; }
.tabs.compact .tab.active { background: #effafd; color: #456579; }
.tabs.compact .tab.active::after { display: none; }
.chart-legend { margin-bottom: 14px; gap: 7px; }
.chart-legend strong { color: #456579; font-size: 10px; font-weight: 500; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; background: #00728e; }
.chart-wrap { width: 100%; min-height: 178px; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
.chart-axis { font: 9px "Segoe UI", sans-serif; fill: #648293; }
.chart-line { stroke: #00728e; }
.insight-list { padding-inline: 22px; }
.insight-item { display: flex; gap: 11px; align-items: center; padding: 15px 0; width: 100%; background: none; border: 0; border-bottom: 1px solid #effafd; text-align: left; }
.insight-item:first-child { padding-top: 0; }
.insight-item:last-child { border: 0; padding-bottom: 10px; }
.insight-icon { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex-shrink: 0; background: #effafd; color: #648293; border-radius: 7px; }
.insight-text { flex: 1; }
.insight-text strong { display: block; font-size: 10.5px; color: #24465d; font-weight: 500; }
.insight-text > span { display: block; margin-top: 4px; color: #648293; font-size: 9px; line-height: 1.6; }
.insight-action { color: #648293; }
.insight-item:hover .insight-text strong { color: #24465d; }
.attention-footer { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 14px 23px; border-top: 1px solid #effafd; color: #648293; font-size: 9px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 28px 0 16px; }
.section-head h2 { margin: 0; font-size: 16px; font-weight: 550; }
.section-head > span { color: #648293; font-size: 10px; }
button.client-cell { padding: 0; background: none; border: 0; text-align: left; }
.client-cell:hover strong { color: #456579; }
.amount { font-size: 11px; color: #24465d; font-weight: 500; white-space: nowrap; }
.search-box { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid #bdd7e2; border-radius: 7px; background: #fbfdfe; }
.search-box > svg { color: #648293; }
.search-box input { width: 220px; padding: 0; font-size: 11px; border: 0; background: none; color: #456579; outline-offset: 6px; }
.table-title-button { display: block; max-width: 460px; padding: 0; border: 0; background: none; text-align: left; }
.table-title-button strong { display: block; color: #24465d; font-size: 12px; font-weight: 550; }
.table-title-button small { display: block; margin-top: 5px; color: #648293; font-size: 9px; overflow-wrap: anywhere; }
.table-title-button:hover strong { color: #456579; }
.client-context { display: flex; align-items: center; gap: 11px; padding: 15px 18px; margin-bottom: 22px; background: #effafd; border: 1px solid #bdd7e2; border-radius: 10px; }
.client-context > div { flex: 1; min-width: 0; }
.client-context strong { display: block; font-size: 12px; color: #24465d; font-weight: 600; }
.client-context > div > span { display: block; margin-top: 3px; color: #648293; font-size: 10px; overflow-wrap: anywhere; }
.small-avatar { width: 26px; height: 26px; border-radius: 6px; font-size: 10px; }
.panel > .toolbar { padding-top: 18px; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.panel > .toolbar .tabs { border-bottom: 0; margin: 0; gap: 20px; }
.panel > .toolbar .tab { padding: 12px 0 15px; }
.panel > .toolbar .tab > span { color: #648293; padding-left: 5px; font-size: 10px; }
.panel > .toolbar > .button { margin-bottom: 12px; }
.panel > .toolbar.secondary-toolbar { border-bottom: 0; padding-bottom: 18px; }
.ad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 0 23px 23px; }
.ad-card { min-width: 0; overflow: hidden; background: white; border: 1px solid var(--line-strong); border-radius: 11px; }
.ad-card-meta { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 9px; color: #648293; }
.ad-card .ad-preview { border: 0; background: white; margin: 0; padding: 17px 16px; }
.ad-card .ad-title { font-size: 17px; }
.ad-url { font-size: 9px; color: #648293; margin-bottom: 7px; overflow-wrap: anywhere; }
.ad-card .ad-text { font-size: 11px; line-height: 1.7; margin: 0; }
.ad-image { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; margin-top: 15px; border-radius: 6px; }
.ad-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); background: #fbfdfe; }
.ad-card-footer .muted { font-size: 9px; }
.headline-details { margin: 15px 0 23px; padding: 13px; border: 1px solid #effafd; background: #fbfdfe; border-radius: 8px; font-size: 11px; color: #648293; }
.headline-details summary { cursor: pointer; color: #456579; }
.headline-details ol { padding-left: 22px; margin-bottom: 0; line-height: 2; }
.hint { font-size: 10px; line-height: 1.75; color: #648293; }
.changes-toolbar, .report-toolbar { padding: 0 0 22px; justify-content: flex-start; font-size: 10px; }
.changes-toolbar { gap: 13px; }
.change-card { border: 1px solid var(--line); background: white; border-radius: var(--radius); }
.change-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.change-meta > div { min-width: 0; }
.change-meta strong { display: block; font-size: 11px; font-weight: 600; color: #456579; }
.change-meta small { display: block; color: #648293; font-size: 9px; margin-top: 4px; overflow-wrap: anywhere; }
.toolbar-spacer { flex: 1; }
.diff-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 13px; }
.diff-grid > div { margin: 0; padding: 15px; font-size: 11px; line-height: 1.7; }
.diff-grid > div > span { display: block; margin-bottom: 7px; font-size: 9px; font-weight: 500; letter-spacing: .7px; }
.diff-grid p { margin: 0; }
.change-actions { display: flex; justify-content: flex-end; margin-top: 15px; }
.split-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 22px; margin-bottom: 24px; }
.goal-row { display: flex; gap: 11px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); }
.goal-row:first-child { padding-top: 0; }
.goal-row:last-child { border-bottom: 0; }
.goal-row > div { flex: 1; }
.goal-row strong { display: block; font-size: 11px; color: #456579; font-weight: 550; }
.goal-row small { display: block; margin-top: 5px; color: #648293; font-size: 9px; line-height: 1.7; }
.goal-icon { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 8px; background: #effafd; color: #456579; flex-shrink: 0; font-size: 11px; }
.goal-icon.secondary { background: #effafd; color: #648293; }
.connection-layout { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.4fr); gap: 22px; margin-bottom: 23px; align-items: stretch; }
.connection-layout .connection-card { padding: 33px 26px 25px; text-align: center; }
.connection-visual { width: 71px; height: 71px; display: flex; align-items: center; justify-content: center; margin: 0 auto 23px; border-radius: 18px; border: 1px solid #bdd7e2; color: #456579; background: #effafd; }
.connection-card > h2 { font-size: 24px; font-weight: 500; margin-bottom: 13px; }
.connection-card > p { color: #648293; font-size: 11px; line-height: 1.8; }
.connection-status { margin: 18px 0 19px; }
.connection-card .hint { margin-top: 13px; font-size: 9px; }
.connection-details { margin: 0 0 21px; }
.connection-details > div { display: grid; grid-template-columns: 155px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.connection-details dt { color: #648293; font-size: 10px; }
.connection-details dd { margin: 0; font-size: 11px; color: #456579; overflow-wrap: anywhere; }
.connection-details dd.mono { font-size: 10px; }
.connection-steps { padding-left: 20px; font-size: 12px; color: #456579; line-height: 1.7; }
.connection-steps li { padding: 0 0 17px 7px; }
.connection-steps p { margin: 7px 0 0; color: #648293; font-size: 11px; }
.app-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 38px; border-top: 1px solid #effafd; color: #648293; font-size: 9px; }
.auth-page { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 1fr); background: white; }
.auth-card.panel { display: flex; flex-direction: column; align-self: center; width: min(430px, 100%); padding: 40px; margin: 0 auto; border: 0; border-radius: 0; }
.auth-card .brand { padding: 0; margin-bottom: 60px; }
.auth-card .brand-name { font-size: 23px; color: #031a31; letter-spacing: -.6px; }
.auth-card .brand-caption { color: #648293; font-size: 7px; letter-spacing: 1.8px; }
.auth-card .brand-mark { width: 35px; height: 35px; border-radius: 9px; font-size: 21px; letter-spacing: -2px; }
.auth-card h1 { margin-bottom: 15px; font-size: 33px; line-height: 1.18; font-weight: 550; letter-spacing: -1px; }
.auth-card .subtitle { margin: 0 0 29px; font-size: 11px; color: #648293; }
.auth-card .eyebrow { margin-bottom: 12px; color: #648293; font-size: 9px; letter-spacing: 1.5px; }
.auth-card .field { margin-bottom: 19px; }
.auth-card .field input { min-height: 45px; background: #fbfdfe; font-size: 13px; }
.auth-card .button { width: 100%; min-height: 43px; font-size: 11px; }
.auth-card .button.primary { margin-top: 5px; }
.auth-card > .button.ghost { margin: 11px 0 9px; color: #456579; font-size: 10px; }
.auth-card > .hint { text-align: center; font-size: 9px; color: #648293; line-height: 1.9; }
.auth-aside { position: relative; order: -1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 70px; background: #031a31; color: #effafd; }
.auth-aside::before { position: absolute; content: ""; width: 480px; height: 480px; right: -220px; bottom: -120px; border: 1px solid #24465d; border-radius: 50%; box-shadow: 0 0 0 70px rgb(70 85 57 / 12%), 0 0 0 140px rgb(70 85 57 / 8%); }
.auth-aside .eyebrow { position: relative; z-index: 1; color: #648293; font-size: 10px; margin-bottom: 28px; }
.auth-aside h2 { position: relative; z-index: 1; margin: 0 0 26px; font-size: clamp(37px, 4.1vw, 64px); line-height: 1.1; font-weight: 450; letter-spacing: -2px; }
.auth-aside h2::first-line { color: #00728e; }
.auth-aside > p { position: relative; z-index: 1; max-width: 320px; margin: 0; color: #648293; font-size: 13px; line-height: 1.9; }
.auth-proof { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 55px; color: #648293; font-size: 10px; }
.auth-proof svg { flex-shrink: 0; color: #bdd7e2; }
.auth-page > .empty-state { grid-column: 1 / -1; }
.auth-page > .empty-state .brand-mark { margin-bottom: 20px; }

@media (max-width: 1190px) {
  .app-footer { padding-inline: 25px; }
  .page-header .page-actions { width: 100%; justify-content: flex-start; }
  .auth-aside { padding: 50px; }
  .connection-details > div { grid-template-columns: 125px minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .workspace-switch { font-size: 9px; padding-inline: 8px; }
  .split-grid { grid-template-columns: 1fr; }
  .connection-layout { grid-template-columns: 1fr; }
  .connection-layout .connection-card { padding: 28px; }
  .ad-grid { grid-template-columns: 1fr; }
  .auth-aside { padding: 38px; }
  .auth-aside h2 { font-size: 43px; }
  .auth-card.panel { padding: 35px; }
}
@media (max-width: 760px) {
  .main-shell { margin-left: 0; }
  .mobile-menu-button { display: inline-flex; width: 30px; padding: 5px; }
  .mobile-backdrop { position: fixed; inset: 0; border: 0; z-index: 60; background: rgb(20 29 17 / 35%); }
  .sidebar .brand-name { font-size: 22px; }
  .workspace-switch { font-size: 10px; }
  .sidebar-bottom { padding-top: 30px; }
  .app-footer { padding-inline: 20px; flex-wrap: wrap; row-gap: 6px; font-size: 8px; }
  .page-header .page-actions { gap: 10px; }
  .page-header .page-actions > .select-control { min-width: 135px; }
  .demo-pill { font-size: 8px; padding: 5px 7px; gap: 5px; }
  .loading-bar { left: 0; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-card.panel { max-width: 460px; padding: 35px 32px; margin: 0 auto; align-self: center; }
  .auth-card .brand { margin-bottom: 50px; }
  .auth-card h1 { font-size: 37px; }
  .connection-details > div { grid-template-columns: minmax(100px, .7fr) minmax(0, 1fr); }
}
@media (max-width: 450px) {
  .topbar { padding-inline: 9px; }
  .topbar .breadcrumbs > span { display: none; }
  .topbar .breadcrumbs > strong { font-size: 10px; }
  .topbar .breadcrumbs > svg { display: none; }
  .topbar-actions { gap: 4px; }
  .topbar-actions > .icon-button { width: 29px; height: 29px; padding: 6px; }
  .topbar-actions > .badge { font-size: 8px; padding-inline: 6px; }
  .demo-pill { font-size: 8px; padding-inline: 7px; }
  .page-header .page-actions { display: flex; gap: 10px; }
  .page-header .page-actions > .select-control { min-width: 0; max-width: 100%; flex: 1 1 100%; width: 100%; }
  .date-range { width: 100%; }
  .date-range .select-control { width: 0; flex: 1; min-height: 36px; padding-inline: 10px; }
  .page-header .subtitle { font-size: 11px; }
  .section-head { display: block; margin-top: 23px; }
  .section-head h2 { font-size: 15px; margin-bottom: 8px; }
  .chart-panel .panel-header { gap: 14px; }
  .chart-panel .panel-header > div:first-child { flex: 1 1 150px; }
  .chart-wrap { min-height: 108px; }
  .chart-legend { flex-wrap: wrap; font-size: 9px; }
  .insight-list { padding-inline: 17px; }
  .insight-item { padding-block: 16px; }
  .insight-text strong { font-size: 11px; }
  .insight-text > span { font-size: 10px; }
  .attention-footer { padding-inline: 17px; font-size: 8px; }
  .client-context { padding: 13px; flex-wrap: wrap; gap: 9px; }
  .client-context .badge { font-size: 8px; }
  .client-context strong { font-size: 11px; }
  .client-context > div > span { font-size: 9px; }
  .search-box { width: 100%; }
  .search-box input { width: 0; flex: 1; min-width: 0; }
  .panel > .toolbar { align-items: flex-start; gap: 10px; }
  .panel > .toolbar .tabs { flex: 1; }
  .panel > .toolbar > .button { margin-bottom: 10px; font-size: 8px; padding-inline: 8px; }
  .ad-grid { padding: 0 14px 17px; gap: 14px; }
  .ad-card .ad-title { font-size: 16px; }
  .ad-card-footer { gap: 7px; padding-inline: 12px; }
  .ad-card-footer .button { font-size: 9px; }
  .change-card { padding: 18px 15px; }
  .change-meta { gap: 8px; flex-wrap: wrap; }
  .change-meta > div { flex: 1; }
  .change-meta .badge { margin-left: 34px; }
  .diff-grid { grid-template-columns: 1fr; gap: 9px; }
  .diff-grid > div { padding: 13px; font-size: 10px; }
  .report-toolbar { gap: 10px; }
  .report-toolbar .muted { flex: 1 1 100%; font-size: 10px; }
  .goal-row { gap: 9px; }
  .goal-row strong { font-size: 10px; }
  .goal-row small { font-size: 9px; }
  .goal-row > .badge { font-size: 8px; padding-inline: 6px; }
  .connection-layout .connection-card { padding: 26px 20px 23px; }
  .connection-details > div { grid-template-columns: 1fr; gap: 5px; padding-block: 11px; }
  .connection-details dt { font-size: 9px; }
  .connection-details dd { font-size: 10px; }
  .app-footer { padding-inline: 16px; }
  .auth-card.panel { padding: 32px 27px; }
  .auth-card .brand { margin-bottom: 44px; }
  .auth-card h1 { font-size: 35px; }
  .auth-card .field input { min-height: 47px; }
  .auth-card .button { min-height: 45px; }
}

/* D-cats.ru identity: navy typography, cyan actions and clean white surfaces. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-052F, U+2116, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-03FF, U+2000-206F, U+20A0-20CF, U+2122, U+2190-21FF;
}
:root {
  --bg: #fbfdfe;
  --surface: #ffffff;
  --ink: #031a31;
  --muted: #456579;
  --line: #e2edf2;
  --line-strong: #d7e5ec;
  --accent: #00728e;
  --accent-hover: #005d78;
  --accent-ink: #ffffff;
  --sidebar: #031a31;
  --shadow: 0 10px 35px rgb(3 26 49 / 7%);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}
body { font-size: 14px; }
h1 { color: #031a31; font-weight: 550; }
.sidebar { background: white; color: #031a31; border-right: 1px solid #d7e5ec; overflow-y: auto; }
.sidebar > .brand { align-items: flex-start; flex-direction: column; gap: 6px; padding-inline: 10px; margin-bottom: 25px; }
.brand-logo { display: block; width: 176px; height: 54px; object-fit: contain; object-position: left center; }
.brand-caption { color: #456579; font-size: 8px; letter-spacing: 1.25px; }
.nav-section, .nav-label { color: #6e8b9d; font-size: 9px; }
.nav-item, .nav a, .nav button { min-height: 44px; color: #456579; font-size: 13px; }
.nav-item:hover, .nav a:hover, .nav button:hover { color: #00728e; background: #f4fafc; }
.nav-item.active, .nav .active { color: #00728e; background: #eaf7fb; font-weight: 600; }
.nav-count, .active .nav-count { color: #00728e; background: #d9eff6; font-size: 10px; }
.workspace-switch { border-color: #d7e5ec; background: #fbfdfe; color: #31536b; font-size: 11px; }
.workspace-switch > svg { color: #6c90a4; }
.user-avatar, .sidebar .avatar { background: #eaf7fb; color: #00728e; }
.sidebar-bottom { padding-top: 30px; }
.connection-mini { border-color: #d7e5ec; background: #fbfdfe; }
.connection-mini strong { color: #31536b; font-size: 11px; }
.connection-mini small { color: #6e8b9d; font-size: 10px; }
.status-dot { background: #ff9d00; }
.status-dot.green { background: #278879; }
.sidebar .icon-button { color: #6a8ca1; }
.sidebar .icon-button:hover { color: #00728e; background: #eaf7fb; }
.profile-button { border-top-color: #d7e5ec; color: #31536b; }
.profile-button strong { font-size: 11px; }
.profile-button small { color: #6e8b9d; font-size: 10px; }
.profile-button > svg { color: #6e8b9d; }
.topbar { border-color: #d7e5ec; }
.breadcrumbs { font-size: 12px; color: #6d8a9e; }
.breadcrumbs strong { color: #31536b; }
.demo-pill { color: #456579; border-color: #d7e5ec; background: #f5fbfd; font-size: 10px; }
.demo-pill > span { background: #00728e; }
.page-header .eyebrow { color: #6e8b9d; font-size: 10px; letter-spacing: 1.3px; }
.page-header .subtitle, .page-head p, .page-header p { color: #456579; font-size: 12px; }
.select-control { min-height: 38px; color: #31536b; border-color: #d7e5ec; font-size: 11px; }
.date-range .select-control { width: 125px; }
.button, .btn { color: #31536b; border-color: #d7e5ec; font-size: 12px; }
.button.primary, .btn-primary, .btn.primary { color: #ffffff; border-color: #00728e; background: #00728e; }
.button.primary:hover, .btn-primary:hover, .btn.primary:hover { background: #005d78; border-color: #005d78; }
.button.secondary:hover, .button:hover, .btn:hover { color: #00728e; border-color: #a6cbd9; background: #effafd; }
.button.primary:hover, .btn-primary:hover, .btn.primary:hover { color: #ffffff; background: #005d78; border-color: #005d78; }
.button.small, .btn.small, .btn-sm { font-size: 11px; }
.button.ghost { color: #00728e; }
.icon-button, .icon-btn { color: #648799; }
.icon-button:hover, .icon-btn:hover { color: #00728e; background: #effafd; }
.badge, .status, .pill { font-size: 11px; color: #456579; background: #f0f6f9; }
.badge.info, .badge.success, .badge.green, .status.active, .status.success { color: #00728e; background: #eaf7fb; }
.badge.warning { background: #fff5e7; color: #946515; }
.stat-card, .panel, .card, .change-card { border-color: #d7e5ec; }
.stat-label, .stat-top { font-size: 12px; color: #456579; }
.stat-label > svg, .stat-icon { color: #00728e; background: #effafd; }
.stat-value { color: #031a31; font-weight: 550; }
.stat-foot, .stat-bottom { font-size: 11px; color: #648293; }
.panel-header h2, .panel-head h2, .card-header h2 { color: #031a31; font-size: 16px; font-weight: 550; }
.panel-header .panel-subtitle { color: #648293; font-size: 11px; }
.tabs.compact { border-color: #d7e5ec; }
.tabs.compact .tab { font-size: 10px; color: #456579; }
.tabs.compact .tab.active { color: #00728e; background: #eaf7fb; }
.tab { color: #648293; font-size: 12px; }
.tab.active { color: #00728e; }
.tab.active::after { background: #00728e; }
.chart-legend { color: #456579; font-size: 11px; }
.chart-legend strong { color: #031a31; font-size: 11px; }
.chart-axis { font-family: "Inter", "Segoe UI", sans-serif; font-size: 10px; fill: #648293; }
.chart-grid { stroke: #e4eef3; }
.chart-line { stroke: #00728e; }
.legend-dot { background: #00728e; }
.insight-icon { background: #effafd; color: #00728e; }
.insight-text strong { color: #24465d; font-size: 12px; }
.insight-text > span { color: #648293; font-size: 10.5px; }
.insight-text:hover strong, .insight-item:hover .insight-text strong { color: #00728e; }
.insight-action { color: #7ba3b7; }
.attention-footer { color: #648293; font-size: 10px; }
.section-head h2 { color: #24465d; font-size: 17px; font-weight: 550; }
.section-head > span { color: #648293; font-size: 11px; }
th { color: #648293; background: #f8fcfe; font-size: 11px; }
td { color: #456579; font-size: 13px; }
tbody tr:hover { background: #fbfdfe; }
.client-avatar, .client-icon { color: #00728e; background: #eaf7fb; }
.client-cell strong, .cell-title { color: #24465d; font-size: 13px; font-weight: 550; }
.client-cell small, .cell-sub { color: #648293; font-size: 11px; }
.client-cell:hover strong, .table-title-button:hover strong { color: #00728e; }
.amount { color: #24465d; font-size: 13px; }
.table-title-button strong { color: #24465d; font-size: 13px; }
.table-title-button small { color: #648293; font-size: 11px; }
.search-box { background: #fbfdfe; border-color: #d7e5ec; }
.search-box input { color: #31536b; font-size: 12px; }
.search-box > svg { color: #648293; }
.notice, .banner { color: #456579; border-color: #d7e5ec; background: #effafd; font-size: 12px; }
.notice strong { color: #00728e; }
.error-notice { color: #a3543e; border-color: #f0d4c9; background: #fff5f0; }
.client-context { border-color: #d7e5ec; background: #effafd; }
.client-context strong { color: #24465d; font-size: 13px; }
.client-context > div > span { color: #648293; font-size: 11px; }
.field label, .form-field label { color: #31536b; font-size: 12px; }
.field input, .field textarea, .field select, .form-field input, .form-field textarea, .form-field select { color: #031a31; border-color: #d7e5ec; font-size: 13px; }
input:focus, select:focus, textarea:focus { border-color: #00728e; }
input::placeholder, textarea::placeholder { color: #7b98a9; }
.hint, .field-help, .form-hint { color: #648293; font-size: 11px; }
.headline-details { color: #456579; background: #f8fcfe; border-color: #d7e5ec; font-size: 12px; }
.headline-details summary { color: #00728e; }
.drawer-header, .drawer-footer { border-color: #d7e5ec; }
.drawer-header h2 { color: #031a31; font-weight: 550; }
.drawer-header p { color: #648293; font-size: 11px; }
.drawer-footer { background: #fbfdfe; }
.change-meta strong { color: #24465d; font-size: 12px; }
.change-meta small { color: #648293; font-size: 11px; }
.diff-grid > div { font-size: 12px; }
.diff-new, .diff-after { color: #00728e; background: #eaf7fb; }
.ad-card .ad-text { color: #456579; font-size: 12px; }
.ad-card-meta, .ad-card-footer .muted { color: #648293; font-size: 11px; }
.ad-url { color: #00728e; font-size: 11px; }
.ad-card-footer { background: #fbfdfe; }
.goal-row strong { color: #31536b; font-size: 12px; }
.goal-row small { color: #648293; font-size: 11px; }
.goal-icon { color: #00728e; background: #eaf7fb; }
.goal-icon.secondary { color: #648293; background: #f2f7fa; }
.connection-visual { color: #00728e; background: #effafd; border-color: #d7e5ec; }
.connection-card > h2 { color: #031a31; font-weight: 550; }
.connection-card > p { color: #456579; font-size: 12px; }
.connection-card .hint { font-size: 11px; color: #648293; }
.connection-details dt { color: #648293; font-size: 12px; }
.connection-details dd { color: #24465d; font-size: 12px; }
.connection-details dd.mono { font-size: 11px; }
.connection-details > div { grid-template-columns: 165px minmax(0, 1fr); }
.connection-steps { color: #24465d; }
.connection-steps p { color: #456579; font-size: 12px; }
.empty-state h2, .empty-state h3 { color: #24465d; }
.empty-state p { color: #648293; font-size: 12px; }
.empty-state > svg { color: #00728e; }
.app-footer { color: #648293; border-color: #d7e5ec; font-size: 10px; }
.auth-aside { background: #031a31; }
.auth-aside::before { border-color: #19465e; box-shadow: 0 0 0 70px rgb(0 114 142 / 10%), 0 0 0 140px rgb(0 114 142 / 6%); }
.auth-aside h2 { color: #ffffff; font-weight: 550; }
.auth-aside h2::first-line { color: #82d3e4; }
.auth-aside > p { color: #acc6d3; font-size: 14px; }
.auth-aside .eyebrow, .auth-proof { color: #8acadd; }
.auth-proof { font-size: 12px; }
.auth-proof svg { color: #8acadd; }
.auth-card .brand { align-items: flex-start; flex-direction: column; gap: 5px; }
.auth-card .brand-logo { width: 190px; height: 58px; }
.auth-card .brand-caption { color: #648293; font-size: 8px; }
.auth-card .eyebrow { color: #648293; font-size: 10px; }
.auth-card h1 { color: #031a31; font-weight: 550; }
.auth-card .subtitle { color: #456579; font-size: 12px; }
.auth-card .field input { background: #fbfdfe; }
.auth-card .button { font-size: 12px; }
.auth-card > .button.ghost { color: #00728e; font-size: 12px; }
.auth-card > .hint { color: #648293; font-size: 10px; }
.toast { color: #00728e; border-color: #d7e5ec; }
.loading-bar { background: #00728e; }

@media (max-width: 1190px) {
  .connection-details > div { grid-template-columns: 125px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .auth-card.panel { max-width: 465px; }
  .nav-item { font-size: 13px; }
  .app-footer { font-size: 9px; }
  .demo-pill { font-size: 9px; }
}
@media (max-width: 450px) {
  .demo-pill { font-size: 8px; }
  .page-header .subtitle { font-size: 12px; }
  .stat-label { font-size: 11px; }
  .stat-foot { font-size: 10px; }
  .stat-value { font-size: 25px; }
  .panel-header h2 { font-size: 15px; }
  .panel-header .panel-subtitle { font-size: 10px; }
  .insight-text strong { font-size: 12px; }
  .insight-text > span { font-size: 11px; }
  .section-head h2 { font-size: 16px; }
  .client-context strong { font-size: 12px; }
  .client-context > div > span { font-size: 10px; }
  .client-context .badge { font-size: 9px; }
  .panel > .toolbar > .button { font-size: 10px; }
  .button.small { font-size: 11px; }
  .change-meta small { font-size: 10px; }
  .diff-grid > div { font-size: 12px; }
  .goal-row strong { font-size: 12px; }
  .goal-row small { font-size: 10px; }
  .goal-row > .badge { font-size: 9px; }
  .connection-details > div { grid-template-columns: 1fr; }
  .connection-details dt { font-size: 11px; }
  .connection-details dd { font-size: 12px; }
  .auth-card h1 { font-size: 34px; }
}