/* ═══════════════════════════════════════════════════════════════════════════
   UI SUITE (2026-09-23) — the report pages, login, menu, Command Center and the
   notification / ops-chat sheets, brought into the graphite/aurum system.

   SCOPE, and the one rule of this file: nothing here may reach #pageLive,
   #pageCameras, #pageSolar or the dock. Those were measured and signed off
   (see docs/graphite-aurum-2026-09-05.md) and this file never names them.
   Every selector below is rooted in .rp-page, #loginScreen, #menuDrawer,
   #pageLogs, .notif-panel or one of the new .rp- / .lg- / .mn- classes.

   The vocabulary is the existing one, re-used rather than re-invented:
     RAISED   = an object you read as a unit (cards, plaques, keys) — lit top edge,
                dark lower lip, 3px cast, soft shadow. One light source, top-left.
     RECESSED = a well that CONTAINS data (tables, charts) — inset shadow, no highlight.
     GOLD     = the one number that matters on the page (the ingot). Nothing else.
     COPPER   = the same ingot for money that is OWED (unpaid tabs), so the tab pages
                keep the family look without spending gold on a debt.
     Venue    = Rhino steel/navy + cyan tint, Shooters wine + pink tint.
     Columns  = tabs salmon, expenses cyan, payouts violet.
   Chart fills are the venue hues stepped to pass the dataviz validator on the
   #0b121d well (Rhino #2f9bd6, Shooters #dc5f85: lightness band, chroma floor,
   CVD dE 13.6 protan, contrast >= 3:1) — the pale #89d9ff / #ffa4b5 tints stay for
   icons and dots, where they have always lived.
   ═══════════════════════════════════════════════════════════════════════════ */

.rp-page, #pageLogs, #loginScreen, #menuDrawer, .notif-panel {
    --rp-ink: #eaf1fa;
    --rp-ink-2: #a9b8cb;
    --rp-ink-3: #6e7e94;
    --rp-well: #0b121d;
    --rp-strip: #141a27;
    --rp-edge: rgba(187, 212, 241, .22);
    --rp-gold: #ffdb83;
    --rp-rhino: #2f9bd6;
    --rp-shoot: #dc5f85;
    --rp-rhino-tint: #89d9ff;
    --rp-shoot-tint: #ffa4b5;
    --rp-tabs: #ffa091;
    --rp-exp: #87d5ff;
    --rp-pay: #d5afff;
    --rp-good: #5fd39a;
    --rp-bad: #ff7b6b;
    --rp-warn: #f0a52e;
    --rp-raised:
        radial-gradient(ellipse at 2% 0%, rgba(160,197,236,.14), transparent 58%),
        linear-gradient(150deg, #232d3b, #131c28 62%, #101722);
    --rp-raised-shadow:
        inset 0 1px 0 rgba(255,255,255,.15), inset 0 -2px 0 #070c13,
        0 3px 0 #080e17, 0 5px 0 rgba(116,146,183,.14), 0 13px 22px rgba(0,0,0,.42);
    --rp-key: linear-gradient(145deg, #354156, #151e2d);
    --rp-key-shadow: inset 0 1px 0 #ffffff21, 0 3px 0 #080f19, 0 5px 7px #0005;
    --ico-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l3 2 3-2 3 2 3-2v18l-3-2-3 2-3-2-3 2zM9 9h6M9 13h6'/%3E%3C/svg%3E");
    --ico-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 7V5l14-2v4M4 7h16v14H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2zM20 11h-6v6h6'/%3E%3C/svg%3E");
    --ico-coins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cellipse cx='9' cy='6' rx='6' ry='3'/%3E%3Cpath d='M3 6v5c0 4 12 4 12 0V6M3 11v5c0 3 7 4 10 2M13 13v5c0 4 9 4 9 0v-5'/%3E%3Cellipse cx='17.5' cy='13' rx='4.5' ry='2.3'/%3E%3C/svg%3E");
    --ico-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M7 14h2M11 14h2M15 14h2M7 17h2M11 17h2'/%3E%3C/svg%3E");
    --ico-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 20h16M7 16v-5M11 16V7M15 16v-7M19 16V4'/%3E%3C/svg%3E");
    --ico-trend: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E");
    --ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4.5-6 8-6s7 2 8 6'/%3E%3C/svg%3E");
    --ico-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.5 3.5-5 6.5-5s5.7 1.5 6.5 5M16 4.6a3.5 3.5 0 0 1 0 6.8M18 15c2 .6 3.2 2.3 3.6 5'/%3E%3C/svg%3E");
    --ico-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
    --ico-pulse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h4l3-8 4 16 3-8h6'/%3E%3C/svg%3E");
    --ico-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
    --ico-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --ico-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E");
    --ico-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E");
    --ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Ccircle cx='12' cy='15.5' r='1.3'/%3E%3C/svg%3E");
}

/* ─── Page shell: same static colour pools the signed-off pages sit on ───── */
.rp-page {
    position: relative;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    padding-top: calc(10px + env(safe-area-inset-top));
    color: var(--rp-ink);
    background: linear-gradient(180deg, rgba(27,32,51,.55) 0%, rgba(16,19,30,.35) 45%, rgba(8,10,16,.2) 100%);
    scrollbar-gutter: stable;
}
.rp-page::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(620px 500px at 10% 16%, rgba(62,70,168,.34), transparent 72%),
        radial-gradient(560px 440px at 90% 10%, rgba(20,122,148,.30), transparent 72%),
        radial-gradient(640px 520px at 28% 98%, rgba(150,102,44,.22), transparent 72%),
        radial-gradient(500px 420px at 80% 90%, rgba(78,88,158,.20), transparent 72%);
}
.rp-wrap {
    position: relative; z-index: 1;
    width: 100%; max-width: 1320px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 14px;
}
.rp-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rp-page.active .rp-head, .rp-page.active .rp-body > * { animation: rpIn .36s cubic-bezier(.2,.8,.2,1) both; }
.rp-page.active .rp-body > *:nth-child(2) { animation-delay: .05s; }
.rp-page.active .rp-body > *:nth-child(3) { animation-delay: .10s; }
.rp-page.active .rp-body > *:nth-child(n+4) { animation-delay: .15s; }
@keyframes rpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Refetch keeps the frame: the old render dims while the new one loads, no flash. */
.rp-body { transition: opacity .18s ease; }
.rp-busy .rp-body { opacity: .5; }

/* ─── Header: icon key + title, period control on the right ─────────────── */
.rp-head {
    position: relative; z-index: 5;   /* its own stacking context (entry animation): keep the month picker above the body */
    display: flex; align-items: center; justify-content: space-between; gap: 12px 18px;
    flex-wrap: wrap;
}
.rp-titlebox { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rp-ico {
    flex: none; width: 42px; height: 40px; border-radius: 12px;
    display: grid; place-items: center;
    border: 1px solid #f1c46f80;
    background: linear-gradient(145deg, #705b33, #312819);
    box-shadow: inset 0 1px 0 #ffe7ac55, 0 3px 0 #120f09, 0 0 16px #efb33d24;
}
.rp-ico::before {
    content: ''; width: 22px; height: 22px; background: #ffd66b;
    -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
    filter: drop-shadow(0 1px 1px #0008);
}
.rp-title {
    margin: 0; font-size: 19px; font-weight: 800; letter-spacing: .3px; line-height: 1.15;
    color: var(--rp-ink); text-shadow: 0 2px 3px #000a;
}
.rp-sub { margin-top: 3px; font-size: 11.5px; color: var(--rp-ink-2); letter-spacing: .2px; }
.rp-sub b { color: var(--rp-ink); font-weight: 700; }

/* Period control — raised keys around a recessed read-out. */
.rp-ctrl { display: flex; align-items: center; gap: 6px; position: relative; }
.rp-key, .rp-period {
    height: 36px; border-radius: 11px; cursor: pointer; font: inherit;
    border: 1px solid #b5cbe421; color: #dfe7f2;
    background: var(--rp-key); box-shadow: var(--rp-key-shadow);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.rp-key { min-width: 36px; padding: 0 10px; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .6px; }
.rp-key svg { width: 16px; height: 16px; }
.rp-key:disabled { opacity: .35; cursor: default; }
.rp-period {
    min-width: 168px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 13px; font-weight: 750; letter-spacing: .3px; font-variant-numeric: tabular-nums;
    color: var(--rp-ink);
    background: var(--rp-well); border-color: #080e17;
    box-shadow: inset 0 2px 4px #0009, 0 1px 0 #ffffff0f;
}
.rp-period::after {
    content: ''; width: 8px; height: 8px; margin-top: -3px; border: solid var(--rp-ink-3);
    border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}
@media (hover: hover) {
    .rp-key:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.12); }
    .rp-period:hover { filter: brightness(1.2); }
}
.rp-key:not(:disabled):active { transform: translateY(2px); box-shadow: inset 0 1px 0 #ffffff21, 0 1px 0 #080f19; }
.rp-period.is-static { cursor: default; min-width: 96px; }
.rp-period.is-static::after { display: none; }
.rp-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; right: 50%; bottom: 0; }
:is(.rp-key, .rp-period, .rp-row, .rp-bar-hit, .mn-item, .lg-key, .lg-unlock, .rp-chip, .rp-pop button, .rp-link):focus-visible {
    outline: 2px solid #ffdb83; outline-offset: 2px;
}

/* Month picker popover */
.rp-pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 268px; padding: 10px;
    border-radius: 16px; border: 1px solid var(--rp-edge);
    background: var(--rp-raised); box-shadow: var(--rp-raised-shadow), 0 24px 48px #000a;
    display: none;
}
.rp-pop.open { display: block; animation: rpIn .18s ease both; }
.rp-pop-year { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rp-pop-year span { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rp-pop-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rp-pop-months button {
    height: 34px; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
    color: var(--rp-ink-2); border: 1px solid #b5cbe41a; background: linear-gradient(145deg, #2a3446, #141c29);
    box-shadow: inset 0 1px 0 #ffffff14, 0 2px 0 #080f19;
}
.rp-pop-months button:hover:not(:disabled) { color: var(--rp-ink); filter: brightness(1.15); }
.rp-pop-months button.on { color: #332004; border-color: #4a3308; background: linear-gradient(180deg, #ffe6a8, #e5b34f 55%, #b7822f); box-shadow: inset 0 1px 0 #fff3c7, 0 2px 6px rgba(181,124,39,.38); }
.rp-pop-months button:disabled { opacity: .3; cursor: default; }

/* ─── KPI row ────────────────────────────────────────────────────────────── */
.rp-kpis { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.rp-kpis.rp-kpis-2 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); }
.rp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

/* The ingot: THE number on the page. Same recipe as the COMBINED plaque. */
.rp-ingot {
    position: relative; overflow: hidden; min-height: 96px;
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    padding: 14px 18px 14px 64px; border-radius: 16px;
    border: 1px solid #ffe5a6; border-bottom-color: #916221;
    color: #352109;
    background: radial-gradient(ellipse at 25% 0, #fff1bf, transparent 60%),
                linear-gradient(112deg, #b57c27, #f6d57b 26%, #e5b34f 60%, #b7822f);
    box-shadow: inset 0 1px 0 #fff3c7, inset 0 -2px 0 #98651b,
                0 3px 0 #644313, 0 5px 0 #080d14, 0 12px 22px #0007;
    text-shadow: 0 1px 0 #fff0b2;
}
.rp-ingot::before {
    content: ''; position: absolute; left: 18px; top: 50%; width: 32px; height: 32px;
    transform: translateY(-50%); background: #654315;
    -webkit-mask: var(--ico-coins) center / contain no-repeat; mask: var(--ico-coins) center / contain no-repeat;
}
/* a slow sheen across the metal, once, when the number lands */
.rp-ingot::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 48%, transparent 60%);
    transform: translateX(-120%);
}
.rp-ingot.shine::after { animation: rpSheen 1.1s ease-out .1s both; }
@keyframes rpSheen { to { transform: translateX(120%); } }
.rp-ingot .k { font-size: 10px; font-weight: 850; letter-spacing: 1.6px; text-transform: uppercase; opacity: .82; }
.rp-ingot .v { font-size: 34px; font-weight: 850; letter-spacing: -.8px; line-height: 1.05; white-space: nowrap; }
.rp-ingot .v .c { font-size: .5em; letter-spacing: 0; opacity: .7; }
.rp-ingot .s { font-size: 11.5px; font-weight: 700; opacity: .85; }
.rp-ingot.copper {
    border-color: #ffc2a8; border-bottom-color: #8d3e2a; color: #2e0f07; text-shadow: 0 1px 0 #ffd9c6;
    background: radial-gradient(ellipse at 25% 0, #ffe0cf, transparent 60%),
                linear-gradient(112deg, #a14d36, #f0a584 26%, #d8785c 60%, #a5533b);
    box-shadow: inset 0 1px 0 #ffe3d3, inset 0 -2px 0 #8a3c28, 0 3px 0 #5b2416, 0 5px 0 #080d14, 0 12px 22px #0007;
}
.rp-ingot.copper::before { background: #5e2415; -webkit-mask-image: var(--ico-receipt); mask-image: var(--ico-receipt); }

/* Delta chip inside the ingot — direction is carried by the arrow AND the word, never colour alone. */
.rp-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.rp-delta.up { color: #1f5a2e; } .rp-delta.dn { color: #7a1e12; } .rp-delta.flat { color: inherit; opacity: .7; }
.rp-ingot.copper .rp-delta.up { color: #7a1e12; } .rp-ingot.copper .rp-delta.dn { color: #1f5a2e; }

/* Venue nameplates — the same plates as the live bar cards. */
.rp-venue {
    position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-rows: auto auto auto;
    column-gap: 10px; row-gap: 3px; align-items: center;
    padding: 12px 14px; border-radius: 14px;
    border: 1px solid #8198b440; color: #eaf3ff;
    background: linear-gradient(135deg, #354b64, #1c2b40 65%);
    box-shadow: inset 0 1px 0 #ffffff25, inset 0 -1px 0 #0008, 0 3px 0 #0a111b, 0 8px 14px #0006;
    text-shadow: 0 1px 2px #0008;
}
.rp-venue.shooters { background: linear-gradient(135deg, #713947, #371e2c 70%); border-color: #d391a040; }
.rp-venue::before {
    content: ''; grid-column: 1; grid-row: 1 / 3; width: 30px; height: 32px; background: var(--rp-rhino-tint);
    -webkit-mask: var(--ico-wallet) center / 26px no-repeat; mask: var(--ico-wallet) center / 26px no-repeat;
    filter: drop-shadow(0 2px 1px #0008);
}
.rp-venue.shooters::before { background: var(--rp-shoot-tint); }
.rp-venue .n { grid-column: 2; grid-row: 1; font-size: 12.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; min-width: 0; overflow-wrap: anywhere; }
.rp-venue .t { grid-column: 2; grid-row: 2; font-size: 8.5px; letter-spacing: 1.5px; color: #c1cddd; text-transform: uppercase; }
.rp-venue .a { grid-column: 3; grid-row: 1 / 3; font-size: 21px; font-weight: 850; color: var(--rp-gold); letter-spacing: -.4px; text-shadow: 0 2px 2px #0009; white-space: nowrap; }
.rp-venue .a .c { font-size: .55em; opacity: .75; }
.rp-venue .m { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #c9d5e4; }
.rp-venue.copper-amt .a { color: #ffc6ae; }
/* share meter: fill in the venue's chart hue, track a darker step of the same hue */
.rp-meter { flex: 1; height: 6px; border-radius: 3px; background: #0c1624; box-shadow: inset 0 1px 2px #000a; overflow: hidden; }
.rp-meter > i { display: block; height: 100%; border-radius: 3px; background: var(--rp-rhino); transform-origin: left; animation: rpGrowX .7s cubic-bezier(.2,.8,.2,1) both; }
.rp-venue.shooters .rp-meter { background: #1d0e15; }
.rp-venue.shooters .rp-meter > i { background: var(--rp-shoot); }
@keyframes rpGrowX { from { transform: scaleX(0); } }

/* Secondary stat tiles — raised slate, figures in ink; colour only on the small key. */
.rp-stat {
    position: relative; padding: 11px 13px 12px; border-radius: 13px;
    border: 1px solid #8aa3c02e;
    background: radial-gradient(ellipse at 20% 0, #ffffff0c, transparent 65%), linear-gradient(145deg, #303c4e 0%, #1a2433 42%, #101722 100%);
    box-shadow: inset 0 1px 0 #ffffff1f, inset 0 -2px 0 #080f19, 0 3px 0 #070d16, 0 7px 10px #0006;
    min-width: 0;
}
.rp-stat .k { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--rp-ink-2); }
.rp-stat .k::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--dot, #7d8ba0); box-shadow: 0 0 6px var(--dot, transparent); }
.rp-stat .v { margin-top: 5px; font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: var(--rp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-stat .v .c { font-size: .6em; opacity: .65; }
.rp-stat .s { margin-top: 2px; font-size: 10.5px; color: var(--rp-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-stat.good { --dot: var(--rp-good); } .rp-stat.bad { --dot: var(--rp-bad); } .rp-stat.rhino { --dot: var(--rp-rhino); }
.rp-stat.shoot { --dot: var(--rp-shoot); } .rp-stat.warn { --dot: var(--rp-warn); } .rp-stat.tabs { --dot: var(--rp-tabs); }
.rp-stat.exp { --dot: var(--rp-exp); } .rp-stat.pay { --dot: var(--rp-pay); } .rp-stat.gold { --dot: var(--rp-gold); }
.rp-progress { margin-top: 8px; height: 6px; border-radius: 3px; background: #0c1624; box-shadow: inset 0 1px 2px #000a; overflow: hidden; }
.rp-progress > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #b7822f, #ffdb83); transform-origin: left; animation: rpGrowX .8s cubic-bezier(.2,.8,.2,1) both; }

/* ─── Cards (raised) holding wells (recessed) ───────────────────────────── */
.rp-grid { display: grid; gap: 12px; }
.rp-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-grid.cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rp-grid.cols-2-1 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.rp-card {
    position: relative; min-width: 0; display: flex; flex-direction: column;
    padding: 12px; border-radius: 18px; border: 1px solid var(--rp-edge);
    background: var(--rp-raised); box-shadow: var(--rp-raised-shadow);
}
.rp-card-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 2px 10px; min-height: 22px; }
.rp-card-h .ttl {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 850; letter-spacing: 1.4px; text-transform: uppercase; color: var(--rp-ink-2);
    white-space: nowrap;
}
.rp-card-h .ttl::before {
    content: ''; width: 15px; height: 15px; background: currentColor;
    -webkit-mask: var(--ico, var(--ico-chart)) center / contain no-repeat; mask: var(--ico, var(--ico-chart)) center / contain no-repeat;
}
.rp-card-h .aside { margin-left: auto; font-size: 11px; color: var(--rp-ink-3); display: flex; align-items: center; gap: 12px; }
/* the three column semantics, exactly as on the live cards */
.rp-card.tabs .rp-card-h .ttl { color: var(--rp-tabs); --ico: var(--ico-receipt); }
.rp-card.exp .rp-card-h .ttl { color: var(--rp-exp); --ico: var(--ico-wallet); }
.rp-card.pay .rp-card-h .ttl { color: var(--rp-pay); --ico: var(--ico-coins); }
.rp-count {
    min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; display: inline-grid; place-items: center;
    font-size: 10px; font-weight: 800; color: var(--rp-ink); background: #0b121d; box-shadow: inset 0 1px 2px #000a;
    font-variant-numeric: tabular-nums;
}
.rp-foot {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    margin-top: 10px; padding: 0 4px; font-size: 11px; color: var(--rp-ink-2); letter-spacing: .4px;
}
.rp-foot b { font-size: 15px; color: var(--rp-ink); font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.rp-card.tabs .rp-foot b { color: var(--rp-tabs); }
.rp-card.exp .rp-foot b { color: var(--rp-exp); }
.rp-card.pay .rp-foot b { color: var(--rp-pay); }

.rp-well {
    position: relative; border-radius: 11px; background: var(--rp-well);
    border: 1px solid #080e17; box-shadow: inset 0 2px 4px #0009, 0 1px 0 #ffffff0f;
    overflow: hidden;
}
.rp-scroll { max-height: 440px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2b3a50 transparent; }
.rp-scroll.short { max-height: 300px; }

/* Legend: always there for two series, rect keys for bars (text never wears the series colour) */
.rp-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--rp-ink-2); }
.rp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rp-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.rp-legend i.hatch { background: repeating-linear-gradient(45deg, var(--k) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--k); }
.rp-legend i.line { width: 14px; height: 2px; border-radius: 1px; }

/* ─── Tables ─────────────────────────────────────────────────────────────── */
.rp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.rp-table thead th {
    position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap;
    padding: 8px 12px; font-size: 9px; font-weight: 850; letter-spacing: 1.3px; text-transform: uppercase; color: #a4b5cc;
    background: var(--rp-strip); box-shadow: inset 0 -1px 0 #ffffff0a, 0 1px 2px rgba(0,0,0,.45);
}
.rp-table td { padding: 8px 12px; border-bottom: 1px solid #ffffff08; color: #d8e1ec; }
.rp-table tbody tr:nth-child(even) td { background: #ffffff04; }
.rp-table tbody tr:last-child td { border-bottom: none; }
.rp-table .r { text-align: right; }
.rp-table .num, .rp-table .r { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-table .dim { color: var(--rp-ink-3); }
.rp-table .strong { color: var(--rp-ink); font-weight: 750; }
.rp-table .c { opacity: .55; font-size: .9em; }
.rp-table tr.rp-row { cursor: pointer; transition: background .12s ease; }
@media (hover: hover) { .rp-table tr.rp-row:hover td { background: #ffffff0b; } }
.rp-table tr.rp-row.is-sel td { background: #22314a; color: var(--rp-ink); }
.rp-table tr.rp-row.is-sel td:first-child { box-shadow: inset 3px 0 0 #9fc2ea; }
.rp-table tr.is-zero td { color: #56647a; }
.rp-table tr.is-proj td { color: #b6c3d4; font-style: italic; }
.rp-table tr.is-today td { background: #1b2a1f; }
.rp-empty { padding: 26px 16px; text-align: center; font-size: 12px; color: var(--rp-ink-3); letter-spacing: .3px; }

/* venue dot + name */
.rp-v { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.rp-v::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rp-rhino-tint); box-shadow: 0 0 0 2px #0b121d, 0 0 6px #89d9ff66; flex: none; }
.rp-v.shooters::before { background: var(--rp-shoot-tint); box-shadow: 0 0 0 2px #0b121d, 0 0 6px #ffa4b566; }

/* data bar behind an amount: share of the biggest row, in the column's own hue */
.rp-db { position: relative; }
.rp-db > i {
    position: absolute; right: 6px; top: 50%; height: 18px; transform: translateY(-50%); border-radius: 5px;
    width: var(--w); background: var(--rp-dbc, rgba(255,160,145,.16)); pointer-events: none;
}
.rp-db > span { position: relative; }

/* type chip for payouts */
.rp-chip { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .8px; color: #c9d4e2; background: #1b2433; box-shadow: inset 0 1px 0 #ffffff12; }
.rp-chip.iou { color: #ffd3a3; background: #3a2615; }
.rp-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 750; letter-spacing: .5px; color: var(--rp-ink-2); font-style: normal; }
.rp-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rp-status.actual { color: #8fb4dd; } .rp-status.proj { color: #c8b27a; } .rp-status.today { color: var(--rp-good); } .rp-status.none { color: #56647a; }

.rp-link {
    display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
    border: 1px solid #b5cbe41a; background: linear-gradient(145deg, #2a3446, #141c29); color: var(--rp-ink-2);
    box-shadow: inset 0 1px 0 #ffffff14, 0 2px 0 #080f19; padding: 0;
}
.rp-link svg { width: 12px; height: 12px; }
.rp-link:hover { color: var(--rp-ink); filter: brightness(1.2); }

/* ─── Charts ─────────────────────────────────────────────────────────────── */
.rp-chart { position: relative; padding: 10px 8px 4px; }
.rp-chart svg { display: block; width: 100%; overflow: visible; }
.rp-chart .grid line { stroke: #ffffff10; stroke-width: 1; shape-rendering: crispEdges; }
.rp-chart .axis text { fill: #7b8aa0; font-size: 10px; font-variant-numeric: tabular-nums; }
.rp-chart .axis text.hot { fill: var(--rp-ink); font-weight: 800; }
.rp-chart .bar { transition: opacity .15s ease, filter .15s ease; }
.rp-chart .col { transform-box: fill-box; transform-origin: bottom; animation: rpGrowY .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rpGrowY { from { transform: scaleY(0); } }
.rp-chart.no-anim .col { animation: none; }
.rp-chart.dimmed .col:not(.is-hot) .bar { opacity: .38; }
.rp-chart .col.is-hot .bar, .rp-chart .col:hover .bar { filter: brightness(1.22); }
.rp-chart .rp-bar-hit { fill: transparent; cursor: pointer; }
.rp-chart .rp-bar-hit:focus { outline: none; }
.rp-chart .ghost { stroke: #c9d4e2; stroke-width: 2; stroke-linecap: round; opacity: .55; }
.rp-chart .today-line { stroke: var(--rp-good); stroke-width: 1; stroke-dasharray: 0; opacity: .7; }
.rp-chart .today-lbl { fill: var(--rp-good); font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.rp-chart .val-lbl { fill: var(--rp-ink); font-size: 10px; font-weight: 750; font-variant-numeric: tabular-nums; }

/* One tooltip, every series; value first, label second. Lives on <body>. */
.rp-tip {
    position: fixed; z-index: 3000; pointer-events: none; min-width: 150px; padding: 9px 11px;
    border-radius: 11px; border: 1px solid #b5cbe42a;
    background: linear-gradient(160deg, rgba(34,44,62,.97), rgba(12,17,27,.97));
    box-shadow: 0 14px 30px #000b, inset 0 1px 0 #ffffff14;
    color: var(--rp-ink, #eaf1fa); font-size: 11.5px; opacity: 0; transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
}
.rp-tip.on { opacity: 1; transform: none; }
.rp-tip .h { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #9fb0c6; margin-bottom: 6px; }
.rp-tip .row { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.rp-tip .row i { width: 12px; height: 2.5px; border-radius: 2px; background: var(--k); flex: none; }
.rp-tip .row b { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.rp-tip .row span { color: #9fb0c6; }
.rp-tip .tot { margin-top: 6px; padding-top: 6px; border-top: 1px solid #ffffff14; display: flex; justify-content: space-between; gap: 12px; }
.rp-tip .tot b { color: #ffdb83; font-variant-numeric: tabular-nums; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .rp-grid.cols-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .rp-grid.cols-3 > .rp-card.pay { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
    .rp-kpis, .rp-kpis.rp-kpis-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .rp-kpis > .rp-ingot { grid-column: 1 / -1; }
    .rp-grid.cols-2, .rp-grid.cols-2-1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .rp-page { padding-left: 8px; padding-right: 8px; }
    .rp-wrap, .rp-body { gap: 11px; }
    .rp-head { gap: 10px; }
    .rp-ctrl { width: 100%; }
    .rp-period { flex: 1; min-width: 0; }
    .rp-title { font-size: 17px; }
    .rp-ico { width: 38px; height: 36px; }
    .rp-ingot { min-height: 84px; padding-left: 56px; }
    .rp-ingot::before { left: 15px; width: 28px; height: 28px; }
    .rp-ingot .v { font-size: 29px; }
    .rp-kpis { gap: 9px; }
    /* two plates side by side at ~170px each: name on top, the amount gets its own line */
    .rp-venue { padding: 10px; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 7px; row-gap: 5px; }
    .rp-venue::before { grid-row: 1; width: 22px; height: 22px; -webkit-mask-size: 19px; mask-size: 19px; }
    .rp-venue .n { grid-column: 2; grid-row: 1; font-size: 10px; line-height: 1.25; overflow-wrap: normal; }
    .rp-venue .t { display: none; }
    .rp-venue .a { grid-column: 1 / -1; grid-row: 2; font-size: 18px; }
    .rp-venue .m { grid-column: 1 / -1; grid-row: 3; margin-top: 0; gap: 6px; font-size: 10px; }
    .rp-grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
    .rp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .rp-stat .v { font-size: 16px; }
    .rp-card { padding: 10px; border-radius: 16px; }
    .rp-table { font-size: 12px; }
    .rp-table td, .rp-table thead th { padding: 7px 8px; }
    .rp-hide-sm { display: none; }
    .rp-pop { right: auto; left: 50%; transform: translateX(-50%); }
    .rp-pop.open { animation: none; }
}
/* Ultrawide: the same zoom-up idea the camera rail uses, on the report column only.
   No backdrop-filter anywhere in this file, so zoom is safe here. */
@media (min-width: 2600px) { .rp-wrap { zoom: 1.3; } }
@media (min-width: 3800px) { .rp-wrap { zoom: 1.6; } }
@media (min-width: 4800px) { .rp-wrap { zoom: 1.9; } }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN — a lit plaque on the same glass, with a touch keypad on phones.
   ═══════════════════════════════════════════════════════════════════════════ */
#loginScreen {
    position: relative; overflow: hidden; gap: 0;
    background: linear-gradient(112deg, #161d28 0%, #0b1019 42%, #05080e 73%, #0b1017 100%);
}
#loginScreen::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(560px 460px at 18% 20%, rgba(62,70,168,.38), transparent 72%),
        radial-gradient(520px 420px at 85% 12%, rgba(20,122,148,.30), transparent 72%),
        radial-gradient(600px 480px at 50% 105%, rgba(150,102,44,.30), transparent 72%),
        linear-gradient(112deg, transparent 8%, rgba(239,246,255,.07) 12%, transparent 26%);
}
.lg-card {
    position: relative; z-index: 1; width: min(340px, calc(100vw - 32px));
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 26px 22px 22px; border-radius: 24px; border: 1px solid var(--rp-edge);
    background: var(--rp-raised); box-shadow: var(--rp-raised-shadow), 0 30px 60px #0009, 0 0 40px rgba(212,160,23,.08);
    animation: rpIn .45s cubic-bezier(.2,.8,.2,1) both;
}
.lg-card.shake { animation: lgShake .42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes lgShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
#loginScreen .lg-logo { width: 76px; height: 76px; border-radius: 20px; box-shadow: inset 0 1px 0 #fff4, 0 4px 0 #080e17, 0 12px 22px #000a, 0 0 26px rgba(212,160,23,.18); }
#loginScreen .lg-title { margin: 0; font-size: 21px; font-weight: 850; letter-spacing: 1.2px; color: #ffd66b; text-shadow: 0 0 12px rgba(212,160,23,.4), 0 2px 3px #000; }
.lg-sub { margin-top: -8px; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--rp-ink-3); }
#loginScreen .login-input {
    width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; font-size: 22px; letter-spacing: 6px; text-align: center;
    color: #f4f7fb; background: var(--rp-well); border: 1px solid #080e17;
    box-shadow: inset 0 2px 5px #000b, 0 1px 0 #ffffff12; backdrop-filter: none;
}
#loginScreen .login-input::placeholder { letter-spacing: 1.5px; font-size: 14px; color: #52627a; }
#loginScreen .login-input:focus { border-color: #b7822f; box-shadow: inset 0 2px 5px #000b, 0 0 0 3px rgba(212,160,23,.18); }
.lg-pad { display: none; width: 100%; grid-template-columns: repeat(3, 1fr); gap: 9px; }
@media (pointer: coarse) { .lg-pad { display: grid; } }
.lg-key {
    height: 52px; border-radius: 14px; font: inherit; font-size: 21px; font-weight: 700; color: #e6edf6; cursor: pointer;
    border: 1px solid #b5cbe421; background: var(--rp-key); box-shadow: var(--rp-key-shadow);
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.lg-key:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #ffffff21, 0 1px 0 #080f19; filter: brightness(1.2); }
.lg-key.fn { font-size: 12px; letter-spacing: 1px; color: var(--rp-ink-2); }
.lg-key svg { width: 22px; height: 22px; vertical-align: middle; }
#loginScreen .login-remember { position: relative; align-self: stretch; justify-content: space-between; font-size: 12.5px; color: var(--rp-ink-2); cursor: pointer; user-select: none; }
#loginScreen .login-remember input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lg-switch { position: relative; width: 40px; height: 22px; border-radius: 11px; background: #0b121d; box-shadow: inset 0 2px 4px #000a, 0 1px 0 #ffffff10; transition: background .18s ease; flex: none; }
.lg-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(145deg, #5a6a82, #2a3446); box-shadow: 0 2px 3px #0008, inset 0 1px 0 #ffffff30; transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s; }
#loginScreen .login-remember input:checked + .lg-switch { background: #3b2d10; }
#loginScreen .login-remember input:checked + .lg-switch::after { transform: translateX(18px); background: linear-gradient(145deg, #ffe6a8, #c99236); }
#loginScreen .login-remember input:focus-visible + .lg-switch { outline: 2px solid #ffdb83; outline-offset: 2px; }
#loginScreen .login-btn.lg-unlock {
    width: 100%; height: 50px; padding: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 9px;
    font-size: 14px; font-weight: 850; letter-spacing: 2px; color: #352109; text-shadow: 0 1px 0 #fff0b2;
    border: 1px solid #ffe5a6; border-bottom-color: #916221;
    background: radial-gradient(ellipse at 25% 0, #fff1bf, transparent 60%), linear-gradient(112deg, #b57c27, #f6d57b 26%, #e5b34f 60%, #b7822f);
    box-shadow: inset 0 1px 0 #fff3c7, inset 0 -2px 0 #98651b, 0 3px 0 #644313, 0 5px 0 #080d14, 0 10px 18px #0007;
    transform: none;
}
#loginScreen .login-btn.lg-unlock::before { content: ''; width: 16px; height: 16px; background: #5a3b10; -webkit-mask: var(--ico-lock) center / contain no-repeat; mask: var(--ico-lock) center / contain no-repeat; }
#loginScreen .login-btn.lg-unlock:hover { filter: brightness(1.06); transform: none; box-shadow: inset 0 1px 0 #fff3c7, inset 0 -2px 0 #98651b, 0 3px 0 #644313, 0 5px 0 #080d14, 0 12px 22px #0008; }
#loginScreen .login-btn.lg-unlock:active { transform: translateY(2px); }
#loginScreen .login-btn.lg-unlock:disabled { filter: saturate(.4) brightness(.8); }
#loginScreen .login-error { min-height: 18px; height: auto; font-size: 12.5px; font-weight: 650; color: var(--rp-bad); text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   MENU DRAWER
   ═══════════════════════════════════════════════════════════════════════════ */
#menuDrawer.menu-drawer {
    width: 312px; right: -340px; display: flex; flex-direction: column;
    border-left: 1px solid var(--rp-edge);
    background: radial-gradient(ellipse at 0% 0%, rgba(160,197,236,.10), transparent 50%), linear-gradient(160deg, #1d2634, #0e141e 70%);
    box-shadow: -18px 0 44px #000b, inset 1px 0 0 #ffffff10;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
#menuDrawer.menu-drawer.open { right: 0; }
.mn-head { display: flex; align-items: center; gap: 12px; padding: 18px 16px 14px; padding-top: calc(18px + env(safe-area-inset-top)); }
.mn-head img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 3px 0 #080e17, 0 8px 14px #0008; }
.mn-head .t { font-size: 16px; font-weight: 850; color: #ffd66b; letter-spacing: .5px; }
.mn-head .r { margin-top: 2px; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rp-ink-3); }
.mn-sec { padding: 14px 18px 7px; font-size: 9.5px; font-weight: 850; letter-spacing: 1.8px; text-transform: uppercase; color: #7f8ea3; }
.mn-item {
    display: flex; align-items: center; gap: 12px; width: calc(100% - 20px); margin: 0 10px 5px; padding: 8px 10px;
    border-radius: 13px; border: 1px solid transparent; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--rp-ink);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.mn-item .k {
    flex: none; width: 34px; height: 32px; border-radius: 10px; display: grid; place-items: center;
    border: 1px solid #b5cbe421; background: var(--rp-key); box-shadow: inset 0 1px 0 #ffffff21, 0 2px 0 #080f19, 0 4px 6px #0005;
}
.mn-item .k::before { content: ''; width: 17px; height: 17px; background: #c3cfdf; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.mn-item .l { display: flex; flex-direction: column; min-width: 0; }
.mn-item .l b { font-size: 13.5px; font-weight: 700; }
.mn-item .l span { font-size: 10.5px; color: var(--rp-ink-3); margin-top: 1px; }
@media (hover: hover) { .mn-item:hover { background: #ffffff08; border-color: #ffffff0c; transform: translateX(-2px); } }
.mn-item.on { background: linear-gradient(90deg, rgba(212,160,23,.14), rgba(212,160,23,.03)); border-color: rgba(241,196,111,.22); }
.mn-item.on .k { border-color: #f1c46f80; background: linear-gradient(145deg, #705b33, #312819); box-shadow: inset 0 1px 0 #ffe7ac55, 0 2px 0 #120f09, 0 0 14px #efb33d24; }
.mn-item.on .k::before { background: #ffd66b; }
.mn-item.on .l b { color: #ffe3a1; }
.mn-foot { margin-top: auto; padding: 12px 10px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #ffffff0a; }
.mn-item.out .k::before { background: #ff9a8c; }
.mn-item.out .l b { color: #ffb3a8; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMMAND CENTER (#pageLogs) — same shell as the reports
   ═══════════════════════════════════════════════════════════════════════════ */
#pageLogs .cc-health { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
#pageLogs .cc-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; color: var(--rp-good); }
#pageLogs .cc-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: livePulse 1.8s ease-in-out infinite; }
.cc-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.cc-btn {
    height: 38px; padding: 0 16px; border-radius: 11px; font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: .8px; cursor: pointer;
    color: #ffd9d2; border: 1px solid #ff9a8c40; background: linear-gradient(145deg, #7a2f2a, #3d1614); box-shadow: inset 0 1px 0 #ffffff22, 0 3px 0 #1a0807, 0 6px 10px #0006;
}
.cc-btn.send { color: #d7ecff; border-color: #87d5ff40; background: linear-gradient(145deg, #25507a, #122a42); box-shadow: inset 0 1px 0 #ffffff22, 0 3px 0 #07121d, 0 6px 10px #0006; }
.cc-btn:active { transform: translateY(2px); }
.cc-input {
    width: 100%; padding: 10px 12px; border-radius: 11px; font: inherit; font-size: 12.5px; color: var(--rp-ink);
    background: var(--rp-well); border: 1px solid #080e17; box-shadow: inset 0 2px 4px #0009, 0 1px 0 #ffffff0f; outline: none; resize: none;
}
.cc-input:focus { border-color: #3d5f86; }
.cc-bc { display: flex; flex-direction: column; gap: 8px; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-user {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; min-width: 0;
    background: linear-gradient(145deg, #243042, #131b28); border: 1px solid #8aa3c02a; box-shadow: inset 0 1px 0 #ffffff14, 0 2px 0 #070d16;
    font-size: 11.5px; flex: 1 1 280px;
}
.cc-user .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rp-good); box-shadow: 0 0 8px var(--rp-good); flex: none; }
.cc-user .role { font-weight: 800; }
.cc-user .meta { color: var(--rp-ink-3); font-size: 10.5px; }
.cc-user .page { color: #9fc2ea; font-size: 10.5px; }
.cc-user .when { margin-left: auto; color: var(--rp-ink-3); font-size: 10px; white-space: nowrap; }
.cc-geo { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 4px; font-size: 9px; font-weight: 800; color: #d5afff; background: #251a3a; vertical-align: 1px; }
.cc-geo.lan { color: var(--rp-good); background: #0f2a1d; }
.cc-alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-radius: 11px; font-size: 11.5px; background: #2a1414; border: 1px solid #ff7b6b40; }
.cc-alert b { color: #ff9a8c; }
.cc-alert .when { margin-left: auto; color: var(--rp-ink-3); font-size: 10px; }
.cc-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 10px; font-size: 11px; background: #131b28; border: 1px solid #8aa3c022; }
.cc-pill b { font-variant-numeric: tabular-nums; color: var(--rp-ink); }
.cc-pill i { width: 8px; height: 8px; border-radius: 2px; background: var(--k, #7d8ba0); }
.cc-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-filters .rp-chip { cursor: pointer; padding: 6px 12px; font-size: 10.5px; border: 1px solid #b5cbe41a; background: linear-gradient(145deg, #2a3446, #141c29); box-shadow: inset 0 1px 0 #ffffff14, 0 2px 0 #080f19; font-family: inherit; }
.cc-filters .rp-chip.on { color: #332004; border-color: #4a3308; background: linear-gradient(180deg, #ffe6a8, #e5b34f 55%, #b7822f); text-shadow: 0 1px 0 #fff2be99; }
.cc-feed .ev { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #ffffff08; font-size: 11.5px; }
.cc-feed .ev:nth-child(even) { background: #ffffff04; }
.cc-feed .ev.new { animation: logSlideIn .5s ease-out; background: #14261c; }
.cc-feed .ev.fail { background: #2a1414; }
.cc-feed .ev.err { background: #331010; }
.cc-feed .ev .ic { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #1a2433; box-shadow: inset 0 1px 0 #ffffff12; }
.cc-feed .ev .ic::before { content: ''; width: 14px; height: 14px; background: var(--k, #9fb0c6); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.cc-feed .ev .who { font-weight: 800; }
.cc-feed .ev .what { color: var(--rp-ink-2); }
.cc-feed .ev .meta { color: var(--rp-ink-3); font-size: 10px; margin-top: 2px; overflow-wrap: anywhere; }
.cc-feed .ev .t { margin-left: auto; flex: none; color: var(--rp-ink-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { #pageLogs .cc-health { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { #pageLogs .cc-health { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═══════════════════════════════════════════════════════════════════════════
   NOTIFICATIONS + OPS CHAT sheets
   ═══════════════════════════════════════════════════════════════════════════ */
.notif-panel { background: rgba(3,6,11,.62); }
.notif-panel .notif-box {
    border-radius: 20px; border: 1px solid var(--rp-edge);
    background: var(--rp-raised); box-shadow: var(--rp-raised-shadow), 0 30px 60px #000a;
}
.notif-panel .notif-header { padding: 14px 16px; border-bottom: 1px solid #ffffff0c; }
.notif-panel .notif-header-title { font-size: 13px; font-weight: 850; letter-spacing: 1.3px; text-transform: uppercase; color: #ffd66b; }
#opsChatPanel .notif-header-title { color: #9fd3ff; }
.notif-panel .notif-close { width: 32px; height: 32px; border-radius: 10px; border: 1px solid #b5cbe421; background: var(--rp-key); box-shadow: var(--rp-key-shadow); color: var(--rp-ink-2); font-size: 18px; line-height: 1; }
.notif-panel .notif-list { background: #0b121d99; }
.nt-tabs { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #ffffff0a; }
.nt-tabs button { flex: 1; height: 32px; border-radius: 10px; font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: .8px; cursor: pointer; color: var(--rp-ink-2); border: 1px solid #b5cbe41a; background: linear-gradient(145deg, #2a3446, #141c29); box-shadow: inset 0 1px 0 #ffffff14, 0 2px 0 #080f19; }
.nt-tabs button.on { color: #332004; border-color: #4a3308; background: linear-gradient(180deg, #ffe6a8, #e5b34f 55%, #b7822f); }
.notif-panel .notif-item {
    position: relative; padding: 10px 12px 10px 16px; margin-bottom: 7px; border-radius: 12px;
    background: linear-gradient(145deg, #243042, #131b28); border: 1px solid #8aa3c022; border-left: none;
    box-shadow: inset 0 1px 0 #ffffff12, 0 2px 0 #070d16;
}
.notif-panel .notif-item::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--k, #7d8ba0); }
.notif-panel .notif-item.BigPayout, .notif-panel .notif-item.LowBattery { --k: var(--rp-warn); }
.notif-panel .notif-item.LowFloat, .notif-panel .notif-item.FailedLogin, .notif-panel .notif-item.SystemError { --k: var(--rp-bad); }
.notif-panel .notif-item.EndOfDaySummary { --k: var(--rp-good); }
.notif-panel .notif-item.AdminBroadcast { --k: #9fd3ff; }
.notif-panel .notif-item.read { opacity: .6; }
.notif-panel .notif-title { font-size: 12.5px; }
.notif-panel .notif-msg { font-size: 11.5px; color: var(--rp-ink-2); overflow-wrap: anywhere; }
.nt-tag { margin-left: 6px; font-size: 9px; font-weight: 800; letter-spacing: .8px; color: #f0a52e; }
.nt-tag.read { color: var(--rp-good); }
.oc-msg { max-width: 82%; padding: 8px 12px 9px; border-radius: 14px; font-size: 12.5px; line-height: 1.35; color: #eef3f9; overflow-wrap: anywhere; box-shadow: inset 0 1px 0 #ffffff18, 0 2px 0 #070d16; }
.oc-msg .who { display: block; margin-bottom: 2px; font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #9fb0c6; }
.oc-msg.bar { align-self: flex-start; border-bottom-left-radius: 5px; background: linear-gradient(145deg, #2c3a50, #18212f); }
.oc-msg.home { align-self: flex-end; border-bottom-right-radius: 5px; background: linear-gradient(145deg, #2f6aa3, #1b4169); }
.oc-msg.home .who { color: #cfe6ff; }
.oc-compose { padding: 10px; border-top: 1px solid #ffffff0c; display: flex; gap: 8px; }
.oc-compose .cc-input { flex: 1; }

@media (prefers-reduced-motion: reduce) {
    .rp-page.active .rp-head, .rp-page.active .rp-body > *, .rp-chart .col, .rp-meter > i, .rp-progress > i, .rp-ingot::after,
    .lg-card, .lg-card.shake, .rp-pop.open, .cc-feed .ev.new, #pageLogs .cc-live::before { animation: none !important; }
    .mn-item, .rp-key, .lg-switch::after { transition: none !important; }
}