:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#171717; background:#f5f6f8; }
* { box-sizing:border-box; }
body { margin:0; }
header { display:flex; justify-content:space-between; align-items:center; padding:18px 26px; background:#fff; border-bottom:1px solid #e5e7eb; position:sticky; top:0; z-index:5; }
.brand { font-weight:800; font-size:20px; }
.muted { color:#6b7280; font-size:13px; }
.header-actions { display:flex; align-items:center; gap:12px; }
nav { display:flex; gap:6px; padding:10px 26px; background:#fff; border-bottom:1px solid #e5e7eb; overflow:auto; }
nav button { border:0; background:transparent; padding:10px 14px; border-radius:9px; cursor:pointer; white-space:nowrap; }
nav button.active { background:#111827; color:white; }
main { max-width:1500px; margin:0 auto; padding:24px; }
.tab { display:none; }
.tab.active { display:block; }
.card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px; margin-bottom:18px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.grid { display:grid; gap:18px; }
.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
h1,h2 { margin-top:0; }
h2 { font-size:17px; }
button { font:inherit; cursor:pointer; border-radius:9px; padding:9px 13px; border:1px solid #d1d5db; background:#fff; }
button.primary { background:#111827; color:#fff; border-color:#111827; }
button.ghost { background:#fff; }
button.filter-toggle.active { background:#dcfce7; color:#166534; border-color:#86efac; }
button.danger { background:#9f1239; color:#fff; border-color:#9f1239; }
button:disabled { opacity:.45; cursor:not-allowed; }
input, textarea, select { width:100%; border:1px solid #d1d5db; border-radius:9px; padding:9px 10px; font:inherit; background:#fff; }
textarea, pre, code { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
label { display:block; font-size:13px; font-weight:650; margin:10px 0; }
label input, label textarea, label select { margin-top:6px; font-weight:400; }
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.work-grid { grid-template-columns:2fr 1fr; }
.toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.toolbar.wrap { flex-wrap:wrap; }
.toolbar h2 { margin:0; margin-right:auto; }
.grow { flex:1 1 280px; }
.table-wrap { overflow:auto; }
table { border-collapse:collapse; width:100%; min-width:760px; }
th,td { text-align:left; padding:10px 8px; border-bottom:1px solid #eee; vertical-align:top; font-size:13px; }
th { color:#4b5563; font-size:12px; text-transform:uppercase; letter-spacing:.02em; }
tr:hover td { background:#fafafa; }
pre { background:#0b1020; color:#d1fae5; padding:14px; border-radius:10px; overflow:auto; max-height:620px; min-height:50px; white-space:pre-wrap; word-break:break-word; }
.badge { border-radius:999px; padding:6px 10px; font-size:12px; font-weight:800; background:#e5e7eb; }
.badge.safe { background:#dcfce7; color:#166534; }
.badge.warn { background:#fee2e2; color:#991b1b; }
.notice { padding:12px 14px; border-radius:10px; margin-bottom:16px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; }
.center-card { max-width:420px; margin:10vh auto; background:white; border:1px solid #e5e7eb; border-radius:16px; padding:28px; box-shadow:0 10px 35px rgba(0,0,0,.08); }
.center-card button { width:100%; margin-top:10px; }
.error { color:#b91c1c; margin-top:10px; min-height:20px; }
.hidden { display:none !important; }
.toast { position:fixed; right:20px; bottom:20px; max-width:520px; background:#111827; color:#fff; padding:12px 16px; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.2); z-index:20; }
.kv { display:grid; grid-template-columns:minmax(130px,1fr) 2fr; gap:8px 16px; font-size:13px; }
.kv > div:nth-child(odd) { color:#6b7280; }
.apply-box { border-top:1px solid #eee; margin-top:14px; padding-top:10px; }
.segmented { display:flex; flex-wrap:wrap; border:1px solid #d1d5db; border-radius:10px; overflow:hidden; }
.segmented button { border:0; border-radius:0; border-right:1px solid #e5e7eb; }
.segmented button:last-child { border-right:0; }
.segmented button.active { background:#111827; color:#fff; }
.state-pill { display:inline-block; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:750; background:#f3f4f6; }
.state-pill.on { background:#dcfce7; color:#166534; }
.state-pill.archived { background:#e5e7eb; color:#4b5563; }
.state-pill.paused { background:#fef3c7; color:#92400e; }
.row-actions { display:flex; gap:6px; white-space:nowrap; }
.row-actions button { padding:6px 9px; font-size:12px; }
.summary-cards { display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)); gap:10px; margin-bottom:16px; }
.metric { border:1px solid #e5e7eb; border-radius:12px; padding:12px; background:#fafafa; }
.metric .value { font-size:20px; font-weight:800; margin-top:4px; }
.findings { display:grid; gap:8px; margin:12px 0 18px; }
.finding { border:1px solid #e5e7eb; border-left-width:4px; border-radius:10px; padding:10px 12px; background:#fff; }
.finding.warning { border-left-color:#d97706; }
.finding.info { border-left-color:#2563eb; }
.finding.ok { border-left-color:#16a34a; }
.finding-title { font-weight:750; font-size:13px; }
.finding-detail { color:#6b7280; font-size:12px; margin-top:3px; }
.stats-strip { display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)); gap:10px; margin:12px 0 18px; }
details { margin-top:12px; }
details summary { cursor:pointer; font-weight:700; margin-bottom:8px; }
.link-box { padding:10px 12px; border:1px dashed #d1d5db; border-radius:10px; margin-bottom:10px; overflow-wrap:anywhere; }
@media (max-width:900px) {
  .grid.two,.form-grid,.work-grid { grid-template-columns:1fr; }
  .summary-cards,.stats-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  main { padding:14px; }
  header { padding:14px; }
  nav { padding:8px 14px; }
}
.update-kv { margin:14px 0; }
.update-status-line { margin-top:10px; min-height:20px; }
.progress-shell { width:100%; height:16px; border-radius:999px; background:#e5e7eb; overflow:hidden; margin:10px 0; }
.progress-bar { height:100%; background:#111827; transition:width .25s ease; }
.update-progress-meta { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.update-progress-meta strong { min-width:44px; }
.update-log { min-height:180px; max-height:420px; }
.update-error-block { margin-top:16px; padding:14px; border:1px solid #fecaca; background:#fef2f2; border-radius:12px; }
.update-error-block h3 { margin-top:0; color:#991b1b; }
.update-error-block pre { background:#3f0d12; color:#fee2e2; max-height:420px; }
#updateProgressCard h3 { font-size:14px; margin:16px 0 8px; }

.checkbox-line{display:flex;align-items:center;gap:.6rem;margin-top:1.8rem}
.checkbox-line input{width:auto;margin:0}
#gitPublicKey{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all}

.metrika-link-bar { padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#f9fafb; }
.metrika-link-bar select { flex:1 1 360px; max-width:680px; }
.metrika-goals { margin:12px 0 18px; }
.metrika-sampling { margin:8px 0 14px; }

.metrika-primary-goals { margin:10px 0; padding:12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.metrika-goal-picker { display:block; margin:10px 0; max-height:360px; overflow:auto; }
.metrika-goal-choice { display:flex; gap:8px; align-items:flex-start; padding:5px 2px; border:0; background:transparent; font:inherit; font-weight:400; }
.metrika-goal-choice input { width:auto; margin:3px 0 0; }
.metrika-goal-choice span { display:block; font:inherit; font-weight:400; color:inherit; }
.primary-goal-row td:first-child { font-weight:600; }
.primary-kpi-strip { margin-bottom:8px; }


.change-plan-list { display:grid; gap:10px; margin:16px 0; }
.change-plan-choice { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid #e5e7eb; border-radius:10px; background:#f9fafb; }
.change-plan-choice input { width:auto; margin:3px 0 0; }
.change-plan-choice span { display:flex; flex-direction:column; gap:5px; }
.change-plan-choice small { color:#4b5563; font-weight:400; line-height:1.45; }
.change-plan-choice code { width:max-content; max-width:100%; overflow-wrap:anywhere; }
.button-link { display:inline-block; padding:7px 10px; border:1px solid #d1d5db; border-radius:8px; text-decoration:none; color:#111827; background:#fff; white-space:nowrap; }
.manual-write-grid { margin-top:14px; }
.change-json-area { min-height:220px; resize:vertical; line-height:1.4; }
.work-handoff-note { margin:10px 0 14px; padding:12px 14px; border:1px solid #bfdbfe; background:#eff6ff; border-radius:10px; color:#1e3a8a; font-size:13px; line-height:1.5; }
.work-import-grid { grid-template-columns:minmax(260px,1fr); max-width:520px; }


/* v0.5.2 client tree and modal settings */
.client-row { cursor:pointer; }
.client-row:hover { background:#f9fafb; }
.client-row.expanded { background:#f3f4f6; }
.client-expander { display:inline-block; width:16px; color:#6b7280; }
.client-campaign-row > td { padding:0 12px 14px 34px; background:#fafafa; }
.nested-campaign-status { padding:12px 0; }
.client-campaign-list { border-left:2px solid #e5e7eb; padding-left:12px; }
.client-campaign-head,.client-campaign-item { display:grid; grid-template-columns:110px minmax(220px,1fr) minmax(180px,.7fr) auto; gap:12px; align-items:center; padding:8px 10px; }
.client-campaign-head { color:#6b7280; font-size:12px; border-bottom:1px solid #e5e7eb; }
.client-campaign-item { border-bottom:1px solid #f0f1f3; }
.client-campaign-item:last-child { border-bottom:0; }
.client-campaign-name { min-width:0; overflow-wrap:anywhere; }
.client-campaign-item .row-actions { justify-content:flex-end; flex-wrap:wrap; }

.modal-backdrop { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(17,24,39,.45); }
.modal-panel { width:min(860px,100%); max-height:88vh; overflow:auto; background:#fff; border-radius:14px; padding:18px; box-shadow:0 22px 60px rgba(0,0,0,.22); }
.modal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; }
.modal-header h2 { margin:0; }
#metrikaModalBody .metrika-link-bar,#metrikaModalBody .metrika-primary-goals { margin-top:14px; }

.apply-result-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin:14px 0; }
.apply-result-section { border:1px solid #d1d5db; border-radius:10px; padding:12px; background:#fafafa; line-height:1.6; }
.apply-result-section .button-link { margin-top:8px; }

@media (max-width:900px) {
  .client-campaign-head { display:none; }
  .client-campaign-item { grid-template-columns:1fr; gap:6px; }
  .client-campaign-item .row-actions { justify-content:flex-start; }
  .client-campaign-row > td { padding-left:16px; }
  .modal-backdrop { padding:10px; }
}


/* v0.5.3 interface consolidation */
.client-expander {
  width:24px;
  font-size:22px;
  line-height:1;
  font-weight:700;
  vertical-align:middle;
}
.update-overview-grid {
  display:grid;
  grid-template-columns:minmax(220px,.8fr) minmax(280px,1fr) minmax(320px,1.2fr);
  gap:18px;
  align-items:start;
}
.update-overview-part {
  min-width:0;
  padding-right:18px;
  border-right:1px solid #e5e7eb;
}
.update-overview-part:last-child {
  padding-right:0;
  border-right:0;
}
.update-overview-part h3 {
  margin-top:0;
}
#updateJobMeta > div:nth-child(odd) {
  align-self:start;
}
@media (max-width:1100px) {
  .update-overview-grid { grid-template-columns:1fr; }
  .update-overview-part { padding-right:0; padding-bottom:16px; border-right:0; border-bottom:1px solid #e5e7eb; }
  .update-overview-part:last-child { border-bottom:0; padding-bottom:0; }
}


/* v0.7.0 hierarchical client statistics */
.client-tree-wrap { overflow:auto; }
.client-stats-table { min-width:1420px; table-layout:auto; }
.client-stats-table th:first-child,.client-stats-table td:first-child { min-width:390px; }
.client-stats-table th:not(:first-child):not(:last-child),
.client-stats-table td.stat-cell { text-align:right; white-space:nowrap; }
.client-stats-table th:nth-last-child(2),.client-stats-table td.status-cell { min-width:170px; }
.client-stats-table th:last-child,.client-stats-table td.actions-cell { min-width:250px; }
.client-stats-table th:nth-last-child(2) { text-align:center; }
.client-stats-table th:last-child { text-align:right; }
.oauth-action-badge { display:inline-flex; align-items:center; min-height:27px; padding:4px 9px; }
.entity-cell { display:flex; align-items:center; gap:8px; min-width:0; }
.entity-cell.level-1 { padding-left:24px; }
.entity-cell.level-2 { padding-left:48px; }
.entity-cell.level-3 { padding-left:72px; }
.entity-main { display:flex; align-items:center; gap:7px; min-width:0; flex:1 1 auto; }
.entity-title { min-width:0; overflow-wrap:anywhere; }
.entity-id { color:#6b7280; font-size:11px; white-space:nowrap; }
.entity-actions { display:flex; align-items:center; justify-content:flex-end; gap:5px; white-space:nowrap; }
.actions-cell { text-align:right; vertical-align:middle; }
.lead-reaches { color:#6b7280; font-size:11px; white-space:nowrap; }
.entity-actions button { padding:5px 8px; font-size:11px; }
.info-button { width:27px; height:27px; padding:0 !important; border-radius:50%; font-weight:800; line-height:25px; text-align:center; }
.visibility-button { width:27px; height:27px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; }
.visibility-icon { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.client-info-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid #e5e7eb; }
.client-info-title-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.client-name-editor { display:flex; gap:8px; align-items:center; width:100%; }
.client-name-editor input { flex:1 1 260px; }
.tree-expander { display:inline-block; width:18px; flex:0 0 18px; color:#6b7280; font-size:18px; line-height:1; text-align:center; }
.tree-expander.placeholder { opacity:.2; }
.client-row,.campaign-tree-row,.adgroup-tree-row { cursor:pointer; }
.client-row.expanded td,.campaign-tree-row.expanded td,.adgroup-tree-row.expanded td { background:#f8fafc; }
.campaign-tree-row td { background:#fcfcfd; }
.adgroup-tree-row td { background:#fdfdfd; }
.ad-tree-row td { color:#374151; }
.tree-loading-row td,.tree-error-row td { padding-left:52px; background:#fafafa; }
.tree-error-row td { color:#b91c1c; }
.client-stats-range-toolbar { position:relative; margin-top:-4px; }
.calendar-popover { width:min(720px,100%); padding:14px; margin:-4px 0 14px; background:#fff; border:1px solid #d1d5db; border-radius:12px; box-shadow:0 12px 32px rgba(17,24,39,.12); }
.calendar-hint { margin-bottom:10px; color:#6b7280; font-size:12px; }
.calendar-desktop-shell { display:grid; grid-template-columns:56px minmax(0,1fr) 56px; gap:10px; align-items:center; }
.calendar-desktop-months { min-width:0; }
.calendar-arrow { width:52px; height:72px; padding:0; font-size:34px; line-height:1; }
.calendar-months { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.calendar-month h3 { margin:0 0 8px; text-align:center; font-size:14px; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.calendar-weekday { text-align:center; color:#6b7280; font-size:11px; padding:4px 0; }
.calendar-day { border:0; padding:7px 2px; border-radius:7px; text-align:center; background:transparent; font-size:12px; }
.calendar-day:hover:not(:disabled) { background:#f3f4f6; }
.calendar-day:disabled { opacity:.22; cursor:not-allowed; }
.calendar-day.selected { background:#111827; color:#fff; }
.calendar-day.in-range { background:#e5e7eb; }
.calendar-day.empty { visibility:hidden; }
.client-info-grid { margin-top:10px; }
.status-column-heading { text-align:center; }
.status-cell { text-align:center; }
.status-pair { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; text-align:center; }
.stat-unavailable { color:#9ca3af; }
@media (max-width:900px) {
  .calendar-desktop-shell { grid-template-columns:48px minmax(0,1fr) 48px; }
  .calendar-arrow { width:44px; height:64px; font-size:30px; }
  .calendar-months { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .entity-actions { flex-wrap:wrap; justify-content:flex-end; }
}
@media (max-width:760px) {
  .calendar-desktop-shell { grid-template-columns:1fr; }
  .calendar-arrow { display:none; }
  .calendar-months { grid-template-columns:1fr; }
}

.update-install-section { margin-top:14px; }
.update-updater-info { margin:8px 0 4px; min-height:24px; }
.update-action-row { margin-top:12px; margin-bottom:0; }
.update-status-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.update-status-columns .update-kv { margin:0; }
.update-status-columns #overviewSafety .kv { margin:0; }
@media (max-width:900px) {
  .update-status-columns { grid-template-columns:1fr; gap:18px; }
}


/* v0.9.0 VK Ads */
.account-connect-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.account-connect-provider { border:1px solid #e5e7eb; border-radius:12px; padding:16px; background:#fafafa; }
.account-connect-provider h3 { margin:0 0 8px; font-size:15px; }
.account-connect-provider .form-grid { grid-template-columns:1fr; gap:4px; }
.ad-system-badge { display:inline-flex; align-items:center; min-height:22px; padding:3px 8px; font-size:10px; flex:0 0 auto; }
.ad-system-badge.direct-system { background:#fef3c7; color:#92400e; }
.ad-system-badge.vk-system { background:#dbeafe; color:#1d4ed8; }
@media (max-width:900px) {
  .account-connect-grid { grid-template-columns:1fr; }
}

.campaign-create-preview { margin:14px 0; }
.campaign-create-preview .summary-cards { margin-bottom:12px; }
#campaignCreateOutput,#vkCampaignCreateOutput { max-height:320px; overflow:auto; white-space:pre-wrap; margin-top:0; }
#campaignCreateModal .modal-panel,#vkCampaignCreateModal .modal-panel { width:min(980px,100%); }


/* v0.11.0 compact campaign create history */
.campaign-create-job-list {
  display:grid;
  gap:0;
  margin:8px 0 14px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.campaign-create-job-row {
  display:grid;
  grid-template-columns:auto minmax(210px,1fr) minmax(320px,auto) auto;
  gap:12px;
  align-items:center;
  min-height:42px;
  padding:7px 10px;
  border-bottom:1px solid #f0f1f3;
}
.campaign-create-job-row:last-child { border-bottom:0; }
.campaign-create-job-name {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.campaign-create-job-tech {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
.campaign-create-job-row .openCampaignCreateJob,
.campaign-create-job-row .openVkCampaignCreateJob,
.campaign-create-job-row .deleteCampaignCreateJob,
.campaign-create-job-row .deleteVkCampaignCreateJob {
  white-space:nowrap;
}
.campaign-create-job-row .deleteCampaignCreateJob,
.campaign-create-job-row .deleteVkCampaignCreateJob { justify-self:end; }
.campaign-create-job-empty { padding:10px; }
@media (max-width:760px) {
  .campaign-create-job-row {
    grid-template-columns:auto minmax(0,1fr) auto;
  }
  .campaign-create-job-tech {
    grid-column:1 / -1;
    grid-row:2;
  }
  .campaign-create-job-row .openCampaignCreateJob,
  .campaign-create-job-row .openVkCampaignCreateJob {
    grid-column:1;
    grid-row:1;
  }
  .campaign-create-job-row .deleteCampaignCreateJob,
  .campaign-create-job-row .deleteVkCampaignCreateJob {
    grid-column:3;
    grid-row:1;
  }
}


/* v0.12.3 full compact Direct ad preview */
.ad-preview-modal-panel {
  width:min(650px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  overflow:auto;
}
.ad-preview-meta { margin:8px 0 12px; font-size:13px; font-weight:700; color:#374151; }
.ad-preview-layouts { margin-bottom:12px; flex-wrap:wrap; }
.ad-preview-stage {
  width:fit-content;
  max-width:100%;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  margin:0 auto;
  border:1px solid #d1d5db;
  border-radius:12px;
  background:#e5e7eb;
  overflow:auto;
}
#adPreviewCanvas {
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  flex:0 1 auto;
  background:#fff;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(17,24,39,.10);
}
.ad-preview-status { margin:10px 0 12px; line-height:1.45; }
.ad-preview-actions { margin-bottom:0; }
@media (max-width:760px) {
  .ad-preview-modal-panel {
    width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
    padding:12px;
  }
  .ad-preview-layouts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .ad-preview-layouts button { border-right:0; border-bottom:1px solid #e5e7eb; white-space:normal; }
  .ad-preview-stage { width:100%; padding:6px; }
}


/* AI audit queue */
.ai-audit-list{display:grid;gap:12px;margin-top:14px}
.ai-audit-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--card)}
.ai-audit-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ai-audit-ident,.ai-audit-meta,.ai-audit-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ai-audit-ident strong{font-size:15px}
.ai-audit-actions{margin-top:10px}
.ai-audit-detail{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ai-audit-summary{white-space:pre-wrap;margin-bottom:12px}
.ai-implementation-item{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;margin:7px 0}
.ai-implementation-item.ok{border-color:rgba(66,180,120,.45)}
.ai-implementation-item.error{border-color:rgba(220,80,80,.45)}
.ai-audit-card .change-plan-list{margin-top:8px}
.ai-audit-card .change-plan-choice small{display:block;margin-top:4px}


/* v0.13.1 phone-first interface */
.mobile-clients-toolbar,
.mobile-search-panel,
.mobile-clients-breadcrumb,
.mobile-clients-view,
.mobile-bottom-nav,
.mobile-sheet-backdrop,
.mobile-calendar-nav { display:none; }

@media (max-width:760px) {
  body { padding-bottom:calc(68px + env(safe-area-inset-bottom,0px)); background:#f5f6f8; }
  header {
    min-height:52px;
    padding:8px 10px;
    gap:8px;
    z-index:45;
  }
  header > div:first-child { min-width:0; }
  header .brand { font-size:0; white-space:nowrap; }
  header .brand::after { content:"Direct AI"; font-size:16px; font-weight:800; }
  #statusLine { display:none; }
  .header-actions { gap:5px; min-width:0; }
  #logoutBtn { display:none; }
  #writeWindowBtn { min-height:38px; padding:7px 9px; font-size:11px; white-space:nowrap; }
  #readOnlyBadge { padding:5px 8px; font-size:10px; white-space:nowrap; }

  nav#tabs { display:none; }
  main { padding:8px 8px 14px; max-width:none; }
  .card { padding:12px; margin-bottom:10px; border-radius:12px; }
  button { min-height:44px; }
  input,textarea,select { min-height:44px; font-size:16px; }
  .clients-main-toolbar,
  .client-stats-range-toolbar,
  .client-tree-wrap { display:none !important; }

  .mobile-clients-toolbar {
    display:grid;
    grid-template-columns:44px minmax(0,.8fr) minmax(0,1.25fr) minmax(0,1fr);
    gap:6px;
    align-items:center;
    margin:0 0 8px;
    position:sticky;
    top:52px;
    z-index:30;
    padding:6px 0;
    background:#f5f6f8;
  }
  .mobile-toolbar-button {
    min-width:0;
    height:44px;
    padding:7px 8px;
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mobile-icon-button {
    width:44px;
    height:44px;
    padding:0;
    font-size:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .mobile-filter-count {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    padding:0 5px;
    margin-left:3px;
    border-radius:999px;
    background:#111827;
    color:#fff;
    font-size:10px;
    font-weight:800;
  }
  .mobile-search-panel {
    align-items:center;
    gap:6px;
    margin:0 0 8px;
    padding:6px;
    position:sticky;
    top:52px;
    z-index:34;
    border:1px solid #d1d5db;
    border-radius:12px;
    background:#fff;
    box-shadow:0 8px 24px rgba(17,24,39,.10);
  }
  .mobile-search-panel:not(.hidden) { display:flex; }
  .mobile-search-panel input { flex:1 1 auto; min-width:0; border:0; outline:0; }
  .mobile-clients-breadcrumb {
    align-items:center;
    gap:10px;
    min-height:54px;
    margin:0 0 8px;
    padding:4px 2px;
  }
  .mobile-clients-breadcrumb:not(.hidden) { display:flex; }
  .mobile-back-button { min-width:74px; padding:8px 10px; }
  .mobile-clients-breadcrumb strong { display:block; max-width:calc(100vw - 120px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .mobile-clients-view { display:grid; gap:8px; }
  .mobile-empty-state {
    padding:28px 14px;
    text-align:center;
    border:1px dashed #d1d5db;
    border-radius:12px;
    background:#fff;
    color:#6b7280;
  }
  .mobile-drill-card {
    display:block;
    width:100%;
    padding:12px;
    border:1px solid #e5e7eb;
    border-radius:13px;
    background:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
  }
  .mobile-card-top {
    display:flex;
    align-items:flex-start;
    gap:8px;
    min-width:0;
  }
  .mobile-card-heading { min-width:0; flex:1 1 auto; }
  .mobile-card-title {
    display:block;
    font-size:14px;
    font-weight:800;
    line-height:1.3;
    overflow-wrap:anywhere;
  }
  .mobile-card-subtitle {
    margin-top:3px;
    color:#6b7280;
    font-size:11px;
    line-height:1.3;
  }
  .mobile-card-top .ad-system-badge { margin-top:1px; }
  .mobile-card-menu {
    flex:0 0 44px;
    width:44px;
    height:44px;
    padding:0;
    font-size:22px;
    line-height:1;
  }
  .mobile-card-body-button {
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:transparent;
    text-align:left;
    min-height:0;
  }
  .mobile-metrics {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px 5px;
    margin-top:11px;
    padding-top:10px;
    border-top:1px solid #f0f1f3;
  }
  .mobile-metric { min-width:0; }
  .mobile-metric strong {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
  }
  .mobile-metric span {
    display:block;
    margin-top:2px;
    color:#6b7280;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.02em;
  }
  .mobile-metrics.secondary { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:7px; padding-top:7px; }
  .mobile-metrics.secondary .mobile-metric strong { font-size:11px; }
  .mobile-card-footer {
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:10px;
  }
  .mobile-card-footer .mobile-card-spacer { flex:1 1 auto; }
  .mobile-status-pill {
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:4px 8px;
    border-radius:999px;
    background:#f3f4f6;
    color:#4b5563;
    font-size:10px;
    font-weight:750;
  }
  .mobile-status-pill.on { background:#dcfce7; color:#166534; }
  .mobile-status-pill.paused { background:#fef3c7; color:#92400e; }
  .mobile-status-pill.archived { background:#e5e7eb; color:#4b5563; }
  .mobile-status-pill.error { background:#fee2e2; color:#991b1b; }
  .mobile-audit-button { min-height:40px; padding:7px 12px; font-size:12px; font-weight:750; }
  .mobile-child-count { color:#6b7280; font-size:11px; }

  .mobile-bottom-nav {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:55;
    min-height:60px;
    padding:5px max(8px,env(safe-area-inset-left,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-right,0px));
    border-top:1px solid #dfe3e8;
    background:rgba(255,255,255,.97);
    box-shadow:0 -6px 22px rgba(17,24,39,.08);
    grid-template-columns:repeat(auto-fit,minmax(70px,1fr));
    gap:3px;
  }
  #appView:not(.hidden) .mobile-bottom-nav { display:grid; }
  .mobile-bottom-nav button {
    min-width:0;
    min-height:50px;
    padding:6px 4px;
    border:0;
    background:transparent;
    color:#6b7280;
    font-size:11px;
    font-weight:700;
  }
  .mobile-bottom-nav button.active { color:#111827; background:#f3f4f6; }
  .mobile-nav-label { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .mobile-sheet-backdrop {
    position:fixed;
    inset:0;
    z-index:80;
    align-items:flex-end;
    justify-content:center;
    padding:0;
    background:rgba(17,24,39,.46);
  }
  .mobile-sheet-backdrop:not(.hidden) { display:flex; }
  .mobile-sheet {
    width:100%;
    max-height:88dvh;
    overflow:auto;
    padding:8px 14px calc(14px + env(safe-area-inset-bottom,0px));
    border-radius:20px 20px 0 0;
    background:#fff;
    box-shadow:0 -14px 40px rgba(17,24,39,.20);
  }
  .mobile-sheet-handle {
    width:42px;
    height:4px;
    margin:2px auto 8px;
    border-radius:999px;
    background:#d1d5db;
  }
  .mobile-sheet-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
  }
  .mobile-sheet-header h2 { margin:0; font-size:17px; }
  .mobile-sheet-header button { width:44px; height:44px; padding:0; font-size:22px; }
  .mobile-period-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .mobile-period-grid button { min-height:48px; }
  .mobile-period-grid button.active { background:#111827; color:#fff; border-color:#111827; }
  .mobile-period-custom { grid-column:1 / -1; }
  .mobile-filter-section { display:grid; gap:8px; margin:12px 0; }
  .mobile-choice-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .mobile-choice-row button.active { background:#111827; color:#fff; border-color:#111827; }
  .mobile-switch-row {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:48px;
    margin:0;
    padding:8px 2px;
    font-size:14px;
    font-weight:600;
  }
  .mobile-switch-row input { width:22px; min-height:22px; height:22px; margin:0; }
  .mobile-sheet-actions {
    position:sticky;
    bottom:calc(-14px - env(safe-area-inset-bottom,0px));
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:8px;
    margin:14px -14px -14px;
    padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px));
    border-top:1px solid #e5e7eb;
    background:#fff;
  }
  .mobile-actions-list { display:grid; gap:7px; }
  .mobile-actions-list button { width:100%; min-height:48px; text-align:left; }
  .mobile-actions-list .danger-outline { color:#991b1b; border-color:#fecaca; }

  .calendar-popover {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:85;
    width:100%;
    max-height:88dvh;
    overflow:auto;
    margin:0;
    padding:12px 14px calc(16px + env(safe-area-inset-bottom,0px));
    border-radius:20px 20px 0 0;
    box-shadow:0 -14px 40px rgba(17,24,39,.20);
  }
  .mobile-calendar-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
  .mobile-calendar-nav button { width:44px; height:44px; padding:0; font-size:22px; }
  .calendar-months { grid-template-columns:1fr; }
  .calendar-month h3 { margin-top:4px; }
  .calendar-day { min-height:40px; padding:8px 2px; }

  .modal-backdrop { align-items:flex-end; padding:0; z-index:82; }
  .modal-panel,
  #campaignCreateModal .modal-panel,
  .ad-preview-modal-panel {
    width:100%;
    max-width:none;
    max-height:94dvh;
    margin:0;
    padding:16px 14px calc(16px + env(safe-area-inset-bottom,0px));
    border-radius:20px 20px 0 0;
  }
  .modal-header { position:sticky; top:-16px; z-index:3; margin:-16px -14px 10px; padding:12px 14px 8px; background:#fff; border-radius:20px 20px 0 0; }
  .modal-header button { min-width:44px; min-height:44px; }
  .kv { grid-template-columns:minmax(95px,.75fr) minmax(0,1.4fr); gap:8px 10px; }
  .apply-box { background:#fff; }
  .modal-panel .apply-box,
  #activeChangePlanCard .apply-box {
    position:sticky;
    bottom:0;
    z-index:4;
    margin:12px -14px -16px;
    padding:12px 14px calc(16px + env(safe-area-inset-bottom,0px));
    border-top:1px solid #e5e7eb;
    box-shadow:0 -8px 18px rgba(17,24,39,.06);
  }
  .entity-actions button,
  .info-button,
  .visibility-button { min-width:44px; min-height:44px; }
  .summary-cards,.stats-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric { padding:10px; }
  .metric .value { font-size:17px; }
  .toast {
    left:8px;
    right:8px;
    bottom:calc(72px + env(safe-area-inset-bottom,0px));
    max-width:none;
  }
}


.reference-account-select{display:flex;flex-direction:column;gap:4px;min-width:220px}
.reference-account-select select{min-width:220px}
.reference-editor-area{width:100%;min-height:360px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.45}
.reference-editor-area[readonly]{background:var(--surface-subtle,#f6f7f9)}
.reference-history{max-height:260px;overflow:auto;white-space:pre-wrap}
#referencesTable td:nth-child(4){white-space:nowrap}
@media (max-width:760px){
  .reference-account-select,.reference-account-select select{min-width:100%;width:100%}
  #referencesTable{min-width:900px}
  .reference-editor-area{min-height:300px}
}

/* v0.16.0 admin client-access table */
.portal-admin-card{margin-bottom:16px}.portal-admin-card form{display:grid;gap:12px}
.portal-admin-card form>label{max-width:570px}.portal-admin-card input#portalClientName{width:100%}
.portal-account-label{font-weight:700}
.portal-account-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:8px;max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:12px}
.portal-account-choice{display:flex!important;align-items:center;gap:8px;min-width:0;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--card)}
.portal-account-choice input{width:auto!important;flex:0 0 auto}.portal-account-choice span:first-of-type{min-width:0;overflow-wrap:anywhere;flex:1}
.portal-account-choice code{font-size:11px;color:var(--muted)}.portal-admin-table-wrap{overflow-x:auto}
#portalClientsTable{min-width:690px}#portalClientsTable th:last-child{text-align:right}
#portalClientsTable td:last-child{white-space:nowrap}
.portal-row-actions{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.portal-row-actions button{width:36px;min-height:36px;padding:6px}
.portal-row-actions svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.portal-client-hidden{opacity:.55}.portalEditName{text-align:left;font-weight:750}.portal-subtitle{font-size:12px;padding-top:3px}
@media(max-width:760px){.portal-account-options{grid-template-columns:1fr;max-height:280px}}

/* v0.16.2 interface refinement */
@media(min-width:761px){
 header:has(#tabs){gap:12px;justify-content:flex-start}
 header .panel-heading{flex:0 0 auto;min-width:0}
 header nav#tabs{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:3px;padding:0;margin:0 0 0 12px;border:0;background:transparent;overflow-x:auto}
 header nav#tabs button{padding:9px 10px}
 header .header-actions{flex:0 0 auto;margin-left:auto}
}
.portal-form-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.portal-form-heading h2{margin:0}
.portal-form-show{margin-bottom:12px}
.portal-account-options{display:flex;flex-direction:column;gap:0;padding:4px 10px;max-height:250px}
.portal-account-choice{margin:0;min-height:37px;padding:5px 4px;border:0;border-bottom:1px solid #eef0f3;border-radius:0;background:transparent;font-weight:400}
.portal-account-choice:last-child{border-bottom:0}
.portal-account-choice:hover{background:#f8fafc}
.portal-account-choice .portal-account-name{flex:1;min-width:0;overflow-wrap:anywhere}
.portal-account-choice code{flex:0 1 auto;font-size:11px;overflow-wrap:anywhere}
.portal-account-choice span.ad-system-badge:first-of-type{flex:0 0 auto;min-width:auto}
.reference-heading{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.reference-heading h2,.reference-heading p{margin:0}
.reference-account-select{display:flex;flex-direction:row;align-items:center;gap:9px;min-width:0;margin:0;white-space:nowrap}
.reference-account-select select{min-width:220px;max-width:300px}
.update-status-details{min-width:0}
.update-updater-row{display:grid;grid-template-columns:minmax(130px,1fr) 2fr;gap:8px 16px;font-size:13px;margin-bottom:8px}
.update-updater-row>div:first-child{color:#6b7280}
.update-updater-info{margin:0;min-height:0}
details.ai-audit-card{margin:0}
details.ai-audit-card summary{list-style:none;margin:0;cursor:pointer}
details.ai-audit-card summary::-webkit-details-marker{display:none}
.ai-audit-ident .ai-audit-chevron{font-size:17px;line-height:1;color:#6b7280;transition:transform .15s ease;display:inline-block}
details.ai-audit-card[open] .ai-audit-chevron{transform:rotate(90deg)}
.ai-audit-content{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.ai-audit-content .ai-audit-actions{margin:0}
.ai-audit-actions .deleteAiAuditBtn{margin-left:auto;color:#991b1b;border-color:#fecaca}
.ai-audit-content .ai-audit-detail{margin-top:12px}
@media(max-width:760px){
 .portal-account-options{max-height:280px}
 .reference-account-select{flex-wrap:wrap;white-space:normal}
 .reference-account-select select{min-width:100%;max-width:100%}
 .reference-heading{gap:5px}
 .update-updater-row{grid-template-columns:minmax(95px,.75fr) minmax(0,1.4fr);gap:8px 10px}
}