@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Vanguard Portal — shared visual language with the public site */
:root {
  --bg: #1d1d1b;
  --bg-d: #121211;
  --surface: #242422;
  --surface-2: #2b2b29;
  --paper: #f0f2f1;
  --ivory: #f0f2f1;
  --muted: #a5a5a1;
  --faint: #747470;
  --line: rgba(240, 242, 241, .14);
  --line-strong: rgba(240, 242, 241, .34);
  --gold: #f0f2f1;
  --gold-soft: #f0f2f1;
  --ink: #1d1d1b;
  --night: #1d1d1b;
  --panel: #242422;
  --panel-2: #2b2b29;
  --bone: #f0f2f1;
  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --serif: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: 'Plus Jakarta Sans', system-ui, sans-serif;
  --radius: 4px;
}

body {
  background: var(--bg) !important;
  color: var(--paper) !important;
  font-family: var(--sans) !important;
  letter-spacing: -.01em;
}

/* Client access: a calm, clear entry point instead of a second brand. */
.access-page {
  background: var(--bg) !important;
  padding: 18px clamp(16px, 3vw, 48px) !important;
}
.access-page:before { background: repeating-linear-gradient(90deg, transparent 0 84px, rgba(240,242,241,.026) 85px 86px) !important; }
.access-card { width: min(1180px, 100%) !important; min-height: 560px !important; border-radius: 4px !important; box-shadow: none !important; }
.access-editorial { background: linear-gradient(145deg, #30302d, #1d1d1b 62%) !important; }
.access-editorial:before { color: rgba(240,242,241,.04) !important; font-family: var(--sans) !important; font-weight: 700 !important; }
.access-editorial:after { border-color: rgba(240,242,241,.14) !important; box-shadow: 0 0 0 43px rgba(240,242,241,.025), 0 0 0 86px rgba(240,242,241,.012) !important; }
.access-editorial h1, .access-form-panel h2 { font-family: var(--sans) !important; font-weight: 600 !important; letter-spacing: -.075em !important; }
.access-editorial h1 em { color: var(--paper) !important; font-style: normal !important; }
.access-form-panel { background: #20201e !important; }
.brand, .dash-brand { font-family: var(--sans) !important; font-weight: 700 !important; letter-spacing: .06em !important; }
.brand .brand-mark, .dash-brand span { border-radius: 2px !important; border-color: var(--paper) !important; background: var(--paper) !important; color: var(--bg) !important; font-family: var(--sans) !important; font-weight: 800 !important; }
.eyebrow, .form-overline, .section-tag { color: var(--muted) !important; font-family: var(--sans) !important; font-weight: 700 !important; letter-spacing: .11em !important; }
.access-primary, .report-actions button { border-radius: 2px !important; border-color: var(--paper) !important; background: var(--paper) !important; color: var(--bg) !important; }
.access-primary:hover, .report-actions button:hover { background: #cfcfca !important; }
.access-secondary, .access-help button { color: var(--paper) !important; font-family: var(--sans) !important; font-weight: 700 !important; }

/* Dashboards: compact product interface, matching the site header and cards. */
.dash-grain { opacity: .035 !important; }
.dashboard { max-width: 1680px !important; grid-template-columns: 230px minmax(0, 1fr) !important; }
.dash-sidebar, .side { background: #171715 !important; border-color: var(--line) !important; }
.dash-sidebar { padding: 22px 16px 18px !important; }
.dash-label { color: var(--muted) !important; }
.dash-label i, .live-dot { background: var(--paper) !important; box-shadow: 0 0 0 4px rgba(240,242,241,.08) !important; }
.campaign-switch, .account-summary { border-radius: 3px !important; background: #20201e !important; }
.campaign-initial { border-radius: 2px !important; background: var(--paper) !important; color: var(--bg) !important; font-family: var(--sans) !important; font-weight: 800 !important; }
.dash-nav a { border-radius: 2px !important; font-weight: 600 !important; }
.dash-nav a:hover, .dash-nav a.active { background: rgba(240,242,241,.08) !important; color: var(--paper) !important; box-shadow: inset 2px 0 0 var(--paper) !important; }
.dash-content { padding: 26px clamp(16px, 3.6vw, 56px) 64px !important; }
.dash-header h1, .campaign-hero h2, .section-heading h2, .split-section h2, .split-section h3, .scope-intro h2 {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: -.075em !important;
}
.dash-header h1 { font-size: clamp(32px, 3.6vw, 54px) !important; }
.dash-header, .top { border-bottom: 1px solid var(--line) !important; padding-bottom: 24px !important; }
.campaign-hero, .report-section, .split-section, .service-scope, .metric-grid article { border-radius: 4px !important; background: var(--surface) !important; }
.campaign-hero { border-color: var(--line-strong) !important; background: linear-gradient(135deg, #353530, #232321 58%, #1c1c1a) !important; }
.campaign-hero:after { border-color: rgba(240,242,241,.18) !important; box-shadow: 0 0 0 55px rgba(240,242,241,.025), 0 0 0 110px rgba(240,242,241,.012) !important; }
.campaign-hero h2:after { background: var(--paper) !important; }
.campaign-progress, .active-services article, .service-suggestions article, .metric-trend-chart { border-radius: 3px !important; background: rgba(0,0,0,.12) !important; }
.campaign-progress span, .metric-grid span, .row-date, .timeline-date, .document-row a, .row-link { color: var(--muted) !important; }
.metric-grid article:first-child { background: linear-gradient(135deg, #3b3b37, #242422 72%) !important; }
.metric-grid article:first-child:after { border-color: rgba(240,242,241,.22) !important; box-shadow: 0 0 0 24px rgba(240,242,241,.035), 0 0 0 48px rgba(240,242,241,.018) !important; }
.metric-grid strong, .campaign-progress strong, .clipping-card span { font-family: var(--sans) !important; font-weight: 600 !important; }
.timeline-row, .report-row, .creator-row, .decision-row, .document-row, .empty-row { border-radius: 3px !important; background: rgba(255,255,255,.022) !important; }
.timeline-row:hover, .report-row:hover, .creator-row:hover, .document-row:hover { border-color: rgba(240,242,241,.45) !important; background: rgba(240,242,241,.055) !important; }
.row-order, .creator-avatar, .document-row:before { border-radius: 2px !important; background: rgba(240,242,241,.12) !important; color: var(--paper) !important; }
.service-suggestions article, .creator-proposal { border-color: rgba(240,242,241,.32) !important; background: rgba(240,242,241,.055) !important; }
.row-status.pending, .row-status.programmed { background: rgba(240,242,241,.12) !important; color: var(--paper) !important; }
.clipping-card { background: linear-gradient(145deg, #30302d, #20201e) !important; }

/* Administration receives the same product shell, not a separate visual identity. */
.admin, .campaign-workspace { background: var(--bg) !important; color: var(--paper) !important; }
.side { width: 230px !important; padding: 22px 16px 18px !important; }
.side nav a { border-radius: 2px !important; font-family: var(--sans) !important; font-weight: 600 !important; }
.side nav a:hover, .side nav a.active { background: rgba(240,242,241,.08) !important; color: var(--paper) !important; }
.content { padding: 28px clamp(16px, 3.6vw, 56px) 72px !important; }
.top h1, .section-head h2, .access h2, .campaign-hero h1 { font-family: var(--sans) !important; font-weight: 600 !important; letter-spacing: -.075em !important; }
.top h1 { font-size: clamp(34px, 4vw, 58px) !important; }
.top h1 em, .section-head h2 em, .access h2 em { color: var(--paper) !important; font-style: normal !important; }
.metrics article, .metric-strip article, .admin-form, .campaign-card, .access { border-radius: 4px !important; background: var(--surface) !important; border-color: var(--line) !important; box-shadow: none !important; }
.metrics article:first-child, .metric-strip article:first-child { background: linear-gradient(145deg, #383834, #242422 70%) !important; }
.admin-form input, .admin-form textarea, .admin-form select, .client-search input { border-radius: 2px !important; background: #1a1a18 !important; color: var(--paper) !important; border-color: var(--line) !important; }
.admin-form button, .campaign-card .campaign-actions button, .campaign-card .campaign-actions a { border-radius: 2px !important; background: var(--paper) !important; color: var(--bg) !important; border-color: var(--paper) !important; }
.admin-form .campaign-dialog-actions .secondary { background: transparent !important; color: var(--paper) !important; border-color: var(--line-strong) !important; }

@media (max-width: 760px) {
  .access-card { margin: 20px 0 16px !important; }
  .dashboard { display: block !important; }
  .dash-sidebar, .side { position: relative !important; width: auto !important; height: auto !important; }
  .dash-nav a.active { box-shadow: inset 0 -2px 0 var(--paper) !important; }
  .dash-content, .content { padding: 22px 14px 42px !important; }
  .campaign-hero h2 { font-size: 38px !important; }
}

/* Mobile portal: no iOS input zoom, enough finger room, no overflow. */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  .access-page { padding: 12px 14px max(18px, env(safe-area-inset-bottom)) !important; }
  .access-card { min-height: auto !important; }
  .access-editorial { min-height: 245px; }
  .dash-nav a, .dash-bottom a, .dash-bottom button, .side nav a { min-height: 44px; display: flex; align-items: center; }
  .access-primary, .access-secondary, .report-actions button, .admin-form button, .campaign-card .campaign-actions button { min-height: 46px; }
  input, select, textarea, .campaign-switch select { font-size: 16px !important; }
  .campaign-switch { min-height: 58px; }
  .creator-links { gap: 14px; }
}

@media (pointer: coarse) {
  button, a, input, select, textarea { touch-action: manipulation; }
}