/* ============================================================
   app.css — application styles, extracted from index.html.
   Loads after ui-theme.css (tokens + .ui-* system).
   ============================================================ */

/* ===== section 1 (index.html extraction order preserved) ===== */
        :root {
            --toolbar-height: 36px;
            /* Canonical accent = #64C8FF (rgba(var(--ui-accent-rgb))) — the --ui-*
               tokens from Themes.js are the source of truth; these mirrors
               exist only for pre-theme-boot paint and match it exactly. */
        }
        
        /* overscroll-behavior: none blocks pull-to-refresh AND the Chrome
           Android edge-swipe back-navigation — a pan near the screen edge must
           move the canvas, not leave the app. */
        html { overscroll-behavior: none; }
        body { margin: 0; overflow: hidden; background: #0a0f14; color: white; cursor: default; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; touch-action: none; font-weight: 400; overscroll-behavior: none; }
        
        /* Unified sub-toolbar button styles */
        .subtoolbar-btn {
            background: rgba(var(--ui-primary-rgb), 0.5);
            color: rgba(var(--ui-text-rgb), 0.85);
            border: 2px solid var(--ui-border);
            border-radius: 5px;
            padding: 6px 12px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
            font-family: 'Inter', sans-serif;
        }
        .subtoolbar-btn:hover {
            filter: brightness(1.2);
            border-color: var(--ui-border-accent);
            color: #fff;
            box-shadow: 0 0 12px rgba(var(--ui-accent-rgb), 0.45);
            transform: scale(1.05);
        }
        .subtoolbar-btn:active {
            background: rgba(var(--ui-primary-rgb), 0.55);
            transform: scale(0.97);
        }
        .subtoolbar-btn.active, .subtoolbar-btn.selected {
            /* Selection = amber (one selection colour app-wide) */
            background: rgba(255, 169, 77, 0.25);
            border-color: var(--ui-selected-bright, #FFC078);
            color: var(--ui-selected-bright, #FFC078);
            box-shadow: 0 0 10px rgba(255, 169, 77, 0.3);
        }
        .subtoolbar-ui-btn ui-btn-danger {
            background: rgba(80, 30, 30, 0.5);
            color: #ff8080;
            border: 1px solid rgba(255, 100, 100, 0.25);
            border-radius: 5px;
            padding: 6px 12px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
            font-family: 'Inter', sans-serif;
        }
        .subtoolbar-ui-btn ui-btn-danger:hover {
            background: rgba(100, 30, 30, 0.6);
            border-color: rgba(255, 100, 100, 0.4);
        }
        .subtoolbar-divider {
            width: 1px;
            height: 18px;
            background: rgba(var(--ui-accent-rgb), 0.2);
            margin: 0 2px;
        }
        
        /* Draw toolbar compact icon buttons */
        .draw-tool-btn {
            background: rgba(var(--ui-primary-rgb), 0.4);
            color: rgba(255, 255, 255, 0.75);
            border: 2px solid var(--ui-border);
            border-radius: 5px;
            padding: 5px 7px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.15s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .draw-tool-btn:hover {
            background: rgba(40, 80, 100, 0.6);
            border-color: var(--ui-border-accent);
            color: #fff;
        }
        .draw-tool-btn:active {
            transform: scale(0.97);
        }
        .draw-tool-btn.active {
            background: rgba(255, 120, 0, 0.35);
            border-color: rgba(255, 160, 0, 0.8);
            color: #ff9500;
            box-shadow: 0 0 10px rgba(255, 120, 0, 0.3);
        }
        .draw-tool-ui-btn ui-btn-danger {
            color: rgba(255, 120, 120, 0.8);
        }
        .draw-tool-ui-btn ui-btn-danger:hover {
            background: rgba(100, 30, 30, 0.5);
            border-color: rgba(255, 100, 100, 0.3);
        }
        
        /* Draw mode active indicator — orange screen border */
        #drawModeOverlay {
            display: none;
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 99;
            border: 2px solid rgba(255, 140, 30, 0.6);
            box-shadow: inset 0 0 30px rgba(255, 140, 30, 0.08);
            border-radius: 0;
        }
        #drawModeOverlay.active {
            display: block;
        }
        
        /* Modal animation keyframes */
        @keyframes modalFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes modalFadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        @keyframes modalContentIn {
            from { opacity: 0; transform: scale(0.95) translateY(10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        @keyframes modalContentOut {
            from { opacity: 1; transform: scale(1) translateY(0); }
            to { opacity: 0; transform: scale(0.95) translateY(10px); }
        }
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes slideOutRight {
            from { opacity: 1; transform: translateX(0); }
            to { opacity: 0; transform: translateX(30px); }
        }
        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes slideOutLeft {
            from { opacity: 1; transform: translateX(0); }
            to { opacity: 0; transform: translateX(-30px); }
        }

        /* Comment hover actions - same pattern as chat */
        .comment-actions { display: none; }
        .comment-item:hover .comment-actions { display: flex !important; }
        .comment-actions span:hover { background: rgba(var(--ui-accent-rgb),0.2); }

        /* Messages panel tab hover */
        .msg-tab:hover {
            background: var(--ui-surface-hover) !important;
            color: var(--ui-text-bright) !important;
        }
        .msg-tab.active-tab:hover {
            background: rgba(var(--ui-primary-rgb), 0.45) !important;
        }

        /* Custom scrollbar for messages panel */
        #nodeCommentsPanel ::-webkit-scrollbar {
            width: 6px;
        }
        #nodeCommentsPanel ::-webkit-scrollbar-track {
            background: rgba(var(--ui-surface-rgb), 0.4);
            border-radius: 3px;
        }
        #nodeCommentsPanel ::-webkit-scrollbar-thumb {
            background: rgba(var(--ui-accent-rgb), 0.3);
            border-radius: 3px;
        }
        #nodeCommentsPanel ::-webkit-scrollbar-thumb:hover {
            background: rgba(var(--ui-accent-rgb), 0.5);
        }
        /* Firefox scrollbar */
        #nodeCommentsPanel * {
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--ui-accent-rgb), 0.3) rgba(var(--ui-surface-rgb), 0.4);
        }
        
        /* AI Chat panel — custom scrollbar */
        #aiChatPanel ::-webkit-scrollbar { width: 6px; }
        #aiChatPanel ::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb), 0.4); border-radius: 3px; }
        #aiChatPanel ::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb), 0.3); border-radius: 3px; }
        #aiChatPanel ::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb), 0.5); }
        #aiChatPanel * { scrollbar-width: thin; scrollbar-color: rgba(var(--ui-accent-rgb), 0.3) rgba(var(--ui-surface-rgb), 0.4); }

        /* Org settings modal — same themed scrollbar as the other panels */
        #orgSettingsModal ::-webkit-scrollbar { width: 6px; }
        #orgSettingsModal ::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb), 0.4); border-radius: 3px; }
        #orgSettingsModal ::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb), 0.3); border-radius: 3px; }
        #orgSettingsModal ::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb), 0.5); }
        #orgSettingsModal * { scrollbar-width: thin; scrollbar-color: rgba(var(--ui-accent-rgb), 0.3) rgba(var(--ui-surface-rgb), 0.4); }

        /* AI Assistant button glow when API key is configured */
        #aiAssistantBtn.ai-active img {
            opacity: 1 !important;
            filter: drop-shadow(0 0 6px rgba(212,165,116,0.6));
            animation: ai-pulse 3s ease-in-out infinite;
        }
        @keyframes ai-pulse {
            0%, 100% { filter: drop-shadow(0 0 6px rgba(212,165,116,0.6)); }
            50% { filter: drop-shadow(0 0 10px rgba(212,165,116,0.8)) drop-shadow(0 0 20px rgba(212,165,116,0.3)); }
        }

        /* AI Assistant panel — custom scrollbar */
        #aiAssistantPanel ::-webkit-scrollbar { width: 6px; }
        #aiAssistantPanel ::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb), 0.4); border-radius: 3px; }
        #aiAssistantPanel ::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb), 0.3); border-radius: 3px; }
        #aiAssistantPanel ::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb), 0.5); }
        #aiAssistantPanel * { scrollbar-width: thin; scrollbar-color: rgba(var(--ui-accent-rgb), 0.3) rgba(var(--ui-surface-rgb), 0.4); }

        /* Custom scrollbar for search panel */
        #searchResults::-webkit-scrollbar {
            width: 6px;
        }
        #searchResults::-webkit-scrollbar-track {
            background: rgba(var(--ui-surface-rgb), 0.4);
            border-radius: 3px;
        }
        #searchResults::-webkit-scrollbar-thumb {
            background: rgba(var(--ui-accent-rgb), 0.3);
            border-radius: 3px;
        }
        #searchResults::-webkit-scrollbar-thumb:hover {
            background: rgba(var(--ui-accent-rgb), 0.5);
        }
        /* Firefox scrollbar for search */
        #searchResults {
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--ui-accent-rgb), 0.3) rgba(var(--ui-surface-rgb), 0.4);
        }

        /* Emoji picker (chat input, reactions, comments): the category LIST scrolls (so
           the search bar above it stays fixed) with a neutral, Discord-like thin scrollbar. */
        .emoji-categories-container { max-height: 240px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.14) transparent; }
        .emoji-categories-container::-webkit-scrollbar { width: 8px; }
        .emoji-categories-container::-webkit-scrollbar-track { background: transparent; }
        .emoji-categories-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
        .emoji-categories-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.26); background-clip: padding-box; }

        /* Chat: subtle full-row highlight on hover (Discord-style) */
        .chat-msg { border-radius: 6px; transition: background 0.1s ease; }
        .chat-msg:hover { background: rgba(255, 255, 255, 0.035); }

        /* Custom scrollbar for activity panel */
        #notifList::-webkit-scrollbar { width: 6px; }
        #notifList::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb), 0.4); border-radius: 3px; }
        #notifList::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb), 0.3); border-radius: 3px; }
        #notifList::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb), 0.5); }
        .chat-node-link { cursor: pointer; color: #D26B3F; background: rgba(210,107,63,0.12); border-radius: 4px; padding: 1px 5px; font-size: 12px; white-space: nowrap; transition: background 0.15s; }
        .chat-node-link:hover { background: rgba(210,107,63,0.28); }
        /* Inline image-node block: no tinted background, no padding — let the
           image breathe at its natural size against the bubble. */
        .chat-node-image-block { background: none !important; padding: 0 !important; }
        /* Chat panel header buttons — share a single style for tabs, lock, close. */
        .kk-tab-btn {
            width: 40px; height: 40px; padding: 0;
            background: rgba(var(--ui-surface-rgb),0.6);
            border: 2px solid var(--ui-border);
            border-radius: 8px;
            color: rgba(255,255,255,0.55);
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            position: relative;
            transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
        }
        .kk-tab-btn:hover {
            color: rgba(255,255,255,0.92);
            background: var(--ui-surface-hover);
            border-color: var(--ui-border-accent);
            box-shadow: 0 0 12px rgba(var(--ui-accent-rgb), 0.45);
            transform: scale(1.05);
        }
        .kk-tab-btn.msg-tab-active {
            background: rgba(var(--ui-accent-rgb),0.22) !important;
            color: #fff !important;
            border-color: var(--ui-border-accent) !important;
        }
        .space-dropdown-list { width: 100%; max-height: 192px; overflow-y: auto; background: rgba(var(--ui-surface-rgb),0.6); border: 2px solid var(--ui-border); border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
        .space-dropdown-list::-webkit-scrollbar { width: 6px; }
        .space-dropdown-list::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb),0.4); border-radius: 3px; }
        .space-dropdown-list::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb),0.3); border-radius: 3px; }
        .space-dropdown-list::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb),0.5); }
        .space-dropdown-placeholder { padding: 10px 12px; color: #555; font-style: italic; }
        .space-dropdown-item { padding: 8px 12px; color: var(--ui-text); cursor: pointer; transition: background 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .space-dropdown-item:hover { background: rgba(var(--ui-accent-rgb),0.1); color: var(--ui-text-bright); }
        .space-dropdown-divider { padding: 5px 12px; color: var(--ui-text-muted); font-size: 11px; pointer-events: none; border-top: 1px solid var(--ui-border-faint); margin-top: 2px; }
        #floatingNotifBadge { display: none; }
        #spaceActivityList::-webkit-scrollbar, #myActivityList::-webkit-scrollbar {
            width: 6px;
        }
        #spaceActivityList::-webkit-scrollbar-track, #myActivityList::-webkit-scrollbar-track {
            background: rgba(var(--ui-surface-rgb), 0.4);
            border-radius: 3px;
        }
        #spaceActivityList::-webkit-scrollbar-thumb, #myActivityList::-webkit-scrollbar-thumb {
            background: rgba(var(--ui-accent-rgb), 0.3);
            border-radius: 3px;
        }
        #spaceActivityList::-webkit-scrollbar-thumb:hover, #myActivityList::-webkit-scrollbar-thumb:hover {
            background: rgba(var(--ui-accent-rgb), 0.5);
        }
        #spaceActivityList, #myActivityList {
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--ui-accent-rgb), 0.3) rgba(var(--ui-surface-rgb), 0.4);
        }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb), 0.4); border-radius: 3px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb), 0.3); border-radius: 3px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb), 0.5); }
        .custom-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(var(--ui-accent-rgb), 0.3) rgba(var(--ui-surface-rgb), 0.4); }
        
        /* Modern minimal toolbar - teal theme, light weight */
        #ui {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(var(--ui-surface-rgb), 0.88);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 2px solid var(--ui-border);
            padding: 7px 16px;
            pointer-events: none;
            /* Above the location HUD widget (1200) so toolbar dropdowns (burger,
               universe menu) render over it. #ui is a stacking context — a
               dropdown's own z-index only competes INSIDE it, so this root-level
               value is what actually beats the widget. Still below modals (5000+). */
            z-index: calc(var(--z-hud) + 100);
        }
        
        .toolbar-container {
            display: flex;
            gap: 5px;
            align-items: center;
            pointer-events: auto;
            flex-wrap: wrap;
        }

        /* Comfort scale — the UI chrome reads better ~10% larger (found via an
           accidental 125% browser-zoom A/B test; 110% was the pick). Applies
           to DOM FRAMES only, desktop only: the canvas and canvas-anchored
           overlays must keep 1:1 CSS px ↔ client px or every screen-space
           hit test skews. Browser page zoom stacks on top as before. */
        @media (min-width: 769px) {
            .toolbar-container,
            #usersInSpace,
            #locationContainer,
            #discoverKuukanPanel {
                zoom: 1.1;
            }
        }
        
        .toolbar-divider {
            width: 1px;
            height: 18px;
            background: rgba(var(--ui-accent-rgb), 0.2);
            margin: 0 8px;
        }
        
        .toolbar-logo {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-right: 12px;
        }

        .toolbar-logo img {
            height: 26px;
            width: auto;
            display: block;
        }
        
        /* Toolbar button style - clean, light */
        .toolbar-btn {
            pointer-events: auto;
            height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            background: var(--ui-toolbar-btn-bg, rgba(var(--ui-primary-rgb), 0.5));
            color: rgba(255, 255, 255, 0.8);
            border: 2px solid var(--ui-border);
            border-radius: 5px;
            padding: 5px 11px;
            font-size: 12px;
            font-weight: 400;
            transition: all 0.15s ease;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            cursor: pointer;
        }
        .toolbar-btn:hover {
            filter: brightness(1.2);
            border-color: var(--ui-border-accent);
            color: #fff;
            box-shadow: 0 0 12px rgba(var(--ui-accent-rgb), 0.45);
            transform: scale(1.05);
        }
        .toolbar-btn:active {
            background: var(--ui-toolbar-btn-bg, rgba(var(--ui-primary-rgb), 0.55));
            transform: scale(0.97);
        }
        .toolbar-btn.active {
            background: rgba(255, 120, 0, 0.35) !important;
            border-color: rgba(255, 160, 0, 0.8) !important;
            color: #ff9500 !important;
            box-shadow: 0 0 10px rgba(255, 120, 0, 0.3);
        }
        
        /* Tooltip system */
        [data-tooltip] {
            position: relative;
        }
        [data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            background: rgba(var(--ui-surface-rgb), 0.95);
            color: rgba(255, 255, 255, 0.9);
            font-size: 11px;
            font-weight: 400;
            font-family: 'Inter', sans-serif;
            padding: 5px 10px;
            border-radius: 6px;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.15s ease, transform 0.15s ease;
            z-index: var(--z-top);
            border: 2px solid var(--ui-border);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        [data-tooltip]:hover::after {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
            transition-delay: 0.15s;
        }
        /* Long-copy tooltips wrap instead of stretching across the screen */
        [data-tooltip-wrap]::after {
            white-space: normal;
            width: 240px;
            line-height: 1.45;
            text-align: left;
        }
        /* Bottom tooltips for special cases */
        [data-tooltip-pos="bottom"]::after {
            bottom: auto;
            top: calc(100% + 8px);
            transform: translateX(-50%) translateY(-4px);
        }
        [data-tooltip-pos="bottom"]:hover::after {
            transform: translateX(-50%) translateY(0);
            transition-delay: 0.15s;
        }
        /* Message-action tooltips sit at the right edge of a chat/comment message —
           right-align them so the rightmost button's tooltip extends LEFT instead of
           overflowing the panel's right edge (where overflow:auto would clip it). */
        .message-actions [data-tooltip]::after {
            left: auto; right: 0;
            transform: translateX(0) translateY(-4px);
        }
        .message-actions [data-tooltip]:hover::after {
            transform: translateX(0) translateY(0);
        }
        /* The location widget hugs the right screen edge — same treatment:
           right-align so the tooltip grows LEFT instead of off-screen. */
        #locationContainer [data-tooltip]::after {
            left: auto; right: 0;
            transform: translateX(0) translateY(-4px);
        }
        #locationContainer [data-tooltip]:hover::after {
            transform: translateX(0) translateY(0);
        }
        /* Toolbar tooltips: show below (toolbar is at top of viewport) */
        .toolbar-container [data-tooltip]::after {
            bottom: auto;
            top: calc(100% + 8px);
            transform: translateX(-50%) translateY(-4px);
        }
        .toolbar-container [data-tooltip]:hover::after {
            transform: translateX(-50%) translateY(0);
            transition-delay: 0.15s;
        }
        /* Right tooltips for floating buttons */
        [data-tooltip-pos="right"]::after {
            bottom: auto;
            left: calc(100% + 10px);
            top: 50%;
            transform: translateY(-50%) translateX(-4px);
        }
        [data-tooltip-pos="right"]:hover::after {
            transform: translateY(-50%) translateX(0);
            transition-delay: 0.15s;
        }
        /* Left tooltips for burger menu / right-aligned dropdowns */
        [data-tooltip-pos="left"]::after {
            bottom: auto;
            left: auto;
            right: calc(100% + 10px);
            top: 50%;
            transform: translateY(-50%) translateX(4px);
        }
        [data-tooltip-pos="left"]:hover::after {
            transform: translateY(-50%) translateX(0);
            transition-delay: 0.15s;
        }

        /* People-panel row buttons sit close to the right edge — the
           default centred tooltip pushed long destination names off-
           screen ("Teleport to user · LongSpaceName"). Anchor the
           tooltip's RIGHT edge to the button instead so it grows to
           the left, and allow wrapping so very long names stack
           rather than overflow the panel. */
        #friendsList [data-tooltip]::after,
        #orgMembersList [data-tooltip]::after,
        #friendRequestsList [data-tooltip]::after,
        #dmFriendPicker [data-tooltip]::after {
            left: auto;
            right: 0;
            transform: translateY(4px);
            max-width: 220px;
            white-space: normal;
            text-align: left;
            line-height: 1.35;
        }
        #friendsList [data-tooltip]:hover::after,
        #orgMembersList [data-tooltip]:hover::after,
        #friendRequestsList [data-tooltip]:hover::after,
        #dmFriendPicker [data-tooltip]:hover::after {
            transform: translateY(0);
        }
        
        /* Icon-only buttons */
        .toolbar-btn-icon {
            padding: 5px 9px;
            font-size: 14px;
        }

        /* AI-group tint: pairs AI Assistant button and credit badge visually */
        /* AI group (assistant button + credit badge) looks like every other
           toolbar button — the Claude mark and ✨ carry the identity.
           .toolbar-btn-ai kept in markup only as a grouping hook. */

        /* Thin vertical divider to group related toolbar items */
        .toolbar-divider {
            display: inline-block;
            width: 1px;
            height: 18px;
            background: rgba(var(--ui-accent-rgb), 0.15);
            margin: 0 4px;
            vertical-align: middle;
        }

        /* Select dropdown styling */
        select.toolbar-btn {
            appearance: none;
            -webkit-appearance: none;
            padding-right: 24px;
            background: rgba(var(--ui-primary-rgb), 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 10 10'%3E%3Cpath fill='rgba(255,255,255,0.6)' d='M5 7L1 3h8z'/%3E%3C/svg%3E") no-repeat right 9px center;
        }
        select.toolbar-btn:hover {
            background: rgba(40, 80, 100, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 10 10'%3E%3Cpath fill='rgba(255,255,255,0.9)' d='M5 7L1 3h8z'/%3E%3C/svg%3E") no-repeat right 9px center;
        }
        select.toolbar-btn option {
            background: #0f1820;
            color: rgba(255, 255, 255, 0.8);
        }
        
        /* Dropdown menu items */
        .dropdown-item:hover {
            background: rgba(94, 234, 212, 0.1);
        }

        /* ── My Spaces dropdown (Kuukan style) ── */
        .my-spaces-trigger {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }
        .my-spaces-trigger-chevron {
            opacity: 0.55;
            transition: transform 0.15s ease;
        }
        .my-spaces-trigger.is-open .my-spaces-trigger-chevron {
            transform: rotate(180deg);
        }
        .my-spaces-panel {
            position: fixed;
            z-index: calc(var(--z-top) - 1);
            min-width: 240px;
            max-width: 360px;
            max-height: 70vh;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 6px 0;
            background: rgba(var(--ui-surface-rgb), 0.97);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 2px solid var(--ui-border);
            border-radius: 10px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
            color: rgba(var(--ui-text-rgb), 0.9);
            font-size: 13px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            user-select: none;
        }

        /* ── Kuukan Discover rail — persistent docked "lobby" panel ── */
        #discoverKuukanPanel.discover-rail {
            left: 12px;
            top: 56px;
            bottom: 14px;
            width: 294px;
            max-width: 294px;
            max-height: none;
            border-radius: 14px;
            padding: 0;
            display: flex;
            flex-direction: column;
            transition: transform 0.28s cubic-bezier(.4,0,.2,1), opacity 0.22s;
            transform: translateX(0);
        }
        #discoverKuukanPanel.discover-rail.collapsed {
            transform: translateX(-115%);
            opacity: 0;
            pointer-events: none;
        }
        .discover-rail-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 14px 10px; flex: none;
            border-bottom: 1px solid var(--ui-border-faint);
        }
        .discover-rail-title { font-size: 13px; font-weight: 700; letter-spacing: 0.4px; color: rgba(185,228,255,0.96); }
        .discover-rail-collapse {
            background: none; border: none; color: rgba(150,200,235,0.6); cursor: pointer;
            font-size: 17px; padding: 2px 7px; border-radius: 6px; line-height: 1;
        }
        .discover-rail-collapse:hover { background: rgba(var(--ui-accent-rgb),0.12); color: #fff; }
        .discover-rail-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 0 8px; }
        /* Thin reopen tab when the rail is collapsed */
        #discoverRailReopen {
            position: fixed; left: 0; top: 90px; z-index: calc(var(--z-top) - 2); display: none;
            background: rgba(var(--ui-surface-rgb),0.97); backdrop-filter: blur(16px);
            border: 2px solid var(--ui-border-accent); border-left: none;
            border-radius: 0 12px 12px 0; padding: 11px 9px; cursor: pointer;
            color: rgba(185,228,255,0.96); font-size: 17px;
            box-shadow: 0 6px 24px rgba(0,0,0,0.5); transition: background 0.15s;
        }
        #discoverRailReopen:hover { background: rgba(30,46,62,0.98); }
        .my-spaces-panel::-webkit-scrollbar {
            width: 6px;
        }
        .my-spaces-panel::-webkit-scrollbar-track {
            background: rgba(var(--ui-surface-rgb), 0.4);
            border-radius: 3px;
        }
        .my-spaces-panel::-webkit-scrollbar-thumb {
            background: rgba(var(--ui-accent-rgb), 0.3);
            border-radius: 3px;
        }
        .my-spaces-panel::-webkit-scrollbar-thumb:hover {
            background: rgba(var(--ui-accent-rgb), 0.5);
        }
        .my-spaces-panel-header {
            color: rgba(var(--ui-text-rgb), 0.7);
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.7px;
            padding: 9px 14px 4px;
            pointer-events: none;
        }
        .my-spaces-panel-divider {
            height: 1px;
            background: rgba(var(--ui-accent-rgb), 0.1);
            margin: 4px 8px;
        }
        .my-spaces-panel-item {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 6px 14px;
            cursor: pointer;
            line-height: 1.3;
            transition: background 0.12s, color 0.12s;
        }
        .my-spaces-panel-item:hover {
            background: rgba(var(--ui-accent-rgb), 0.13);
            color: #fff;
        }
        .my-spaces-panel-item-icon {
            flex-shrink: 0;
            font-size: 13px;
            width: 18px;
            /* SVG + PNG marks sit in one consistent box — centred both ways
               so the lock png and stroke icons align on the same baseline */
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .my-spaces-panel-item-label {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .my-spaces-panel-item-meta {
            color: rgba(var(--ui-text-rgb), 0.6);
            font-size: 11px;
            flex-shrink: 0;
            margin-left: 6px;
        }
        .my-spaces-panel-item.is-action {
            color: #4ecdc4;
        }
        .my-spaces-panel-item.is-action:hover {
            background: rgba(var(--ui-teal-rgb), 0.15);
            color: #5fdfdf;
        }
        .my-spaces-panel-empty {
            padding: 8px 14px;
            color: rgba(var(--ui-text-rgb), 0.5);
            font-size: 12px;
            font-style: italic;
        }

        /* ── GIF reaction picker (Kuukan style) ── */
        .gif-reaction-picker {
            position: fixed;
            z-index: calc(var(--z-top) - 1);
            width: 340px;
            height: 480px;
            /* Plain block layout — children use absolute positioning so the
               scroll area is reliably constrained between header and footer.
               Flex column with display:grid child kept fighting Chrome's
               height resolution and either over- or under-shot. */
            background: rgba(var(--ui-surface-rgb), 0.97);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(180, 140, 255, 0.25);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
            color: rgba(var(--ui-text-rgb), 0.9);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            user-select: none;
            overflow: hidden;
        }
        .gif-reaction-close {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 26px;
            height: 26px;
            padding: 0;
            border: none;
            border-radius: 5px;
            background: transparent;
            color: rgba(var(--ui-text-rgb), 0.55);
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            transition: background 0.12s, color 0.12s;
            z-index: 1;
        }
        .gif-reaction-close:hover {
            background: rgba(180, 140, 255, 0.2);
            color: #fff;
        }
        /* Source tabs — GIFs / Stickers */
        .gif-reaction-source-tabs {
            position: absolute;
            top: 0;
            left: 0;
            right: 36px;                       /* leave space for close button */
            height: 32px;
            display: flex;
            gap: 4px;
            padding: 4px 8px;
            box-sizing: border-box;
            border-bottom: 1px solid rgba(180, 140, 255, 0.08);
        }
        .gif-reaction-source-tab {
            flex: 1;
            padding: 0 10px;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 6px;
            color: rgba(180, 180, 200, 0.55);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.12s;
            font-family: inherit;
        }
        .gif-reaction-source-tab:hover {
            color: rgba(var(--ui-text-rgb), 0.95);
            background: rgba(180, 140, 255, 0.08);
        }
        .gif-reaction-source-tab.active {
            color: var(--ui-text-bright);
            background: rgba(180, 140, 255, 0.16);
            border-color: rgba(180, 140, 255, 0.3);
        }
        .gif-reaction-search-row {
            position: absolute;
            top: 32px;                          /* below source tabs */
            left: 0;
            right: 0;
            height: 48px;
            box-sizing: border-box;
            padding: 10px 12px 8px 12px;
            border-bottom: 1px solid rgba(180, 140, 255, 0.12);
        }
        .gif-reaction-search {
            width: 100%;
            padding: 8px 10px;
            background: rgba(var(--ui-surface-rgb), 0.7);
            border: 1px solid rgba(180, 140, 255, 0.2);
            border-radius: 6px;
            color: var(--ui-text-bright);
            font-size: 13px;
            outline: none;
            box-sizing: border-box;
            transition: border-color 0.12s;
        }
        .gif-reaction-search:focus {
            border-color: rgba(180, 140, 255, 0.5);
        }
        /* Scroll container — flex child that owns the overflow/scrollbar.
           Kept separate from the inner grid so display:grid doesn't fight
           the flex height allocation (a known Chrome quirk). */
        .gif-reaction-grid-scroll {
            position: absolute;
            top: 116px;                /* tabs (32) + search-row (48) + mode-row (36) */
            bottom: 28px;              /* attribution height */
            left: 0;
            right: 0;
            overflow-y: scroll;
            overflow-x: hidden;
            scrollbar-width: thin;     /* Firefox */
            scrollbar-color: rgba(180, 140, 255, 0.6) rgba(var(--ui-surface-rgb), 0.5);
        }
        .gif-reaction-grid-scroll::-webkit-scrollbar {
            width: 12px;
        }
        .gif-reaction-grid-scroll::-webkit-scrollbar-track {
            background: rgba(40, 50, 65, 0.7);
            border-radius: 6px;
            margin: 4px 0;
        }
        .gif-reaction-grid-scroll::-webkit-scrollbar-thumb {
            background: rgba(180, 140, 255, 0.7);
            border-radius: 6px;
            border: 2px solid rgba(var(--ui-surface-rgb), 0.97);
        }
        .gif-reaction-grid-scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(200, 160, 255, 0.9);
        }
        /* Inner grid — grows to content height; the scroll container above clips it. */
        .gif-reaction-grid {
            padding: 8px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            align-content: start;
        }
        .gif-reaction-tile {
            position: relative;
            padding: 0;
            background: rgba(var(--ui-surface-rgb), 0.4);
            border: 1px solid rgba(180, 140, 255, 0.08);
            border-radius: 6px;
            cursor: pointer;
            overflow: hidden;
            transition: border-color 0.12s, transform 0.12s;
        }
        .gif-reaction-tile:hover {
            border-color: rgba(180, 140, 255, 0.5);
            transform: scale(1.03);
        }
        /* Sent-confirmation flash — applied briefly after a tile click so
           the user sees their pick was registered, even though the picker
           stays open for follow-up reactions. */
        .gif-reaction-tile.gif-reaction-tile-sent {
            border-color: #5fdfdf;
            box-shadow: 0 0 0 2px rgba(95, 223, 223, 0.6);
            animation: gifReactionSentFlash 0.45s ease;
        }
        @keyframes gifReactionSentFlash {
            0%   { box-shadow: 0 0 0 0 rgba(95, 223, 223, 0.9); }
            100% { box-shadow: 0 0 0 8px rgba(95, 223, 223, 0); }
        }
        .gif-reaction-tile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            pointer-events: none;
        }
        /* Pin-mode toggle row */
        .gif-reaction-mode-row {
            position: absolute;
            top: 80px;                          /* tabs (32) + search-row (48) */
            left: 0;
            right: 0;
            height: 36px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 12px 8px;
            gap: 8px;
            border-bottom: 1px solid rgba(180, 140, 255, 0.08);
        }
        .gif-reaction-pin-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            user-select: none;
        }
        .gif-reaction-pin-checkbox {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        .gif-reaction-pin-thumb {
            position: relative;
            width: 30px;
            height: 16px;
            background: rgba(60, 70, 85, 0.7);
            border-radius: 8px;
            transition: background 0.15s;
        }
        .gif-reaction-pin-thumb::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 12px;
            height: 12px;
            background: rgba(var(--ui-text-rgb), 0.9);
            border-radius: 50%;
            transition: transform 0.15s;
        }
        .gif-reaction-pin-checkbox:checked + .gif-reaction-pin-thumb {
            background: rgba(180, 140, 255, 0.55);
        }
        .gif-reaction-pin-checkbox:checked + .gif-reaction-pin-thumb::after {
            transform: translateX(14px);
        }
        .gif-reaction-pin-label {
            color: rgba(var(--ui-text-rgb), 0.8);
            font-size: 12px;
        }
        .gif-reaction-mode-hint {
            color: rgba(var(--ui-text-rgb), 0.6);
            font-size: 11px;
            font-style: italic;
        }
        /* Slight visual cue when in pin mode — lavender accent */
        .gif-reaction-picker.gif-reaction-pin-mode {
            border-color: rgba(180, 140, 255, 0.55);
            box-shadow: 0 8px 32px rgba(120, 80, 200, 0.35), 0 0 0 1px rgba(180, 140, 255, 0.15);
        }
        .gif-reaction-empty {
            grid-column: 1 / -1;
            padding: 20px;
            text-align: center;
            color: rgba(var(--ui-text-rgb), 0.5);
            font-size: 12px;
            font-style: italic;
        }
        /* Footer that tells the user whether more results are coming or
           we've hit the end. Sits as a full-width row in the grid. */
        .gif-reaction-sentinel {
            grid-column: 1 / -1;
            padding: 10px 14px 14px;
            text-align: center;
            color: rgba(180, 200, 220, 0.7);
            font-size: 11px;
            letter-spacing: 0.4px;
        }
        /* When there's more to load, surface it more prominently — a
           subtle lavender pill so the user can't miss the cue. */
        .gif-reaction-sentinel.gif-reaction-sentinel-more {
            color: rgba(220, 200, 255, 0.85);
            background: rgba(180, 140, 255, 0.1);
            border-radius: 6px;
            margin: 8px;
            padding: 8px 14px;
        }
        .gif-reaction-attribution {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 28px;
            box-sizing: border-box;
            padding: 6px 12px;
            font-size: 10px;
            text-align: center;
            color: rgba(var(--ui-text-rgb), 0.5);
            border-top: 1px solid rgba(180, 140, 255, 0.1);
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Official GIPHY "Powered By" mark — transparent PNG, shown as-is
           on the dark footer. */
        .gif-reaction-giphy-logo {
            height: 16px;
            width: auto;
            display: block;
        }
        
        /* Node type dropdown items */
        .node-type-item:hover {
            background: rgba(94, 234, 212, 0.08) !important;
        }
        .node-type-item.selected {
            background: var(--teal-subtle) !important;
            color: var(--teal-primary);
        }
        
        /* Quick-create toolbar buttons */
        .quick-create-btn {
            position: relative;
        }
        .quick-create-btn.active-tool {
            background: rgba(255, 120, 0, 0.35) !important;
            border-color: rgba(255, 160, 0, 0.8) !important;
            color: #ff9500 !important;
            box-shadow: 0 0 10px rgba(255, 120, 0, 0.3);
        }
        
        /* Overflow menu items */
        .overflow-item:hover {
            background: rgba(94, 234, 212, 0.08) !important;
        }
        
        /* Canvas context menu (right-click to create) */
        .canvas-context-menu {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }
        .canvas-ctx-item {
            display: flex;
            align-items: center;
            padding: 8px 14px;
            cursor: pointer;
            color: var(--ui-text, #e0e0e0);
            font-size: 13px;
            transition: background 0.15s;
            gap: 10px;
        }
        .canvas-ctx-item:hover {
            background: var(--ui-surface-hover, rgba(var(--ui-accent-rgb), 0.1));
        }
        .canvas-ctx-separator {
            height: 1px;
            background: var(--ui-border, #3a3a5a);
            margin: 4px 8px;
        }
        .canvas-ctx-header {
            padding: 6px 14px 4px;
            color: var(--ui-accent, rgba(var(--ui-accent-rgb), 0.5));
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            opacity: 0.85;
        }
        
        /* Special accent buttons - cyan */
        .toolbar-btn-accent {
            background: rgba(var(--ui-accent-rgb), 0.12);
            border-color: var(--ui-border-accent);
            color: var(--ui-text);
        }
        /* Map button: rest-state accent tint only — hover comes from the
           universal .toolbar-btn glow, identical to every other button. */
        
        /* Lock button styles */
        .toolbar-btn-locked {
            background: rgba(248, 113, 113, 0.1) !important;
            border-color: rgba(248, 113, 113, 0.15) !important;
            color: rgba(248, 113, 113, 0.8) !important;
        }
        .toolbar-btn-locked:hover {
            background: rgba(248, 113, 113, 0.18) !important;
            border-color: rgba(248, 113, 113, 0.25) !important;
        }
        
        .toolbar-btn-unlocked {
            background: rgba(74, 222, 128, 0.1) !important;
            border-color: rgba(74, 222, 128, 0.15) !important;
            color: rgba(74, 222, 128, 0.8) !important;
        }
        .toolbar-btn-unlocked:hover {
            background: rgba(74, 222, 128, 0.18) !important;
            border-color: rgba(74, 222, 128, 0.25) !important;
        }
        
        .toolbar-btn-gray {
            pointer-events: auto;
            background: rgba(255, 255, 255, 0.03);
            color: rgba(255, 255, 255, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 5px;
            padding: 5px 11px;
            font-size: 12px;
            font-weight: 400;
            transition: all 0.15s ease;
            cursor: pointer;
        }
        .toolbar-btn-gray:hover {
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.6);
        }
        
        /* Settings/modal button styles - matches BTN_STYLE from Renderer.js */
        /* Must override .authContainer button with higher specificity */

        .settings-section {
            margin-top: 14px;
            padding: 12px;
            background: rgba(0,0,0,0.16);
            border: 1px solid var(--ui-border-faint);
            border-radius: 8px;
        }
        .settings-section-title {
            color: rgba(var(--ui-accent-rgb),0.85);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 10px;
        }
        .settings-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 4px;
            border-bottom: 1px solid var(--ui-border-faint);
            padding-bottom: 0;
        }
        .authContainer .settings-tab-btn {
            flex: 1;
            padding: 8px 4px;
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            border-radius: 0;
            color: var(--ui-text-muted);
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: color 0.15s, border-color 0.15s;
            margin: 0 0 -1px 0;
            outline: none;
        }
        .authContainer .settings-tab-btn:hover { color: var(--ui-text); background: none; border-color: transparent; }
        .authContainer .settings-tab-btn.active { color: var(--ui-text-bright); border-bottom-color: var(--ui-accent); background: none; }
        .authContainer .settings-tab-btn:focus { outline: none; box-shadow: none; }
        .authContainer .settings-tab-btn:focus-visible { outline: none; }
        .settings-tab-panel { display: none; }
        .settings-tab-panel.active { display: block; }
        .settings-hint {
            color: var(--ui-text-muted);
            font-size: 11px;
            margin: 4px 0 0 0;
            line-height: 1.4;
        }

        .place-hint {
            color: rgba(255, 255, 255, 0.35);
            font-size: 10px;
            font-weight: 400;
            margin-left: 4px;
        }
        
        .toolbar-right {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* Hamburger menu - mobile only */
        #hamburgerBtn {
            display: none;
            pointer-events: auto;
            background: var(--ui-toolbar-btn-bg, rgba(var(--ui-primary-rgb), 0.5));
            color: rgba(255, 255, 255, 0.8);
            border: 2px solid var(--ui-border);
            border-radius: 5px;
            padding: 5px 8px;
            font-size: 16px;
            cursor: pointer;
            margin-left: auto;
            line-height: 1;
            transition: all 0.15s ease;
        }

        /* Desktop burger menu - hide old individual buttons, show burger */
        .burger-menu-item { display: none !important; }
        #desktopBurgerWrap { display: inline-block; }

        .desktop-burger-item {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 10px 16px;
            background: none;
            border: none;
            color: rgba(var(--ui-text-rgb), 0.85);
            font-size: 13px;
            cursor: pointer;
            transition: background 0.12s;
            text-align: left;
            white-space: nowrap;
        }
        .desktop-burger-item:hover { background: rgba(var(--ui-accent-rgb), 0.1); }
        .desktop-burger-item:active { transform: scale(0.98); }
        .desktop-burger-item svg { flex-shrink: 0; opacity: 0.7; }
        .desktop-burger-danger { color: rgba(255, 120, 120, 0.85); }
        .desktop-burger-danger:hover { background: rgba(255, 80, 80, 0.15); }
        /* Burger dropdown tooltips: left of dropdown, override toolbar rule */
        #desktopBurgerDropdown .desktop-burger-item[data-tooltip]::after {
            bottom: auto;
            left: auto;
            right: calc(100% + 8px);
            top: 50%;
            transform: translateY(-50%) translateX(4px);
        }
        #desktopBurgerDropdown .desktop-burger-item[data-tooltip]:hover::after {
            transform: translateY(-50%) translateX(0);
            transition-delay: 0.15s;
        }
        #hamburgerBtn:hover { filter: brightness(1.2); border-color: var(--ui-border-accent); box-shadow: 0 0 12px rgba(var(--ui-accent-rgb), 0.45); transform: scale(1.05); }
        #hamburgerBtn.open .hamburger-icon { display: none; }
        #hamburgerBtn.open .close-icon { display: inline; }
        #hamburgerBtn:not(.open) .close-icon { display: none; }
        
        #mobileMenu {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(8, 12, 18, 0.96);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            /* Above the floating canvas UI (FAB, minimap, badges, carousel —
               z-index up to ~1000) so they can't render over the menu and steal
               taps; still below modals (3000+) so menu items can open them.
               The toolbar (#ui) is bumped to 2001 on mobile so the hamburger
               close button stays tappable above the open menu. */
            z-index: var(--z-nav);
            overflow-y: auto;
            padding: 60px 16px 24px;
            animation: mobileMenuIn 0.2s ease;
        }
        #mobileMenu.open { display: block; }
        
        @keyframes mobileMenuIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .mobile-menu-section {
            margin-bottom: 16px;
        }
        .mobile-menu-section-title {
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(var(--ui-accent-rgb), 0.4);
            padding: 0 4px 6px;
        }
        .mobile-menu-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }
        .mobile-menu-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            background: rgba(var(--ui-surface-rgb), 0.4);
            border: 2px solid var(--ui-border);
            border-radius: 8px;
            color: rgba(255, 255, 255, 0.85);
            font-size: 13px;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            text-align: left;
        }
        .mobile-menu-btn:hover {
            background: rgba(40, 70, 90, 0.5);
            border-color: var(--ui-border-accent);
        }
        .mobile-menu-btn:active {
            transform: scale(0.97);
        }
        .mobile-menu-btn svg {
            flex-shrink: 0;
            width: 16px;
            height: 16px;
        }
        .mobile-menu-btn.accent {
            background: rgba(20, 80, 60, 0.4);
            border-color: rgba(45, 212, 191, 0.25);
            color: rgba(125, 211, 200, 0.9);
        }
        .mobile-menu-btn.danger {
            background: rgba(60, 30, 30, 0.3);
            border-color: rgba(239, 68, 68, 0.2);
            color: rgba(248, 113, 113, 0.8);
        }
        .mobile-menu-user {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px;
            background: rgba(20, 40, 60, 0.5);
            border: 2px solid var(--ui-border);
            border-radius: 10px;
            margin-bottom: 16px;
        }
        .mobile-menu-user-name {
            color: var(--ui-text-bright);
            font-size: 14px;
            font-weight: 500;
        }
        .mobile-menu-user-space {
            color: rgba(255, 255, 255, 0.5);
            font-size: 11px;
            margin-top: 2px;
        }
        
        .toolbar-user {
            color: rgba(255, 255, 255, 0.8);
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 5px;
            background: var(--ui-toolbar-btn-bg, rgba(var(--ui-primary-rgb), 0.5));
            border: 2px solid var(--ui-border);
            transition: all 0.15s;
            font-weight: 400;
        }
        .toolbar-user:hover {
            filter: brightness(1.2);
            color: #fff;
            box-shadow: 0 0 12px rgba(var(--ui-accent-rgb), 0.45);
            transform: scale(1.05);
        }
        input { pointer-events: auto; }
        textarea { pointer-events: auto; }
        #nodeInputWrapper {
            position: fixed;
            z-index: var(--z-panel);
            pointer-events: none;
        }
        #nodeInput { 
            background: rgba(30,35,48,0.97);
            border: 2px solid var(--ui-border-accent);
            color: var(--ui-text);
            padding: 9px 8px;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            line-height: 16px;
            border-radius: 8px;
            display: block;
            resize: none;
            overflow: hidden;
            word-break: break-word;
            white-space: pre-wrap;
            box-sizing: border-box;
            outline: none;
            pointer-events: auto;
            box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb),0.1), 0 4px 20px rgba(0,0,0,0.4);
        }
        #nodeCheckboxBtn {
            position: absolute;
            bottom: 100%;
            right: 32px;
            margin-bottom: 4px;
            background: rgba(50,60,75,0.8);
            border: 2px solid var(--ui-border-accent);
            border-radius: 4px;
            font-size: 15px;
            cursor: pointer;
            padding: 2px 5px;
            transition: background 0.2s;
            pointer-events: auto;
            z-index: 1;
            color: var(--ui-text);
        }
        #nodeCheckboxBtn:hover {
            background: rgba(60,80,100,0.9);
        }
        #nodeEmojiBtn {
            position: absolute;
            bottom: 100%;
            right: 0;
            margin-bottom: 4px;
            background: rgba(50,60,75,0.8);
            border: 2px solid var(--ui-border-accent);
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            padding: 2px 5px;
            transition: background 0.2s;
            pointer-events: auto;
            z-index: 1;
            /* The smiley is an SVG on currentColor — without an explicit bright
               color it inherits a dim default and reads as disabled. */
            color: #e8eef4;
        }
        #nodeEmojiBtn:hover {
            background: rgba(60,80,100,0.9);
        }
        #nodeEmojiPicker {
            position: absolute;
            top: 100%;
            right: 0;
            background: rgba(var(--ui-surface-rgb),0.98);
            border: 2px solid var(--ui-border-accent);
            border-radius: 12px;
            padding: 12px;
            max-width: 320px;
            width: 320px;
            max-height: 350px;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
            pointer-events: auto;
            z-index: calc(var(--z-panel) + 1);
            backdrop-filter: blur(12px);
        }
        #nodeEmojiPicker::-webkit-scrollbar,
        .kuukan-emoji-popup::-webkit-scrollbar,
        .ui-autocomplete-dropdown::-webkit-scrollbar { width: 8px; }
        #nodeEmojiPicker::-webkit-scrollbar-track,
        .kuukan-emoji-popup::-webkit-scrollbar-track,
        .ui-autocomplete-dropdown::-webkit-scrollbar-track { background: transparent; }
        #nodeEmojiPicker::-webkit-scrollbar-thumb,
        .kuukan-emoji-popup::-webkit-scrollbar-thumb,
        .ui-autocomplete-dropdown::-webkit-scrollbar-thumb {
            background: rgba(var(--ui-accent-rgb),0.2);
            border-radius: 4px;
        }
        #nodeEmojiPicker::-webkit-scrollbar-thumb:hover,
        .kuukan-emoji-popup::-webkit-scrollbar-thumb:hover,
        .ui-autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
            background: rgba(var(--ui-accent-rgb),0.35);
        }
        .kuukan-emoji-popup .sticker-emoji-pick:hover {
            background: rgba(var(--ui-accent-rgb),0.15);
        }
        #nodeEmojiPicker .emoji-item:hover {
            background: rgba(var(--ui-accent-rgb),0.15);
        }
        /* Chat emoji picker - same style as nodeEmojiPicker */
        #chatEmojiPicker .chat-emoji-category {
            margin-bottom: 8px;
        }
        #chatEmojiPicker .chat-emoji-category-title {
            color: var(--ui-text-muted);
            font-size: 11px;
            margin-bottom: 4px;
            text-transform: uppercase;
        }
        #chatEmojiPicker .chat-emoji-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
        }
        #chatEmojiPicker .chat-emoji-item {
            font-size: 20px;
            padding: 4px;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.15s;
        }
        #chatEmojiPicker .chat-emoji-item:hover {
            background: #444;
        }
        /* Chat teleport links */
        .chat-teleport {
            display: inline-block;
            background: rgba(100, 60, 200, 0.3);
            border: 1px solid rgba(140, 100, 255, 0.4);
            color: #c0a0ff;
            padding: 2px 8px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 500;
            transition: background 0.15s, border-color 0.15s;
        }
        .chat-teleport:hover {
            background: rgba(130, 80, 255, 0.5);
            border-color: rgba(180, 140, 255, 0.6);
            color: #e0d0ff;
        }
        /* CommentBox emoji picker - same style as TextNode */
        .cb-emoji-picker {
            position: absolute;
            bottom: 100%;
            right: 0;
            background: var(--ui-surface-alt);
            border: 2px solid #555;
            border-radius: 8px;
            padding: 8px;
            max-width: 320px;
            max-height: 280px;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        }
        .cb-emoji-category {
            margin-bottom: 8px;
        }
        .cb-emoji-category-title {
            color: var(--ui-text-muted);
            font-size: 11px;
            margin-bottom: 4px;
            text-transform: uppercase;
        }
        .cb-emoji-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
        }
        .cb-emoji-item {
            font-size: 20px;
            padding: 4px;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.15s;
        }
        .cb-emoji-item:hover {
            background: #444;
        }

        /* ========== FLOATING ACTION BUTTONS (CSS hover replaces inline JS) ========== */
        .floating-action-btn {
            position: fixed;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            z-index: 999;
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid transparent;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .floating-action-btn:hover {
            transform: scale(1.1);
        }
        .floating-action-btn:active {
            transform: scale(0.95);
        }
        .floating-action-btn--gold {
            bottom: 84px; left: 20px; width: 46px; height: 46px; font-size: 20px;
            background: linear-gradient(135deg, #8a6a2a, #aa8a3a);
            border-color: rgba(249,202,36,0.4);
        }
        .floating-action-btn--gold:hover {
            box-shadow: 0 6px 25px rgba(138,106,42,0.5);
        }
        .floating-action-btn--blue {
            bottom: 24px; left: 20px; width: 56px; height: 56px; font-size: 24px;
            background: linear-gradient(135deg, #2a6a8a, #3a8aaa);
            border-color: var(--ui-border-accent);
        }
        .floating-action-btn--blue:hover {
            box-shadow: 0 6px 25px rgba(var(--ui-primary-rgb),0.5);
        }

        /* ========== FLOATING ACTION CAROUSEL ========== */
        /* Single ball + side arrows that cycles communication modes
           (Messages / Shout / future). Replaces two separate floating
           buttons; modes are configured in modules/ActionCarousel.js. */
        .fac {
            position: fixed;
            bottom: 24px;
            left: 20px;
            z-index: 999;
            display: flex;
            align-items: center;
            gap: 8px;
            user-select: none;
        }
        .fac-main {
            width: 56px; height: 56px;
            border-radius: 50%;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid transparent;
            background: linear-gradient(135deg, #2a6a8a, #3a8aaa);
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
            overflow: hidden;
            padding: 0;
        }
        .fac-main:hover { transform: scale(1.08); }
        .fac-main:active { transform: scale(0.94); }
        .fac-icon {
            display: inline-block;
            line-height: 1;
        }
        /* Ghost balls — small, faded previews of the prev/next mode.
           Doubles as click target so the user discovers the carousel
           passively (icon visible) and can switch modes by tapping. */
        .fac-ghost {
            width: 32px; height: 32px;
            border-radius: 50%;
            border: 1px solid transparent;
            background: linear-gradient(135deg, #2a6a8a, #3a8aaa);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            opacity: 0.45;
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
        }
        .fac-ghost:hover {
            opacity: 0.95;
            transform: scale(1.12);
            box-shadow: 0 3px 12px rgba(0,0,0,0.4);
        }
        .fac-ghost:active { transform: scale(0.92); }
        .fac-ghost-icon {
            font-size: 14px;
            line-height: 1;
            display: inline-block;
            filter: saturate(0.8);
        }
        /* Touch: ghost balls grow to the 44px target size (32px needs a stylus) */
        @media (pointer: coarse) {
            .fac-ghost { width: 44px; height: 44px; }
            .fac-ghost-icon { font-size: 18px; }
        }
        .fac-dots {
            position: absolute;
            bottom: -10px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 4px;
            pointer-events: none;
        }
        .fac-dot {
            width: 4px; height: 4px;
            border-radius: 50%;
            background: rgba(255,255,255,0.25);
            transition: background 0.2s ease, transform 0.2s ease;
        }
        .fac-dot-active {
            background: rgba(255,255,255,0.85);
            transform: scale(1.3);
        }
        .fac-tooltip {
            position: absolute;
            left: calc(100% + 12px);
            top: 50%;
            transform: translateY(-50%) translateX(-4px);
            background: rgba(var(--ui-surface-rgb),0.92);
            color: #cfd8e0;
            font-size: 11px;
            padding: 4px 8px;
            border-radius: 4px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s ease, transform 0.15s ease;
            border: 2px solid var(--ui-border);
        }
        .fac:hover .fac-tooltip {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }
        /* Unread state — pulse the ball when there are pending requests/messages */
        .fac.fac-unread .fac-main {
            animation: facUnreadPulse 1.4s ease-in-out infinite;
            border-color: #ff4757 !important;
        }
        @keyframes facUnreadPulse {
            0%, 100% { box-shadow: 0 4px 20px rgba(255,71,87,0.45); }
            50%      { box-shadow: 0 4px 26px rgba(255,71,87,0.85); }
        }

        /* Voice-active indicator — small mic dot pinned to the main ball when
           the user is in voice chat. Visible no matter which carousel mode is
           shown so you can tell the mic is hot even with the chat panel closed.
           Anchored to .fac (not .fac-main which has overflow:hidden) and
           absolutely positioned to overlap the main ball's bottom-right. */
        .fac-voice-indicator {
            position: absolute;
            left: 42px; bottom: -2px;
            width: 22px; height: 22px;
            border-radius: 50%;
            background: #2a8a4a;
            border: 2px solid #0f1320;
            display: none;
            align-items: center; justify-content: center;
            font-size: 12px;
            z-index: 2;
            pointer-events: none;
            box-shadow: 0 0 0 0 rgba(64,200,120,0.7);
        }
        .fac[data-voice-active="true"] .fac-voice-indicator {
            display: flex;
            animation: facVoicePulse 1.6s ease-in-out infinite;
        }
        @keyframes facVoicePulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(64,200,120,0.65); }
            50%      { box-shadow: 0 0 0 7px rgba(64,200,120,0); }
        }

        /* ========== CREATE FAB (mobile) ========== */
        #createFAB {
            position: fixed;
            bottom: calc(24px + env(safe-area-inset-bottom, 0px)); right: 20px;
            width: 56px; height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1a5a6a, #2a8a9a);
            border: 2px solid var(--ui-border-accent);
            color: #fff;
            font-size: 28px;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: calc(var(--z-panel) + 1);
            box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 0 rgba(var(--ui-accent-rgb),0);
            transition: transform 0.25s ease, box-shadow 0.2s ease, background 0.2s ease;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        #createFAB:active { transform: scale(0.92); }
        #createFAB.open {
            transform: rotate(45deg);
            background: linear-gradient(135deg, #6a2a2a, #9a3a3a);
            border-color: rgba(255, 120, 100, 0.35);
        }
        #createFAB .fab-plus { pointer-events: none; line-height: 1; }

        #fabBackdrop {
            position: fixed; inset: 0; z-index: var(--z-panel);
            background: rgba(0,0,0,0.3);
            opacity: 0; pointer-events: none;
            transition: opacity 0.2s ease;
        }
        #fabBackdrop.show { opacity: 1; pointer-events: auto; }

        #fabItemsRing {
            position: fixed;
            bottom: 90px; right: 20px;
            display: flex; flex-direction: column-reverse;
            gap: 10px;
            z-index: calc(var(--z-panel) + 1);
            opacity: 0;
            transform: translateY(16px);
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }
        #fabItemsRing.show {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .fab-item {
            display: flex; align-items: center; gap: 10px;
            background: rgba(var(--ui-surface-rgb), 0.95);
            backdrop-filter: blur(12px);
            border: 2px solid var(--ui-border-accent);
            border-radius: 28px;
            padding: 10px 16px 10px 12px;
            min-height: 44px; box-sizing: border-box;
            color: var(--ui-text-bright);
            font-size: 13px; font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(0,0,0,0.4);
            transition: transform 0.15s ease, background 0.15s ease;
            white-space: nowrap;
            -webkit-tap-highlight-color: transparent;
        }
        .fab-item:active { transform: scale(0.95); background: rgba(var(--ui-primary-rgb), 0.95); }
        .fab-item-icon { font-size: 20px; width: 24px; text-align: center; }

        /* ========== DESKTOP QUICK-CREATE BAR (hidden — use right-click to create) ========== */
        #quickCreateBar {
            display: none;
            align-items: center;
            gap: 2px;
            margin-left: 2px;
        }
        #quickCreateBar .qc-btn {
            background: rgba(20, 40, 55, 0.6);
            border: 2px solid var(--ui-border);
            border-radius: 6px;
            padding: 4px 7px;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.15s ease;
            line-height: 1;
            -webkit-tap-highlight-color: transparent;
        }
        #quickCreateBar .qc-btn:hover {
            background: rgba(var(--ui-primary-rgb), 0.7);
            border-color: var(--ui-border-accent);
            box-shadow: 0 2px 10px rgba(var(--ui-accent-rgb), 0.1);
        }
        #quickCreateBar .qc-btn:active { transform: scale(0.93); }
        #quickCreateBar .qc-more-toggle {
            font-size: 16px;
            font-weight: bold;
            color: rgba(var(--ui-text-rgb), 0.7);
            min-width: 28px;
            text-align: center;
        }
        #quickCreateBar .qc-overflow {
            display: none;
            gap: 2px;
            align-items: center;
            animation: qcSlideIn 0.15s ease;
        }
        #quickCreateBar .qc-overflow.show {
            display: flex;
        }
        @keyframes qcSlideIn {
            from { opacity: 0; transform: translateX(-6px); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* ========== CLOSE BUTTON HOVER (subtle × buttons) ========== */
        .close-btn-subtle {
            position: absolute; top: 2px; right: 4px;
            background: none; border: none;
            color: rgba(var(--ui-text-rgb),0.35);
            font-size: 14px; cursor: pointer;
            padding: 2px 4px; line-height: 1;
            transition: color 0.15s, transform 0.15s;
        }
        .close-btn-subtle:hover {
            color: rgba(var(--ui-text-rgb),0.8);
            transform: scale(1.2);
        }

        /* Panel close buttons (messages, activity, etc.) */
        .panel-close-btn {
            background: none; border: none;
            color: var(--ui-text-muted); font-size: 16px;
            cursor: pointer; padding: 2px 6px;
            border-radius: 4px;
            transition: color 0.15s, background 0.15s;
        }
        .panel-close-btn:hover {
            color: #b2dcf0;
            background: rgba(var(--ui-accent-rgb), 0.12);
        }
        .panel-close-btn:active {
            transform: scale(0.9);
        }

        /* ========== BREADCRUMB NAVIGATION (replaces exit subspace button) ========== */
        .breadcrumb-nav {
            position: fixed; top: calc(var(--toolbar-height) + 8px); left: 18px;
            display: flex; align-items: center; gap: 0;
            background: rgba(12, 20, 30, 0.85);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 2px solid var(--ui-border);
            border-radius: 8px;
            padding: 5px 10px;
            z-index: 100;
            box-shadow: 0 4px 16px rgba(0,0,0,0.3);
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            max-width: calc(100vw - 36px);
            overflow-x: auto;
            scrollbar-width: none;
        }
        .breadcrumb-nav::-webkit-scrollbar { display: none; }
        .bc-item {
            color: rgba(var(--ui-text-rgb), 0.5);
            padding: 3px 6px;
            border-radius: 4px;
            cursor: pointer;
            white-space: nowrap;
            transition: color 0.15s, background 0.15s;
            text-decoration: none;
            border: none; background: none;
            font: inherit;
        }
        .bc-item:hover {
            color: rgba(var(--ui-text-rgb), 0.9);
            background: rgba(var(--ui-accent-rgb), 0.1);
        }
        .bc-item.bc-current {
            color: rgba(var(--ui-text-rgb), 0.85);
            font-weight: 600;
            cursor: default;
        }
        .bc-item.bc-current:hover { background: none; }
        .bc-sep {
            color: rgba(var(--ui-accent-rgb), 0.2);
            font-size: 10px;
            padding: 0 2px;
            user-select: none;
        }
        @media (max-width: 768px) {
            .breadcrumb-nav { top: calc(var(--toolbar-height) + 4px); left: 8px; max-width: calc(100vw - 16px); font-size: 11px; }
        }

        /* ========== DM BACK BUTTON ========== */
        .dm-back-btn {
            width: 28px; height: 28px;
            padding: 0;
            background: rgba(var(--ui-teal-rgb),0.10);
            border: 1px solid rgba(var(--ui-teal-rgb),0.25);
            border-radius: 50%;
            color: var(--ui-text-bright);
            font-size: 16px;
            font-weight: 600;
            line-height: 1;
            cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
            transition: background 0.15s, transform 0.15s, border-color 0.15s;
        }
        .dm-back-btn:hover {
            background: rgba(var(--ui-teal-rgb),0.22);
            border-color: rgba(var(--ui-teal-rgb),0.5);
            transform: translateX(-1px);
        }
        .dm-back-btn:active { transform: translateX(-1px) scale(0.95); }

        /* ========== BOOKMARK ADD BUTTON ========== */
        .bookmark-add-btn {
            width: 100%; padding: 8px 10px;
            background: rgba(120,80,200,0.2);
            border: 1px solid rgba(160,120,255,0.3);
            border-radius: 6px;
            color: #c0a0ff; font-size: 12px; font-weight: 600;
            cursor: pointer; margin-bottom: 10px;
            transition: background 0.15s, transform 0.15s;
        }
        .bookmark-add-btn:hover { background: rgba(120,80,200,0.35); }
        .bookmark-add-btn:active { transform: scale(0.97); }

        /* ========== 3D CAPTURE BUTTON ========== */
        .capture-3d-btn {
            background: rgba(var(--ui-primary-rgb), 0.4);
            color: rgba(255, 255, 255, 0.75);
            border: 2px solid var(--ui-border);
            border-radius: 6px;
            padding: 5px 12px; font-size: 13px;
            cursor: pointer; white-space: nowrap;
            transition: all 0.15s ease;
        }
        .capture-3d-btn:hover {
            background: rgba(40, 80, 100, 0.6);
            border-color: var(--ui-border-accent);
            color: #fff;
        }
        .capture-3d-btn:active { transform: scale(0.97); }
        /* The amber Render button sets its background INLINE (resting amber / active
           Stop-red), which overrides the generic :hover background. A brightness filter
           brightens whatever colour it currently is, so the hover reads in BOTH states. */
        #pt-sidebar-render:hover { filter: brightness(1.4); }

        /* PT Tool Panel (amber variant of kuukan-panel--edit) */
        .kuukan-panel--pt {
            background: linear-gradient(135deg, #1a1408, #2a1e10);
            border-color: rgba(224,160,64,0.25);
            box-shadow: 0 8px 32px rgba(120,80,20,0.4);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 240px;
            padding: 16px;
            z-index: calc(var(--z-lightbox) + 1);
            overflow-y: auto;
            max-height: 80vh;
        }
        #ptPropertiesPanel::-webkit-scrollbar { width: 4px; }
        #ptPropertiesPanel::-webkit-scrollbar-track { background: transparent; }
        #ptPropertiesPanel::-webkit-scrollbar-thumb { background: rgba(224,160,64,0.2); border-radius: 2px; }
        #ptPropertiesPanel::-webkit-scrollbar-thumb:hover { background: rgba(224,160,64,0.4); }
        #ptPropertiesPanel { scrollbar-width: thin; scrollbar-color: rgba(224,160,64,0.2) transparent; }
        #ptPropertiesPanel input[type="range"] { height: 4px; }

        /* ========== BURGER DROPDOWN ANIMATION ========== */
        #desktopBurgerDropdown {
            transform-origin: top right;
        }
        #desktopBurgerDropdown.open {
            display: block !important;
            animation: burgerDropdownIn 0.15s ease-out forwards;
        }
        #desktopBurgerDropdown.closing {
            animation: burgerDropdownOut 0.12s ease-in forwards;
        }

        /* ========== KUUKAN UNIFIED MODAL SYSTEM ========== */
        
        /* Fullscreen overlay base */
        .kuukan-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.7);
            justify-content: center;
            align-items: center;
            /* Above the GameZone stack (diorama 2100 / game bar 2200 / rules
               panel 2300) — a modal prompt must never sink behind a game. */
            z-index: var(--z-modal);
        }
        /* Overlay backdrop blur variant (utility dialogs) */
        .kuukan-overlay--blur {
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        /* Centered dialog content box */
        .kuukan-dialog {
            background: rgba(14,22,32,0.92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 2px solid var(--ui-border);
            border-radius: 12px;
            padding: 24px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
            animation: modalContentIn 0.25s ease;
        }
        /* Dialog size variants */
        .kuukan-dialog--sm  { max-width: 380px; }
        .kuukan-dialog--md  { max-width: 450px; }
        .kuukan-dialog--lg  { max-width: 520px; }
        .kuukan-dialog--xl  { max-width: 600px; }
        /* Scrollable dialog */
        .kuukan-dialog--scroll {
            max-height: 80vh;
            overflow-y: auto;
        }
        /* Theme: Purple (admin) */
        .kuukan-dialog--purple {
            background: rgba(22,14,32,0.92);
            border-color: rgba(200,100,255,0.15);
        }
        /* Theme: Green (confirm/prompt) */
        .kuukan-dialog--green {
            background: linear-gradient(135deg, #0a1210, #121e18);
            border-color: rgba(160,201,8,0.3);
            box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 40px rgba(160,201,8,0.1);
        }
        /* Theme: Cyan (AI) */
        .kuukan-dialog--cyan {
            background: linear-gradient(135deg, #0a1220, #142030);
            border-color: var(--ui-border-accent);
            box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 40px rgba(var(--ui-accent-rgb),0.1);
        }

        /* Fullscreen media viewer */
        .kuukan-viewer {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.95);
            justify-content: center;
            align-items: center;
        }
        .kuukan-viewer.active {
            display: flex;
            animation: modalFadeIn 0.2s ease;
        }
        .kuukan-viewer.show {
            display: flex !important;
            animation: modalFadeIn 0.2s ease;
        }

        /* Floating panel */
        .kuukan-panel {
            display: none;
            position: fixed;
            background: rgba(var(--ui-surface-rgb),0.97);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 2px solid var(--ui-border);
            border-radius: 12px;
            z-index: calc(var(--z-panel) + 1);
            font-family: 'Inter', sans-serif;
            box-shadow: 0 4px 30px rgba(0,0,0,0.5);
        }
        /* Panel theme: Gold (shout) */
        .kuukan-panel--gold {
            background: rgba(25,22,15,0.95);
            border-color: rgba(249,202,36,0.3);
            z-index: 999;
        }
        /* Panel theme: Purple (bookmarks) */
        .kuukan-panel--purple {
            border-color: rgba(160,120,255,0.2);
        }
        /* Panel variant: Edit panel (grade/image effects) */
        .kuukan-panel--edit {
            background: linear-gradient(135deg, #1a1a2a, #2a2a4a);
            border-color: #5a4a8a;
            box-shadow: 0 8px 32px rgba(80,40,120,0.4);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 240px;
            padding: 16px;
        }

        /* ========== END KUUKAN MODAL SYSTEM ========== */

        #imageViewer {
            z-index: var(--z-nav);
        }
        #imageViewer.active {
            display: flex;
            animation: modalFadeIn 0.2s ease;
        }
        #imageViewer img {
            max-width: 90%;
            max-height: 90%;
            border-radius: 8px;
            user-select: none;
            -webkit-user-select: none;
            pointer-events: none;
        }
        #imageViewer .close {
            position: absolute;
            top: 20px;
            right: 20px;
            color: var(--ui-text);
            font-size: 32px;
            cursor: pointer;
            user-select: none;
            pointer-events: auto;
        }
        #imageViewer .close:hover {
            color: #ffff00;
        }
        #object3dViewer {
            z-index: var(--z-org-modal);
        }
        #object3dViewer.active {
            display: flex;
            animation: modalFadeIn 0.2s ease;
        }
        #object3dViewer .close {
            position: absolute;
            top: 20px;
            right: 20px;
            color: var(--ui-text);
            font-size: 32px;
            cursor: pointer;
            user-select: none;
            pointer-events: auto;
        }
        #object3dViewer .close:hover {
            color: #ffff00;
        }
        #threeContainer {
            width: 80vw;
            height: 80vh;
            background: #222;
            border-radius: 12px;
            box-shadow: 0 0 32px #000;
        }
        /* 3D Object Viewer Modal */
        #modal-3d {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 690px;
            height: 690px;
            background: linear-gradient(180deg, #3b3b3b 0%, #0d0d0d 100%);
            z-index: var(--z-lightbox);
            overflow: visible;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
            border: 2px solid var(--ui-border);
        }
        #modal-3d.show {
            display: block;
            animation: modalContentIn 0.25s ease;
        }
        #modal-3d-content {
            width: 100%;
            height: 100%;
            background: transparent;
            overflow: hidden;
            display: block;
            position: relative;
            top: 0;
            left: 0;
        }
        
        /* Mobile responsive styles */
        @media (max-width: 768px) {
            /* Show hamburger, hide most toolbar items */
            #hamburgerBtn { display: flex !important; align-items: center; }
            
            /* Toolbar: only show logo, essential buttons, hamburger */
            #ui { padding: 6px 10px !important; z-index: calc(var(--z-nav) + 1) !important; } /* keep toolbar (hamburger close) above the open mobile menu (z-index 2000) */
            .toolbar-container {
                flex-wrap: nowrap !important;
                gap: 4px !important;
            }
            .toolbar-logo { margin-right: 6px; }
            .toolbar-logo img { height: 26px; }
            .toolbar-divider { display: none !important; }
            
            /* Hub button is icon-only everywhere now — nothing to toggle. */

            /* Hide most toolbar buttons - they go in hamburger menu */
            #searchBtn, #shareToggleBtn, #snapGridBtn, #helpBtn,
            #itemsBtn, #toggle3DBtn, #adminModeBtn, #adminPanelBtn,
            #downloadBtn, .toolbar-right, #quickCreateBar { display: none !important; }

            /* Show mobile create FAB */
            #createFAB { display: flex !important; }
            
            /* Desktop burger hidden on mobile (mobile menu takes over) */
            #desktopBurgerWrap { display: none !important; }
            
            /* Keep: globalSpaceBtn visible */
            #globalSpaceBtn {
                padding: 6px 8px !important;
            }
            
            /* Hide old userDisplay entirely */
            #userDisplay { display: none !important; }
            
            #placeHint { display: none !important; }
            
            /* Toggle mobile/desktop hints in empty state */
            .desktop-hint { display: none !important; }
            .mobile-hint { display: inline-block !important; }

            #nodeInput {
                width: 200px !important;
                font-size: 14px !important;
            }
            
            /* 3D Modal - full screen on mobile */
            #modal-3d {
                width: 95vw;
                height: 80vh;
                max-width: none;
                border-radius: 8px;
            }
            /* 3D toolbar - compact for tablet */
            #3d-bottom-toolbar {
                max-width: 95%;
            }
            #3d-bottom-toolbar > div:first-child {
                padding: 6px 10px !important;
                gap: 6px !important;
            }
            #3d-bottom-toolbar input[type="range"] {
                width: 120px !important;
            }
            #rt-settings-panel {
                padding: 8px 10px !important;
            }
            #rt-settings-panel input[type="range"] {
                width: 70px !important;
            }
            
            /* Video modal - better sizing */
            #video-container {
                width: 95vw !important;
                max-width: none !important;
            }
            #fullscreen-video {
                max-width: 95vw !important;
                max-height: 70vh !important;
            }
            #video-close-btn {
                top: -30px !important;
                font-size: 12px !important;
                padding: 4px 8px !important;
            }
            
            #locationContainer {
                top: 50px !important;
                right: 8px !important;
            }
            #locationDisplay {
                width: 80px !important;
                font-size: 10px !important;
                padding: 4px 6px !important;
            }
            .location-btn {
                padding: 4px 6px !important;
                font-size: 10px !important;
            }
        }
        
        /* Extra small screens (phones) */
        @media (max-width: 480px) {
            #modal-3d {
                width: 100vw;
                height: 70vh;
                border-radius: 0;
                top: auto;
                bottom: 0;
                transform: translate(-50%, 0);
            }
            /* Toolbar: compact single row */
            #3d-bottom-toolbar {
                width: calc(100% - 16px);
                max-width: none;
                bottom: 6px !important;
                left: 8px !important;
                transform: none !important;
            }
            #3d-bottom-toolbar > div:first-child {
                padding: 5px 8px !important;
                gap: 4px !important;
                flex-wrap: wrap;
                justify-content: center;
            }
            #3d-bottom-toolbar input#object-rotation-slider {
                width: 80px !important;
            }
            #3d-bottom-toolbar .capture-3d-btn {
                padding: 3px 6px !important;
                font-size: 10px !important;
            }
            #3d-bottom-toolbar span[style*="color:var(--ui-text-muted)"] {
                display: none;
            }
            #3d-bottom-toolbar span[style*="color:#444"] {
                display: none;
            }
            #rotation-value {
                display: none;
            }
            /* Flip advanced panel to open ABOVE toolbar on phones */
            #rt-settings-panel {
                top: auto !important;
                bottom: calc(100% + 4px) !important;
                padding: 8px 10px !important;
                max-height: 40vh;
                overflow-y: auto;
            }
            #rt-settings-panel input[type="range"] {
                width: 65px !important;
            }
            #rt-settings-panel input[type="color"] {
                width: 20px !important;
                height: 16px !important;
            }
            .capture-3d-btn {
                padding: 4px 8px !important;
                font-size: 11px !important;
            }
            
            #fullscreen-video {
                max-height: 60vh !important;
            }
        }
        
        /* Mobile only - messages panel full width at bottom */
        @media (max-width: 768px) {
            #nodeCommentsPanel {
                top: auto !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                height: 50vh !important;
                border-radius: 12px 12px 0 0 !important;
                padding-bottom: env(safe-area-inset-bottom, 0px) !important; /* clear iOS home indicator */
            }
            
            #usersInSpace {
                top: 60px !important;
                right: 10px !important;
                max-height: 120px !important;
            }
            
            #floatingActionCarousel {
                /* Lift clear of the Android gesture/nav strip + iOS home indicator,
                   otherwise the bottom of the ball sits in the OS-intercepted zone
                   and is very hard to tap. */
                bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
                left: 10px !important;
            }
            /* Mobile: chat panel covers bottom half — hide carousel + FAB so
               nothing overlaps the Send button. */
            body.chat-panel-open #floatingActionCarousel,
            body.chat-panel-open #createFAB {
                display: none !important;
            }

            #floatingChatBadge {
                bottom: 56px !important;
                left: 86px !important;
            }
            #floatingNotifBadge {
                bottom: 74px !important;
                left: 68px !important;
            }
            #notificationsPanel {
                left: 10px !important;
                width: calc(100vw - 20px) !important;
            }

        }
        
        /* Image and Video Viewer Modals */
        #modal-image.show,
        #modal-video.show {
            display: flex !important;
            animation: modalFadeIn 0.2s ease;
        }
        
        /* Hide Chrome's picture-in-picture and other overlay buttons on video */
        video::-webkit-media-controls-overlay-enclosure,
        video::-webkit-media-controls-enclosure {
            overflow: hidden;
        }
        video::-webkit-media-controls-panel {
            width: calc(100% + 30px); /* Hides overflow buttons */
        }
        /* Firefox */
        video::-moz-media-controls {
            overflow: hidden;
        }
        
        /* Avatar Picker Modal */
        #avatarPickerModal {
            z-index: calc(var(--z-lightbox) - 1);
            background: rgba(0, 0, 0, 0.8);
        }
        #avatarPickerModal.active {
            display: flex;
            animation: modalFadeIn 0.2s ease;
        }
        #avatarPickerModal.active > div {
            animation: modalContentIn 0.25s ease;
        }
        #avatarPickerModal ::-webkit-scrollbar { width: 6px; }
        #avatarPickerModal ::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb), 0.4); border-radius: 3px; }
        #avatarPickerModal ::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb), 0.3); border-radius: 3px; }
        #avatarPickerModal ::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb), 0.5); }
        #avatarPickerModal * { scrollbar-width: thin; scrollbar-color: rgba(var(--ui-accent-rgb), 0.3) rgba(var(--ui-surface-rgb), 0.4); }

        /* Match the rest of Kuukan: buttons inside User Settings brighten on hover.
           Inline styles dominate, so we go via filter (which always wins for contrast). */
        #avatarPickerModal button { transition: filter 0.15s ease, transform 0.1s ease; }
        #avatarPickerModal button:not(:disabled):hover { filter: brightness(1.2); }
        #avatarPickerModal button:not(:disabled):active { transform: scale(0.97); }

        /* Plan cards on Plans page — make the whole card feel interactive when there's an Upgrade button.
           Inline styles always win over CSS rules, so we hover via `filter` which is independent. */
        .plan-card { transition: filter 0.15s ease, transform 0.15s ease; }
        .plan-card:has([data-plan-action]) { cursor: pointer; }
        .plan-card:has([data-plan-action]):hover { filter: brightness(1.3); transform: translateY(-1px); }

        /* Credit packs */
        .credit-pack { transition: filter 0.15s ease, transform 0.15s ease; }
        .credit-pack:hover { filter: brightness(1.3); transform: translateY(-1px); }

        /* Login/Register Modal */
        #authModal {
            z-index: var(--z-modal);
            background: rgba(0, 0, 0, 0.8);
        }
        #authModal.active,
        #forgotPasswordModal.active,
        #resetPasswordModal.active {
            display: flex;
            animation: modalFadeIn 0.2s ease;
        }
        /* ═══ Landing Page ═══ */
        #landingPage {
            position: fixed; inset: 0; z-index: var(--z-modal-2);
            background: linear-gradient(180deg, #0e2a2c 0%, #050505 100%);
            font-family: 'Inter', sans-serif;
            overflow-y: auto;
            scroll-behavior: smooth;
            /* Offset anchor jumps so the target doesn't slide under the sticky nav */
            scroll-padding-top: 80px;
            /* Custom scrollbar — teal-tinted, thin, matches Kuukan theme */
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--ui-teal-rgb),0.35) rgba(15,25,32,0.4);
            /* Mobile-friendly snap: swipes settle at section starts. Desktop
               wheel uses a JS handler that jumps section-by-section. */
            /* scroll-snap removed — JS section-snap handler manages wheel/swipe
               and CSS snap was tugging against programmatic scrollTo */
        }
        #landingPage::-webkit-scrollbar { width: 10px; }
        #landingPage::-webkit-scrollbar-track {
            background: rgba(15,25,32,0.4);
        }
        #landingPage::-webkit-scrollbar-thumb {
            background: rgba(var(--ui-teal-rgb),0.3);
            border-radius: 6px;
            border: 2px solid rgba(15,25,32,0.5);
        }
        #landingPage::-webkit-scrollbar-thumb:hover {
            background: rgba(var(--ui-teal-rgb),0.55);
        }
        /* Ambient portal canvas — same shader as Kuukan, a few orbs drifting
           in the background. Constrained to the hero viewport so they feel
           like accents rather than wallpaper. */
        .lp-portals-canvas {
            position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
            pointer-events: none;
            opacity: 0.45;
            z-index: 0;
        }
        /* Grid overlay — rounded squares like the canvas grid */
        .lp-grid {
            position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='0' y='0' width='60' height='60' rx='16' ry='16' fill='none' stroke='rgba(22,110,110,0.55)' stroke-width='1'/%3E%3C/svg%3E");
            background-size: 60px 60px;
            mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.8) 0%, transparent 60%);
            -webkit-mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.8) 0%, transparent 60%);
            pointer-events: none;
            z-index: 0;
        }
        /* Sticky top nav */
        .lp-nav {
            position: sticky; top: 0;
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 28px;
            background: rgba(10,22,28,0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--ui-border-faint);
            z-index: 10;
        }
        .lp-nav-brand {
            display: flex; align-items: center; gap: 10px;
            color: var(--ui-text); font-weight: 600; font-size: 16px;
            cursor: pointer; text-decoration: none;
        }
        .lp-nav-brand img { height: 28px; width: auto; }
        .lp-nav-anchors { display: flex; gap: 28px; }
        .lp-nav-anchors a {
            color: rgba(var(--ui-text-rgb),0.65);
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            transition: color 0.15s;
        }
        .lp-nav-anchors a:hover { color: var(--ui-text-bright); }
        .lp-nav-cta { display: flex; gap: 10px; align-items: center; }
        .lp-nav-btn {
            padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
            cursor: pointer; font-family: 'Inter', sans-serif;
            transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
        }
        .lp-nav-ui-btn ui-btn-ghost {
            background: transparent;
            color: rgba(var(--ui-text-rgb),0.85);
            border: 2px solid var(--ui-border-accent);
        }
        .lp-nav-ui-btn ui-btn-ghost:hover { background: rgba(var(--ui-accent-rgb),0.06); color: var(--ui-text-bright); }
        .lp-nav-ui-btn ui-btn-success {
            background: linear-gradient(135deg, rgba(var(--ui-primary-rgb),0.9), rgba(20,70,90,1));
            color: var(--ui-text-bright);
            border: 2px solid var(--ui-border-accent);
        }
        .lp-nav-ui-btn ui-btn-success:hover { filter: brightness(1.2); }
        @media (max-width: 768px) {
            /* Nav fixed so it doesn't scroll away */
            .lp-nav {
                position: fixed; top: 0; left: 0; right: 0;
                padding: 10px 16px;
            }
            .lp-nav-anchors { display: none; }
            .lp-nav-btn { padding: 7px 12px; font-size: 12px; }
            .lp-nav-brand span { display: none; }

            /* Vertical snap — sections scroll downward one at a time */
            #landingPage {
                scroll-snap-type: y mandatory;
                scroll-behavior: auto;
                scroll-padding-top: 0;
                scrollbar-width: none;
            }
            #landingPage::-webkit-scrollbar { display: none; }

            /* border-box so padding doesn't add to width — fixes horizontal overflow */
            .lp-content { padding: 0 20px; box-sizing: border-box; }

            /* Each section fills the screen and snaps into place */
            .lp-section {
                scroll-snap-align: start;
                min-height: 100vh; min-height: 100dvh;
                padding: 58px 0 16px;
                box-sizing: border-box;
                display: flex; flex-direction: column; justify-content: center;
                scroll-margin-top: 0;
            }
            .lp-section:first-of-type { padding-top: 58px; }

            /* Section dots — right-side progress indicator */
            .lp-dots { display: flex; }

            /* Compact sizing for portrait */
            .lp-logo { max-width: 220px; }
            .lp-tagline { font-size: 18px; }
            .lp-subtagline { font-size: 14px; }
            .lp-hero { margin-bottom: 12px; }
            .lp-hero-card { padding: 28px 20px 24px; border-radius: 18px; }

            .lp-section h2 { font-size: 19px; margin-bottom: 8px; }
            .lp-section-label { font-size: 10px; margin-bottom: 8px; }
            .lp-section-body { font-size: 13px; margin-bottom: 12px; }

            .lp-actions { margin-bottom: 10px; gap: 8px; }
            .lp-btn { padding: 11px 20px; font-size: 13px; }

            .lp-features { gap: 8px; margin-bottom: 12px; }
            .lp-feature { padding: 12px 10px; }

            .lp-usecases-split { gap: 10px; }
            .lp-uc-card { padding: 18px 16px; }
            .lp-uc-icon { width: 50px; height: 50px; margin-bottom: 10px; }
            .lp-uc-label { font-size: 10.5px; margin-bottom: 12px; letter-spacing: 1.6px; }
            .lp-uc-badges { gap: 6px; margin-bottom: 14px; }
            .lp-uc-badge { padding: 5px 10px; font-size: 11.5px; }
            .lp-uc-tagline { font-size: 12.5px; margin-bottom: 12px; }

            .lp-teams-checklist { margin: 10px 0 14px; }
            .lp-teams-checklist li { font-size: 13px; padding: 4px 0; }
            .lp-teams-mockup { padding: 14px; }
        }

        /* Dots — hidden on desktop, shown on mobile via media query above */
        .lp-dots {
            display: none;
            position: fixed; right: 10px; top: 50%; transform: translateY(-50%);
            flex-direction: column; gap: 7px; z-index: 15;
            pointer-events: none;
        }
        .lp-dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: rgba(var(--ui-text-rgb),0.25);
            transition: background 0.25s, transform 0.25s;
        }
        .lp-dot.active {
            background: rgba(var(--ui-teal-rgb),0.9);
            transform: scale(1.4);
        }
        .lp-content {
            position: relative; z-index: 1;
            max-width: 720px; width: 100%; margin: 0 auto;
            padding: 0 24px 32px;
            text-align: center;
        }
        /* Section rhythm — generous breathing room between sections gives
           the page the "scroll-y modern landing" feel instead of crammed.
           scroll-margin-top ensures anchor jumps don't land under the nav. */
        .lp-section {
            padding: 60px 0 40px;
            scroll-margin-top: 80px;
        }
        .lp-section:first-of-type { padding-top: 80px; }
        .lp-scroll-hint {
            position: relative; z-index: 1;
            margin-top: 32px;
            display: flex; justify-content: center;
            color: rgba(255,255,255,0.28);
            cursor: pointer;
            animation: lpScrollBounce 2.2s ease-in-out infinite;
        }
        .lp-scroll-hint:hover { color: rgba(255,255,255,0.55); }
        @keyframes lpScrollBounce {
            0%, 100% { transform: translateY(0); opacity: 0.28; }
            50%       { transform: translateY(9px); opacity: 0.55; }
        }
        .lp-section-label {
            color: rgba(var(--ui-teal-rgb),0.85);
            font-size: 11px; font-weight: 600;
            letter-spacing: 2px; text-transform: uppercase;
            margin-bottom: 12px;
        }
        .lp-section h2 {
            color: var(--ui-text); font-size: 26px; font-weight: 600;
            margin: 0 0 14px; line-height: 1.25;
        }
        .lp-section-body {
            color: rgba(var(--ui-text-rgb),0.7);
            font-size: 15px; line-height: 1.6;
            max-width: 540px; margin: 0 auto 24px;
        }
        .lp-hero { margin-bottom: 28px; }
        /* Shared wrapper — guarantees hero card and preview are identical width */
        .lp-hero-wrapper {
            width: 100%;
            max-width: 620px;
            margin: 0 auto;
        }
        /* Frosted hero card — wraps logo + taglines + action buttons. Same
           glass treatment as the other landing cards but with extra padding
           and a soft outer teal halo to feel "premium" rather than boxed in. */
        .lp-hero-card {
            position: relative;
            width: 100%;
            max-width: 620px;
            margin-left: auto;
            margin-right: auto;
            box-sizing: border-box;
            padding: 48px 40px 36px;
            border-radius: 24px;
            background: rgba(15,25,32,0.5);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 2px solid var(--ui-border);
            box-shadow:
                0 24px 80px rgba(0, 0, 0, 0.45),
                0 0 80px rgba(var(--ui-teal-rgb), 0.12);
        }
        .lp-logo {
            display: block;
            max-width: 360px;
            width: 100%;
            height: auto;
            margin: 0 auto 12px;
        }
        .lp-tagline {
            font-size: 19px; color: rgba(220,240,255,0.9);
            margin: 0; font-weight: 500; letter-spacing: 0.2px;
        }
        .lp-subtagline {
            /* This line IS the promise now — it carries the pitch, so it
               reads as a statement, not a caption. */
            font-size: 17px; color: rgba(205,235,250,0.88);
            margin: 10px 0 0; font-weight: 500; line-height: 1.45;
        }
        .lp-features {
            display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
            margin-bottom: 32px;
        }
        /* Preview card — rotating screenshots with subtle pan (Ken Burns).
           Five images crossfade every ~5.5s. Hover pauses both fade and pan
           so the user can pause to look. Pure decoration: no click action. */
        .lp-preview {
            position: relative;
            width: 100%;
            max-width: 620px;
            margin: 12px auto 0;
            box-sizing: border-box;
            aspect-ratio: 16 / 8;
            border-radius: 14px;
            overflow: hidden;
            border: 2px solid var(--ui-border);
            box-shadow: 0 24px 60px rgba(0,0,0,0.5);
            background: rgba(15,25,32,0.5);
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .lp-preview:hover {
            border-color: rgba(var(--ui-teal-rgb),0.55);
            box-shadow: 0 14px 40px rgba(var(--ui-teal-rgb),0.32);
        }
        .lp-preview-img {
            position: absolute;
            inset: 0;
            background-size: 160%;
            background-repeat: no-repeat;
            background-position-x: 0%;
            background-position-y: 35%;
            opacity: 0;
            transition: opacity 2.8s ease-in-out;
            animation: lpPan 20s linear infinite alternate;
        }
        .lp-preview-img.active { opacity: 1; }
        .lp-preview:hover .lp-preview-img { animation-play-state: paused; }
        @keyframes lpPan {
            from { background-position-x: 0%; }
            to   { background-position-x: 100%; }
        }
        /* Two-card split: Professional / Casual. Each card lists its use cases
           as pill badges. Pro card uses brand teal accent, Casual uses warm
           tan/amber for visual contrast. Whole card is a single link to an
           example space. */
        .lp-usecases-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 8px;
        }
        @media (max-width: 720px) {
            .lp-usecases-split { grid-template-columns: 1fr; }
        }
        .lp-uc-card {
            background: rgba(25,35,50,0.42);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 2px solid var(--ui-border-faint);
            border-radius: 16px;
            padding: 24px 22px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: inherit;
            font-family: inherit;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
        }
        .lp-uc-card:hover { transform: translateY(-3px); background: rgba(35,50,70,0.55); }
        .lp-uc-pro:hover {
            border-color: rgba(var(--ui-teal-rgb),0.55);
            box-shadow: 0 14px 40px rgba(var(--ui-teal-rgb),0.32);
        }
        .lp-uc-casual:hover {
            border-color: rgba(245,170,100,0.55);
            box-shadow: 0 14px 40px rgba(245,170,100,0.32);
        }
        .lp-uc-card:focus-visible {
            outline: 2px solid rgba(var(--ui-teal-rgb),0.5);
            outline-offset: 2px;
        }
        .lp-uc-icon {
            width: 50px; height: 50px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 14px;
        }
        .lp-uc-icon img {
            width: 100%; height: 100%;
            object-fit: contain;
            display: block;
        }
        .lp-uc-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 16px;
        }
        .lp-uc-pro    .lp-uc-label { color: rgba(var(--ui-teal-rgb),0.9); }
        .lp-uc-casual .lp-uc-label { color: rgba(245,170,100,0.9); }
        .lp-uc-badges {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 7px;
            margin-bottom: 18px;
        }
        .lp-uc-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 11px;
            border-radius: 999px;
            font-size: 12.5px;
            font-weight: 500;
            background: rgba(15,25,32,0.55);
            border: 2px solid var(--ui-border);
            color: rgba(200,225,240,0.88);
            line-height: 1.2;
            white-space: nowrap;
        }
        .lp-uc-pro    .lp-uc-badge { border-color: rgba(var(--ui-teal-rgb),0.22); }
        .lp-uc-casual .lp-uc-badge { border-color: rgba(245,170,100,0.22); }
        .lp-uc-tagline {
            color: rgba(var(--ui-text-rgb),0.6);
            font-size: 13px;
            line-height: 1.5;
            margin: 0 0 14px;
        }
        .lp-uc-cta {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            margin-top: auto;
        }
        .lp-uc-pro    .lp-uc-cta { color: rgba(var(--ui-teal-rgb),0.85); }
        .lp-uc-casual .lp-uc-cta { color: rgba(245,170,100,0.85); }
        .lp-uc-pro:hover    .lp-uc-cta { color: #7dd3c8; }
        .lp-uc-casual:hover .lp-uc-cta { color: #ffba70; }

        /* For-teams section — two-column layout with text on the left and
           a mocked-up org dashboard on the right. Stacks on mobile. */
        .lp-teams {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
            text-align: left;
        }
        @media (max-width: 768px) {
            .lp-teams { grid-template-columns: 1fr; gap: 28px; }
        }
        .lp-teams-text h2 { text-align: left; }
        .lp-teams-text .lp-section-body { margin-left: 0; max-width: none; }
        .lp-teams-checklist {
            list-style: none; padding: 0; margin: 18px 0 24px;
        }
        .lp-teams-checklist li {
            display: flex; align-items: flex-start; gap: 12px;
            color: rgba(var(--ui-text-rgb),0.85);
            font-size: 14px;
            line-height: 1.5;
            padding: 6px 0;
        }
        .lp-teams-checklist .lp-check {
            color: #D26B3F;
            flex-shrink: 0;
            font-weight: 700;
            font-size: 15px;
            margin-top: 1px;
        }
        .lp-teams-mockup {
            background: rgba(15,25,32,0.65);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 2px solid rgba(210,107,63,0.18);
            border-radius: 18px;
            padding: 22px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 40px rgba(210,107,63,0.06);
        }
        .lp-org-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 18px;
        }
        .lp-org-name {
            display: flex; align-items: center; gap: 12px;
        }
        .lp-org-logo {
            width: 38px; height: 38px;
            border-radius: 10px;
            background: rgba(210,107,63,0.12);
            border: 1px solid rgba(210,107,63,0.3);
            display: flex; align-items: center; justify-content: center;
        }
        .lp-org-name-title { color: var(--ui-text); font-weight: 600; font-size: 13px; line-height: 1.2; }
        .lp-org-name-meta  { color: rgba(var(--ui-text-rgb),0.55); font-size: 11px; margin-top: 2px; }
        .lp-org-online {
            display: inline-flex; align-items: center; gap: 5px;
            color: rgba(var(--ui-teal-rgb),0.9);
            font-size: 11px;
            background: rgba(var(--ui-teal-rgb),0.1);
            padding: 4px 9px;
            border-radius: 10px;
        }
        .lp-org-online::before {
            content: ''; width: 6px; height: 6px; border-radius: 50%;
            background: #4ecdc4; box-shadow: 0 0 6px #4ecdc4;
        }
        .lp-org-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        .lp-org-member {
            aspect-ratio: 1;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 30px;
            line-height: 1;
            position: relative;
        }
        .lp-org-member.online {
            box-shadow: 0 0 0 2px rgba(var(--ui-teal-rgb),0.55), 0 0 14px rgba(var(--ui-teal-rgb),0.25);
        }
        .lp-org-member-hat {
            position: absolute;
            top: -6px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 16px;
            line-height: 1;
        }
        @keyframes lpEmoteFloat {
            0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
            100% { opacity: 0; transform: translateX(-50%) translateY(-44px) scale(1.3); }
        }
        .lp-emote-float {
            position: absolute;
            top: -4px; left: 50%;
            transform: translateX(-50%);
            font-size: 18px;
            pointer-events: none;
            animation: lpEmoteFloat 1.1s ease-out forwards;
            z-index: 5;
        }
        @keyframes lpMemberBounce {
            0%, 100% { transform: translateY(0); }
            35%      { transform: translateY(-10px); }
            65%      { transform: translateY(-4px); }
        }
        .lp-emote-bounce { animation: lpMemberBounce 0.65s ease-out; }
        .lp-org-stats {
            margin-top: 14px;
            padding: 12px 14px;
            border-radius: 10px;
            background: rgba(25,40,55,0.5);
            border: 1px solid var(--ui-border-faint);
            display: flex; justify-content: space-between; align-items: center;
            font-size: 11px;
            color: rgba(var(--ui-text-rgb),0.6);
            gap: 8px;
        }
        .lp-org-stats strong {
            color: rgba(var(--ui-text-rgb),0.4);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            font-size: 10px;
            margin-right: 6px;
        }
        .lp-org-stats-bar {
            flex: 1; max-width: 80px;
            height: 4px;
            background: rgba(var(--ui-accent-rgb),0.1);
            border-radius: 2px;
            overflow: hidden;
        }
        .lp-org-stats-bar > div {
            height: 100%;
            background: linear-gradient(90deg, #D26B3F, #e8956a);
            width: 50%;
        }
        .lp-feature:last-child {
            grid-column: 1 / -1;
        }
        .lp-feature {
            background: rgba(25,35,50,0.42);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 2px solid var(--ui-border-faint);
            border-radius: 12px; padding: 18px 14px;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
        }
        .lp-feature:hover {
            transform: translateY(-3px);
            background: rgba(35,50,70,0.55);
        }
        /* Per-card accent on hover — each icon implies a color family. */
        .lp-feature:nth-child(1):hover { border-color: rgba(var(--ui-teal-rgb),0.55); box-shadow: 0 14px 40px rgba(var(--ui-teal-rgb),0.32); }
        .lp-feature:nth-child(2):hover { border-color: var(--ui-border-accent); box-shadow: 0 14px 40px rgba(var(--ui-accent-rgb),0.32); }
        .lp-feature:nth-child(3):hover { border-color: rgba(180,130,255,0.55); box-shadow: 0 14px 40px rgba(180,130,255,0.32); }
        .lp-feature:nth-child(4):hover { border-color: rgba(130,220,150,0.55); box-shadow: 0 14px 40px rgba(130,220,150,0.32); }
        .lp-feature:nth-child(5):hover { border-color: rgba(255,170,80,0.55); box-shadow: 0 14px 40px rgba(255,170,80,0.32); }
        .lp-feature-icon {
            display: block;
            margin: 0 auto 12px;
            width: 50px; height: 50px;
            object-fit: contain;
        }
        .lp-feature h3 {
            color: var(--ui-text-bright); font-size: 15px; font-weight: 600;
            margin: 0 0 8px;
        }
        .lp-feature p {
            color: rgba(var(--ui-text-rgb),0.55); font-size: 13px; line-height: 1.5;
            margin: 0;
        }
.lp-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
        .lp-btn {
            padding: 14px 32px; border-radius: 8px; font-size: 15px; font-weight: 600;
            cursor: pointer; transition: all 0.2s; border: none; font-family: 'Inter', sans-serif;
        }
        .lp-ui-btn ui-btn-success {
            background: linear-gradient(135deg, rgba(var(--ui-primary-rgb),0.8), rgba(20,70,90,0.9));
            color: var(--ui-text-bright);
            border: 2px solid var(--ui-border-accent);
        }
        .lp-ui-btn ui-btn-success:hover {
            background: linear-gradient(135deg, rgba(40,110,126,0.9), rgba(25,85,105,1));
            border-color: var(--ui-border-accent);
            box-shadow: 0 4px 20px rgba(30,90,120,0.3);
        }
        .lp-ui-btn ui-btn-ghost {
            background: transparent; color: rgba(var(--ui-text-rgb),0.7);
            border: 2px solid var(--ui-border);
        }
        .lp-ui-btn ui-btn-ghost:hover {
            background: rgba(var(--ui-accent-rgb),0.06); color: var(--ui-text-bright);
            border-color: var(--ui-border-accent);
        }
        .lp-footer {
            color: rgba(120,150,170,0.5); font-size: 12px; margin: 0; display: none;
        }
        /* ── Full feature list ── */
        .lp-all-features {
            margin-top: 24px;
            padding-top: 8px; text-align: center;
        }
        .lp-features-toggle {
            background: none; border: none; color: rgba(var(--ui-text-rgb),0.5);
            font-size: 13px; cursor: pointer; padding: 8px 0;
            text-align: center; font-family: 'Inter', sans-serif; transition: color 0.2s;
        }
        .lp-features-toggle:hover { color: var(--ui-text-bright); }
        .lp-features-toggle .lp-chevron {
            display: inline-block; transition: transform 0.25s; margin-left: 4px;
        }
        .lp-features-toggle.open .lp-chevron { transform: rotate(180deg); }
        /* Feature list overlay */
        .lp-fg-overlay {
            display: none; position: fixed; inset: 0; z-index: calc(var(--z-modal-2) + 100);
            background: rgba(5,5,5,0.85); backdrop-filter: blur(8px);
            align-items: center; justify-content: center;
            animation: lpFgFadeIn 0.2s ease;
        }
        .lp-fg-overlay.active { display: flex; }
        @keyframes lpFgFadeIn { from { opacity: 0; } to { opacity: 1; } }
        .lp-fg-panel {
            background: linear-gradient(180deg, #0e2a2c, #0a1a1c);
            border: 2px solid var(--ui-border);
            border-radius: 16px; padding: 32px 28px;
            max-width: 560px; width: 90%; max-height: 80vh;
            overflow-y: auto; position: relative;
        }
        .lp-fg-close {
            position: absolute; top: 12px; right: 16px;
            background: none; border: none; color: rgba(var(--ui-text-rgb),0.5);
            font-size: 20px; cursor: pointer; padding: 4px 8px;
            transition: color 0.2s;
        }
        .lp-fg-close:hover { color: var(--ui-text-bright); }
        .lp-fg-panel h3 {
            color: var(--ui-text-bright); font-size: 16px; font-weight: 600;
            margin: 0 0 20px; text-align: center;
        }
        .lp-feature-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 0;
        }
        .lp-fg-category {
            grid-column: 1 / -1;
            color: rgba(var(--ui-text-rgb),0.4); font-size: 11px; font-weight: 600;
            text-transform: uppercase; letter-spacing: 1px;
            padding: 16px 0 6px; border-bottom: 1px solid var(--ui-border-faint);
        }
        .lp-fg-category:first-child { padding-top: 0; }
        .lp-fg-item {
            padding: 6px 0; font-size: 13px; color: rgba(var(--ui-text-rgb),0.6);
        }
        .lp-fg-item span { margin-right: 6px; }
        @media (max-width: 600px) {
            .lp-title { font-size: 36px; }
            .lp-tagline { font-size: 18px; }
            .lp-subtagline { font-size: 14px; }
            .lp-features { grid-template-columns: 1fr; gap: 8px; }
            .lp-features { margin-bottom: 12px; }
            .lp-actions { flex-direction: column; align-items: center; }
            .lp-btn { width: 100%; max-width: 280px; }
            .lp-feature-grid { grid-template-columns: 1fr; }
        }

        #authModal.active .authContainer {
            animation: modalContentIn 0.25s ease;
        }
        .authContainer {
            background: rgba(var(--ui-surface-rgb),0.94);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 2px solid var(--ui-border);
            border-radius: 12px;
            padding: 40px;
            width: 100%;
            max-width: 400px;
            max-height: calc(100vh - 32px);
            overflow-y: auto;
            overscroll-behavior: contain;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--ui-accent-rgb),0.3) rgba(var(--ui-surface-rgb),0.4);
        }
        .authContainer::-webkit-scrollbar { width: 8px; }
        .authContainer::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb),0.4); border-radius: 4px; }
        .authContainer::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb),0.3); border-radius: 4px; }
        .authContainer::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb),0.5); }
        .authContainer h2 {
            color: var(--ui-text-bright);
            margin-bottom: 24px;
            text-align: center;
        }
        .authContainer label.auth-label {
            display: block;
            color: rgba(var(--ui-text-rgb),0.7);
            font-size: 12px;
            font-weight: 500;
            margin-bottom: 4px;
        }
        .authContainer input {
            width: 100%;
            padding: 12px;
            margin-bottom: 16px;
            background: rgba(var(--ui-surface-rgb),0.6);
            border: 2px solid var(--ui-border);
            border-radius: 6px;
            color: var(--ui-text);
            font-size: 14px;
            box-sizing: border-box;
        }
        .authContainer input:focus {
            outline: none;
            border-color: var(--ui-border-accent);
        }
        /* Classless form buttons exist only in the login/signup modal —
           everything else uses the .ui-btn system (ui-theme.css). */
        #authModal .authContainer button {
            width: 100%;
            padding: 12px;
            background: rgba(20,55,65,0.5);
            border: 2px solid var(--ui-border);
            border-radius: 6px;
            color: rgba(var(--ui-text-rgb),0.85);
            font-weight: 600;
            cursor: pointer;
            margin-bottom: 12px;
            transition: all 0.2s;
        }
        #authModal .authContainer button:hover {
            background: rgba(30,70,85,0.6);
            border-color: var(--ui-border-accent);
            color: var(--ui-text-bright);
        }
        .authToggle {
            text-align: center;
            color: var(--ui-text-muted);
            font-size: 12px;
            margin-top: 16px;
        }
        .authToggle a {
            color: var(--ui-text-bright);
            cursor: pointer;
            text-decoration: underline;
        }
        .authError {
            color: #ff6b6b;
            font-size: 12px;
            margin-bottom: 16px;
            text-align: center;
        }
        #userDisplay {
            position: absolute;
            top: 60px;
            right: 18px;
            background: rgba(var(--ui-surface-rgb), 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 8px 12px;
            border-radius: 8px;
            border: 2px solid var(--ui-border);
            font-size: 12px;
            color: var(--ui-text);
            pointer-events: auto;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            max-width: calc(100vw - 200px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        #logoutBtn {
            background: rgba(50, 50, 60, 0.6);
            border: 1px solid rgba(100, 100, 120, 0.3);
            color: #aaa;
            padding: 4px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 11px;
            white-space: nowrap;
            transition: all 0.2s;
        }
        #logoutBtn:hover {
            background: rgba(70, 70, 80, 0.7);
            color: var(--ui-text);
            border-color: rgba(150, 150, 170, 0.4);
        }
        #adminToggleBtn {
            background: #1a3a1a;
            border: 1px solid #4a8a4a;
            color: #7aff7a;
            padding: 4px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 600;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        #adminToggleBtn:hover {
            background: #2a4a2a;
            border-color: #7aff7a;
            box-shadow: 0 0 8px rgba(122, 255, 122, 0.3);
        }
        #adminToggleBtn.active {
            background: #2a7a2a;
            border-color: #00ff00;
            color: #00ff00;
            box-shadow: 0 0 12px rgba(0, 255, 0, 0.5);
        }
        #locationContainer {
            position: absolute;
            top: 60px;
            right: 18px;
            display: flex;
            align-items: center;
            gap: 6px;
            pointer-events: auto;
            z-index: var(--z-hud); /* own layer — an invisible HUD sibling above it ate the clicks */
            background: rgba(var(--ui-surface-rgb), 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 6px 10px;
            border-radius: 8px;
            border: 2px solid var(--ui-border);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        #locationDisplay {
            background: rgba(20, 40, 60, 0.6);
            border: 2px solid var(--ui-border-accent);
            color: var(--ui-text);
            padding: 5px 8px;
            border-radius: 6px;
            font-size: 11px;
            font-family: 'Consolas', 'Monaco', monospace;
            outline: none;
            width: 100px;
            cursor: text;
        }
        #locationDisplay:hover {
            border-color: var(--ui-border-accent);
            background: rgba(var(--ui-surface-rgb), 0.7);
        }
        #locationDisplay:focus {
            border-color: #7adc7a;
            box-shadow: 0 0 8px rgba(122, 220, 122, 0.3);
        }
        #locationDisplay::placeholder {
            color: #5a8a5a;
        }
        .location-btn {
            background: rgba(var(--ui-primary-rgb), 0.6);
            border: 2px solid var(--ui-border-accent);
            color: var(--ui-text);
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .location-btn:hover {
            background: rgba(40, 80, 110, 0.8);
            border-color: var(--ui-border-accent);
        }
        .location-btn:active {
            background: rgba(50, 100, 130, 0.8);
        }
        #codeEditorModal {
            z-index: var(--z-nav);
            background: rgba(0, 0, 0, 0.9);
            flex-direction: column;
        }
        #codeEditorModal.active {
            display: flex;
            animation: modalFadeIn 0.2s ease;
        }
        #codeEditorModal.active #codeEditorContainer {
            animation: modalContentIn 0.25s ease;
        }
        #codeEditorContainer {
            width: 90%;
            height: 90%;
            background: #1a1a1a;
            border: 2px solid #666;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
        }
        #codeEditorToolbar {
            background: var(--ui-surface-alt);
            border-bottom: 1px solid #666;
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--ui-text);
            font-size: 12px;
        }
        #codeEditorToolbar button {
            background: var(--ui-btn-bg);
            border: 1px solid #666;
            color: var(--ui-text);
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 8px;
            font-size: 12px;
        }
        #codeEditorToolbar button:hover {
            background: #444;
            border-color: var(--ui-text-muted);
        }
        #codeEditorTextarea {
            flex: 1;
            background: #1a1a1a;
            border: none;
            color: var(--ui-text);
            padding: 16px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            resize: none;
            outline: none;
            overflow: auto;
            word-break: break-word;
            white-space: pre-wrap;
        }
        
        /* ── Unified info widget ────────────────────────────────────────
           Single top-left element showing contextual hints (from
           updateTutorial) OR transient toast notifications (from showToast).
           Click the body to open the history panel; × dismisses the current
           message back to the hint, or hides the widget if the hint itself
           was already dismissed. */
        .info-widget {
            position: fixed;
            top: 60px; /* JS overrides via positionUIElements */
            left: 18px;
            z-index: 100;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 8px;
            background: rgba(var(--ui-surface-rgb), 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 2px solid var(--ui-border);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            color: rgba(var(--ui-text-rgb), 0.7);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 11px;
            line-height: 1.5;
            max-width: 420px;
            cursor: pointer;
            transition: opacity 0.3s ease, background 0.18s, border-color 0.18s, transform 0.18s;
        }
        .info-widget .info-icon {
            flex-shrink: 0;
            font-size: 16px;
            line-height: 1.2;
            color: #64c8ff;
            display: none; /* shown only when a toast supplies an icon */
        }
        .info-widget.has-icon .info-icon { display: inline; }
        .info-widget .info-body {
            flex: 1;
            min-width: 0;
        }
        .info-widget .info-main {
            color: var(--ui-text);
            font-weight: 600;
            font-size: 12px;
            word-break: break-word;
        }
        .info-widget .info-sub {
            font-size: 10px;
            opacity: 0.7;
            margin-top: 4px;
            word-break: break-word;
        }
        .info-widget .info-sub:empty { display: none; }
        .info-widget .info-close {
            flex-shrink: 0;
            background: none;
            border: none;
            color: rgba(var(--ui-text-rgb), 0.4);
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 4px;
            transition: opacity 0.15s, color 0.15s, background 0.15s;
        }
        .info-widget .info-close:hover {
            color: rgba(255, 255, 255, 0.9);
            background: rgba(255, 255, 255, 0.08);
        }
        .info-widget .info-unread {
            flex-shrink: 0;
            color: #f87171;
            font-weight: 700;
            font-size: 11px;
            padding: 0 2px;
        }
        /* Toast states — widget temporarily takes on the toast's coloring */
        .info-widget.toast-active {
            border-color: var(--ui-border-accent);
            background: rgba(var(--ui-surface-rgb), 0.92);
        }
        .info-widget.toast-success { border-color: rgba(74, 222, 128, 0.4); }
        .info-widget.toast-success .info-icon { color: var(--ui-success-text, #4ade80); }
        .info-widget.toast-error { border-color: rgba(248, 113, 113, 0.45); }
        .info-widget.toast-error .info-icon { color: var(--ui-error-text, #f87171); }
        .info-widget.toast-warning { border-color: rgba(251, 191, 36, 0.4); }
        .info-widget.toast-warning .info-icon { color: var(--ui-warn-text, #fbbf24); }
        .info-widget.toast-info { border-color: var(--ui-border-accent); }
        .info-widget.toast-info .info-icon { color: var(--ui-info-text, #64c8ff); }
        .info-widget.toast-achievement {
            border-color: rgba(255, 215, 0, 0.4);
            background: linear-gradient(135deg, rgba(20, 30, 50, 0.95), rgba(30, 50, 80, 0.95));
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.15);
        }
        .info-widget.toast-achievement .info-icon { color: #ffd700; font-size: 22px; }
        .info-widget.toast-achievement .toast-eyebrow {
            color: rgba(255, 215, 0, 0.9);
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 2px;
        }
        .info-widget.toast-achievement .toast-title {
            font-size: 14px;
            font-weight: 600;
        }
        .info-widget.has-unread .info-icon { color: #f87171; }
        /* Collapsed: shrunk to just the clock icon. Always reachable so the
           user can open history at any time, but unobtrusive — full widget
           re-expands on hover, new toast, or contextual hint. */
        .info-widget.collapsed {
            padding: 4px 8px;
            opacity: 0.55;
        }
        .info-widget.collapsed .info-body,
        .info-widget.collapsed .info-close {
            display: none;
        }
        .info-widget.collapsed .info-icon {
            display: inline;
            color: var(--ui-text-muted);
            font-size: 13px;
        }
        .info-widget.collapsed.has-unread {
            opacity: 1;
        }
        .info-widget.collapsed.has-unread .info-icon { color: #f87171; }
        .info-widget.collapsed:hover { opacity: 1; }
        @media (max-width: 768px) {
            .info-widget {
                left: 12px;
                right: 12px;
                max-width: none;
            }
        }

        #toastHistoryPanel {
            position: fixed;
            top: calc(var(--toolbar-height, 48px) + 8px);
            left: 24px;
            z-index: var(--z-top);
            width: 340px;
            max-width: calc(100vw - 48px);
            max-height: 60vh;
            overflow-y: auto;
            background: rgba(var(--ui-surface-rgb), 0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
            display: none;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }
        #toastHistoryPanel.open { display: block; }
        .toast-history-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            font-size: 12px;
            color: var(--ui-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .toast-history-clear {
            background: none;
            border: none;
            color: var(--ui-text-muted);
            font-size: 11px;
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 4px;
        }
        .toast-history-clear:hover { background: rgba(255,255,255,0.06); color: #fff; }
        #toastHistoryList {
            padding: 4px 0;
        }
        .toast-history-empty {
            padding: 24px 14px;
            text-align: center;
            color: #6b7b86;
            font-size: 12px;
        }
        .toast-history-item {
            display: flex;
            gap: 10px;
            padding: 10px 14px;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            color: #e0e6eb;
            font-size: 12.5px;
            line-height: 1.4;
        }
        .toast-history-item:last-child { border-bottom: none; }
        .toast-history-icon { flex-shrink: 0; font-size: 14px; margin-top: 1px; }
        .toast-history-body { flex: 1; min-width: 0; }
        .toast-history-msg { word-break: break-word; }
        .toast-history-time { margin-top: 3px; font-size: 10.5px; color: #6b7b86; }
        .toast-history-success .toast-history-icon { color: #4ade80; }
        .toast-history-error   .toast-history-icon { color: #f87171; }
        .toast-history-warning .toast-history-icon { color: #fbbf24; }
        .toast-history-info    .toast-history-icon { color: #64c8ff; }
        .toast-history-achievement .toast-history-icon { color: #ffd700; }
        @media (max-width: 768px) {
            #toastHistoryPanel { left: 12px; right: 12px; width: auto; }
        }
        
        /* Drag & drop overlay */
        #dropOverlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: var(--z-max);
            background: rgba(var(--ui-surface-rgb), 0.35);
            pointer-events: none;
        }
        #dropOverlay.active {
            display: block;
        }
        .drop-zone {
            position: fixed;
            border: 2px dashed var(--ui-border-accent);
            border-radius: 14px;
            padding: 14px 22px;
            text-align: center;
            animation: dropPulse 1.5s ease-in-out infinite;
            background: rgba(var(--ui-surface-rgb), 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            pointer-events: none;
            transform: translate(-50%, calc(-100% - 120px));
            white-space: nowrap;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        }
        .drop-zone-icon {
            font-size: 20px;
            display: inline;
            margin-right: 8px;
            vertical-align: middle;
        }
        .drop-zone-text {
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
            display: inline;
            vertical-align: middle;
        }
        .drop-zone-hint {
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            color: rgba(var(--ui-accent-rgb), 0.6);
            margin-top: 4px;
        }
        @keyframes dropPulse {
            0%, 100% { border-color: var(--ui-border-accent); }
            50% { border-color: var(--ui-border-accent); }
        }
        
        /* Upload progress toast */
        .toast-progress-bar {
            width: 100%;
            height: 3px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            margin-top: 6px;
            overflow: hidden;
        }
        .toast-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #64c8ff, #4ade80);
            border-radius: 2px;
            transition: width 0.2s ease;
            width: 0%;
        }
    

/* ===== section 2 (index.html extraction order preserved) ===== */
        @keyframes kuukanSpin { to { transform: rotate(360deg); } }
        @keyframes vfCornerTL {
            0%   { transform:translate(0,0);          opacity:.72; animation-timing-function:cubic-bezier(.1,0,0,1); }
            13%  { transform:translate(-12px,-12px);  opacity:1;   animation-timing-function:cubic-bezier(.5,0,.85,.9); }
            35%  { transform:translate(0,0);          opacity:.72; }
            100% { transform:translate(0,0);          opacity:.72; }
        }
        @keyframes vfCornerTR {
            0%   { transform:translate(0,0);          opacity:.72; animation-timing-function:cubic-bezier(.1,0,0,1); }
            13%  { transform:translate( 12px,-12px);  opacity:1;   animation-timing-function:cubic-bezier(.5,0,.85,.9); }
            35%  { transform:translate(0,0);          opacity:.72; }
            100% { transform:translate(0,0);          opacity:.72; }
        }
        @keyframes vfCornerBR {
            0%   { transform:translate(0,0);          opacity:.72; animation-timing-function:cubic-bezier(.1,0,0,1); }
            13%  { transform:translate( 12px, 12px);  opacity:1;   animation-timing-function:cubic-bezier(.5,0,.85,.9); }
            35%  { transform:translate(0,0);          opacity:.72; }
            100% { transform:translate(0,0);          opacity:.72; }
        }
        @keyframes vfCornerBL {
            0%   { transform:translate(0,0);          opacity:.72; animation-timing-function:cubic-bezier(.1,0,0,1); }
            13%  { transform:translate(-12px, 12px);  opacity:1;   animation-timing-function:cubic-bezier(.5,0,.85,.9); }
            35%  { transform:translate(0,0);          opacity:.72; }
            100% { transform:translate(0,0);          opacity:.72; }
        }
        @keyframes vfDotPulse {
            0%, 100% { transform: scale(1);    opacity: 0.72; }
            50%      { transform: scale(1.28); opacity: 1; }
        }
        .vf-c-tl { animation: vfCornerTL 2.2s linear infinite; animation-delay:    0s; }
        .vf-c-tr { animation: vfCornerTR 2.2s linear infinite; animation-delay: -1.9s; }
        .vf-c-br { animation: vfCornerBR 2.2s linear infinite; animation-delay: -1.6s; }
        .vf-c-bl { animation: vfCornerBL 2.2s linear infinite; animation-delay: -1.3s; }
        .vf-dot1 {
            transform-box: fill-box;
            transform-origin: center;
            animation: vfDotPulse 1.6s ease-in-out infinite;
        }
        .vf-dot2 {
            transform-box: fill-box;
            transform-origin: center;
            animation: vfDotPulse 1.6s ease-in-out 0.55s infinite;
        }
        @keyframes chatBubbleIn {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .chat-bubble-new { animation: chatBubbleIn 220ms cubic-bezier(.2,.7,.2,1) both; }
        @keyframes reactionPop {
            0%   { transform: scale(0.4); opacity: 0; }
            60%  { transform: scale(1.18); opacity: 1; }
            100% { transform: scale(1); }
        }
        .reaction-badge-new { animation: reactionPop 280ms cubic-bezier(.3,1.5,.5,1) both; }
        @keyframes chatBubbleFlash {
            0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ui-accent-rgb),0); }
            30%      { box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb),0.6); }
        }
        .chat-bubble-jump-flash { animation: chatBubbleFlash 1.1s ease-out both; border-radius: 8px; }
        @keyframes typingDotBounce {
            0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
            40%           { transform: translateY(-3px); opacity: 1; }
        }
        .typing-dot {
            display: inline-block;
            width: 4px; height: 4px;
            margin: 0 1px;
            background: currentColor;
            border-radius: 50%;
            animation: typingDotBounce 1.2s ease-in-out infinite;
        }
        .typing-dot:nth-child(2) { animation-delay: 0.15s; }
        .typing-dot:nth-child(3) { animation-delay: 0.30s; }
        @keyframes chatAvatarSpeaking {
            0%, 100% { filter: drop-shadow(0 0 1px rgba(var(--ui-teal-rgb),0)); transform: scale(1); }
            50%      { filter: drop-shadow(0 0 4px rgba(var(--ui-teal-rgb),0.8)); transform: scale(1.14); }
        }
        .chat-avatar-speaking { animation: chatAvatarSpeaking 0.9s ease-in-out infinite; }
        .chat-send-btn.send-disabled {
            background: rgba(var(--ui-accent-rgb),0.06) !important;
            border-color: var(--ui-border-faint) !important;
            color: rgba(var(--ui-accent-rgb),0.35) !important;
            cursor: default !important;
        }
        @keyframes ctxMenuIn {
            from { opacity:0; transform:scale(0.92); }
            to { opacity:1; transform:scale(1); }
        }
        @keyframes ctxMenuOut {
            from { opacity:1; transform:scale(1); }
            to { opacity:0; transform:scale(0.92); }
        }
        @keyframes burgerDropdownIn {
            from { opacity:0; transform:translateY(-6px); }
            to { opacity:1; transform:translateY(0); }
        }
        @keyframes burgerDropdownOut {
            from { opacity:1; transform:translateY(0); }
            to { opacity:0; transform:translateY(-6px); }
        }
    

/* ===== section 3 (index.html extraction order preserved) ===== */
        @keyframes badgePulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }
        /* Notification badge: pulse via expanding shadow ring instead of
           scale, so it doesn't fight with the translateX(-50%) used to
           center the badge above the carousel ball. */
        @keyframes badgeShadowPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.55); }
            50%      { box-shadow: 0 0 0 7px rgba(255, 107, 53, 0); }
        }
        #floatingNotifBadge {
            transform: translateX(-50%);
            transition: transform 0.15s ease, background 0.15s ease;
        }
        #floatingNotifBadge:hover {
            transform: translateX(-50%) scale(1.1);
            background: #ff8a5a;
        }
        @keyframes badgeBounce {
            0% { transform: scale(0); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-8px); }
            40% { transform: translateX(8px); }
            60% { transform: translateX(-5px); }
            80% { transform: translateX(5px); }
        }
    

/* ===== section 4 (index.html extraction order preserved) ===== */
#avatarPickerModal .profile-tab { border-radius: 6px !important; }

/* ===== section 5 (index.html extraction order preserved) ===== */
        .help-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--ui-border-faint); }
        .help-row:last-child { border-bottom:none; }
        .help-keys { color:rgba(var(--ui-text-rgb),0.7); font-size:12px; min-width:140px; }
        .help-keys kbd { background:rgba(var(--ui-accent-rgb),0.08); border:2px solid var(--ui-border); border-radius:4px; padding:2px 6px; font-size:11px; font-family:'Inter',sans-serif; color:rgba(var(--ui-text-rgb),0.8); }
        .help-desc { color:rgba(var(--ui-text-rgb),0.45); font-size:12px; text-align:right; }
        #helpModal ::-webkit-scrollbar { width: 6px; }
        #helpModal ::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb), 0.4); border-radius: 3px; }
        #helpModal ::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb), 0.3); border-radius: 3px; }
        #helpModal ::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb), 0.5); }
    

/* ===== section 6 (index.html extraction order preserved) ===== */
        #onboardingWalkthrough {
            position: fixed;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            z-index: var(--z-system);
            opacity: 0;
            transition: opacity 0.35s ease, transform 0.35s ease;
            pointer-events: auto;
        }
        .ob-card {
            position: relative;
            background: rgba(12, 20, 30, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 2px solid var(--ui-border-accent);
            border-radius: 16px;
            padding: 24px 28px 18px;
            min-width: 320px;
            max-width: 400px;
            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--ui-accent-rgb), 0.08);
            text-align: center;
            font-family: 'Inter', sans-serif;
            overflow: hidden;
            transition: opacity 0.15s ease, transform 0.15s ease;
        }
        .ob-progress {
            position: absolute;
            top: 0; left: 0;
            height: 3px;
            background: linear-gradient(90deg, rgba(var(--ui-accent-rgb), 0.6), rgba(60, 230, 160, 0.6));
            border-radius: 0 3px 3px 0;
            transition: width 0.4s ease;
            width: 0%;
        }
        .ob-icon {
            font-size: 36px;
            margin-bottom: 8px;
            user-select: none;
        }
        .ob-message {
            color: var(--ui-text-bright);
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 4px;
            letter-spacing: 0.2px;
        }
        .ob-sub {
            color: rgba(var(--ui-text-rgb), 0.55);
            font-size: 13px;
            line-height: 1.5;
            margin-bottom: 16px;
        }
        .ob-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        .ob-skip {
            background: none;
            border: none;
            color: rgba(var(--ui-text-rgb), 0.35);
            font-size: 12px;
            cursor: pointer;
            padding: 4px 8px;
            font-family: 'Inter', sans-serif;
            transition: color 0.15s;
        }
        .ob-skip:hover { color: rgba(var(--ui-text-rgb), 0.65); }
        .ob-next {
            background: rgba(var(--ui-primary-rgb), 0.6);
            border: 2px solid var(--ui-border-accent);
            border-radius: 8px;
            color: var(--ui-text-bright);
            font-size: 13px;
            font-weight: 600;
            padding: 8px 20px;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            transition: all 0.15s;
        }
        .ob-next:hover {
            background: rgba(var(--ui-primary-rgb), 0.8);
            border-color: var(--ui-border-accent);
            box-shadow: 0 0 16px rgba(var(--ui-accent-rgb), 0.15);
        }
        .ob-dots {
            display: flex;
            justify-content: center;
            gap: 6px;
        }
        .ob-dot {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: rgba(var(--ui-accent-rgb), 0.15);
            transition: all 0.3s ease;
        }
        .ob-dot.active {
            background: rgba(var(--ui-accent-rgb), 0.7);
            box-shadow: 0 0 6px rgba(var(--ui-accent-rgb), 0.4);
            transform: scale(1.2);
        }
        .ob-dot.done {
            background: rgba(60, 230, 160, 0.5);
        }
        .ob-canvas-highlight {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: calc(var(--z-system) - 1);
            border: 2px dashed var(--ui-border-accent);
            animation: obPulse 2s ease-in-out infinite;
        }
        @keyframes obPulse {
            0%, 100% { border-color: var(--ui-border); }
            50% { border-color: var(--ui-border-accent); }
        }
        @media (max-width: 500px) {
            #onboardingWalkthrough { bottom: 16px; }
            .ob-card { min-width: 280px; max-width: calc(100vw - 32px); padding: 20px 18px 14px; }
        }
    

/* ===== section 7 (index.html extraction order preserved) ===== */
        .tools-float-btn {
            background: rgba(60,100,80,0.6);
            border: 1px solid rgba(100,200,150,0.2);
            border-radius: 6px;
            padding: 6px 10px;
            font-size: 12px;
            color: #a0d0b0;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
        }
        .tools-float-btn:hover {
            background: rgba(80,130,100,0.8);
            border-color: rgba(100,200,150,0.5);
            color: #c0f0d0;
        }