/*
===============================================================================
RRP UI SYSTEM v0.6.2101(rrp)
===============================================================================

PURPOSE
-------
This file is the shared visual operating system for RRP Control, standalone apps,
Beaver Builder embeds and future mobile webviews. Brand themes are allowed to
change approved colors, logos and data. Component geometry and interaction rules
stay consistent so the ecosystem feels intentionally related instead of almost
matching.

VISUAL RULES
------------
1. Graphite/black is the structural layer.
2. Ultraviolet identifies the RRP command layer.
3. Signal green communicates live, active and successful states.
4. Founder gold is restrained and informational.
5. Rose/red is semantic only: errors, warnings, revoked access and destruction.
6. No random cultural, religious or language imagery is used as decoration.
7. Motion enhances hierarchy; it must never prevent reading or navigation.
*/

:root {
    --rrp-bg: #050609;
    --rrp-bg-2: #080a10;
    --rrp-panel: #0d1119;
    --rrp-panel-2: #121824;
    --rrp-panel-3: #171e2b;
    --rrp-line: #252d3d;
    --rrp-line-2: #3a465d;
    --rrp-text: #f5f7fb;
    --rrp-muted: #8f99ab;
    --rrp-primary: #745cff;
    --rrp-signal: #b9ff35;
    --rrp-accent: #e2bf59;
    --rrp-danger: #ff6f72;
    --rrp-radius: 14px;
    --rrp-radius-large: 22px;
    --rrp-sidebar: 258px;
    --rrp-shadow: 0 28px 90px rgba(0, 0, 0, .55);
    --rrp-glow: 0 0 32px color-mix(in srgb, var(--rrp-primary) 24%, transparent);
}

* { box-sizing: border-box; }
html { background: var(--rrp-bg); scroll-behavior: smooth; }
body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--rrp-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 82% -12%, color-mix(in srgb, var(--rrp-primary) 18%, transparent), transparent 30%),
        radial-gradient(circle at 4% 84%, color-mix(in srgb, var(--rrp-signal) 6%, transparent), transparent 28%),
        linear-gradient(180deg, var(--rrp-bg), var(--rrp-bg-2));
}

/* Crisp technical grid; deliberately low contrast and never grainy. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .32;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, #000, transparent 94%);
}

/* A slow scanner supplies motion without changing layout or distracting text. */
body::after {
    content: "";
    position: fixed;
    inset: -30% 0 auto;
    z-index: -1;
    height: 36%;
    pointer-events: none;
    opacity: .15;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--rrp-primary) 36%, transparent), transparent);
    animation: rrp-page-scan 13s linear infinite;
}

@keyframes rrp-page-scan {
    from { transform: translateY(-120vh); }
    to { transform: translateY(180vh); }
}

@keyframes rrp-signal-pulse {
    0%, 100% { opacity: .35; transform: scaleX(.72); }
    50% { opacity: 1; transform: scaleX(1); }
}

@keyframes rrp-orbit {
    to { transform: rotate(360deg); }
}

@keyframes rrp-edge-run {
    from { transform: translateX(-130%); }
    to { transform: translateX(360%); }
}

@keyframes rrp-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

button, input, select, textarea { font: inherit; }
a { color: inherit; }
code { color: #c8c0ff; }

.rrp-skip {
    position: fixed;
    left: 12px;
    top: -100px;
    z-index: 999;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--rrp-signal);
    color: #070907;
}
.rrp-skip:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Top command bar and approved Russell Rope brand asset
   -------------------------------------------------------------------------- */
.rrp-topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    min-height: 68px;
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 0 clamp(14px, 3vw, 34px);
    border-bottom: 1px solid rgba(70, 82, 108, .52);
    background: rgba(5, 6, 9, .88);
    backdrop-filter: blur(20px) saturate(125%);
}
.rrp-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rrp-primary), var(--rrp-signal), transparent);
    opacity: .45;
}
.rrp-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.rrp-brand-logo-shell {
    width: 82px;
    height: 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--rrp-line-2);
    border-radius: 10px 2px 10px 2px;
    background: linear-gradient(145deg, rgba(23, 30, 43, .92), rgba(7, 9, 14, .98));
    box-shadow: inset 0 0 24px color-mix(in srgb, var(--rrp-primary) 10%, transparent), var(--rrp-glow);
}
.rrp-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px 6px;
}
.rrp-brand-fallback {
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
}
.rrp-brand-copy { display: grid; min-width: 0; }
.rrp-brand-copy strong { font-size: .82rem; letter-spacing: .11em; }
.rrp-brand-copy small { margin-top: 2px; color: var(--rrp-muted); font-size: .49rem; letter-spacing: .18em; }
.rrp-top-actions { display: flex; align-items: center; gap: 11px; }
.rrp-top-actions form { margin: 0; }
.rrp-link,
.rrp-lock-button {
    color: #d1d7e1;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-decoration: none;
    transition: color .18s ease, text-shadow .18s ease;
}
.rrp-link:hover,
.rrp-lock-button:hover { color: var(--rrp-signal); text-shadow: 0 0 15px color-mix(in srgb, var(--rrp-signal) 60%, transparent); }
.rrp-lock-button { border: 0; padding: 0; background: none; cursor: pointer; }

.rrp-top-signal {
    justify-self: center;
    width: min(360px, 100%);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    opacity: .55;
}
.rrp-top-signal span {
    height: 2px;
    transform-origin: center;
    background: linear-gradient(90deg, transparent, var(--rrp-primary), var(--rrp-signal), transparent);
    animation: rrp-signal-pulse 2.8s ease-in-out infinite;
}
.rrp-top-signal span:nth-child(2) { animation-delay: .22s; }
.rrp-top-signal span:nth-child(3) { animation-delay: .44s; }
.rrp-top-signal span:nth-child(4) { animation-delay: .66s; }
.rrp-top-signal span:nth-child(5) { animation-delay: .88s; }

/* --------------------------------------------------------------------------
   Buttons and semantic status
   -------------------------------------------------------------------------- */
.rrp-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid transparent;
    border-radius: 3px 12px 3px 12px;
    background: var(--rrp-signal);
    color: #080a08;
    font-size: .67rem;
    font-weight: 950;
    letter-spacing: .1em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.rrp-button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-220%);
}
.rrp-button:hover { transform: translateY(-2px); box-shadow: 0 15px 32px rgba(0,0,0,.4), 0 0 24px color-mix(in srgb, currentColor 12%, transparent); }
.rrp-button:hover::after { animation: rrp-edge-run .75s ease; }
.rrp-button.is-primary { background: var(--rrp-primary); color: #fff; }
.rrp-button.is-ghost { border-color: var(--rrp-line-2); background: rgba(8, 10, 15, .42); color: var(--rrp-text); }
.rrp-button.is-ghost:hover { border-color: var(--rrp-signal); background: color-mix(in srgb, var(--rrp-signal) 6%, transparent); }
.rrp-button.is-danger { border-color: color-mix(in srgb, var(--rrp-danger) 50%, transparent); background: transparent; color: #ffb7b9; }
.rrp-button.is-danger:hover { background: var(--rrp-danger); color: #150708; }
.rrp-button.is-small { min-height: 34px; padding: 6px 11px; font-size: .57rem; }

.rrp-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border: 1px solid var(--rrp-line);
    border-radius: 3px 9px 3px 9px;
    color: #aab3c2;
    font-size: .49rem;
    font-weight: 950;
    letter-spacing: .13em;
    white-space: nowrap;
}
.rrp-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #667085; }
.rrp-status.is-success { border-color: color-mix(in srgb, var(--rrp-signal) 40%, transparent); color: #e4ffb2; }
.rrp-status.is-success::before { background: var(--rrp-signal); box-shadow: 0 0 13px var(--rrp-signal); }
.rrp-status.is-primary { border-color: color-mix(in srgb, var(--rrp-primary) 50%, transparent); color: #ddd7ff; }
.rrp-status.is-primary::before { background: var(--rrp-primary); box-shadow: 0 0 12px var(--rrp-primary); }
.rrp-status.is-warning,
.rrp-status.is-danger { border-color: color-mix(in srgb, var(--rrp-danger) 50%, transparent); color: #ffc4c5; }
.rrp-status.is-warning::before,
.rrp-status.is-danger::before { background: var(--rrp-danger); }

/* --------------------------------------------------------------------------
   Four-line pyramid control
   -------------------------------------------------------------------------- */
.rrp-pyramid {
    width: 42px;
    height: 38px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 9px 2px 9px 2px;
    background: transparent;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.rrp-pyramid:hover,
.rrp-pyramid[aria-expanded="true"] { border-color: var(--rrp-line-2); background: rgba(255,255,255,.025); }
.rrp-pyramid i {
    display: block;
    height: 2px;
    border-radius: 3px;
    background: var(--rrp-text);
    box-shadow: 0 0 8px transparent;
    transition: width .28s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .2s ease;
}
.rrp-pyramid i:nth-child(1) { width: 13px; }
.rrp-pyramid i:nth-child(2) { width: 19px; }
.rrp-pyramid i:nth-child(3) { width: 25px; }
.rrp-pyramid i:nth-child(4) { width: 31px; }
.rrp-pyramid:hover i,
.rrp-pyramid[aria-expanded="true"] i { background: var(--rrp-signal); box-shadow: 0 0 10px color-mix(in srgb, var(--rrp-signal) 55%, transparent); }
.rrp-pyramid:hover i:nth-child(1), .rrp-pyramid[aria-expanded="true"] i:nth-child(1) { width: 31px; }
.rrp-pyramid:hover i:nth-child(2), .rrp-pyramid[aria-expanded="true"] i:nth-child(2) { width: 25px; }
.rrp-pyramid:hover i:nth-child(3), .rrp-pyramid[aria-expanded="true"] i:nth-child(3) { width: 19px; }
.rrp-pyramid:hover i:nth-child(4), .rrp-pyramid[aria-expanded="true"] i:nth-child(4) { width: 13px; }

/* --------------------------------------------------------------------------
   Shared layout and Control navigation
   -------------------------------------------------------------------------- */
.rrp-shell { display: grid; grid-template-columns: var(--rrp-sidebar) minmax(0, 1fr); min-height: calc(100vh - 68px); }
.rrp-sidebar {
    position: sticky;
    top: 68px;
    height: calc(100vh - 68px);
    overflow: auto;
    padding: 16px 12px 24px;
    border-right: 1px solid var(--rrp-line);
    background: linear-gradient(180deg, rgba(10,13,19,.94), rgba(5,7,11,.92));
    backdrop-filter: blur(16px);
}
.rrp-sidebar::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 1px;
    height: 22%;
    background: linear-gradient(transparent, var(--rrp-primary), var(--rrp-signal), transparent);
    animation: rrp-edge-vertical 7s linear infinite;
}
@keyframes rrp-edge-vertical { from { transform: translateY(-130%); } to { transform: translateY(600%); } }

.rrp-sidebar-brand {
    min-height: 72px;
    display: grid;
    place-items: center;
    margin-bottom: 13px;
    padding: 8px;
    overflow: hidden;
    border: 1px solid var(--rrp-line);
    border-radius: 12px 3px 12px 3px;
    background: rgba(255,255,255,.018);
    text-decoration: none;
}
.rrp-sidebar-brand img { width: 100%; max-height: 54px; object-fit: contain; }
.rrp-sidebar-brand span { font-size: .69rem; font-weight: 950; letter-spacing: .12em; }

.rrp-admin-id {
    --mx: 80%;
    --my: 0%;
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 13px;
    border: 1px solid var(--rrp-line);
    border-radius: 12px 3px 12px 3px;
    background: linear-gradient(145deg, rgba(20,25,36,.96), rgba(8,10,15,.98));
}
.rrp-admin-id small { color: var(--rrp-signal); font-size: .51rem; font-weight: 900; letter-spacing: .16em; }
.rrp-admin-id strong { display: block; margin-top: 7px; font-size: .84rem; }
.rrp-admin-id span { color: var(--rrp-muted); font-size: .64rem; }
.rrp-admin-scan {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rrp-primary), var(--rrp-signal), transparent);
    animation: rrp-signal-pulse 2.4s ease-in-out infinite;
}
.rrp-nav-label { padding: 13px 10px 7px; color: #657085; font-size: .49rem; font-weight: 900; letter-spacing: .18em; }
.rrp-nav { display: grid; gap: 5px; }
.rrp-nav a {
    min-height: 46px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 10px 2px 10px 2px;
    color: #b8c0ce;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.rrp-nav a:hover { transform: translateX(3px); border-color: var(--rrp-line); background: rgba(255,255,255,.025); color: #fff; }
.rrp-nav a.is-active {
    border-color: color-mix(in srgb, var(--rrp-primary) 50%, var(--rrp-line));
    background: linear-gradient(90deg, color-mix(in srgb, var(--rrp-primary) 14%, transparent), transparent);
    color: #fff;
    box-shadow: inset 2px 0 var(--rrp-signal);
}
.rrp-nav-monogram {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--rrp-line);
    border-radius: 8px 2px 8px 2px;
    color: var(--rrp-signal);
    font-size: .54rem;
    font-weight: 950;
}
.rrp-nav-copy { display: grid; }
.rrp-nav-copy strong { font-size: .68rem; letter-spacing: .03em; }
.rrp-nav-copy small { color: #697386; font-size: .5rem; }
.rrp-nav-arrow { color: var(--rrp-primary); }
.rrp-sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding: 11px 9px;
    border-top: 1px solid var(--rrp-line);
    color: var(--rrp-muted);
    font-size: .48rem;
    letter-spacing: .12em;
}
.rrp-sidebar-footer strong { color: var(--rrp-signal); }
.rrp-main { min-width: 0; padding: clamp(18px, 3.5vw, 42px); }
.rrp-mobile-dock { display: none; }

/* --------------------------------------------------------------------------
   Shared panels, cards and reactive lighting
   -------------------------------------------------------------------------- */
.rrp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 15px; }
.rrp-span-3 { grid-column: span 3; }
.rrp-span-4 { grid-column: span 4; }
.rrp-span-5 { grid-column: span 5; }
.rrp-span-6 { grid-column: span 6; }
.rrp-span-7 { grid-column: span 7; }
.rrp-span-8 { grid-column: span 8; }
.rrp-span-12 { grid-column: 1 / -1; }

.rrp-panel,
.rrp-card {
    --mx: 80%;
    --my: 0%;
    --rx: 0deg;
    --ry: 0deg;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--rrp-line);
    border-radius: var(--rrp-radius);
    background: linear-gradient(145deg, rgba(17,22,32,.98), rgba(7,9,14,.99));
    box-shadow: 0 13px 38px rgba(0,0,0,.22);
    transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease;
}
.rrp-panel::before,
.rrp-card::before,
.rrp-reactive::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .9;
    background: radial-gradient(430px circle at var(--mx) var(--my), color-mix(in srgb, var(--rrp-primary) 16%, transparent), transparent 45%);
}
.rrp-panel::after,
.rrp-card::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 0;
    width: 36px;
    height: 1px;
    background: var(--rrp-signal);
    box-shadow: calc(100% + 60px) 0 var(--rrp-primary);
    opacity: .7;
}
.rrp-panel { padding: clamp(17px, 2.3vw, 26px); }
.rrp-card { padding: 16px; }
.rrp-panel > *, .rrp-card > * { position: relative; z-index: 1; }
.rrp-card:hover { border-color: var(--rrp-line-2); box-shadow: 0 22px 55px rgba(0,0,0,.35), var(--rrp-glow); }

.rrp-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.rrp-panel-head > div { display: grid; gap: 3px; }
.rrp-panel-head strong { font-size: .67rem; letter-spacing: .12em; }
.rrp-panel-head small { color: var(--rrp-muted); font-size: .56rem; letter-spacing: .05em; }
.rrp-panel-signal { width: 76px; height: 3px; background: linear-gradient(90deg, transparent, var(--rrp-primary), var(--rrp-signal)); animation: rrp-signal-pulse 2.3s ease infinite; }

.rrp-kicker { color: var(--rrp-signal); font-size: .56rem; font-weight: 950; letter-spacing: .2em; }
.rrp-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.rrp-page-head h1,
.rrp-hero h1,
.rrp-command-head h1 { margin: .18em 0 .12em; line-height: .9; letter-spacing: -.065em; text-transform: uppercase; }
.rrp-page-head h1 { font-size: clamp(2.35rem, 5vw, 5rem); }
.rrp-page-head p,
.rrp-hero p,
.rrp-command-head p { max-width: 760px; margin: 0; color: var(--rrp-muted); line-height: 1.65; }

/* --------------------------------------------------------------------------
   Landing command hero
   -------------------------------------------------------------------------- */
.rrp-hero {
    min-height: 590px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 40px;
    position: relative;
    overflow: hidden;
    margin: clamp(14px, 3vw, 38px);
    padding: clamp(28px, 5.5vw, 68px);
    border: 1px solid var(--rrp-line-2);
    border-radius: 26px 4px 26px 4px;
    background: linear-gradient(135deg, rgba(18,23,34,.99), rgba(6,8,12,.99));
    box-shadow: var(--rrp-shadow);
}
.rrp-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .2;
    background-image:
        linear-gradient(color-mix(in srgb, var(--rrp-primary) 30%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--rrp-primary) 22%, transparent) 1px, transparent 1px);
    background-size: 72px 72px;
    transform: perspective(700px) rotateX(62deg) translateY(42%);
    transform-origin: bottom;
}
.rrp-hero-copy,
.rrp-command-array { position: relative; z-index: 2; }
.rrp-hero-brandplate {
    width: min(430px, 90%);
    height: 116px;
    display: grid;
    place-items: center;
    margin: 17px 0 20px;
    padding: 12px 18px;
    overflow: hidden;
    border-left: 2px solid var(--rrp-signal);
    border-right: 1px solid var(--rrp-primary);
    background: linear-gradient(90deg, rgba(255,255,255,.025), transparent);
}
.rrp-hero-brandplate img { width: 100%; height: 100%; object-fit: contain; object-position: left center; filter: drop-shadow(0 0 25px color-mix(in srgb, var(--rrp-primary) 22%, transparent)); }
.rrp-hero-brandplate span { font-size: 1.5rem; font-weight: 950; letter-spacing: .16em; }
.rrp-hero h1 { font-size: clamp(4rem, 8vw, 8rem); }
.rrp-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.rrp-command-array {
    padding: 19px;
    border: 1px solid var(--rrp-line);
    border-radius: 22px 4px 22px 4px;
    background: rgba(6,8,12,.72);
    box-shadow: inset 0 0 70px rgba(0,0,0,.25), var(--rrp-glow);
}
.rrp-command-array-head { display: flex; align-items: center; justify-content: space-between; color: var(--rrp-muted); font-size: .56rem; letter-spacing: .16em; }
.rrp-command-array-head strong { color: var(--rrp-signal); font-size: .74rem; }
.rrp-orbit {
    width: min(260px, 70vw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    position: relative;
    margin: 18px auto;
    border: 1px solid color-mix(in srgb, var(--rrp-primary) 45%, transparent);
    border-radius: 50%;
    box-shadow: inset 0 0 60px color-mix(in srgb, var(--rrp-primary) 8%, transparent), 0 0 70px color-mix(in srgb, var(--rrp-primary) 12%, transparent);
}
.rrp-orbit::before,
.rrp-orbit::after { content: ""; position: absolute; inset: 14%; border: 1px dashed color-mix(in srgb, var(--rrp-signal) 28%, transparent); border-radius: 50%; animation: rrp-orbit 18s linear infinite; }
.rrp-orbit::after { inset: 28%; animation-direction: reverse; animation-duration: 11s; }
.rrp-orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--rrp-signal); box-shadow: 0 0 18px var(--rrp-signal); }
.rrp-orbit i:nth-child(1) { top: 10%; left: 48%; }
.rrp-orbit i:nth-child(2) { right: 12%; top: 47%; background: var(--rrp-primary); box-shadow: 0 0 18px var(--rrp-primary); }
.rrp-orbit i:nth-child(3) { bottom: 9%; left: 43%; background: var(--rrp-accent); box-shadow: 0 0 18px var(--rrp-accent); }
.rrp-orbit i:nth-child(4) { left: 12%; top: 40%; }
.rrp-orbit b { font-size: 2.1rem; letter-spacing: -.08em; text-shadow: 0 0 28px var(--rrp-primary); }
.rrp-signal-stack { display: grid; gap: 8px; }
.rrp-signal-row {
    min-height: 44px;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--rrp-line);
    border-radius: 9px 2px 9px 2px;
    background: rgba(6,8,12,.7);
    font-size: .6rem;
    letter-spacing: .08em;
}
.rrp-signal-row b { color: var(--rrp-signal); }
.rrp-public-modules { padding: 0 clamp(14px, 3vw, 38px) 38px; }
.rrp-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 4px 0 16px; }
.rrp-section-head h2 { margin: 5px 0 0; font-size: clamp(2rem,4vw,3.6rem); letter-spacing: -.055em; text-transform: uppercase; }
.rrp-section-head > span { color: var(--rrp-muted); font-size: .54rem; letter-spacing: .15em; }

/* --------------------------------------------------------------------------
   Control dashboard command header and metrics
   -------------------------------------------------------------------------- */
.rrp-command-head {
    --mx: 80%;
    --my: 0%;
    display: grid;
    grid-template-columns: 180px minmax(0,1fr) auto auto;
    align-items: center;
    gap: 22px;
    position: relative;
    overflow: hidden;
    margin-bottom: 17px;
    padding: 20px;
    border: 1px solid var(--rrp-line-2);
    border-radius: 18px 3px 18px 3px;
    background: linear-gradient(135deg, rgba(20,26,38,.98), rgba(7,9,14,.99));
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.rrp-command-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--rrp-primary), var(--rrp-signal), transparent);
    animation: rrp-signal-pulse 3.2s ease infinite;
}
.rrp-command-logo { height: 92px; display: grid; place-items: center; overflow: hidden; border-right: 1px solid var(--rrp-line); padding-right: 20px; }
.rrp-command-logo img { width: 100%; height: 100%; object-fit: contain; }
.rrp-command-logo span { font-size: 1rem; font-weight: 950; letter-spacing: .12em; }
.rrp-command-copy h1 { font-size: clamp(2.3rem, 4.8vw, 5rem); }
.rrp-command-time { min-width: 130px; display: grid; justify-items: end; }
.rrp-command-time small { color: var(--rrp-muted); font-size: .48rem; letter-spacing: .17em; }
.rrp-command-time strong { color: var(--rrp-signal); font: 950 1.5rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; }
.rrp-command-time span { margin-top: 5px; color: var(--rrp-muted); font-size: .54rem; letter-spacing: .1em; }
.rrp-dashboard-grid { align-items: stretch; }
.rrp-metric-panel { min-height: 150px; display: grid; align-content: end; }
.rrp-metric-index { position: absolute; top: 12px; right: 14px; color: color-mix(in srgb, var(--rrp-primary) 55%, var(--rrp-muted)); font: 700 .56rem/1 ui-monospace, monospace; }
.rrp-metric { font-size: clamp(2.4rem, 4.5vw, 4rem); font-weight: 950; letter-spacing: -.08em; }
.rrp-metric-label { color: var(--rrp-muted); font-size: .55rem; font-weight: 850; letter-spacing: .14em; }
.rrp-meter { height: 3px; margin-top: 12px; overflow: hidden; background: #07090d; }
.rrp-meter i { display: block; width: var(--meter); height: 100%; background: linear-gradient(90deg, var(--rrp-primary), var(--rrp-signal)); box-shadow: 0 0 13px var(--rrp-signal); }
.rrp-boundary-panel p { color: var(--rrp-muted); line-height: 1.65; }
.rrp-boundary-map { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; margin: 16px 0; color: var(--rrp-text); font-size: .55rem; font-weight: 900; letter-spacing: .1em; }
.rrp-boundary-map i { height: 1px; background: linear-gradient(90deg, var(--rrp-primary), var(--rrp-signal)); box-shadow: 0 0 10px var(--rrp-primary); }

/* --------------------------------------------------------------------------
   Module cards, tables, forms and common application components
   -------------------------------------------------------------------------- */
.rrp-module-card { min-height: 146px; display: grid; align-content: space-between; }
.rrp-module-card:hover { transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px); }
.rrp-module-top { display: flex; align-items: flex-start; justify-content: space-between; }
.rrp-module-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--rrp-line-2);
    border-radius: 11px 2px 11px 2px;
    color: var(--rrp-signal);
    font-size: .72rem;
    font-weight: 950;
    box-shadow: inset 0 0 22px color-mix(in srgb, var(--rrp-primary) 10%, transparent);
}
.rrp-module-card h3 { margin: 13px 0 5px; font-size: 1.08rem; }
.rrp-module-card p { margin: 0; color: var(--rrp-muted); font-size: .7rem; line-height: 1.5; }
.rrp-module-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; }
.rrp-module-code { color: #5f697b; font: 700 .48rem/1 ui-monospace, monospace; letter-spacing: .13em; }

.rrp-table-wrap { overflow: auto; border: 1px solid var(--rrp-line); border-radius: 12px 3px 12px 3px; }
.rrp-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.rrp-table th, .rrp-table td { padding: 12px 13px; border-bottom: 1px solid var(--rrp-line); text-align: left; vertical-align: middle; font-size: .67rem; }
.rrp-table th { position: sticky; top: 0; background: #0d1118; color: #7f899a; font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; }
.rrp-table tr:last-child td { border-bottom: 0; }
.rrp-table tbody tr:hover { background: rgba(255,255,255,.018); }
.rrp-form { display: grid; gap: 15px; }
.rrp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.rrp-field { display: grid; gap: 7px; }
.rrp-field.is-full { grid-column: 1 / -1; }
.rrp-field label { color: #d9dee7; font-size: .63rem; font-weight: 850; }
.rrp-field small { color: var(--rrp-muted); font-size: .56rem; line-height: 1.45; }
.rrp-input, .rrp-select, .rrp-textarea {
    width: 100%;
    min-height: 45px;
    padding: 10px 12px;
    border: 1px solid var(--rrp-line);
    border-radius: 9px 2px 9px 2px;
    outline: none;
    background: #07090d;
    color: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.rrp-textarea { min-height: 120px; resize: vertical; }
.rrp-input:focus, .rrp-select:focus, .rrp-textarea:focus { border-color: var(--rrp-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rrp-primary) 13%, transparent), 0 0 24px color-mix(in srgb, var(--rrp-primary) 12%, transparent); }
.rrp-toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 15px; }
.rrp-toolbar .rrp-input, .rrp-toolbar .rrp-select { width: auto; min-width: 150px; }
.rrp-notice { padding: 12px 14px; margin-bottom: 17px; border: 1px solid var(--rrp-line); border-radius: 10px 2px 10px 2px; font-size: .71rem; }
.rrp-global-notice { margin: 14px clamp(14px,3vw,34px) 0; }
.rrp-notice.is-success { border-color: color-mix(in srgb, var(--rrp-signal) 36%, transparent); background: color-mix(in srgb, var(--rrp-signal) 6%, transparent); color: #e4ffaf; }
.rrp-notice.is-error { border-color: color-mix(in srgb, var(--rrp-danger) 48%, transparent); background: color-mix(in srgb, var(--rrp-danger) 7%, transparent); color: #ffc5c7; }
.rrp-empty { min-height: 240px; display: grid; place-items: center; padding: 34px; text-align: center; }
.rrp-empty-mark { width: 68px; height: 68px; display: grid; place-items: center; margin: auto; border: 1px solid var(--rrp-line-2); border-radius: 18px 3px 18px 3px; color: var(--rrp-signal); font-size: 1.05rem; font-weight: 950; box-shadow: inset 0 0 30px color-mix(in srgb, var(--rrp-primary) 11%, transparent); }
.rrp-empty h3 { margin: 16px 0 8px; }
.rrp-empty p { max-width: 520px; color: var(--rrp-muted); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Compact ecosystem switcher
   -------------------------------------------------------------------------- */
.rrp-switcher { position: fixed; inset: 0; z-index: 180; display: none; }
.rrp-switcher.is-open { display: grid; }
.rrp-switcher-backdrop { position: absolute; inset: 0; border: 0; background: rgba(1,2,4,.88); backdrop-filter: blur(18px) saturate(120%); }
.rrp-switcher-panel {
    width: min(1120px, calc(100% - 28px));
    max-height: calc(100vh - 28px);
    overflow: auto;
    position: relative;
    margin: auto;
    padding: clamp(18px, 3.2vw, 34px);
    border: 1px solid var(--rrp-line-2);
    border-radius: 24px 4px 24px 4px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--rrp-primary) 8%, transparent), transparent 35%),
        #080b11;
    box-shadow: var(--rrp-shadow), 0 0 80px color-mix(in srgb, var(--rrp-primary) 13%, transparent);
}
.rrp-switcher-panel::before { content: ""; position: absolute; inset: 10px; pointer-events: none; border: 1px solid rgba(255,255,255,.025); border-radius: 18px 2px 18px 2px; }
.rrp-switcher-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.rrp-switcher-head h2 { margin: 4px 0; font-size: clamp(1.9rem,4vw,3.5rem); letter-spacing: -.06em; text-transform: uppercase; }
.rrp-switcher-head p { margin: 0; color: var(--rrp-muted); font-size: .72rem; }
.rrp-close-signal { width: 40px; height: 40px; display: grid; place-items: center; position: relative; border: 1px solid var(--rrp-line-2); border-radius: 10px 2px 10px 2px; background: #090c12; cursor: pointer; }
.rrp-close-signal span { position: absolute; width: 19px; height: 2px; background: var(--rrp-text); }
.rrp-close-signal span:first-child { transform: rotate(45deg); }
.rrp-close-signal span:last-child { transform: rotate(-45deg); }
.rrp-close-signal:hover span { background: var(--rrp-signal); box-shadow: 0 0 9px var(--rrp-signal); }
.rrp-switcher-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.rrp-switch-card {
    min-height: 68px;
    display: grid;
    grid-template-columns: 22px 38px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    position: relative;
    overflow: hidden;
    padding: 8px 10px;
    border: 1px solid var(--rrp-line);
    border-radius: 10px 2px 10px 2px;
    background: linear-gradient(145deg, #111720, #080a0f);
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.rrp-switch-card::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--rrp-muted); opacity: .5; }
.rrp-switch-card.is-live::after { background: var(--rrp-signal); box-shadow: 0 0 12px var(--rrp-signal); }
.rrp-switch-card.is-foundation::after { background: var(--rrp-primary); box-shadow: 0 0 12px var(--rrp-primary); }
.rrp-switch-card:hover { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-2px); border-color: var(--rrp-primary); background: linear-gradient(145deg, color-mix(in srgb, var(--rrp-primary) 10%, #111720), #080a0f); }
.rrp-switch-index { color: #596477; font: 700 .48rem/1 ui-monospace, monospace; }
.rrp-switch-card .rrp-module-mark { width: 36px; height: 36px; font-size: .6rem; }
.rrp-switch-copy { min-width: 0; display: grid; gap: 3px; }
.rrp-switch-copy strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.rrp-switch-copy small { overflow: hidden; color: var(--rrp-muted); font-size: .47rem; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }
.rrp-switch-action { color: var(--rrp-signal); font-size: .48rem; font-weight: 950; letter-spacing: .12em; }
.rrp-switch-card[aria-disabled="true"] { opacity: .62; cursor: default; }
.rrp-switcher-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 17px; color: #687287; font-size: .48rem; letter-spacing: .13em; }
.rrp-switcher-foot i { width: 44px; height: 1px; background: linear-gradient(90deg, var(--rrp-primary), var(--rrp-signal)); }

/* --------------------------------------------------------------------------
   Public app shell, embeds, code blocks and style guide
   -------------------------------------------------------------------------- */
.rrp-app-shell { min-height: 100vh; padding: clamp(14px, 3vw, 34px); }
.rrp-app-header { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.rrp-app-header h1 { margin: 4px 0 0; font-size: clamp(2rem,5vw,4rem); letter-spacing: -.06em; }
.rrp-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.rrp-strain-card { min-height: 210px; display: grid; align-content: space-between; text-decoration: none; }
.rrp-strain-category { color: var(--rrp-signal); font-size: .51rem; font-weight: 950; letter-spacing: .15em; }
.rrp-strain-card h3 { margin: 9px 0 7px; font-size: 1.35rem; }
.rrp-strain-card p { color: var(--rrp-muted); font-size: .68rem; line-height: 1.55; }
.rrp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.rrp-tag { padding: 5px 7px; border: 1px solid var(--rrp-line); border-radius: 3px 8px 3px 8px; color: #aeb7c5; font-size: .49rem; }
.is-embed { background: transparent; }
.is-embed .rrp-app-shell { padding: 0; }
.is-embed .rrp-app-header { display: none; }
.rrp-code { overflow: auto; padding: 14px; border: 1px solid var(--rrp-line); border-radius: 10px 2px 10px 2px; background: #06080c; color: #dbe1ea; font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }
.rrp-color-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.rrp-color-chip { overflow: hidden; border: 1px solid var(--rrp-line); border-radius: 10px 2px 10px 2px; }
.rrp-color-chip i { display: block; height: 65px; background: var(--chip); }
.rrp-color-chip span { display: block; padding: 9px; color: var(--rrp-muted); font-size: .56rem; }
.rrp-rule-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rrp-rule-list li { padding: 10px 11px; border-left: 2px solid var(--rrp-primary); background: rgba(255,255,255,.018); color: var(--rrp-muted); font-size: .68rem; line-height: 1.5; }
.rrp-rule-list.is-prohibited li { border-left-color: var(--rrp-danger); }

.rrp-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 20px clamp(16px,3vw,34px); border-top: 1px solid var(--rrp-line); color: #687285; font-size: .52rem; letter-spacing: .13em; }
.rrp-footer a { text-decoration: none; }
.rrp-footer a:hover { color: var(--rrp-signal); }

/* --------------------------------------------------------------------------
   Styled error surfaces
   -------------------------------------------------------------------------- */
.rrp-error-stage { min-height: calc(100vh - 130px); display: grid; place-items: center; padding: 30px 16px; }
.rrp-error-card { width: min(760px,100%); padding: clamp(24px,5vw,54px); border: 1px solid color-mix(in srgb, var(--rrp-danger) 45%, var(--rrp-line)); border-radius: 24px 4px 24px 4px; background: linear-gradient(145deg, color-mix(in srgb, var(--rrp-danger) 5%, #11151e), #07090d); box-shadow: var(--rrp-shadow); }
.rrp-error-code { color: var(--rrp-danger); font: 950 clamp(4rem,12vw,9rem)/.8 ui-monospace, monospace; letter-spacing: -.1em; }
.rrp-error-card h1 { margin: 24px 0 8px; font-size: clamp(1.8rem,5vw,3.8rem); letter-spacing: -.06em; text-transform: uppercase; }
.rrp-error-card p { color: var(--rrp-muted); line-height: 1.65; }

/* --------------------------------------------------------------------------
   Responsive behavior
   -------------------------------------------------------------------------- */
@media (max-width: 1120px) {
    .rrp-command-head { grid-template-columns: 140px minmax(0,1fr) auto; }
    .rrp-command-head > .rrp-button { grid-column: 2 / -1; justify-self: start; }
    .rrp-span-3 { grid-column: span 6; }
    .rrp-span-4, .rrp-span-5, .rrp-span-6, .rrp-span-7, .rrp-span-8 { grid-column: span 12; }
    .rrp-switcher-grid, .rrp-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .rrp-hero { grid-template-columns: 1fr; }
    .rrp-command-array { max-width: 760px; }
    .rrp-shell { grid-template-columns: 78px minmax(0,1fr); }
    .rrp-sidebar { padding: 12px 8px; }
    .rrp-sidebar-brand { min-height: 54px; }
    .rrp-sidebar-brand img { max-height: 38px; }
    .rrp-admin-id, .rrp-nav-label, .rrp-nav-copy, .rrp-nav-arrow, .rrp-sidebar-footer { display: none; }
    .rrp-nav a { grid-template-columns: 1fr; justify-items: center; padding: 6px; }
    .rrp-nav-monogram { width: 38px; height: 38px; }
    .rrp-main { padding: 22px; }
}

@media (max-width: 760px) {
    body { padding-bottom: 68px; }
    .rrp-topbar { min-height: 60px; grid-template-columns: auto 1fr auto; gap: 9px; padding: 0 11px; }
    .rrp-brand-logo-shell { width: 68px; height: 38px; }
    .rrp-brand-copy small, .rrp-top-actions > .rrp-link, .rrp-top-actions > form, .rrp-top-signal { display: none; }
    .rrp-shell { display: block; min-height: calc(100vh - 60px); }
    .rrp-sidebar { display: none; }
    .rrp-main { padding: 13px; }
    .rrp-mobile-dock {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        z-index: 90;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        padding: 6px;
        border: 1px solid var(--rrp-line-2);
        border-radius: 16px 3px 16px 3px;
        background: rgba(7,9,14,.92);
        box-shadow: 0 16px 50px rgba(0,0,0,.55), 0 0 35px color-mix(in srgb, var(--rrp-primary) 10%, transparent);
        backdrop-filter: blur(18px);
    }
    .rrp-mobile-dock a { min-height: 48px; display: grid; place-items: center; gap: 2px; border: 1px solid transparent; border-radius: 9px 2px 9px 2px; color: var(--rrp-muted); text-decoration: none; }
    .rrp-mobile-dock a.is-active { border-color: color-mix(in srgb,var(--rrp-primary) 48%,transparent); background: color-mix(in srgb,var(--rrp-primary) 10%,transparent); color: #fff; }
    .rrp-mobile-dock b { color: var(--rrp-signal); font-size: .58rem; letter-spacing: .08em; }
    .rrp-mobile-dock span { font-size: .48rem; letter-spacing: .05em; }
    .rrp-command-head { grid-template-columns: 1fr auto; gap: 13px; padding: 16px; }
    .rrp-command-logo { grid-column: 1 / -1; width: 180px; height: 74px; justify-self: start; border-right: 0; border-bottom: 1px solid var(--rrp-line); padding: 0 0 10px; }
    .rrp-command-copy { grid-column: 1 / -1; }
    .rrp-command-copy h1 { font-size: 2.6rem; }
    .rrp-command-time { justify-items: start; }
    .rrp-command-head > .rrp-button { grid-column: auto; align-self: end; }
    .rrp-page-head { align-items: flex-start; flex-direction: column; }
    .rrp-page-head h1 { font-size: 2.55rem; }
    .rrp-span-3 { grid-column: span 12; }
    .rrp-form-grid { grid-template-columns: 1fr; }
    .rrp-field.is-full { grid-column: auto; }
    .rrp-switcher-panel { width: 100%; max-height: 100vh; height: 100%; border: 0; border-radius: 0; padding: 18px 12px; }
    .rrp-switcher-grid { grid-template-columns: 1fr; gap: 6px; }
    .rrp-switch-card { min-height: 60px; grid-template-columns: 20px 34px minmax(0,1fr) auto; padding: 7px 9px; }
    .rrp-switch-card .rrp-module-mark { width: 32px; height: 32px; }
    .rrp-switcher-foot { flex-wrap: wrap; }
    .rrp-hero { min-height: auto; margin: 8px; padding: 25px 18px; border-radius: 18px 3px 18px 3px; }
    .rrp-hero-brandplate { height: 86px; margin: 14px 0; }
    .rrp-hero h1 { font-size: 3.7rem; }
    .rrp-command-array { padding: 13px; }
    .rrp-orbit { width: min(220px, 70vw); }
    .rrp-public-modules { padding: 0 8px 24px; }
    .rrp-section-head { align-items: flex-start; flex-direction: column; }
    .rrp-card-grid { grid-template-columns: 1fr; }
    .rrp-app-shell { padding: 12px; }
    .rrp-color-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .rrp-toolbar .rrp-input, .rrp-toolbar .rrp-select { width: 100%; }
}

@media (max-width: 430px) {
    .rrp-brand-copy { display: none; }
    .rrp-command-head { grid-template-columns: 1fr; }
    .rrp-command-head > .rrp-button { grid-column: 1; justify-self: start; }
    .rrp-command-time { justify-items: start; }
    .rrp-switch-action { font-size: .44rem; }
    .rrp-hero h1 { font-size: 3.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: .01ms !important;
    }
}