/* ── DESIGN TOKENS — Apple-inspired ─────────────────────────────────────── */
:root {
  /* Palette */
  --blue:       #2E7DB5;
  --blue-dk:    #1A5A8A;
  --blue-lt:    #5BA3D0;
  --orange:     #C9A46A;
  --green:      #34C759;
  --green-dk:   #248A3D;
  --yellow:     #FFD60A;
  --red:        #FF453A;
  --purple:     #BF5AF2;
  --cyan:       #32ADE6;

  /* Surfaces — refined dark, no heavy blacks */
  --bg:         #0A0F14;
  --surface:    #111820;
  --surface2:   #172030;
  --surface3:   #1E2B3A;
  --border:     rgba(255,255,255,0.07);
  --border2:    rgba(201,164,106,0.14);
  --text:       #F2EDE4;
  --muted:      #8A9BAA;
  --muted2:     #536270;
  --brand-gold: #C9A46A;
  --brand-cream:#EFE8DA;
  --brand-ink:  #080D12;

  /* Layout */
  --tab-h:      52px;
  --header-h:   60px;
  --sidebar-w:  232px;
  --sidebar-bg: #080D12;

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;

  /* Radius */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  22px;
}

/* ── LIGHT MODE TOKENS ───────────────────────────────────────────────────── */
body.light {
  --blue:       #1A6FA8;
  --blue-dk:    #0F4E7A;
  --blue-lt:    #2E8EC4;
  --orange:     #A07840;
  --green:      #1E9E42;
  --green-dk:   #157030;
  --yellow:     #C8A000;
  --red:        #D93025;
  --purple:     #8B3EC8;
  --cyan:       #1090C8;

  --bg:         #F5F4F2;
  --surface:    #FFFFFF;
  --surface2:   #F0EEE9;
  --surface3:   #E8E4DC;
  --border:     rgba(0,0,0,0.08);
  --border2:    rgba(160,120,64,0.18);
  --text:       #1A1614;
  --muted:      #5C6670;
  --muted2:     #8A939A;
  --brand-gold: #A07840;
  --brand-cream:#1A1614;
  --brand-ink:  #FFFFFF;
}

body.light {
  background-image: radial-gradient(ellipse 60% 40% at 0% 0%, rgba(160,120,64,.05), transparent);
}

body.light .header {
  background: rgba(245,244,242,0.92);
  border-bottom-color: rgba(0,0,0,0.08);
}

body.light .sidebar {
  background: rgba(240,238,233,0.97);
  border-right-color: rgba(0,0,0,0.08);
}

body.light .nav-item:hover {
  background: rgba(0,0,0,.05);
}

body.light .nav-item.active {
  background: rgba(160,120,64,.10);
  border-color: rgba(160,120,64,.15);
}

body.light .sidebar-footer {
  border-top-color: rgba(0,0,0,.08);
}

body.light .card,
body.light .ai-card,
body.light .funnel-card,
body.light .kpi,
body.light .empr-card,
body.light .ksc-card,
body.light .kpi-summary,
body.light .kpi-evo-card,
body.light .ig-profile-card,
body.light .config {
  box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
}

body.light .period-bar,
body.light .cfg-tabs { background: #E8E4DC; }

body.light .period-pill.active,
body.light .btn-primary { background: var(--brand-gold); color: #fff; }

body.light input, body.light select { background: #FFFFFF; border-color: rgba(0,0,0,.12); color: var(--text); }
body.light input:focus, body.light select:focus { border-color: rgba(26,111,168,.5); box-shadow: 0 0 0 3px rgba(26,111,168,.08); }

body.light .prompt-box { background: #F0EEE9; border-color: rgba(0,0,0,.07); }
body.light .prompt-row { background: #E8E4DC; border-color: rgba(0,0,0,.07); }
body.light .chip { background: #E8E4DC; border-color: rgba(0,0,0,.08); color: var(--muted); }
body.light .chip:hover { background: rgba(160,120,64,.08); border-color: rgba(160,120,64,.3); color: var(--brand-gold); }

body.light .hint { background: rgba(26,111,168,.05); border-left-color: rgba(26,111,168,.25); }

body.light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); }
body.light ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.2); }

/* ── THEME TRANSITION ────────────────────────────────────────────────────── */
body, body * {
  transition: background-color .2s ease, border-color .2s ease, color .15s ease, box-shadow .2s ease;
}
/* Don't animate things that shouldn't transition */
body canvas, body svg, body img { transition: none !important; }

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  /* Subtle ambient — doesn't compete with content */
  background-image: radial-gradient(ellipse 60% 40% at 0% 0%, rgba(201,164,106,.06), transparent);
}

/* ── HEADER ──────────────────────────────────────────────────────────────── */
.header {
  height: var(--header-h);
  background: rgba(8,13,18,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-8);
  gap: var(--sp-5);
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  overflow: hidden;
}

.header-logo {
  height: 36px;
  width: auto;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-width: 0;
  flex: 1;
}

.header-divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.10);
  flex-shrink: 0;
}

.header-titles { flex: 1; }

.header-title-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-cream);
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.header-right { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }

.live-badge {
  display: none;
  align-items: center;
  gap: 5px;
  background: rgba(52,199,89,.08);
  border: 1px solid rgba(52,199,89,.22);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: .02em;
}
.live-badge.show { display: flex; }
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.25} }

#ts { font-size: 11px; color: var(--muted2); font-weight: 500; font-family: 'IBM Plex Mono', monospace; }

.btn-demo {
  padding: 5px 14px;
  border-radius: var(--r-sm);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(201,164,106,.3);
  background: rgba(201,164,106,.07);
  color: var(--brand-gold);
  transition: all .15s;
  letter-spacing: .02em;
}
.btn-demo:hover { background: rgba(201,164,106,.14); border-color: rgba(201,164,106,.5); }
.btn-demo:disabled { opacity:.4; cursor:default; }

/* ── TABS NAV (hidden, using sidebar) ────────────────────────────────────── */
.tabs-nav { display: none; }

/* ── PAGE CONTENT ────────────────────────────────────────────────────────── */
.page { display: none; padding: var(--sp-8) var(--sp-8); max-width: 1800px; }
.page.active { display: block; }

/* ── SECTION LABEL ───────────────────────────────────────────────────────── */
.sec-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--muted2);
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.sec-label::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── CARD ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-7);
  /* Depth through surface, not heavy shadow */
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset,
              0 2px 8px rgba(0,0,0,.18);
  transition: box-shadow .2s;
}
.card:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset,
              0 4px 20px rgba(0,0,0,.25);
}
.card-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: var(--sp-5);
}
.chart-wrap { height: 260px; position: relative; }
.chart-wrap.tall { height: 320px; }

/* ── GRIDS ───────────────────────────────────────────────────────────────── */
.g2  { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); margin-bottom:var(--sp-6); }
.g3  { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--sp-6); margin-bottom:var(--sp-6); }
.g4  { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:var(--sp-6); margin-bottom:var(--sp-6); }
.g32 { display:grid; grid-template-columns:2fr 1fr; gap:var(--sp-6); margin-bottom:var(--sp-6); }
.g23 { display:grid; grid-template-columns:1fr 2fr; gap:var(--sp-6); margin-bottom:var(--sp-6); }
.g211{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--sp-6); margin-bottom:var(--sp-6); }
.mb  { margin-bottom: var(--sp-6); }

/* ── KPI CARDS ───────────────────────────────────────────────────────────── */
.kpi-row { display:grid; gap:var(--sp-4); margin-bottom:var(--sp-6); }
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
}
/* Accent dot — top-left corner, not a full bar */
.kpi::before {
  content: '';
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  width: 8px; height: 8px;
  border-radius: 50%;
  opacity: .7;
}
.kpi.c-blue::before   { background: var(--blue-lt); }
.kpi.c-orange::before { background: var(--orange); }
.kpi.c-green::before  { background: var(--green); }
.kpi.c-yellow::before { background: var(--yellow); }
.kpi.c-red::before    { background: var(--red); }
.kpi.c-purple::before { background: var(--purple); }
.kpi.c-cyan::before   { background: var(--cyan); }
.kpi.c-muted::before  { background: var(--muted2); }

.kpi-lbl  {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .04em;
  margin-bottom: var(--sp-2);
  padding-right: 20px; /* avoid overlap with dot */
}
.kpi-val  {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: var(--sp-2);
  letter-spacing: -.5px;
  font-family: 'IBM Plex Mono', monospace;
}
.kpi-note { font-size: 10px; color: var(--muted2); font-weight: 500; }

/* ── CONFIG BOX ──────────────────────────────────────────────────────────── */
.config {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.config-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--muted2);
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.config-title::after { content:''; flex:1; height:1px; background:var(--border); }

.cfg-tabs { display:flex; gap:var(--sp-1); margin-bottom:var(--sp-5); background:var(--surface2); border-radius: var(--r-sm); padding:3px; width:fit-content; }
.cfg-tab {
  padding: 5px 16px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  border: none;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  transition: all .15s;
}
.cfg-tab.active { background: var(--surface3); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.cfg-tab:hover:not(.active) { color: var(--text); }

.cfg-section { display: none; }
.cfg-section.active { display: block; }

.fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: var(--sp-3);
  align-items: end;
}
.fields.f2 { grid-template-columns: 1fr 1fr 1fr 1fr auto; }
.fields.f1 { grid-template-columns: 1fr 1fr auto; }

.field-group { display: flex; flex-direction: column; gap: var(--sp-1); }
label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted2);
  letter-spacing: .04em;
  text-transform: uppercase;
}

input, select {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
input:focus, select:focus {
  border-color: rgba(91,163,208,.6);
  box-shadow: 0 0 0 3px rgba(91,163,208,.10);
}
input[type=password] { letter-spacing: 3px; }

.hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: var(--sp-4);
  line-height: 1.7;
  background: rgba(46,125,181,.06);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid rgba(46,125,181,.3);
}
code {
  background: var(--surface3);
  color: var(--yellow);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn {
  white-space: nowrap;
  border: none;
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-6);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  letter-spacing: .02em;
}
.btn-primary {
  background: var(--brand-gold);
  color: var(--brand-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset;
}
.btn-primary:hover {
  background: #d4b07a;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 4px 12px rgba(201,164,106,.25);
}
.btn-primary:disabled { opacity:.4; cursor:default; transform:none; box-shadow:none; }
.btn-sm { padding: 5px 12px; font-size: 11px; }

/* ── STATUS ROW ──────────────────────────────────────────────────────────── */
.status-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted2);
  margin-bottom: var(--sp-5);
  letter-spacing: .04em;
}
.sdot { width:7px; height:7px; border-radius:50%; background:var(--muted2); flex-shrink:0; }
.sdot.on  { background: var(--green); box-shadow: 0 0 0 3px rgba(52,199,89,.18); }
.sdot.err { background: var(--red); }

/* ── FUNNEL ──────────────────────────────────────────────────────────────── */
.funnel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  margin-bottom: var(--sp-5);
  box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.04) inset;
}
.funnel-chart-wrap { position: relative; height: 420px; flex: 1; min-width: 0; }
.funnel-side-layout {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.funnel-conversions {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
  border-left: 1px solid var(--border);
  min-width: 172px;
  width: 172px;
}
.funnel-conv-item {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--surface2);
  margin-bottom: var(--sp-1);
}
.funnel-conv-item:last-child { margin-bottom: 0; }
.funnel-conv-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.funnel-conv-value {
  font-size: 20px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
}
.funnel-conv-value.good { color: var(--green); }
.funnel-conv-value.mid  { color: var(--orange); }
.funnel-conv-value.low  { color: var(--red); }

/* ── TABLE ───────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted2);
  text-align: left;
  padding: 0 var(--sp-3) var(--sp-2);
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
td {
  font-size: 12px;
  font-weight: 500;
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(255,255,255,.025); }

.tag { display:inline-block; padding:3px 10px; border-radius:20px; font-size:10px; font-weight:600; letter-spacing:.02em; }
.tag-green  { background:rgba(52,199,89,.12);   color:var(--green); }
.tag-amber  { background:rgba(255,156,0,.12);   color:var(--orange); }
.tag-blue   { background:rgba(91,163,208,.12);  color:var(--blue-lt); }
.tag-red    { background:rgba(255,69,58,.12);   color:var(--red); }
.tag-purple { background:rgba(191,90,242,.12);  color:var(--purple); }

/* ── AI CARD ─────────────────────────────────────────────────────────────── */
.ai-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.ai-top  { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.ai-badge {
  width:32px; height:32px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--blue-dk), var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
  box-shadow: 0 2px 8px rgba(46,125,181,.3);
}
.ai-top h3 { font-size:13px; font-weight:600; }
.ai-top span { font-size:10px; color:var(--muted2); display:block; font-weight:500; letter-spacing:.04em; margin-top:2px; }
.ai-body { font-size:12px; line-height:1.9; color:var(--text); white-space:pre-wrap; min-height:60px; font-weight:400; }

.prompt-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.prompt-chips { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-3); }
.chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 12px; border-radius:20px;
  background:var(--surface3); border:1px solid var(--border);
  color:var(--muted); font-family:'Montserrat',sans-serif;
  font-size:11px; font-weight:500; cursor:pointer;
  transition:all .15s; white-space:nowrap;
}
.chip:hover {
  border-color: rgba(201,164,106,.4);
  color: var(--brand-cream);
  background: rgba(201,164,106,.07);
}
.prompt-row {
  display:flex; gap:var(--sp-3); align-items:flex-end;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.prompt-row textarea {
  flex:1; background:none; border:none; outline:none;
  color:var(--text); font-family:'Montserrat',sans-serif;
  font-size:12px; font-weight:400; line-height:1.6;
  resize:none; min-height:36px; max-height:100px; overflow-y:auto;
}
.prompt-row textarea::placeholder { color:var(--muted2); }

/* -- SPINNER --------------------------------------------------------------- */
.spinner { display:inline-block; width:13px; height:13px; border:2px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; margin-right:5px; }
@keyframes spin { to{transform:rotate(360deg)} }

.empty { text-align:center; padding:40px; color:var(--muted); font-size:12px; font-weight:500; }
.empty .ico { font-size:32px; margin-bottom:10px; }

/* ── INSTAGRAM ───────────────────────────────────────────────────────────── */
.ig-profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.ig-avatar {
  width:52px; height:52px; border-radius:50%;
  background: linear-gradient(135deg, var(--orange), var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.ig-info h2 { font-size:15px; font-weight:700; margin-bottom:2px; }
.ig-info p  { font-size:11px; color:var(--muted); font-weight:400; }
.ig-stats   { display:flex; gap:var(--sp-7); margin-left:auto; }
.ig-stat    { text-align:center; }
.ig-stat-val {
  font-size:20px; font-weight:700;
  color: var(--text);
  letter-spacing:-.5px;
  font-family:'IBM Plex Mono',monospace;
}
.ig-stat-lbl {
  font-size:10px; color:var(--muted2);
  letter-spacing:.04em; text-transform:uppercase;
  margin-top:2px; font-weight:500;
}

.posts-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); margin-bottom:var(--sp-4); }
.post-card  {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  cursor: pointer;
  transition: all .2s;
}
.post-card:hover { border-color: rgba(201,164,106,.3); background: var(--surface3); }
.post-type {
  font-size:9px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted2);
  margin-bottom:var(--sp-2); display:flex; align-items:center; gap:4px;
}
.type-dot  { width:5px; height:5px; border-radius:50%; }
.dot-image   { background:var(--blue-lt); }
.dot-video   { background:#E1306C; }
.dot-reel    { background:var(--purple); }
.dot-carousel{ background:var(--green); }
.post-caption {
  font-size:11px; line-height:1.5; margin-bottom:var(--sp-2);
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; font-weight:400;
}
.post-metrics{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.post-metric { font-size:10px; color:var(--muted2); font-weight:400; }
.post-metric span { color:var(--text); font-weight:600; }

.heatmap-grid { display:grid; grid-template-columns:38px repeat(24,1fr); gap:2px; margin-top:var(--sp-3); }
.hm-cell  { height:20px; border-radius:3px; background:var(--surface3); display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--muted); }
.hm-label { font-size:9px; color:var(--muted2); font-weight:500; display:flex; align-items:center; }
.hm-hour  { font-size:8px; color:var(--muted2); text-align:center; font-weight:400; }

/* ── CRIATIVOS ───────────────────────────────────────────────────────────── */
.alert-bar  { display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.alert-item {
  display:flex; align-items:flex-start; gap:var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm); flex:1; min-width:220px;
  border:1px solid; font-size:12px; line-height:1.5; font-weight:400;
}
.alert-item.danger  { background:rgba(255,69,58,.06);   border-color:rgba(255,69,58,.2); }
.alert-item.warn    { background:rgba(255,156,0,.06);   border-color:rgba(255,156,0,.2); }
.alert-item.success { background:rgba(52,199,89,.06);   border-color:rgba(52,199,89,.2); }
.alert-item.info    { background:rgba(50,173,230,.06);  border-color:rgba(50,173,230,.2); }
.alert-icon  { font-size:16px; flex-shrink:0; }
.alert-title { font-weight:600; margin-bottom:2px; }
.alert-sub   { font-size:11px; color:var(--muted); }

.cr-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-bottom:var(--sp-4); }
.cr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  transition: all .2s;
}
.cr-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.25); transform:translateY(-1px); }
.cr-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:var(--sp-3); }
.cr-name { font-size:12px; font-weight:600; line-height:1.4; }
.cr-type { font-size:10px; color:var(--muted2); margin-top:2px; font-weight:500; }
.cr-score { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.score-hot  { background:rgba(52,199,89,.10);  border:1.5px solid rgba(52,199,89,.25); }
.score-ok   { background:rgba(50,173,230,.08); border:1.5px solid rgba(50,173,230,.2); }
.score-cold { background:rgba(255,69,58,.07);  border:1.5px solid rgba(255,69,58,.2); }
.score-fade { background:rgba(255,156,0,.08);  border:1.5px solid rgba(255,156,0,.2); }
.cr-metrics { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.cr-metric-box { background:var(--surface2); border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3); }
.cr-metric-lbl { font-size:9px; font-weight:600; color:var(--muted2); letter-spacing:.04em; margin-bottom:2px; }
.cr-metric-val { font-size:14px; font-weight:700; }
.cr-status-bar { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); font-size:11px; font-weight:500; }
.cr-status-bar.hot  { background:rgba(52,199,89,.07);  color:var(--green); }
.cr-status-bar.ok   { background:rgba(50,173,230,.07); color:var(--blue-lt); }
.cr-status-bar.fade { background:rgba(255,156,0,.07);  color:var(--orange); }
.cr-status-bar.cold { background:rgba(255,69,58,.07);  color:var(--red); }
.cr-freq-bar  { height:3px; border-radius:2px; background:var(--surface3); margin-top:var(--sp-2); overflow:hidden; }
.cr-freq-fill { height:100%; border-radius:2px; transition:width .6s; }

/* ── VENDAS ──────────────────────────────────────────────────────────────── */
.empr-tabs { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.empr-tab {
  padding: 5px 16px;
  border-radius: 20px;
  font-size:11px; font-weight:600;
  cursor:pointer;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'Montserrat', sans-serif;
  transition: all .15s;
}
.empr-tab:hover { color:var(--text); border-color: rgba(255,255,255,.12); }
.empr-tab.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.empr-tab.e0.active { background:#4CAF50; border-color:#4CAF50; }
.empr-tab.e1.active { background:#4FA5C8; border-color:#4FA5C8; }
.empr-tab.e2.active { background:#2E7D32; border-color:#2E7D32; }
.empr-tab.e3.active { background:#0D47A1; border-color:#0D47A1; }

.empr-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); margin-bottom:var(--sp-5); }
.empr-card {
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  overflow: hidden;
  transition: opacity .2s, transform .18s;
}
.empr-card:hover { transform: translateY(-2px); }
/* Left accent bar — cleaner than top bar */
.empr-card::before {
  content:''; position:absolute;
  top: var(--sp-5); left:0; bottom: var(--sp-5);
  width:3px; border-radius:0 3px 3px 0;
}
.empr-card.e0::before { background:#4CAF50; }
.empr-card.e1::before { background:#4FA5C8; }
.empr-card.e2::before { background:#2E7D32; }
.empr-card.e3::before { background:#0D47A1; }
.empr-card.dimmed { opacity: 0.35; }
.empr-name { font-size:10px; font-weight:600; letter-spacing:.04em; color:var(--muted); margin-bottom:var(--sp-2); }
.empr-vgv  { font-size:22px; font-weight:700; margin-bottom:2px; letter-spacing:-.5px; font-family:'IBM Plex Mono',monospace; }
.empr-meta { font-size:11px; color:var(--muted2); font-weight:400; }

.rank-list  { display:flex; flex-direction:column; gap:var(--sp-2); }
.rank-item  {
  display:flex; align-items:center; gap:var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface2);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  transition: background .15s;
}
.rank-item:hover { background: var(--surface3); }
.rank-pos   { font-size:11px; font-weight:700; color:var(--muted2); width:18px; text-align:center; flex-shrink:0; }
.rank-pos.gold   { color:#C9A46A; }
.rank-pos.silver { color:#8C9CA8; }
.rank-pos.bronze { color:#A07050; }
.rank-name  { font-size:12px; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-sub   { font-size:10px; color:var(--muted2); font-weight:400; white-space:nowrap; }
.rank-bar-w { width:60px; height:3px; background:var(--surface3); border-radius:2px; flex-shrink:0; }
.rank-bar   { height:100%; border-radius:2px; }
.rank-vgv   { font-size:12px; font-weight:700; white-space:nowrap; text-align:right; min-width:80px; }

/* ── KPI SETOR ───────────────────────────────────────────────────────────── */
.period-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-5); flex-wrap:wrap; gap:var(--sp-3); }
.period-tabs{ display:flex; gap:var(--sp-1); background:var(--surface2); border-radius:var(--r-sm); padding:3px; }
.period-tab {
  padding: 5px 14px;
  border-radius: 8px;
  font-family: 'Montserrat',sans-serif; font-size:11px; font-weight:600;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor:pointer; transition:all .15s;
}
.period-tab:hover { color:var(--text); }
.period-tab.active { background:var(--surface3); color:var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.3); }

.kpi-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.kss-item   { text-align:center; padding: var(--sp-3) var(--sp-4); position:relative; }
.kss-item+.kss-item::before { content:''; position:absolute; left:0; top:20%; bottom:20%; width:1px; background:var(--border); }
.kss-num    { font-size:32px; font-weight:700; line-height:1; margin-bottom:4px; letter-spacing:-.5px; font-family:'IBM Plex Mono',monospace; }
.kss-lbl    { font-size:10px; color:var(--muted2); font-weight:500; letter-spacing:.04em; }

.ksc-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); margin-bottom:var(--sp-5); }
.ksc-card   {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  position: relative; overflow:hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: box-shadow .2s;
}
.ksc-card:hover { box-shadow:0 4px 20px rgba(0,0,0,.25); }
/* Top accent line — thin and subtle */
.ksc-card::before {
  content:''; position:absolute;
  top:0; left: var(--sp-6); right: var(--sp-6);
  height:1.5px; border-radius:0 0 2px 2px;
}
.ksc-card.status-ok::before   { background:var(--green); opacity:.7; }
.ksc-card.status-warn::before { background:var(--orange); opacity:.7; }
.ksc-card.status-bad::before  { background:var(--red); opacity:.7; }
.ksc-card.status-none::before { background:var(--muted2); opacity:.4; }
.ksc-top   { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:var(--sp-4); }
.ksc-icon  { font-size:22px; }
.ksc-badge { display:flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:10px; font-weight:600; }
.ksc-badge.ok   { background:rgba(52,199,89,.12);   color:var(--green); }
.ksc-badge.warn { background:rgba(255,156,0,.12);   color:var(--orange); }
.ksc-badge.bad  { background:rgba(255,69,58,.12);   color:var(--red); }
.ksc-badge.none { background:rgba(130,155,170,.10); color:var(--muted2); }
.ksc-badge-dot  { width:5px; height:5px; border-radius:50%; background:currentColor; }
.ksc-name  { font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.04em; margin-bottom:var(--sp-2); }
.ksc-real  { font-size:34px; font-weight:700; line-height:1; margin-bottom:var(--sp-1); letter-spacing:-.5px; font-family:'IBM Plex Mono',monospace; }
.ksc-real.ok   { color:var(--green); }
.ksc-real.warn { color:var(--orange); }
.ksc-real.bad  { color:var(--red); }
.ksc-real.none { color:var(--muted2); }
.ksc-meta-row  { display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.ksc-meta-lbl  { font-size:10px; color:var(--muted2); font-weight:500; letter-spacing:.04em; }
.ksc-meta-val  { font-size:12px; font-weight:600; }
.ksc-bar-w     { height:5px; background:var(--surface3); border-radius:3px; overflow:hidden; margin-bottom:var(--sp-2); }
.ksc-bar-f     { height:100%; border-radius:3px; transition:width .8s cubic-bezier(.4,0,.2,1); }
.ksc-desc      { font-size:11px; color:var(--muted2); line-height:1.5; font-weight:400; }
.ksc-input-row { display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--border); }
.ksc-input-row label { font-size:10px; color:var(--muted2); font-weight:600; letter-spacing:.04em; white-space:nowrap; margin-bottom:0; }
.ksc-input     { flex:1; background:var(--surface2); border:1px solid var(--border); color:var(--text); border-radius:var(--r-sm); padding:5px 10px; font-family:'Montserrat',sans-serif; font-size:12px; font-weight:500; outline:none; width:auto; transition:border-color .2s; }
.ksc-input:focus { border-color:rgba(91,163,208,.6); }
.gauge-wrap {
  position: relative;
  width: min(100%, 190px);
  height: 108px;
  margin: 10px auto 6px;
}
.gauge-canvas {
  width: 100% !important;
  height: 100% !important;
}
.gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 34px;
  pointer-events: none;
}
.gauge-pct {
  font-family:'IBM Plex Mono',monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.4px;
}
.chart-note {
  margin-top: 10px;
  font-size: 10px;
  color: var(--muted2);
  line-height: 1.5;
}
.hidden-section {
  display: none;
}

.kpi-evo-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-6); margin-bottom:var(--sp-4); }

/* ── SIDEBAR LAYOUT ──────────────────────────────────────────────────────── */
.app-body {
  display: flex;
  min-height: calc(100vh - var(--header-h));
}
.content-area {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  /* One step lighter than the near-black bg — not identical, not jarring */
  background: rgba(12,18,26,0.97);
  border-right: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.sidebar-brand { display: none; }
.sidebar-brand-logo { width: 120px; max-width: 100%; display:block; margin-bottom: 12px; }
.sidebar-brand-title { font-size: 11px; font-weight: 700; color: var(--brand-cream); letter-spacing: .06em; text-transform: uppercase; }
.sidebar-brand-sub   { font-size: 9px; font-weight: 500; color: var(--muted2); text-transform: uppercase; letter-spacing: 1.2px; margin-top: 4px; }
.sidebar-brand-dashboard {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-cream);
  letter-spacing: .02em;
  line-height: 1.2;
}

.sidebar-nav { padding: var(--sp-3) var(--sp-3); flex: 1; }
.sidebar-section-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted2);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
  opacity: .6;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
}
.nav-item:hover {
  background: rgba(255,255,255,.05);
  color: var(--brand-cream);
}
.nav-item.active {
  background: rgba(201,164,106,.10);
  color: var(--brand-cream);
  font-weight: 600;
  border: 1px solid rgba(201,164,106,.12);
}
.nav-icon { font-size: 14px; opacity: .85; }

.sidebar-footer {
  padding: var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--muted2);
  font-weight: 400;
  opacity: .6;
}

/* ── SIDEBAR APIs PANEL ──────────────────────────────────────────────────── */
.sidebar-apis-toggle {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); margin: 4px var(--sp-3);
  border-radius: var(--r-sm); border: none; background: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 600;
  color: var(--brand-gold); cursor: pointer;
  transition: all .15s; width: calc(100% - 24px);
  text-align: left;
}
.sidebar-apis-toggle:hover { background: rgba(201,164,106,.07); }
.sidebar-apis-toggle .chevron { transition: transform .2s; font-size: 9px; margin-left: auto; }
.sidebar-apis-toggle.open .chevron { transform: rotate(90deg); }

.sidebar-apis-content { display: none; padding: 0 var(--sp-3) var(--sp-3); }
.sidebar-apis-content.open { display: block; }

.sidebar-apis-content .api-group {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.sidebar-apis-content .api-group-title {
  font-size: 9px; font-weight: 600; color: var(--muted2);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: var(--sp-2);
}
.sidebar-apis-content .field-group { margin-bottom: var(--sp-1); }
.sidebar-apis-content label { font-size: 9px; margin-bottom: 2px; }
.sidebar-apis-content input,
.sidebar-apis-content select { padding: 5px 8px; font-size: 11px; }
.sidebar-apis-content .btn { padding: 5px 12px; font-size: 10px; width: 100%; margin-top: 4px; }
.sidebar-apis-content .api-group-note {
  font-size: 10px; line-height: 1.45;
  color: var(--muted2); margin-top: var(--sp-1);
}
.sidebar-apis-content .api-actions-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-1); }
.chart-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.chart-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.btn-ghost {
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
}
.btn-ghost:hover {
  border-color: rgba(201,164,106,.3);
  color: var(--brand-cream);
  background: rgba(201,164,106,.06);
}
.chart-filter-hint {
  font-size: 10px;
  color: var(--muted2);
  margin-top: -var(--sp-1);
  margin-bottom: var(--sp-3);
  letter-spacing: .02em;
  font-weight: 400;
}

/* ── PERIOD BAR + FLATPICKR ──────────────────────────────────────────────── */
.period-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
  background: var(--surface2);
  border-radius: var(--r-sm);
  padding: 3px;
  width: fit-content;
}
.period-bar-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted2);
  letter-spacing: .04em;
  padding: 5px var(--sp-3);
}
.period-pill {
  padding: 5px 14px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .15s;
}
.period-pill:hover { color:var(--text); }
.period-pill.active {
  background: var(--brand-gold);
  color: var(--brand-ink);
  box-shadow: 0 1px 4px rgba(201,164,106,.3);
  font-weight: 700;
}

.period-custom-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: var(--sp-1);
}
.period-custom-input {
  width: 165px !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
  cursor: pointer;
  background: var(--surface3) !important;
  border-color: var(--border) !important;
}

/* Flatpickr dark overrides */
.flatpickr-calendar {
  background: var(--surface) !important;
  border: 1px solid var(--border2) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}
.flatpickr-day.inRange {
  background: rgba(0,110,157,.3) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ── CONVERSION RANKING ──────────────────────────────────────────────────── */
.conv-rank-table { width: 100%; border-collapse: collapse; }
.conv-rank-table th {
  font-size: 9px; font-weight: 600; color: var(--muted2);
  letter-spacing: .04em;
  padding: 0 var(--sp-3) var(--sp-2); text-align: left;
  border-bottom: 1px solid var(--border);
}
.conv-rank-table td {
  padding: var(--sp-2) var(--sp-3); font-size: 12px; font-weight: 400;
  border-bottom: 1px solid var(--border);
}
.conv-rank-table tr:last-child td { border-bottom: none; }
.medal { font-size: 14px; }
.conv-bar-wrap { width: 56px; height: 3px; background: var(--surface3); border-radius: 2px; }
.conv-bar-fill { height: 100%; border-radius: 2px; background: var(--blue-lt); }

/* ── KPI NO DATA MESSAGE ─────────────────────────────────────────────────── */
.kpi-nodata-msg {
  background: rgba(255,156,0,.05);
  border: 1px solid rgba(255,156,0,.18);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
  text-align: center;
  color: var(--orange);
  font-size: 13px;
  font-weight: 600;
}
.kpi-nodata-msg .hint-text {
  color: var(--muted2);
  font-size: 11px;
  font-weight: 400;
  margin-top: var(--sp-1);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media(max-width:1200px) {
  .kpi-row { grid-template-columns:repeat(3,1fr) !important; }
  .cr-grid { grid-template-columns:repeat(2,1fr); }
  .ksc-grid { grid-template-columns:repeat(2,1fr); }
  .empr-cards { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:800px) {
  .kpi-row { grid-template-columns:repeat(2,1fr) !important; }
  .posts-grid { grid-template-columns:repeat(2,1fr); }
  .fields, .fields.f2 { grid-template-columns:1fr; }
  .g2,.g3,.g4,.g32,.g23,.g211 { grid-template-columns:1fr; }
  .period-bar { width:auto; }
}

/* ── THEME TOGGLE ────────────────────────────────────────────────────────── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
  transition: background .2s, border-color .2s, color .2s;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--brand-gold); color: var(--brand-gold); }

/* Show the right icon based on mode */
body:not(.light) .theme-icon-light { display: none; }
body.light        .theme-icon-dark  { display: none; }
body.light .theme-toggle { background: #E8E4DC; }

/* ── SCROLLBAR ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.14); }

/* ── HINT ────────────────────────────────────────────────────────────────── */
.hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: var(--sp-4);
  line-height: 1.7;
  background: rgba(46,125,181,.06);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid rgba(46,125,181,.3);
}
.hint strong { color: var(--blue-lt); }

/* ── MOBILE HAMBURGER ───────────────────────────────────────────────────── */
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.hamburger:hover { color: var(--brand-gold); background: var(--surface2); }

/* ── MOBILE SIDEBAR OVERLAY ─────────────────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 99;
}
.sidebar-overlay.open { display: block; }

/* ── LOADING SKELETON ───────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.kpi-val.skeleton { width: 80px; height: 28px; display: inline-block; }
.chart-wrap.skeleton { min-height: 200px; }

/* ── RESPONSIVE 600px (mobile) ──────────────────────────────────────────── */
@media(max-width:600px) {
  .hamburger { display: flex; }

  .sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100vh;
    width: 260px;
    z-index: 200;
    transition: left .25s ease;
    border-right: 1px solid var(--border);
  }
  .sidebar.open { left: 0; }

  .header { padding: 0 var(--sp-3); }
  .header-titles { display: none; }
  .header-divider { display: none; }

  .kpi-row { grid-template-columns: 1fr !important; }
  .posts-grid { grid-template-columns: 1fr; }
  .cr-grid { grid-template-columns: 1fr; }
  .empr-cards { grid-template-columns: 1fr; }

  .content-area { padding: var(--sp-3); }
  .page { padding: var(--sp-3) 0; }

  .kpi { padding: var(--sp-3); }
  .card { padding: var(--sp-4); }

  .period-bar { flex-direction: column; gap: var(--sp-2); width: auto; }
}