/* «Мой блогер» — Clear CRM product theme */
:root {
  --primary: #0b2f63;
  --on-primary: #ffffff;
  --secondary: #315f93;
  --accent: #1677ee;
  --accent-strong: #0667d8;
  --accent-soft: #eaf4ff;
  --background: #f7faff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --foreground: #0b2f63;
  --muted: #607896;
  --muted-2: #8296ad;
  --border: #d8e4f2;
  --border-strong: #a9c4e4;
  --destructive: #ef315d;
  --destructive-soft: #fff0f4;
  --warning: #ef7416;
  --warning-soft: #fff5eb;
  --success: #069b7d;
  --success-soft: #ecfaf6;
  --orange: #ff0b57;
  --purple: #855cf5;
  --sidebar: #ffffff;
  --sidebar-muted: #0b2f63;
  --sidebar-border: #d8e4f2;
  --ring: #1677ee;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 7px;
  --radius-xl: 8px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 24px 60px rgba(7, 37, 78, .2);
  --sidebar-width: 212px;
  --topbar-height: 54px;
  --crm-blue: #1677ee;
  --crm-blue-pale: #eef6ff;
  --crm-pink: #ff0b57;
  --crm-orange: #f47a20;
  --crm-mint: #06a987;
  --crm-violet: #8a5cf5;
  --crm-navy: #062e68;
  color-scheme: light;
}

[data-theme="dark"] {
  --primary: #dcecff;
  --on-primary: #07162b;
  --secondary: #a8c2df;
  --accent: #5aa7ff;
  --accent-strong: #7ab8ff;
  --accent-soft: #102f55;
  --background: #07162b;
  --surface: #0d2240;
  --surface-raised: #133052;
  --foreground: #eaf3ff;
  --muted: #a3b7cf;
  --muted-2: #7891ad;
  --border: #294463;
  --border-strong: #416388;
  --destructive: #ff6689;
  --destructive-soft: #401a2a;
  --warning: #ff9d55;
  --warning-soft: #3c281b;
  --success: #5bd2b5;
  --success-soft: #143b35;
  --sidebar: #071b3c;
  --sidebar-muted: #dcecff;
  --sidebar-border: #294463;
  --crm-blue-pale: #102f55;
  color-scheme: dark;
}

body { font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 14px; }
h1, h2, h3 { font-family: Inter, "Segoe UI", Arial, sans-serif; font-weight: 700; letter-spacing: -.035em; }
h1 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
h2 { font-size: 1.2rem; }
.eyebrow { color: var(--accent); font-family: Inter, "Segoe UI", sans-serif; font-weight: 700; }

/* Global shell and navigation */
.sidebar {
  background: var(--crm-navy);
  color: white;
  border-right-color: color-mix(in srgb, white 14%, transparent);
  transition: width var(--transition), background var(--transition), transform var(--transition);
}
[data-theme="dark"] .sidebar { background: var(--crm-navy); }
.brand-block { padding: 16px 12px 12px; }
.brand { gap: 9px; color: white; }
.brand-mark { width: 34px; height: 34px; border-radius: 5px; background: rgba(255,255,255,.12); color: white; font-family: Inter, sans-serif; font-size: 16px; }
.brand-copy { color: white; }
.brand-copy b { font-size: 14px; }
.brand-copy span { font-size: 9px; color: #c7ddf8; }
.brand-version { margin: 10px 0 0 43px; color: #99b9dc; font-family: Inter, sans-serif; font-size: 8px; }
.nav-list { gap: 4px; padding: 8px 10px; }
.nav-item { min-height: 42px; gap: 10px; padding: 0 10px; border-radius: 6px; color: #e8f2ff; font-size: 13px; font-weight: 600; }
.nav-item svg { width: 17px; height: 17px; color: #cfe2f8; }
.nav-item:hover { color: white; background: rgba(255,255,255,.08); }
.nav-item.is-active { color: white; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.16); box-shadow: inset 3px 0 0 #79b5ff; }
.nav-item.is-active svg { color: white; }
.nav-count { background: var(--accent-soft); color: var(--accent); }
.nav-count-accent { background: var(--accent); color: white; }
.nav-count-danger { background: var(--destructive-soft); color: var(--destructive); }
.nav-list .nav-count { display: none; }
.sidebar-note { display: none; margin-left: 64px; padding: 13px; border-radius: 6px; background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface)); }
.sidebar-note-top { color: var(--muted); font-size: 9px; }
.sidebar-note strong { color: var(--foreground); }
.sidebar-note p { color: var(--muted); font-size: 11px; }
.sidebar-note .text-button { color: var(--accent); }
.sidebar-footer { margin-left: 0; padding: 9px 10px; border-color: rgba(255,255,255,.14); }
.user-card { min-height: 48px; color: white; border-radius: 6px; }
.user-card:hover { background: rgba(255,255,255,.08); }
.user-card small { color: #a9c4e2; }
.user-card > svg { color: #a9c4e2; }
.topbar { padding: 0 20px; background: color-mix(in srgb, var(--surface) 96%, transparent); }
.os-sota-project-switcher select { min-width: 150px; height: 40px; border: 1px solid var(--border); border-radius: 6px; padding: 0 30px 0 10px; background: var(--surface); color: var(--foreground); font: inherit; font-size: 12px; font-weight: 650; }
.os-sota-project-switcher[hidden], #os-sota-global-logout[hidden] { display: none; }
.workspace { transition: margin-left var(--transition); }
.icon-button, .search-button { border-radius: 6px; background: var(--surface); }
.icon-button { width: 40px; height: 40px; }
.search-button { min-width: 260px; height: 40px; }
kbd { border-radius: 4px; background: var(--accent-soft); }
.main-content { max-width: 1500px; padding: 24px clamp(18px, 2.2vw, 34px) 52px; }
.mobile-menu { display: inline-grid; }

body.sidebar-collapsed { --sidebar-width: 64px; }
body.sidebar-collapsed .sidebar {
  background: var(--crm-navy);
  overflow: hidden;
}
body.sidebar-collapsed .brand-block { padding: 14px 10px 8px; }
body.sidebar-collapsed .brand { justify-content: center; }
body.sidebar-collapsed .brand-mark { width: 38px; height: 38px; }
body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .brand-version,
body.sidebar-collapsed .nav-item span,
body.sidebar-collapsed .sidebar-note,
body.sidebar-collapsed .user-card span,
body.sidebar-collapsed .user-card > svg { display: none; }
body.sidebar-collapsed .nav-list { padding: 10px 9px; }
body.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  color: white;
}
body.sidebar-collapsed .nav-item:hover,
body.sidebar-collapsed .nav-item.is-active {
  background: color-mix(in srgb, var(--accent) 72%, #ffffff 0%);
  border-color: rgba(255,255,255,.22);
}
body.sidebar-collapsed .sidebar-footer {
  margin-left: 0;
  padding: 12px 10px;
  border-top-color: rgba(255,255,255,.16);
}
body.sidebar-collapsed .user-card {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 6px 0;
  color: white;
}
.page-heading { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.page-heading h1 { margin-bottom: 5px; }
.page-lead { color: var(--muted); font-size: 13px; }

/* Actions and common components */
.button { min-height: 40px; padding: 8px 14px; border-radius: 5px; font-size: 12px; }
.button-primary { border-color: var(--crm-pink); background: var(--crm-pink); box-shadow: none; }
.button-primary:hover { border-color: #df0045; background: #df0045; }
.button-secondary { border-color: #91bdf4; color: var(--accent); }
.button-secondary:hover { border-color: var(--accent); background: var(--accent-soft); }
.button-light { border-color: var(--accent); background: var(--accent); color: white; }
.button-light:hover { border-color: var(--accent-strong); background: var(--accent-strong); }
.button-ghost-light { border-color: #8bbcf9; background: white; color: var(--accent); }
.button-ghost-light:hover { background: var(--accent-soft); }
.status-label, .stage-badge, .counter-pill, .filter-chip { border-radius: 4px; }
.queue-item[hidden], .incident-row[hidden] { display: none !important; }
.panel, .creator-card, .approval-queue, .review-panel, .portfolio-overview, .approval-summary, .stage-rail, .modal, .command-palette { border-radius: 7px; box-shadow: none; }
.panel { border-color: var(--border); }
.segmented-control { border: 1px solid var(--border); border-radius: 5px; background: var(--background); }
.segmented-control button, .segmented-control button.is-active { border-radius: 3px; }
.progress-track, .progress-track i { border-radius: 2px; }

/* Dashboard */
.focus-card { min-height: 270px; padding: 24px; border: 1px solid #9dc7ff; border-radius: 7px; background: linear-gradient(135deg, var(--crm-blue-pale), var(--surface) 68%); color: var(--foreground); box-shadow: none; }
.focus-card::before { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px); background-size: 82px 100%; box-shadow: none; }
.status-label-light { border: 1px solid #b9d7ff; background: var(--accent-soft); color: var(--accent); }
.focus-copy h2 { margin: 12px 0 9px; font-size: clamp(1.7rem, 2.5vw, 2.35rem); }
.focus-copy p { color: var(--muted); }
.focus-progress { padding: 17px; border-color: #bfd8f7; border-radius: 6px; background: var(--surface); color: var(--foreground); backdrop-filter: none; }
.focus-progress > span, .focus-meta { color: var(--muted); }
.focus-progress > strong { color: var(--foreground); font-family: Inter, sans-serif; font-weight: 700; }
.focus-progress > strong { margin: 6px 0 10px; font-size: 44px; }
.focus-progress .progress-track { background: var(--border); }
.focus-progress .progress-track i { background: var(--accent); }
.signal-stack { gap: 10px; }
.signal-card { min-height: 130px; padding: 16px; border-radius: 6px; border-left: 4px solid var(--accent); box-shadow: none; }
.signal-card-warning { border-color: var(--border); border-left-color: var(--warning); background: var(--warning-soft); }
.signal-icon { border: 1px solid color-mix(in srgb, var(--warning) 25%, var(--border)); border-radius: 5px; }
.signal-icon-green { border-color: color-mix(in srgb, var(--success) 25%, var(--border)); }
.metric-grid { gap: 10px; margin: 12px 0; }
.metric-card { min-height: 136px; padding: 16px; border-radius: 6px; border-left-width: 4px; box-shadow: none; }
.metric-card:nth-child(1) { border-left-color: var(--accent); background: var(--crm-blue-pale); }
.metric-card:nth-child(2) { border-left-color: var(--crm-orange); background: var(--warning-soft); }
.metric-card:nth-child(3) { border-left-color: var(--crm-mint); background: var(--success-soft); }
.metric-card:nth-child(4) { border-left-color: var(--crm-violet); background: color-mix(in srgb, var(--crm-violet) 9%, var(--surface)); }
.metric-card > strong { font-family: Inter, sans-serif; font-weight: 700; }
.metric-card-top svg { width: 30px; height: 30px; padding: 6px; border: 1px solid color-mix(in srgb, currentColor 12%, var(--border)); border-radius: 5px; background: color-mix(in srgb, var(--surface) 75%, transparent); }
.mini-bars i, .health-strip i, .action-priority { border-radius: 2px; }
.performance-panel { border-top: 3px solid var(--accent); }
.action-panel { border-top: 3px solid var(--crm-pink); }
.cost-path { stroke: var(--crm-pink); }
.legend-orange { background: var(--crm-pink); }
.action-item:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }

/* Portfolio */
.portfolio-overview > div { border-color: var(--border); }
.portfolio-overview > div:nth-child(1) { background: var(--crm-blue-pale); }
.portfolio-overview > div:nth-child(2) { background: var(--warning-soft); }
.portfolio-overview > div:nth-child(3) { background: var(--success-soft); }
.portfolio-overview > div:nth-child(4) { background: color-mix(in srgb, var(--crm-violet) 9%, var(--surface)); }
.portfolio-overview strong { font-family: Inter, sans-serif; font-weight: 700; }
.search-field { border-radius: 6px; }
.filter-chip.is-active { border-color: var(--accent); background: var(--accent); color: white; }
.creator-card { border-left: 4px solid var(--border); }
.creator-card:nth-child(4n+1) { border-left-color: var(--accent); }
.creator-card:nth-child(4n+2) { border-left-color: var(--success); }
.creator-card:nth-child(4n+3) { border-left-color: var(--destructive); }
.creator-card:nth-child(4n+4) { border-left-color: var(--warning); }
.creator-card:hover, .creator-card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.creator-card.featured { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.creator-title h2 { color: var(--foreground); }
.creator-next, .creator-signal, .creator-alert { border-radius: 6px; }
.creator-next { border: 1px solid var(--border); background: var(--background); }
.queue-type, .workstream-icon { border-radius: 5px; }

/* Approvals */
.summary-number { border-color: var(--border); }
.summary-number:nth-child(1) { border-top: 3px solid var(--destructive); }
.summary-number:nth-child(2) { border-top: 3px solid var(--warning); }
.summary-number:nth-child(3) { border-top: 3px solid var(--accent); }
.summary-number:nth-child(4) { border-top: 3px solid var(--success); }
.summary-number strong { font-family: Inter, sans-serif; font-weight: 700; }
.queue-filter button { border-radius: 4px; }
.queue-filter button.is-active { background: var(--accent-soft); color: var(--accent); }
.queue-item.is-selected { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.queue-type { border: 1px solid var(--border); }
.review-panel { border-top: 3px solid var(--crm-pink); }
.decision-card { border: 1px solid #9dc7ff; border-radius: 6px; background: var(--crm-blue-pale); color: var(--foreground); }
.decision-price strong { color: var(--foreground); font-family: Inter, sans-serif; font-weight: 700; }
.decision-price span, .decision-price small, .confidence span { opacity: 1; color: var(--muted); }
.confidence .progress-track { background: var(--border); }
.confidence .progress-track i { background: var(--accent); }
.evidence-grid > div, .reason-list li { border-radius: 5px; }
.evidence-grid > div { background: var(--background); }
.review-actions .button-primary { min-width: 180px; }

/* Incidents */
.system-status { border-radius: 7px; border-left: 4px solid var(--success); background: var(--success-soft); }
.system-status-icon { border-radius: 6px; }
.system-status h2 { color: var(--foreground); }
.system-uptime strong, .incident-metrics strong { font-family: Inter, sans-serif; font-weight: 700; }
.incident-metrics article { border-radius: 6px; border-left: 4px solid var(--border); }
.incident-metrics article:nth-child(1) { border-left-color: #9c2033; background: var(--destructive-soft); }
.incident-metrics article:nth-child(2) { border-left-color: var(--destructive); background: var(--destructive-soft); }
.incident-metrics article:nth-child(3) { border-left-color: var(--warning); background: var(--warning-soft); }
.incident-metrics article:nth-child(4) { border-left-color: var(--success); background: var(--success-soft); }
.severity-mark, .incident-title .severity-mark { border-radius: 2px; }
.incident-table-panel { border-top: 3px solid var(--destructive); }
.health-panel { border-top: 3px solid var(--success); }
.kill-switch-card { border: 1px solid color-mix(in srgb, var(--destructive) 25%, var(--border)); border-radius: 6px; }

/* Project overview */
.project-hero { padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.project-identity h1 { color: var(--foreground); font-weight: 700; }
.avatar-xxl { border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-family: Inter, sans-serif; font-weight: 700; }
.identity-tags span { border-radius: 4px; }
.stage-rail { border-top: 3px solid var(--accent); }
.stage-step i { border-radius: 5px; }
.project-metric-grid article { border-radius: 6px; border-left: 4px solid var(--border); }
.project-metric-grid article:nth-child(1) { border-left-color: var(--accent); background: var(--crm-blue-pale); }
.project-metric-grid article:nth-child(2) { border-left-color: var(--success); background: var(--success-soft); }
.project-metric-grid article:nth-child(3) { border-left-color: var(--warning); background: var(--warning-soft); }
.project-metric-grid article:nth-child(4) { border-left-color: var(--crm-violet); background: color-mix(in srgb, var(--crm-violet) 9%, var(--surface)); }
.project-metric-grid strong { font-family: Inter, sans-serif; font-weight: 700; }
.next-move-card { border-top: 3px solid var(--crm-pink); }
.next-move-card::after { display: none; }
.next-move-number { border-radius: 5px; background: var(--crm-pink); font-family: Inter, sans-serif; font-weight: 700; }
.next-move-card h2 { color: var(--foreground); }
.next-move-meta span { border: 1px solid var(--border); border-radius: 4px; background: var(--background); }
.workstreams-panel { border-top: 3px solid var(--accent); }
.workstream-grid button { border-radius: 5px; background: var(--background); }
.launch-checklist { border-top: 3px solid var(--success); }
.budget-card { border-top: 3px solid var(--warning); }
.launch-checklist .panel-head > span, .budget-card .panel-head > span { border-radius: 4px; }

/* Overlays */
.modal, .command-palette { border-radius: 7px; }
.modal input, .modal select, .modal-note, .command-results button { border-radius: 5px; }
.toast { border-radius: 5px; background: var(--crm-navy); color: white; }

@media (max-width: 980px) {
  body.sidebar-collapsed { --sidebar-width: 212px; }
  .sidebar { background: var(--crm-navy); }
  body.sidebar-collapsed .sidebar {
    background: var(--crm-navy);
  }
  body.sidebar-collapsed .brand-copy,
  body.sidebar-collapsed .nav-item span,
  body.sidebar-collapsed .user-card span,
  body.sidebar-collapsed .user-card > svg { display: initial; }
  body.sidebar-collapsed .brand-version { display: block; }
  body.sidebar-collapsed .brand { justify-content: flex-start; }
  body.sidebar-collapsed .nav-item { justify-content: flex-start; padding: 0 10px; color: #e8f2ff; }
  body.sidebar-collapsed .nav-item:hover { background: rgba(255,255,255,.08); }
  body.sidebar-collapsed .nav-item.is-active { background: rgba(255,255,255,.14); }
  body.sidebar-collapsed .sidebar-footer { margin-left: 0; }
  body.sidebar-collapsed .user-card { grid-template-columns: 38px 1fr 20px; justify-items: stretch; color: white; }
  .sidebar-note { margin-left: 0; }
  .main-content { padding-top: 22px; }
}

@media (max-width: 760px) {
  h1 { font-size: 1.75rem; }
  .topbar-actions { min-width: 0; }
  .os-sota-project-switcher { max-width: 150px; }
  .os-sota-project-switcher select { width: 100%; min-width: 0; }
  .search-button { width: 44px; min-width: 44px; }
  .page-heading { padding-bottom: 14px; }
  .focus-card { padding: 18px 14px; background: var(--crm-blue-pale); }
  .focus-card::before { background-size: 64px 100%; }
  .focus-copy h2 { font-size: 1.7rem; }
  .focus-progress { min-height: 132px; }
  .metric-card { min-height: 132px; }
  .review-actions { border-top: 1px solid var(--border); box-shadow: 0 -12px 24px color-mix(in srgb, var(--background) 88%, transparent); }
  .mobile-nav { background: color-mix(in srgb, var(--surface) 97%, transparent); }
  .mobile-nav button { border-radius: 5px; }
  .mobile-nav button.is-active { background: var(--accent-soft); color: var(--accent); }
  .stage-rail { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.instagram-connect-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 18px 0;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  background: var(--surface);
}
.instagram-connect-card [hidden] { display: none !important; }
.instagram-connect-copy { min-width: 0; }
.instagram-connect-copy h2 { margin: 4px 0 6px; font-size: 22px; color: var(--foreground); }
.instagram-connect-copy > p:not(.eyebrow) { margin: 0; color: var(--muted); }
.instagram-connect-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; color: var(--muted); font-size: 13px; }
.instagram-connect-status { font-weight: 800; color: var(--foreground); }
.instagram-connect-status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #94a3b8; }
.instagram-connect-status[data-state="connected"]::before { background: #0f9f77; }
.instagram-connect-status[data-state="pending"]::before,
.instagram-connect-status[data-state="expired"]::before { background: #ed7a1c; }
.instagram-connect-status[data-state="error"]::before { background: #d92d20; }
.instagram-connect-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.instagram-account-picker { display: grid; gap: 6px; margin-top: 14px; max-width: 420px; font-size: 13px; font-weight: 700; color: var(--foreground); }
.instagram-account-picker select { min-height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--foreground); }
.instagram-connect-scopes { margin-top: 10px !important; color: #9a4d00 !important; font-weight: 700; }
.instagram-connect-error { margin-top: 10px !important; color: #b42318 !important; }
.instagram-disconnect-button { color: #b42318; }
@media (max-width: 760px) {
  .instagram-connect-card { align-items: stretch; flex-direction: column; padding: 18px; }
  .instagram-connect-actions { justify-content: stretch; }
  .instagram-connect-actions .button { flex: 1 1 100%; }
}

/* Portfolio command center */
.portfolio-heading { align-items: end; }
.portfolio-heading-actions { display: flex; align-items: center; gap: 10px; }
.portfolio-period { display: flex; padding: 3px; border: 1px solid var(--border); background: var(--surface); }
.portfolio-period button { min-height: 34px; padding: 0 11px; border: 0; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; }
.portfolio-period button.is-active { background: var(--accent); color: white; }
.portfolio-kpi-section { margin: 8px 0 14px; padding: 20px; border: 1px solid var(--border); background: var(--surface); }
.portfolio-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.portfolio-kpi {
  --kpi-bg: var(--accent-soft); --kpi-accent: var(--accent);
  position: relative; min-width: 0; min-height: 142px; padding: 17px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--kpi-accent) 25%, var(--border));
  border-left: 4px solid var(--kpi-accent); background: var(--kpi-bg); color: var(--foreground);
  text-align: left; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease;
}
.portfolio-kpi:hover, .portfolio-kpi:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--kpi-accent) 14%, transparent); }
.portfolio-kpi span, .portfolio-kpi strong, .portfolio-kpi small { display: block; }
.portfolio-kpi span { font-size: 12px; font-weight: 800; }
.portfolio-kpi strong { margin: 13px 0 8px; font-size: clamp(22px, 2.3vw, 34px); line-height: 1; }
.portfolio-kpi small { color: var(--muted); font-size: 11px; }
.portfolio-kpi b { position: absolute; right: 14px; top: 13px; color: var(--kpi-accent); font-size: 20px; }
.portfolio-kpi[data-quality="missing"] strong { max-width: 85%; font-size: 20px; }
.kpi-revenue { --kpi-bg: #eaf4ff; --kpi-accent: #1677ee; }
.kpi-orders { --kpi-bg: #ecfaf6; --kpi-accent: #069b7d; }
.kpi-average { --kpi-bg: #f4f0ff; --kpi-accent: #7c5ce5; }
.kpi-conversion { --kpi-bg: #fff4e8; --kpi-accent: #ef7416; }
.kpi-posts { --kpi-bg: #fff0f4; --kpi-accent: #d94672; }
.kpi-videos { --kpi-bg: #eef7ff; --kpi-accent: #3178c6; }
.kpi-reach { --kpi-bg: #edfaf8; --kpi-accent: #008d80; }
.kpi-automation { --kpi-bg: #fff8df; --kpi-accent: #9a6700; }
.portfolio-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 8px 0 18px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.portfolio-summary article { min-width: 0; padding: 18px 20px; border-right: 1px solid var(--border); }
.portfolio-summary article:last-child { border-right: 0; }
.portfolio-summary span, .portfolio-summary small { display: block; color: var(--muted); }
.portfolio-summary span { font-size: 12px; font-weight: 700; }
.portfolio-summary strong { display: block; margin: 7px 0 4px; color: var(--foreground); font-size: clamp(26px, 2.5vw, 40px); line-height: 1; }
.portfolio-summary small { font-size: 11px; }
.portfolio-summary .needs-attention { background: var(--warning-soft); }
.portfolio-summary .needs-attention strong { color: var(--warning); }
.portfolio-insights-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .75fr); gap: 14px; margin: 14px 0; }
.portfolio-insights-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio-trend-panel, .portfolio-ranking-panel, .portfolio-calendar-panel, .portfolio-activity-panel { min-width: 0; padding: 20px; border: 1px solid var(--border); background: var(--surface); }
.portfolio-trend-chart { display: flex; align-items: end; gap: 3px; height: 160px; margin-top: 18px; padding-top: 12px; border-bottom: 1px solid var(--border); }
.portfolio-trend-column { display: flex; align-items: end; justify-content: center; gap: 1px; flex: 1; min-width: 2px; height: 100%; }
.portfolio-trend-column i, .portfolio-trend-column b { display: block; width: 45%; min-height: 2px; }
.portfolio-trend-column i { background: var(--accent); }
.portfolio-trend-column b { background: var(--success); }
.portfolio-ranking-list, .portfolio-calendar-list, .portfolio-activity-list { margin-top: 12px; }
.portfolio-ranking-item, .portfolio-calendar-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 10px 4px; border: 0; border-top: 1px solid var(--border); background: transparent;
  color: var(--foreground); text-align: left; cursor: pointer;
}
.portfolio-ranking-item:first-child, .portfolio-calendar-item:first-child { border-top: 0; }
.portfolio-ranking-item strong { color: var(--accent); }
.portfolio-calendar-item { justify-content: flex-start; }
.portfolio-calendar-item time { display: grid; place-items: center; flex: 0 0 48px; min-height: 42px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 800; }
.portfolio-calendar-item strong, .portfolio-calendar-item small, .portfolio-activity-item strong, .portfolio-activity-item small { display: block; }
.portfolio-calendar-item small, .portfolio-activity-item small { margin-top: 3px; color: var(--muted); }
.portfolio-activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--border); }
.portfolio-activity-item:first-child { border-top: 0; }
.portfolio-activity-item > i { flex: 0 0 9px; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--accent); }
.portfolio-activity-item > i[data-kind="payment"] { background: var(--success); }
.portfolio-pulse, .portfolio-attention-panel, .portfolio-systems, .portfolio-registry {
  border: 1px solid var(--border);
  background: var(--surface);
}
.portfolio-pulse { padding: 20px; }
.portfolio-section-head, .portfolio-registry-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.portfolio-section-head h2, .portfolio-registry-head h2 { margin: 3px 0 0; color: var(--foreground); font-size: 20px; }
.portfolio-section-head > small, .portfolio-registry-head small { color: var(--muted); }
.portfolio-stage-track { display: flex; gap: 6px; margin-top: 18px; min-height: 84px; }
.portfolio-stage {
  flex: var(--stage-share) 1 0;
  min-width: 92px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  background: var(--background);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
}
.portfolio-stage:hover, .portfolio-stage:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.portfolio-stage span, .portfolio-stage strong { display: block; }
.portfolio-stage span { color: var(--muted); font-size: 11px; font-weight: 700; }
.portfolio-stage strong { margin-top: 8px; font-size: 24px; }
.portfolio-operations { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 14px; margin: 14px 0; }
.portfolio-attention-panel, .portfolio-systems { padding: 20px; }
.portfolio-attention-list, .portfolio-systems-list { margin-top: 14px; }
.portfolio-attention-item {
  display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px;
  padding: 12px 10px; border: 0; border-top: 1px solid var(--border); background: transparent;
  color: var(--foreground); text-align: left; cursor: pointer;
}
.portfolio-attention-item:first-child { border-top: 0; }
.portfolio-attention-item span, .portfolio-attention-item strong, .portfolio-attention-item small { display: block; }
.portfolio-attention-item small { margin-top: 3px; color: var(--muted); }
.portfolio-attention-item b { color: var(--accent); font-size: 20px; }
.portfolio-attention-item.severity-high { box-shadow: inset 3px 0 0 var(--warning); }
.portfolio-system-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.portfolio-system-row:first-child { border-top: 0; }
.portfolio-system-row strong { color: var(--foreground); }
.portfolio-system-row strong[data-state="ready"] { color: var(--success); }
.portfolio-system-row strong[data-state="error"], .portfolio-system-row strong[data-state="configuration-required"] { color: var(--warning); }
.portfolio-inline-empty { margin: 12px 0 0; color: var(--muted); }
.portfolio-registry { padding: 20px; }
.portfolio-view-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.portfolio-saved-views, .portfolio-view-actions { display: flex; gap: 8px; }
.portfolio-saved-views select { min-height: 36px; padding: 0 10px; border: 1px solid var(--border); background: var(--surface); color: var(--foreground); }
.portfolio-bulk-bar { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 10px 12px; background: var(--accent-soft); color: var(--foreground); }
.portfolio-bulk-bar select { min-height: 34px; padding: 0 9px; border: 1px solid var(--border); background: var(--surface); color: var(--foreground); }
.portfolio-bulk-bar[hidden] { display: none !important; }
.portfolio-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.portfolio-filters input, .portfolio-filters select {
  min-height: 40px; padding: 0 12px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface); color: var(--foreground);
}
.portfolio-filters input { width: min(260px, 30vw); }
.portfolio-registry-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.portfolio-blogger-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 15px; width: 100%; min-height: 210px;
  padding: 16px; border: 1px solid var(--border); border-top: 4px solid var(--project-accent);
  background: color-mix(in srgb, var(--project-accent) 5%, var(--surface)); color: var(--foreground);
  text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.portfolio-project-card { position: relative; min-width: 0; }
.portfolio-project-card > .portfolio-blogger-row { height: 100%; }
.portfolio-project-select { position: absolute; z-index: 2; top: 12px; right: 12px; width: 18px; height: 18px; accent-color: var(--accent); }
.portfolio-registry-list.is-compact { grid-template-columns: 1fr; gap: 5px; }
.portfolio-registry-list.is-compact .portfolio-blogger-row { min-height: 0; padding: 11px 42px 11px 12px; flex-direction: row; align-items: center; }
.portfolio-registry-list.is-compact .portfolio-blogger-identity { flex: 1; }
.portfolio-registry-list.is-compact .portfolio-project-metrics { flex: 1.2; min-width: 340px; }
.portfolio-registry-list.is-compact .portfolio-project-meta { flex: .8; margin-top: 0; }
.portfolio-blogger-row:hover, .portfolio-blogger-row:focus-visible {
  transform: translateY(-2px); border-color: var(--project-accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--project-accent) 12%, transparent);
}
.portfolio-blogger-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.portfolio-blogger-identity i {
  display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px;
  border-radius: 50%; background: color-mix(in srgb, var(--project-accent) 14%, white); color: var(--project-accent); font-style: normal; font-size: 11px; font-weight: 800;
}
.portfolio-blogger-identity strong, .portfolio-blogger-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portfolio-blogger-identity small { margin-top: 3px; color: var(--muted); }
.portfolio-stage-badge { width: fit-content; padding: 5px 8px; border: 1px solid var(--border); background: var(--background); font-size: 11px; font-weight: 700; }
.portfolio-row-alert { color: var(--success); font-size: 11px; font-weight: 700; }
.portfolio-row-alert.is-visible { color: var(--warning); }
.portfolio-project-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.portfolio-project-metrics > span { padding: 9px; background: color-mix(in srgb, var(--project-accent) 6%, var(--surface)); border: 1px solid var(--border); }
.portfolio-project-metrics small, .portfolio-project-metrics strong { display: block; }
.portfolio-project-metrics small { color: var(--muted); font-size: 9px; }
.portfolio-project-metrics strong { margin-top: 5px; font-size: 13px; }
.portfolio-project-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; color: var(--muted); font-size: 11px; }
.portfolio-registry-actions { display: flex; justify-content: center; padding-top: 16px; }
.portfolio-empty, .portfolio-error { padding: 46px 20px; text-align: center; color: var(--muted); }
.portfolio-empty h3 { margin: 0 0 8px; color: var(--foreground); }
.portfolio-empty .button, .portfolio-error .button { margin-top: 14px; }
.portfolio-registry [hidden], .portfolio-registry-actions [hidden] { display: none !important; }

@media (max-width: 1050px) {
  .portfolio-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-registry-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-summary { grid-template-columns: repeat(3, 1fr); }
  .portfolio-summary article { border-bottom: 1px solid var(--border); }
  .portfolio-operations { grid-template-columns: 1fr; }
  .portfolio-insights-grid, .portfolio-insights-secondary { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .portfolio-heading-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .portfolio-period { justify-content: stretch; }
  .portfolio-period button { flex: 1; }
  .portfolio-kpi-section { padding: 14px; }
  .portfolio-kpi-grid { display: flex; margin-right: -14px; padding-right: 14px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .portfolio-kpi { flex: 0 0 78vw; scroll-snap-align: start; }
  .portfolio-summary { grid-template-columns: repeat(2, 1fr); }
  .portfolio-summary article { padding: 14px; }
  .portfolio-stage-track { display: grid; grid-template-columns: repeat(2, 1fr); }
  .portfolio-stage { min-width: 0; }
  .portfolio-section-head, .portfolio-registry-head { align-items: stretch; flex-direction: column; }
  .portfolio-filters { display: grid; grid-template-columns: 1fr; width: 100%; }
  .portfolio-filters input, .portfolio-filters select { width: 100%; }
  .portfolio-registry-list { grid-template-columns: 1fr; }
  .portfolio-blogger-row { min-height: 200px; }
  .portfolio-project-meta { flex-wrap: wrap; }
  .portfolio-view-toolbar, .portfolio-saved-views, .portfolio-view-actions, .portfolio-bulk-bar { align-items: stretch; flex-direction: column; }
  .portfolio-registry-list.is-compact .portfolio-blogger-row { align-items: stretch; flex-direction: column; }
  .portfolio-registry-list.is-compact .portfolio-project-metrics { min-width: 0; }
}