/* Extracted from web_server.py TEMPLATES — panel shell theme / layout CSS */
/* Do not re-inline into web_server.py; edit this file instead. */
        /* ---- Frutiger-aero-ish base (glossy sky glass, soft motion) ---- */
        html {
            min-height: 100%;
            /* Reserve scrollbar space so view switches don't shift layout.
               Gutter paints html background: top band = status-bar match, then theme sky. */
            scrollbar-gutter: stable;
            background-color: #0f172a;
            /* Layer 1: status-bar-height band (matches default teal bar)
               Layer 2: page sky for the rest of the gutter */
            background-image:
                linear-gradient(180deg,
                    #0e7490 0%,
                    #0f3a52 55%,
                    #0f172a 100%),
                linear-gradient(165deg, #0c4a6e 0%, #0a1628 45%, #071018 100%);
            background-size: 100% 3.1rem, 100% 100%;
            background-repeat: no-repeat, no-repeat;
            background-position: top left, top left;
            background-attachment: fixed, fixed;
        }
        html, body { min-height: 100%; }
        body {
            color: #e8f4ff;
            font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
            /* Transparent so fixed .bg-aero is the visual page bg; html color fills gutter only */
            background: transparent;
            /* clip (not hidden) so position:sticky on Navigate still works while scrolling */
            overflow-x: clip;
            /* Allow selecting copyable text; interactive chrome sets user-select:none itself */
            -webkit-user-select: text;
            user-select: text;
        }
        /*
         * Reserved gutter top band ≈ status bar glass (opaque stand-ins for each theme).
         * Below that: same sky family as .bg-aero so the strip continues cleanly.
         */
        html:has(body.theme-files) {
            background-color: #1c1917;
            background-image:
                linear-gradient(180deg,
                    #7a3610 0%,
                    #4a2410 52%,
                    #1c1917 100%),
                linear-gradient(165deg,
                    #a16207 0%, #78350f 28%, #451a03 58%, #1c1917 100%);
            background-size: 100% 3.1rem, 100% 100%;
            background-repeat: no-repeat, no-repeat;
            background-position: top left, top left;
            background-attachment: fixed, fixed;
        }
        html:has(body.theme-console) {
            background-color: #061e14;
            background-image:
                linear-gradient(180deg,
                    #166534 0%,
                    #0a2818 55%,
                    #061e14 100%),
                linear-gradient(165deg, #052e16 0%, #0a1f14 40%, #022c22 100%);
            background-size: 100% 3.1rem, 100% 100%;
            background-repeat: no-repeat, no-repeat;
            background-position: top left, top left;
            background-attachment: fixed, fixed;
        }
        html:has(body.theme-players),
        html:has(body.theme-dashboard) {
            background-color: #0f172a;
            background-image:
                linear-gradient(180deg,
                    #0e7490 0%,
                    #0f3a52 55%,
                    #0f172a 100%),
                linear-gradient(165deg, #0c4a6e 0%, #0a1628 45%, #071018 100%);
            background-size: 100% 3.1rem, 100% 100%;
            background-repeat: no-repeat, no-repeat;
            background-position: top left, top left;
            background-attachment: fixed, fixed;
        }
        html:has(body.theme-settings),
        html:has(body.theme-about) {
            background-color: #0c2846;
            background-image:
                linear-gradient(180deg,
                    #0e7490 0%,
                    #0c2846 60%,
                    #0c2846 100%),
                linear-gradient(180deg,
                    #1e4a7a 0%, #0c4a6e 22%, #0a3a5c 48%, #0b2744 72%, #071422 100%);
            background-size: 100% 3.1rem, 100% 100%;
            background-repeat: no-repeat, no-repeat;
            background-position: top left, top left;
            background-attachment: fixed, fixed;
        }
        html:has(body.theme-advanced) {
            background-color: #0f0c23;
            background-image:
                linear-gradient(180deg,
                    #4338ca 0%,
                    #1e1b4b 55%,
                    #0f0c23 100%),
                linear-gradient(165deg, #312e81 0%, #1e1b4b 40%, #0c0a1a 100%);
            background-size: 100% 3.1rem, 100% 100%;
            background-repeat: no-repeat, no-repeat;
            background-position: top left, top left;
            background-attachment: fixed, fixed;
        }
        #status-content, #discord-status-inner, #players-area,
        .card, .site-view, .status-box, .r5-status-text {
            -webkit-user-select: text;
            user-select: text;
        }
        input, textarea, [contenteditable="true"] {
            -webkit-user-select: text;
            user-select: text;
        }
        /* Background: dual layers crossfade (gradients don't interpolate well). Content stays instant. */
        .bg-aero {
            position: fixed;
            inset: 0;
            /* Cover reserved scrollbar gutter too (matches full visual viewport) */
            width: 100vw;
            min-width: 100%;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
        }
        .bg-aero .bg-layer {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 0.9s ease;
            will-change: opacity;
        }
        /* Dashboard (default): teal / sky */
        .bg-aero .bg-layer-dashboard {
            background:
                radial-gradient(ellipse 120% 80% at 10% -10%, rgba(56, 189, 248, 0.45), transparent 55%),
                radial-gradient(ellipse 90% 70% at 90% 10%, rgba(52, 211, 153, 0.28), transparent 50%),
                radial-gradient(ellipse 80% 60% at 50% 100%, rgba(99, 102, 241, 0.35), transparent 55%),
                linear-gradient(165deg, #0c4a6e 0%, #0f172a 42%, #042f2e 100%);
            animation: aero-sky 28s ease-in-out infinite alternate;
        }
        /* Players: more purple */
        .bg-aero .bg-layer-players {
            background:
                radial-gradient(ellipse 120% 80% at 12% -8%, rgba(192, 132, 252, 0.5), transparent 55%),
                radial-gradient(ellipse 90% 70% at 92% 12%, rgba(167, 139, 250, 0.32), transparent 50%),
                radial-gradient(ellipse 80% 60% at 48% 100%, rgba(79, 70, 229, 0.4), transparent 55%),
                linear-gradient(165deg, #4c1d95 0%, #1e1b4b 42%, #0f172a 100%);
            animation: aero-sky-purple 28s ease-in-out infinite alternate;
        }
        /* Console: dark + light green */
        .bg-aero .bg-layer-console {
            background:
                radial-gradient(ellipse 120% 80% at 10% -10%, rgba(74, 222, 128, 0.42), transparent 55%),
                radial-gradient(ellipse 90% 70% at 90% 12%, rgba(34, 197, 94, 0.28), transparent 50%),
                radial-gradient(ellipse 80% 60% at 50% 100%, rgba(22, 101, 52, 0.45), transparent 55%),
                linear-gradient(165deg, #052e16 0%, #0a1f14 40%, #022c22 100%);
            animation: aero-sky-green 28s ease-in-out infinite alternate;
        }

        /* Files: bright yellow wash over warm amber base */
        .bg-aero .bg-layer-files {
            background:
                radial-gradient(ellipse 140% 55% at 50% -14%, rgba(254, 240, 138, 0.72), transparent 52%),
                radial-gradient(ellipse 90% 50% at 12% -4%, rgba(250, 204, 21, 0.62), transparent 50%),
                radial-gradient(ellipse 85% 55% at 92% 18%, rgba(253, 224, 71, 0.48), transparent 52%),
                radial-gradient(ellipse 80% 60% at 50% 100%, rgba(245, 158, 11, 0.4), transparent 55%),
                linear-gradient(165deg,
                    #a16207 0%,
                    #78350f 28%,
                    #451a03 58%,
                    #1c1917 100%);
            animation: aero-sky-yellow 28s ease-in-out infinite alternate;
        }
        /* Settings: yellow top / blue lower sky (swapped with About) */
        .bg-aero .bg-layer-settings {
            background:
                radial-gradient(ellipse 130% 52% at 48% -12%, rgba(253, 224, 71, 0.5), transparent 52%),
                radial-gradient(ellipse 70% 40% at 18% -6%, rgba(250, 204, 21, 0.28), transparent 48%),
                radial-gradient(ellipse 90% 70% at 92% 42%, rgba(56, 189, 248, 0.26), transparent 52%),
                radial-gradient(ellipse 100% 70% at 50% 108%, rgba(29, 78, 216, 0.48), transparent 58%),
                linear-gradient(180deg,
                    #1e4a7a 0%,
                    #0c4a6e 22%,
                    #0a3a5c 48%,
                    #0b2744 72%,
                    #071422 100%);
            animation: aero-sky-settings 28s ease-in-out infinite alternate;
        }
        /* About: same yellow-top / blue-lower sky as Settings */
        .bg-aero .bg-layer-about {
            background:
                radial-gradient(ellipse 130% 52% at 48% -12%, rgba(253, 224, 71, 0.5), transparent 52%),
                radial-gradient(ellipse 70% 40% at 18% -6%, rgba(250, 204, 21, 0.28), transparent 48%),
                radial-gradient(ellipse 90% 70% at 92% 42%, rgba(56, 189, 248, 0.26), transparent 52%),
                radial-gradient(ellipse 100% 70% at 50% 108%, rgba(29, 78, 216, 0.48), transparent 58%),
                linear-gradient(180deg,
                    #1e4a7a 0%,
                    #0c4a6e 22%,
                    #0a3a5c 48%,
                    #0b2744 72%,
                    #071422 100%);
            animation: aero-sky-settings 28s ease-in-out infinite alternate;
        }
        /* Advanced: indigo / violet */
        .bg-aero .bg-layer-advanced {
            background:
                radial-gradient(ellipse 120% 80% at 12% -8%, rgba(167, 139, 250, 0.42), transparent 55%),
                radial-gradient(ellipse 90% 70% at 90% 14%, rgba(99, 102, 241, 0.32), transparent 50%),
                radial-gradient(ellipse 80% 60% at 50% 100%, rgba(67, 56, 202, 0.4), transparent 55%),
                linear-gradient(165deg, #312e81 0%, #1e1b4b 40%, #0c0a1a 100%);
            animation: aero-sky-purple 28s ease-in-out infinite alternate;
        }

        body.theme-dashboard .bg-aero .bg-layer-dashboard { opacity: 1; }
        body.theme-players .bg-aero .bg-layer-players { opacity: 1; }
        body.theme-console .bg-aero .bg-layer-console { opacity: 1; }
        body.theme-files .bg-aero .bg-layer-files { opacity: 1; }
        body.theme-settings .bg-aero .bg-layer-settings { opacity: 1; }
        body.theme-about .bg-aero .bg-layer-about { opacity: 1; }
        body.theme-advanced .bg-aero .bg-layer-advanced { opacity: 1; }
        /* Only one layer visible at a time */
        body.theme-players .bg-aero .bg-layer-dashboard,
        body.theme-console .bg-aero .bg-layer-dashboard,
        body.theme-files .bg-aero .bg-layer-dashboard,
        body.theme-settings .bg-aero .bg-layer-dashboard,
        body.theme-about .bg-aero .bg-layer-dashboard,
        body.theme-advanced .bg-aero .bg-layer-dashboard { opacity: 0; }
        body.theme-dashboard .bg-aero .bg-layer-players,
        body.theme-console .bg-aero .bg-layer-players,
        body.theme-files .bg-aero .bg-layer-players,
        body.theme-settings .bg-aero .bg-layer-players,
        body.theme-about .bg-aero .bg-layer-players,
        body.theme-advanced .bg-aero .bg-layer-players,
        body:not(.theme-players) .bg-aero .bg-layer-players { opacity: 0; }
        body.theme-dashboard .bg-aero .bg-layer-console,
        body.theme-players .bg-aero .bg-layer-console,
        body.theme-files .bg-aero .bg-layer-console,
        body.theme-settings .bg-aero .bg-layer-console,
        body.theme-about .bg-aero .bg-layer-console,
        body.theme-advanced .bg-aero .bg-layer-console,
        body:not(.theme-console) .bg-aero .bg-layer-console { opacity: 0; }
        body.theme-dashboard .bg-aero .bg-layer-files,
        body.theme-players .bg-aero .bg-layer-files,
        body.theme-console .bg-aero .bg-layer-files,
        body.theme-settings .bg-aero .bg-layer-files,
        body.theme-about .bg-aero .bg-layer-files,
        body.theme-advanced .bg-aero .bg-layer-files,
        body:not(.theme-files) .bg-aero .bg-layer-files { opacity: 0; }
        body.theme-dashboard .bg-aero .bg-layer-settings,
        body.theme-players .bg-aero .bg-layer-settings,
        body.theme-console .bg-aero .bg-layer-settings,
        body.theme-files .bg-aero .bg-layer-settings,
        body.theme-about .bg-aero .bg-layer-settings,
        body.theme-advanced .bg-aero .bg-layer-settings,
        body:not(.theme-settings) .bg-aero .bg-layer-settings { opacity: 0; }
        body.theme-dashboard .bg-aero .bg-layer-about,
        body.theme-players .bg-aero .bg-layer-about,
        body.theme-console .bg-aero .bg-layer-about,
        body.theme-files .bg-aero .bg-layer-about,
        body.theme-settings .bg-aero .bg-layer-about,
        body.theme-advanced .bg-aero .bg-layer-about,
        body:not(.theme-about) .bg-aero .bg-layer-about { opacity: 0; }
        body.theme-dashboard .bg-aero .bg-layer-advanced,
        body.theme-players .bg-aero .bg-layer-advanced,
        body.theme-console .bg-aero .bg-layer-advanced,
        body.theme-files .bg-aero .bg-layer-advanced,
        body.theme-settings .bg-aero .bg-layer-advanced,
        body.theme-about .bg-aero .bg-layer-advanced,
        body:not(.theme-advanced) .bg-aero .bg-layer-advanced { opacity: 0; }
        body:not(.theme-players):not(.theme-console):not(.theme-files):not(.theme-settings):not(.theme-about):not(.theme-advanced) .bg-aero .bg-layer-dashboard {
            opacity: 1;
        }

        .site-view { display: none; }
        .site-view.is-active { display: block; }
        @keyframes aero-sky {
            0%   { filter: hue-rotate(0deg) saturate(1); }
            50%  { filter: hue-rotate(12deg) saturate(1.15); }
            100% { filter: hue-rotate(-8deg) saturate(1.05); }
        }
        @keyframes aero-sky-purple {
            0%   { filter: hue-rotate(0deg) saturate(1.05); }
            50%  { filter: hue-rotate(8deg) saturate(1.2); }
            100% { filter: hue-rotate(-6deg) saturate(1.1); }
        }
        @keyframes aero-sky-green {
            0%   { filter: hue-rotate(0deg) saturate(1.05); }
            50%  { filter: hue-rotate(10deg) saturate(1.2); }
            100% { filter: hue-rotate(-8deg) saturate(1.08); }
        }
        @keyframes aero-sky-yellow {
            0%   { filter: hue-rotate(0deg) saturate(1.08); }
            50%  { filter: hue-rotate(6deg) saturate(1.22); }
            100% { filter: hue-rotate(-5deg) saturate(1.1); }
        }
        @keyframes aero-sky-slate {
            0%   { filter: hue-rotate(0deg) saturate(1.0); }
            50%  { filter: hue-rotate(4deg) saturate(1.12); }
            100% { filter: hue-rotate(-4deg) saturate(1.05); }
        }
        @keyframes aero-sky-settings {
            0%   { filter: hue-rotate(0deg) saturate(1.08); }
            50%  { filter: hue-rotate(6deg) saturate(1.18); }
            100% { filter: hue-rotate(-5deg) saturate(1.1); }
        }
        /* Orbs: outer = theme "camera angle", inner = idle float */
        .bg-aero .orb {
            position: absolute;
            border-radius: 50%;
            mix-blend-mode: screen;
            opacity: 0.55;
            transition:
                transform 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.9s ease,
                opacity 0.9s ease;
            will-change: transform;
        }
        .bg-aero .orb-inner {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            filter: blur(2px);
            animation: orb-float 18s ease-in-out infinite;
            transition: background 0.9s ease, box-shadow 0.9s ease, filter 0.9s ease;
        }
        .bg-aero .orb-1 {
            width: 42vw; height: 42vw; max-width: 520px; max-height: 520px;
            left: -8%; top: 8%;
            transform: translate(0, 0) scale(1) rotate(0deg);
        }
        .bg-aero .orb-1 .orb-inner {
            background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.55), rgba(125,211,252,0.25) 45%, transparent 70%);
            animation-duration: 22s;
        }
        .bg-aero .orb-2 {
            width: 36vw; height: 36vw; max-width: 420px; max-height: 420px;
            right: -6%; top: 22%;
            left: auto;
            transform: translate(0, 0) scale(1) rotate(0deg);
        }
        .bg-aero .orb-2 .orb-inner {
            background: radial-gradient(circle at 40% 40%, rgba(167,243,208,0.5), rgba(45,212,191,0.2) 50%, transparent 70%);
            animation-duration: 26s;
            animation-delay: -6s;
        }
        .bg-aero .orb-3 {
            width: 28vw; height: 28vw; max-width: 340px; max-height: 340px;
            left: 35%; bottom: -8%;
            top: auto;
            transform: translate(0, 0) scale(1) rotate(0deg);
        }
        .bg-aero .orb-3 .orb-inner {
            background: radial-gradient(circle at 40% 40%, rgba(196,181,253,0.45), rgba(99,102,241,0.18) 50%, transparent 70%);
            animation-duration: 20s;
            animation-delay: -11s;
        }
        /* Players theme: reframe orbs (new "camera angle") + purple lighting */
        body.theme-players .bg-aero .orb-1 {
            transform: translate(14%, 10%) scale(1.14) rotate(10deg);
            filter: brightness(1.05) hue-rotate(25deg);
        }
        body.theme-players .bg-aero .orb-1 .orb-inner {
            background: radial-gradient(circle at 55% 30%, rgba(255,255,255,0.6), rgba(216,180,254,0.35) 40%, rgba(126,34,206,0.12) 70%, transparent 75%);
        }
        body.theme-players .bg-aero .orb-2 {
            transform: translate(-12%, 18%) scale(0.9) rotate(-14deg);
            filter: brightness(1.08) hue-rotate(40deg);
        }
        body.theme-players .bg-aero .orb-2 .orb-inner {
            background: radial-gradient(circle at 30% 50%, rgba(237,233,254,0.55), rgba(167,139,250,0.3) 45%, rgba(91,33,182,0.15) 70%, transparent 75%);
        }
        body.theme-players .bg-aero .orb-3 {
            transform: translate(8%, -16%) scale(1.22) rotate(6deg);
            filter: brightness(1.1) saturate(1.15);
        }
        body.theme-players .bg-aero .orb-3 .orb-inner {
            background: radial-gradient(circle at 45% 55%, rgba(233,213,255,0.5), rgba(139,92,246,0.28) 45%, rgba(67,56,202,0.15) 70%, transparent 75%);
        }
        /* Console theme: green lighting + reframe */
        body.theme-console .bg-aero .orb-1 {
            transform: translate(8%, 6%) scale(1.08) rotate(-6deg);
            filter: brightness(1.08) hue-rotate(-35deg) saturate(1.15);
        }
        body.theme-console .bg-aero .orb-1 .orb-inner {
            background: radial-gradient(circle at 40% 30%, rgba(255,255,255,0.55), rgba(134,239,172,0.35) 40%, rgba(22,163,74,0.12) 70%, transparent 75%);
        }
        body.theme-console .bg-aero .orb-2 {
            transform: translate(-10%, 12%) scale(0.95) rotate(12deg);
            filter: brightness(1.1) hue-rotate(-20deg);
        }
        body.theme-console .bg-aero .orb-2 .orb-inner {
            background: radial-gradient(circle at 35% 45%, rgba(220,252,231,0.55), rgba(74,222,128,0.28) 45%, rgba(21,128,61,0.15) 70%, transparent 75%);
        }
        body.theme-console .bg-aero .orb-3 {
            transform: translate(6%, -12%) scale(1.18) rotate(-4deg);
            filter: brightness(1.05) saturate(1.2);
        }
        body.theme-console .bg-aero .orb-3 .orb-inner {
            background: radial-gradient(circle at 50% 50%, rgba(187,247,208,0.48), rgba(34,197,94,0.25) 45%, rgba(6,78,59,0.18) 70%, transparent 75%);
        }
        

        /* Files theme: reframe orbs (yellow/amber lighting + camera move) */
        body.theme-files .bg-aero .orb-1 {
            transform: translate(18%, -6%) scale(1.16) rotate(14deg);
            filter: brightness(1.12) hue-rotate(35deg) saturate(1.2);
        }
        body.theme-files .bg-aero .orb-1 .orb-inner {
            background: radial-gradient(circle at 45% 28%, rgba(255,255,255,0.65), rgba(253,224,71,0.42) 40%, rgba(234,179,8,0.14) 70%, transparent 75%);
        }
        body.theme-files .bg-aero .orb-2 {
            transform: translate(-16%, 22%) scale(0.88) rotate(-18deg);
            filter: brightness(1.1) hue-rotate(25deg) saturate(1.15);
        }
        body.theme-files .bg-aero .orb-2 .orb-inner {
            background: radial-gradient(circle at 32% 48%, rgba(254,243,199,0.6), rgba(251,191,36,0.32) 45%, rgba(180,83,9,0.16) 70%, transparent 75%);
        }
        body.theme-files .bg-aero .orb-3 {
            transform: translate(12%, -20%) scale(1.28) rotate(8deg);
            filter: brightness(1.14) saturate(1.25);
        }
        body.theme-files .bg-aero .orb-3 .orb-inner {
            background: radial-gradient(circle at 50% 45%, rgba(254,249,195,0.55), rgba(245,158,11,0.3) 45%, rgba(146,64,14,0.18) 70%, transparent 75%);
        }
        /* Settings theme: yellow-top / blue-lower orbs (swapped with About) */
        body.theme-settings .bg-aero .orb-1 {
            transform: translate(10%, 6%) scale(1.12) rotate(6deg);
            filter: brightness(1.12) saturate(1.15);
        }
        body.theme-settings .bg-aero .orb-1 .orb-inner {
            background: radial-gradient(circle at 40% 28%, rgba(255,255,255,0.6), rgba(253,224,71,0.42) 38%, rgba(56,189,248,0.18) 70%, transparent 75%);
        }
        body.theme-settings .bg-aero .orb-2 {
            transform: translate(-12%, 12%) scale(0.94) rotate(-10deg);
            filter: brightness(1.1) saturate(1.12);
        }
        body.theme-settings .bg-aero .orb-2 .orb-inner {
            background: radial-gradient(circle at 35% 45%, rgba(224,242,254,0.55), rgba(56,189,248,0.32) 45%, rgba(30,64,175,0.2) 70%, transparent 75%);
        }
        body.theme-settings .bg-aero .orb-3 {
            transform: translate(4%, -14%) scale(1.18) rotate(4deg);
            filter: brightness(1.1) saturate(1.15);
        }
        body.theme-settings .bg-aero .orb-3 .orb-inner {
            background: radial-gradient(circle at 50% 48%, rgba(254,249,195,0.45), rgba(125,211,252,0.28) 45%, rgba(15,23,42,0.22) 70%, transparent 75%);
        }
        /* Advanced theme: violet orbs */
        body.theme-advanced .bg-aero .orb-1 {
            transform: translate(-12%, 10%) scale(1.1) rotate(-10deg);
            filter: brightness(1.1) hue-rotate(-20deg) saturate(1.15);
        }
        body.theme-advanced .bg-aero .orb-1 .orb-inner {
            background: radial-gradient(circle at 40% 30%, rgba(255,255,255,0.55), rgba(196,181,253,0.4) 40%, rgba(109,40,217,0.18) 70%, transparent 75%);
        }
        body.theme-advanced .bg-aero .orb-2 {
            transform: translate(16%, -12%) scale(0.9) rotate(14deg);
            filter: brightness(1.08) hue-rotate(-30deg);
        }
        body.theme-advanced .bg-aero .orb-2 .orb-inner {
            background: radial-gradient(circle at 35% 45%, rgba(237,233,254,0.55), rgba(139,92,246,0.3) 45%, rgba(67,56,202,0.18) 70%, transparent 75%);
        }
        body.theme-advanced .bg-aero .orb-3 {
            transform: translate(-4%, -18%) scale(1.22) rotate(6deg);
            filter: brightness(1.1) saturate(1.2);
        }
        body.theme-advanced .bg-aero .orb-3 .orb-inner {
            background: radial-gradient(circle at 50% 50%, rgba(245,243,255,0.5), rgba(124,58,237,0.28) 45%, rgba(49,46,129,0.2) 70%, transparent 75%);
        }
        /* About theme: same yellow-top / blue-lower orbs as Settings */
        body.theme-about .bg-aero .orb-1 {
            transform: translate(10%, 6%) scale(1.12) rotate(6deg);
            filter: brightness(1.12) saturate(1.15);
        }
        body.theme-about .bg-aero .orb-1 .orb-inner {
            background: radial-gradient(circle at 40% 28%, rgba(255,255,255,0.6), rgba(253,224,71,0.42) 38%, rgba(56,189,248,0.18) 70%, transparent 75%);
        }
        body.theme-about .bg-aero .orb-2 {
            transform: translate(-12%, 12%) scale(0.94) rotate(-10deg);
            filter: brightness(1.1) saturate(1.12);
        }
        body.theme-about .bg-aero .orb-2 .orb-inner {
            background: radial-gradient(circle at 35% 45%, rgba(224,242,254,0.55), rgba(56,189,248,0.32) 45%, rgba(30,64,175,0.2) 70%, transparent 75%);
        }
        body.theme-about .bg-aero .orb-3 {
            transform: translate(4%, -14%) scale(1.18) rotate(4deg);
            filter: brightness(1.1) saturate(1.15);
        }
        body.theme-about .bg-aero .orb-3 .orb-inner {
            background: radial-gradient(circle at 50% 48%, rgba(254,249,195,0.45), rgba(125,211,252,0.28) 45%, rgba(15,23,42,0.22) 70%, transparent 75%);
        }
/* Intricate glass bubbles (~1.8x previous average size) */
        .bg-aero .bubble {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.4);
            background:
                radial-gradient(circle at 28% 24%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.35) 12%, transparent 28%),
                radial-gradient(circle at 68% 72%, rgba(125,211,252,0.25) 0%, transparent 40%),
                radial-gradient(circle at 50% 50%, rgba(186,230,253,0.12) 0%, rgba(14,116,144,0.08) 55%, transparent 70%),
                radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), rgba(56,189,248,0.08) 50%, transparent 72%);
            box-shadow:
                inset 0 0 14px rgba(255,255,255,0.35),
                inset -4px -6px 12px rgba(14,116,144,0.2),
                0 0 18px rgba(125,211,252,0.15);
            animation: bubble-rise linear infinite;
            opacity: 0.5;
            overflow: hidden;
        }
        .bg-aero .bubble::before {
            content: "";
            position: absolute;
            width: 38%;
            height: 22%;
            left: 18%;
            top: 14%;
            border-radius: 50%;
            background: linear-gradient(120deg, rgba(255,255,255,0.9), rgba(255,255,255,0.15));
            transform: rotate(-25deg);
            filter: blur(0.4px);
        }
        .bg-aero .bubble::after {
            content: "";
            position: absolute;
            width: 14%;
            height: 14%;
            right: 22%;
            bottom: 20%;
            border-radius: 50%;
            background: rgba(255,255,255,0.35);
            box-shadow: 0 0 6px rgba(255,255,255,0.4);
        }
        @keyframes orb-float {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(3%, 4%) scale(1.04); }
            66% { transform: translate(-2%, 2%) scale(0.98); }
        }
        @keyframes bubble-rise {
            0%   { transform: translateY(110vh) translateX(0) scale(0.55) rotate(0deg); opacity: 0; }
            8%   { opacity: 0.55; }
            40%  { transform: translateY(55vh) translateX(12px) scale(0.9) rotate(8deg); }
            70%  { transform: translateY(25vh) translateX(-10px) scale(1.05) rotate(-6deg); opacity: 0.4; }
            100% { transform: translateY(-18vh) translateX(6px) scale(1.15) rotate(4deg); opacity: 0; }
        }
        .app-root { position: relative; z-index: 1; }

        /*
         * Main content column (42rem) is page-centered.
         * Navigate sits to the left of that column (not included in the centering).
         * Navigate margin-top is measured in JS so its top matches the first content card.
         */
        .app-shell {
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 0.5rem 1rem 2rem;
            box-sizing: border-box;
        }
        .app-shell-body {
            --nav-w: 11.5rem;
            --nav-gap: 1.25rem;
            --main-w: 42rem;
            display: flex;
            align-items: flex-start;
            gap: var(--nav-gap);
            width: calc(var(--nav-w) + var(--nav-gap) + var(--main-w));
            max-width: 100%;
            box-sizing: border-box;
            /*
             * Page-center the 42rem main column; nav hangs in the left margin.
             * 1rem = app-shell horizontal padding so 50vw lines up with the viewport.
             */
            margin-left: max(0px, calc(50vw - (var(--main-w) / 2) - var(--nav-w) - var(--nav-gap) - 1rem));
            margin-right: auto;
        }
        /* Tall column = sticky travel range (full main content height) */
        .side-nav-col {
            flex: 0 0 var(--nav-w);
            width: var(--nav-w);
            align-self: stretch; /* match main-col height so sticky can travel */
            position: relative;
            box-sizing: border-box;
            /*
             * First paint must already match first-card offset (title + link banner).
             * alignSideNav() only fine-tunes; starting at 0 caused a 1-frame jump.
             * ~ h1 + subtitle + header margin + link-notice card
             */
            padding-top: var(--nav-pad-top, 8.5rem);
        }
        /* Sticky unit: glass nav only (trails live in document space, not on the tab) */
        .side-nav-stick {
            position: sticky;
            /* Match typical rest seat under fixed status bar; JS may refine */
            top: var(--nav-sticky-top, 4.75rem);
            width: 100%;
            z-index: 40; /* above main content; status bar is z-50 */
            margin: 0;
            box-sizing: border-box;
            pointer-events: auto !important;
            -webkit-user-select: none;
            user-select: none;
        }
        .side-nav {
            position: relative;
            width: 100%;
            padding: 0.85rem 0.75rem;
            /* TL + BR less rounded; TR + BL stay fuller */
            border-radius: 0.4rem 1.15rem 0.4rem 1.15rem;
            z-index: 2;
            margin: 0;
            box-sizing: border-box;
            pointer-events: auto !important;
            -webkit-user-select: none;
            user-select: none;
        }
        .side-nav-col,
        .side-nav-link {
            pointer-events: auto !important;
            -webkit-user-select: none;
            user-select: none;
        }
        .side-nav-title,
        .side-nav-link .nav-ico,
        .side-nav-link .nav-label-full,
        .side-nav-link .nav-label-short,
        .side-nav-soon {
            -webkit-user-select: none;
            user-select: none;
            -webkit-user-drag: none;
        }
        /*
         * Fixed trail layer (never grows page height / scrollbar).
         * Particles store document coords and are projected to the viewport each frame,
         * so they stay in the water path instead of sticking to the sticky nav.
         */
        .nav-trail-layer {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 3; /* under sticky nav (5), over background */
            overflow: hidden; /* never extend document scroll */
        }
        .nav-trail-bubble {
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.4);
            background:
                radial-gradient(circle at 30% 28%, rgba(255,255,255,0.75), transparent 48%),
                rgba(125, 211, 252, 0.12);
            box-shadow: 0 0 5px rgba(125, 211, 252, 0.22);
            will-change: transform, opacity;
            pointer-events: none;
        }
        .nav-trail-streak {
            position: absolute;
            left: 0;
            top: 0;
            width: 1.5px;
            height: 16px; /* JS sets exact height; default keeps axis vertical */
            border-radius: 2px;
            background: linear-gradient(
                180deg,
                transparent 0%,
                rgba(186, 230, 253, 0.55) 40%,
                transparent 100%
            );
            filter: blur(0.35px);
            will-change: transform, opacity;
            pointer-events: none;
            /* Lock vertical — never rotate into a horizontal line */
            transform-origin: center top;
        }
        body.theme-players .nav-trail-bubble {
            border-color: rgba(233, 213, 255, 0.45);
            background:
                radial-gradient(circle at 30% 28%, rgba(255,255,255,0.75), transparent 48%),
                rgba(167, 139, 250, 0.14);
            box-shadow: 0 0 5px rgba(167, 139, 250, 0.22);
        }
        body.theme-players .nav-trail-streak {
            background: linear-gradient(180deg, transparent, rgba(216, 180, 254, 0.55), transparent);
        }
        body.theme-console .nav-trail-bubble {
            border-color: rgba(187, 247, 208, 0.45);
            background:
                radial-gradient(circle at 30% 28%, rgba(255,255,255,0.75), transparent 48%),
                rgba(74, 222, 128, 0.14);
            box-shadow: 0 0 5px rgba(74, 222, 128, 0.22);
        }
        body.theme-console .nav-trail-streak {
            background: linear-gradient(180deg, transparent, rgba(134, 239, 172, 0.55), transparent);
        }
        body.theme-settings .nav-trail-bubble {
            border-color: rgba(125, 211, 252, 0.5);
            background:
                radial-gradient(circle at 30% 28%, rgba(255,255,255,0.8), transparent 48%),
                rgba(56, 189, 248, 0.14);
            box-shadow: 0 0 5px rgba(56, 189, 248, 0.28);
        }
        body.theme-settings .nav-trail-streak {
            background: linear-gradient(180deg, transparent, rgba(253, 224, 71, 0.45), rgba(56, 189, 248, 0.5), transparent);
        }
        body.theme-about .nav-trail-bubble {
            border-color: rgba(125, 211, 252, 0.5);
            background:
                radial-gradient(circle at 30% 28%, rgba(255,255,255,0.8), transparent 48%),
                rgba(56, 189, 248, 0.14);
            box-shadow: 0 0 5px rgba(56, 189, 248, 0.28);
        }
        body.theme-about .nav-trail-streak {
            background: linear-gradient(180deg, transparent, rgba(253, 224, 71, 0.45), rgba(56, 189, 248, 0.5), transparent);
        }
        body.theme-about .card {
            background: linear-gradient(155deg,
                rgba(255,255,255,0.12) 0%,
                rgba(56,189,248,0.1) 32%,
                rgba(12,40,70,0.62) 100%);
            border-color: rgba(56, 189, 248, 0.3);
        }
        body.theme-about .card:hover {
            border-color: rgba(125, 211, 252, 0.5);
            box-shadow:
                0 12px 40px rgba(12, 40, 70, 0.45),
                0 0 0 1px rgba(56, 189, 248, 0.22),
                inset 0 1px 0 rgba(255,255,255,0.35);
        }
        /* About page — clean left-aligned lines (no label|value split) */
        .about-stack {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        .about-panel.card {
            display: block;
            width: 100%;
            box-sizing: border-box;
            padding: 1.2rem 1.35rem 1.25rem;
            margin: 0;
        }
        .about-panel-head {
            display: block;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(125, 211, 252, 0.72);
            margin: 0 0 0.95rem;
            padding: 0;
        }
        /* You card — hidden admin OTHERS control */
        .about-you-card {
            position: relative;
            transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .about-you-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            position: relative;
        }
        .about-others-btn {
            appearance: none;
            border: none;
            background: transparent;
            color: rgba(196, 181, 253, 0.22);
            font-size: 0.62rem;
            font-weight: 750;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            padding: 0.2rem 0.15rem;
            margin: -0.2rem 0 0;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.18s ease, color 0.18s ease;
            touch-action: manipulation;
            user-select: none;
            line-height: 1;
        }
        /* Reveal on card hover / focus (still very quiet) */
        .about-you-card:hover .about-others-btn,
        .about-you-card:focus-within .about-others-btn,
        .about-others-btn:focus-visible {
            opacity: 0.55;
            color: rgba(196, 181, 253, 0.7);
        }
        .about-others-btn:hover,
        .about-others-btn.is-on {
            opacity: 0.95 !important;
            color: #e9d5ff !important;
        }
        .about-you-card.is-others {
            background:
                linear-gradient(155deg, rgba(88, 28, 135, 0.42) 0%, rgba(49, 46, 129, 0.38) 45%, rgba(15, 23, 42, 0.55) 100%) !important;
            border-color: rgba(167, 139, 250, 0.42) !important;
            box-shadow:
                0 10px 36px rgba(76, 29, 149, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        }
        .about-you-card.is-others .about-panel-head {
            color: rgba(216, 180, 254, 0.85);
        }
        .about-name-row {
            width: 100%;
            min-width: 0;
        }
        .about-name-row .about-name {
            display: inline-block;
            max-width: 100%;
        }
        /* Name becomes the dropdown when OTHERS is open */
        .about-you-card:not(.is-others) .about-others-select { display: none !important; }
        .about-you-card.is-others .about-name-row .about-name { display: none !important; }
        .about-you-card.is-others .about-others-select { display: block !important; }
        .about-others-select {
            display: none;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            /* Solid dark fill — gradient backgrounds often force pure white on Windows */
            background-color: #1e1b4b !important;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c4b5fd' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
            background-repeat: no-repeat !important;
            background-position: right 0.7rem center !important;
            background-size: 0.65rem !important;
            border: 1px solid rgba(167, 139, 250, 0.55);
            border-radius: 0.55rem;
            color: #f5f3ff !important;
            -webkit-text-fill-color: #f5f3ff !important;
            caret-color: #f5f3ff;
            color-scheme: dark;
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: -0.01em;
            line-height: 1.35;
            padding: 0.4rem 2rem 0.4rem 0.65rem;
            outline: none;
            cursor: pointer;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }
        .about-others-select:focus {
            border-color: rgba(196, 181, 253, 0.75);
            box-shadow: 0 0 0 2px rgba(109, 40, 217, 0.4);
        }
        .about-others-select option,
        .about-others-select optgroup {
            background-color: #1e1b4b;
            color: #f5f3ff;
        }
        .about-lines {
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .about-line {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            gap: 0.4rem 0.5rem;
            margin: 0;
            padding: 0;
            font-size: 0.95rem;
            line-height: 1.45;
            color: rgba(186, 230, 253, 0.88);
            text-align: left;
        }
        .about-line strong {
            color: #f0f9ff;
            font-weight: 650;
            font-variant-numeric: tabular-nums;
        }
        .about-line .about-name {
            color: #f0f9ff;
            font-weight: 700;
            font-size: 1.05rem;
            letter-spacing: -0.01em;
        }
        .about-status {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
        }
        .about-dot {
            display: inline-block;
            width: 0.58rem;
            height: 0.58rem;
            border-radius: 50%;
            flex: 0 0 auto;
            box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.35);
        }
        .about-dot.is-on {
            background: #4ade80;
            box-shadow:
                0 0 0 2px rgba(15, 23, 42, 0.35),
                0 0 10px rgba(74, 222, 128, 0.65);
        }
        .about-dot.is-off {
            background: #f87171;
            box-shadow:
                0 0 0 2px rgba(15, 23, 42, 0.35),
                0 0 10px rgba(248, 113, 113, 0.55);
        }
        .about-muted {
            color: rgba(148, 163, 184, 0.88);
            font-size: 0.92rem;
            font-weight: 500;
            margin: 0;
            padding: 0;
            text-align: left;
        }
        /* Quiet contact under lowest About bubble (Minecraft Server) — hub-style click to copy */
        .about-contact {
            display: flex;
            justify-content: center;
            width: 100%;
            margin: 0.15rem 0 0.35rem;
            padding: 0;
            text-align: center;
            pointer-events: none;
        }
        .about-contact button {
            pointer-events: auto;
            appearance: none;
            margin: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem 0.65rem;
            border-radius: 999px;
            font: inherit;
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.02em;
            color: rgba(148, 163, 184, 0.32);
            transition: color 0.15s ease, background 0.15s ease;
            touch-action: manipulation;
        }
        .about-contact button:hover,
        .about-contact button:focus-visible {
            color: rgba(186, 230, 253, 0.62);
            background: rgba(15, 23, 42, 0.25);
            outline: none;
        }
        .about-contact .label {
            color: inherit;
            opacity: 0.85;
        }
        .about-contact .addr {
            color: inherit;
            font-variant-numeric: tabular-nums;
        }
        .about-contact-toast {
            position: fixed;
            z-index: 80;
            left: 50%;
            bottom: max(2.75rem, calc(env(safe-area-inset-bottom) + 2.25rem));
            transform: translateX(-50%) translateY(0.4rem);
            padding: 0.45rem 0.85rem;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 650;
            color: #e0f2fe;
            background: rgba(15, 23, 42, 0.88);
            border: 1px solid rgba(186, 230, 253, 0.28);
            box-shadow: 0 8px 28px rgba(2, 6, 23, 0.45);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease;
        }
        .about-contact-toast.is-on {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        /* Settings form chrome (blue / yellow-top accents after theme swap) */
        .settings-grid { display: flex; flex-direction: column; gap: 1rem; }
        .settings-card h2 { color: #e0f2fe; }
        .settings-card .settings-note {
            font-size: 0.72rem; color: rgba(186, 230, 253, 0.75); margin: -0.25rem 0 0.75rem;
            line-height: 1.4;
        }
        .settings-row {
            display: grid;
            grid-template-columns: minmax(7.5rem, 10rem) 1fr;
            gap: 0.45rem 0.75rem;
            align-items: center;
            margin-bottom: 0.55rem;
        }
        @media (max-width: 560px) {
            .settings-row { grid-template-columns: 1fr; gap: 0.2rem; }
        }
        .settings-row label {
            font-size: 0.78rem; color: rgba(186, 230, 253, 0.88); font-weight: 500;
        }
        .settings-row input[type="text"],
        .settings-row input[type="number"],
        .settings-row input[type="password"],
        .settings-row textarea,
        .settings-row select {
            width: 100%;
            box-sizing: border-box;
            background: rgba(15, 23, 42, 0.55);
            border: 1px solid rgba(56, 189, 248, 0.32);
            border-radius: 0.45rem;
            padding: 0.4rem 0.55rem;
            color: #f0f9ff;
            font-size: 0.82rem;
            outline: none;
        }
        .settings-row input:focus,
        .settings-row textarea:focus,
        .settings-row select:focus {
            border-color: rgba(125, 211, 252, 0.7);
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18);
        }
        .settings-row textarea {
            min-height: 3.2rem;
            resize: vertical;
            font-family: ui-monospace, Consolas, monospace;
            font-size: 0.75rem;
        }
        .settings-row .settings-hint {
            grid-column: 2;
            font-size: 0.68rem;
            color: rgba(148, 163, 184, 0.78);
            margin-top: -0.25rem;
        }
        @media (max-width: 560px) {
            .settings-row .settings-hint { grid-column: 1; }
        }
        .settings-row .settings-ro {
            font-size: 0.78rem;
            color: rgba(186, 230, 253, 0.9);
            font-family: ui-monospace, Consolas, monospace;
            word-break: break-all;
            background: rgba(15, 23, 42, 0.35);
            border: 1px solid rgba(56, 189, 248, 0.22);
            border-radius: 0.4rem;
            padding: 0.35rem 0.5rem;
        }
        .settings-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            align-items: center;
            margin-top: 0.65rem;
        }
        .settings-actions .btn-settings,
        .btn-settings {
            appearance: none;
            background: linear-gradient(135deg, rgba(14, 116, 144, 0.55), rgba(30, 58, 138, 0.45));
            border: 1px solid rgba(125, 211, 252, 0.4);
            color: #f0f9ff;
            padding: 0.4rem 0.85rem;
            border-radius: 0.45rem;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
        }
        .settings-actions .btn-settings:hover,
        .btn-settings:hover {
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.5), rgba(37, 99, 235, 0.45));
            border-color: rgba(186, 230, 253, 0.55);
            filter: brightness(1.05);
        }
        .settings-actions .btn-danger {
            background: linear-gradient(135deg, rgba(185, 28, 28, 0.55), rgba(127, 29, 29, 0.45));
            border-color: rgba(248, 113, 113, 0.4);
            color: #fef2f2;
        }
        .settings-actions .btn-danger:hover {
            background: linear-gradient(135deg, rgba(220, 38, 38, 0.6), rgba(153, 27, 27, 0.5));
        }
        .settings-msg {
            font-size: 0.78rem;
            min-height: 1.1rem;
            margin-top: 0.35rem;
        }
        .settings-check {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            font-size: 0.82rem;
            color: #e0f2fe;
        }
        .settings-check input {
            width: 1rem;
            height: 1rem;
            accent-color: #38bdf8;
        }

        /* Join greetings mode toggle — compact, matches settings inputs */
        .jg-mode-wrap {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.28rem;
            margin: 0.15rem 0 0.75rem;
            max-width: 100%;
        }
        .jg-mode-wrap > label {
            font-size: 0.78rem;
            color: rgba(186, 230, 253, 0.88);
            font-weight: 500;
        }
        .jg-mode-toggle {
            display: inline-flex !important;
            align-items: stretch;
            width: fit-content !important;
            max-width: 100%;
            flex: 0 0 auto !important;
            align-self: flex-start !important;
            justify-self: start !important;
            margin: 0;
            padding: 0.18rem;
            gap: 0.12rem;
            border-radius: 0.45rem;
            border: 1px solid rgba(56, 189, 248, 0.35);
            background: rgba(12, 40, 70, 0.55);
            box-shadow: none;
            box-sizing: border-box;
        }
        .jg-mode-btn {
            appearance: none !important;
            -webkit-appearance: none !important;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            visibility: visible !important;
            opacity: 1 !important;
            width: auto !important;
            min-width: 0 !important;
            flex: 0 0 auto !important;
            border: none !important;
            background: transparent !important;
            color: rgba(186, 230, 253, 0.72) !important;
            font-weight: 600 !important;
            font-size: 0.8rem !important;
            padding: 0.32rem 0.7rem !important;
            border-radius: 0.35rem !important;
            cursor: pointer !important;
            line-height: 1.2 !important;
            white-space: nowrap;
            transition: background 0.12s ease, color 0.12s ease;
        }
        .jg-mode-btn.is-active {
            background: rgba(14, 165, 233, 0.28) !important;
            color: #f0f9ff !important;
            box-shadow: none !important;
            border: 1px solid rgba(125, 211, 252, 0.28) !important;
        }
        .jg-mode-btn:hover:not(.is-active) {
            color: #e0f2fe !important;
            background: rgba(56, 189, 248, 0.1) !important;
        }
        .jg-panel[hidden] { display: none !important; }
        .jg-panel.is-active { display: block; }

        .jg-test-wrap {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.45rem 0.65rem;
            margin: 0.85rem 0 0.15rem;
        }
        .jg-test-btn {
            appearance: none !important;
            display: inline-flex !important;
            align-items: center;
            gap: 0.35rem;
            width: fit-content !important;
            max-width: 100%;
            padding: 0.35rem 0.75rem !important;
            border-radius: 0.45rem !important;
            border: 1px solid rgba(56, 189, 248, 0.35) !important;
            background: rgba(12, 40, 70, 0.55) !important;
            color: rgba(186, 230, 253, 0.85) !important;
            font-weight: 650 !important;
            font-size: 0.8rem !important;
            cursor: pointer !important;
            line-height: 1.2 !important;
        }
        .jg-test-btn.is-on {
            border-color: rgba(251, 191, 36, 0.55) !important;
            background: rgba(120, 53, 15, 0.45) !important;
            color: #fef3c7 !important;
        }
        .jg-test-btn:hover {
            filter: brightness(1.08);
        }
        .jg-test-hint {
            font-size: 0.72rem;
            color: rgba(186, 230, 253, 0.65);
            margin: 0 !important;
        }

        .jg-autosave-msg { min-height: 1.1rem; margin-top: 0.55rem; font-size: 0.78rem; }
        .jg-save-soft { color: rgba(186, 230, 253, 0.7); }


/* ---- Admin: chonky internal tabs + roles hub ---- */
        .admin-shell { display: flex; flex-direction: column; gap: 0.85rem; }
        .admin-chunky-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem;
            padding: 0.35rem;
            border-radius: 1rem;
            background: rgba(15, 23, 42, 0.45);
            border: 1px solid rgba(167, 139, 250, 0.28);
        }
        .admin-chunky-tab {
            flex: 1 1 10rem;
            min-height: 3.1rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            padding: 0.7rem 1.1rem;
            border-radius: 0.8rem;
            border: 1px solid rgba(148, 163, 184, 0.22);
            background: rgba(30, 41, 59, 0.55);
            color: rgba(226, 232, 240, 0.88);
            font-size: 0.95rem;
            font-weight: 650;
            letter-spacing: 0.01em;
            cursor: pointer;
            user-select: none;
            touch-action: manipulation;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
        }
        .admin-chunky-tab:hover {
            background: rgba(51, 65, 85, 0.75);
            border-color: rgba(167, 139, 250, 0.4);
            color: #f8fafc;
        }
        .admin-chunky-tab.is-active {
            background: linear-gradient(135deg, rgba(109, 40, 217, 0.45), rgba(30, 58, 138, 0.55));
            border-color: rgba(196, 181, 253, 0.55);
            color: #f5f3ff;
            box-shadow: 0 4px 18px rgba(76, 29, 149, 0.35);
        }
        .admin-chunky-tab .tab-ico { font-size: 1.15rem; line-height: 1; }
        .admin-chunky-tab.is-locked {
            opacity: 0.72;
            border-style: dashed;
        }
        .admin-chunky-tab.is-locked:hover {
            opacity: 0.9;
        }
        .admin-chunky-tab .tab-lock {
            margin-left: 0.25rem;
            font-size: 0.75rem;
            opacity: 0.85;
        }
        .admin-chunky-body { min-height: 12rem; }
        .admin-config-locked {
            border: 1px solid rgba(251, 191, 36, 0.3);
            background: linear-gradient(165deg, rgba(120, 53, 15, 0.2) 0%, rgba(15, 23, 42, 0.5) 100%);
        }
        /* Players: Online / Last Seen subtabs */
        .players-subtabs {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            margin-bottom: 0.85rem;
            padding: 0.28rem;
            border-radius: 0.85rem;
            background: rgba(15, 23, 42, 0.4);
            border: 1px solid rgba(167, 139, 250, 0.22);
        }
        .players-subtab {
            flex: 1 1 6.5rem;
            min-height: 2.35rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            padding: 0.45rem 0.85rem;
            border-radius: 0.65rem;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(30, 41, 59, 0.45);
            color: rgba(226, 232, 240, 0.82);
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            user-select: none;
            touch-action: manipulation;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
        }
        .players-subtab:hover {
            background: rgba(51, 65, 85, 0.7);
            border-color: rgba(167, 139, 250, 0.35);
            color: #f8fafc;
        }
        /* Last-seen: admin "remove" expands on the right and shoves the time left */
        .ls-row-meta {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.35rem;
            min-width: 0;
            flex: 0 1 auto;
        }
        .ls-remove-arm {
            flex: 0 0 auto;
            max-width: 0;
            opacity: 0;
            overflow: hidden;
            white-space: nowrap;
            pointer-events: none;
            margin: 0;
            padding: 0.2rem 0;
            border: 1px solid transparent;
            border-radius: 0.35rem;
            background: rgba(127, 29, 29, 0.75);
            color: #fecaca;
            font-size: 0.68rem;
            font-weight: 650;
            line-height: 1.2;
            cursor: pointer;
            touch-action: manipulation;
            transition:
                max-width 0.16s ease,
                opacity 0.14s ease,
                padding 0.16s ease,
                border-color 0.14s ease,
                background 0.14s ease;
        }
        .ls-row:hover .ls-remove-arm,
        .ls-row:focus-within .ls-remove-arm {
            max-width: 4.75rem;
            opacity: 1;
            padding: 0.2rem 0.45rem;
            border-color: rgba(248, 113, 113, 0.45);
            pointer-events: auto;
        }
        .ls-remove-arm:hover {
            background: rgba(185, 28, 28, 0.95);
            color: #fff;
        }
        @media (hover: none) {
            body.r5-is-admin .ls-remove-arm {
                max-width: 4.75rem;
                opacity: 1;
                padding: 0.2rem 0.45rem;
                border-color: rgba(248, 113, 113, 0.45);
                pointer-events: auto;
            }
        }
        .players-subtab.is-active {
            background: linear-gradient(135deg, rgba(109, 40, 217, 0.42), rgba(30, 58, 138, 0.5));
            border-color: rgba(196, 181, 253, 0.5);
            color: #f5f3ff;
            box-shadow: 0 3px 14px rgba(76, 29, 149, 0.3);
        }
        .roles-hero {
            padding: 1.15rem 1.25rem !important;
        }
        .roles-hero h2 {
            font-size: 1.35rem !important;
            font-weight: 700;
        }
        .roles-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            margin-top: 0.65rem;
        }
        .roles-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.42rem 0.8rem;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 600;
            background: rgba(30, 41, 59, 0.75);
            border: 1px solid rgba(148, 163, 184, 0.35);
            color: rgba(226, 232, 240, 0.92);
            cursor: pointer;
            user-select: none;
            touch-action: manipulation;
            transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
        }
        .roles-chip:hover {
            background: rgba(51, 65, 85, 0.9);
            border-color: rgba(167, 139, 250, 0.5);
            color: #f8fafc;
        }
        .roles-chip.is-active {
            background: linear-gradient(135deg, rgba(109, 40, 217, 0.42), rgba(30, 64, 175, 0.45));
            border-color: rgba(196, 181, 253, 0.65);
            color: #f5f3ff;
            box-shadow: 0 2px 12px rgba(76, 29, 149, 0.35);
        }
        .roles-chip strong { color: #e9d5ff; font-weight: 700; }
        .roles-chip.is-active strong { color: #faf5ff; }
        .roles-detail-host {
            margin-top: 0.85rem;
            border-radius: 0.9rem;
            border: 1px solid rgba(167, 139, 250, 0.28);
            background: rgba(2, 6, 23, 0.4);
            overflow: hidden;
        }
        .roles-detail {
            display: none;
            padding: 1rem 1.1rem 1.1rem;
            animation: roles-detail-in 0.18s ease;
        }
        .roles-detail.is-open { display: block; }
        @keyframes roles-detail-in {
            from { opacity: 0; transform: translateY(4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .roles-detail h3 {
            font-size: 1rem;
            font-weight: 700;
            color: #f1f5f9;
            margin: 0 0 0.35rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .roles-detail .roles-detail-lead {
            font-size: 0.8rem;
            color: rgba(203, 213, 225, 0.82);
            line-height: 1.45;
            margin: 0 0 0.75rem;
        }
        .roles-detail-list {
            margin: 0;
            padding-left: 1.15rem;
            font-size: 0.82rem;
            color: rgba(226, 232, 240, 0.9);
            line-height: 1.55;
        }
        .roles-detail-list li { margin-bottom: 0.3rem; }
        .roles-detail-list code {
            font-size: 0.78rem;
            color: #c4b5fd;
            background: rgba(30, 41, 59, 0.6);
            padding: 0.05rem 0.3rem;
            border-radius: 0.25rem;
        }
        .roles-id-grid {
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }
        .roles-id-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.45rem 0.75rem;
            padding: 0.55rem 0.7rem;
            border-radius: 0.55rem;
            background: rgba(15, 23, 42, 0.55);
            border: 1px solid rgba(71, 85, 105, 0.5);
        }
        .roles-id-row .mono {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 0.78rem;
            color: #6ee7b7;
        }
        .roles-id-row .id-label {
            font-size: 0.82rem;
            font-weight: 600;
            color: #e2e8f0;
        }
        .roles-id-row .id-meta {
            font-size: 0.72rem;
            color: rgba(148, 163, 184, 0.85);
            margin-left: auto;
        }
        .roles-detail-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            margin-top: 0.85rem;
        }
        .roles-detail-actions button {
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0.35rem 0.7rem;
            border-radius: 0.45rem;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(30, 41, 59, 0.7);
            color: #e2e8f0;
            cursor: pointer;
            touch-action: manipulation;
        }
        .roles-detail-actions button:hover {
            border-color: rgba(167, 139, 250, 0.5);
            background: rgba(51, 65, 85, 0.85);
        }
        .roles-section-anchor {
            scroll-margin-top: 4.5rem;
            transition: box-shadow 0.35s ease, border-color 0.35s ease;
        }
        .roles-section-anchor.is-flash {
            border-color: rgba(167, 139, 250, 0.65) !important;
            box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.35), 0 8px 28px rgba(76, 29, 149, 0.25);
        }
        .roles-grant-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.45rem;
            margin-top: 0.65rem;
        }
        .roles-grant-row input[type="text"],
        .roles-grant-row select {
            background: rgba(15, 23, 42, 0.65);
            border: 1px solid rgba(148, 163, 184, 0.4);
            border-radius: 0.45rem;
            color: #f1f5f9;
            font-size: 0.8rem;
            padding: 0.4rem 0.55rem;
            min-width: 10rem;
        }
        .roles-grant-row input[type="text"] { flex: 1 1 12rem; font-family: ui-monospace, Menlo, Consolas, monospace; }
        .roles-mini-btn {
            font-size: 0.75rem;
            font-weight: 650;
            padding: 0.38rem 0.7rem;
            border-radius: 0.45rem;
            border: 1px solid rgba(167, 139, 250, 0.45);
            background: rgba(76, 29, 149, 0.4);
            color: #ede9fe;
            cursor: pointer;
            touch-action: manipulation;
        }
        .roles-mini-btn:hover { background: rgba(109, 40, 217, 0.5); }
        .roles-mini-btn-danger {
            border-color: rgba(248, 113, 113, 0.45);
            background: rgba(127, 29, 29, 0.4);
            color: #fecaca;
            padding: 0.25rem 0.5rem;
            font-size: 0.7rem;
        }
        .roles-mini-btn-danger:hover { background: rgba(185, 28, 28, 0.5); }
        #roles-grant-result {
            min-height: 1.1rem;
            font-size: 0.78rem;
            margin-top: 0.4rem;
        }
        #roles-grant-result .ok,
        #roles-grant-result-admin .ok,
        #roles-people-add-result .ok,
        #roles-guild-add-result .ok { color: #6ee7b7; }
        #roles-grant-result .err,
        #roles-grant-result-admin .err,
        #roles-people-add-result .err,
        #roles-guild-add-result .err { color: #fca5a5; }
        #roles-grant-result-admin,
        #roles-people-add-result,
        #roles-guild-add-result {
            min-height: 1.1rem;
            font-size: 0.78rem;
            margin-top: 0.4rem;
        }
        .roles-members-label {
            font-size: 0.72rem;
            font-weight: 650;
            color: rgba(148, 163, 184, 0.9);
            margin: 0.7rem 0 0.35rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .roles-name-btn {
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            color: #e2e8f0;
            font: inherit;
            font-weight: 650;
            cursor: pointer;
            text-align: left;
            text-decoration: underline;
            text-decoration-color: rgba(167, 139, 250, 0.45);
            text-underline-offset: 2px;
        }
        .roles-name-btn:hover {
            color: #f5f3ff;
            text-decoration-color: rgba(196, 181, 253, 0.85);
        }
        .roles-badge-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.3rem;
            align-items: center;
            flex-shrink: 0;
        }
        /* Role chips (Admin / Bot Bender / Linked) — lost during shell CSS extract */
        .role-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.18rem 0.55rem;
            border-radius: 999px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
        .role-badge-admin {
            background: rgba(109, 40, 217, 0.28);
            color: #ddd6fe;
            border: 1px solid rgba(167, 139, 250, 0.45);
        }
        .role-badge-operator {
            background: rgba(14, 165, 233, 0.2);
            color: #bae6fd;
            border: 1px solid rgba(56, 189, 248, 0.4);
        }
        .role-badge-linked {
            background: rgba(16, 185, 129, 0.15);
            color: #a7f3d0;
            border: 1px solid rgba(52, 211, 153, 0.35);
        }
        .role-badge-unlinked {
            background: rgba(71, 85, 105, 0.35);
            color: #cbd5e1;
            border: 1px solid rgba(148, 163, 184, 0.35);
        }
        /* Permission matrix (Roles & access) — lost during shell CSS extract */
        .roles-matrix-wrap {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border-radius: 0.85rem;
            border: 1px solid rgba(148, 163, 184, 0.25);
            background: rgba(2, 6, 23, 0.35);
        }
        .roles-matrix {
            width: 100%;
            border-collapse: collapse;
            min-width: 36rem;
            font-size: 0.84rem;
        }
        .roles-matrix th,
        .roles-matrix td {
            padding: 0.7rem 0.75rem;
            text-align: center;
            border-bottom: 1px solid rgba(51, 65, 85, 0.65);
        }
        .roles-matrix th {
            background: rgba(30, 41, 59, 0.75);
            color: rgba(226, 232, 240, 0.92);
            font-weight: 650;
            font-size: 0.78rem;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
        .roles-matrix td.cap-label {
            text-align: left;
            font-weight: 550;
            color: rgba(241, 245, 249, 0.92);
            white-space: nowrap;
        }
        .roles-matrix tbody tr:hover td {
            background: rgba(51, 65, 85, 0.25);
        }
        .roles-matrix tbody tr:last-child td { border-bottom: none; }
        .perm-cell {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2.4rem;
            padding: 0.2rem 0.45rem;
            border-radius: 0.4rem;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.02em;
        }
        .perm-yes {
            background: rgba(16, 185, 129, 0.18);
            color: #6ee7b7;
            border: 1px solid rgba(52, 211, 153, 0.35);
        }
        .perm-no {
            background: rgba(71, 85, 105, 0.25);
            color: rgba(148, 163, 184, 0.75);
            border: 1px solid rgba(100, 116, 139, 0.3);
        }
        .perm-ro {
            background: rgba(56, 189, 248, 0.12);
            color: #7dd3fc;
            border: 1px solid rgba(56, 189, 248, 0.3);
        }
        .roles-people-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.82rem;
        }
        .roles-people-table th,
        .roles-people-table td {
            padding: 0.65rem 0.7rem;
            text-align: left;
            border-bottom: 1px solid rgba(51, 65, 85, 0.55);
            vertical-align: middle;
        }
        .roles-people-table th {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: rgba(148, 163, 184, 0.85);
            font-weight: 650;
        }
        .roles-people-table tbody tr:hover td {
            background: rgba(51, 65, 85, 0.22);
        }
        .roles-people-table .mono {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 0.75rem;
            color: rgba(167, 243, 208, 0.9);
        }
        .roles-empty {
            padding: 1rem;
            text-align: center;
            color: rgba(148, 163, 184, 0.8);
            font-size: 0.88rem;
        }
        .roles-refresh-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.4rem 0.75rem;
            border-radius: 0.55rem;
            border: 1px solid rgba(167, 139, 250, 0.4);
            background: rgba(76, 29, 149, 0.35);
            color: #ede9fe;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            touch-action: manipulation;
        }
        .roles-refresh-btn:hover {
            background: rgba(109, 40, 217, 0.45);
        }
        .roles-mc-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.2rem;
            font-size: 0.68rem;
            font-weight: 650;
            font-family: ui-monospace, Consolas, monospace;
            color: #bbf7d0;
            background: rgba(6, 78, 59, 0.45);
            border: 1px solid rgba(52, 211, 153, 0.35);
            border-radius: 999px;
            padding: 0.12rem 0.45rem;
            margin-left: auto;
            flex-shrink: 0;
            vertical-align: middle;
        }
        @media (max-width: 560px) {
            .admin-chunky-tab {
                flex: 1 1 100%;
                min-height: 2.85rem;
                font-size: 0.9rem;
            }
            .roles-matrix { min-width: 30rem; font-size: 0.78rem; }
            .roles-people-table { font-size: 0.76rem; }
        }
        /* name + role sit together; MC name sits to the right */
        .roles-id-row > .roles-badge-row {
            margin-right: auto;
        }
        .roles-id-row > .roles-mc-chip {
            margin-left: 0.35rem;
        }
        .roles-person-main {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.4rem 0.55rem;
        }
        .roles-mc-cell {
            text-align: right;
            white-space: nowrap;
        }
        .roles-mc-cell .roles-mc-chip {
            margin-left: 0;
        }
        .roles-modal-root {
            position: fixed;
            inset: 0;
            z-index: 80;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            background: rgba(2, 6, 23, 0.72);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }
        .roles-modal-root.is-open { display: flex; }
        .roles-modal {
            width: min(100%, 22rem);
            max-height: min(85vh, 32rem);
            overflow: auto;
            border-radius: 1rem;
            border: 1px solid rgba(167, 139, 250, 0.4);
            background: linear-gradient(165deg, rgba(30, 27, 75, 0.98), rgba(15, 23, 42, 0.98));
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
            padding: 1.1rem 1.15rem 1.15rem;
        }
        .roles-modal h3 {
            font-size: 1.05rem;
            font-weight: 700;
            color: #f8fafc;
            margin: 0 0 0.25rem;
        }
        .roles-modal .modal-id {
            font-family: ui-monospace, Menlo, Consolas, monospace;
            font-size: 0.75rem;
            color: #6ee7b7;
            margin-bottom: 0.65rem;
            word-break: break-all;
        }
        .roles-modal-actions {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            margin-top: 0.85rem;
        }
        .roles-modal-actions button,
        .roles-modal-actions .roles-mini-btn {
            width: 100%;
            justify-content: center;
            text-align: center;
        }
        .roles-modal-close {
            position: absolute;
            top: 0.55rem;
            right: 0.65rem;
            background: transparent;
            border: none;
            color: rgba(226, 232, 240, 0.7);
            font-size: 1.25rem;
            cursor: pointer;
            line-height: 1;
        }
        .roles-modal-wrap { position: relative; }
        .roles-modal-msg {
            min-height: 1rem;
            font-size: 0.78rem;
            margin-top: 0.5rem;
        }
        .roles-modal-msg .ok { color: #6ee7b7; }
        .roles-modal-msg .err { color: #fca5a5; }

        /* Server / world row settings cog */
        .entity-row {
            position: relative;
        }
        /* Backup list rows — same right-side hover actions pattern as pack/world lists.
           Layout CSS was lost in shell extract (buttons stacked / row height jumped on hover). */
        .backup-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            box-sizing: border-box;
            min-height: 2.15rem;
            height: 2.15rem;
            padding: 0 0.35rem;
            border-radius: 0.35rem;
            transition: background 0.12s ease;
            overflow: hidden;
        }
        .backup-row:hover,
        .backup-row:focus-within {
            background: rgba(56, 189, 248, 0.1);
        }
        .backup-row > .min-w-0,
        .backup-row > span:first-child {
            min-width: 0;
            flex: 1 1 auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.25;
        }
        .backup-actions {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0;
            margin-left: auto;
            min-height: 1.65rem;
            /* Reserve del + fetch so label width does not reflow on hover */
            min-width: 0;
        }
        .backup-row:hover .backup-actions,
        .backup-row:focus-within .backup-actions {
            min-width: 4.6rem;
        }
        /* Hover actions (del / cog / restore) — fully collapse when idle.
           width:0 + opacity:0 still left a 1px border/background “vertical line”
           on the right during list swaps / loading. Hide completely instead. */
        .entity-row .row-cog,
        .entity-row .row-del,
        .backup-row .row-del,
        .backup-row .row-up {
            flex: 0 0 auto;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            overflow: hidden;
            border-radius: 0.4rem;
            border: none;
            border-width: 0;
            cursor: pointer;
            display: inline-grid;
            place-items: center;
            box-sizing: border-box;
            transition: opacity 0.12s ease, width 0.12s ease, min-width 0.12s ease,
                        max-width 0.12s ease, margin 0.12s ease, padding 0.12s ease,
                        background 0.12s ease, border-color 0.12s ease, color 0.12s ease,
                        visibility 0.12s ease;
            padding: 0;
            margin: 0;
            margin-left: 0;
            height: 1.65rem;
            max-height: 1.65rem;
            width: 0;
            min-width: 0;
            max-width: 0;
            background: transparent;
            line-height: 1;
            font-size: 0.85rem;
            user-select: none;
            appearance: none;
            -webkit-appearance: none;
            /* Avoid font/icon min-content forcing a hairline column */
            contain: layout paint;
        }
        .entity-row .row-cog {
            color: #e0f2fe;
        }
        .entity-row .row-del,
        .backup-row .row-del {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: #f87171;
        }
        .backup-row .row-up {
            color: #7dd3fc;
            font-size: 0.95rem;
            font-weight: 700;
        }
        .entity-row:hover .row-cog,
        .entity-row:focus-within .row-cog,
        .entity-row .row-cog:focus {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            width: 1.65rem;
            min-width: 1.65rem;
            max-width: 1.65rem;
            margin-left: 0.25rem;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(15, 23, 42, 0.75);
            overflow: visible;
        }
        .entity-row:hover .row-del,
        .entity-row:focus-within .row-del,
        .entity-row .row-del:focus,
        .entity-row .row-del.is-sure,
        .backup-row:hover .row-del,
        .backup-row:focus-within .row-del,
        .backup-row .row-del:focus,
        .backup-row .row-del.is-sure,
        .backup-row:hover .row-up,
        .backup-row:focus-within .row-up,
        .backup-row .row-up:focus {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            width: auto;
            min-width: 1.65rem;
            max-width: 4rem;
            padding: 0 0.4rem;
            margin-left: 0.2rem;
            border: 1px solid rgba(248, 113, 113, 0.35);
            background: rgba(15, 23, 42, 0.75);
            overflow: visible;
        }
        .backup-row:hover .row-up,
        .backup-row:focus-within .row-up,
        .backup-row .row-up:focus {
            border-color: rgba(56, 189, 248, 0.4);
        }
        /* Next auto-backup countdown — Cancel only on hover (styles lost in shell extract) */
        #backup-countdown {
            position: relative;
        }
        #backup-countdown .backup-countdown-meta {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            flex: 0 0 auto;
            min-height: 1.4rem;
        }
        #backup-countdown .backup-cancel-timer {
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
            transition: opacity 0.12s ease, visibility 0.12s ease, background 0.12s ease,
                        border-color 0.12s ease, color 0.12s ease;
            flex: none;
            appearance: none;
            -webkit-appearance: none;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            padding: 0.15rem 0.45rem;
            border-radius: 0.35rem;
            border: 1px solid rgba(248, 113, 113, 0.45);
            background: rgba(127, 29, 29, 0.45);
            color: #fecaca;
            line-height: 1.2;
            cursor: pointer;
            user-select: none;
        }
        #backup-countdown:hover .backup-cancel-timer,
        #backup-countdown:focus-within .backup-cancel-timer,
        #backup-countdown .backup-cancel-timer:focus {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        #backup-countdown .backup-cancel-timer:hover {
            background: rgba(185, 28, 28, 0.65);
            border-color: rgba(252, 165, 165, 0.7);
            color: #fff;
        }
        @media (hover: none) {
            /* Touch: always show Cancel (no hover) */
            #backup-countdown .backup-cancel-timer {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }
        }

        /* Staff-only backup hover actions — AFTER hover expand rules.
           Two gates (either is enough to hide):
             1) body without r5-is-operator (Limited / public)
             2) list data-can-edit="0" from server (authoritative for this paint) */
        body:not(.r5-is-operator) #backups-content .backup-actions,
        body:not(.r5-is-operator) #backups-content .row-del,
        body:not(.r5-is-operator) #backups-content .row-up,
        body:not(.r5-is-operator) #backups-content .backup-row:hover .row-del,
        body:not(.r5-is-operator) #backups-content .backup-row:hover .row-up,
        body:not(.r5-is-operator) #backups-content .backup-row:focus-within .row-del,
        body:not(.r5-is-operator) #backups-content .backup-row:focus-within .row-up,
        body:not(.r5-is-operator) #backups-content .backup-cancel-timer,
        body:not(.r5-is-operator) #backups-content #backup-countdown:hover .backup-cancel-timer,
        body:not(.r5-is-operator) #backups-content #backup-countdown:focus-within .backup-cancel-timer,
        #backups-content [data-backup-list="1"][data-can-edit="0"] .backup-actions,
        #backups-content [data-backup-list="1"][data-can-edit="0"] .row-del,
        #backups-content [data-backup-list="1"][data-can-edit="0"] .row-up,
        #backups-content [data-backup-list="1"][data-can-edit="0"] .backup-row:hover .row-del,
        #backups-content [data-backup-list="1"][data-can-edit="0"] .backup-row:hover .row-up,
        #backups-content [data-backup-list="1"][data-can-edit="0"] .backup-row:focus-within .row-del,
        #backups-content [data-backup-list="1"][data-can-edit="0"] .backup-row:focus-within .row-up {
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            width: 0 !important;
            min-width: 0 !important;
            max-width: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
        }
        .entity-row .row-cog:hover {
            background: rgba(56, 189, 248, 0.18);
            border-color: rgba(125, 211, 252, 0.55);
            color: #f0f9ff;
        }
        .entity-row .row-del:hover,
        .backup-row .row-del:hover {
            background: rgba(248, 113, 113, 0.18);
            border-color: rgba(248, 113, 113, 0.5);
            color: #fecaca;
        }
        .backup-row .row-up:hover {
            background: rgba(14, 116, 144, 0.35);
            border-color: rgba(56, 189, 248, 0.55);
            color: #e0f2fe;
        }
        .entity-row .row-del.is-sure,
        .backup-row .row-del.is-sure {
            min-width: 2.6rem;
            padding: 0 0.5rem;
            background: rgba(153, 27, 27, 0.72);
            border-color: rgba(252, 165, 165, 0.65);
            color: #fecaca;
            animation: row-del-sure 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
        }
        @keyframes row-del-sure {
            0% { transform: scale(0.82); filter: brightness(0.9); }
            55% { transform: scale(1.1); filter: brightness(1.15); }
            100% { transform: scale(1); filter: none; }
        }
        @media (hover: none) {
            .entity-row .row-cog {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                width: 1.65rem;
                min-width: 1.65rem;
                max-width: 1.65rem;
                margin-left: 0.25rem;
                border: 1px solid rgba(148, 163, 184, 0.35);
                background: rgba(15, 23, 42, 0.75);
                overflow: visible;
            }
            .entity-row .row-del,
            .backup-row .row-del,
            .backup-row .row-up {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                width: auto;
                min-width: 1.65rem;
                max-width: 4rem;
                padding: 0 0.4rem;
                margin-left: 0.2rem;
                border: 1px solid rgba(248, 113, 113, 0.35);
                background: rgba(15, 23, 42, 0.75);
                overflow: visible;
            }
            .backup-row .row-up {
                border-color: rgba(56, 189, 248, 0.4);
            }
        }
        /* Ops lock: keep hover actions fully collapsed (opacity:1 + width:0 = hairline artifact) */
        body.r5-ops-locked #servers-list .row-cog,
        body.r5-ops-locked #worlds-content .row-cog,
        body.r5-ops-locked #worlds-content .row-del,
        body.r5-ops-locked #backups-content .row-del,
        body.r5-ops-locked #backups-content .row-up {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            width: 0 !important;
            min-width: 0 !important;
            max-width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            background: transparent !important;
        }
        /* Local Minecraft.ttf (capstar_mc/fonts) for MOTD preview */
        @font-face {
            font-family: 'Minecraft';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('/fonts/Minecraft.ttf') format('truetype');
        }
        /* entity-settings CSS → /static/entity_settings/entity_settings.css */
        .worlds-title-row {
            display: inline-flex;
            align-items: baseline;
            gap: 0.4rem;
            min-width: 0;
            flex: 1 1 auto;
            overflow: hidden;
            padding-right: 0.15rem;
        }
        .worlds-title-label {
            flex: none;
            white-space: nowrap;
        }
        #worlds-result {
            /* flex child of .worlds-title-row — sits right of "Worlds" */
            flex: 1 1 auto;
            min-width: 0;
            margin: 0 !important;
            padding: 0 !important;
            min-height: 0 !important;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.78rem;
            font-weight: 500;
            line-height: 1.25;
            color: #94a3b8;
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }
        /* HTMX inserts <span class="ok|err …"> — strip any pill/box look */
        #worlds-result > *,
        #worlds-result span {
            display: inline !important;
            margin: 0 !important;
            padding: 0 !important;
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            font-size: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
            white-space: nowrap;
        }
        #worlds-result .ok,
        #worlds-result .text-emerald-300 { color: #6ee7b7 !important; }
        /* In-progress delete/rename stays amber (not forced green) */
        #worlds-result .text-amber-300,
        #worlds-result .text-amber-400 { color: #fcd34d !important; }
        #worlds-result .err,
        #worlds-result .text-red-400,
        #worlds-result .text-red-300 { color: #fca5a5 !important; }
        #worlds-result:empty {
            display: none !important;
            margin: 0 !important;
            width: 0 !important;
            flex: 0 0 0 !important;
        }
        /* Backups result slot: hidden for silent markers; visible for rename UI */
        #backups-result:empty,
        #backups-result:not(:has(.backup-fetch-rename)) {
            display: none !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
            border: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
            position: absolute !important;
            width: 0 !important;
            max-width: 0 !important;
        }
        #backups-result:has(.backup-fetch-rename) {
            display: block !important;
            position: relative !important;
            width: auto !important;
            max-width: none !important;
            height: auto !important;
            min-height: 0 !important;
            margin: 0.65rem 0 0 !important;
            padding: 0 !important;
            overflow: visible !important;
            border: none !important;
            visibility: visible !important;
            pointer-events: auto !important;
        }
        .backup-fetch-rename {
            border-radius: 0.75rem;
            border: 1px solid rgba(56, 189, 248, 0.35);
            background: rgba(15, 23, 42, 0.85);
            padding: 0.75rem 0.85rem 0.8rem;
            box-shadow: 0 8px 24px rgba(2, 6, 23, 0.35);
        }
        .backup-fetch-rename-title {
            font-size: 0.8rem;
            font-weight: 700;
            color: #e0f2fe;
            letter-spacing: 0.01em;
            margin-bottom: 0.25rem;
        }
        .backup-fetch-rename-msg {
            font-size: 0.78rem;
            color: #cbd5e1;
            line-height: 1.4;
            margin: 0 0 0.55rem;
        }
        .backup-fetch-rename-msg strong {
            color: #fde68a;
            font-weight: 700;
        }
        .backup-fetch-rename-label {
            display: block;
            font-size: 0.68rem;
            font-weight: 600;
            color: #94a3b8;
            margin-bottom: 0.25rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .backup-fetch-rename-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.4rem;
        }
        .backup-fetch-rename-row input[type="text"] {
            flex: 1 1 10rem;
            min-width: 8rem;
            background: rgba(2, 6, 23, 0.65);
            border: 1px solid rgba(148, 163, 184, 0.35);
            border-radius: 0.45rem;
            color: #f1f5f9;
            font-size: 0.84rem;
            padding: 0.4rem 0.55rem;
        }
        .backup-fetch-rename-row input[type="text"]:focus {
            outline: none;
            border-color: rgba(56, 189, 248, 0.65);
            box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
        }
        .backup-fetch-rename-go {
            font-size: 0.75rem;
            font-weight: 700;
            padding: 0.4rem 0.75rem;
            border-radius: 0.45rem;
            background: #0284c7;
            color: #f0f9ff;
            border: 1px solid rgba(56, 189, 248, 0.45);
            cursor: pointer;
        }
        .backup-fetch-rename-go:hover {
            background: #0369a1;
        }
        .backup-fetch-rename-cancel {
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0.4rem 0.65rem;
            border-radius: 0.45rem;
            background: rgba(71, 85, 105, 0.45);
            color: #e2e8f0;
            border: 1px solid rgba(148, 163, 184, 0.35);
            cursor: pointer;
        }
        .backup-fetch-rename-cancel:hover {
            background: rgba(100, 116, 139, 0.55);
        }
        .backup-fetch-rename-hint {
            margin-top: 0.4rem;
            font-size: 0.68rem;
            color: #64748b;
        }
        /* Other short result slots: hide when empty; no reserved height */
        #server-result:empty,
        #server-result.is-marker-only,
        #whitelist-result:empty,
        #mc-cmd-result:empty,
        #upload-result:empty,
        #world-ul-result:empty {
            display: none !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
            border: none !important;
        }
        /* Never reserve a blank strip above the pack list for marker-only payloads */
        #server-result.server-result-slot {
            min-height: 0;
            margin-top: 0.35rem;
            line-height: 1.25;
        }
        #server-result.server-result-slot:empty,
        #server-result.server-result-slot.is-marker-only {
            margin-top: 0 !important;
        }

        /* Linked user card: Unlink only on hover (opacity only — no pointer-events toggle).
           Toggling pointer-events + HTMX /user every few seconds re-swapped the card and
           dropped :hover mid-cursor, which made Unlink flicker. */
        .link-user-card {
            position: relative;
            /* Keep a stable row so the button slot does not reflow the badge text */
            min-height: 2.35rem;
        }
        .link-user-card .unlink-btn {
            opacity: 0;
            /* Keep hit-testing so moving onto the (fading) button never leaves the card */
            pointer-events: auto;
            /* Reserve width even when invisible (ml-auto already pins it right) */
            min-width: 3.5rem;
            flex-shrink: 0;
            transition: opacity 0.12s ease, background-color 0.12s ease;
        }
        .link-user-card:hover .unlink-btn,
        .link-user-card:focus-within .unlink-btn,
        .link-user-card.is-hover .unlink-btn {
            opacity: 1;
        }
        @media (hover: none) {
            /* Touch devices: keep Unlink reachable */
            .link-user-card .unlink-btn {
                opacity: 1;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .link-user-card .unlink-btn {
                transition: none;
            }
        }

        /* World upload progress */
        .wu-progress { margin-top: 0.75rem; }
        .wu-progress-head {
            display: flex; justify-content: space-between; align-items: center;
            gap: 0.5rem; font-size: 0.72rem; color: rgba(186, 230, 253, 0.85); margin-bottom: 0.35rem;
        }
        .wu-progress-track {
            height: 0.55rem; border-radius: 999px; overflow: hidden;
            background: rgba(15, 23, 42, 0.85);
            border: 1px solid rgba(125, 211, 252, 0.22);
        }
        .wu-progress-bar {
            height: 100%; width: 0%;
            background: linear-gradient(90deg, #0284c7, #38bdf8, #34d399);
            border-radius: 999px;
            transition: width 0.12s linear;
        }
        .wu-progress-bar.is-pulse {
            background: linear-gradient(90deg, #0369a1, #38bdf8, #0369a1);
            background-size: 200% 100%;
            animation: wu-bar-pulse 1.1s linear infinite;
        }
        @keyframes wu-bar-pulse {
            0% { background-position: 100% 0; }
            100% { background-position: -100% 0; }
        }

        /* Linked-user presence — stack anchored bottom-right; join/leave toasts
           float in a separate layer ABOVE the stack (never reflow "On the panel"). */
        #r5-presence-host {
            position: fixed;
            right: max(0.85rem, env(safe-area-inset-right));
            bottom: max(1rem, env(safe-area-inset-bottom));
            z-index: 10020;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0;
            max-width: min(18rem, calc(100vw - 1.5rem));
            pointer-events: none;
            overflow: visible;
        }
        /* Absolute tray: toasts always paint above the stack, no layout shift */
        #r5-presence-toasts {
            position: absolute;
            right: 0;
            bottom: 100%;
            margin-bottom: 0.4rem;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.28rem;
            max-width: min(18rem, calc(100vw - 1.5rem));
            pointer-events: none;
            overflow: visible;
        }
        .r5-presence-toast {
            pointer-events: none;
            display: block;
            margin: 0;
            padding: 0;
            border: none;
            background: none;
            box-shadow: none;
            border-radius: 0;
            color: #f0f9ff;
            font-size: 0.88rem;
            font-weight: 650;
            line-height: 1.3;
            text-align: right;
            text-shadow:
                0 1px 2px rgba(2, 6, 23, 0.85),
                0 0 12px rgba(14, 165, 233, 0.35);
            white-space: nowrap;
            opacity: 0;
            transform: translateY(0.4rem);
            animation: r5-presence-float 3.6s ease-out forwards;
        }
        .r5-presence-toast strong {
            color: #fff;
            font-weight: 750;
        }
        .r5-presence-toast .r5-presence-sub {
            display: inline;
            margin: 0;
            margin-left: 0.28rem;
            font-size: 0.82rem;
            font-weight: 500;
            color: rgba(186, 230, 253, 0.88);
        }
        .r5-presence-toast.is-leave {
            color: rgba(254, 226, 226, 0.95);
            text-shadow:
                0 1px 2px rgba(2, 6, 23, 0.85),
                0 0 12px rgba(248, 113, 113, 0.25);
        }
        .r5-presence-toast.is-leave .r5-presence-sub {
            color: rgba(252, 165, 165, 0.88);
        }
        /* hide leftover structure from older markup */
        .r5-presence-toast .r5-presence-dot,
        .r5-presence-toast .r5-presence-text {
            display: contents;
        }
        @keyframes r5-presence-float {
            0% {
                opacity: 0;
                transform: translateY(0.55rem);
            }
            12% {
                opacity: 1;
                transform: translateY(0);
            }
            55% {
                opacity: 0.95;
                transform: translateY(-1.1rem);
            }
            100% {
                opacity: 0;
                transform: translateY(-2.75rem);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .r5-presence-toast {
                animation: r5-presence-float-reduced 2.8s ease-out forwards;
            }
            @keyframes r5-presence-float-reduced {
                0% { opacity: 0; }
                15% { opacity: 1; }
                75% { opacity: 1; }
                100% { opacity: 0; }
            }
        }
        /* Persistent “who’s here” — also no box, soft text only */
        .r5-presence-stack {
            pointer-events: none;
            padding: 0;
            margin: 0 0 0.15rem 0;
            border: none;
            background: none;
            box-shadow: none;
            color: rgba(224, 242, 254, 0.9);
            font-size: 0.75rem;
            text-align: right;
            text-shadow: 0 1px 2px rgba(2, 6, 23, 0.8);
        }
        .r5-presence-stack .r5-ps-title {
            font-weight: 650;
            color: rgba(186, 230, 253, 0.7);
            margin: 0 0 0.15rem 0;
            padding: 0;
            font-size: 0.62rem;
            line-height: 1.2;
            height: 0.75rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            /* Fixed metrics so row activity text never nudges the title */
            box-sizing: border-box;
        }
        .r5-presence-stack ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .r5-presence-stack li {
            /* Fixed row height so activity text never reflows the bottom-anchored
               stack (would push "On the panel" up). Baseline-align name + doing. */
            padding: 0;
            margin: 0;
            color: #e0f2fe;
            font-weight: 650;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: baseline;
            gap: 0.35rem;
            white-space: nowrap;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 1.15rem;
            min-height: 1.15rem;
            max-height: 1.15rem;
            line-height: 1.15rem;
            box-sizing: border-box;
        }
        .r5-presence-stack li::before {
            content: none;
        }
        /* Activity left of name (one row per person — no name-only duplicate list) */
        .r5-presence-stack .r5-ac-doing {
            color: rgba(186, 230, 253, 0.88);
            font-weight: 500;
            font-size: 0.7rem;
            /* Same line-height as name; pure baseline (no top offset) */
            line-height: 1.15rem;
            height: auto;
            order: 0;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            vertical-align: baseline;
            flex-shrink: 1;
            position: static;
            top: auto;
        }
        .r5-presence-stack .r5-ac-name {
            color: #fff;
            font-weight: 750;
            font-size: 0.75rem;
            line-height: 1.15rem;
            height: auto;
            order: 1;
            flex-shrink: 0;
            display: inline-block;
            vertical-align: baseline;
        }
        .r5-presence-stack li.is-driver .r5-ac-doing {
            color: #fcd34d;
        }
        .r5-presence-stack li.is-guest .r5-ac-name {
            color: rgba(224, 242, 254, 0.82);
            font-weight: 650;
        }
        .r5-presence-stack li.is-ops {
            color: #fbbf24;
        }
        .r5-presence-stack li.is-ops .r5-ac-doing {
            color: #fbbf24;
        }
        /* Legacy chips class kept as alias if old markup flashes */
        .r5-activity-chips { display: none !important; }
        .r5-activity-chip .r5-ac-name { color: #fff; font-weight: 750; }
        .r5-activity-chip .r5-ac-doing { color: rgba(186, 230, 253, 0.88); }
        /* Soft contention toast — pointer events so Take control is clickable */
        .r5-driver-toast {
            pointer-events: auto;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.35rem;
            padding: 0.45rem 0.65rem;
            margin: 0 0 0.25rem 0;
            border-radius: 0.45rem;
            background: rgba(15, 23, 42, 0.88);
            border: 1px solid rgba(251, 191, 36, 0.35);
            box-shadow: 0 4px 18px rgba(2, 6, 23, 0.45);
            color: #fef3c7;
            font-size: 0.78rem;
            font-weight: 600;
            line-height: 1.3;
            text-align: right;
            max-width: min(18rem, calc(100vw - 1.5rem));
            animation: r5-driver-toast-in 0.2s ease-out;
        }
        .r5-driver-toast .r5-dt-msg {
            color: #fde68a;
            font-weight: 550;
        }
        .r5-driver-toast button {
            pointer-events: auto;
            cursor: pointer;
            border: 1px solid rgba(251, 191, 36, 0.55);
            background: rgba(251, 191, 36, 0.15);
            color: #fef3c7;
            font-size: 0.72rem;
            font-weight: 700;
            padding: 0.28rem 0.55rem;
            border-radius: 0.35rem;
        }
        .r5-driver-toast button:hover {
            background: rgba(251, 191, 36, 0.28);
        }
        @keyframes r5-driver-toast-in {
            from { opacity: 0; transform: translateY(0.35rem); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Global upload toast — fixed bottom center; survives Files-tab navigation */
        #r5-upload-toast {
            position: fixed;
            left: 50%;
            bottom: 1.15rem;
            transform: translateX(-50%) translateY(120%);
            z-index: 9999;
            width: min(18.5rem, calc(100vw - 1.75rem));
            pointer-events: none;
            opacity: 0;
            transition: transform 0.28s ease, opacity 0.28s ease;
        }
        #r5-upload-toast.is-visible {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
        #r5-upload-toast .r5-ut-card {
            background: linear-gradient(
                155deg,
                rgba(255, 255, 255, 0.12) 0%,
                rgba(14, 165, 233, 0.10) 40%,
                rgba(15, 23, 42, 0.38) 100%
            );
            border: 1px solid rgba(186, 230, 253, 0.28);
            box-shadow:
                0 8px 28px rgba(0, 0, 0, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.14);
            border-radius: 0.75rem;
            padding: 0.55rem 0.7rem 0.65rem;
            color: #e0f2fe;
            backdrop-filter: blur(18px) saturate(1.35);
            -webkit-backdrop-filter: blur(18px) saturate(1.35);
        }
        #r5-upload-toast.is-done .r5-ut-card {
            border-color: rgba(52, 211, 153, 0.45);
            background: linear-gradient(
                155deg,
                rgba(167, 243, 208, 0.14) 0%,
                rgba(15, 23, 42, 0.36) 100%
            );
        }
        #r5-upload-toast.is-error .r5-ut-card {
            border-color: rgba(248, 113, 113, 0.45);
            background: linear-gradient(
                155deg,
                rgba(254, 202, 202, 0.12) 0%,
                rgba(15, 23, 42, 0.36) 100%
            );
        }
        #r5-upload-toast .r5-ut-title {
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            color: #f8fafc;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #r5-upload-toast .r5-ut-sub {
            margin-top: 0.12rem;
            font-size: 0.68rem;
            line-height: 1.25;
            color: rgba(253, 224, 71, 0.95);
        }
        #r5-upload-toast.is-done .r5-ut-sub {
            color: rgba(167, 243, 208, 0.95);
        }
        #r5-upload-toast.is-error .r5-ut-sub {
            color: rgba(254, 202, 202, 0.95);
        }
        #r5-upload-toast .r5-ut-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.4rem;
            margin-top: 0.35rem;
            font-size: 0.65rem;
            color: rgba(224, 242, 254, 0.85);
        }
        #r5-upload-toast .r5-ut-track {
            margin-top: 0.28rem;
            height: 0.4rem;
            border-radius: 999px;
            overflow: hidden;
            background: rgba(15, 23, 42, 0.35);
            border: 1px solid rgba(186, 230, 253, 0.18);
        }
        #r5-upload-toast .r5-ut-bar {
            height: 100%;
            width: 0%;
            border-radius: 999px;
            background: linear-gradient(90deg, #0284c7, #38bdf8, #34d399);
            transition: width 0.12s linear;
        }
        #r5-upload-toast .r5-ut-bar.is-pulse {
            background: linear-gradient(90deg, #0369a1, #38bdf8, #0369a1);
            background-size: 200% 100%;
            animation: wu-bar-pulse 1.1s linear infinite;
        }
        /* Compact world-upload UI while transfer is active */
        #world-upload-form.is-uploading #world-dropzone,
        #world-upload-form.is-uploading #world-upload-next {
            display: none !important;
        }
        #world-upload-form.is-uploading #world-upload-progress {
            display: block !important;
        }
        #wu-progress-label:empty {
            display: none;
        }
        #world-upload-progress .wu-progress-head,
        #pack-upload-progress .wu-progress-head {
            justify-content: flex-end;
        }
        #world-upload-form.is-uploading #world-upload-progress .wu-progress-head {
            justify-content: flex-end;
        }
        #world-upload-active {
            display: none;
        }
        #world-upload-form.is-uploading #world-upload-active {
            display: block;
        }

        /* Server pack: same reveal + active pattern as world upload */
        #pack-form.is-uploading #dropzone,
        #pack-form.is-uploading #pack-upload-next {
            display: none !important;
        }
        #pack-upload-active { display: none; }
        #pack-form.is-uploading #pack-upload-active { display: block; }
        #pack-form.is-uploading #pack-upload-progress { display: block !important; }
        #pu-progress-label:empty { display: none; }
        /* Datapack library upload (Files, below Upload Server) */
        #dp-upload-form.is-uploading #dp-dropzone,
        #dp-upload-form.is-uploading #dp-upload-next { display: none !important; }
        #dp-upload-active { display: none; }
        #dp-upload-form.is-uploading #dp-upload-active { display: block; }
        #dp-upload-form.is-uploading #dp-upload-progress { display: block !important; }
        .file-drop-name { color: #e0f2fe !important; }
        /* Shared datapack icon (crate + paper) */
        .dp-ico {
            display: inline-block;
            width: 1.15em;
            height: 1.15em;
            vertical-align: -0.2em;
            object-fit: contain;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            flex-shrink: 0;
            user-select: none;
            pointer-events: none;
        }
        .dp-ico-title { width: 1.25rem; height: 1.25rem; vertical-align: -0.22em; }
        .dp-ico-drop { width: 2.25rem; height: 2.25rem; vertical-align: 0; }
        .dp-ico-row { width: 1.35rem; height: 1.35rem; vertical-align: -0.25em; flex-shrink: 0; }
        /* Minecraft pack.png logos (usually 128×128 pixel art) */
        .dp-ico-pack {
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 0.15rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.4);
            background: #000;
            object-fit: contain;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }
        .entity-datapacks-panel .dp-ico-pack,
        .es-bubble .dp-ico-pack {
            width: 1.65rem;
            height: 1.65rem;
        }
        .dp-heading {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .dp-heading .dp-ico { flex-shrink: 0; }
        .dp-row-label { display: inline; }
        /* Pack format: isolated chip so it is not read as undertext */
        .dp-format-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.28rem;
            margin-left: 0.4rem;
            padding: 0.12rem 0.42rem 0.12rem 0.32rem;
            border-radius: 999px;
            border: 1px solid rgba(125, 211, 252, 0.35);
            background: rgba(14, 116, 144, 0.22);
            color: #e0f2fe;
            font-size: 0.68rem;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.02em;
            line-height: 1.15;
            vertical-align: 0.12em;
            white-space: nowrap;
            user-select: none;
        }
        .dp-format-badge-k {
            font-size: 0.58rem;
            font-weight: 750;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: rgba(125, 211, 252, 0.9);
            opacity: 0.95;
        }
        .dp-lib-main .dp-format-badge {
            vertical-align: 0.15em;
        }
        /* Minimal drag-drop upload cards (Files page) */
        .file-drop-card { min-width: 0; }
        .file-drop {
            border: 1.5px dashed rgba(125, 211, 252, 0.35);
            border-radius: 0.85rem;
            padding: 1.35rem 0.75rem;
            text-align: center;
            cursor: pointer;
            background: rgba(15, 23, 42, 0.35);
            transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
            user-select: none;
        }
        .file-drop:hover,
        .file-drop.is-drag {
            border-color: rgba(125, 211, 252, 0.7);
            background: rgba(56, 189, 248, 0.08);
            box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.15);
        }
        .file-drop.has-file {
            border-style: solid;
            border-color: rgba(52, 211, 153, 0.55);
            background: rgba(16, 185, 129, 0.08);
        }
        .file-drop-ico {
            font-size: 1.5rem;
            line-height: 1;
            margin-bottom: 0.35rem;
        }
        .file-drop-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: #e0f2fe;
        }
        .file-drop-hint {
            font-size: 0.7rem;
            color: rgba(186, 230, 253, 0.65);
            margin-top: 0.25rem;
            word-break: break-all;
        }
        .file-drop-ico-img {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.35rem;
        }
        .sr-only {
            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
        }
        
        /* Layout only when Admin is allowed to see RCON — never force flex while hidden */
        .mc-cmd-row {
            gap: 0.5rem;
            margin-top: 0.65rem;
            align-items: stretch;
        }
        body.r5-is-admin #mc-cmd-form.mc-cmd-row {
            display: flex !important;
        }
        .mc-cmd-row input {
            flex: 1;
            min-width: 0;
            background: rgba(15, 23, 42, 0.75);
            border: 1px solid rgba(148, 163, 184, 0.35);
            border-radius: 0.45rem;
            color: #f8fafc;
            font-family: ui-monospace, Consolas, monospace;
            font-size: 0.75rem;
            padding: 0.45rem 0.65rem;
        }
        .mc-cmd-row input:focus {
            outline: none;
            border-color: rgba(56, 189, 248, 0.55);
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15);
        }
        .mc-cmd-row button {
            flex: none;
            padding: 0.45rem 0.85rem;
            border-radius: 0.45rem;
            background: #0369a1;
            color: #f0f9ff;
            font-size: 0.75rem;
            font-weight: 600;
            border: none;
            cursor: pointer;
        }
        .mc-cmd-row button:hover { background: #0284c7; }
        .mc-cmd-result {
            margin-top: 0.4rem;
            font-size: 0.7rem;
            min-height: 1rem;
            color: #e2e8f0;
            word-break: break-word;
        }

        /* World-upload target server picker */
        .wu-targets {
            min-height: 2.75rem;
            border: 1px solid rgba(125, 211, 252, 0.22);
            border-radius: 0.65rem;
            background: rgba(15, 23, 42, 0.45);
            max-height: 11rem;
            overflow: auto;
            scrollbar-gutter: stable;
        }
        .wu-target {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            padding: 0.45rem 0.65rem;
            font-size: 0.8rem;
            cursor: pointer;
            border-bottom: 1px solid rgba(51, 65, 85, 0.45);
            transition: background 0.15s ease, border-color 0.15s ease;
            color: rgba(224, 242, 254, 0.9);
        }
        .wu-target:last-child { border-bottom: none; }
        .wu-target:hover { background: rgba(56, 189, 248, 0.1); }
        .wu-target.is-selected {
            background: linear-gradient(90deg, rgba(56, 189, 248, 0.2), rgba(14, 116, 144, 0.12));
            box-shadow: inset 3px 0 0 #38bdf8;
        }
        .wu-target.is-active-server {
            /* currently running / active pack on the host */
        }
        .wu-target .wu-name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .wu-badge {
            flex: none;
            font-size: 0.65rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 0.12rem 0.4rem;
            border-radius: 999px;
            border: 1px solid transparent;
        }
        .wu-badge-active {
            color: #a7f3d0;
            background: rgba(6, 78, 59, 0.55);
            border-color: rgba(52, 211, 153, 0.45);
        }
        .wu-badge-pick {
            color: #bae6fd;
            background: rgba(7, 89, 133, 0.45);
            border-color: rgba(56, 189, 248, 0.4);
        }
        .main-col {
            flex: 0 0 var(--main-w);
            width: var(--main-w);
            max-width: min(42rem, calc(100vw - 2rem));
            min-width: 0;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .page-header {
            margin: 0;
            max-width: 100%;
        }
        .main-col > .site-view.is-active {
            margin-top: 0;
            padding-top: 0;
        }
        .main-col > .site-view.is-active > .card:first-child,
        .main-col > .site-view.is-active > .console-grid:first-child {
            margin-top: 0;
        }
        .side-nav-title {
            font-size: 0.7rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(186, 230, 253, 0.65);
            margin: 0 0 0.65rem 0.35rem;
            font-weight: 600;
        }
        .side-nav-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.65rem;
            margin-bottom: 0.25rem;
            border-radius: 0.65rem;
            color: rgba(224, 242, 254, 0.88);
            text-decoration: none;
            font-size: 0.875rem;
            border: 1px solid transparent;
            transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .side-nav-link:hover {
            background: rgba(56, 189, 248, 0.12);
            border-color: rgba(125, 211, 252, 0.3);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
        }
        .side-nav-link.is-active {
            background: linear-gradient(135deg, rgba(56,189,248,0.22), rgba(52,211,153,0.12));
            border-color: rgba(125, 211, 252, 0.4);
            color: #f0f9ff;
            font-weight: 600;
        }
        .side-nav-link .nav-ico { width: 1.15rem; text-align: center; opacity: 0.9; }
        .side-nav-soon {
            margin-left: auto;
            font-size: 0.65rem;
            letter-spacing: 0.04em;
            color: rgba(125, 211, 252, 0.55);
            text-transform: uppercase;
        }

        /* Smart Backup control sits immediately right of Auto Backup (inline flex row) */
        #backups-content [data-auto-on],
        .backups-panel [data-auto-on],
        [data-auto-on] {
            display: flex !important;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem;
        }
        .r5-smart-backup-wrap {
            position: relative;
            display: inline-flex !important;
            flex-direction: column;
            align-items: stretch;
            flex: 0 0 auto;
            vertical-align: middle;
            order: 0;
        }
        #auto-backup-btn + .r5-smart-backup-wrap,
        #auto-backup-btn ~ .r5-smart-backup-wrap {
            margin-left: 0;
        }
        .r5-smart-backup-tip {
            display: none;
            position: absolute;
            left: 0;
            top: calc(100% + 0.35rem);
            z-index: 30;
            width: max(12rem, 100%);
            max-width: 16rem;
            padding: 0.45rem 0.55rem;
            border-radius: 0.45rem;
            border: 1px solid rgba(125, 211, 252, 0.35);
            background: rgba(15, 23, 42, 0.96);
            color: rgba(186, 230, 253, 0.92);
            font-size: 0.7rem;
            line-height: 1.35;
            box-shadow: 0 8px 24px rgba(2, 6, 23, 0.45);
            pointer-events: none;
        }
        .r5-smart-backup-wrap:hover:not(.tip-off) .r5-smart-backup-tip,
        .r5-smart-backup-wrap:focus-within:not(.tip-off) .r5-smart-backup-tip {
            display: block;
        }

        /* About: no body bottom padding so reef sits on the viewport edge.
           Tailwind pb-10 + app-shell bottom pad leave a visible gap under the reef. */
        body.theme-about {
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }
        body.theme-about .app-shell {
            padding-bottom: 0.75rem;
        }
        body.theme-about #reef-scene.reef-scene,
        body.theme-about .reef-scene {
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
        }

        /* ----- Coral reef: end of PAGE (About only). Fixed height; never inflate scrollbar. ----- */
        .reef-scene {
            display: none; /* only body.theme-about */
            position: relative;
            width: 100vw;
            max-width: 100vw;
            margin: 0;
            margin-left: calc(50% - 50vw);
            margin-top: 0;
            margin-bottom: 0;
            height: 15rem;
            min-height: 15rem;
            max-height: 15rem;
            border-radius: 0;
            z-index: 5;
            overflow: hidden;
            isolation: isolate;
            pointer-events: auto;
            user-select: none;
            -webkit-user-select: none;
            border: none;
            box-shadow: none;
            /* soft top blend into page background — no hard edge */
            -webkit-mask-image: linear-gradient(to bottom,
                transparent 0%,
                rgba(0,0,0,0.15) 8%,
                rgba(0,0,0,0.55) 18%,
                rgba(0,0,0,0.9) 32%,
                #000 48%,
                #000 100%);
            mask-image: linear-gradient(to bottom,
                transparent 0%,
                rgba(0,0,0,0.15) 8%,
                rgba(0,0,0,0.55) 18%,
                rgba(0,0,0,0.9) 32%,
                #000 48%,
                #000 100%);
            transition: filter 0.45s ease, height 0.35s ease;
            flex: none;
            box-sizing: border-box;
        }
        body.theme-about .reef-scene {
            display: block;
        }
        .reef-scene.is-frenzy {
            filter: saturate(1.2) brightness(1.05);
            height: 16rem;
            min-height: 16rem;
            max-height: 16rem;
        }

        .reef-water {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 120% 80% at 20% 0%, rgba(125, 211, 252, 0.28), transparent 55%),
                radial-gradient(ellipse 90% 70% at 85% 10%, rgba(34, 211, 238, 0.18), transparent 50%),
                radial-gradient(ellipse 100% 60% at 50% 100%, rgba(6, 78, 59, 0.35), transparent 55%),
                linear-gradient(180deg,
                    rgba(8, 47, 73, 0.15) 0%,
                    rgba(12, 74, 110, 0.45) 38%,
                    rgba(8, 51, 68, 0.72) 72%,
                    rgba(15, 40, 35, 0.9) 100%);
            z-index: 0;
        }
        .reef-water::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 18% 40%, rgba(255,255,255,0.07) 0 1px, transparent 2px),
                radial-gradient(circle at 62% 22%, rgba(255,255,255,0.06) 0 1px, transparent 2px),
                radial-gradient(circle at 80% 55%, rgba(255,255,255,0.05) 0 1px, transparent 2px);
            opacity: 0.7;
            animation: reef-sparkle 7s ease-in-out infinite alternate;
            pointer-events: none;
        }
        @keyframes reef-sparkle {
            0% { opacity: 0.45; }
            100% { opacity: 0.85; }
        }
        /* caustic light bands */
        .reef-caustics {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            opacity: 0.35;
            background:
                repeating-linear-gradient(110deg,
                    transparent 0 14px,
                    rgba(186, 230, 253, 0.07) 14px 18px,
                    transparent 18px 34px);
            mix-blend-mode: screen;
            animation: reef-caustic-drift 11s linear infinite;
        }
        @keyframes reef-caustic-drift {
            0% { transform: translateX(0) translateY(0); }
            100% { transform: translateX(-28px) translateY(6px); }
        }
        .reef-decor {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 72%;
            z-index: 2;
            pointer-events: none;
        }
        .reef-decor svg {
            width: 100%;
            height: 100%;
            display: block;
        }
        .reef-sand {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 22%;
            z-index: 3;
            pointer-events: none;
            background:
                radial-gradient(ellipse 40% 80% at 15% 100%, rgba(253, 230, 138, 0.35), transparent 70%),
                radial-gradient(ellipse 50% 90% at 70% 100%, rgba(252, 211, 77, 0.22), transparent 70%),
                linear-gradient(180deg, transparent 0%, rgba(180, 140, 80, 0.35) 30%, rgba(120, 95, 55, 0.65) 100%);
            border-top: 1px solid rgba(253, 230, 138, 0.12);
        }
        .reef-bubbles {
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            overflow: hidden;
        }
        .reef-bubble {
            position: absolute;
            bottom: 12%;
            border-radius: 50%;
            border: 1px solid rgba(186, 230, 253, 0.45);
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), rgba(125,211,252,0.08) 55%, transparent 70%);
            opacity: 0.45;
            animation: reef-bubble-rise linear infinite;
        }
        @keyframes reef-bubble-rise {
            0%   { transform: translateY(0) scale(0.7); opacity: 0; }
            12%  { opacity: 0.5; }
            100% { transform: translateY(-12rem) translateX(8px) scale(1.1); opacity: 0; }
        }
        .reef-hint {
            position: absolute;
            top: 0.45rem;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.62rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(186, 230, 253, 0.32);
            pointer-events: none;
            z-index: 6;
            text-shadow: 0 1px 6px rgba(8, 47, 73, 0.6);
            transition: color 0.35s ease, letter-spacing 0.35s ease;
        }
        .reef-scene.is-frenzy .reef-hint {
            color: rgba(125, 211, 252, 0.75);
            letter-spacing: 0.22em;
        }
        .reef-fish-layer {
            position: absolute;
            inset: 0;
            z-index: 5;
        }
        .reef-fish {
            position: absolute;
            left: 0; top: 0;
            width: 52px;
            height: 32px;
            padding: 0;
            margin: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            z-index: 5;
            filter: drop-shadow(0 2px 3px rgba(0, 40, 60, 0.45));
            will-change: transform;
            touch-action: manipulation;
            transform-origin: 50% 50%;
        }
        .reef-fish:hover { filter: drop-shadow(0 3px 6px rgba(0, 60, 90, 0.5)) brightness(1.08); }
        .reef-fish:focus { outline: none; }
        .reef-fish:focus-visible {
            outline: 2px solid rgba(125, 211, 252, 0.6);
            outline-offset: 2px;
            border-radius: 8px;
        }
        .reef-fish-inner {
            width: 100%;
            height: 100%;
            transform-origin: 50% 50%;
        }
        .reef-fish .reef-fish-svg {
            width: 100%;
            height: 100%;
            display: block;
            overflow: visible;
        }
        .reef-fish .fish-tail {
            transform-origin: 8px 16px;
            animation: fish-tail 0.55s ease-in-out infinite;
        }
        .reef-fish .fish-fin {
            transform-origin: 22px 12px;
            animation: fish-fin 1.1s ease-in-out infinite;
        }
        .reef-fish.is-mad .fish-tail { animation-duration: 0.22s; }
        .reef-fish.is-mad .fish-fin { animation-duration: 0.28s; }
        .reef-fish .fish-eye-mad { opacity: 0; }
        .reef-fish.is-mad .fish-eye-calm { opacity: 0; }
        .reef-fish.is-mad .fish-eye-mad { opacity: 1; }
        @keyframes fish-tail {
            0%, 100% { transform: rotateY(0deg) scaleX(1); }
            50% { transform: rotateY(0deg) scaleX(0.72) rotate(8deg); }
        }
        @keyframes fish-fin {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(-14deg); }
        }
        /* Full-viewport frenzy layer */
        #reef-frenzy-layer {
            position: fixed;
            inset: 0;
            z-index: 70;
            pointer-events: none;
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.45s ease;
        }
        #reef-frenzy-layer.is-on { opacity: 1; }
        #reef-frenzy-layer .reef-flyer {
            position: absolute;
            width: 58px;
            height: 36px;
            left: 0; top: 0;
            will-change: transform;
            filter: drop-shadow(0 3px 5px rgba(0, 30, 50, 0.4));
            transform-origin: 50% 50%;
        }
        #reef-frenzy-layer .reef-flyer .reef-fish-svg {
            width: 100%; height: 100%; display: block; overflow: visible;
        }
        #reef-frenzy-layer .reef-flyer .fish-tail {
            transform-origin: 8px 16px;
            animation: fish-tail 0.16s ease-in-out infinite;
        }
        #reef-frenzy-layer .reef-flyer .fish-fin {
            transform-origin: 22px 12px;
            animation: fish-fin 0.22s ease-in-out infinite;
        }
        #reef-frenzy-layer .reef-flyer .fish-eye-calm { opacity: 0; }
        #reef-frenzy-layer .reef-flyer .fish-eye-mad { opacity: 1; }
        #reef-frenzy-layer .reef-bubble-puff {
            position: absolute;
            width: 7px; height: 7px;
            border-radius: 50%;
            border: 1px solid rgba(186, 230, 253, 0.5);
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 70%);
            will-change: transform, opacity;
            pointer-events: none;
        }
        #reef-frenzy-layer .reef-pop {
            position: absolute;
            font-size: 0.72rem;
            font-weight: 700;
            color: #bae6fd;
            text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 0 10px rgba(56,189,248,0.4);
            white-space: nowrap;
            pointer-events: none;
            will-change: transform, opacity;
            letter-spacing: 0.04em;
        }
        #reef-frenzy-vignette {
            position: fixed;
            inset: 0;
            z-index: 69;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.6s ease;
            background:
                radial-gradient(ellipse 80% 70% at 50% 50%, transparent 35%, rgba(8, 47, 73, 0.28) 100%);
        }
        body.reef-frenzy-active .bg-aero {
            filter: saturate(1.12) hue-rotate(-6deg) contrast(1.03);
            transition: filter 0.5s ease;
        }
        body.reef-frenzy-active #reef-frenzy-vignette { opacity: 1; }
        /* Eaten tab content */
        .reef-eaten-card {
            position: relative;
            min-height: 4.5rem;
            display: flex !important;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 0.35rem;
            background:
                radial-gradient(ellipse 70% 80% at 50% 50%, rgba(8, 47, 73, 0.55), rgba(15, 23, 42, 0.75)) !important;
            border: 1px dashed rgba(56, 189, 248, 0.35) !important;
            overflow: hidden;
        }
        .reef-eaten-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 30% 40%, transparent 18%, rgba(2, 20, 40, 0.5) 19% 100%),
                radial-gradient(circle at 70% 60%, transparent 12%, rgba(2, 20, 40, 0.35) 13% 100%);
            pointer-events: none;
            opacity: 0.85;
        }
        .reef-eaten-card .reef-eaten-ico {
            font-size: 1.6rem;
            line-height: 1;
            position: relative;
            z-index: 1;
            filter: drop-shadow(0 2px 6px rgba(14, 165, 233, 0.4));
            animation: reef-eaten-bob 1.4s ease-in-out infinite;
        }
        .reef-eaten-card .reef-eaten-msg {
            position: relative;
            z-index: 1;
            font-size: 0.78rem;
            color: rgba(186, 230, 253, 0.85);
            letter-spacing: 0.04em;
        }
        .reef-eaten-card .reef-eaten-sub {
            position: relative;
            z-index: 1;
            font-size: 0.65rem;
            color: rgba(125, 211, 252, 0.45);
        }
        @keyframes reef-eaten-bob {
            0%, 100% { transform: translateY(0) rotate(-4deg); }
            50% { transform: translateY(-4px) rotate(4deg); }
        }
        .reef-chomp-flash {
            animation: reef-chomp 0.45s ease-out forwards;
        }
        @keyframes reef-chomp {
            0% { filter: brightness(1); transform: scale(1); }
            35% { filter: brightness(1.4) saturate(1.3); transform: scale(0.92); }
            100% { filter: brightness(0.7); transform: scale(0.98); opacity: 0.85; }
        }
        @media (prefers-reduced-motion: reduce) {
            .reef-fish .fish-tail, .reef-fish .fish-fin,
            #reef-frenzy-layer .reef-flyer .fish-tail,
            #reef-frenzy-layer .reef-flyer .fish-fin,
            .reef-caustics, .reef-bubble, .reef-water::after,
            .reef-eaten-card .reef-eaten-ico {
                animation: none !important;
            }
        }

        /* Fixed overlays — must never contribute to document scroll height */
        #reef-chomp-toasts {
            position: fixed;
            left: 50%;
            bottom: max(1rem, env(safe-area-inset-bottom, 0px));
            transform: translateX(-50%);
            z-index: 80;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.35rem;
            width: min(22rem, calc(100vw - 1.5rem));
        }
        .reef-chomp-toast {
            pointer-events: none;
            padding: 0.4rem 0.75rem;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.88);
            border: 1px solid rgba(125, 211, 252, 0.35);
            color: #e0f2fe;
            font-size: 0.78rem;
            font-weight: 600;
            box-shadow: 0 8px 24px rgba(2, 6, 23, 0.45);
        }
        #reef-frenzy-vignette {
            position: fixed;
            inset: 0;
            z-index: 70;
            pointer-events: none;
            opacity: 0;
            background: radial-gradient(ellipse at center, transparent 40%, rgba(8, 47, 73, 0.35) 100%);
            transition: opacity 0.35s ease;
        }
        body.reef-frenzy-active #reef-frenzy-vignette { opacity: 1; }
        #reef-frenzy-layer {
            position: fixed;
            inset: 0;
            z-index: 72;
            pointer-events: none;
            opacity: 0;
            overflow: hidden;
        }
        #reef-frenzy-layer.is-on { opacity: 1; }


        /* ========== Mobile / tablet layout ========== */
        @media (max-width: 900px) {
            /* Safe areas + less chrome so content fits small screens */
            body.font-sans {
                padding-top: max(3.15rem, calc(2.65rem + env(safe-area-inset-top, 0px)));
                padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
                padding-left: env(safe-area-inset-left, 0px);
                padding-right: env(safe-area-inset-right, 0px);
            }
            body.theme-about {
                padding-bottom: 0 !important;
            }
            .app-shell {
                padding: 0.35rem 0.7rem 1.35rem;
                padding-left: max(0.7rem, env(safe-area-inset-left, 0px));
                padding-right: max(0.7rem, env(safe-area-inset-right, 0px));
            }
            .app-shell-body {
                flex-direction: column;
                width: 100%;
                margin-left: 0;
                margin-right: 0;
                gap: 0.5rem;
            }
            .side-nav-col {
                flex: none;
                width: 100%;
                align-self: auto;
                padding-top: 0 !important;
                /* Stay under fixed status bar while scrolling */
                position: sticky;
                top: max(2.55rem, calc(2.15rem + env(safe-area-inset-top, 0px)));
                z-index: 45;
                margin: 0 0 0.15rem;
            }
            .side-nav-stick {
                position: relative !important;
                top: 0 !important;
            }
            .side-nav {
                width: 100%;
                display: flex;
                flex-wrap: nowrap;
                gap: 0.3rem;
                align-items: stretch;
                margin-bottom: 0;
                padding: 0.4rem;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                overscroll-behavior-x: contain;
                border-radius: 0.85rem;
                /* Solid enough to read over content when sticky */
                background: linear-gradient(155deg,
                    rgba(15, 23, 42, 0.92) 0%,
                    rgba(8, 47, 73, 0.88) 55%,
                    rgba(15, 23, 42, 0.94) 100%) !important;
                box-shadow:
                    0 6px 20px rgba(8, 47, 73, 0.45),
                    inset 0 1px 0 rgba(255,255,255,0.2);
            }
            .side-nav::-webkit-scrollbar { display: none; }
            .nav-trail-layer { display: none; }
            .side-nav-title { display: none; }
            .side-nav-link {
                margin-bottom: 0;
                flex: 0 0 auto;
                white-space: nowrap;
                padding: 0.48rem 0.72rem;
                font-size: 0.8rem;
                min-height: 2.35rem;
                border-radius: 0.6rem;
            }
            .side-nav-link.nav-admin-only[hidden] {
                display: none !important;
            }
            .side-nav-link .nav-ico { width: 1rem; font-size: 0.95rem; }
            .main-col {
                flex: 1 1 auto;
                width: 100%;
                max-width: 100%;
            }
            /* Compact header */
            .page-header-row {
                align-items: flex-start;
                gap: 0.65rem;
                margin-bottom: 0.85rem !important;
            }
            .page-header h1 {
                font-size: 1.55rem !important;
                line-height: 1.15;
            }
            .page-header .hero-sub {
                font-size: 0.78rem;
            }
            #header-auth-badge {
                min-width: 0 !important;
                font-size: 0.72rem;
            }
            /* Cards & type scale */
            .card.rounded-2xl {
                border-radius: 1rem;
            }
            .main-col .card.p-6,
            .main-col .card.p-5 {
                padding: 0.95rem 0.9rem !important;
            }
            .main-col h2.text-xl,
            .main-col .section-head.text-xl {
                font-size: 1.05rem;
            }
            .main-col h2.text-lg,
            .main-col .section-head.text-lg {
                font-size: 0.98rem;
            }
            .section { margin-bottom: 1rem; }
            /* Controls / forms */
            .action-btn {
                min-width: 0;
                flex: 1 1 auto;
            }
            #server-controls .r5-ctrl-row,
            #server-controls .flex.flex-wrap {
                width: 100%;
            }
            #server-controls button[data-ctrl],
            #server-controls .action-btn[data-ctrl],
            #server-controls button {
                flex: 1 1 30%;
                width: auto;
                min-width: 5.5rem;
                max-width: none;
                padding-left: 0.65rem !important;
                padding-right: 0.65rem !important;
            }
            #world-create-form input {
                min-width: 0 !important;
                flex: 1 1 100%;
            }
            #world-create-form button {
                width: 100%;
            }
            /* Status / lock / linked banner */
            #discord-status-bar {
                padding-left: max(0.65rem, env(safe-area-inset-left, 0px)) !important;
                padding-right: max(0.65rem, env(safe-area-inset-right, 0px)) !important;
                padding-top: max(0.4rem, env(safe-area-inset-top, 0px)) !important;
                padding-bottom: 0.4rem !important;
                font-size: 0.78rem;
                min-height: 0;
            }
            #discord-status-inner .r5-status-text {
                font-size: 0.78rem;
                line-height: 1.25;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 100%;
            }
            #discord-status-actions {
                flex-shrink: 0;
            }
            #discord-status-actions button {
                white-space: nowrap;
                padding: 0.28rem 0.45rem !important;
                font-size: 0.68rem !important;
            }
            .lock-banner {
                padding: 0.85rem 0.9rem;
                border-radius: 0.85rem;
            }
            .lock-banner-title { font-size: 0.98rem; }
            .lock-banner form {
                width: 100%;
            }
            .lock-banner input[name="code"] {
                width: 100% !important;
                max-width: none;
                flex: 1 1 auto;
            }
            .lock-banner form button {
                flex: 1 1 auto;
            }
            #link-notice > div.flex {
                flex-wrap: wrap;
                gap: 0.35rem 0.65rem;
            }
            /* Console readable but not huge */
            .console-pre {
                max-height: 12rem;
                font-size: 0.65rem;
                padding: 0.55rem 0.6rem;
            }
            .console-panel-head {
                flex-wrap: wrap;
            }
            /* Touch: always show kick / delete (no hover) */
            .kick-arm {
                opacity: 1 !important;
            }
            #backups-content .backup-row {
                padding: 0 0.25rem;
                min-height: 2.15rem;
                height: 2.15rem;
            }
            /* Upload toast safe area */
            #r5-upload-toast {
                bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
                width: min(18.5rem, calc(100vw - 1.5rem));
            }
            /* Reef: still About-only; full-bleed width, fixed height (no scrollbar bloat) */
            .reef-scene {
                width: 100%;
                max-width: 100%;
                margin-left: 0;
                height: 12.5rem;
                min-height: 12.5rem;
                max-height: 12.5rem;
            }
            .reef-scene.is-frenzy {
                height: 13.5rem;
                min-height: 13.5rem;
                max-height: 13.5rem;
            }
            /* About */
            .about-title { font-size: 1.35rem; }
            .about-lead { font-size: 0.88rem; }
        }

        @media (max-width: 560px) {
            body.font-sans {
                padding-top: max(3.35rem, calc(2.85rem + env(safe-area-inset-top, 0px)));
            }
            .page-header h1 {
                font-size: 1.35rem !important;
            }
            .page-header-row {
                flex-wrap: wrap;
            }
            #header-auth-badge {
                width: 100%;
                text-align: left !important;
            }
            #server-controls button {
                flex: 1 1 100%;
            }
            #discord-status-inner .r5-status-text {
                white-space: nowrap;
                text-align: center;
                max-width: 100%;
            }
            #discord-status-actions {
                justify-self: end;
            }
            .side-nav-link .nav-label-full { display: none; }
            .side-nav-link .nav-label-short { display: inline; }
            .file-drop { padding: 1.1rem 0.6rem; }
            .status-box .grid.grid-cols-2 {
                gap: 0.35rem 0.5rem;
                font-size: 0.8rem;
            }
            .status-box .font-mono {
                word-break: break-all;
            }
            /* 16px inputs prevent iOS focus zoom */
            input, select, textarea {
                font-size: 16px !important;
            }
            .settings-row input[type="text"],
            .settings-row input[type="number"],
            .settings-row input[type="password"],
            .settings-row textarea,
            .settings-row select {
                font-size: 16px !important;
                padding: 0.5rem 0.6rem;
            }
        }

        /* Nav short labels: hidden on desktop (media above enables them ≤560px) */
        .side-nav-link .nav-label-short { display: none; }
        @media (max-width: 560px) {
            .side-nav-link .nav-label-short { display: inline; }
            .side-nav-link .nav-label-full { display: none; }
        }

        /* Coarse pointers (phones/tablets): never hide actions behind hover */
        @media (hover: none) {
            .kick-arm { opacity: 1 !important; }
            .btn:hover { transform: none; }
        }

        /* Glossy glass cards — hover glow eases out over 0.7s when mouse leaves */
        .card {
            background: linear-gradient(155deg,
                rgba(255,255,255,0.14) 0%,
                rgba(186,230,253,0.10) 35%,
                rgba(15,23,42,0.55) 100%);
            border: 1px solid rgba(255,255,255,0.22);
            box-shadow:
                0 8px 32px rgba(8, 47, 73, 0.35),
                inset 0 1px 0 rgba(255,255,255,0.35),
                inset 0 -1px 0 rgba(0,0,0,0.15);
            backdrop-filter: blur(16px) saturate(1.35);
            -webkit-backdrop-filter: blur(16px) saturate(1.35);
            position: relative;
            overflow: hidden;
            /* No filter on hover — brightness/filter re-rasterizes text and looks like a bold flash */
            transition:
                border-color 0.7s ease,
                box-shadow 0.7s ease;
        }
        .card::before {
            content: "";
            position: absolute;
            left: 8%;
            right: 8%;
            top: 0;
            height: 42%;
            border-radius: 0 0 50% 50%;
            background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent);
            pointer-events: none;
            opacity: 0.85;
            transition: opacity 0.7s ease;
        }
        .card > * { position: relative; z-index: 1; }
        .card:hover {
            border-color: rgba(186, 230, 253, 0.55);
            box-shadow:
                0 12px 40px rgba(14, 116, 144, 0.32),
                0 0 0 1px rgba(125, 211, 252, 0.2),
                inset 0 1px 0 rgba(255,255,255,0.5);
            transition:
                border-color 0.18s ease,
                box-shadow 0.18s ease;
        }
        .card:hover::before {
            opacity: 1;
            transition: opacity 0.18s ease;
        }
        .btn {
            transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
        }
        .btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
        .btn:active { transform: translateY(0); }
        .status-box {
            background: linear-gradient(160deg, rgba(8,47,73,0.55), rgba(15,23,42,0.65));
            border: 1px solid rgba(125,211,252,0.2) !important;
            border-radius: 0.75rem;
            /* 3 fixed rows (IP / Active / live) — stop height thrash on refresh paints */
            min-height: 6.75rem;
            box-sizing: border-box;
        }
        #status-content {
            min-height: 6.75rem;
        }
        .status-box .status-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
            gap: 0.5rem 0.75rem;
            align-items: baseline;
            font-size: 0.875rem;
        }
        .status-box .status-grid > div {
            min-width: 0;
        }
        .status-box .status-grid .status-val {
            font-weight: 600;
            word-break: break-word;
        }
        /* Fixed weight so hover glow / live paint never flash "slightly bold" on 0/20 */
        .status-box [data-status-live-value] {
            font-weight: 600;
            -webkit-font-smoothing: antialiased;
            text-rendering: geometricPrecision;
        }
        h1 {
            color: #f0f9ff;
            text-shadow: 0 0 28px rgba(125,211,252,0.45), 0 2px 8px rgba(0,0,0,0.25);
            letter-spacing: -0.02em;
        }
        h2 { color: #e0f2fe; text-shadow: 0 1px 8px rgba(14,165,233,0.2); }
        .section { margin-bottom: 1.5rem; }
        .action-btn { min-width: 110px; }
        /* Server Controls: fixed button footprint so online/offline paints don't reflow the card */
        #server-controls {
            min-height: 2.75rem;
        }
        #server-controls [data-controls-root] {
            min-height: 2.75rem;
        }
        #server-controls .r5-ctrl-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            align-items: center;
        }
        #server-controls button[data-ctrl],
        #server-controls .action-btn[data-ctrl] {
            box-sizing: border-box;
            flex: 0 0 7.5rem;
            width: 7.5rem;
            min-width: 7.5rem;
            max-width: 7.5rem;
            justify-content: center;
            text-align: center;
            /* Avoid layout shift from border/opacity-only state changes */
            border: 1px solid transparent;
        }
        .hero-sub {
            color: rgba(186, 230, 253, 0.85);
        }
        body.theme-console .hero-sub { color: rgba(167, 243, 208, 0.9); }
        body.theme-console .side-nav-link:hover {
            background: rgba(74, 222, 128, 0.12);
            border-color: rgba(134, 239, 172, 0.35);
        }
        body.theme-console .side-nav-link.is-active {
            background: linear-gradient(135deg, rgba(34,197,94,0.28), rgba(16,185,129,0.14));
            border-color: rgba(74, 222, 128, 0.45);
            color: #f0fdf4;
        }
        body.theme-console .side-nav-title { color: rgba(167, 243, 208, 0.7); }
        body.theme-console #discord-status-bar {
            background: linear-gradient(180deg, rgba(22, 101, 52, 0.55), rgba(6, 30, 20, 0.88)) !important;
            border-bottom-color: rgba(74, 222, 128, 0.4) !important;
        }

        /* Files theme: warm amber chrome (status bar was default teal/green and clashed) */
        body.theme-files .hero-sub { color: rgba(253, 230, 138, 0.92); }
        body.theme-files .side-nav-title { color: rgba(252, 211, 77, 0.75); }
        body.theme-files .side-nav-link:hover {
            background: rgba(251, 191, 36, 0.12);
            border-color: rgba(252, 211, 77, 0.35);
        }
        body.theme-files .side-nav-link.is-active {
            background: linear-gradient(135deg, rgba(245,158,11,0.3), rgba(180,83,9,0.16));
            border-color: rgba(251, 191, 36, 0.5);
            color: #fffbeb;
        }
        body.theme-files #discord-status-bar {
            background: linear-gradient(180deg, rgba(120, 53, 15, 0.72), rgba(28, 25, 23, 0.9)) !important;
            border-bottom: 1px solid rgba(251, 191, 36, 0.38) !important;
            box-shadow: 0 4px 24px rgba(69, 26, 3, 0.45);
        }
        body.theme-files #discord-status-bar,
        body.theme-files #discord-status-inner {
            color: #fef3c7;
        }
        body.theme-files #discord-status-inner .text-emerald-400 {
            color: #fde68a !important; /* active/online-ish text on warm bar */
        }
        body.theme-files #discord-status-inner [class*="text-sky"],
        body.theme-files #discord-status-inner [class*="text-slate"] {
            color: rgba(254, 243, 199, 0.78) !important;
        }
        /* Settings theme chrome: yellow-top / blue (swapped with About) */
        body.theme-settings .hero-sub { color: rgba(186, 230, 253, 0.92); }
        body.theme-settings .side-nav-title { color: rgba(125, 211, 252, 0.78); }
        body.theme-settings .side-nav-link:hover {
            background: rgba(56, 189, 248, 0.12);
            border-color: rgba(125, 211, 252, 0.4);
        }
        body.theme-settings .side-nav-link.is-active {
            background: linear-gradient(135deg, rgba(14,165,233,0.38), rgba(30,64,175,0.22));
            border-color: rgba(125, 211, 252, 0.5);
            color: #f0f9ff;
        }
        body.theme-advanced .hero-sub { color: rgba(221, 214, 254, 0.92); }
        body.theme-advanced .side-nav-title { color: rgba(196, 181, 253, 0.75); }
        body.theme-advanced .side-nav-link:hover {
            background: rgba(139, 92, 246, 0.14);
            border-color: rgba(167, 139, 250, 0.4);
        }
        body.theme-advanced .side-nav-link.is-active {
            background: linear-gradient(135deg, rgba(124,58,237,0.38), rgba(67,56,202,0.22));
            border-color: rgba(167, 139, 250, 0.5);
            color: #f5f3ff;
        }
        body.theme-advanced .card {
            background: linear-gradient(155deg,
                rgba(255,255,255,0.12) 0%,
                rgba(167,139,250,0.1) 35%,
                rgba(30,27,75,0.58) 100%);
            border-color: rgba(167, 139, 250, 0.3);
        }
        body.theme-advanced #discord-status-bar {
            background: linear-gradient(180deg, rgba(67, 56, 202, 0.72), rgba(15, 12, 35, 0.92)) !important;
            border-bottom: 1px solid rgba(167, 139, 250, 0.4) !important;
            box-shadow: 0 4px 24px rgba(49, 46, 129, 0.5);
        }
        body.theme-advanced #discord-status-bar,
        body.theme-advanced #discord-status-inner {
            color: #ede9fe;
        }
        body.theme-advanced #discord-status-inner .text-emerald-400 {
            color: #c4b5fd !important;
        }
        body.theme-advanced #discord-status-inner [class*="text-sky"],
        body.theme-advanced #discord-status-inner [class*="text-slate"] {
            color: rgba(221, 214, 254, 0.8) !important;
        }
        /* About chrome: copied from Settings yellow-top / blue */
        body.theme-about .hero-sub { color: rgba(186, 230, 253, 0.92); }
        body.theme-about .side-nav-title { color: rgba(125, 211, 252, 0.78); }
        body.theme-about .side-nav-link:hover {
            background: rgba(56, 189, 248, 0.12);
            border-color: rgba(125, 211, 252, 0.4);
        }
        body.theme-about .side-nav-link.is-active {
            background: linear-gradient(135deg, rgba(14,165,233,0.38), rgba(30,64,175,0.22));
            border-color: rgba(125, 211, 252, 0.5);
            color: #f0f9ff;
        }
        body.theme-about #discord-status-bar {
            background: linear-gradient(180deg, rgba(14, 116, 144, 0.72), rgba(12, 40, 70, 0.94)) !important;
            border-bottom: 1px solid rgba(125, 211, 252, 0.4) !important;
            box-shadow: 0 4px 24px rgba(12, 40, 70, 0.5);
        }
        body.theme-about #discord-status-bar,
        body.theme-about #discord-status-inner {
            color: #e0f2fe;
        }
        body.theme-about #discord-status-inner .text-emerald-400 {
            color: #7dd3fc !important;
        }
        body.theme-about #discord-status-inner [class*="text-sky"],
        body.theme-about #discord-status-inner [class*="text-slate"] {
            color: rgba(186, 230, 253, 0.85) !important;
        }
        body.theme-settings #discord-status-bar {
            background: linear-gradient(180deg, rgba(14, 116, 144, 0.72), rgba(12, 40, 70, 0.94)) !important;
            border-bottom: 1px solid rgba(125, 211, 252, 0.4) !important;
            box-shadow: 0 4px 24px rgba(12, 40, 70, 0.5);
        }
        body.theme-settings #discord-status-bar,
        body.theme-settings #discord-status-inner {
            color: #e0f2fe;
        }
        body.theme-settings #discord-status-inner .text-emerald-400 {
            color: #7dd3fc !important;
        }
        body.theme-settings #discord-status-inner [class*="text-sky"],
        body.theme-settings #discord-status-inner [class*="text-slate"] {
            color: rgba(186, 230, 253, 0.85) !important;
        }
        /* Console page panels */
        .console-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            margin-top: 0;
        }
        .console-panel {
            border-radius: 0.4rem 1rem 0.4rem 1rem;
            overflow: hidden;
        }
        .console-panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            margin-bottom: 0.65rem;
        }
        .console-panel-head h2 {
            font-size: 1.05rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.45rem;
            color: #d1fae5;
            margin: 0;
        }
        .console-badge {
            font-size: 0.65rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 0.15rem 0.45rem;
            border-radius: 999px;
            background: rgba(34, 197, 94, 0.18);
            border: 1px solid rgba(74, 222, 128, 0.35);
            color: #bbf7d0;
        }
        .console-pre {
            font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
            font-size: 0.7rem;
            line-height: 1.45;
            color: #f1f5f9;
            background: linear-gradient(160deg, rgba(2, 20, 12, 0.92), rgba(6, 40, 24, 0.88));
            border: 1px solid rgba(34, 197, 94, 0.28);
            border-radius: 0.5rem;
            padding: 0.75rem 0.85rem;
            max-height: 16rem;
            overflow: auto;
            white-space: pre-wrap;
            word-break: break-word;
            box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(134, 239, 172, 0.08);
            scrollbar-gutter: stable;
        }
        .console-pre::-webkit-scrollbar { width: 8px; height: 8px; }
        .console-pre::-webkit-scrollbar-thumb {
            background: rgba(34, 197, 94, 0.35);
            border-radius: 4px;
        }
        /* Players & IPs — interactive join / deny tracker */
        .ip-track {
            font-size: 0.72rem;
            color: #e2e8f0;
            background: linear-gradient(160deg, rgba(2, 20, 12, 0.92), rgba(6, 40, 24, 0.88));
            border: 1px solid rgba(34, 197, 94, 0.28);
            border-radius: 0.5rem;
            padding: 0.55rem 0.55rem 0.45rem;
            max-height: 22rem;
            overflow: auto;
            box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(134, 239, 172, 0.08);
            scrollbar-gutter: stable;
            user-select: text;
        }
        .ip-track-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.4rem;
            margin-bottom: 0.5rem;
            position: sticky;
            top: 0;
            z-index: 2;
            padding: 0.25rem 0.15rem 0.45rem;
            background: linear-gradient(180deg, rgba(2, 20, 12, 0.97), rgba(2, 20, 12, 0.88));
            border-bottom: 1px solid rgba(34, 197, 94, 0.18);
            user-select: none;
            -webkit-user-select: none;
        }
        .ip-track-q {
            flex: 1 1 8rem;
            min-width: 6rem;
            background: rgba(15, 23, 42, 0.55);
            border: 1px solid rgba(74, 222, 128, 0.28);
            border-radius: 0.4rem;
            color: #e2e8f0;
            padding: 0.28rem 0.5rem;
            font-size: 0.72rem;
        }
        .ip-track-q:focus {
            outline: 1px solid rgba(74, 222, 128, 0.55);
            border-color: rgba(74, 222, 128, 0.5);
        }
        .ip-track-filters {
            display: inline-flex;
            flex-wrap: wrap;
            gap: 0.25rem;
        }
        .ip-track-filters button {
            appearance: none;
            -webkit-appearance: none;
            border: 1px solid rgba(74, 222, 128, 0.28);
            background: rgba(15, 23, 42, 0.4);
            color: rgba(187, 247, 208, 0.9);
            border-radius: 999px;
            padding: 0.18rem 0.55rem;
            font-size: 0.65rem;
            font-weight: 650;
            letter-spacing: 0.03em;
            cursor: pointer;
            text-transform: uppercase;
        }
        .ip-track-filters button:hover {
            background: rgba(34, 197, 94, 0.16);
            border-color: rgba(74, 222, 128, 0.5);
        }
        .ip-track-filters button.is-on {
            background: rgba(34, 197, 94, 0.22);
            border-color: rgba(74, 222, 128, 0.55);
            color: #ecfdf5;
        }
        .ip-track-count {
            font-size: 0.62rem;
            color: rgba(167, 243, 208, 0.65);
            margin-left: auto;
        }
        .ip-track-list {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }
        .ip-track-row {
            border: 1px solid rgba(74, 222, 128, 0.16);
            border-radius: 0.45rem;
            background: rgba(15, 23, 42, 0.28);
            padding: 0.4rem 0.5rem 0.45rem;
            cursor: pointer;
            transition: border-color 0.12s ease, background 0.12s ease;
        }
        .ip-track-row:hover {
            border-color: rgba(74, 222, 128, 0.38);
            background: rgba(34, 197, 94, 0.08);
        }
        .ip-track-row.is-open {
            border-color: rgba(74, 222, 128, 0.45);
            background: rgba(6, 40, 24, 0.45);
        }
        .ip-track-row[hidden] { display: none !important; }
        .ip-track-top {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
            gap: 0.35rem 0.55rem;
            align-items: center;
        }
        @media (max-width: 720px) {
            .ip-track-top {
                grid-template-columns: 1fr 1fr;
            }
        }
        .ip-track-name {
            font-weight: 700;
            color: #f0fdf4;
            font-family: ui-monospace, Consolas, monospace;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ip-track-badges {
            display: inline-flex;
            flex-wrap: wrap;
            gap: 0.22rem;
            margin-left: 0.35rem;
            vertical-align: middle;
        }
        .ip-track-badge {
            display: inline-block;
            font-size: 0.58rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 0.08rem 0.35rem;
            border-radius: 999px;
            border: 1px solid transparent;
            line-height: 1.2;
        }
        .ip-track-badge.joined {
            color: #bbf7d0;
            background: rgba(34, 197, 94, 0.16);
            border-color: rgba(74, 222, 128, 0.35);
        }
        .ip-track-badge.denied {
            color: #fecaca;
            background: rgba(239, 68, 68, 0.14);
            border-color: rgba(248, 113, 113, 0.35);
        }
        .ip-track-badge.both {
            color: #fde68a;
            background: rgba(245, 158, 11, 0.14);
            border-color: rgba(251, 191, 36, 0.35);
        }
        .ip-track-badge.wl {
            color: #a5f3fc;
            background: rgba(6, 182, 212, 0.12);
            border-color: rgba(34, 211, 238, 0.3);
        }
        .ip-track-badge.scanner {
            color: #fdba74;
            background: rgba(249, 115, 22, 0.14);
            border-color: rgba(251, 146, 60, 0.4);
        }
        .ip-track-badge.hosting {
            color: #e9d5ff;
            background: rgba(168, 85, 247, 0.12);
            border-color: rgba(192, 132, 252, 0.35);
        }
        .ip-track-badge.local {
            color: #cbd5e1;
            background: rgba(100, 116, 139, 0.18);
            border-color: rgba(148, 163, 184, 0.35);
        }
        .ip-track-ip {
            font-family: ui-monospace, Consolas, monospace;
            color: #86efac;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ip-track-meta {
            color: rgba(167, 243, 208, 0.78);
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ip-track-when {
            color: rgba(148, 163, 184, 0.9);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            font-size: 0.65rem;
            justify-self: end;
        }
        .ip-track-detail {
            display: none;
            margin-top: 0.4rem;
            padding-top: 0.4rem;
            border-top: 1px dashed rgba(74, 222, 128, 0.2);
            color: rgba(226, 232, 240, 0.92);
            line-height: 1.45;
            font-size: 0.68rem;
        }
        .ip-track-row.is-open .ip-track-detail { display: block; }
        .ip-track-detail dl {
            display: grid;
            grid-template-columns: 7.5rem minmax(0, 1fr);
            gap: 0.15rem 0.5rem;
            margin: 0;
        }
        .ip-track-detail dt {
            color: rgba(167, 243, 208, 0.55);
            font-weight: 650;
            text-transform: uppercase;
            font-size: 0.58rem;
            letter-spacing: 0.04em;
            padding-top: 0.12rem;
        }
        .ip-track-detail dd {
            margin: 0;
            font-family: ui-monospace, Consolas, monospace;
            word-break: break-word;
        }
        .ip-track-empty {
            padding: 1rem 0.5rem;
            text-align: center;
            color: rgba(148, 163, 184, 0.85);
        }
        body.theme-console .card {
            background: linear-gradient(155deg,
                rgba(255,255,255,0.1) 0%,
                rgba(134,239,172,0.08) 35%,
                rgba(6,30,20,0.6) 100%);
            border-color: rgba(74, 222, 128, 0.28);
        }
        body.theme-console .card:hover {
            border-color: rgba(134, 239, 172, 0.5);
            box-shadow:
                0 12px 40px rgba(6, 78, 59, 0.35),
                0 0 0 1px rgba(74, 222, 128, 0.2),
                inset 0 1px 0 rgba(255,255,255,0.4);
        }
        /*
         * Top bar glass — 3 equal columns so center status stays viewport-centered
         * no matter how wide left controls (Home, music, …) or right actions get.
         */
        #discord-status-bar {
            /* Explicit fixed chrome — never rely only on Tailwind utility classes */
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: auto !important;
            z-index: 50 !important;
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
            grid-template-rows: auto;
            grid-auto-flow: column;
            align-items: center;
            column-gap: 0.5rem;
            /* Must stay visible so audio panel can hang under the bar (not clipped) */
            overflow: visible;
            /* Bleed into scrollbar-gutter so top-right matches the bar (not a sky strip) */
            width: 100vw !important;
            max-width: none !important;
            box-sizing: border-box;
            background: linear-gradient(180deg, rgba(14, 116, 144, 0.55), rgba(15, 23, 42, 0.82)) !important;
            border-bottom: 1px solid rgba(125, 211, 252, 0.35) !important;
            backdrop-filter: blur(14px) saturate(1.4);
            -webkit-backdrop-filter: blur(14px) saturate(1.4);
            box-shadow: 0 4px 24px rgba(8, 47, 73, 0.4);
        }
        #discord-status-bar .status-bar-left {
            grid-column: 1;
            grid-row: 1;
            justify-self: start;
            display: flex;
            align-items: center;
            gap: 0.35rem;
            min-width: 0;
            overflow: visible;
            z-index: 5;
        }
        #discord-status-inner {
            grid-column: 2;
            grid-row: 1;
            justify-self: center;
            min-width: 0;
            max-width: min(56vw, 28rem);
            text-align: center;
            z-index: 1;
            /* Clip center status only — never the left audio dropdown */
            position: relative;
            overflow: hidden;
            max-height: 2.5rem;
            white-space: nowrap;
        }
        #discord-status-inner .r5-status-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }
        /* Only the real column-3 shell may show Restart Bot */
        #discord-status-bar > #discord-status-actions {
            grid-column: 3;
            grid-row: 1;
            justify-self: end;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.35rem;
            min-width: 0;
            z-index: 2;
        }
        /* Admin-only panel build stamp (next to Restart Bot) */
        #discord-status-actions .r5-ctrl-build-badge {
            font-size: 0.62rem;
            font-weight: 650;
            letter-spacing: 0.02em;
            line-height: 1.1;
            padding: 0.15rem 0.4rem;
            border-radius: 999px;
            border: 1px solid rgba(125, 211, 252, 0.35);
            background: rgba(15, 23, 42, 0.55);
            color: rgba(186, 230, 253, 0.92);
            white-space: nowrap;
            max-width: 12rem;
            overflow: hidden;
            text-overflow: ellipsis;
            user-select: all;
            cursor: help;
            flex-shrink: 1;
        }
        #discord-status-actions:empty {
            min-height: 1px;
            /* preserve grid cell when empty — no second row */
            display: block;
        }
        /* Never render a second actions host (was stacking Restart Bot + growing the bar) */
        #discord-status-inner #discord-status-actions,
        #discord-status-bar #discord-status-actions ~ #discord-status-actions,
        #discord-status-inner [data-r5-status-actions],
        #discord-status-bar > [data-r5-status-actions],
        #discord-status-inner button[hx-post*="restart-bot"],
        #discord-status-inner .flex.items-center:has(button[hx-post*="restart-bot"]) {
            display: none !important;
            position: absolute !important;
            width: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
            pointer-events: none !important;
            visibility: hidden !important;
        }
        /* Status text select shouldn't drag the bar layout */
        #discord-status-inner .r5-status-text,
        #r5-lifecycle-status-text {
            user-select: text;
            -webkit-user-select: text;
        }
        /* Stable status colors — never inherit bar white mid-swap / mid-paint */
        #discord-status-inner .r5-status-text,
        #r5-lifecycle-status-text,
        #discord-status-inner [data-lifecycle-status] {
            color: #cbd5e1; /* slate-300 default — not pure white */
        }
        #r5-lifecycle-status-text.text-emerald-400,
        #discord-status-inner [data-lifecycle-status].text-emerald-400,
        #r5-lifecycle-status-text[data-status-tone="online"],
        #discord-status-inner [data-lifecycle-status][data-status-tone="online"],
        #discord-status-inner .r5-status-text[data-status-tone="online"] [data-lifecycle-status],
        #discord-status-inner .r5-status-text[data-status-tone="online"] {
            color: #34d399 !important; /* emerald-400 */
        }
        #r5-lifecycle-status-text.text-amber-400,
        #discord-status-inner [data-lifecycle-status].text-amber-400,
        #r5-lifecycle-status-text[data-status-tone="busy"],
        #discord-status-inner [data-lifecycle-status][data-status-tone="busy"],
        #discord-status-inner .r5-status-text[data-status-tone="busy"] [data-lifecycle-status],
        #discord-status-inner .r5-status-text[data-status-tone="busy"] {
            color: #fbbf24 !important;
        }
        #r5-lifecycle-status-text.text-slate-300,
        #discord-status-inner [data-lifecycle-status].text-slate-300,
        #r5-lifecycle-status-text[data-status-tone="offline"],
        #discord-status-inner [data-lifecycle-status][data-status-tone="offline"],
        #discord-status-inner .r5-status-text[data-status-tone="offline"] [data-lifecycle-status],
        #discord-status-inner .r5-status-text[data-status-tone="offline"] {
            color: #cbd5e1 !important;
        }
        /* Files theme: warm online gold, but still never white mid-transition */
        body.theme-files #discord-status-inner [data-lifecycle-status][data-status-tone="online"],
        body.theme-files #discord-status-inner .r5-status-text[data-status-tone="online"] [data-lifecycle-status],
        body.theme-files #discord-status-inner .r5-status-text[data-status-tone="online"],
        body.theme-files #discord-status-inner [data-lifecycle-status].text-emerald-400 {
            color: #fde68a !important;
        }
        #capstar-home-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
            text-decoration: none;
            color: rgba(224, 242, 254, 0.95);
            font-size: 0.72rem;
            font-weight: 650;
            letter-spacing: 0.02em;
            line-height: 1;
            padding: 0.28rem 0.5rem;
            border-radius: 0.5rem;
            border: 1px solid rgba(125, 211, 252, 0.35);
            background: rgba(15, 23, 42, 0.35);
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
            white-space: nowrap;
            touch-action: manipulation;
            user-select: none;
        }
        #capstar-home-btn:hover {
            background: rgba(56, 189, 248, 0.18);
            border-color: rgba(125, 211, 252, 0.55);
            color: #f0f9ff;
        }
        #capstar-home-btn .capstar-home-ico {
            font-size: 0.95rem;
            line-height: 1;
        }
        #capstar-home-btn .capstar-home-label {
            font-size: 0.7rem;
        }
        @media (max-width: 560px) {
            #capstar-home-btn .capstar-home-label { display: none; }
            #capstar-home-btn { padding: 0.28rem 0.4rem; }
            #discord-status-inner { max-width: min(48vw, 14rem); }
            #discord-status-actions button {
                white-space: nowrap;
                padding: 0.28rem 0.45rem !important;
                font-size: 0.68rem !important;
            }
        }
        /* Audio menu (music vol + SFX) — hangs under top-left corner of status bar */
        .r5-audio-menu {
            /* static so absolute panel positions against #discord-status-bar */
            position: static;
            display: inline-flex;
            align-items: center;
            z-index: 6;
        }
        #music-btn {
            cursor: pointer;
            font-size: 1.125rem;
            line-height: 1;
            padding: 0.22rem 0.35rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            user-select: none;
            touch-action: manipulation;
            border: 1px solid transparent;
            border-radius: 0.45rem;
            background: transparent;
            color: inherit;
            appearance: none;
            -webkit-appearance: none;
            position: relative;
            z-index: 6;
        }
        #music-btn:hover,
        #music-btn[aria-expanded="true"] {
            background: rgba(56, 189, 248, 0.14);
            border-color: rgba(125, 211, 252, 0.4);
        }
        #music-btn:focus-visible {
            outline: 2px solid rgba(125, 211, 252, 0.65);
            outline-offset: 1px;
        }
        .r5-audio-panel {
            /* Anchor to status bar bottom-left (corner under the bar) */
            position: absolute;
            top: 100%;
            left: max(0.5rem, env(safe-area-inset-left, 0px));
            margin-top: 0.35rem;
            min-width: 14.25rem;
            width: 14.25rem;
            max-width: min(20rem, calc(100vw - 1rem));
            padding: 0.65rem 0.8rem 0.7rem;
            border-radius: 0 0 0.75rem 0.75rem;
            border: 1px solid rgba(125, 211, 252, 0.4);
            border-top: 1px solid rgba(125, 211, 252, 0.22);
            background: linear-gradient(165deg,
                rgba(14, 116, 144, 0.78) 0%,
                rgba(15, 23, 42, 0.94) 100%);
            backdrop-filter: blur(16px) saturate(1.35);
            -webkit-backdrop-filter: blur(16px) saturate(1.35);
            box-shadow:
                0 14px 32px rgba(8, 47, 73, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.16);
            z-index: 80;
            /* Cover content under the bar from the left corner */
            transform-origin: top left;
            /* Labels / buttons — not selectable (slider still works) */
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
        .r5-audio-panel,
        .r5-audio-panel * {
            user-select: none !important;
            -webkit-user-select: none !important;
        }
        .r5-audio-panel[hidden] { display: none !important; }
        .r5-audio-row {
            display: flex;
            flex-direction: column;
            gap: 0.28rem;
        }
        .r5-audio-label {
            font-size: 0.65rem;
            font-weight: 650;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: rgba(186, 230, 253, 0.85);
            line-height: 1;
        }
        .r5-audio-vol-row {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        #music-mute-btn {
            flex-shrink: 0;
            width: 1.55rem;
            height: 1.55rem;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.4rem;
            border: 1px solid rgba(125, 211, 252, 0.32);
            background: rgba(15, 23, 42, 0.4);
            color: rgba(224, 242, 254, 0.95);
            font-size: 0.78rem;
            line-height: 1;
            cursor: pointer;
            touch-action: manipulation;
            user-select: none;
            appearance: none;
            -webkit-appearance: none;
            transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
        }
        #music-mute-btn:hover {
            background: rgba(56, 189, 248, 0.18);
            border-color: rgba(125, 211, 252, 0.55);
        }
        #music-mute-btn:focus-visible {
            outline: 2px solid rgba(125, 211, 252, 0.65);
            outline-offset: 1px;
        }
        #music-mute-btn.is-muted {
            opacity: 0.78;
            border-color: rgba(148, 163, 184, 0.4);
        }
        #music-vol {
            flex: 1;
            min-width: 0;
            height: 0.35rem;
            margin: 0;
            accent-color: #38bdf8;
            cursor: pointer;
            transition: opacity 0.15s ease, filter 0.15s ease;
        }
        /* Mute keeps slider position — only greys out (does not snap to 0) */
        .r5-audio-vol-row.is-music-muted #music-vol {
            opacity: 0.42;
            filter: grayscale(0.85);
            accent-color: #94a3b8;
            cursor: default;
        }
        .r5-audio-vol-pct {
            font-size: 0.65rem;
            font-variant-numeric: tabular-nums;
            color: rgba(224, 242, 254, 0.8);
            min-width: 2.1rem;
            text-align: right;
            transition: opacity 0.15s ease, color 0.15s ease;
        }
        .r5-audio-vol-row.is-music-muted .r5-audio-vol-pct {
            opacity: 0.45;
            color: rgba(148, 163, 184, 0.9);
        }
        #sfx-toggle-btn {
            margin-top: 0.5rem;
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            padding: 0.35rem 0.5rem;
            border-radius: 0.45rem;
            border: 1px solid rgba(125, 211, 252, 0.35);
            background: rgba(15, 23, 42, 0.4);
            color: rgba(224, 242, 254, 0.95);
            font-size: 0.72rem;
            font-weight: 650;
            letter-spacing: 0.02em;
            cursor: pointer;
            touch-action: manipulation;
            user-select: none;
            transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
        }
        #sfx-toggle-btn:hover {
            background: rgba(56, 189, 248, 0.18);
            border-color: rgba(125, 211, 252, 0.55);
        }
        #sfx-toggle-btn.is-off {
            opacity: 0.72;
            border-color: rgba(148, 163, 184, 0.35);
            color: rgba(203, 213, 225, 0.9);
        }
        #sfx-toggle-btn .r5-sfx-dot {
            width: 0.45rem;
            height: 0.45rem;
            border-radius: 999px;
            background: #4ade80;
            box-shadow: 0 0 6px rgba(74, 222, 128, 0.65);
            flex-shrink: 0;
        }
        #sfx-toggle-btn.is-off .r5-sfx-dot {
            background: #94a3b8;
            box-shadow: none;
        }

        /* Lists locked: dim only — no wait/stop-sign cursor (felt broken / stuck) */
        #servers-list[style*="pointer-events: none"],
        #worlds-content[style*="pointer-events: none"] {
            cursor: default;
        }
        /*
         * Panel chrome dim — driven by data-panel-mode from applyPanelChrome
         * (mirrors switch_ui_gates.resolve_panel_chrome). ONE card-level dim token.
         * Never nest list opacity under cards. world_offline / idle = no bubble dim.
         * lifecycle / world_online / pack_online = dim; quiet cannot brighten those.
         */
        body {
            --r5-ops-dim: 0.85;
        }
        body.r5-ops-locked {
            --r5-ops-dim: 0.85;
        }
        /* Modes that dim bubbles (sole CSS contract) */
        body[data-panel-mode="lifecycle"] [data-lock-section],
        body[data-panel-mode="world_online"] [data-lock-section],
        body[data-panel-mode="pack_online"] [data-lock-section],
        body.r5-ops-locked [data-lock-section] {
            opacity: var(--r5-ops-dim) !important;
            cursor: default !important;
            transition: none !important;
        }
        /* Offline hop + idle: force bright even if stale r5-ops-locked left over */
        body[data-panel-mode="world_offline"] [data-lock-section],
        body[data-panel-mode="world_offline"] .unlinked-dim-card,
        body[data-panel-mode="idle"] [data-lock-section] {
            opacity: 1 !important;
            filter: none !important;
        }
        /* Lifecycle must beat r5-world-quiet brighten */
        body[data-panel-mode="lifecycle"].r5-world-quiet [data-lock-section],
        body[data-panel-mode="lifecycle"].r5-world-quiet .unlinked-dim-card,
        body[data-panel-mode="world_online"].r5-world-quiet [data-lock-section],
        body[data-panel-mode="pack_online"].r5-world-quiet [data-lock-section] {
            opacity: var(--r5-ops-dim, 0.85) !important;
            cursor: default !important;
            transition: none !important;
            filter: none !important;
        }
        body[data-panel-mode="lifecycle"] #server-controls button,
        body[data-panel-mode="lifecycle"] #server-controls button:disabled,
        body[data-panel-mode="lifecycle"] #server-controls button[data-ctrl]:disabled {
            opacity: 0.5 !important;
            cursor: not-allowed !important;
            filter: none !important;
            transition: none !important;
        }
        /* World hop: no fade on rows */
        body[data-world-switch-lock="1"] [data-lock-section],
        body[data-world-switch-lock="1"] #worlds-content .entity-row {
            transition: none !important;
        }
        body[data-world-switch-lock="1"] #worlds-content .row-idle:hover {
            background: transparent !important;
        }
        /* Freeze interactions — no second opacity layer on lists */
        body.r5-ops-locked #servers-list,
        body.r5-ops-locked #worlds-content,
        body.r5-ops-locked #backups-content,
        body.r5-ops-locked #whitelist-content,
        body.r5-ops-locked #world-create-form,
        body.r5-ops-locked #world-create-form input,
        body.r5-ops-locked #world-create-form button,
        body.r5-ops-locked #manual-backup-btn,
        body.r5-ops-locked #servers-list .entity-row,
        body.r5-ops-locked #worlds-content .entity-row,
        body.r5-ops-locked #servers-list .row-cog,
        body.r5-ops-locked #worlds-content .row-cog,
        body.r5-ops-locked #worlds-content .row-del,
        body.r5-ops-locked #backups-content .row-del,
        body.r5-ops-locked #backups-content .row-up {
            pointer-events: none !important;
            cursor: default !important;
        }
        body.r5-ops-locked #server-controls {
            cursor: default;
        }
        /*
         * Sole deactivated look: same brand hue, reduced opacity only.
         * Never a second muted palette (no *-800 / text-*-400 swaps).
         */
        #server-controls button[data-ctrl]:disabled,
        #server-controls button.action-btn:disabled {
            opacity: 0.5 !important;
            cursor: not-allowed !important;
            filter: none !important;
            transition: none !important;
        }
        #server-controls button[data-ctrl]:not(:disabled),
        #server-controls button.action-btn:not(:disabled) {
            opacity: 1;
            filter: none;
        }
        /*
         * Lockdown: card may dim; buttons still use the same 600 hues.
         * Disabled stay 0.5 opacity (not forced bright on a dim card).
         */
        body.r5-ops-locked #server-controls button:not(:disabled),
        #server-controls button.r5-ctrl-locked:not(:disabled) {
            cursor: default !important;
            opacity: 1 !important;
            filter: none !important;
            transition: none !important;
        }
        body.r5-ops-locked #server-controls button:disabled,
        body.r5-ops-locked #server-controls button[data-ctrl]:disabled,
        #server-controls button.r5-ctrl-locked:disabled {
            cursor: not-allowed !important;
            opacity: 0.5 !important;
            filter: none !important;
            transition: none !important;
        }
        /*
         * World-switch quiet mode — NEVER lower section/list opacity for world switch.
         * Lists stay bright + clickable. Start/Stop/Restart buttons still use
         * .r5-ctrl-locked for instant visual disable (must NOT be overridden here).
         */
        body.r5-world-quiet.r5-ops-locked #servers-list,
        body.r5-world-quiet.r5-ops-locked #worlds-content,
        body.r5-world-quiet.r5-ops-locked #backups-content,
        body.r5-world-quiet.r5-ops-locked #whitelist-content,
        body.r5-world-quiet.r5-ops-locked [data-lock-section="backups"],
        body.r5-world-quiet.r5-ops-locked [data-lock-section="worlds"],
        body.r5-world-quiet.r5-ops-locked [data-lock-section="controls"],
        body.r5-world-quiet.r5-ops-locked [data-lock-section="whitelist"],
        body.r5-world-quiet.r5-ops-locked #world-create-form,
        body.r5-world-quiet.r5-ops-locked #server-controls,
        body.r5-world-quiet.r5-ops-locked #manual-backup-btn,
        body.r5-world-quiet.r5-ops-locked #world-create-form input,
        body.r5-world-quiet.r5-ops-locked #world-create-form button,
        body.r5-world-quiet #servers-list,
        body.r5-world-quiet #worlds-content,
        body.r5-world-quiet [data-lock-section="backups"],
        body.r5-world-quiet [data-lock-section="worlds"],
        body.r5-world-quiet [data-lock-section="controls"],
        body.r5-world-quiet [data-lock-section="whitelist"],
        body.r5-world-quiet #world-create-form,
        body.r5-world-quiet #server-controls,
        body.r5-world-quiet #backups-content,
        body.r5-world-quiet #whitelist-content,
        body.r5-world-quiet .unlinked-dim-card {
            pointer-events: auto !important;
            opacity: 1 !important;
            cursor: inherit !important;
            filter: none !important;
        }
        /*
         * Online pack hop freeze MUST beat r5-world-quiet.
         * Worlds kick / keepOfflineWorldSwitchInteractive used to re-add quiet mid hop,
         * which forced opacity:1 and delayed dim until ops poll re-locked (seconds later).
         */
        body[data-pack-switch-lock="1"],
        body[data-world-switch-lock="1"] {
            --r5-ops-dim: 0.85; /* same single dim as lifecycle lockdown */
        }
        /* Pack hop: dim cards only (not nested lists) — same reason as lifecycle */
        body[data-pack-switch-lock="1"] [data-lock-section],
        body.r5-world-quiet[data-pack-switch-lock="1"] [data-lock-section] {
            opacity: var(--r5-ops-dim, 0.85) !important;
            cursor: default !important;
            transition: none !important;
        }
        body[data-pack-switch-lock="1"] #servers-list,
        body[data-pack-switch-lock="1"] #worlds-content,
        body[data-pack-switch-lock="1"] #backups-content,
        body[data-pack-switch-lock="1"] #whitelist-content,
        body[data-pack-switch-lock="1"] #world-create-form,
        body[data-pack-switch-lock="1"] #world-create-form input,
        body[data-pack-switch-lock="1"] #world-create-form button,
        body[data-pack-switch-lock="1"] #manual-backup-btn,
        body[data-pack-switch-lock="1"] #servers-list .entity-row,
        body[data-pack-switch-lock="1"] #worlds-content .entity-row,
        body.r5-world-quiet[data-pack-switch-lock="1"] #servers-list,
        body.r5-world-quiet[data-pack-switch-lock="1"] #worlds-content,
        body.r5-world-quiet[data-pack-switch-lock="1"] #backups-content,
        body.r5-world-quiet[data-pack-switch-lock="1"] #whitelist-content,
        body.r5-world-quiet[data-pack-switch-lock="1"] #world-create-form,
        body.r5-world-quiet[data-pack-switch-lock="1"] #manual-backup-btn,
        body.r5-world-quiet[data-pack-switch-lock="1"] #servers-list .entity-row,
        body.r5-world-quiet[data-pack-switch-lock="1"] #worlds-content .entity-row {
            pointer-events: none !important;
            cursor: default !important;
        }
        /* Pack/world hop buttons: inherit card dim (no second opacity layer) */
        body[data-pack-switch-lock="1"] #server-controls button,
        body.r5-world-quiet[data-pack-switch-lock="1"] #server-controls button,
        body[data-world-switch-lock="1"] #server-controls button,
        body.r5-world-quiet[data-world-switch-lock="1"] #server-controls button {
            cursor: default !important;
            opacity: 1 !important;
            filter: none !important;
            transition: none !important;
        }
        /* Online world hop: dim cards only (beats r5-world-quiet brighten) */
        body[data-world-switch-lock="1"] [data-lock-section],
        body.r5-world-quiet[data-world-switch-lock="1"] [data-lock-section] {
            opacity: var(--r5-ops-dim, 0.85) !important;
            cursor: default !important;
            transition: none !important;
        }
        body[data-world-switch-lock="1"] #servers-list,
        body[data-world-switch-lock="1"] #worlds-content,
        body[data-world-switch-lock="1"] #backups-content,
        body[data-world-switch-lock="1"] #whitelist-content,
        body[data-world-switch-lock="1"] #world-create-form,
        body[data-world-switch-lock="1"] #world-create-form input,
        body[data-world-switch-lock="1"] #world-create-form button,
        body[data-world-switch-lock="1"] #manual-backup-btn,
        body[data-world-switch-lock="1"] #servers-list .entity-row,
        body[data-world-switch-lock="1"] #worlds-content .entity-row,
        body.r5-world-quiet[data-world-switch-lock="1"] #servers-list,
        body.r5-world-quiet[data-world-switch-lock="1"] #worlds-content,
        body.r5-world-quiet[data-world-switch-lock="1"] #backups-content,
        body.r5-world-quiet[data-world-switch-lock="1"] #whitelist-content,
        body.r5-world-quiet[data-world-switch-lock="1"] #world-create-form,
        body.r5-world-quiet[data-world-switch-lock="1"] #manual-backup-btn,
        body.r5-world-quiet[data-world-switch-lock="1"] #servers-list .entity-row,
        body.r5-world-quiet[data-world-switch-lock="1"] #worlds-content .entity-row {
            pointer-events: none !important;
            cursor: default !important;
        }
        /*
         * Gesture window: pointerdown arms dim but MUST keep world *rows* clickable
         * until HTMX can fire the switch POST. Freezing on pointerdown cancelled click.
         * Do NOT enable pointer-events on * (that re-expanded cogs mid-hover and made
         * Switching… / actions spasm for ~0.2s).
         */
        body.r5-ops-locked[data-world-switch-gesture="1"] #worlds-content,
        body.r5-ops-locked[data-world-switch-gesture="1"] #worlds-content .entity-row,
        body[data-world-switch-lock="1"][data-world-switch-gesture="1"] #worlds-content,
        body[data-world-switch-lock="1"][data-world-switch-gesture="1"] #worlds-content .entity-row {
            pointer-events: auto !important;
            cursor: pointer !important;
        }
        /* Instantly collapse hover actions on online world hop (no width transition thrash) */
        body[data-world-switch-lock="1"] #worlds-content .row-cog,
        body[data-world-switch-lock="1"] #worlds-content .row-del,
        body[data-world-switch-gesture="1"] #worlds-content .row-cog,
        body[data-world-switch-gesture="1"] #worlds-content .row-del,
        body.r5-ops-locked[data-world-switch-gesture="1"] #worlds-content .row-cog,
        body.r5-ops-locked[data-world-switch-gesture="1"] #worlds-content .row-del,
        body[data-world-switch-lock="1"] #worlds-content .entity-row:hover .row-cog,
        body[data-world-switch-lock="1"] #worlds-content .entity-row:hover .row-del,
        body[data-world-switch-lock="1"] #worlds-content .entity-row:focus-within .row-cog,
        body[data-world-switch-lock="1"] #worlds-content .entity-row:focus-within .row-del,
        body[data-world-switch-gesture="1"] #worlds-content .entity-row:hover .row-cog,
        body[data-world-switch-gesture="1"] #worlds-content .entity-row:hover .row-del {
            transition: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            width: 0 !important;
            min-width: 0 !important;
            max-width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            background: transparent !important;
        }
        /* No badge size lock — ACTIVE stays content-sized like before */
        /*
         * AFTER quiet overrides: ONLINE world-switch hold greys Start/Stop/Restart.
         * MUST require online hop markers (data-world-switch-lock / panel-mode world_online).
         * A bare body.r5-world-ctrl-locked left over after offline spam/ops settle race
         * must NOT dim Start — that was the intermittent offline spam flicker.
         */
        /* Online world hold: same as :disabled — opacity only, no grey filter / second hue */
        body.r5-world-ctrl-locked[data-world-switch-lock="1"] #server-controls button,
        body.r5-world-ctrl-locked[data-world-switch-lock="1"] #server-controls .btn,
        body.r5-world-ctrl-locked[data-panel-mode="world_online"] #server-controls button,
        body.r5-world-ctrl-locked[data-panel-mode="world_online"] #server-controls .btn,
        body.r5-world-ctrl-locked[data-world-switch-lock="1"].r5-ops-locked #server-controls button,
        body.r5-world-ctrl-locked[data-world-switch-lock="1"].r5-ops-locked #server-controls button:disabled,
        body.r5-world-ctrl-locked[data-panel-mode="world_online"].r5-ops-locked #server-controls button:disabled,
        body.r5-world-ctrl-locked[data-world-switch-lock="1"].r5-ops-locked #server-controls button[data-ctrl]:disabled {
            pointer-events: none !important;
            cursor: not-allowed !important;
            opacity: 0.5 !important;
            filter: none !important;
        }
        /* Offline hop / idle: neutralize any stale world-ctrl class on buttons */
        body[data-panel-mode="world_offline"].r5-world-ctrl-locked #server-controls button,
        body[data-panel-mode="world_offline"].r5-world-ctrl-locked #server-controls .btn,
        body[data-panel-mode="idle"].r5-world-ctrl-locked:not([data-world-switch-lock="1"]) #server-controls button:not(:disabled),
        body.r5-world-quiet.r5-world-ctrl-locked:not([data-world-switch-lock="1"]):not([data-panel-mode="world_online"]) #server-controls button:not(:disabled) {
            pointer-events: auto !important;
            cursor: pointer !important;
            opacity: 1 !important;
            filter: none !important;
        }
        body[data-panel-mode="world_offline"].r5-world-ctrl-locked #server-controls button:disabled,
        body[data-panel-mode="idle"].r5-world-ctrl-locked:not([data-world-switch-lock="1"]) #server-controls button:disabled {
            pointer-events: none !important;
            cursor: not-allowed !important;
            opacity: 0.5 !important;
            filter: none !important;
        }
        /*
         * HARD offline world-hop freeze (data-offline-world-hop).
         * Card stays bright; Start stays full-bright; Stop/Restart keep normal
         * disabled dim (opacity 0.5) — do NOT force all buttons to opacity 1.
         */
        body[data-offline-world-hop="1"] [data-lock-section="controls"],
        body[data-offline-world-hop="1"].r5-ops-locked [data-lock-section="controls"],
        body[data-offline-world-hop="1"][data-panel-mode="lifecycle"] [data-lock-section="controls"],
        body[data-offline-world-hop="1"][data-panel-mode="world_online"] [data-lock-section="controls"],
        body[data-offline-world-hop="1"] #server-controls,
        body[data-offline-world-hop="1"].r5-ops-locked #server-controls,
        body[data-offline-world-hop="1"].r5-world-quiet #server-controls {
            opacity: 1 !important;
            filter: none !important;
            pointer-events: auto !important;
        }
        /* Start only — never grey during offline spam (even if briefly disabled) */
        body[data-offline-world-hop="1"] #server-controls button[data-ctrl="start"],
        body[data-offline-world-hop="1"] #server-controls button[data-ctrl="start"]:disabled,
        body[data-offline-world-hop="1"].r5-world-ctrl-locked #server-controls button[data-ctrl="start"],
        body[data-offline-world-hop="1"].r5-world-ctrl-locked #server-controls button[data-ctrl="start"]:disabled,
        body[data-offline-world-hop="1"].r5-ops-locked #server-controls button[data-ctrl="start"],
        body[data-offline-world-hop="1"].r5-ops-locked #server-controls button[data-ctrl="start"]:disabled,
        body[data-offline-world-hop="1"][data-panel-mode="lifecycle"] #server-controls button[data-ctrl="start"],
        body[data-offline-world-hop="1"][data-panel-mode="lifecycle"] #server-controls button[data-ctrl="start"]:disabled,
        body[data-offline-world-hop="1"][data-world-switch-lock="1"] #server-controls button[data-ctrl="start"],
        body[data-offline-world-hop="1"][data-panel-mode="world_online"] #server-controls button[data-ctrl="start"] {
            pointer-events: auto !important;
            cursor: pointer !important;
            opacity: 1 !important;
            filter: none !important;
            transition: none !important;
        }
        /* Stop/Restart: same brand, opacity-only deactivated */
        body[data-offline-world-hop="1"] #server-controls button[data-ctrl="stop"],
        body[data-offline-world-hop="1"] #server-controls button[data-ctrl="restart"],
        body[data-offline-world-hop="1"] #server-controls button[data-ctrl="stop"]:disabled,
        body[data-offline-world-hop="1"] #server-controls button[data-ctrl="restart"]:disabled,
        body[data-offline-world-hop="1"].r5-world-ctrl-locked #server-controls button[data-ctrl="stop"],
        body[data-offline-world-hop="1"].r5-world-ctrl-locked #server-controls button[data-ctrl="restart"],
        body[data-offline-world-hop="1"].r5-ops-locked #server-controls button[data-ctrl="stop"],
        body[data-offline-world-hop="1"].r5-ops-locked #server-controls button[data-ctrl="restart"],
        body[data-offline-world-hop="1"][data-panel-mode="lifecycle"] #server-controls button[data-ctrl="stop"],
        body[data-offline-world-hop="1"][data-panel-mode="lifecycle"] #server-controls button[data-ctrl="restart"] {
            pointer-events: none !important;
            cursor: not-allowed !important;
            opacity: 0.5 !important;
            filter: none !important;
            transition: none !important;
        }
        /*
         * Arming: one quiet, slow light pass — no Vista lid, no breathe, no glow.
         * Still disabled until hold ends. Online hop only.
         */
        @keyframes r5-ctrl-sheen {
            0%   { transform: translateX(-30%) rotate(16deg); }
            100% { transform: translateX(310%) rotate(16deg); }
        }
        body.r5-world-ctrl-locked[data-world-switch-lock="1"] #server-controls button.r5-ctrl-arming,
        body.r5-world-ctrl-locked[data-panel-mode="world_online"] #server-controls button.r5-ctrl-arming,
        #server-controls button.r5-ctrl-arming:disabled {
            position: relative !important;
            overflow: hidden !important;
            pointer-events: none !important;
            cursor: not-allowed !important;
            /* Same as standard disabled — opacity only, no hue/filter shift */
            opacity: 0.5 !important;
            filter: none !important;
            box-shadow: none !important;
            animation: none !important;
            isolation: isolate;
        }
        body.r5-world-ctrl-locked[data-world-switch-lock="1"] #server-controls button.r5-ctrl-arming::before,
        body.r5-world-ctrl-locked[data-panel-mode="world_online"] #server-controls button.r5-ctrl-arming::before,
        #server-controls button.r5-ctrl-arming:disabled::before {
            content: none !important;
            display: none !important;
        }
        body.r5-world-ctrl-locked[data-world-switch-lock="1"] #server-controls button.r5-ctrl-arming::after,
        body.r5-world-ctrl-locked[data-panel-mode="world_online"] #server-controls button.r5-ctrl-arming::after,
        #server-controls button.r5-ctrl-arming:disabled::after {
            content: "";
            position: absolute;
            top: -40%;
            left: -20%;
            width: 42%;
            height: 180%;
            pointer-events: none;
            z-index: 1;
            /* Very soft, wide band — low contrast so it doesn’t read as a barcode */
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.03) 35%,
                rgba(255, 255, 255, 0.11) 50%,
                rgba(255, 255, 255, 0.03) 65%,
                transparent 100%
            );
            filter: blur(1.2px);
            opacity: 0.9;
            /* Slow + ease so the pass feels unhurried */
            animation: r5-ctrl-sheen 4.2s ease-in-out infinite;
            will-change: transform;
        }
        /* Lifecycle busy: block clicks; opacity owned by r5-ops-locked rule above */
        body.r5-ops-locked #server-controls button:disabled {
            pointer-events: none !important;
            cursor: not-allowed !important;
        }
        /* Idle disabled: still block clicks (opacity from standard :disabled rule) */
        #server-controls button[data-ctrl]:disabled {
            pointer-events: none;
        }
        /* Arming sheen under lockdown: same 0.5 opacity as other disabled buttons */
        body.r5-ops-locked #server-controls button.r5-ctrl-arming:disabled {
            opacity: 0.5 !important;
            filter: none !important;
        }

        /* Staff-only UI: always hidden unless body.r5-is-operator (Admin / Bot Bender).
           Beats Tailwind .flex and any stray JS display restores for unlinked/linked members. */
        body:not(.r5-is-operator) .operator-only {
            display: none !important;
        }
        /* Admin-only UI (e.g. RCON) — not Bot Bender */
        body:not(.r5-is-admin) .admin-only {
            display: none !important;
        }
        /* Reserve space for link banner so Administrator / lock form does not shove the page */
        #link-notice.link-notice-slot,
        #link-notice {
            min-height: 2.85rem;
        }
        #link-notice .link-user-card {
            min-height: 2.35rem;
        }
        /* Pack list: fixed row height so late HTMX fill cannot shove cards below */
        #servers-list {
            min-height: 0;
        }
        #servers-list .entity-row {
            min-height: 2.15rem;
            box-sizing: border-box;
        }
        /* "Click server to switch:" — reserve line height so showing/hiding cannot jitter card */
        #servers-switch-hint.servers-switch-hint {
            min-height: 1rem;
        }
        /* Staff: never let JS leave an inline display:none on the hint after SSR boot */
        body.r5-is-operator #servers-switch-hint.operator-only {
            display: block !important;
        }
        /* Keep Admin nav slot stable when it is only temporarily hidden for non-admins */
        .side-nav-link.nav-admin-only[hidden] {
            display: none !important;
        }
        /*
         * Default-hide staff input forms by id (unlinked / non-staff / FOUC-safe).
         * Only body.r5-is-operator / body.r5-is-admin may reveal them.
         */
        #world-create-form,
        form[hx-post="/action/whitelist/add"],
        #mc-cmd-form {
            display: none !important;
        }
        body.r5-is-operator #world-create-form {
            display: flex !important;
        }
        body.r5-is-operator form[hx-post="/action/whitelist/add"] {
            display: flex !important;
        }
        /* Result strips stay class-gated; never show for non-staff */
        body:not(.r5-is-operator) #worlds-result,
        body:not(.r5-is-operator) #whitelist-result,
        body:not(.r5-is-admin) #mc-cmd-result {
            display: none !important;
        }
        /* Unlinked: never show staff inputs (beats body.r5-is-admin #mc-cmd-form.mc-cmd-row too) */
        body.r5-unlinked #world-create-form,
        body.r5-unlinked #worlds-result,
        body.r5-unlinked form[hx-post="/action/whitelist/add"],
        body.r5-unlinked #whitelist-result,
        body.r5-unlinked #mc-cmd-form,
        body.r5-unlinked #mc-cmd-form.mc-cmd-row,
        body.r5-unlinked #mc-cmd-result,
        body.r5-unlinked #files-staff-tools,
        body.r5-unlinked #console-staff-tools {
            display: none !important;
        }
        /* Unlinked: keep cards readable — old opacity 0.5 made !weblink nearly invisible */
        body.r5-unlinked .unlinked-dim-card {
            opacity: 1 !important;
            pointer-events: none !important;
            box-shadow: none;
        }
        body.r5-unlinked .unlinked-dim-card .section-head {
            opacity: 0.88;
        }
        /* Compact link hint (not double-dimmed ghost text) */
        .dash-unlinked-hint {
            display: flex;
            align-items: flex-start;
            gap: 0.45rem;
            margin: 0.15rem 0 0.1rem;
            padding: 0.55rem 0.7rem;
            border-radius: 0.65rem;
            border: 1px solid rgba(56, 189, 248, 0.28);
            background: rgba(14, 165, 233, 0.1);
            color: #e0f2fe;
            font-size: 0.8rem;
            line-height: 1.4;
            pointer-events: auto !important;
        }
        .dash-unlinked-hint-ico {
            flex: 0 0 auto;
            line-height: 1.3;
        }
        .dash-unlinked-hint-text {
            flex: 1 1 auto;
            min-width: 0;
            color: #bae6fd;
        }
        .dash-unlinked-hint code.dash-unlinked-code,
        .dash-unlinked-hint .copy-cmd {
            color: #f0f9ff;
            font-weight: 700;
            background: rgba(2, 6, 23, 0.45);
            border: 1px solid rgba(125, 211, 252, 0.35);
            border-radius: 0.3rem;
            padding: 0.05rem 0.35rem;
            cursor: pointer;
        }
        body.r5-unlinked #server-controls,
        body.r5-unlinked #worlds-content,
        body.r5-unlinked #backups-content,
        body.r5-unlinked #whitelist-content {
            opacity: 1 !important;
            pointer-events: auto !important;
            min-height: 0 !important;
        }
        /* Server Controls when unsigned: hide pack list + start/stop shell so the card is short */
        body.r5-unlinked [data-lock-section="controls"] #server-controls {
            min-height: 0 !important;
        }
        body.r5-unlinked [data-lock-section="controls"] #server-controls [data-controls-root],
        body.r5-unlinked [data-lock-section="controls"] #server-controls .r5-ctrl-row {
            display: none !important;
        }
        body.r5-unlinked [data-lock-section="controls"] #servers-switch-hint,
        body.r5-unlinked [data-lock-section="controls"] #servers-list,
        body.r5-unlinked [data-lock-section="controls"] #server-result,
        body.r5-unlinked [data-lock-section="controls"] > .mt-2 {
            display: none !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
        }
        body.r5-unlinked .dash-unlinked-pack-empty {
            display: none !important;
            height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        /* Worlds / backups: no empty min-height when only the link hint shows */
        body.r5-unlinked [data-lock-section="worlds"] #worlds-content,
        body.r5-unlinked [data-lock-section="backups"] #backups-content {
            min-height: 0 !important;
        }
        body.r5-unlinked [data-lock-section="worlds"] #world-create-form {
            display: none !important;
        }
        /* Need-link cards (Files / Console) only when not signed in */
        body:not(.r5-unlinked) .need-link-only {
            display: none !important;
        }
        body.r5-unlinked .need-link-only {
            display: block !important;
        }
        body.r5-unlinked .files-no-access.need-link-only,
        body.r5-unlinked #files-need-link,
        body.r5-unlinked #console-need-link {
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        .row-active {
            background: linear-gradient(90deg, rgba(16,185,129,0.35), rgba(6,95,70,0.4)) !important;
            /* outline (not inset 2px shadow) so ACTIVE rows don't look taller during ops */
            box-shadow: 0 0 12px rgba(52, 211, 153, 0.15);
            outline: 2px solid #34d399;
            outline-offset: -2px;
        }
        .row-current-busy {
            background-color: rgba(15, 23, 42, 0.75) !important;
            box-shadow: none;
            outline: 1px solid #64748b;
            outline-offset: -1px;
        }
        .row-idle:hover {
            background: rgba(56, 189, 248, 0.12);
        }
        /* Fixed row height for pack/world names — loading/ACTIVE must not grow the boxes */
        #servers-list .entity-row,
        #worlds-content .entity-row {
            box-sizing: border-box;
            min-height: 2.15rem;
            height: 2.15rem;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            align-items: center;
        }
        /* Pack/world select: outline + ACTIVE must snap same frame (no color fade lag) */
        #servers-list .entity-row,
        #worlds-content .entity-row {
            transition: none !important;
        }
        #servers-list .entity-row-name,
        #worlds-content .entity-row-name {
            min-width: 0;
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            overflow: hidden;
        }
        #servers-list .entity-row-name .entity-row-label,
        #worlds-content .entity-row-name .entity-row-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.25;
        }
        #servers-list .entity-row-actions,
        #worlds-content .entity-row-actions {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            /* No flex gap: collapsed del/cog still create gaps and push ACTIVE left
               on worlds (badge+del+cog) vs servers (badge+cog). Hover uses margin-left. */
            gap: 0;
            /* Reserve ACTIVE + cog so name width (and wrap) never shifts mid-op */
            min-width: 5.75rem;
            min-height: 1.65rem;
        }
        /* Worlds: ACTIVE badge left-most, then del, then cog (del left of cog on hover) */
        #worlds-content .entity-row-actions {
            min-width: 5.75rem;
        }
        /* del sits between ACTIVE and cog — keep a small gap on both sides when expanded */
        #worlds-content .entity-row:hover .row-del,
        #worlds-content .entity-row:focus-within .row-del,
        #worlds-content .entity-row .row-del:focus,
        #worlds-content .entity-row .row-del.is-sure {
            margin-left: 0.2rem;
            margin-right: 0.15rem;
        }
        #servers-list .entity-badge,
        #worlds-content .entity-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 1.35rem;
            padding: 0 0.45rem;
            border-radius: 0.35rem;
            font-size: 0.7rem;
            font-weight: 650;
            line-height: 1;
            white-space: nowrap;
            box-sizing: border-box;
        }

        /* Card section titles (Server Status, Backups, Worlds, …) — not selectable */
        .card > h2,
        .section > h2,
        .section-head,
        .card .section-head {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            cursor: default;
        }
        .section-head {
            position: relative;
            padding-right: 2.25rem;
        }
        .lock-busy-dots {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            display: none;
            align-items: center;
            gap: 0;
            min-width: 1.5rem;
            justify-content: flex-end;
            font-size: 1.35rem;
            font-weight: 700;
            line-height: 1;
            color: #f0f9ff;
            letter-spacing: 0.02em;
            pointer-events: none;
            user-select: none;
        }
        .lock-busy-dots.is-on { display: inline-flex; }
        .lock-busy-dots .dot {
            opacity: 0.25;
            animation: lock-dot-pulse 1.1s ease-in-out infinite;
        }
        .lock-busy-dots .dot:nth-child(2) { animation-delay: 0.18s; }
        .lock-busy-dots .dot:nth-child(3) { animation-delay: 0.36s; }
        @keyframes lock-dot-pulse {
            0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
            40% { opacity: 1; transform: translateY(-1px); }
        }

        /* Whitelist enforcement — real switch control (self-contained busy state) */
        .wl-switch-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.75rem 1rem;
            margin-bottom: 0.75rem;
            padding: 0.65rem 0.8rem;
            border-radius: 0.75rem;
            border: 1px solid rgba(51, 65, 85, 0.85);
            background: rgba(15, 23, 42, 0.45);
        }
        .wl-switch {
            --wl-track-w: 2.75rem;
            --wl-track-h: 1.55rem;
            --wl-knob: 1.2rem;
            --wl-pad: 0.18rem;
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            margin: 0;
            padding: 0.2rem 0.15rem;
            border: none;
            background: transparent;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            flex: none;
        }
        .wl-switch:focus { outline: none; }
        .wl-switch:focus-visible .wl-switch-track {
            box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.9), 0 0 0 4px rgba(56, 189, 248, 0.65);
        }
        .wl-switch-track {
            position: relative;
            width: var(--wl-track-w);
            height: var(--wl-track-h);
            border-radius: 999px;
            flex: none;
            transition: background 0.18s ease, box-shadow 0.18s ease;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
        }
        .wl-switch.is-on .wl-switch-track {
            background: linear-gradient(165deg, #34d399, #059669);
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 1px rgba(52, 211, 153, 0.35);
        }
        .wl-switch.is-off .wl-switch-track {
            background: linear-gradient(165deg, #64748b, #334155);
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.35), 0 0 0 1px rgba(148, 163, 184, 0.2);
        }
        .wl-switch-knob {
            position: absolute;
            top: 50%;
            left: var(--wl-pad);
            width: var(--wl-knob);
            height: var(--wl-knob);
            border-radius: 50%;
            background: #f8fafc;
            box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(15,23,42,0.08);
            transform: translateY(-50%);
            transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .wl-switch.is-on .wl-switch-knob {
            transform: translateY(-50%) translateX(calc(var(--wl-track-w) - var(--wl-knob) - var(--wl-pad) * 2));
        }
        .wl-switch-state {
            min-width: 1.85rem;
            font-size: 0.78rem;
            font-weight: 750;
            letter-spacing: 0.04em;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }
        .wl-switch.is-on .wl-switch-state { color: #6ee7b7; }
        .wl-switch.is-off .wl-switch-state { color: #94a3b8; }
        .wl-switch-spin {
            position: absolute;
            /* sits over the track; fixed box so no layout shift */
            left: 0.15rem;
            top: 50%;
            width: var(--wl-track-w);
            height: var(--wl-track-h);
            margin-top: calc(var(--wl-track-h) / -2);
            display: none;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }
        .wl-switch-spin::after {
            content: "";
            width: 0.85rem;
            height: 0.85rem;
            border-radius: 50%;
            border: 2px solid rgba(248, 250, 252, 0.28);
            border-top-color: #f8fafc;
            animation: wl-switch-spin 0.6s linear infinite;
        }
        .wl-switch.htmx-request,
        .wl-switch:disabled {
            cursor: wait;
            pointer-events: none;
        }
        .wl-switch.htmx-request .wl-switch-track { opacity: 0.35; }
        .wl-switch.htmx-request .wl-switch-knob { opacity: 0.2; }
        .wl-switch.htmx-request .wl-switch-spin { display: flex; }
        .wl-switch.htmx-request .wl-switch-state { opacity: 0.7; }
        .wl-switch:hover:not(:disabled):not(.htmx-request) .wl-switch-track {
            filter: brightness(1.08);
        }
        .wl-switch:active:not(:disabled):not(.htmx-request) .wl-switch-knob {
            width: calc(var(--wl-knob) + 0.12rem);
        }
        @keyframes wl-switch-spin {
            to { transform: rotate(360deg); }
        }
        @media (prefers-reduced-motion: reduce) {
            .wl-switch-track, .wl-switch-knob { transition: none; }
            .wl-switch-spin::after { animation: none; border-top-color: rgba(248,250,252,0.7); }
        }
        .wl-switch-meta { min-width: 0; flex: 1 1 10rem; }
        .wl-switch-title {
            font-size: 0.82rem;
            font-weight: 650;
            color: #e2e8f0;
            line-height: 1.25;
        }
        .wl-switch-hint {
            margin-top: 0.15rem;
            font-size: 0.7rem;
            color: #64748b;
            line-height: 1.35;
        }
        .wl-switch-note {
            width: 100%;
            margin: 0 0 0.5rem;
            padding: 0.45rem 0.6rem;
            border-radius: 0.5rem;
            font-size: 0.75rem;
            line-height: 1.35;
        }
        .wl-switch-note.warn {
            background: rgba(120, 53, 15, 0.35);
            border: 1px solid rgba(251, 191, 36, 0.35);
            color: #fcd34d;
        }
        .wl-switch-note.err {
            background: rgba(127, 29, 29, 0.35);
            border: 1px solid rgba(248, 113, 113, 0.35);
            color: #fca5a5;
        }
        .wl-switch-ro {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.8rem;
            font-weight: 650;
        }
        .wl-switch-ro .dot {
            width: 0.45rem;
            height: 0.45rem;
            border-radius: 50%;
            flex: none;
        }
        .wl-switch-ro.is-on { color: #6ee7b7; }
        .wl-switch-ro.is-on .dot { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,0.55); }
        .wl-switch-ro.is-off { color: #94a3b8; }
        .wl-switch-ro.is-off .dot { background: #64748b; }
        /* Whitelist name rows: remove only on hover (or focus-within / touch) */
        .wl-name-row .wl-remove {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.12s ease;
        }
        .wl-name-row:hover .wl-remove,
        .wl-name-row:focus-within .wl-remove {
            opacity: 1;
            pointer-events: auto;
        }
        @media (hover: none) {
            .wl-name-row .wl-remove {
                opacity: 1;
                pointer-events: auto;
            }
        }

        input {
            background-color: rgba(15, 23, 42, 0.65) !important;
            color: #e0f2fe !important;
            border-color: rgba(125, 211, 252, 0.35) !important;
        }
        input:focus {
            background-color: rgba(15, 23, 42, 0.8) !important;
            border-color: rgba(56, 189, 248, 0.7) !important;
            outline: none;
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
        }
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
            -webkit-text-fill-color: #e0f2fe !important;
            transition: background-color 5000s ease-in-out 0s;
        }

        @media (prefers-reduced-motion: reduce) {
            .bg-aero .bg-layer,
            .bg-aero .orb-inner,
            .bg-aero .bubble { animation: none !important; }
            .bg-aero .bg-layer { transition: opacity 0.35s ease; }
            .bg-aero .orb { transition: transform 0.35s ease, filter 0.35s ease; }
        }

        /* Website locked banner — glass aero + red edge */
        .lock-banner {
            margin-bottom: 1rem;
            padding: 1rem 1.1rem;
            border-radius: 1rem;
            border: 1.5px solid rgba(248, 113, 113, 0.85);
            background: linear-gradient(155deg,
                rgba(254, 202, 202, 0.14) 0%,
                rgba(127, 29, 29, 0.22) 40%,
                rgba(15, 23, 42, 0.55) 100%);
            box-shadow:
                0 8px 28px rgba(127, 29, 29, 0.28),
                0 0 0 1px rgba(248, 113, 113, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.28),
                inset 0 -1px 0 rgba(0, 0, 0, 0.12);
            backdrop-filter: blur(14px) saturate(1.3);
            -webkit-backdrop-filter: blur(14px) saturate(1.3);
            position: relative;
            overflow: hidden;
        }
        .lock-banner::before {
            content: "";
            position: absolute;
            left: 10%;
            right: 10%;
            top: 0;
            height: 45%;
            border-radius: 0 0 50% 50%;
            background: linear-gradient(180deg, rgba(255,255,255,0.2), transparent);
            pointer-events: none;
            opacity: 0.75;
        }
        .lock-banner > * { position: relative; z-index: 1; }
        .lock-banner-title {
            font-weight: 700;
            font-size: 1.05rem;
            color: #fecaca;
            text-shadow: 0 0 18px rgba(248, 113, 113, 0.35);
            letter-spacing: -0.01em;
        }
        .lock-banner-body {
            margin: 0.45rem 0 0.85rem;
            color: rgba(254, 226, 226, 0.9);
            font-size: 0.9rem;
            line-height: 1.5;
            max-width: 36rem;
        }
        .lock-banner-sub {
            margin-top: 0.35rem;
            color: rgba(254, 202, 202, 0.9);
            font-size: 0.9rem;
        }
        .lock-banner-step {
            margin-top: 0.4rem;
            font-size: 0.875rem;
            color: rgba(224, 242, 254, 0.88);
        }
        /* Inline hub link (replaces giant red CTA button) */
        .lock-banner-here {
            color: #7dd3fc !important;
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 0.14em;
            text-decoration-color: rgba(125, 211, 252, 0.65);
        }
        .lock-banner-here:hover {
            color: #bae6fd !important;
            text-decoration-color: rgba(186, 230, 253, 0.9);
        }
        .lock-banner-advanced {
            margin-top: 0.85rem;
            font-size: 0.8rem;
            color: rgba(254, 202, 202, 0.75);
        }
        .lock-banner-advanced summary {
            cursor: pointer;
            user-select: none;
            color: rgba(226, 232, 240, 0.8);
            font-weight: 600;
            list-style: none;
        }
        .lock-banner-advanced summary::-webkit-details-marker { display: none; }
        .lock-banner-advanced summary::before {
            content: "▸ ";
            opacity: 0.7;
        }
        .lock-banner-advanced[open] summary::before {
            content: "▾ ";
        }
        .lock-banner-advanced summary:hover {
            color: #fef2f2;
        }
        .lock-banner code.copy-cmd {
            color: #fff;
            background: rgba(15, 23, 42, 0.65);
            border: 1px solid rgba(248, 113, 113, 0.35);
            padding: 0.1rem 0.4rem;
            border-radius: 0.35rem;
            cursor: pointer;
        }
        .lock-banner code.copy-cmd:hover {
            background: rgba(127, 29, 29, 0.45);
            border-color: rgba(252, 165, 165, 0.55);
        }
        .lock-banner input[name="code"] {
            background: rgba(15, 23, 42, 0.7) !important;
            border-color: rgba(248, 113, 113, 0.45) !important;
        }
        .lock-banner input[name="code"]:focus {
            border-color: rgba(252, 165, 165, 0.75) !important;
            box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.25);
        }
        .dash-unlinked-hub {
            color: #f0f9ff;
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 0.12em;
        }
        .dash-unlinked-hub:hover {
            color: #fff;
        }