/* ===== Direction P: black, white, glass and metal =====
   The iGamingX console system (approved by Javi 28/09/2026) applied to the
   GameWorld portal. Same structure and components: only what they are made
   of changes. Loaded LAST and scoped under html.p so it can be switched off
   by removing one class.

   Rules carried over from P (see igamingx-auditoria-2026-09/direccion/P):
   - graphite planes that lighten as they come closer; white for figures
   - glass only on what floats (topbar, sidebar, menus, modals)
   - colour only with meaning: green = good / money in, red = bad / money out,
     amber = watch. No decorative gold, violet or blue
   - one sans (Host Grotesk) for everything, one mono (Reddit Mono) only for
     what a machine writes (clock, ids). No caps, no tracked micro-labels
   - three weights (400, 560, 650), three radii (6, 12, capsule)
   ============================================================== */

html.p {
  /* planes */
  --p-well:        #030304;
  --p-bg:          #080809;
  --p-surface:     #0D0D0F;
  --p-card:        #151618;
  --p-row-sel:     #1C1D1F;
  --p-raised:      #222326;
  --p-row-line:    #1D1E20;
  --p-border:      #232426;
  --p-border-hi:   #333538;
  --p-line-strong: #7E8085;
  --p-plate:       #1B1C1E;

  /* inks */
  --p-white:   #FFFFFF;
  --p-heading: #F6F7F8;
  --p-text:    #E5E6E8;
  --p-text-2:  #C7C9CC;
  --p-muted:   #AAACB1;
  --p-faint:   #919499;

  /* touch + meaning */
  --p-platinum:      #EAEBED;
  --p-platinum-fill: #EFF0F1;
  --p-platinum-hov:  #D3D4D7;
  --p-success: #69D98D;
  --p-warning: #FFA55B;
  --p-danger:  #FF6759;
  --p-info:    #ACB9C5;
  --p-silver:  #BEC5CC;
  --p-steel:   #939CA6;
  --p-titan:   #72747B;
  --p-danger-tint:  #3A2625;
  --p-success-tint: #1D2E23;
  --p-warning-tint: #382B1F;

  --p-sans: 'Host Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --p-mono: 'Reddit Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --p-shadow-edge:   inset 0 0.5px 0 rgb(255 255 255 / .06);
  --p-shadow-float:  inset 0 0.5px 0 rgb(255 255 255 / .12), 0 24px 56px -16px rgb(0 0 0 / .8);
  --p-shadow-object: inset 0 0.5px 0 rgb(255 255 255 / .12), 0 1px 2px rgb(0 0 0 / .6), 0 16px 40px -18px rgb(0 0 0 / .9);

  --p-r-ctl: 6px;
  --p-r: 12px;

  /* Remap the portal's own tokens so every legacy rule follows */
  --bg: var(--p-bg);
  --bg-elev: var(--p-card);
  --bg-deep: var(--p-well);
  --bg-panel: var(--p-raised);
  --s1: var(--p-card);
  --s2: var(--p-raised);
  --s3: var(--p-raised);
  --ink: var(--p-heading);
  --t1: var(--p-heading);
  --t2: var(--p-text-2);
  --t3: var(--p-muted);
  --t4: var(--p-faint);
  --t5: var(--p-titan);
  --hair: var(--p-border);
  --hair-strong: var(--p-border-hi);
  --b1: var(--p-border);
  --b2: var(--p-border-hi);

  /* the money number is white, not gold */
  --color-brand: var(--p-platinum);
  --color-brand-deep: var(--p-platinum-hov);
  --accent: var(--p-platinum);
  --accent-soft: rgb(234 235 237 / .08);
  --gold: var(--p-heading);
  --gg: rgb(234 235 237 / .06);

  /* analytic colours keep their original hues (Javi 16/10/2026):
     only the gold of GGR / NGR turned white, above */

  --r: var(--p-r);
  --r-s: var(--p-r-ctl);
  --r-l: var(--p-r);

  --shadow-card: var(--p-shadow-edge);
  --shadow-card-hover: var(--p-shadow-edge);

  --sidebar-w: 248px;
  --sidebar-w-expanded: 248px;
  --topbar-h: 60px;

  background: var(--p-bg);
}

/* The legacy stylesheet already uses `.p` for its delta pills (components.css:
   padding 2px 7px, 10px type, a radius, a border). With the switch class on
   <html> those rules styled the whole page: a 7 px band at each side (the line
   Javi saw on the phone, 17/10) and a 10 px root font size. Undo them here. */
html.p {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 100% !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  color: var(--p-text) !important;
  white-space: normal !important;
}

/* >>> generated by scripts/build-p-gold-off.py: gold -> platinum (do not edit by hand) */
/* command-palette.css */ html.p .cp-modal { box-shadow: 0 20px 60px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(234, 235, 237, .06),
    inset 0 1px 0 rgba(255, 255, 255, .04) !important; }
/* command-palette.css */ html.p .cp-item:hover, html.p .cp-item.active { background: linear-gradient(90deg, rgba(234, 235, 237, .08) 0%, rgba(234, 235, 237, 0) 100%) !important; }
/* components.css */ html.p table tr.hl td { background: rgba(234, 235, 237,.03) !important; }
/* components.css */ html.p .partial-chip { border: 1px solid rgba(234, 235, 237, .35) !important; }
/* components.css */ html.p .dp-trigger:hover { border-color: rgba(234, 235, 237, 0.3) !important; }
/* components.css */ html.p .dp-trigger svg:first-child { color: var(--gold, #EAEBED) !important; }
/* components.css */ html.p .dp-refresh:hover { color: var(--gold, #EAEBED) !important; border-color: rgba(234, 235, 237, 0.3) !important; background: rgba(234, 235, 237, 0.05) !important; }
/* components.css */ html.p .is-refreshing::after { background: linear-gradient(90deg, transparent 0%, rgba(234, 235, 237,0.04) 50%, transparent 100%) !important; }
/* components.css */ html.p .dp-preset:hover { background: rgba(234, 235, 237, 0.08) !important; border-color: rgba(234, 235, 237, 0.3) !important; }
/* components.css */ html.p .dp-preset.on { background: linear-gradient(135deg, rgba(234, 235, 237, 0.15), rgba(234, 235, 237, 0.05)) !important; border-color: var(--gold, #EAEBED) !important; color: var(--gold, #EAEBED) !important; }
/* components.css */ html.p .dp-custom-row input[type="date"]:focus { border-color: var(--gold, #EAEBED) !important; }
/* components.css */ html.p .dp-apply { background: linear-gradient(135deg, var(--gold, #EAEBED), #D3D4D7) !important; }
/* components.css */ html.p .dp-apply:hover { box-shadow: 0 4px 12px rgba(234, 235, 237, 0.3) !important; }
/* components.css */ html.p .paid-loading .spinner { border-top-color: var(--gold, #EAEBED) !important; }
/* components.css */ html.p .skel { border: 1px solid rgba(234, 235, 237, 0.08) !important; }
/* components.css */ html.p .skel::after { background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(234, 235, 237, 0.04) 30%,
    rgba(234, 235, 237, 0.22) 50%,
    rgba(234, 235, 237, 0.04) 70%,
    transparent 100%
  ) !important; }
/* components.css */ html.p .skel-card { border: 1px solid rgba(234, 235, 237, 0.1) !important; }
/* components.css */ html.p .skel-card::after { background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(234, 235, 237, 0.04) 30%,
    rgba(234, 235, 237, 0.18) 50%,
    rgba(234, 235, 237, 0.04) 70%,
    transparent 100%
  ) !important; }
/* components.css */ html.p .skel-chart { border: 1px solid rgba(234, 235, 237, 0.1) !important; }
/* components.css */ html.p .skel-chart::after { background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(234, 235, 237, 0.04) 30%,
    rgba(234, 235, 237, 0.18) 50%,
    rgba(234, 235, 237, 0.04) 70%,
    transparent 100%
  ) !important; }
/* components.css */ html.p .budget-input-row { border: 1px solid rgba(234, 235, 237, 0.2) !important; }
/* components.css */ html.p .budget-input-row:focus-within { border-color: var(--gold, #EAEBED) !important; }
/* components.css */ html.p .budget-currency { color: var(--gold, #EAEBED) !important; }
/* components.css */ html.p .bm-open-btn { background: rgba(234, 235, 237,.08) !important; border: 1px solid rgba(234, 235, 237,.25) !important; }
/* components.css */ html.p .bm-open-btn:hover { background: rgba(234, 235, 237,.15) !important; }
/* components.css */ html.p .bm-edit-btn { border: 1px solid rgba(234, 235, 237,.2) !important; }
/* components.css */ html.p .bm-row:hover .bm-edit-btn { background: rgba(234, 235, 237,.08) !important; }
/* components.css */ html.p .bm-form input:focus { border-color: rgba(234, 235, 237,.4) !important; }
/* components.css */ html.p .pp-card:hover { border-color: rgba(234, 235, 237, 0.35) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(234, 235, 237, 0.35) !important; }
/* components.css */ html.p .pp-tags span { background: rgba(234, 235, 237, 0.06) !important; border: 1px solid rgba(234, 235, 237, 0.35) !important; }
/* components.css */ html.p .pp-badge.review { background: rgba(234, 235, 237,.1) !important; border: 1px solid rgba(234, 235, 237,.35) !important; }
/* components.css */ html.p .pp-badge.in-progress { background: rgba(234, 235, 237,.1) !important; border: 1px solid rgba(234, 235, 237,.25) !important; }
/* components.css */ html.p .pp-status-item.active { background: rgba(234, 235, 237, 0.06) !important; }
/* components.css */ html.p .btn:hover { border-color: var(--gold, #EAEBED) !important; color: var(--gold, #EAEBED) !important; }
/* components.css */ html.p .btn-primary { border-color: var(--gold, #EAEBED) !important; background: var(--gold, #EAEBED) !important; }
/* components.css */ html.p .btn-primary[disabled] { background: rgba(234, 235, 237,0.4) !important; }
/* formularios.css */ html.p .fm .fm-goal-b i { background: #EAEBED !important; }
/* formularios.css */ html.p .fm .fm-warn { background: rgba(234, 235, 237, .09) !important; border-left: 2px solid #EAEBED !important; }
/* formularios.css */ html.p .fm .fm-t i { background: #EAEBED !important; }
/* formularios.css */ html.p .fm .fm-quotes p { border-left: 2px solid #EAEBED !important; }
/* formularios.css */ html.p .fm .fm-spend input:focus { border-color: rgba(234, 235, 237, .4) !important; }
/* formularios.css */ html.p .fm .card.gold .val { color: #EAEBED !important; }
/* formularios.css */ html.p .fm .ebtn:hover { border-color: var(--brand, #EAEBED) !important; color: var(--brand, #EAEBED) !important; }
/* formularios.css */ html.p .fm .ebtn.primary { background: var(--brand, #EAEBED) !important; border-color: var(--brand, #EAEBED) !important; }
/* formularios.css */ html.p .fm .sb.draft { background: rgba(234, 235, 237,.12) !important; color: #EAEBED !important; }
/* formularios.css */ html.p .fm .sb.draft .dot { background: #EAEBED !important; }
/* formularios.css */ html.p .fm .fm-part-bar input:focus { border-color: rgba(234, 235, 237, .4) !important; }
/* idle-logout.css */ html.p .ep-idle-banner { border-bottom: 1px solid rgba(234, 235, 237, 0.30) !important; }
/* idle-logout.css */ html.p .ep-idle-icon { color: var(--color-brand, #EAEBED) !important; }
/* idle-logout.css */ html.p .ep-idle-count { color: var(--color-brand, #EAEBED) !important; }
/* idle-logout.css */ html.p .ep-idle-stay { background: var(--color-brand, #EAEBED) !important; }
/* idle-logout.css */ html.p .ep-idle-stay:hover { color: var(--color-brand, #EAEBED) !important; border-color: var(--color-brand, #EAEBED) !important; }
/* idle-logout.css */ html.p .ep-idle-bar-fill { background: var(--color-brand, #EAEBED) !important; }
/* layout.css */ html.p .sidebar-item.active { background: rgba(234, 235, 237, 0.06) !important; }
/* layout.css */ html.p .tb-user-role { color: #EAEBED !important; background: rgba(234, 235, 237, 0.08) !important; border: 1px solid rgba(234, 235, 237, 0.28) !important; }
/* layout.css */ html.p #welcome-splash { background: radial-gradient(ellipse 700px 500px at 50% 42%, rgba(234, 235, 237, 0.10), transparent 62%),
    radial-gradient(ellipse 900px 600px at 50% 55%, rgba(234, 235, 237, 0.06), transparent 70%),
    var(--bg, #020617) !important; }
@media (max-width: 768px) { /* layout.css */ html.p .tw .th::after { color: var(--gold, #EAEBED) !important; } }
@media (max-width: 768px) { /* layout.css */ html.p .sidebar-item.active { background: rgba(234, 235, 237, 0.06) !important; } }
@media (max-width: 768px) { /* layout.css */ html.p .smm-lang button:not(.on):hover { background: rgba(234, 235, 237, 0.08) !important; } }
@media (max-width: 768px) { /* layout.css */ html.p .dp-period-select { border: 1px solid rgba(234, 235, 237, 0.4) !important; } }
@media (max-width: 768px) { /* layout.css */ html.p .dp-period-select:focus { box-shadow: 0 0 0 2px rgba(234, 235, 237,0.2) !important; } }
/* login.css */ html.p .brand-x { color: #EAEBED !important; }
/* login.css */ html.p .kicker-line .kicker { color: #EAEBED !important; }
/* login.css */ html.p .field input:focus { border-bottom-color: #EAEBED !important; background: rgba(234, 235, 237, 0.04) !important; }
/* login.css */ html.p .toggle-visibility:hover { color: #EAEBED !important; }
/* login.css */ html.p .submit-btn { color: #EAEBED !important; border: 1px solid #EAEBED !important; }
/* login.css */ html.p .submit-btn:hover { background: #EAEBED !important; }
/* login.css */ html.p .submit-btn:focus-visible { outline: 2px solid #EAEBED !important; }
@media (max-width: 720px) { /* login.css */ html.p .card-brand::after { color: #EAEBED !important; border: 1px solid rgba(234, 235, 237, 0.35) !important; background: rgba(234, 235, 237, 0.06) !important; } }
/* login.css */ html.p .forgot-link:hover { color: #EAEBED !important; }
/* page-transition.css */ html.p .ep-progress-fill { background: linear-gradient(90deg, #EAEBED 0%, #F5CEED 50%, #EAEBED 100%) !important; box-shadow: 0 0 10px rgba(234, 235, 237, 0.7), 0 0 4px rgba(234, 235, 237, 0.5) !important; }
/* page-transition.css */ html.p .sidebar-item.is-loading::after { border: 1.5px solid rgba(234, 235, 237, 0.3) !important; border-top-color: #EAEBED !important; }
/* polish.css */ html.p .bento-cell::before { background: linear-gradient(90deg, transparent, rgba(234, 235, 237,0.35), transparent) !important; }
/* polish.css */ html.p .bento-cell.feature { background: radial-gradient(circle at 75% 20%, rgba(234, 235, 237,0.18) 0%, transparent 60%),
    linear-gradient(160deg, var(--s1), #181818) !important; border-color: rgba(234, 235, 237,0.18) !important; }
/* polish.css */ html.p .bento-cell.feature::before { background: linear-gradient(90deg, transparent, rgba(234, 235, 237,0.55), transparent) !important; }
/* polish.css */ html.p .bento-cell.feature .bento-val { color: #EAEBED !important; }
/* polish.css */ html.p .ob-spotlight { border: 2px solid rgba(234, 235, 237, .55) !important; }
/* polish.css */ html.p .ob-tip { border: 1px solid rgba(234, 235, 237, .2) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(234, 235, 237, 0.06) !important; }
/* polish.css */ html.p .ob-btn:hover { box-shadow: 0 6px 16px rgba(234, 235, 237, .25) !important; }
/* polish.css */ html.p .toast { border: 1px solid rgba(234, 235, 237, 0.2) !important; }
/* popup-celebrate.css */ html.p .ep-popup-card { background: radial-gradient(ellipse at top, rgba(234, 235, 237, 0.18), transparent 65%),
    linear-gradient(160deg, rgba(234, 235, 237, 0.14), rgba(15, 15, 15, 0.96) 60%) !important; border: 1px solid rgba(234, 235, 237, 0.55) !important; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65),
    0 0 80px rgba(234, 235, 237, 0.22) inset,
    0 0 30px rgba(234, 235, 237, 0.18) !important; }
/* popup-celebrate.css */ html.p .ep-popup-emoji { filter: drop-shadow(0 0 18px rgba(234, 235, 237, 0.8)) !important; }
/* popup-celebrate.css */ html.p .ep-popup-title { color: #EAEBED !important; text-shadow: 0 0 14px rgba(234, 235, 237, 0.4) !important; }
/* popup-celebrate.css */ html.p .ep-popup-value { background: linear-gradient(180deg, #FFE680 0%, #EAEBED 50%, #EAEBED 100%) !important; text-shadow: 0 0 40px rgba(234, 235, 237, 0.35) !important; }
/* popup-celebrate.css */ html.p .ep-popup-cta { background: linear-gradient(180deg, #FFE680, #EAEBED 60%, #EAEBED) !important; box-shadow: 0 6px 22px rgba(234, 235, 237, 0.4) !important; }
/* popup-celebrate.css */ html.p .ep-popup-cta:hover { box-shadow: 0 10px 28px rgba(234, 235, 237, 0.55) !important; }
/* topbar-user.css */ html.p .profile-btn:hover { background: rgba(234, 235, 237,0.05) !important; }
/* topbar-user.css */ html.p .profile-btn--primary:hover { background: rgba(234, 235, 237,0.08) !important; }
/* topbar-user.css */ html.p .profile-avatar-lg { background: linear-gradient(135deg, #EAEBED 0%, #C7C9CC 100%) !important; box-shadow: 0 12px 32px rgba(234, 235, 237, 0.35),
              0 0 0 1px rgba(234, 235, 237, 0.15) !important; }
/* topbar-user.css */ html.p .pg-input:focus { box-shadow: 0 0 0 3px rgba(234, 235, 237, 0.12) !important; }
/* topbar-user.css */ html.p .pg-btn-ghost:hover { background: rgba(234, 235, 237, 0.05) !important; }
/* topbar-user.css */ html.p .tb-status:hover { border-color: rgba(234, 235, 237,0.4) !important; background: rgba(234, 235, 237,0.08) !important; }
/* v2-theme.css */ html.p .dp-pdf .dp-pdf-month { color: var(--color-brand, #EAEBED) !important; }
/* v2-theme.css */ html.p table tr:hover td { background: rgba(234, 235, 237, 0.04) !important; }
/* v2-theme.css */ html.p .ep-loading-dot { box-shadow: 0 0 12px rgba(234, 235, 237, .55) !important; }
/* v2-theme.css */ html.p .ep-loading-bar { background: rgba(234, 235, 237, 0.10) !important; }
/* v2-theme.css */ html.p .ep-loading-bar::after { background: linear-gradient(90deg,
    rgba(234, 235, 237, 0) 0%,
    rgba(234, 235, 237, .85) 50%,
    rgba(164, 137, 255, 0) 100%) !important; }
/* v2-theme.css */ html.p .ep-skel { background: linear-gradient(90deg,
    rgba(255, 255, 255, .04) 0%,
    rgba(234, 235, 237, .14) 50%,
    rgba(255, 255, 255, .04) 100%) !important; }
/* v2-theme.css */ html.p .cre-kick { color: var(--pink, #EAEBED) !important; }
/* v2-theme.css */ html.p .cre-read { border-left: 2px solid var(--pink, #EAEBED) !important; }
/* v2-theme.css */ html.p .cre-rowpost td { background: rgba(234, 235, 237, .035) !important; }
/* v2-theme.css */ html.p .cre-eptag { color: var(--pink, #EAEBED) !important; border: 1px solid rgba(234, 235, 237,.4) !important; }
/* vips-tracker.css */ html.p .vt-kpi:hover { border-color: rgba(234, 235, 237,0.3) !important; }
/* vips-tracker.css */ html.p .vt-preset:hover { background: rgba(234, 235, 237,0.06) !important; }
/* vips-tracker.css */ html.p .vt-triage { background: linear-gradient(90deg, rgba(255, 90, 90,0.04), rgba(234, 235, 237,0.03), rgba(76, 209, 122,0.02)) !important; }
/* vips-tracker.css */ html.p .vt-online-avatar { background: linear-gradient(135deg, rgba(234, 235, 237,0.2), rgba(234, 235, 237,0.2)) !important; }
/* vips-tracker.css */ html.p .vt-online-admin { background: linear-gradient(135deg, rgba(234, 235, 237,0.4), rgba(234, 235, 237,0.15)) !important; }
/* vips-tracker.css */ html.p .vt-feed-mention { background: rgba(234, 235, 237,0.04) !important; }
/* vips-tracker.css */ html.p .vt-feed-mention-tag { background: rgba(234, 235, 237,0.18) !important; }
/* vips-tracker.css */ html.p .vt-pill.is-active { background: rgba(234, 235, 237,0.06) !important; }
/* vips-tracker.css */ html.p .vt-period-notice { border: 1px solid rgba(234, 235, 237,.35) !important; background: rgba(234, 235, 237,.06) !important; }
/* vips-tracker.css */ html.p .vt-row-avatar-fb { background: linear-gradient(135deg, rgba(234, 235, 237,0.2), rgba(234, 235, 237,0.2)) !important; }
/* vips-tracker.css */ html.p .vt-pill-wrap:focus-within { box-shadow: 0 0 0 2px rgba(234, 235, 237,0.18) !important; }
/* vips-tracker.css */ html.p .vt-result-trigger.is-open { box-shadow: 0 0 0 2px rgba(234, 235, 237,0.25) !important; }
/* vips-tracker.css */ html.p .vt-result-option.is-active { background: rgba(234, 235, 237,0.08) !important; }
/* vips-tracker.css */ html.p .vt-chat-avatar { background: linear-gradient(135deg, rgba(234, 235, 237,0.18), rgba(234, 235, 237,0.18)) !important; }
/* vips-tracker.css */ html.p .vt-bubble-team { background: linear-gradient(180deg, rgba(234, 235, 237,0.06), rgba(234, 235, 237,0.01)) !important; border-color: rgba(234, 235, 237,0.22) !important; }
/* vips-tracker.css */ html.p .vt-mention { background: rgba(234, 235, 237,0.14) !important; }
/* vips-tracker.css */ html.p .vt-bell.vt-bell-mention { box-shadow: 0 0 0 0 rgba(234, 235, 237,0.5) !important; }
/* vips-tracker.css */ html.p .vt-disc-row.is-selected { background: rgba(234, 235, 237,0.05) !important; }
/* vips-tracker.css */ html.p .vt-disc-avatar-fb { background: linear-gradient(135deg, rgba(234, 235, 237,0.2), rgba(234, 235, 237,0.2)) !important; }
/* vips-tracker.css */ html.p .vt-disc-track-one:hover { border-color: #EAEBED !important; color: #EAEBED !important; background: rgba(234, 235, 237,0.05) !important; }
/* vips.css */ html.p .vips-top5-card:hover { border-color: rgba(234, 235, 237,0.4) !important; }
/* vips.css */ html.p .vips-top5-avatar-fallback { background: linear-gradient(135deg, rgba(234, 235, 237,0.2), rgba(234, 235, 237,0.2)) !important; }
/* vips.css */ html.p .vips-subnav-btn.is-active { box-shadow: 0 8px 22px rgba(234, 235, 237,0.35) !important; }
/* vips.css */ html.p .vips-subnav-btn.is-active:hover { box-shadow: 0 10px 28px rgba(234, 235, 237,0.45) !important; }
/* vips.css */ html.p .vips-vvp-pro { background: radial-gradient(1200px 320px at 0% 0%, rgba(234, 235, 237,0.08) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.005) 100%) !important; border: 1px solid rgba(234, 235, 237,0.18) !important; }
/* vips.css */ html.p .vvp-pro-scope { background: rgba(234, 235, 237,0.08) !important; border: 1px solid rgba(234, 235, 237,0.30) !important; }
/* vips.css */ html.p .vvp-pro-hero-num { text-shadow: 0 12px 40px rgba(234, 235, 237,0.30) !important; }
/* vips.css */ html.p .vvp-c-vip-fill { box-shadow: 0 0 24px rgba(234, 235, 237,0.45) !important; }
/* vips.css */ html.p .vips-vvp { background: linear-gradient(180deg, rgba(234, 235, 237,0.04) 0%, rgba(234, 235, 237,0.01) 100%) !important; border: 1px solid rgba(234, 235, 237,0.18) !important; }
/* vips.css */ html.p .vips-vvp-share { background: rgba(234, 235, 237,0.06) !important; border-color: rgba(234, 235, 237,0.30) !important; }
/* vips.css */ html.p .vips-sev-pill.is-medium { background: rgba(234, 235, 237,0.16) !important; border: 1px solid rgba(234, 235, 237,0.30) !important; }
/* vips.css */ html.p .vips-filter-pill { background: rgba(234, 235, 237,0.10) !important; border: 1px solid rgba(234, 235, 237,0.30) !important; }
/* vips.css */ html.p .vips-filter-pill:hover { background: rgba(234, 235, 237,0.16) !important; border-color: rgba(234, 235, 237,0.50) !important; }
/* vips.css */ html.p .vips-avatar-fallback { background: linear-gradient(135deg, rgba(234, 235, 237,0.2), rgba(234, 235, 237,0.2)) !important; }
/* vips.css */ html.p .vips-tag-prov { background: rgba(234, 235, 237,0.06) !important; }
/* vips.css */ html.p .vips-spark-card { background: rgba(234, 235, 237,0.02) !important; }
/* vips.css */ html.p .vips-ocs-profile { background: rgba(234, 235, 237,0.03) !important; }
/* vips.css */ html.p .vips-rtp-nudge { background: rgba(234, 235, 237, 0.08) !important; border: 1px solid rgba(234, 235, 237, 0.35) !important; }
/* vips.css */ html.p .vips-track-chip.is-add:hover { border-color: #EAEBED !important; color: #EAEBED !important; }
/* vips.css */ html.p .vips-track-pill.is-active { background: rgba(234, 235, 237,0.06) !important; }
/* js/pages/admin.js */ html.p .admin-tab-pill.active { background: rgba(234, 235, 237,0.1) !important; border-color: rgba(234, 235, 237,0.25) !important; }
/* js/pages/admin.js */ html.p .np-pill.on { background: rgba(234, 235, 237,0.12) !important; }
/* js/pages/paid.js */ html.p .pf-chip.on { background: color-mix(in srgb,var(--pf-c,#EAEBED) 14%,transparent) !important; border-color: var(--pf-c,#EAEBED) !important; }
/* js/pages/paid.js */ html.p .pf-seg-b.on { background: rgba(234, 235, 237,.14) !important; color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .pf-select:focus, html.p .pf-search:focus { border-color: rgba(234, 235, 237,.45) !important; }
/* js/pages/paid.js */ html.p .pf-check input { accent-color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .pc-row.clickable:hover .pc-go-btn { color: #EAEBED !important; border-color: rgba(234, 235, 237,.35) !important; }
/* js/pages/paid.js */ html.p .tl-leg-thumb:hover { outline: 1px solid rgba(234, 235, 237,.5) !important; }
/* js/pages/paid.js */ html.p .ww-name-s { color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .ww-dim-bar span { background: linear-gradient(90deg,rgba(234, 235, 237,.6),rgba(234, 235, 237,.2)) !important; }
/* js/pages/paid.js */ html.p .ww-fat:hover { border-color: rgba(234, 235, 237,.35) !important; }
/* js/pages/paid.js */ html.p .ww-fat-s { color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .ww-caveat { color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .pd-spin { border-top-color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .pd-view-tab.on { background: rgba(234, 235, 237,.14) !important; border-color: rgba(234, 235, 237,.4) !important; color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .pd-viewer-static.playable:hover .pd-big-play { background: rgba(234, 235, 237,.85) !important; }
/* js/pages/paid.js */ html.p .pd-alt-btn:hover { color: #EAEBED !important; border-color: rgba(234, 235, 237,.35) !important; }
/* js/pages/paid.js */ html.p .pd-view-links a:hover { color: #EAEBED !important; border-color: rgba(234, 235, 237,.5) !important; }
/* js/pages/paid.js */ html.p .pd-kpi-gold .pd-kpi-v { color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .pd-rankpos { color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .pd-metric-chip.on { background: rgba(234, 235, 237,.14) !important; border-color: rgba(234, 235, 237,.4) !important; color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .pd-peer.current { border-color: rgba(234, 235, 237,.4) !important; background: rgba(234, 235, 237,.07) !important; }
/* js/pages/paid.js */ html.p .pd-peer.current .pd-peer-bar span { background: linear-gradient(90deg,#EAEBED,rgba(234, 235, 237,.3)) !important; }
/* js/pages/paid.js */ html.p .pd-crea:hover { border-color: rgba(234, 235, 237,.35) !important; }
/* js/pages/paid.js */ html.p .pd-split-bar span { background: linear-gradient(90deg,rgba(234, 235, 237,.55),rgba(234, 235, 237,.15)) !important; }
/* js/pages/paid.js */ html.p .paid-ads-hero--count .pah-big { color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .paid-ads-hero--top .pah-thumb:hover { border-color: rgba(234, 235, 237,.35) !important; }
/* js/pages/paid.js */ html.p .paid-ads-hero--top .pah-top-big { color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .paid-ads-pager .pa-pg:hover:not(:disabled) { background: rgba(234, 235, 237,.08) !important; border-color: rgba(234, 235, 237,.35) !important; }
/* js/pages/paid.js */ html.p .paid-ads-pager .pa-pg.on { background: rgba(234, 235, 237,.15) !important; border-color: #EAEBED !important; color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .pa-status-warn { background: rgba(234, 235, 237,.1) !important; color: #EAEBED !important; border: 1px solid rgba(234, 235, 237,.25) !important; }
/* js/pages/paid.js */ html.p .paid-ad-row .pa-thumb:hover { border-color: rgba(234, 235, 237,.35) !important; }
/* js/pages/paid.js */ html.p .paid-ad-row .pa-name-camp:hover { color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .paid-ad-row .pa-roas-warn strong { color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .paid-ad-row .pa-spent strong { color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .bd-rank-num.gold { background: linear-gradient(135deg,#EAEBED,#F4CE63) !important; box-shadow: 0 0 0 1px rgba(234, 235, 237,.4),0 2px 8px rgba(234, 235, 237,.25) !important; }
/* js/pages/paid.js */ html.p .bd-badge.a { background: rgba(234, 235, 237,.12) !important; color: #EAEBED !important; }
/* js/pages/paid.js */ html.p .bd-clickable:hover td { background: rgba(234, 235, 237,.05) !important; }
/* js/pages/paid.js */ html.p .bd-clickable:hover .bd-label-text { color: #EAEBED !important; }
/* <<< end of generated gold -> platinum */

/* ---------- Type: one sans, no caps, no tracking ---------- */
html.p body,
html.p body *:not(svg):not(path):not(.material-symbols-outlined) {
  font-family: var(--p-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html.p body {
  background: var(--p-bg);
  color: var(--p-text);
  font-synthesis-weight: none;
  font-feature-settings: normal;
}
html.p .tb-clock, html.p .tb-clock *,
html.p code, html.p kbd, html.p .mono,
html.p .brand-tag-ver {
  font-family: var(--p-mono) !important;
}
html.p ::selection { background: var(--p-platinum); color: var(--p-bg); }

/* Ambient light: the glass needs something behind it to frost */
html.p body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 600px at 78% 112%, rgb(255 255 255 / .035), transparent 70%),
    radial-gradient(800px 150px at 55% -36px, rgb(172 185 197 / .09), transparent 70%),
    radial-gradient(360px 120px at 130px 40px, rgb(255 255 255 / .06), transparent 70%);
}
html.p .main-content { position: relative; z-index: 1; }

/* ---------- Topbar: smoked glass ---------- */
html.p .topbar {
  background: rgb(10 10 12 / .62) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid rgb(255 255 255 / .06) !important;
  padding: 0 24px 0 28px;
}
html.p .brand-tag {
  border: 0 !important;
  background: transparent !important;
  color: var(--p-faint) !important;
  font-size: 12px !important;
}
html.p .brand-tag-label { font-weight: 560; color: var(--p-muted); }
html.p .lang-toggle {
  border: 0 !important;
  background: var(--p-surface) !important;
  border-radius: 999px !important;
  padding: 3px !important;
  box-shadow: var(--p-shadow-edge);
}
html.p .lang-toggle button {
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--p-muted) !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  padding: 4px 11px !important;
  min-height: 0 !important;
}
html.p .lang-toggle button.on {
  background: var(--p-raised) !important;
  color: var(--p-heading) !important;
  box-shadow: var(--p-shadow-edge);
}
html.p .tb-clock {
  border: 0 !important;
  background: transparent !important;
  color: var(--p-muted) !important;
  font-size: 12px !important;
}
html.p .tb-clock-time { color: var(--p-text) !important; }

/* ---------- Sidebar: floating glass column ---------- */
@media (min-width: 769px) {
  html.p .sidebar {
    top: calc(var(--topbar-h) + 8px) !important;
    left: 8px !important;
    bottom: 8px !important;
    width: calc(var(--sidebar-w) - 16px) !important;
    border: 0 !important;
    border-radius: var(--p-r) !important;
    background:
      linear-gradient(128deg, rgb(255 255 255 / .07), transparent 64px),
      linear-gradient(180deg, rgb(255 255 255 / .04), transparent 70%),
      rgb(24 25 27 / .34) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: var(--p-shadow-float);
    padding: 8px;
  }
  html.p .main-content { margin-left: var(--sidebar-w); }
}
html.p .sidebar::after {
  /* specular edge: brightest at the top-left, where the light comes from */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(170deg, rgb(255 255 255 / .22), rgb(255 255 255 / .08) 30%, rgb(255 255 255 / .05) 70%, rgb(255 255 255 / .03));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
html.p .sidebar-nav { padding: 4px 0 8px; gap: 2px; }
html.p .sidebar-item,
html.p .sidebar-footer button {
  border: 0 !important;
  border-radius: var(--p-r-ctl) !important;
  padding: 8px 10px !important;
  gap: 10px !important;
  color: var(--p-text-2) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  min-height: 36px;
  background: transparent !important;
}
html.p .sidebar-item .label,
html.p .sidebar-footer .label {
  font-size: 14px !important;
  font-weight: inherit !important;
  color: inherit !important;
}
html.p .sidebar-item::before { content: none !important; display: none !important; }
html.p .sidebar-item .icon { opacity: 1; width: 18px; height: 18px; color: var(--p-muted); }
html.p .sidebar-item .icon svg { width: 18px; height: 18px; stroke-width: 1.6; }
html.p .sidebar-item:hover,
html.p .sidebar-footer button:hover {
  background: rgb(255 255 255 / .05) !important;
  color: var(--p-heading) !important;
}
html.p .sidebar-item.active,
html.p .sidebar-footer button.sb-profile.active {
  background: var(--p-raised) !important;
  color: var(--p-heading) !important;
  font-weight: 560 !important;
  box-shadow: var(--p-shadow-edge);
}
html.p .sidebar-item.active .icon,
html.p .sidebar-item.active .icon svg { color: var(--p-heading) !important; stroke: var(--p-heading) !important; }
html.p .sidebar-footer {
  border-top: 1px solid rgb(255 255 255 / .06) !important;
  padding: 8px 0 0 !important;
}

/* ---------- Content column ---------- */
html.p #app-content { padding-top: 16px; }

/* Section labels: a title, not a caps kicker */
html.p .sl {
  font-size: 22px !important;
  line-height: 26px !important;
  font-weight: 650 !important;
  color: var(--p-heading) !important;
  letter-spacing: -0.01em !important;
  margin: 40px 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
html.p .sl::before, html.p .sl::after { display: none !important; }

/* ---------- Cards: anodised aluminium, light from above ---------- */
html.p .card,
html.p .ch,
html.p .bento-cell,
html.p .dp-bar,
html.p .today-strip,
html.p .meta-section,
html.p .panel,
html.p .vt-card,
html.p .vip-card {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, rgb(255 255 255 / .03), rgb(0 0 0 / .10)), var(--p-card) !important;
  border: 0 !important;
  border-radius: var(--p-r) !important;
  box-shadow: var(--p-shadow-edge) !important;
}
html.p .card::after,
html.p .ch::after,
html.p .bento-cell:not(.feature)::after,
html.p .dp-bar::after,
html.p .meta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(175deg, rgb(255 255 255 / .11), rgb(255 255 255 / .04) 35%, rgb(255 255 255 / .015));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
}
html.p .card:hover, html.p .ch:hover, html.p .bento-cell:hover { transform: none !important; }
html.p .card .bar { display: none !important; }
html.p .row { gap: 16px; }

/* KPI anatomy (App Store Connect): label sentence 12/560, figure 28-36, delta under */
html.p .card .lbl,
html.p .bento-lbl,
html.p .ch-s,
html.p .bento-fact-k,
html.p .dp-bar-label,
html.p .today-k,
html.p .ggr-stats > div:first-child {
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 560 !important;
  color: var(--p-muted) !important;
}
html.p .card .val {
  font-size: 28px !important;
  line-height: 32px !important;
  font-weight: 650 !important;
  color: var(--p-heading) !important;
  letter-spacing: -0.015em !important;
  font-variant-numeric: tabular-nums lining-nums;
}
html.p .card .val.xl {
  font-size: 36px !important;
  line-height: 40px !important;
  letter-spacing: -0.02em !important;
}
html.p .card .sub,
html.p .bento-sub,
html.p .best-day-hint {
  font-size: 12px !important;
  color: var(--p-faint) !important;
}
html.p .ch-t {
  font-size: 17px !important;
  line-height: 22px !important;
  font-weight: 560 !important;
  color: var(--p-heading) !important;
}

/* Deltas: a graphite capsule; the colour lives only in the ink */
html.p .chg,
html.p .bento-delta,
html.p .p,
html.p .today-strip .today-cell .p {
  background: var(--p-raised) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: var(--p-shadow-edge);
  font-weight: 560 !important;
  font-variant-numeric: tabular-nums;
}
html.p .chg { display: inline-flex !important; padding: 2px 8px !important; font-size: 12px !important; margin-top: 6px; }
html.p .chg.up, html.p .bento-delta.up, html.p .p.up, html.p .p.g { color: var(--p-success) !important; }
html.p .chg.dn, html.p .bento-delta.down, html.p .p.dn, html.p .p.r { color: var(--p-danger) !important; }
html.p .chg.neutral { color: var(--p-muted) !important; }

/* ---------- Bento: the hero becomes the titanium plate ---------- */
html.p .bento { gap: 16px !important; }
html.p .bento-val {
  font-size: 36px !important;
  line-height: 40px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  color: var(--p-heading) !important;
  font-variant-numeric: tabular-nums lining-nums;
}
html.p .bento-cell.feature {
  background:
    linear-gradient(112deg, transparent 30%, rgb(255 255 255 / .045) 46%, transparent 60%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .012) 0 1px, transparent 1px 3px, rgb(0 0 0 / .05) 3px 4px),
    linear-gradient(180deg, #232427, var(--p-plate) 40%, #131416) !important;
  box-shadow: var(--p-shadow-object) !important;
}
html.p .bento-cell.feature::after {
  /* chamfer: polished top edge, dark foot */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / .30), rgb(255 255 255 / .08) 20%, rgb(255 255 255 / .04) 70%, rgb(0 0 0 / .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
}
html.p .bento-cell.feature::before { display: none !important; }
html.p .bento-cell.feature .bento-val {
  font-size: 56px !important;
  line-height: 60px !important;
  letter-spacing: -0.025em !important;
  color: var(--p-white) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
html.p .bento-fact-v { color: var(--p-heading) !important; font-weight: 560 !important; }
html.p .bento-facts { border-color: rgb(255 255 255 / .07) !important; }
html.p .partial-chip {
  background: transparent !important;
  border: 0 !important;
  color: var(--p-warning) !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  padding: 0 0 0 10px !important;
  position: relative;
}
html.p .partial-chip::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--p-warning);
}
html.p .bento-spark-axis span { font-size: 12px !important; color: var(--p-faint) !important; }

/* ---------- Today strip ---------- */
html.p .today-strip { padding: 14px 20px !important; gap: 28px !important; }
html.p .today-tag {
  font-size: 17px !important;
  font-weight: 650 !important;
  color: var(--p-heading) !important;
}
html.p .today-v {
  font-size: 22px !important;
  line-height: 26px !important;
  font-weight: 650 !important;
  color: var(--p-heading) !important;
}
html.p .today-note { font-size: 12px !important; color: var(--p-faint) !important; }

/* ---------- Period bar: words, not boxes ---------- */
html.p .dp-bar { padding: 12px 16px !important; }
html.p .dp-preset {
  border: 0 !important;
  background: transparent !important;
  color: var(--p-text-2) !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 6px 12px !important;
  min-height: 32px;
  box-shadow: none !important;
}
html.p .dp-preset:hover { background: rgb(255 255 255 / .05) !important; color: var(--p-heading) !important; }
html.p .dp-preset.on {
  background: var(--p-raised) !important;
  color: var(--p-heading) !important;
  font-weight: 560 !important;
  box-shadow: var(--p-shadow-edge) !important;
}
html.p .dp-preset.is-current::before { background: var(--p-platinum) !important; }
html.p .dp-month-sep { background: rgb(255 255 255 / .08) !important; }

/* Buttons: everything you press is a capsule. Secondary = glass, primary = platinum */
html.p .dp-pdf,
html.p .dp-refresh,
html.p .btn,
html.p button.secondary,
html.p .btn-secondary {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / .06) !important;
  color: var(--p-text) !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  box-shadow: var(--p-shadow-edge) !important;
}
html.p .dp-pdf:hover,
html.p .dp-refresh:hover,
html.p .btn:hover { background: rgb(255 255 255 / .10) !important; color: var(--p-heading) !important; }
html.p .dp-pdf-month { color: var(--p-faint) !important; border: 0 !important; }
html.p .btn-primary,
html.p .btn.primary,
html.p button.primary,
html.p .login-form button[type=submit] {
  background: var(--p-platinum-fill) !important;
  color: var(--p-bg) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 560 !important;
}
html.p .btn-primary:hover,
html.p .btn.primary:hover,
html.p button.primary:hover { background: var(--p-platinum-hov) !important; }

/* Status: dot + word, green only in the dot */
html.p .status-badge,
html.p .status-badge.live {
  background: transparent !important;
  border: 0 !important;
  color: var(--p-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 0 !important;
}
html.p .status-badge .dot { background: var(--p-success) !important; box-shadow: none !important; }

/* Fields: sunk into the well */
html.p input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.p select,
html.p textarea {
  background: var(--p-well) !important;
  border: 1px solid var(--p-border-hi) !important;
  border-radius: var(--p-r-ctl) !important;
  color: var(--p-text) !important;
}
html.p input:focus, html.p select:focus, html.p textarea:focus {
  border-color: var(--p-line-strong) !important;
  outline: none;
}
html.p :focus-visible {
  outline: 2px solid var(--p-platinum) !important;
  outline-offset: 2px;
}

/* Tables */
html.p table th {
  font-size: 12px !important;
  font-weight: 560 !important;
  color: var(--p-faint) !important;
  background: transparent !important;
  border-color: var(--p-row-line) !important;
}
html.p table td { border-color: var(--p-row-line) !important; color: var(--p-text); }
html.p table tbody tr:hover td { background: rgb(255 255 255 / .03) !important; }

/* Meta section header */
html.p .meta-section-head { background: transparent !important; color: var(--p-heading) !important; }
html.p .card.meta-bg { background: linear-gradient(180deg, rgb(255 255 255 / .03), rgb(0 0 0 / .10)), var(--p-card) !important; }

/* Floating glass: menus, popovers, modals */
html.p .modal-content,
html.p .modal .modal-box,
html.p .tb-account-menu,
html.p .cp-panel,
html.p .dropdown-menu,
html.p .echarts-tooltip {
  background: rgb(28 29 31 / .80) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 0 !important;
  border-radius: var(--p-r) !important;
  box-shadow: var(--p-shadow-float) !important;
}

/* Splash */
html.p .display-xl { font-weight: 650 !important; letter-spacing: -0.02em !important; color: var(--p-heading) !important; }
html.p .ws-progress-fill { background: var(--p-platinum) !important; }

/* Scrollbars */
html.p ::-webkit-scrollbar { width: 10px; height: 10px; }
html.p ::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .12); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
html.p ::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 768px) {
  html.p .bento-cell.feature .bento-val { font-size: 36px !important; line-height: 40px !important; }
  html.p .sl { font-size: 20px !important; margin-top: 32px !important; }
  html.p .row { gap: 12px; }
  html.p .sidebar {
    background: rgb(16 16 18 / .86) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.p *, html.p *::before, html.p *::after { transition: none !important; animation: none !important; }
}

/* ---------- Inline colours written by the page scripts ----------
   Sparklines and a few figures carry their colour inline. CSS beats SVG
   presentation attributes, and !important beats inline style. */
html.p [stroke="#D9A441" i] { stroke: var(--p-platinum); }
html.p [stop-color="#D9A441" i] { stop-color: var(--p-platinum); }
html.p [fill="#D9A441" i] { fill: var(--p-platinum); }
html.p [style^="color:#D9A441;" i], html.p [style^="color: #D9A441" i], html.p [style*=";color:#D9A441;" i], html.p [style$=";color:#D9A441" i], html.p [style*="; color:#D9A441" i], html.p [style*="; color: #D9A441" i] { color: var(--p-platinum) !important; }
html.p [style*="background:#D9A441;" i], html.p [style$="background:#D9A441" i], html.p [style*="background: #D9A441;" i], html.p [style*="background-color:#D9A441;" i], html.p [style$="background-color:#D9A441" i] { background-color: var(--p-platinum) !important; }
html.p [style*="border-color:#D9A441" i], html.p [style*="border:1px solid #D9A441" i] { border-color: var(--p-platinum) !important; }

/* ---------- Round 1 fixes (measured on the 1440 capture) ---------- */
html.p .dp-pdf, html.p .dp-refresh { white-space: nowrap !important; min-height: 34px; padding: 0 14px !important; gap: 8px; }
html.p .dp-refresh { padding: 0 !important; width: 34px; justify-content: center; }
html.p .dp-pdf-month {
  font-size: 12px !important;
  line-height: 16px !important;
  padding: 0 0 0 8px !important;
  margin: 0 !important;
  white-space: nowrap;
  border-left: 1px solid rgb(255 255 255 / .10) !important;
}
html.p .today-strip .today-cell .p { font-size: 12px !important; padding: 1px 7px !important; }
/* nothing under 12 px: units, footnotes and the tiny kickers next to figures */
html.p .bento-lbl span:not(.partial-chip),
html.p .bento-fact-v small,
html.p .bento-fact-v span,
html.p .card .sub *,
html.p .bento-sub span { font-size: 12px !important; }
html.p .bento-fact-v span { color: var(--p-muted) !important; font-weight: 400 !important; }
html.p .best-days-title::first-letter { color: var(--p-platinum); }
html.p .best-day-hint { font-style: normal !important; }
html.p .meta-section-head { font-size: 22px !important; font-weight: 650 !important; }

/* ---------- Round 2 ---------- */
/* Today strip as in P's «Hoy»: a title row («Today vs. 14-day average»),
   then one evenly spaced row of figures, label above value. */
@media (min-width: 769px) {
  html.p .today-strip {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 14px !important;
    column-gap: 16px !important;
    align-items: end !important;
  }
  html.p .today-tag { grid-row: 1; grid-column: 1 / -1; }
  html.p .today-note {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: end;
    align-self: center;
    margin: 0 !important;
  }
  html.p .today-cell { column-gap: 8px !important; }
  html.p .today-k { flex-basis: 100%; margin-bottom: 2px; }
}

/* Smaller KPI figures where the cards are narrow (Budget, Paid) */
/* figures shrink with their card, never cut */
html.p .card, html.p .bento-cell:not(.feature) { container-type: inline-size; }
html.p .card .val { white-space: nowrap; }
html.p .bento-cell:not(.feature) .bento-val { font-size: 36px !important; line-height: 40px !important; }
@container (max-width: 260px) {
  html.p .card .val.xl, html.p .bento-cell:not(.feature) .bento-val { font-size: 28px !important; line-height: 32px !important; }
}
@container (max-width: 200px) {
  html.p .card .val, html.p .card .val.xl, html.p .bento-cell:not(.feature) .bento-val { font-size: 22px !important; line-height: 26px !important; }
}

/* Growth: the per-metric cards were tinted with their series colour inline */
html.p #app-content [style*="linear-gradient(160deg"] {
  background: linear-gradient(180deg, rgb(255 255 255 / .03), rgb(0 0 0 / .10)), var(--p-raised) !important;
  border: 0 !important;
  border-radius: var(--p-r) !important;
  box-shadow: var(--p-shadow-edge) !important;
}
html.p .cre-kick { color: var(--p-muted) !important; font-size: 12px !important; font-weight: 560 !important; }
html.p .cre-title { font-weight: 650 !important; letter-spacing: -0.02em !important; color: var(--p-heading) !important; }
html.p .cre-sub { color: var(--p-muted) !important; }
html.p .cre-hero button {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / .06) !important;
  color: var(--p-text) !important;
  box-shadow: var(--p-shadow-edge) !important;
}

/* View header kicker: no brackets, no caps */
html.p .view-header .ep-bracket::before,
html.p .view-header .ep-bracket::after { content: none !important; }
html.p .view-header .ep-bracket { color: var(--p-muted) !important; font-size: 12px !important; font-weight: 560 !important; }
html.p .view-header .kicker-line::before { display: none !important; }
html.p .view-title { color: var(--p-heading) !important; font-size: 17px !important; font-weight: 560 !important; }
html.p .card-eyebrow { color: var(--p-muted) !important; font-size: 12px !important; font-weight: 560 !important; }

/* Segmented controls (range pickers, presets): Grafito, the chosen one lightens */
html.p .vips-range-picker,
html.p .dp-presets {
  background: var(--p-surface) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 3px !important;
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / .06);
}
html.p .vips-range-btn,
html.p .vips-preset,
html.p .vips-tierset-btn {
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--p-text-2) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
html.p .vips-preset { background: rgb(255 255 255 / .05) !important; }
html.p .vips-range-btn.is-active,
html.p .vips-preset.is-active,
html.p .vips-preset.is-on {
  background: var(--p-raised) !important;
  color: var(--p-heading) !important;
  font-weight: 560 !important;
  box-shadow: var(--p-shadow-edge) !important;
}

/* VIP ladder: tiers in metals by rank (top = white), never neon */
html.p .vips-ladder-grid > :nth-child(1) { --tier-c: #FFFFFF !important; }
html.p .vips-ladder-grid > :nth-child(2) { --tier-c: #EAEBED !important; }
html.p .vips-ladder-grid > :nth-child(3) { --tier-c: #BEC5CC !important; }
html.p .vips-ladder-grid > :nth-child(4) { --tier-c: #ACB9C5 !important; }
html.p .vips-ladder-grid > :nth-child(5) { --tier-c: #939CA6 !important; }
html.p .vips-ladder-grid > :nth-child(6) { --tier-c: #85878D !important; }
html.p .vips-ladder-grid > :nth-child(7) { --tier-c: #72747B !important; }
html.p .vips-ladder-step {
  background: linear-gradient(180deg, rgb(255 255 255 / .03), rgb(0 0 0 / .10)), var(--p-card) !important;
  border: 0 !important;
  border-radius: var(--p-r) !important;
  box-shadow: var(--p-shadow-edge) !important;
}
html.p .vips-ladder-step.is-on {
  background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(0 0 0 / .06)), var(--p-raised) !important;
  box-shadow: var(--p-shadow-edge) !important;
  outline: 1px solid rgb(255 255 255 / .14);
  outline-offset: -1px;
}
html.p .vips-ladder-step:hover { transform: none !important; }
html.p .vips-ladder-emoji { filter: grayscale(1) brightness(1.15) contrast(1.05); }
html.p .vips-ladder-name { color: var(--p-heading) !important; font-weight: 560 !important; font-size: 14px !important; }
html.p .vips-ladder-range, html.p .vips-ladder-bet, html.p .vips-ladder-rank { color: var(--p-muted) !important; font-size: 12px !important; }
html.p .vips-ladder-count { font-weight: 650 !important; font-size: 28px !important; }

/* Section switcher: segmented, not big gold tiles */
html.p .vips-subnav-btn {
  border: 0 !important;
  border-radius: var(--p-r) !important;
  background: linear-gradient(180deg, rgb(255 255 255 / .03), rgb(0 0 0 / .10)), var(--p-card) !important;
  box-shadow: var(--p-shadow-edge) !important;
  color: var(--p-text-2) !important;
  font-weight: 400 !important;
  transform: none !important;
}
html.p .vips-subnav-btn.is-active {
  background: var(--p-raised) !important;
  color: var(--p-heading) !important;
  font-weight: 560 !important;
  box-shadow: var(--p-shadow-edge) !important;
  outline: 1px solid rgb(255 255 255 / .14);
  outline-offset: -1px;
}
html.p .vips-subnav-num { display: none !important; }

/* Generic small buttons left in gold (Edit budget, chips) */
html.p .btn-sm, html.p .btn-md, html.p .btn-xs,
html.p [class*="edit-btn"], html.p [class*="-btn"]:not(.vips-subnav-btn):not(.vips-range-btn):not(.vips-ladder-step):not(.vips-tierset-btn) {
  border-color: rgb(255 255 255 / .10) !important;
}
html.p .btn-md, html.p .btn-sm {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / .06) !important;
  color: var(--p-text) !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  box-shadow: var(--p-shadow-edge) !important;
}

/* Warning banner: amber dot + words, no amber box */
html.p [class*="warn"], html.p [class*="alert"] { border-color: rgb(255 165 91 / .28) !important; }

html.p .view-header .kicker-line { gap: 0 !important; }
html.p .view-header .kicker-line > :not(.ep-bracket):empty,
html.p .view-header .kicker-line::after { display: none !important; }
html.p .view-header .vh-left::before { display: none !important; }

/* ---------- Gate: close the system (scale, weights, radii, shadows) ---------- */
/* type scale 12 · 14 · 17 · 22 · 28 · 36 · 56, nothing else */
html.p .brand-tag-label, html.p .brand-tag-ver, html.p .tb-clock-day, html.p .tb-clock-time,
html.p .ws-kicker, html.p th, html.p .th, html.p .conc-band-k, html.p .conc-band-sub, html.p .conc-foot,
html.p .meta-section-toggle-txt, html.p .dash-sources, html.p .dash-sources *, html.p .p,
html.p .bento-fact-v em, html.p .ft-cell, html.p .ft-cell *, html.p .meta-section-body > div:first-child {
  font-size: 12px !important;
}
html.p .bento-fact-v, html.p td, html.p td *, html.p .ob-tip-body { font-size: 14px !important; }
html.p .card .sub div { font-size: 12px !important; }
html.p .ob-tip-title { font-size: 17px !important; }
html.p .ggr-stats > div:nth-child(2), html.p .ggr-stats [style*="font-size:20px"] { font-size: 22px !important; }
/* three weights: 400 read, 560 interface, 650 display */
html.p strong, html.p b, html.p .ws-name, html.p .conc-band-k, html.p .ft-cell strong,
html.p .tb-clock-day, html.p .status-badge span { font-weight: 560 !important; }
html.p .ws-kicker, html.p .brand-tag-ver, html.p .dp-pdf-month, html.p .bento-lbl span:not(.partial-chip),
html.p td, html.p td *:not(strong):not(b), html.p .meta-section-toggle-txt, html.p .card .sub div { font-weight: 400 !important; }
html.p .ggr-stats > div:nth-child(2), html.p .ggr-stats [style*="font-weight:800"],
html.p [style*="font-weight:800"], html.p [style*="font-weight: 800"],
html.p [style*="font-weight:700"], html.p [style*="font-weight: 700"] { font-weight: 650 !important; }
html.p [style*="font-weight:600"], html.p [style*="font-weight: 600"],
html.p [style*="font-weight:500"], html.p [style*="font-weight: 500"] { font-weight: 560 !important; }
/* three radii: 6 control, 12 panel, capsule */
html.p .ws-progress, html.p .conc-bar, html.p .conc-bar *, html.p .partial-chip { border-radius: 999px !important; }
html.p .dash-sources, html.p .ob-tip, html.p .ob-tip.open { border-radius: var(--p-r) !important; }
html.p .ob-btn { border-radius: 999px !important; }
/* status dot: a dot, no glow */
html.p .tb-status-dot { box-shadow: none !important; background: var(--p-success) !important; }
html.p .tb-status { border: 0 !important; background: transparent !important; }
/* onboarding tip = floating glass */
html.p .ob-tip {
  background: rgb(28 29 31 / .80) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 0 !important;
  box-shadow: var(--p-shadow-float) !important;
}
html.p .ob-btn:not(.ghost) { background: var(--p-platinum-fill) !important; color: var(--p-bg) !important; border: 0 !important; }
html.p .ob-btn.ghost { background: rgb(255 255 255 / .06) !important; color: var(--p-text) !important; border: 0 !important; }
/* contrast on the lit card material */
html.p .dp-bar-label { color: var(--p-text-2) !important; }
html.p .today-note { color: var(--p-muted) !important; }
html.p #welcome-splash.off { visibility: hidden !important; }

/* Gate round 2: the last inline sizes, the footer weight, one kind of round */
html.p .bento-cell [style*="font-size:10px"], html.p .bento-cell [style*="font-size:9.5px"],
html.p .ggr-stats span, html.p .ggr-stats strong, html.p .fo-strip-empty { font-size: 12px !important; }
html.p .bento-cell [style*="font-size:10px"], html.p .bento-cell [style*="font-size:9.5px"] { color: var(--p-muted) !important; }
html.p .ft-cell, html.p .ft-cell * { font-weight: 400 !important; }
html.p .ggr-stats [style*="border-radius:2px"],
html.p .tb-status, html.p .tb-status-dot, html.p .dot, html.p .spark-pt, html.p .ob-dot { border-radius: 999px !important; }

/* ---------- Material under the content (as in P) ----------
   The gradient lives in a pseudo-element BELOW the text, so every label
   sits on one flat colour (and is measured as such), while the card still
   reads as anodised metal: 3 % lighter at the head, 10 % darker at the foot. */
html.p .card,
html.p .ch,
html.p .bento-cell:not(.feature),
html.p .dp-bar,
html.p .today-strip,
html.p .meta-section,
html.p .vips-ladder,
html.p .vips-ladder-step,
html.p .vips-subnav-btn {
  background: var(--p-card) !important;
}
html.p .vips-ladder-step.is-on,
html.p .vips-subnav-btn.is-active { background: var(--p-raised) !important; }
html.p .card::before,
html.p .ch::before,
html.p .bento-cell:not(.feature)::before,
html.p .dp-bar::before,
html.p .today-strip::before,
html.p .meta-section::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  border-radius: inherit;
  pointer-events: none;
  opacity: 1 !important;
  z-index: -1;
  background: linear-gradient(180deg, rgb(255 255 255 / .03), transparent 40%, rgb(0 0 0 / .10)) !important;
}
html.p .today-strip, html.p .dp-bar, html.p .meta-section { position: relative; isolation: isolate; }
html.p #app-content [style*="linear-gradient(160deg"] { background: var(--p-raised) !important; }

/* Glass buttons sitting on a card: opaque, so the label is read on one colour */
html.p .dp-bar .dp-pdf, html.p .dp-bar .dp-refresh,
html.p .view-header .btn, html.p .cre-hero button { background: #1F2023 !important; }
html.p .dp-bar .dp-pdf:hover, html.p .dp-bar .dp-refresh:hover { background: #2A2B2E !important; }

/* faint ink only on the window, never on a card */
html.p .card .sub, html.p .bento-sub, html.p .best-day-hint,
html.p .ch [style*="color:var(--t4)"], html.p .ch [style*="color: var(--t4)"],
html.p .card [style*="color:var(--t4)"], html.p .bento-cell [style*="color:var(--t4)"],
html.p .dp-pdf-month { color: var(--p-muted) !important; }
html.p svg circle { border-radius: 0 !important; }

/* Budget hero: one card, no colour wash, no rainbow edge */
html.p #app-content [style*="background:linear-gradient(135deg,rgba(217, 164, 65,.06)"] {
  background: var(--p-card) !important;
  border: 0 !important;
  box-shadow: var(--p-shadow-edge) !important;
}
html.p #app-content [style*="radial-gradient(circle at 90% 0%,rgba(217, 164, 65"],
html.p #app-content [style*="width:3px;background:linear-gradient(180deg"] { display: none !important; }
html.p #app-content [style*="border-radius:999px;padding:6px 14px"] { background: var(--p-raised) !important; border: 0 !important; }
html.p #app-content [style*="border-radius:999px;padding:6px 14px"] [style*="color:var(--t4)"] { color: var(--p-muted) !important; }
html.p .card.meta-bg { background: var(--p-card) !important; }

/* Paid: insight tiles and ranking medals in metal, no coloured glow */
html.p .bd-insight-tile {
  background: var(--p-raised) !important;
  border: 0 !important;
  box-shadow: var(--p-shadow-edge) !important;
}
html.p .bd-rank-num { box-shadow: none !important; border: 0 !important; background: var(--p-raised) !important; color: var(--p-text-2) !important; }
html.p .bd-rank-num.gold { background: var(--p-platinum) !important; color: var(--p-bg) !important; }
html.p .bd-rank-num.silver { background: var(--p-silver) !important; color: var(--p-bg) !important; }
html.p .bd-rank-num.bronze { background: var(--p-titan) !important; color: var(--p-heading) !important; }
@media (max-width: 768px) {
  html.p .sidebar { background: var(--p-surface) !important; }
}

/* VIPs header: the controls wrap instead of pushing CSV off screen */
html.p .view-header .vh-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
html.p .vips-range-btn { padding: 5px 10px !important; }

/* «GGR Neto · Diario» keeps its original gold, total included (Javi 16/10) */
html.p #dc-ggr-stats [style*="background:#D9A441" i],
html.p #dc-ggr-daily [style*="background:#D9A441" i] { background-color: #D9A441 !important; }
html.p #dc-ggr-stats [style*="color:#D9A441" i],
html.p #dc-ggr-daily [style*="color:#D9A441" i] { color: #D9A441 !important; }

/* ---------- Login: Apple sign-in ----------
   One glass card floating in a dark room with two soft lights. Everything is
   centred, the fields are large (17 px, 48 high) and the only filled shape is
   the platinum capsule. Out: gold corners, brackets, rotated side rails. */
html.p #login-overlay {
  background: var(--p-bg) !important;
  padding: 24px 16px !important;
}
html.p #login-overlay .login-orb {
  display: block !important;
  mix-blend-mode: normal;
  filter: blur(120px);
  border-radius: 999px;
}
html.p #login-overlay .login-orb.a {
  width: 720px; height: 520px;
  top: -220px; left: 50%; margin-left: -520px;
  background: rgb(172 185 197);
  opacity: .11;
  animation: p-drift-a 22s ease-in-out infinite alternate;
}
html.p #login-overlay .login-orb.b {
  width: 640px; height: 640px;
  bottom: -320px; right: 50%; margin-right: -560px;
  background: rgb(255 255 255);
  opacity: .05;
  animation: p-drift-b 26s ease-in-out infinite alternate;
}
@keyframes p-drift-a { to { transform: translate(120px, 60px); } }
@keyframes p-drift-b { to { transform: translate(-100px, -50px); } }

html.p #login-overlay .login-stage {
  display: flex !important;
  justify-content: center;
  max-width: none !important;
}
html.p #login-overlay .stage-rail,
html.p #login-overlay .login-card::after,
html.p #login-overlay .bracket-l,
html.p #login-overlay .bracket-r,
html.p #login-overlay .kicker-line { display: none !important; }

html.p #login-overlay .login-card {
  width: min(420px, 100%) !important;
  padding: 40px 36px 28px !important;
  gap: 24px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: rgb(20 21 23 / .55) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  box-shadow: var(--p-shadow-float) !important;
}
/* the gold corner becomes the specular edge of the glass */
html.p #login-overlay .login-card::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(170deg, rgb(255 255 255 / .24), rgb(255 255 255 / .08) 30%, rgb(255 255 255 / .04) 70%, rgb(255 255 255 / .02));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

html.p #login-overlay .card-head {
  align-items: center;
  text-align: center;
  gap: 20px !important;
  padding-bottom: 0 !important;
  border: 0 !important;
}
html.p #login-overlay .card-brand { justify-content: center; gap: 10px !important; }
html.p #login-overlay .brand-logo { height: 18px !important; }
html.p #login-overlay .brand-x { color: var(--p-faint) !important; font-style: normal !important; font-size: 14px !important; }
html.p #login-overlay .brand-chip {
  display: inline-block !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--p-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: left;
}
html.p #login-overlay .card-meta { align-items: center; gap: 16px !important; }
html.p #login-overlay .display-xl {
  font-size: 28px !important;
  line-height: 32px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  text-align: center;
  margin: 0 !important;
}
html.p #login-overlay .login-client-logo { margin: 0 auto !important; height: 28px !important; width: auto !important; }

html.p #login-overlay .login-form { gap: 14px !important; }
html.p #login-overlay .field label {
  font-size: 12px !important;
  font-weight: 560 !important;
  color: var(--p-muted) !important;
  margin-bottom: 6px !important;
}
html.p #login-overlay .field input {
  height: 48px !important;
  padding: 0 16px !important;
  font-size: 17px !important;
  border-radius: 12px !important;
  background: rgb(255 255 255 / .05) !important;
  border: 1px solid rgb(255 255 255 / .10) !important;
  color: var(--p-heading) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
html.p #login-overlay .field input::placeholder { color: var(--p-faint) !important; }
html.p #login-overlay .field input:focus {
  outline: none !important;
  background: rgb(255 255 255 / .07) !important;
  border-color: rgb(255 255 255 / .45) !important;
  box-shadow: 0 0 0 4px rgb(255 255 255 / .08) !important;
}
html.p #login-overlay .password-wrap input { padding-right: 48px !important; }
html.p #login-overlay .toggle-visibility { color: var(--p-muted) !important; }

html.p #login-overlay .submit-btn {
  height: 48px !important;
  margin-top: 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--p-platinum-fill) !important;
  color: var(--p-bg) !important;
  font-size: 17px !important;
  font-weight: 560 !important;
  gap: 8px;
  box-shadow: var(--p-shadow-edge) !important;
  transition: background .15s ease, transform .15s ease;
}
html.p #login-overlay .submit-btn:hover { background: var(--p-white) !important; }
html.p #login-overlay .submit-btn:active { transform: scale(.985); }
html.p #login-overlay .submit-btn .arrow { color: inherit !important; }
html.p #login-overlay .forgot-link {
  align-self: center;
  text-align: center;
  font-size: 14px !important;
  color: var(--p-text-2) !important;
  text-decoration: none !important;
}
html.p #login-overlay .forgot-link:hover { color: var(--p-heading) !important; }
html.p #login-overlay .lerr { color: var(--p-danger) !important; text-align: center; font-size: 14px !important; }
html.p #login-overlay .card-footer {
  justify-content: center;
  text-align: center;
  font-size: 12px !important;
  color: var(--p-faint) !important;
  border: 0 !important;
  padding: 0 !important;
}
/* phone: no card, the screen is the card (as on iPhone sign-in) */
@media (max-width: 768px) {
  html.p #login-overlay .login-card {
    width: 100% !important;
    max-width: 400px !important;
    min-height: 0 !important;
    padding: 0 8px calc(16px + env(safe-area-inset-bottom)) !important;
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none !important;
  }
  html.p #login-overlay .login-card::before { display: none !important; }
  html.p #login-overlay .login-stage { min-height: 0 !important; align-items: center; }
  html.p #login-overlay .card-brand { flex-direction: row !important; }
  html.p #login-overlay .card-brand::after { content: none !important; display: none !important; }
  html.p #login-overlay .brand-x { display: inline !important; }
  html.p #login-overlay .brand-logo { height: 18px !important; }
  html.p #login-overlay .submit-btn { min-height: 50px !important; padding: 0 20px !important; }
}
html.p #login-overlay .linfo {
  background: var(--p-raised) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: var(--p-text) !important;
  font-size: 14px !important;
}
html.p #login-overlay .field-help { font-size: 12px !important; color: var(--p-muted) !important; }

/* ---------- Phone: today strip, topbar and menu ---------- */
@media (max-width: 768px) {
  /* login sits in the middle of the screen */
  html.p #login-overlay { align-items: center !important; }
  html.p #login-overlay .login-stage { min-height: 0 !important; width: 100% !important; margin: auto 0; }

  /* Today: title row, then figures three by three */
  html.p .today-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    row-gap: 16px !important;
    column-gap: 12px !important;
    padding: 16px !important;
  }
  html.p .today-tag { grid-row: 1; grid-column: 1 / -1; font-size: 17px !important; }
  html.p .today-note { grid-row: 1; grid-column: 1 / -1; justify-self: end; align-self: center; margin: 0 !important; }
  html.p .today-cell { flex-wrap: wrap !important; row-gap: 4px !important; min-width: 0; }
  html.p .today-k { flex-basis: 100%; }
  html.p .today-v { font-size: 22px !important; line-height: 26px !important; }

  /* topbar: glass, round menu button */
  html.p .topbar { padding: 0 16px !important; }
  html.p .topbar-burger {
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgb(255 255 255 / .08) !important;
    box-shadow: var(--p-shadow-edge) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }
  html.p .topbar-burger svg, html.p .topbar-burger span { transform: scale(.8); }

  /* menu: a full-screen sheet of smoked glass over the page */
  html.p .sidebar {
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    border-radius: 0 !important;
    padding: 0 0 env(safe-area-inset-bottom) !important;
    background: rgb(8 8 9 / .74) !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    backdrop-filter: blur(32px) saturate(180%);
    box-shadow: none !important;
  }
  html.p .sidebar::after { display: none !important; }
  html.p .sidebar-drawer-head {
    height: 64px !important;
    padding: 0 72px 0 20px !important;
    border: 0 !important;
  }
  html.p .sidebar-close {
    top: 12px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgb(255 255 255 / .08) !important;
    box-shadow: var(--p-shadow-edge);
  }
  html.p .sidebar-nav { padding: 8px 12px 16px !important; gap: 4px !important; }
  html.p .sidebar-item,
  html.p .sidebar-footer button {
    min-height: 52px !important;
    padding: 12px 14px !important;
    gap: 14px !important;
    border-radius: 12px !important;
    font-size: 17px !important;
  }
  html.p .sidebar-item .label, html.p .sidebar-footer .label { font-size: 17px !important; }
  html.p .sidebar-item .icon, html.p .sidebar-item .icon svg { width: 22px !important; height: 22px !important; }
  html.p .sidebar-item.active {
    background: var(--p-raised) !important;
    box-shadow: var(--p-shadow-edge) !important;
  }
  html.p .sidebar-mobile-meta {
    margin: 0 12px 8px !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--p-card) !important;
    box-shadow: var(--p-shadow-edge);
  }
  html.p .sidebar-mobile-meta * { border-color: transparent !important; }
  html.p .smm-label { font-size: 14px !important; color: var(--p-text-2) !important; }
  html.p .smm-lang {
    background: var(--p-surface) !important;
    border-radius: 999px !important;
    padding: 3px !important;
    border: 0 !important;
  }
  html.p .smm-lang button {
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--p-muted) !important;
    font-size: 14px !important;
    min-height: 32px;
    padding: 0 14px !important;
  }
  html.p .smm-lang button.on, html.p .smm-lang button.active, html.p .smm-lang button[aria-pressed="true"] {
    background: var(--p-raised) !important;
    color: var(--p-heading) !important;
    box-shadow: var(--p-shadow-edge);
  }
  html.p .sidebar-footer {
    margin: 0 12px !important;
    padding: 8px 0 calc(12px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgb(255 255 255 / .06) !important;
  }
}
html.p .ob-spotlight { border-color: rgb(255 255 255 / .5) !important; outline-color: rgb(255 255 255 / .5) !important; }

/* ---------- Shell as in iGamingX ----------
   Desktop: the floating glass column runs the full height and carries the
   brand at its head; the glass bar only spans the content to its right.
   The logos stay in the topbar markup and simply sit over the column head. */
@media (min-width: 769px) {
  html.p .topbar {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0 !important;
    padding: 0 24px 0 28px !important;
  }
  html.p .topbar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--sidebar-w);
    right: 0;
    z-index: -1;
    background: rgb(10 10 12 / .62);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border-bottom: 1px solid rgb(255 255 255 / .06);
  }
  html.p .sidebar {
    top: 8px !important;
    padding-top: calc(var(--topbar-h) - 8px) !important;
  }
  html.p .sidebar-nav {
    border-top: 1px solid rgb(255 255 255 / .06);
    padding-top: 8px !important;
  }
  html.p .topbar-left { gap: 10px !important; width: calc(var(--sidebar-w) - 44px); }
  html.p .topbar-left .topbar-logo-link svg { width: 96px !important; }
  html.p .topbar-brand-group { padding-left: 10px !important; border-left: 1px solid rgb(255 255 255 / .14) !important; }
  html.p .topbar-brand-group .brand-tag { display: none !important; }
  html.p .topbar-left .brand-logo-img { height: 13px !important; }
}

/* Phone: menu button on the left, brand next to it (as in iGamingX) */
@media (max-width: 768px) {
  html.p .topbar { position: fixed; }
  html.p .topbar-burger {
    position: absolute !important;
    left: 12px;
    top: 50%;
    margin-top: -20px;
    order: 0 !important;
  }
  html.p .topbar-left { padding-left: 48px !important; }
}

/* Footer: one quiet line, no boxes */
html.p .app-footer {
  border-top: 0 !important;
  margin-top: 48px !important;
  padding: 0 40px 32px !important;
}
html.p .app-footer .ft-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px !important;
}
html.p .app-footer .ft-cell {
  border: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--p-faint) !important;
}
html.p .app-footer .ft-brand, html.p .app-footer .ft-brand strong { color: var(--p-muted) !important; font-weight: 560 !important; gap: 6px !important; }
html.p .app-footer .ft-sq { display: none !important; }
html.p .app-footer .ft-x { color: var(--p-faint) !important; }
html.p .app-footer .ft-src { margin-left: auto; text-align: right; }
@media (max-width: 768px) {
  html.p .app-footer { padding: 0 16px calc(24px + env(safe-area-inset-bottom)) !important; }
  html.p .app-footer .ft-src { margin-left: 0; text-align: left; }
}

/* ---------- Meta paid media on the dashboard ----------
   It was a card holding cards, with a boxy toggle stuck to its edge. Now it
   is a section like any other: title, a capsule to hide it, then the cards. */
html.p .meta-section {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  isolation: auto;
}
html.p .meta-section::before, html.p .meta-section::after { display: none !important; }
html.p .meta-section-head {
  align-items: center !important;
  margin: 40px 0 14px !important;
  padding: 0 !important;
  background: none !important;
}
html.p .meta-section-head .sl { margin: 0 !important; color: var(--p-heading) !important; }
html.p .meta-section-toggle {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / .06) !important;
  box-shadow: var(--p-shadow-edge);
  color: var(--p-text-2) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  gap: 6px !important;
}
html.p .meta-section-head:hover .meta-section-toggle { background: rgb(255 255 255 / .10) !important; color: var(--p-heading) !important; }
html.p .meta-section-body > div:first-child { font-size: 12px !important; color: var(--p-muted) !important; margin: 0 0 12px !important; }
html.p .meta-section-body .row { margin-left: 0 !important; margin-right: 0 !important; }

/* ---------- Best days of the month: a touch of gold ----------
   Records read as records: gold-leaf figures, gold stars, and the card's
   edge of light warmed to gold. Everything else on the page stays metal. */
/* the title's star in gold: the first glyph is painted gold, the words white */
html.p .best-days-title {
  background: linear-gradient(90deg, #E3B95A 0 24px, #F6F7F8 24px) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
}
html.p .best-day-card > span[aria-hidden="true"] {
  color: #E3B95A !important;
  text-shadow: 0 0 12px rgb(227 185 90 / .45);
}
html.p .best-day-card .val,
html.p .best-day-card .val.xl {
  background: linear-gradient(180deg, #F7E3A3 0%, #E4B656 52%, #BF8E35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #E4B656 !important;
  text-shadow: none !important;
}
html.p .best-day-card::after {
  background: linear-gradient(175deg, rgb(240 200 110 / .38), rgb(240 200 110 / .10) 35%, rgb(255 255 255 / .02)) !important;
}

/* tooltips written by the page: the gold of GGR/FTD dots follows its white line */
html.p [_echarts_instance_] div [style*="background:#D9A441" i] { background-color: #EAEBED !important; }
html.p [_echarts_instance_] div [style*="color:#D9A441" i] { color: #EAEBED !important; }

/* Browser autofill: Chrome and Safari paint saved credentials yellow, and they
   do it with !important from the browser stylesheet, which no page rule can
   beat. So the colour is not replaced but covered: a large inset shadow of
   the field's own grey. The login's own "box-shadow: none" carried an id, so
   the cover is repeated here with the same id or it never applies. */
html.p input:-webkit-autofill,
html.p input:-webkit-autofill:hover,
html.p input:-webkit-autofill:focus,
html.p input:-webkit-autofill:active,
html.p #login-overlay .field input:-webkit-autofill,
html.p #login-overlay .field input:-webkit-autofill:hover,
html.p #login-overlay .field input:-webkit-autofill:active {
  -webkit-text-fill-color: #F6F7F8 !important;
  caret-color: #F6F7F8;
  -webkit-box-shadow: 0 0 0 1000px #18191B inset !important;
  box-shadow: 0 0 0 1000px #18191B inset !important;
  transition: background-color 99999s ease-out 0s, color 99999s ease-out 0s;
}
html.p #login-overlay .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #F6F7F8 !important;
  -webkit-box-shadow: 0 0 0 1000px #1B1C1E inset, 0 0 0 4px rgb(255 255 255 / .08) !important;
  box-shadow: 0 0 0 1000px #1B1C1E inset, 0 0 0 4px rgb(255 255 255 / .08) !important;
}
html.p #login-overlay .field input:autofill {
  -webkit-text-fill-color: #F6F7F8 !important;
  box-shadow: 0 0 0 1000px #18191B inset !important;
}

/* «Updated 16/10/2026 18:05»: a clear capsule, as iGamingX shows its sync state:
   green dot, the word, then the time in white. The tick repeated the dot. */
html.p .status-badge,
html.p .status-badge.live,
html.p .status-badge.stale {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 12px 5px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / .06) !important;
  box-shadow: var(--p-shadow-edge);
  color: var(--p-text-2) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 400 !important;
}
html.p .status-badge > span:not(:last-child):not(.dot) { font-weight: 400 !important; color: var(--p-text-2) !important; }
html.p .status-badge > span:last-child {
  color: var(--p-heading) !important;
  font-weight: 560 !important;
  font-variant-numeric: tabular-nums;
  opacity: 1 !important;
}
html.p .status-badge .dot { width: 6px !important; height: 6px !important; flex: none; background: var(--p-success) !important; }
html.p .status-badge.stale .dot { background: var(--p-warning) !important; }
html.p .status-badge.stale .dot::before { display: none; }
html.p .status-badge .p-check { display: none !important; }

/* Login: the rotating word (BACKOFFICE, CRM, CONTROL...) back in its box, as
   before (Javi 16/10): caps, gold hairline, fixed width so it never jumps. */
html.p #login-overlay .brand-chip {
  display: inline-block !important;
  min-width: 112px !important;
  padding: 5px 10px !important;
  border: 1px solid rgb(227 185 90 / .40) !important;
  border-radius: 6px !important;
  background: rgb(227 185 90 / .06) !important;
  color: #E3B95A !important;
  font-family: var(--p-mono) !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  line-height: 16px !important;
}
html.p #login-overlay .brand-x { color: #E3B95A !important; }

/* «Updated» in green (Javi 16/10): the whole capsule speaks «up to date» */
html.p .status-badge.live {
  background: rgb(105 217 141 / .10) !important;
  box-shadow: inset 0 0 0 1px rgb(105 217 141 / .28) !important;
  color: #69D98D !important;
}
html.p .status-badge.live > span:not(.dot),
html.p .status-badge.live > span:last-child { color: #69D98D !important; }
html.p .status-badge.stale {
  background: rgb(255 165 91 / .10) !important;
  box-shadow: inset 0 0 0 1px rgb(255 165 91 / .28) !important;
}
html.p .status-badge.stale > span:not(.dot) { color: var(--p-warning) !important; }

/* ---------- Dashboard hero: same material as every card (Javi 17/10) ----------
   The brushed-titanium lines are gone; the hero keeps only its large white
   figure, so it still leads without a different texture. */
html.p .bento-cell.feature {
  background: var(--p-card) !important;
  box-shadow: var(--p-shadow-edge) !important;
}
html.p .bento-cell.feature::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  border-radius: inherit;
  pointer-events: none;
  opacity: 1 !important;
  z-index: -1;
  background: linear-gradient(180deg, rgb(255 255 255 / .03), transparent 40%, rgb(0 0 0 / .10)) !important;
}
html.p .bento-cell.feature::after {
  background: linear-gradient(175deg, rgb(255 255 255 / .11), rgb(255 255 255 / .04) 35%, rgb(255 255 255 / .015)) !important;
}

/* ---------- Date picker (Paid Media and others) ----------
   Presets as a grid of equal capsules instead of a wrapped pill, real-size
   date fields and a platinum Apply. */
html.p .dp-panel {
  background: var(--p-card) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: var(--p-shadow-edge) !important;
  padding: 16px !important;
}
html.p .dp-panel .dp-presets {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html.p .dp-panel .dp-preset {
  min-height: 40px;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  background: rgb(255 255 255 / .05) !important;
}
html.p .dp-panel .dp-preset.on {
  background: var(--p-raised) !important;
  box-shadow: var(--p-shadow-edge), inset 0 0 0 1px rgb(255 255 255 / .14) !important;
}
html.p .dp-custom { border-top: 1px solid rgb(255 255 255 / .06) !important; padding-top: 16px !important; }
html.p .dp-custom-row { gap: 12px !important; }
html.p .dp-custom-row label {
  flex: 1 1 140px;
  gap: 6px !important;
  font-size: 12px !important;
  color: var(--p-muted) !important;
}
html.p .dp-custom-row input[type="date"] {
  width: 100%;
  height: 44px;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: rgb(255 255 255 / .05) !important;
  border: 1px solid rgb(255 255 255 / .10) !important;
  color: var(--p-heading) !important;
  font-size: 16px !important;
  color-scheme: dark;
}
html.p .dp-apply {
  height: 44px;
  padding: 0 24px !important;
  border-radius: 999px !important;
  background: var(--p-platinum-fill) !important;
  color: var(--p-bg) !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  box-shadow: none !important;
}
html.p .dp-apply:hover { background: var(--p-white) !important; }
html.p .dp-trigger {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / .06) !important;
  box-shadow: var(--p-shadow-edge) !important;
  color: var(--p-heading) !important;
}

/* ---------- Phone ---------- */
@media (max-width: 768px) {
  /* one gutter for every page (VIPs had double) */
  html.p #app-content { padding-left: 16px !important; padding-right: 16px !important; }
  html.p .vips-page { padding: 0 !important; margin: 0 !important; }
  html.p .dp-panel .dp-presets { grid-template-columns: 1fr 1fr; }
  html.p .dp-apply { width: 100%; }

  /* rows of options scroll sideways instead of wrapping into blobs */
  html.p .vips-range-picker,
  html.p .vips-ladder-presets,
  html.p .vips-subnav,
  html.p .pf-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    max-width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html.p .vips-range-picker::-webkit-scrollbar,
  html.p .vips-ladder-presets::-webkit-scrollbar,
  html.p .vips-subnav::-webkit-scrollbar,
  html.p .pf-chips::-webkit-scrollbar { display: none; }
  html.p .vips-range-btn,
  html.p .vips-preset,
  html.p .vips-subnav-btn,
  html.p .pf-chip {
    flex: none !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  html.p .vips-ladder-presets { gap: 8px; }
  html.p .vips-subnav { gap: 8px !important; }
  html.p .vips-subnav-btn { padding: 10px 16px !important; }

  /* page headers stack: title, then its controls */
  html.p .view-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  html.p .view-header .vh-right { width: 100%; justify-content: flex-start !important; }

  /* wide tables scroll inside their card, never the page */
  html.p .ch table, html.p .card table { min-width: 100%; }
  html.p .table-wrap, html.p .tbl-wrap, html.p [class*="table-scroll"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* The today strip hides itself with an inline display:none on pages that do
   not show it (and while it loads); the grid layout above must not undo that. */
html.p .today-strip[style*="display: none"],
html.p .today-strip[style*="display:none"],
html.p .today-strip:empty { display: none !important; }
@media (max-width: 768px) {
  html.p .view-header button, html.p .admin-range button, html.p [class*="-range"] button { white-space: nowrap !important; }
}

/* Fields and selects: the same translucent grey as the sign-in fields, not a
   black well (it read heavy, above all on the phone). Dates keep their own rule. */
html.p input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=date]),
html.p select,
html.p textarea {
  background: rgb(255 255 255 / .05) !important;
  border: 1px solid rgb(255 255 255 / .10) !important;
}
html.p select { color-scheme: dark; }
@media (max-width: 768px) {
  html.p select, html.p .dp-bar select, html.p .dp-month-select {
    min-height: 48px;
    border-radius: 12px !important;
    font-size: 16px !important;
    padding: 0 14px !important;
  }
}

/* ---------- VIP levels with stars (Javi 17/10) ----------
   Tuna 1 star up to Whale 6, in gold; Megalodon, the top of the top, a single
   larger purple star with a glow. The fish keep their colour. Grid order is
   fixed: 1 Megalodon, 2 Whale, 3 Shark, 4 Orca, 5 Dolphin, 6 Swordfish, 7 Tuna. */
html.p .vips-ladder-emoji { filter: none !important; }
html.p .vips-ladder-step > .vips-ladder-emoji,
html.p .vips-ladder-step > .vips-ladder-name { order: 1; }
html.p .vips-ladder-step > .vips-ladder-range,
html.p .vips-ladder-step > .vips-ladder-count,
html.p .vips-ladder-step > .vips-ladder-bar,
html.p .vips-ladder-step > .vips-ladder-bet { order: 3; }
html.p .vips-ladder-step::after {
  order: 2;
  display: block;
  margin: 2px auto 0;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 2px !important;
  color: #E3B95A;
  text-shadow: 0 0 10px rgb(227 185 90 / .35);
  font-family: -apple-system, 'Segoe UI Symbol', sans-serif !important;
}
html.p .vips-ladder-grid > :nth-child(7)::after { content: '\2605'; }
html.p .vips-ladder-grid > :nth-child(6)::after { content: '\2605\2605'; }
html.p .vips-ladder-grid > :nth-child(5)::after { content: '\2605\2605\2605'; }
html.p .vips-ladder-grid > :nth-child(4)::after { content: '\2605\2605\2605\2605'; }
html.p .vips-ladder-grid > :nth-child(3)::after { content: '\2605\2605\2605\2605\2605'; }
/* Whale: one purple star. Megalodon: one holographic star (Javi 17/10) */
html.p .vips-ladder-grid > :nth-child(2)::after {
  content: '\2605';
  font-size: 20px;
  line-height: 20px;
  color: #B57BFF;
  text-shadow: 0 0 8px rgb(181 123 255 / .9), 0 0 18px rgb(181 123 255 / .5);
}
html.p .vips-ladder-grid > :nth-child(2) {
  box-shadow: var(--p-shadow-edge), inset 0 0 0 1px rgb(181 123 255 / .35) !important;
}
html.p .vips-ladder-grid > :nth-child(2).is-on {
  box-shadow: var(--p-shadow-edge), inset 0 0 0 1px rgb(181 123 255 / .6), 0 0 24px -6px rgb(181 123 255 / .45) !important;
}
html.p .vips-ladder-grid > :nth-child(1)::after {
  content: '\2605';
  font-size: 24px !important;
  line-height: 24px !important;
  color: transparent;
  background: linear-gradient(115deg, #FF9AD5, #B57BFF, #7FD8FF, #8CFFC8, #FFE58A, #FF9AD5);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 6px rgb(255 255 255 / .45)) drop-shadow(0 0 14px rgb(181 123 255 / .45));
  animation: p-holo 4s linear infinite;
}
/* holographic edge of light around the top level */
html.p .vips-ladder-grid > :nth-child(1) { box-shadow: var(--p-shadow-edge) !important; }
html.p .vips-ladder-grid > :nth-child(1)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(115deg, #FF9AD5, #B57BFF, #7FD8FF, #8CFFC8, #FFE58A, #FF9AD5);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .75;
  animation: p-holo 4s linear infinite;
}
@keyframes p-holo { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) {
  html.p .vips-ladder-grid > :nth-child(1)::after,
  html.p .vips-ladder-grid > :nth-child(1)::before { animation: none !important; }
}
/* An empty level dims its numbers, not its identity: name, fish and stars stay lit */
html.p .vips-ladder-step.is-empty { opacity: 1 !important; }
html.p .vips-ladder-step.is-empty > .vips-ladder-count,
html.p .vips-ladder-step.is-empty > .vips-ladder-bar,
html.p .vips-ladder-step.is-empty > .vips-ladder-bet,
html.p .vips-ladder-step.is-empty > .vips-ladder-range { opacity: .45; }

/* ---------- Entrance after sign-in (Javi 17/10: «más top, más Apple pro») ----------
   A dark room with soft light; the logo arrives out of a slight blur, then
   «Hola,» and the name, a hairline of progress. On exit the screen dissolves
   forward and the dashboard rises in, card row by card row. */
html.p #welcome-splash {
  background:
    radial-gradient(60% 50% at 50% 38%, rgb(172 185 197 / .10), transparent 70%),
    radial-gradient(40% 40% at 50% 70%, rgb(255 255 255 / .04), transparent 70%),
    var(--p-bg) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1),
              filter .7s cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0s !important;
}
html.p #welcome-splash.off {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(12px);
  visibility: hidden;
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1),
              filter .7s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .7s !important;
}
html.p #welcome-splash::before {
  /* the light breathes once while it waits */
  content: '';
  position: absolute;
  left: 50%;
  top: 38%;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgb(234 235 237 / .10), transparent);
  filter: blur(20px);
  pointer-events: none;
}
html.p #welcome-splash:not(.off)::before { animation: p-breathe 2.4s ease-in-out infinite alternate; }
html.p #welcome-splash .ws-inner { position: relative; }
html.p #welcome-splash .ws-logo { opacity: 1; height: 34px; margin-bottom: 28px; }
html.p .ws-kicker {
  font-size: 12px !important;
  font-weight: 560 !important;
  color: var(--p-muted) !important;
  letter-spacing: 0 !important;
}
html.p .ws-greeting {
  margin-top: 10px !important;
  font-size: 56px !important;
  line-height: 60px !important;
  font-weight: 650 !important;
  letter-spacing: -0.025em !important;
  color: var(--p-heading) !important;
}
html.p .ws-hi { color: var(--p-muted) !important; font-weight: 400 !important; }
html.p .ws-name { color: var(--p-white) !important; filter: none !important; font-weight: 650 !important; }
html.p .ws-progress {
  width: 160px !important;
  height: 2px !important;
  margin: 36px auto 0 !important;
  background: rgb(255 255 255 / .08) !important;
  border-radius: 999px !important;
}
html.p .ws-progress-fill {
  background: linear-gradient(90deg, rgb(234 235 237 / .4), #FFFFFF) !important;
  box-shadow: 0 0 12px rgb(255 255 255 / .35) !important;
  border-radius: 999px !important;
}
html.p #welcome-splash:not(.off) .ws-logo     { animation: p-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
html.p #welcome-splash:not(.off) .ws-kicker   { animation: p-rise .9s cubic-bezier(.2, .8, .2, 1) .12s both; }
html.p #welcome-splash:not(.off) .ws-hi       { display: inline-block; animation: p-rise .9s cubic-bezier(.2, .8, .2, 1) .24s both; }
html.p #welcome-splash:not(.off) .ws-name     { animation: p-rise .9s cubic-bezier(.2, .8, .2, 1) .36s both; }
html.p #welcome-splash:not(.off) .ws-progress { animation: p-fade .6s ease .5s both; }
@keyframes p-rise {
  from { opacity: 0; transform: translateY(14px) scale(.98); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes p-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes p-breathe { from { opacity: .6; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }

/* the dashboard rises in behind it, one band after another */
html.p #welcome-splash.off ~ .main-content #app-content > .dp-bar,
html.p #welcome-splash.off ~ .main-content #app-content > .bento,
html.p #welcome-splash.off ~ .main-content #app-content > .row,
html.p #welcome-splash.off ~ .main-content #app-content > .sl {
  animation: p-rise-soft .7s cubic-bezier(.2, .8, .2, 1) both;
}
html.p #welcome-splash.off ~ .main-content #app-content > .bento { animation-delay: .08s; }
html.p #welcome-splash.off ~ .main-content #app-content > .sl:nth-of-type(1),
html.p #welcome-splash.off ~ .main-content #app-content > .row:nth-of-type(1) { animation-delay: .16s; }
html.p #welcome-splash.off ~ .main-content #app-content > .row:nth-of-type(2) { animation-delay: .22s; }
html.p #welcome-splash.off ~ .main-content #app-content > .row:nth-of-type(3) { animation-delay: .28s; }
@keyframes p-rise-soft {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* route progress bar: platinum, not gold and pink */
html.p .ep-progress-fill {
  background: linear-gradient(90deg, rgb(234 235 237 / .3), #FFFFFF) !important;
  box-shadow: 0 0 10px rgb(255 255 255 / .4) !important;
}
@media (max-width: 768px) {
  html.p .ws-greeting { font-size: 36px !important; line-height: 40px !important; }
  html.p #welcome-splash .ws-logo { height: 28px; margin-bottom: 22px; }

  /* Login on the phone: the rotating word sits under the logo, smaller,
     instead of a wide box squeezed beside it */
  html.p #login-overlay .card-brand { flex-direction: column !important; gap: 10px !important; }
  html.p #login-overlay .brand-x { display: none !important; }
  html.p #login-overlay .brand-logo { height: 20px !important; }
  html.p #login-overlay .brand-chip {
    min-width: 0 !important;
    width: auto !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    line-height: 14px !important;
    letter-spacing: .16em !important;
    border-radius: 999px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.p #welcome-splash, html.p #welcome-splash.off { transform: none !important; filter: none !important; }
}

/* ---------- Phone: menu and topbar (Javi 17/10) ----------
   The sheet is opaque enough that nothing shows through, and the topbar fades
   out while it is open, so its logos never cross the sheet's own. The clock
   comes back to the bar (time only on phones, date too from 560 px). */
@media (max-width: 768px) {
  html.p .sidebar {
    background: rgb(8 8 9 / .97) !important;
  }
  html.p .topbar { transition: opacity .2s ease; }
  html.p body.nav-open .topbar { opacity: 0; pointer-events: none; }
  html.p .topbar .tb-clock {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 0 !important;
    margin-right: 10px;
    font-size: 12px !important;
    color: var(--p-text-2) !important;
    white-space: nowrap;
  }
  html.p .topbar .tb-clock-day { display: none !important; }
  html.p .topbar .tb-clock-time { color: var(--p-heading) !important; font-variant-numeric: tabular-nums; }
  html.p .topbar-right { gap: 10px !important; align-items: center; }
}
@media (min-width: 560px) and (max-width: 768px) {
  html.p .topbar .tb-clock-day { display: inline !important; color: var(--p-muted) !important; }
}
@media (max-width: 768px) {
  html.p .topbar-left { gap: 8px !important; min-width: 0; }
  html.p .topbar-left .topbar-logo-link svg { width: 88px !important; }
  html.p .topbar-brand-group { padding-left: 8px !important; gap: 0 !important; }
  html.p .topbar-brand-group .brand-logo-img { height: 15px !important; width: auto !important; max-width: 76px !important; }
  html.p .topbar .tb-clock { margin-right: 4px; }
}
@media (max-width: 380px) {
  html.p .topbar { padding: 0 12px !important; }
  html.p .topbar-left { padding-left: 44px !important; }
  html.p .topbar-left .topbar-logo-link svg { width: 78px !important; }
  html.p .topbar-brand-group .brand-logo-img { height: 13px !important; max-width: 64px !important; }
  html.p .topbar-right { gap: 8px !important; }
  html.p .topbar .tb-clock { font-size: 12px !important; margin-right: 0; }
}
/* the content column must not paint its own floor over the room's light,
   or its edge shows as a band beside the sidebar */
html.p .main-content { background: transparent !important; }

/* ---------- System status: words, not a glowing dot (Javi 17/10) ----------
   The dot said nothing on its own. It now reads like a trading terminal, next
   to the clock: «En vivo» when the portal and its data sources answer,
   «Con retraso» in amber when a source is stale, «Sin conexión» in red when
   the health check fails. status-pill.js already sets the state on the dot;
   the label is drawn from it, in the interface language. */
html.p .tb-status {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  order: 2;
}
html.p .topbar-right .lang-toggle { order: 1; }
html.p .topbar-right .tb-clock { order: 3; padding-left: 0 !important; margin-left: 0 !important; }
html.p .topbar-right .tb-account-wrap { order: 4; }
html.p .tb-status-dot { display: none !important; }
html.p .tb-status::after {
  font-size: 12px;
  line-height: 16px;
  font-weight: 560;
  white-space: nowrap;
  color: var(--p-text-2);
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid rgb(255 255 255 / .12);
}
html.p .tb-status:has([data-status="loading"])::after  { content: 'Conectando'; color: var(--p-faint); }
html.p .tb-status:has([data-status="ok"])::after       { content: 'En vivo'; color: #69D98D; }
html.p .tb-status:has([data-status="degraded"])::after { content: 'Con retraso'; color: var(--p-warning); }
html.p .tb-status:has([data-status="error"])::after    { content: 'Sin conexión'; color: var(--p-danger); }
html.p[lang="en"] .tb-status:has([data-status="loading"])::after  { content: 'Connecting'; }
html.p[lang="en"] .tb-status:has([data-status="ok"])::after       { content: 'Live'; }
html.p[lang="en"] .tb-status:has([data-status="degraded"])::after { content: 'Delayed'; }
html.p[lang="en"] .tb-status:has([data-status="error"])::after    { content: 'Offline'; }
@media (max-width: 768px) {
  html.p .tb-status::after { padding-right: 8px; margin-right: 8px; }
}
/* Phone: room for logos and clock only. While everything is live nothing is
   added; when something fails the warning takes the clock's place. */
@media (max-width: 768px) {
  html.p .tb-status:has([data-status="ok"]),
  html.p .tb-status:has([data-status="loading"]) { display: none !important; }
  html.p .tb-status::after { border-right: 0; padding-right: 0; margin-right: 0; }
  html.p .topbar-right:has([data-status="degraded"]) .tb-clock,
  html.p .topbar-right:has([data-status="error"]) .tb-clock { display: none !important; }
}
html.p .topbar .tb-clock { width: auto !important; min-width: 0 !important; justify-content: flex-start !important; gap: 10px; }
html.p .topbar .tb-clock-gap { display: none !important; }
html.p .topbar .tb-clock-str { display: inline-flex; gap: 10px; }
@media (min-width: 769px) {
  /* equal air either side of the divider: 14 px before, the bar's 16 px gap after */
  html.p .tb-status::after { padding-right: 14px; margin-right: 0; }
}

/* Login word box: steady. Fixed width (the longest word fits), never wraps,
   and only the letters fade between words, not the box (Javi 17/10: on the
   phone the words looked stacked on top of each other). */
html.p #login-overlay .brand-chip {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip;
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  box-sizing: border-box;
  transition: color .18s ease !important;
}
html.p #login-overlay .brand-chip.out {
  opacity: 1 !important;
  color: transparent !important;
}
@media (max-width: 768px) {
  html.p #login-overlay .brand-chip { width: 124px !important; min-width: 124px !important; max-width: 124px !important; }
}

/* ---------- Sign-in, macOS pass (Javi 17/10: «pro es más pro Mac», sin luces) ----------
   Still, precise, no light effects: the room is a static dark wallpaper, the
   glass sheet appears once with a short fade, fields behave like macOS text
   fields (quiet fill, a clear focus ring), the title is plain white. */
html.p #login-overlay .login-orb { animation: none !important; }
html.p #login-overlay .login-orb.a { opacity: .08 !important; }
html.p #login-overlay .login-orb.b { opacity: .04 !important; }
html.p #login-overlay {
  background:
    radial-gradient(120% 80% at 50% 0%, #1A1B1E 0%, #0C0C0E 55%, #070708 100%) !important;
}
html.p #login-overlay .login-card {
  border-radius: 18px !important;
  background: rgb(28 29 32 / .62) !important;
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  backdrop-filter: blur(40px) saturate(160%);
  box-shadow: inset 0 0.5px 0 rgb(255 255 255 / .14), 0 0 0 0.5px rgb(255 255 255 / .06), 0 30px 80px -20px rgb(0 0 0 / .85) !important;
  animation: p-sheet-in .45s ease-out both;
}
html.p #login-overlay .login-card::before { display: none !important; }
@keyframes p-sheet-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
html.p #login-overlay .display-xl {
  font-size: 26px !important;
  line-height: 32px !important;
  font-weight: 650 !important;
  letter-spacing: -0.015em !important;
}
/* macOS text field: quiet fill, hairline, 3 px focus ring */
html.p #login-overlay .field input {
  height: 44px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  background: rgb(255 255 255 / .06) !important;
  border: 1px solid rgb(255 255 255 / .09) !important;
}
html.p #login-overlay .field input:focus {
  background: rgb(255 255 255 / .08) !important;
  border-color: rgb(255 255 255 / .30) !important;
  box-shadow: 0 0 0 3px rgb(255 255 255 / .14) !important;
}
html.p #login-overlay .field label { font-size: 12px !important; font-weight: 560 !important; color: var(--p-text-2) !important; }
html.p #login-overlay .submit-btn {
  height: 44px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  margin-top: 6px !important;
}
html.p #login-overlay .submit-btn:active { transform: none; filter: brightness(.92); }
@media (max-width: 768px) {
  html.p #login-overlay .login-card { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.p #login-overlay .field input, html.p #login-overlay .submit-btn { height: 50px !important; font-size: 17px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.p #login-overlay .login-card { animation: none !important; }
}

/* ---------- Phone: metric tables as stacked cards (Paid Media «Efficiency metrics») ----------
   On a 390 px screen the 4-column table scrolled sideways and looked empty: the
   values sat off screen. Each row becomes a small card: metric and status on top,
   value and benchmark below, the note of info rows across the full width. The
   table is tagged .p-stack by js/p-theme.js (4 headers, the third «Benchmark»). */
@media (max-width: 768px) {
  html.p table.p-stack { display: block; min-width: 0 !important; width: 100% !important; }
  /* headers hidden from sight only: screen readers keep Metric/Value/Benchmark/Status */
  html.p table.p-stack thead {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  html.p table.p-stack tbody { display: flex; flex-direction: column; gap: 8px; }
  html.p table.p-stack tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--p-raised);
    box-shadow: var(--p-shadow-edge);
  }
  html.p table.p-stack tr:hover td { background: transparent !important; }
  html.p table.p-stack td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal !important;
    text-align: left !important;
    min-width: 0;
  }
  /* metric */
  html.p table.p-stack td:first-child {
    grid-column: 1; grid-row: 1;
    font-size: 14px !important; font-weight: 560 !important; color: var(--p-text-2) !important;
  }
  /* status (OK / Alerta, or the ROAS pill) */
  html.p table.p-stack td:last-child:not([colspan]):not(:first-child) {
    grid-column: 2; grid-row: 1 / span 2; align-self: start; text-align: right !important;
  }
  /* value */
  html.p table.p-stack td:nth-child(2) {
    grid-column: 1; grid-row: 2;
    font-size: 17px !important; font-weight: 650 !important; color: var(--p-heading) !important;
    font-variant-numeric: tabular-nums;
  }
  html.p table.p-stack td:nth-child(2)[colspan] { grid-column: 1; font-size: 14px !important; font-weight: 400 !important; }
  /* benchmark, under the status */
  html.p table.p-stack td:nth-child(3):not(:last-child) {
    grid-column: 1; grid-row: 3;
    font-size: 12px !important; color: var(--p-muted) !important;
  }
  html.p table.p-stack td:nth-child(3):not(:last-child)::before { content: 'Benchmark '; color: var(--p-faint); }
  /* note of rows without benchmark */
  html.p table.p-stack td:nth-child(3)[colspan] {
    grid-column: 1 / -1; grid-row: 3;
    font-size: 12px !important; color: var(--p-muted) !important;
  }
}
@media (max-width: 768px) {
  html.p table.p-stack tr.hl td { background: transparent !important; }
  html.p table.p-stack .p { background: var(--p-card) !important; }
}
@media (max-width: 768px) {
  /* the sticky first column (and its shadow) of scrolling tables does not apply to cards */
  html.p table.p-stack td, html.p table.p-stack td::before, html.p table.p-stack td::after {
    position: static !important;
    box-shadow: none !important;
  }
  html.p table.p-stack td:nth-child(3):not(:last-child)::before { position: static !important; }
}
@media (prefers-reduced-motion: reduce) {
  /* no exit animation to wait for: a closed welcome screen leaves the page entirely */
  html.p #welcome-splash.off { display: none !important; }
}
/* small status dots written inline as 50 %: same capsule radius as every other dot */
html.p [style*="border-radius:50%"][style*="width:6px"],
html.p [style*="border-radius:50%"][style*="width:8px"],
html.p [style*="border-radius: 50%"][style*="width: 6px"],
html.p [style*="border-radius: 50%"][style*="width: 8px"] { border-radius: 999px !important; }

/* ---------- Paid Media: channel tabs (Resumen · Meta · Google Ads), 19/10 ---------- */
.paid-tabs {
  display: flex;
  gap: 4px;
  margin: 16px 0 20px;
  padding: 4px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 999px;
  background: var(--p-surface, #0D0D0F);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06);
  scrollbar-width: none;
}
.paid-tabs::-webkit-scrollbar { display: none; }
.paid-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--p-text-2, #C7C9CC);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
}
.paid-tab:hover { color: var(--p-heading, #F6F7F8); background: rgb(255 255 255 / .05); }
.paid-tab.on {
  color: var(--p-heading, #F6F7F8);
  font-weight: 560;
  background: var(--p-raised, #222326);
  box-shadow: inset 0 0.5px 0 rgb(255 255 255 / .06), inset 0 0 0 1px rgb(255 255 255 / .08);
}
.paid-tab-dot, .ch-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex: none; }
.ch-dot { margin-right: 8px; vertical-align: 1px; }

.ch-sources { font-size: 12px; color: var(--p-muted, #AAACB1); margin: 0 0 16px; }
.ch-kpis { margin-bottom: 8px; }
.ch-table th.r, .ch-table td.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-table td:first-child { white-space: nowrap; }
.ch-table tr.ch-total td { font-weight: 650; color: var(--p-heading, #F6F7F8); border-top: 1px solid rgb(255 255 255 / .10); }
.ch-tag { font-size: 12px; color: var(--p-faint, #919499); }
.ch-camp { color: var(--p-heading, #F6F7F8); }
.ch-raw { font-size: 12px; color: var(--p-faint, #919499); margin-top: 2px; }
.ch-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--p-muted, #AAACB1);
}
.ch-status::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--p-faint, #919499); }
.ch-status.on { color: var(--p-text, #E5E6E8); }
.ch-status.on::before { background: #69D98D; }
.ch-notes { margin: 10px 0 8px; font-size: 12px; line-height: 18px; color: var(--p-muted, #AAACB1); }
.ch-notes > div + div { margin-top: 4px; }
.ch-warn { font-size: 12px; color: #FFA55B; margin: 8px 0; }
.ch-empty {
  margin: 8px 0 24px;
  padding: 28px;
  border-radius: 12px;
  background: var(--p-card, #151618);
  box-shadow: inset 0 0.5px 0 rgb(255 255 255 / .06);
  max-width: 720px;
}
.ch-empty-t { font-size: 17px; font-weight: 560; color: var(--p-heading, #F6F7F8); margin-bottom: 8px; }
.ch-empty-s { font-size: 14px; line-height: 21px; color: var(--p-text-2, #C7C9CC); }
.ch-empty-s + .ch-empty-s { margin-top: 10px; color: var(--p-muted, #AAACB1); }
@media (max-width: 768px) {
  .paid-tabs { width: 100%; }
  .paid-tab { flex: 1 0 auto; justify-content: center; }
  .ch-table td:first-child, .ch-table th:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--p-card, #151618);
  }
  .ch-empty { padding: 20px; }
}
@media (max-width: 768px) {
  /* KPIs two by two */
  .ch-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .ch-kpis .card:first-child { grid-column: 1 / -1; }
  /* channel and campaign tables as cards: name on top, each value with its label */
  .ch-table, .ch-table tbody { display: block; width: 100% !important; min-width: 0 !important; }
  .ch-table thead { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ch-table tbody { display: flex; flex-direction: column; gap: 8px; }
  .ch-table tr {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 12px;
    padding: 12px 14px; border-radius: 12px; background: var(--p-raised, #222326);
    box-shadow: inset 0 0.5px 0 rgb(255 255 255 / .06);
  }
  .ch-table td {
    display: block; padding: 0 !important; border: 0 !important; background: transparent !important;
    position: static !important; text-align: left !important; white-space: normal !important;
    font-size: 15px; color: var(--p-heading, #F6F7F8);
  }
  .ch-table td:first-child { grid-column: 1 / -1; font-weight: 560; }
  .ch-table td:empty { display: none; }
  html[lang="es"] .ch-table td[data-l-es]::before { content: attr(data-l-es); }
  html[lang="en"] .ch-table td[data-l-en]::before { content: attr(data-l-en); }
  .ch-table td[data-l-es]::before {
    display: block; font-size: 12px; font-weight: 400; color: var(--p-muted, #AAACB1); margin-bottom: 2px;
  }
  .ch-table tr.ch-total { background: var(--p-card, #151618); }
  .ch-table tr.ch-total td { border-top: 0; }
}
@media (max-width: 768px) {
  .ch-table td::after, .ch-table td:first-child::before { display: none !important; box-shadow: none !important; }
  .ch-table td:first-child { box-shadow: none !important; }
}