/* ===== KPI CARDS ===== */
.card {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  padding: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  border-color: var(--b2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}
.card .bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}
.card .lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 10px;
}
.card .val {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--t1);
  line-height: 1;
}
.card .val.xl {
  font-size: 34px;
}
/* MoM delta badge — soft pastel so the card value stays the hero.
   Applies to any `.chg`, not just inside `.card`, so social.js + similar
   inline usages share the same restrained aesthetic. */
.chg {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid transparent;
  line-height: 1.4;
}
.card .chg { margin-top: 8px; }
.chg.up {
  background: rgba(76, 209, 122, 0.1);
  color: #4ADE80;
  border-color: rgba(76, 209, 122, 0.2);
}
.chg.dn {
  background: rgba(255, 90, 90, 0.1);
  color: #FCA5A5;
  border-color: rgba(255, 90, 90, 0.2);
}
.chg.neutral {
  background: rgba(255, 255, 255, 0.04);
  color: var(--t4);
  border-color: rgba(255, 255, 255, 0.08);
}
.card .sub {
  font-size: 10px;
  color: var(--t2);
  margin-top: 6px;
}

/* ===== META CARD ===== */
.card.meta-bg {
  background: linear-gradient(135deg, #0C3D8F, #1877F2);
  border: none;
  box-shadow: 0 4px 24px rgba(24,119,242,.15);
}
.card.meta-bg .lbl {
  color: rgba(255,255,255,.5);
}
.card.meta-bg .val {
  color: #fff;
}
.card.meta-bg .sub {
  color: rgba(255,255,255,.4);
}

/* ===== CHARTS ===== */
.ch {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  padding: 22px;
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ch .ch-t {
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
  margin-bottom: 2px;
}
.ch .ch-s {
  font-size: 10px;
  color: var(--t4);
  margin-bottom: 12px;
}

/* ===== TABLE WRAPPER ===== */
.tw {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.tw .th {
  padding: 16px 20px 8px;
  font-size: 12px;
  font-weight: 700;
}
table {
  width: 100%;
  border-collapse: collapse;
}
table th {
  padding: 8px 16px;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--t4);
  font-weight: 600;
  text-align: right;
  border-bottom: 1px solid var(--b2);
}
table th:first-child {
  text-align: left;
}
table td {
  padding: 9px 16px;
  font-size: 11px;
  color: var(--t2);
  text-align: right;
  border-bottom: 1px solid var(--b1);
}
table td:first-child {
  text-align: left;
  color: var(--t1);
  font-weight: 500;
}
table td strong {
  color: #fff;
}
table tr:hover td {
  background: rgba(255,255,255,.01);
}
table tr.hl td {
  background: rgba(217, 164, 65,.03);
}
table tr.hl td:first-child {
  color: var(--gold);
  font-weight: 700;
}

/* ===== PILLS — pastel status/delta, pro look ===== */
.p {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  border: 1px solid transparent;
}
.p.g { background: rgba(76, 209, 122, 0.1); color: #4ADE80; border-color: rgba(76, 209, 122, 0.2); }
.p.r { background: rgba(255, 90, 90, 0.1); color: #FCA5A5; border-color: rgba(255, 90, 90, 0.2); }
.p.y { background: rgba(234, 179, 8, 0.1); color: #FCD34D; border-color: rgba(234, 179, 8, 0.2); }
.p.n { background: rgba(255, 255, 255, 0.04); color: var(--t4); border-color: rgba(255, 255, 255, 0.08); }

/* Per-cell MoM delta inside Detailed Comparison table cells.
   The delta used to sit on its own line under the value, which doubled the
   height of every row in a 20-row table. Inline now, aligned right next to
   the number it qualifies, so the whole comparison fits in far less scroll. */
/* Kept under the value rather than beside it: inline, the value+chip pair
   wraps in narrow month columns and half the table ends up misaligned.
   Tighter spacing instead, which is where the height actually went. */
.cell-delta { margin-top: 2px; line-height: 1; }
.cell-delta .p { font-size: 9px; padding: 0 4px; font-weight: 600; }
.tw table td { padding-top: 6px; padding-bottom: 6px; }

/* Sticky heads only where the table is long enough to need one. Applied to
   every .tw it hid the first row of short tables as they scrolled past the
   topbar: the seven-row weekday table read as if Monday did not exist.
   Opt in with .tw--sticky. */
.tw--sticky { overflow: visible; }
.tw--sticky table thead th {
  position: sticky;
  top: var(--topbar-h, 64px);
  z-index: 3;
  background: var(--s1);
  backdrop-filter: blur(8px);
}
.tw table th.is-partial {
  color: var(--gold);
}

/* "Still running" marker for a month in progress. Never let a partial total
   be read as a closed one. */
.partial-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid rgba(217, 164, 65, .35);
  border-radius: 3px;
  color: var(--gold);
  background: var(--accent-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  vertical-align: middle;
}

/* ===== INSIGHT CARDS ===== */
.insight-hero {
  text-align: center;
  padding: 40px 0 32px;
}
.insight-hero h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 4px;
}
.insight-hero p {
  color: var(--t3);
  font-size: 13px;
}
.insight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.insight-card {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  padding: 28px;
  position: relative;
}
.insight-card.full {
  grid-column: 1 / -1;
}
.insight-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.insight-card h3 .icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.insight-card .tag {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 12px;
}
.insight-card p {
  font-size: 12px;
  color: var(--t2);
  line-height: 1.7;
  margin-bottom: 10px;
}
.insight-card p strong {
  color: var(--t1);
}
.insight-card ul {
  list-style: none;
  padding: 0;
}
.insight-card ul li {
  font-size: 11px;
  color: var(--t2);
  padding: 6px 0;
  border-bottom: 1px solid var(--b1);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.insight-card ul li:last-child {
  border: none;
}
.insight-card ul li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.insight-card ul li.green::before  { background: var(--green); }
.insight-card ul li.gold::before   { background: var(--gold); }
.insight-card ul li.blue::before   { background: var(--blue); }
.insight-card ul li.red::before    { background: var(--red); }

.kpi-mini {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}
.kpi-mini .km {
  background: var(--bg);
  border: 1px solid var(--b1);
  border-radius: 10px;
  padding: 12px 14px;
  flex: 1;
  text-align: center;
}
.kpi-mini .km .kmv {
  font-size: 18px;
  font-weight: 800;
  color: var(--t1);
}
.kpi-mini .km .kml {
  font-size: 8px;
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* ===== META SECTION — inline with left blue accent to flag META source ===== */
.meta-section {
  border: none;
  border-left: 3px solid #1877F2;
  border-radius: 0;
  padding: 4px 0 4px 14px;
  margin: 0 0 16px;
  background: transparent;
}
.meta-section .sl { color: #4FA0FF; }

/* ===== PLACEHOLDER / LOADING ===== */
.page-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--t3);
  font-size: 14px;
  font-weight: 500;
}

/* ===== DATE RANGE PICKER ===== */
.dp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin: 0 0 20px 0;
  background: linear-gradient(135deg, rgba(24, 119, 242, 0.06), rgba(139, 92, 246, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.dp-bar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.dp-bar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--t4);
  text-transform: uppercase;
}
.dp-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #F1F5F9;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dp-trigger:hover {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(217, 164, 65, 0.3);
}
.dp-trigger svg {
  opacity: 0.7;
}
.dp-trigger svg:first-child {
  color: var(--gold, #D9A441);
  opacity: 1;
}
.dp-days {
  font-size: 11px;
  color: var(--t4);
  font-weight: 500;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}
.dp-refresh {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--t3);
  cursor: pointer;
  transition: all 0.15s ease;
}
.dp-refresh:hover {
  color: var(--gold, #D9A441);
  border-color: rgba(217, 164, 65, 0.3);
  background: rgba(217, 164, 65, 0.05);
}
.dp-refresh:active {
  transform: scale(0.94);
  transition: transform 0.08s ease;
}
.dp-refresh.spinning {
  animation: dp-refresh-pulse 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.dp-refresh.spinning svg {
  animation: dp-refresh-tick 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes dp-refresh-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0.45); }
  100% { box-shadow: 0 0 0 9px rgba(217, 164, 65, 0); }
}
@keyframes dp-refresh-tick {
  0%   { transform: rotate(0); }
  100% { transform: rotate(180deg); }
}
.is-refreshing {
  position: relative;
  transition: opacity 0.18s ease;
}
.is-refreshing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(217, 164, 65,0.04) 50%, transparent 100%);
  pointer-events: none;
  animation: refresh-shimmer 0.9s ease-in-out;
  z-index: 1;
}
@keyframes refresh-shimmer {
  0% { opacity: 0; transform: translateX(-20%); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateX(20%); }
}
.dp-panel {
  padding: 18px;
  margin: -8px 0 20px 0;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  backdrop-filter: blur(12px);
}
.dp-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.dp-preset {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: var(--t2);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dp-preset:hover {
  background: rgba(217, 164, 65, 0.08);
  border-color: rgba(217, 164, 65, 0.3);
  color: #F1F5F9;
}
.dp-preset.on {
  background: linear-gradient(135deg, rgba(217, 164, 65, 0.15), rgba(217, 164, 65, 0.05));
  border-color: var(--gold, #D9A441);
  color: var(--gold, #D9A441);
  font-weight: 700;
}
.dp-preset.is-current {
  position: relative;
}
.dp-preset.is-current::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  animation: dp-current-pulse 2s ease-in-out infinite;
}
@keyframes dp-current-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25); }
  50% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15); }
}
.dp-updated-slot:empty {
  display: none;
}
.dp-updated-slot .status-badge {
  font-size: 11px;
}
.dp-custom {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.dp-custom-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.dp-custom-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: var(--t4);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.dp-custom-row input[type="date"] {
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #F1F5F9;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color-scheme: dark;
}
.dp-custom-row input[type="date"]:focus {
  outline: none;
  border-color: var(--gold, #D9A441);
}
.dp-apply {
  padding: 9px 18px;
  background: linear-gradient(135deg, var(--gold, #D9A441), #C96BB5);
  border: none;
  border-radius: 8px;
  color: #0B1120;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dp-apply:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217, 164, 65, 0.3);
}

/* ===== PAID LOADING / ERROR STATES ===== */
.paid-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 18px;
  color: var(--t3);
  font-size: 13px;
}
.paid-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.05);
  border-top-color: var(--gold, #D9A441);
  border-radius: 50%;
  animation: dpspin 0.9s linear infinite;
}
@keyframes dpspin {
  to { transform: rotate(360deg); }
}

/* ===== SKELETON LOADERS (pink shimmer) ===== */
.skel {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(217, 164, 65, 0.08);
  border-radius: 0;
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(217, 164, 65, 0.04) 30%,
    rgba(217, 164, 65, 0.22) 50%,
    rgba(217, 164, 65, 0.04) 70%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: skel-shimmer 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes skel-shimmer {
  100% { transform: translateX(100%); }
}
.skel-card {
  padding: 18px;
  background: rgba(255, 255, 255, 0.012);
  border: 1px solid rgba(217, 164, 65, 0.1);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 110px;
  position: relative;
  overflow: hidden;
}
.skel-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(217, 164, 65, 0.04) 30%,
    rgba(217, 164, 65, 0.18) 50%,
    rgba(217, 164, 65, 0.04) 70%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: skel-shimmer 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}
.skel-line {
  height: 12px;
  border-radius: 4px;
}
.skel-line.sm { height: 10px; }
.skel-line.lg { height: 22px; }
.skel-line.xl { height: 32px; }
.skel-row-r4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.skel-row-r5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.skel-row-r2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.skel-chart {
  height: 300px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.012);
  border: 1px solid rgba(217, 164, 65, 0.1);
  position: relative;
  overflow: hidden;
}
.skel-chart::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(217, 164, 65, 0.04) 30%,
    rgba(217, 164, 65, 0.18) 50%,
    rgba(217, 164, 65, 0.04) 70%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: skel-shimmer 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

/* ===== STATUS BADGES (Live / Cached / Stale / Archive) ===== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  vertical-align: middle;
  line-height: 1;
  font-family: 'Geist Mono', 'SF Mono', monospace;
}
.status-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  position: relative;
}
.status-badge.live {
  color: #4ADE80;
  border-color: rgba(74, 222, 128, 0.25);
  background: rgba(76, 209, 122, 0.06);
}
.status-badge.live .dot::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(74, 222, 128, 0.35);
  animation: sbpulse 1.8s ease-out infinite;
}
@keyframes sbpulse {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}
.status-badge.stale {
  color: #FBBF24;
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}
.status-badge.cached {
  color: #93C5FD;
  border-color: rgba(147, 197, 253, 0.2);
  background: rgba(59, 130, 246, 0.05);
}
.status-badge.stale {
  color: #FCD34D;
  border-color: rgba(253, 224, 71, 0.22);
  background: rgba(234, 179, 8, 0.06);
}
.status-badge.archive {
  color: var(--t4);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}
.paid-error {
  padding: 24px;
  background: rgba(255, 90, 90, 0.08);
  border: 1px solid rgba(255, 90, 90, 0.2);
  border-radius: 12px;
  color: #FCA5A5;
  font-size: 13px;
  text-align: center;
}

/* Hide global month selector on Paid Media page (has its own date range picker) */
body.page-paid .month-selector { display: none !important; }

/* ===== BUDGET TRACKER ===== */
.budget-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0 0 10px 0;
}
@media (max-width: 900px) {
  .budget-wrap { grid-template-columns: repeat(2, 1fr); }
}
.budget-card {
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.014), rgba(255, 255, 255, 0.004));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.budget-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--t4);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.budget-val {
  font-size: 26px;
  font-weight: 800;
  color: #F1F5F9;
  font-family: 'Inter', sans-serif;
  line-height: 1.1;
  letter-spacing: -0.3px;
}
.budget-sub {
  margin-top: 6px;
  font-size: 11px;
  color: var(--t4);
  font-weight: 500;
}
.budget-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(217, 164, 65, 0.2);
  border-radius: 8px;
  padding: 6px 12px;
  transition: border-color 0.15s ease;
}
.budget-input-row:focus-within {
  border-color: var(--gold, #D9A441);
}
.budget-currency {
  font-size: 20px;
  font-weight: 700;
  color: var(--gold, #D9A441);
}
.budget-input-row input[type="number"] {
  flex: 1;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #F1F5F9;
  letter-spacing: -0.3px;
  padding: 0;
  -moz-appearance: textfield;
}
.budget-input-row input[type="number"]::-webkit-outer-spin-button,
.budget-input-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.budget-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  overflow: hidden;
  margin: 0 0 28px 0;
}
.budget-bar-fill {
  height: 100%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
  border-radius: 4px;
}

/* ===== INVESTMENT CONSUMPTION BAR (hero) ===== */
.invest-bar {
  margin: 4px 0 28px 0;
  padding: 18px 20px 16px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,.004));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
}
.invest-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.invest-bar-lbl {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #9A9A9A;
  text-transform: uppercase;
}
.invest-bar-val {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: #FFFFFF;
  white-space: nowrap;
}
.invest-bar-sep {
  color: #5A5A5A;
  font-weight: 500;
  margin: 0 2px;
}
.invest-bar-pct {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  color: #9A9A9A;
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.invest-bar-track {
  position: relative;
  height: 10px;
  background: rgba(255,255,255,.05);
  border-radius: 6px;
  overflow: visible;
}
.invest-bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border-radius: 6px;
  transition: width 0.8s cubic-bezier(.22,1,.36,1), background 0.3s ease, box-shadow 0.3s ease;
}
.invest-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  pointer-events: none;
}
.invest-bar-thumb {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  border-radius: 2px;
  transition: left 0.8s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.invest-bar-scale {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8px);
  display: flex;
  justify-content: space-between;
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #5A5A5A;
}
.invest-bar-foot {
  margin-top: 30px;
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #6D6D6D;
  text-align: right;
  text-transform: uppercase;
}

/* Invest bar hover tooltip — glass like echarts */
.invest-bar-tip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  padding: 14px 18px;
  background: rgba(12, 12, 12, 0.55);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
  color: #FFFFFF;
  letter-spacing: 0.01em;
}
.invest-bar-track:hover .invest-bar-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.invest-bar-tip-lbl {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9A9A9A;
  margin-bottom: 10px;
}
.invest-bar-tip-val {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  color: #FFFFFF;
  line-height: 1;
}
.invest-bar-tip-foot {
  margin-top: 8px;
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9A9A9A;
}
/* Collapsible META PAID MEDIA section in dashboard */
.meta-section { margin-bottom: 20px; }
.meta-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0 0 12px 0;
  margin: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.meta-section-head .sl { flex: 1; }
.meta-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9A9A9A;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.meta-section-head:hover .meta-section-toggle {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
}
.meta-section-toggle svg { transition: transform 0.25s ease; }
.meta-section.is-collapsed .meta-section-toggle svg { transform: rotate(-90deg); }
.meta-section-body {
  max-height: 2000px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.2s ease;
}
.meta-section.is-collapsed .meta-section-body {
  max-height: 0;
  opacity: 0;
}

.invest-bar-tip-meta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C9C9C9;
}

/* PDF / refresh button group in date picker bar */
.dp-bar-right {
  display: flex;
  gap: 8px;
  align-items: center;
}
/* ===== UNIFIED PDF EXPORT BUTTON (gold glass, dark theme) ===== */
.btn-pdf,
.dp-pdf {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  height: 34px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #C9C9C9;
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-pdf::before,
.dp-pdf::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 62%,
    transparent 100%);
  transform: translateX(-110%);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.btn-pdf:hover,
.dp-pdf:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
}
.btn-pdf:hover::before,
.dp-pdf:hover::before {
  transform: translateX(110%);
}
.btn-pdf:active,
.dp-pdf:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-pdf:focus-visible,
.dp-pdf:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}
.btn-pdf svg,
.dp-pdf svg {
  flex-shrink: 0;
  stroke-width: 2.2;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2));
}

/* ===== PAGE-LEVEL MONTH PICKER (Dashboard, Social) ===== */
.page-month-picker {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.pmp-btn {
  padding: 5px 12px;
  border-radius: 6px;
  font: 600 10px 'Inter', sans-serif;
  letter-spacing: .8px;
  cursor: pointer;
  border: 1px solid var(--b1);
  background: transparent;
  color: var(--t4);
  transition: .15s;
}
.pmp-btn.on {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.pmp-btn:hover:not(.on):not(.disabled) {
  color: var(--t2);
  border-color: var(--b2);
}
.pmp-btn.disabled {
  opacity: .3;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== BUDGET MODAL ===== */
.bm-open-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: rgba(217, 164, 65,.08); border: 1px solid rgba(217, 164, 65,.25);
  color: var(--gold); border-radius: 8px;
  font: 600 11px 'Inter', sans-serif; cursor: pointer; transition: .15s;
}
.bm-open-btn:hover { background: rgba(217, 164, 65,.15); }

.bm-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.bm-dialog {
  background: #0F172A; border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; width: 100%; max-width: 680px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.bm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font: 700 14px 'Inter', sans-serif; color: var(--t1); letter-spacing: .4px;
}
.bm-close {
  background: none; border: none; color: var(--t4);
  font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1;
  transition: color .15s;
}
.bm-close:hover { color: var(--t1); }
.bm-body { padding: 20px 24px 24px; }
.bm-section-lbl {
  font: 600 10px 'Inter', sans-serif; letter-spacing: 1px;
  color: var(--t4); text-transform: uppercase; margin-bottom: 10px;
}
.bm-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid rgba(255,255,255,.06); }
.bm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bm-table thead th {
  padding: 10px 12px; text-align: left;
  font: 600 10px 'Inter', sans-serif; letter-spacing: .8px;
  color: var(--t4); background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.bm-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); }
.bm-table tbody tr:last-child { border-bottom: none; }
.bm-row { cursor: pointer; transition: background .12s; }
.bm-row:hover { background: rgba(255,255,255,.03); }
.bm-table td { padding: 11px 12px; color: var(--t2); vertical-align: middle; }
.bm-edit-btn {
  font: 600 10px 'Inter', sans-serif; letter-spacing: .5px;
  color: var(--gold); cursor: pointer; padding: 3px 8px;
  border: 1px solid rgba(217, 164, 65,.2); border-radius: 5px;
  transition: background .12s;
}
.bm-row:hover .bm-edit-btn { background: rgba(217, 164, 65,.08); }
.bm-del-btn {
  font: 600 10px 'Inter', sans-serif; letter-spacing: .5px;
  color: #FF5A5A; cursor: pointer; padding: 3px 8px; margin-left: 6px;
  border: 1px solid rgba(255, 90, 90,.2); border-radius: 5px;
  transition: background .12s;
}
.bm-row:hover .bm-del-btn { background: rgba(255, 90, 90,.08); }

.bm-form { margin-top: 4px; }
.bm-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;
}
@media (max-width: 520px) { .bm-form-row { grid-template-columns: 1fr; } }
.bm-form label {
  display: flex; flex-direction: column; gap: 5px;
  font: 600 10px 'Inter', sans-serif; letter-spacing: .6px; color: var(--t4);
}
.bm-form input {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 9px 12px;
  color: var(--t1); font: 500 13px 'Inter', sans-serif;
  transition: border-color .15s;
}
.bm-form input:focus { outline: none; border-color: rgba(217, 164, 65,.4); }
.bm-form-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 4px;
}
.bm-status { font: 500 12px 'Inter', sans-serif; color: var(--t4); }
.bm-status.ok { color: #4CD17A; }
.bm-status.err { color: #FF5A5A; }
.bm-save-btn {
  padding: 9px 20px; background: var(--gold); border: none;
  border-radius: 8px; color: #0B1120;
  font: 700 12px 'Inter', sans-serif; cursor: pointer;
  transition: opacity .15s;
}
.bm-save-btn:hover { opacity: .88; }

/* ===== PROPUESTAS CRM HUB (SPA page, scoped .pp-*) ===== */
.pp-page { padding: 0; }

.pp-strip {
  padding: 20px 24px;
  border: 1px solid var(--hair);
  background: var(--bg-elev);
  margin: 0 0 28px;
}
.pp-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pp-s { position: relative; }
.pp-s:not(:first-child) { border-left: 1px solid var(--hair); padding-left: 24px; }
.pp-s .pp-n {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 40px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.pp-s .pp-n.live { color: var(--color-brand); }
.pp-s .pp-l {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--t4);
  text-transform: uppercase;
  font-weight: 600;
}
@media (max-width: 900px) {
  .pp-strip-grid { grid-template-columns: repeat(2, 1fr); }
  .pp-s:nth-child(3) { border-left: 0; padding-left: 0; }
}

.pp-proposals { padding: 8px 0 60px; }
.pp-filters-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}
.pp-filter-chips {
  display: inline-flex;
  gap: 0;
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  padding: 4px;
}
.pp-filter-chips button {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--t3);
  padding: 7px 14px;
  font-weight: 600;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.pp-filter-chips button.active { background: var(--color-brand); color: #000; }
.pp-filter-chips button:not(.active):hover { color: var(--ink); }

.pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
.pp-empty {
  grid-column: 1 / -1;
  padding: 56px 0;
  text-align: center;
  color: var(--t3);
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pp-card {
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.pp-card:hover {
  transform: translateY(-3px);
  border-color: rgba(217, 164, 65, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(217, 164, 65, 0.35);
}
.pp-thumb {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #0A0A0A;
}
.pp-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}
.pp-card:hover .pp-img { transform: scale(1.05); }
.pp-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 55%, rgba(10, 10, 10, 0.85) 100%);
}
.pp-badge {
  position: absolute;
  top: 12px; right: 12px;
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  padding: 4px 10px;
  text-transform: uppercase;
  font-weight: 800;
  z-index: 3;
}
.pp-badge.live  { background: var(--color-brand); color: #000; }
.pp-badge.draft { background: rgba(255, 255, 255, 0.1); color: var(--t3); border: 1px solid var(--hair-strong); }
.pp-badge.arch  { background: rgba(255, 255, 255, 0.06); color: var(--t4); border: 1px solid var(--hair); }
.pp-npro {
  position: absolute;
  bottom: 12px; left: 14px;
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--t3);
  text-transform: uppercase;
  z-index: 3;
}
.pp-body { padding: 18px 20px 14px; display: flex; flex-direction: column; flex: 1; }
.pp-title {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--ink);
}
.pp-title .pp-acc { color: var(--color-brand); }
.pp-desc {
  font-size: 13px;
  color: var(--t2);
  line-height: 1.55;
  margin: 0 0 14px;
}
.pp-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.pp-meta .pp-k {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--t4);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 3px;
}
.pp-meta .pp-v {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink);
  font-weight: 600;
}
.pp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
  flex: 1;
}
.pp-tags span {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  background: rgba(217, 164, 65, 0.06);
  border: 1px solid rgba(217, 164, 65, 0.35);
  color: #F5CEED;
  font-weight: 600;
  text-transform: uppercase;
}
.pp-cta {
  padding: 10px 0 0;
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand);
  font-weight: 700;
}
.pp-cta svg { width: 12px; height: 12px; transition: transform 0.25s ease; }
.pp-card:hover .pp-cta svg { transform: translate(3px, -3px); }

/* ===== PROPUESTAS STATUS BADGES — additional states ===== */
.pp-badge.review {
  background: rgba(217, 164, 65,.1);
  color: var(--color-brand);
  border: 1px solid rgba(217, 164, 65,.35);
}
.pp-badge.approved {
  background: rgba(76, 209, 122,.1);
  color: #4CD17A;
  border: 1px solid rgba(76, 209, 122,.35);
}
.pp-badge.in-progress {
  background: rgba(217, 164, 65,.1);
  color: #F5CEED;
  border: 1px solid rgba(217, 164, 65,.25);
}
.pp-badge-edit {
  cursor: pointer;
  user-select: none;
  transition: filter 0.15s ease, background 0.15s ease;
}
.pp-badge-edit:hover { filter: brightness(1.2); }
.pp-badge-caret {
  opacity: 0.7;
  font-size: 9px;
  margin-left: 2px;
}

/* ===== STATUS DROPDOWN MENU ===== */
.pp-status-menu {
  min-width: 180px;
  background: rgba(12, 12, 12, 0.85);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 0 !important;
}
.pp-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  color: var(--t2);
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease, background 0.15s ease;
  border-radius: 0 !important;
}
.pp-status-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--ink); }
.pp-status-item.active { color: var(--color-brand); background: rgba(217, 164, 65, 0.06); }
.pp-status-item.live     { color: var(--color-brand); }
.pp-status-item.draft    { color: var(--t3); }
.pp-status-item.review   { color: var(--color-brand); }
.pp-status-item.approved { color: #4CD17A; }
.pp-status-item.in-progress { color: #F5CEED; }
.pp-status-item.arch     { color: var(--t4); }

/* ====================== BUTTON SYSTEM ======================
   Centralized button classes — replaces ad-hoc inline styles
   scattered across admin.js / paid.js / etc. Variants:
     .btn          base (small ghost)
     .btn-primary  filled gold (CTAs, "Save", "Run", "Confirm")
     .btn-ghost    outlined neutral (secondary actions)
     .btn-danger   outlined red (destructive: delete, force-logout)
     .btn-warn     outlined amber (caution: reset, force)
   Sizes:
     .btn-sm       compact (default in dense tables)
     .btn-md       comfortable (forms, default standalone)
     .btn-lg       prominent (page-level CTA)
   Modifiers:
     .btn-block    full width
   Disabled state honoured via [disabled] attribute. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--hair, rgba(255,255,255,0.08));
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 6px;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
  text-transform: none;
  text-decoration: none;
  line-height: 1.2;
}
.btn:hover { border-color: var(--gold, #D9A441); color: var(--gold, #D9A441); }
.btn:active { transform: translateY(0.5px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { border-color: var(--hair); color: var(--t3); }

.btn-md { padding: 8px 14px; font-size: 12px; }
.btn-lg { padding: 11px 22px; font-size: 13px; letter-spacing: 0.05em; border-radius: 8px; }
.btn-block { display: flex; width: 100%; }

.btn-primary {
  border-color: var(--gold, #D9A441);
  background: var(--gold, #D9A441);
  color: #111;
  font-weight: 800;
}
.btn-primary:hover { background: #E0B85A; border-color: #E0B85A; color: #111; }
.btn-primary[disabled] { background: rgba(217, 164, 65,0.4); }

.btn-ghost {
  border-color: var(--b2, rgba(255,255,255,0.18));
  color: var(--t2);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn-danger { border-color: #FCA5A5; color: #FCA5A5; }
.btn-danger:hover { border-color: #F87171; color: #F87171; background: rgba(252,165,165,0.06); }

.btn-warn { border-color: #FBBF24; color: #FBBF24; }
.btn-warn:hover { background: rgba(251,191,36,0.08); }

/* Caps variant — for table-row actions where we want the SHOUTY look */
.btn-caps { letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; font-size: 10px; }

/* Lightweight horizontal-scroll wrapper for any wide table. Adds nothing
   visually on desktop; below 768px enables horizontal swipe and hints
   the right edge with a subtle gradient so users know there's more. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-x > table { min-width: 100%; }
@media (max-width: 768px) {
  .scroll-x { position: relative; padding-bottom: 4px; }
  .scroll-x::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(10,10,15,0.7), transparent);
  }
}

/* Two-column layout for the games / providers tables on the dashboard. */
.row.r2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  .row.r2 { grid-template-columns: 1fr; }
}

/* RTP drift dot in the games table: green within tolerance, yellow drifting,
   red worth investigating, hollow when we have no theoretical reference for
   that game yet. */
.rtp-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}
.rtp-green   { background: var(--green); }
.rtp-yellow  { background: #E0B341; }
.rtp-red     { background: var(--red); }
.rtp-unknown { background: transparent; border: 1px solid var(--t5); }

/* ===== Today's pulse strip (top of the dashboard shell) ===== */
/* The strip lives outside #app-content (the router wipes that node), so it
   has to reproduce that column by hand or it runs edge to edge while every
   block under it sits inset. Mirrors the dashboard variant: no max-width,
   40px side padding, and the top padding of the content column. */
.today-strip {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 28px 40px 0;
  padding: 12px 18px;
  background: var(--s1);
  border: 1px solid var(--b1);
  border-left: 2px solid var(--gold);
  border-radius: var(--r);
}
/* Side margins are set at runtime by _alignTodayStrip, which copies the
   padding of #app-content: pages do not agree on it (40px vs 48px) and some
   cap the column while others do not. These are only the fallback for the
   instant before the first measurement. */
/* The content column keeps its own top padding, so the strip only needs the
   gap between itself and the period selector. */
body[data-page="dashboard"] #app-content { padding-top: 14px; }
.today-tag {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--gold);
}
.today-cell {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 0;
  /* Grid child: without this it refuses to shrink and pushes the column out. */
  min-width: 0;
}
/* --t3, not --t4: at 9.5px this is the smallest type on the page, and --t4
   (#6D6D6D on the #141414 surface) only reaches 3.56:1, under the 4.5:1 that
   text this size needs. --t3 measures 6.55:1 dark and 5.33:1 light. */
.today-k {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--t3);
  white-space: nowrap;
}
.today-v {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The delta travels with its number: it never shrinks, never breaks in two,
   and its digits keep the same width as the value above it.
   Three classes, not two: layout.css carries
   `body[data-page="dashboard"] .p { font-size: 10.5px; padding: 3px 10px }`,
   which at (0,2,1) outranks a plain `.today-cell .p` at (0,2,0). Left at two
   classes the chip silently rendered 44x22 instead of 30x14 here, which is
   what pushed the delta under its number and split the row into two baselines.
   Sizing it here also makes the strip identical on all seven pages that show
   it: that page-scoped rule covers dashboard and paid but not crecimiento,
   vips or budget, so the chip used to change size as you navigated. */
.today-strip .today-cell .p {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  padding: 2px 7px;
  line-height: 1.4;
}
/* --t5 (#444444) on this surface is 1.89:1, which at 9px is not readable at
   all: the footnote was there but nobody could tell what it said. --t4 lifts
   it to 3.56:1 and keeps it subordinate to the metric labels. Still under the
   4.5:1 AA line, so move it to --t3 (6.55:1) if this has to be compliant
   rather than merely legible. */
.today-note {
  margin-left: auto;
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t4);
}
/* The desktop line is one row of tag + five metrics + note. Measured, it only
   fits from 1400px up: at 1366px the note wraps to a second row (49px -> 84px)
   and at 1101px a metric orphans onto a row of its own (93px, ragged). So the
   grid takes over below 1400, not below 1101.
   flex-wrap used to staircase the cells into ragged rows that lined up with
   nothing: at 390px the five cells landed on three rows at four different left
   edges. Grid instead, so every metric owns a real column and the labels and
   the numbers line up across rows. The tag takes the first slot, which is
   where it already sits on desktop.
   This keeps working with _alignTodayStrip: that only writes margins on the
   strip itself, never on its children. */
@media (max-width: 1399px) {
  .today-strip {
    display: grid;
    grid-template-columns: auto repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: 8px 16px;
    padding: 10px 14px;
  }
  .today-tag { grid-column: 1; align-self: center; }
  /* Label above the number: side by side, the pair no longer fits a column. */
  .today-k { flex: 0 0 100%; margin-bottom: 2px; }
  .today-strip .today-cell .p { font-size: 9px; padding: 1px 5px; line-height: 1.3; }
  /* Its own row, right aligned: it is a footnote for the whole strip, and on
     one line with the metrics it would eat a column. */
  .today-note {
    display: block;
    grid-column: 1 / -1;
    justify-self: end;
    margin-left: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
/* Below 960px the five columns fall under ~110px and the number stops sharing
   a line with its delta. The tightest point is 769-830px, where the 240px
   sidebar has already appeared but the viewport is not yet wide enough to pay
   for it: 79px columns at 800px. Tightening the gutter, the value and the chip
   keeps the pair on one line everywhere else in this band. The label shrinks
   too, because an English "REGISTRATIONS" does not fit a 90px column at
   9.5px. */
@media (max-width: 959px) {
  .today-strip { gap: 8px 10px; }
  .today-k { font-size: 9px; letter-spacing: .1em; }
  .today-v { font-size: 14px; }
  .today-cell { column-gap: 6px; }
  .today-strip .today-cell .p { padding: 1px 4px; }
}
@media (max-width: 768px) {
  /* Fallback for the frame before _alignTodayStrip measures the column. */
  .today-strip { margin: 16px 16px 0; }
}
/* Phones: three columns. Tag plus five metrics is exactly six slots, so the
   grid closes with two full rows and no gaps. */
@media (max-width: 600px) {
  .today-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 11px 12px;
  }
  .today-note { display: none; }
}
/* Narrow phones: a third of the row no longer holds "€124,530 -60%", so drop
   to two columns instead of letting the delta wrap under the number. The
   column is wide again here, so the label goes back to full size. */
@media (max-width: 380px) {
  .today-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
  }
  .today-k { font-size: 9.5px; letter-spacing: .14em; }
  .today-v { font-size: 15px; }
}

/* ===== Revenue concentration ===== */
.conc-wrap { padding-bottom: 16px; }
.conc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 8px 20px 4px;
}
.conc-band-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.conc-band-k {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--t2);
}
/* The bar is the point: three numbers in a row do not show shape, three
   bars do. */
.conc-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.05);
  overflow: hidden;
}
.conc-bar span {
  display: block;
  height: 100%;
  background: var(--gold);
  border-radius: 3px;
}
.conc-band-sub {
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--t4);
  font-variant-numeric: tabular-nums;
}
.conc-foot {
  padding: 12px 20px 0;
  font-size: 10.5px;
  color: var(--t4);
}
@media (max-width: 760px) {
  .conc-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Coming soon ──────────────────────────────────────────────────────────
   The panel a page shows while its data source is not connected. Uses the
   portal's own surfaces and hairlines rather than inventing a look, so it
   reads as part of the product and not as an error page. */
.cs-wrap { display: flex; justify-content: center; padding: 56px 24px; }
.cs-card {
  max-width: 620px; width: 100%;
  background: var(--s1); border: 1px solid var(--b1); border-radius: var(--r);
  padding: 36px 34px;
}
.cs-eyebrow {
  font-family: 'Noto Sans Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: .18em; color: var(--gold); margin-bottom: 14px;
}
.cs-title {
  margin: 0 0 12px; font-size: 21px; font-weight: 800;
  letter-spacing: -.02em; color: var(--t1);
}
.cs-body { margin: 0 0 22px; font-size: 13.5px; line-height: 1.6; color: var(--t2); }
.cs-needs {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; border-left: 2px solid var(--gold);
  background: rgba(255, 255, 255, .02);
}
.cs-needs-label {
  font-family: 'Noto Sans Mono', monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--t3);
}
.cs-needs-text { font-size: 13px; line-height: 1.55; color: var(--t1); }
.cs-note {
  margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--hair);
  font-size: 12.5px; line-height: 1.6; color: var(--t3);
}
@media (max-width: 720px) {
  .cs-wrap { padding: 28px 14px; }
  .cs-card { padding: 26px 20px; }
}