:root {
    --bg-base: #030108;
    --glass-panel-bg: rgba(12, 8, 24, 0.4);
    --glass-panel-border: rgba(255, 255, 255, 0.08);
    --glass-panel-glow: rgba(255, 255, 255, 0.12);
    --text-primary: #f8fafc;
    --text-muted: #64748b;
    
    /* Functional Theme Colors */
    --c-events: #ffab19;
    --c-motion: #4c97ff;
    --c-looks: #9966ff;
    --c-pen: #0fbd8c;
    --c-control: #ffbf00;
    --c-sound: #cf63cf;
    --c-operators: #5cb3ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-touch-callout: none; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg-base); color: var(--text-primary); height: 100vh; overflow: hidden; position: relative; }

/* Background Neon Blur Environment */
.sky-glow { position: absolute; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.blur-orb { position: absolute; border-radius: 50%; filter: blur(150px); opacity: 0.35; }
.blur-orb.p1 { width: 550px; height: 550px; background: #ff007c; top: -10%; left: 15%; }
.blur-orb.p2 { width: 650px; height: 650px; background: #00d2ff; bottom: -10%; right: 10%; }

.app-container { display: flex; flex-direction: column; height: 100vh; padding: 14px; gap: 14px; }

/* Glassmorphic Navbar Layout */
.glass-navbar {
    background: var(--glass-panel-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-panel-border); border-radius: 12px; height: 65px;
    display: flex; justify-content: space-between; align-items: center; padding: 0 20px;
}
.brand { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 1.2rem; letter-spacing: 2px; }
.neon-glow { color: #00ffaa; text-shadow: 0 0 10px rgba(0,255,170,0.5); }
.global-runtime-controls { display: flex; gap: 10px; }

.sys-btn {
    padding: 8px 16px; border-radius: 20px; border: 1px solid var(--glass-panel-border);
    font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.75rem; color: #fff;
    cursor: pointer; background: rgba(255,255,255,0.03); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sys-btn.run:hover { background: rgba(0, 255, 170, 0.2); border-color: #00ffaa; box-shadow: 0 0 10px rgba(0,255,170,0.3); }
.sys-btn.stop:hover { background: rgba(255, 51, 102, 0.2); border-color: #ff3366; box-shadow: 0 0 10px rgba(255,51,102,0.3); }
.sys-btn.reset:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
.sys-btn.clear:hover { background: rgba(255, 159, 67, 0.2); border-color: #ff9f43; }

/* Column Grid Layout Setup */
.main-layout { display: grid; grid-template-columns: 340px 1fr 510px; gap: 14px; flex: 1; overflow: hidden; }

.glass-container {
    background: var(--glass-panel-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-panel-border); border-radius: 16px; display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}
.section-tag {
    font-family: 'Orbitron', sans-serif; font-size: 0.7rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1.5px; padding: 12px 16px;
    border-bottom: 1px solid var(--glass-panel-border); background: rgba(0,0,0,0.2);
}

/* Accordion Component Styles */
.accordion-scroll { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.section-title { font-size: 0.8rem; font-weight: 800; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.block-section[data-cat="events"] .section-title { color: var(--c-events); }
.block-section[data-cat="motion"] .section-title { color: var(--c-motion); }
.block-section[data-cat="looks"] .section-title { color: var(--c-looks); }
.block-section[data-cat="pen"] .section-title { color: var(--c-pen); }
.block-section[data-cat="control"] .section-title { color: var(--c-control); }
.block-section[data-cat="sound"] .section-title { color: var(--c-sound); }
.block-section[data-cat="operators"] .section-title { color: var(--c-operators); }

/* The R3W1ND CODE Physical Interlocking Puzzle Block Structure */
.r-block {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px;
    font-size: 0.8rem; font-weight: 700; color: white; background: #576574;
    border-radius: 8px; margin-bottom: 6px; cursor: grab; width: max-content;
    max-width: 100%; border: 1px solid rgba(0,0,0,0.15); touch-action: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 6px rgba(0,0,0,0.15);
}
.block-section[data-cat="events"] .r-block { background: var(--c-events); }
.block-section[data-cat="motion"] .r-block { background: var(--c-motion); }
.block-section[data-cat="looks"] .r-block { background: var(--c-looks); }
.block-section[data-cat="pen"] .r-block { background: var(--c-pen); }
.block-section[data-cat="control"] .r-block { background: var(--c-control); }
.block-section[data-cat="sound"] .r-block { background: var(--c-sound); }
.block-section[data-cat="operators"] .r-block { background: var(--c-operators); }

.r-block.hat { border-top-left-radius: 20px; border-top-right-radius: 20px; }

/* Structural Container Blocks (Loops) */
.r-block.wrapper { display: flex !important; flex-direction: column !important; align-items: flex-start !important; padding: 0 !important; width: 240px !important; }
.w-head { padding: 10px 14px; display: flex; align-items: center; gap: 6px; }
.w-slot {
    background: rgba(0,0,0,0.25); min-height: 40px; width: calc(100% - 16px);
    margin-left: 16px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;
    border-left: 4px solid rgba(0,0,0,0.3); padding: 6px; display: flex; flex-direction: column; gap: 4px;
}
.w-slot .r-block { position: relative !important; left: 0 !important; top: 0 !important; width: 100% !important; margin-bottom: 0; }
.w-foot { padding: 6px 14px; font-size: 0.7rem; opacity: 0.6; }

/* Inner Field Inputs Components */
.b-input, .b-input-sm, .b-input-txt {
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15); color: white;
    border-radius: 4px; font-weight: 700; text-align: center; outline: none; padding: 2px 4px;
}
.b-input { width: 45px; }
.b-input-sm { width: 35px; }
.b-input-txt { width: 80px; text-align: left; }
.b-color { background: transparent; border: none; width: 24px; height: 20px; vertical-align: middle; cursor: pointer; }

/* Sandbox Architecture Framework Layout */
.workspace-sidebar { position: relative; background: rgba(4,2,9,0.3); }
.canvas { flex: 1; overflow: auto; padding: 50px; position: relative; }
.canvas > .r-block { position: absolute; }
.r-block .r-block { position: relative !important; left: 0 !important; top: 0 !important; margin-top: 2px; display: inline-flex !important; }

/* Deletion Trash UI Component */
.incinerator {
    height: 55px; background: rgba(255, 51, 102, 0.03); border-top: 1px dashed rgba(255, 51, 102, 0.2);
    display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #ff3366; font-weight: 700;
}
.incinerator.active { background: rgba(255, 51, 102, 0.2); color: white; }

/* Simulator Windows and Vector Layout Matrices Panels */
.stage-sidebar { display: flex; flex-direction: column; gap: 14px; }
.stage-container { flex: 1; }
.viewport {
    flex: 1; margin: 16px; border-radius: 12px; position: relative; overflow: hidden;
    background: #090611; border: 1px solid rgba(255,255,255,0.03);
}

/* Background Presets Engine System Layout Maps */
.viewport.grid { background: radial-gradient(circle at 20px 20px, rgba(255,255,255,0.02) 1px, transparent 0), #090611; background-size: 20px 20px; }
.viewport.void { background: #020105; }
.viewport.neon { background: linear-gradient(to bottom, rgba(0, 210, 255, 0.03), transparent), #090611; border-bottom: 2px solid #ff007c; }

#pen-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* Center-Sourced Vector Sprite Actor Layout Matrix */
.sprite-actor {
    position: absolute; width: 40px; height: 40px;
    top: 50%; left: 50%; /* Anchor baseline directly into center origin mapping matrices */
    margin-left: -20px; margin-top: -20px; z-index: 3;
    transform: translate(0px, 0px) rotate(0deg);
    transition: transform 0.05s linear;
}

/* UI Dialogue Speech Bubbles Overlays Systems */
.speech-bubble {
    position: absolute; background: white; color: black; padding: 6px 12px;
    border-radius: 10px; font-size: 0.75rem; font-weight: 700; z-index: 4;
    display: none; top: calc(50% - 50px); left: 50%; transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.speech-bubble::after {
    content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    border-width: 6px 6px 0; border-style: solid; border-color: white transparent; display: block; width: 0;
}

.telemetry-panel {
    display: flex; justify-content: space-between; padding: 12px 20px;
    font-family: 'Orbitron', sans-serif; font-size: 0.7rem; color: var(--text-muted);
    border-top: 1px solid var(--glass-panel-border); background: rgba(0,0,0,0.1);
}
.telemetry-panel span { color: #00ffaa; font-weight: 700; }

.customization-container { height: 140px; }
.config-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.form-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; font-weight: 700; }
.sys-select {
    background: #110c22; border: 1px solid var(--glass-panel-border); color: white;
    padding: 6px 12px; border-radius: 6px; outline: none; font-size: 0.75rem; cursor: pointer;
}

/* Thread Pipeline Highlighter Accent Glow */
.r-active-trace { box-shadow: 0 0 0 2px #00ffaa, 0 0 15px #00ffaa !important; border-color: #00ffaa !important; }