/* ════════════════════════════════════════════════════════════════
           THORIUM v9.3.8 SHARED CSS — TARGET UPLOAD GEOMETRY + FOOTER + FLAG PARADE + OTTO
           v9.3.8: restore viewport-bound CE chamber and responsive 440px-capped hero
           v9.3.7: moved the complete animated frame and Upload heading down ten pixels
           v9.3.6: single inset animated frame with title outside its complete glow envelope
           v9.3.5: real animated top-border line inset inside the empty Upload frame
           v9.3.4: six-pixel PROBAR clearance; Upload title shifted five pixels inward
           v9.2.4: target-matched Upload stage; heading overlays the drop-zone and its top edge meets PROBAR
           v9.2.3: explicit color-emoji font stack for regional-indicator flags
           v9.2.2: OTTO button position bottom: 66px (above FLAG PARADE)
           ════════════════════════════════════════════════════════════════ */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        :root {
            /* Z-INDEX LAYER SYSTEM (0-9) */
            --z-0-background: 0;
            --z-1-graphic: 1;
            --z-2-text: 2;
            --z-3-graphic: 3;
            --z-4-text: 4;
            --z-5-graphic: 5;
            --z-6-text: 6;
            --z-7-graphic: 7;
            --z-8-text: 8;
            --z-9-interaction: 9;
            /* SYSTEM LAYERS */
            --z-dropdown: 100;
            --z-modal: 500;
            --z-notification: 1000;
            --z-critical: 9999;
            /* COLORS */
            --bg-dark: #0a0f0a;
            --bg-card: #14141e;
            --green: #1db988;
            --gold: #c9a227;
            --cyan: #00d4ff;
            --text: #e0e0e0;
            --text-dim: #888;
            --purple: #bf5fff;
        }
        
        html, body {
            min-height: 100%;
            background: var(--bg-dark);
            color: var(--text);
            font-family: 'Segoe UI', Arial, sans-serif;
            overflow-y: auto;
        }
        
        .viewport-locked {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: visible;
        }
        
        /* NAV */
        .nav {
            height: 80px;
            flex-shrink: 0;
            background: linear-gradient(135deg, #0a0f0a 0%, #14141e 100%);
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 2px solid rgba(29,185,136,0.2);
        }
        .nav-brand { display: flex; align-items: center; gap: 12px; }
        .nav-logo {
            width: 56px; height: 56px;
            background: linear-gradient(135deg, var(--green), var(--gold));
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.8rem;
        }
        .nav-title { color: var(--green); font-size: 1.4rem; font-weight: 700; letter-spacing: 2px; }
        .nav-subtitle { color: var(--text-dim); font-size: 0.7rem; }
        .nav-center { display: flex; align-items: center; gap: 15px; }
        .core-status { background: var(--green); color: #000; padding: 8px 16px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
        .nav-right { display: flex; align-items: center; gap: 12px; }
        .wallet-status { color: #ff6b6b; font-size: 0.8rem; }
        .btn-connect { background: var(--green); color: #000; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; }
        .btn-settings { background: rgba(29,185,136,0.1); border: 1px solid rgba(29,185,136,0.3); color: var(--green); padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 1.2rem; }
        
        /* PROGRESS BAR */
        .progress-bar {
            height: 70px; flex-shrink: 0;
            background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%);
            border-bottom: 1px solid rgba(29,185,136,0.2);
            display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
        }
        .progress-left { display: flex; flex-direction: column; }
        .progress-left-label { color: #bf5fff; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; }
        .progress-circles { display: flex; align-items: center; gap: 0; }
        .step-wrapper { display: flex; flex-direction: column; align-items: center; padding: 0 20px; }
        .step-circle { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; margin-bottom: 4px; }
        .step-circle.s5 { border: 2px solid #8b7355; color: #8b7355; background: rgba(139,115,85,0.15); }
        .step-circle.s4 { border: 2px solid #00d4ff; color: #00d4ff; background: rgba(0,212,255,0.15); }
        .step-circle.s3 { border: 2px solid #ff3366; color: #ff3366; background: rgba(255,51,102,0.15); }
        .step-circle.s2 { border: 2px solid #ff9933; color: #ff9933; background: rgba(255,153,51,0.15); }
        .step-circle.s1 { border: 2px solid #d4af37; color: #d4af37; background: rgba(212,175,55,0.15); }
        .step-circle.step-green { border: 2px solid var(--green) !important; color: var(--green) !important; background: rgba(29,185,136,0.25) !important; box-shadow: 0 0 8px rgba(29,185,136,0.4); transition: all 0.4s ease; }
        /* VERIFICATION CHECKLIST */
        .verify-checklist { text-align:left; width:100%; max-width:360px; margin:12px auto 0; }
        .verify-row { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:0.75rem; color:var(--text-dim); cursor:pointer; }
        .verify-row:hover { color:var(--text); }
        .verify-check { width:16px; height:16px; border:1px solid rgba(29,185,136,0.4); border-radius:3px; background:rgba(0,0,0,0.3); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.6rem; color:var(--green); transition:all 0.2s; }
        .verify-row.checked .verify-check { background:rgba(29,185,136,0.2); border-color:var(--green); }
        .verify-row.checked { color:var(--green); }
        .verify-actions { display:flex; gap:8px; margin-top:12px; justify-content:center; }
        .btn-accept-all { padding:6px 14px; background:rgba(29,185,136,0.15); border:1px solid var(--green); color:var(--green); border-radius:5px; cursor:pointer; font-size:0.7rem; font-weight:600; transition:all 0.3s; }
        .btn-accept-all:hover { background:rgba(29,185,136,0.25); }
        .btn-accept-all.accepted { background:var(--green); color:#000; }
        .btn-clear-file { padding:6px 14px; background:rgba(255,107,107,0.15); border:1px solid #ff6b6b; color:#ff6b6b; border-radius:5px; cursor:pointer; font-size:0.7rem; font-weight:600; transition:all 0.3s; }
        .btn-clear-file:hover { background:rgba(255,107,107,0.25); }
        .step-label { font-size: 0.65rem; text-transform: uppercase; color: var(--text-dim); }
        .step-connector { width: 40px; height: 2px; background: #333; }
        .progress-right { text-align: right; }
        .mintables { color: var(--gold); font-size: 0.85rem; font-weight: 600; font-family: Georgia, serif; }
        .mintables-sub { color: var(--text-dim); font-size: 0.65rem; }
        
        /* MAIN */
        .main { flex: 1; display: flex; padding: 12px 16px; gap: 12px; min-height: 0; overflow: hidden; }
        body:not([data-convergence-runtime]) .viewport-locked > .main {
            height: calc(100vh - 150px);
            flex: 0 0 calc(100vh - 150px);
        }
        /* CONVERGENCE stays inside the same visible shell chamber at every
           desktop height. A fixed 745px minimum previously pushed its workflow
           controls below short THORIUM Browser viewports. */
        body[data-reactor-mode="convergence"] .viewport-locked > .main {
            height: calc(100vh - 150px);
            flex-basis: calc(100vh - 150px);
        }
        
        /* SIDEBAR */
        /* Reactor column width — SHELL owns it (symmetrical with .right-panel). 250px per Anitakio 2026-07-13 FINAL. Widgets (PROTRAC) must NOT override. */
        .sidebar { width: 250px; flex-shrink: 0; background: var(--bg-card); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; overflow-y: auto; }
        /* SIDEBAR — Styled by Process Tracker Module (lc- classes injected at runtime) */
        
        /* CONTENT */
        .content { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
        .content-header { flex-shrink: 0; margin-bottom: 10px; }
        .content-title { color: var(--gold); font-size: 1.1rem; font-family: Georgia, serif; }
        .content-subtitle { color: var(--text-dim); font-size: 0.75rem; }
        
        /* UPLOAD ZONE */
        .upload-zone {
            flex: 1; min-height: 0;
            border-radius: 12px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 25px; background: rgba(0,0,0,0.2); cursor: pointer; transition: all 0.3s;
            position: relative;
        }
        .upload-zone:hover { background: rgba(29,185,136,0.05); }
        /* Target-matched Upload landing geometry. The heading no longer
           consumes a row; it floats above the intake surface. Six pixels of
           the main region's top gutter remain visible so PROBAR cannot clip
           the beckoning perimeter. */
        .upload-target-stage { position: relative; }
        body:not([data-convergence-runtime]) .content > .upload-target-stage {
            margin-top: -6px;
        }
        .upload-target-stage > .content-header {
            position: absolute;
            top: 38px;
            left: 22px;
            right: 0;
            z-index: var(--z-6-text);
            margin: 0;
            pointer-events: none;
        }
        /* The perimeter gains the former 75px header/gutter band, while the
           target's hero and intake controls retain their original coordinates. */
        .upload-target-stage > .upload-zone { padding-top: 100px; }
        /* One complete inset frame replaces the competing outer shadow and
           separate top line. Its maximum six-pixel glow envelope remains
           inside the drop zone on all four sides. The title begins beyond
           that envelope horizontally and vertically. */
        @keyframes uploadFramePulse {
            0%, 100% {
                border-color: rgba(0,212,255,0.62);
                box-shadow: 0 0 3px 0 rgba(0,212,255,0.4);
            }
            50% {
                border-color: rgba(0,212,255,1);
                box-shadow: 0 0 5px 1px rgba(0,212,255,0.88);
            }
        }
        .upload-target-stage > .upload-zone.thr-beckon-glow {
            animation: none;
            box-shadow: none;
        }
        .upload-target-stage > .upload-zone.thr-beckon-glow::before {
            content: "";
            position: absolute;
            inset: 22px 8px 8px;
            border: 2px solid rgba(0,212,255,0.62);
            border-radius: 12px;
            background: transparent;
            pointer-events: none;
            z-index: var(--z-5-graphic);
            animation: uploadFramePulse 2.4s ease-in-out infinite;
        }
        .upload-target-stage > .content-header a { pointer-events: auto; }
        .upload-text { position: relative; z-index: 2; color: var(--green); font-size: 0.9rem; font-weight: 600; letter-spacing: 2px; margin-bottom: 5px; }
        .upload-subtext { position: relative; z-index: 2; color: var(--text-dim); font-size: 0.75rem; }
        .upload-warning { position: relative; z-index: 2; color: #ff9933; font-size: 0.7rem; margin-top: 8px; }
        .upload-target-stage > .upload-zone .upload-logo { transform: translateY(-3px); }
        body[data-convergence-runtime] .upload-target-stage > .upload-zone .upload-logo img {
            width: min(440px, 46vw, 54vh) !important;
            max-width: 440px !important;
            height: auto;
        }
        .upload-logo { display: flex; align-items: center; justify-content: center; }
        
        /* BOTTOM STACK */
        .bottom-stack { flex-shrink: 0; margin-top: 10px; }
        .veras-bar { height: 32px; background: rgba(0,0,0,0.3); border: 1px solid rgba(29,185,136,0.2); border-radius: 5px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
        .veras-label { color: var(--green); font-size: 0.75rem; font-weight: 600; }
        .veras-status { color: var(--text-dim); font-size: 0.75rem; }
        .ticker-bar { height: 28px; background: var(--bg-card); border-radius: 5px; padding: 0 10px; display: flex; align-items: center; gap: 20px; font-size: 0.7rem; color: var(--text-dim); margin-bottom: 6px; overflow: hidden; }
        .ticker-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
        .bottom-bar { height: 42px; background: var(--bg-card); border-radius: 6px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; }
        .bottom-bar-left { display: flex; align-items: center; gap: 12px; color: var(--text-dim); font-size: 0.75rem; }
        .btn-chamber { background: linear-gradient(135deg, var(--green), #15a070); color: #000; border: none; padding: 8px 20px; border-radius: 6px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; opacity: 0.5; pointer-events: none; transition: all 0.3s; }
        .btn-chamber.btn-ready { opacity: 1; pointer-events: auto; animation: btnFlash 1.5s ease-in-out infinite; }
        @keyframes btnFlash { 0%, 100% { box-shadow: 0 0 5px rgba(29,185,136,0.5); } 50% { box-shadow: 0 0 20px rgba(29,185,136,0.8), 0 0 30px rgba(29,185,136,0.4); } }
        
        /* SECTIONS */
        .section { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
        .section.active { display: flex; }
        .section-inner { flex: 1; overflow-y: auto; padding: 10px 0; }
        .form-group { margin-bottom: 15px; }
        .form-label { display: block; color: var(--gold); font-size: 0.85rem; margin-bottom: 6px; font-weight: 600; }
        .form-input { width: 100%; padding: 10px 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,39,0.3); border-radius: 6px; color: var(--gold); font-size: 0.9rem; transition: border-color 0.2s; }
        .form-input:focus { outline: none; border-color: var(--gold); }
        .form-input::placeholder { color: var(--text-dim); }
        .form-textarea { min-height: 80px; max-height: 150px; resize: vertical; font-family: inherit; }
        .form-hint { font-size: 0.7rem; color: var(--text-dim); margin-top: 4px; }
        .btn-primary { background: linear-gradient(135deg, var(--green), #15a070); color: #000; border: none; padding: 12px 24px; border-radius: 6px; font-weight: 700; cursor: pointer; font-size: 0.9rem; transition: all 0.3s; }
        .btn-primary:hover { transform: scale(1.02); box-shadow: 0 0 15px rgba(29,185,136,0.5); }
        .btn-secondary { background: rgba(255,255,255,0.1); color: var(--text); border: 1px solid rgba(255,255,255,0.2); padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: all 0.3s; }
        .btn-secondary:hover { background: rgba(255,255,255,0.15); }
        
        /* RIGHT PANEL */
        .right-panel { width: 250px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; } /* 250px symmetrical with .sidebar — SHELL owns it (Anitakio 2026-07-13 FINAL). */
        .panel-section { background: var(--bg-card); border-radius: 8px; padding: 12px; }
        .panel-title { color: var(--cyan); font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
        .test-btn { width: 100%; padding: 8px; margin-bottom: 6px; border: 1px solid var(--green); background: rgba(29,185,136,0.1); color: var(--green); border-radius: 4px; cursor: pointer; font-size: 0.75rem; }
        .test-btn:last-child { margin-bottom: 0; }
        .cost-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.75rem; }
        .cost-label { color: var(--text-dim); }
        .cost-value { color: var(--green); }
        .cost-total { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 6px; padding-top: 6px; font-weight: 600; }
        .cap1-checklist { font-size: 0.75rem; }
        .cap1-item { padding: 4px 0; color: var(--text-dim); }
        
        /* FOOTER */
        .sphering-footer { flex-shrink: 0; background: linear-gradient(180deg, rgba(10,10,18,0.2) 0%, rgba(60,20,90,0.5) 50%, rgba(60,20,90,0.9) 100%); padding: 30px 40px 20px; border-top: none; }
        .footer-top-row { display: flex; justify-content: center; align-items: flex-end; gap: 60px; margin-bottom: 20px; min-height: 100px; padding-top: 15px; }
        .footer-badge-col, .footer-qr-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 100px; }
        .cap1-placeholder, .qr-placeholder { width: 70px; height: 70px; border: 2px dashed rgba(191,95,255,0.3); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 8px; }
        .cap1-placeholder-text, .qr-placeholder-text { font-size: 0.55rem; color: var(--text-dim); text-align: center; line-height: 1.2; }
        .cap1-label, .qr-label { font-size: 0.6rem; color: var(--text-dim); text-align: center; line-height: 1.4; }
        .footer-center-col { display: flex; flex-direction: column; align-items: center; }
        .rad-power-btn { display: flex; flex-direction: column; align-items: center; padding: 8px 18px; background: linear-gradient(135deg, rgba(91,45,125,0.7), rgba(60,20,90,0.8)); border: 1px solid var(--purple); border-radius: 6px; text-decoration: none; transition: all 0.3s; margin-bottom: 6px; position: relative; box-shadow: 0 0 12px rgba(191,95,255,0.4), 0 0 24px rgba(191,95,255,0.2), inset 0 0 8px rgba(191,95,255,0.15); animation: radPowerPulse 2s ease-in-out infinite; }
        @keyframes radPowerPulse { 0%, 100% { box-shadow: 0 0 12px rgba(191,95,255,0.4), 0 0 24px rgba(191,95,255,0.2), inset 0 0 8px rgba(191,95,255,0.15); } 50% { box-shadow: 0 0 18px rgba(191,95,255,0.5), 0 0 36px rgba(191,95,255,0.3), inset 0 0 12px rgba(191,95,255,0.2); } }
        .rad-power-btn:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(191,95,255,0.6), 0 0 40px rgba(191,95,255,0.4), inset 0 0 15px rgba(191,95,255,0.3); }
        .rad-power-line1 { color: #e0b0ff; font-size: 0.75rem; font-weight: bold; letter-spacing: 1px; text-shadow: 0 0 6px rgba(191,95,255,0.6); }
        .rad-power-line2 { color: var(--purple); font-size: 0.5rem; text-transform: uppercase; text-shadow: 0 0 4px rgba(191,95,255,0.4); }
        .rad-power-doc { color: var(--cyan); font-size: 0.7rem; text-decoration: none; }
        .rad-power-doc:hover { text-decoration: underline; }
        .footer-years { text-align: center; color: var(--text-dim); font-size: 0.75rem; margin-bottom: 10px; }
        .footer-help { text-align: center; color: var(--text-dim); font-size: 0.7rem; margin-bottom: 15px; line-height: 1.6; }
        .footer-help a { color: var(--cyan); text-decoration: none; }
        .footer-help a:hover { text-decoration: underline; }
        .footer-legal { text-align: center; color: #666; font-size: 0.6rem; line-height: 1.5; max-width: 900px; margin: 0 auto; }
        .footer-legal a { color: var(--green); }
        
        /* OTTO BUTTON */
        .otto-note-btn { position: fixed; bottom: 66px; right: 20px; width: 60px; height: 60px; background: linear-gradient(135deg, var(--green), var(--gold)); border: none; border-radius: 50%; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(29,185,136,0.4); transition: all 0.3s; z-index: 1000; }
        .otto-note-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(29,185,136,0.6); }
        .otto-note-btn .otto-icon { font-size: 1.5rem; }
        .otto-note-btn .otto-label { font-size: 0.5rem; color: #000; font-weight: bold; }
        .otto-note-btn .tooltip { position: absolute; right: 70px; background: var(--bg-card); color: var(--text); padding: 8px 12px; border-radius: 6px; font-size: 0.75rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s; border: 1px solid var(--green); }
        .otto-note-btn:hover .tooltip { opacity: 1; }
        /* OTTO AI QUERY MODAL */
        .otto-modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:10001; align-items:center; justify-content:center; }
        .otto-modal-overlay.active { display:flex; }
        .otto-modal { background:var(--bg-card); border:2px solid var(--green); border-radius:12px; width:420px; max-width:90vw; max-height:80vh; overflow-y:auto; padding:0; box-shadow:0 0 40px rgba(29,185,136,0.3); }
        .otto-modal-header { padding:20px 24px 12px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(29,185,136,0.2); }
        .otto-modal-header h3 { color:var(--green); margin:0; font-size:1.1rem; display:flex; align-items:center; gap:8px; }
        .otto-modal-close { background:none; border:none; color:var(--text-dim); font-size:1.3rem; cursor:pointer; padding:4px 8px; }
        .otto-modal-close:hover { color:#ff6b6b; }
        .otto-modal-body { padding:20px 24px; }
        .otto-modal-greeting { color:var(--text-dim); font-size:0.85rem; line-height:1.6; margin-bottom:16px; }
        .otto-modal-textarea { width:100%; min-height:100px; background:rgba(0,0,0,0.3); border:1px solid rgba(29,185,136,0.3); border-radius:8px; color:var(--text); font-family:inherit; font-size:0.85rem; padding:12px; resize:vertical; }
        .otto-modal-textarea:focus { outline:none; border-color:var(--green); box-shadow:0 0 8px rgba(29,185,136,0.2); }
        .otto-modal-textarea::placeholder { color:rgba(255,255,255,0.25); }
        .otto-modal-actions { padding:16px 24px 20px; display:flex; gap:10px; }
        .otto-btn-ask { flex:1; padding:10px 16px; background:linear-gradient(135deg,var(--green),#15a070); border:none; border-radius:6px; color:#000; font-weight:600; font-size:0.8rem; cursor:pointer; transition:all 0.3s; }
        .otto-btn-ask:hover { box-shadow:0 0 12px rgba(29,185,136,0.4); }
        .otto-btn-note { flex:1; padding:10px 16px; background:rgba(201,162,39,0.15); border:1px solid var(--gold); border-radius:6px; color:var(--gold); font-weight:600; font-size:0.8rem; cursor:pointer; transition:all 0.3s; }
        .otto-btn-note:hover { background:rgba(201,162,39,0.25); }
        .otto-response-area { margin-top:16px; padding:14px; background:rgba(0,0,0,0.3); border:1px solid rgba(29,185,136,0.2); border-radius:8px; color:var(--text); font-size:0.82rem; line-height:1.6; display:none; }
        .otto-response-area.active { display:block; }
        .otto-response-label { color:var(--green); font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
        
        /* FLAG PARADE */
        .flag-parade { flex-shrink: 0; height: 56px; background: rgba(0,0,0,0.3); border-top: 1px solid rgba(29,185,136,0.15); border-bottom: 1px solid rgba(29,185,136,0.15); position: relative; overflow: hidden; }
        .flag-parade-track { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; animation: paradeScroll 60s linear infinite; }
        @keyframes paradeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .parade-item { flex-shrink: 0; width: 36px; height: 100%; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease, filter 0.3s ease; }
        .parade-item.flag-type img { width: 28px; height: auto; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
        .parade-item.emoji-type {
            font-size: 1.3rem;
            /* Regional-indicator pairs otherwise fall back to bare initials
               on some Chromium/Windows font stacks. */
            font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", "Noto Emoji", sans-serif;
            font-variant-emoji: emoji;
            unicode-bidi: isolate;
            direction: ltr;
        }
        .parade-item.glowing { filter: drop-shadow(0 0 8px rgba(29,185,136,0.8)); }
        
        /* Z-INDEX LAYER CLASSES */
        .z-0-background { position: absolute; z-index: var(--z-0-background); }
        .z-1-graphic { position: absolute; z-index: var(--z-1-graphic); pointer-events: none; }
        .z-2-text { position: relative; z-index: var(--z-2-text); }
        .z-3-graphic { position: absolute; z-index: var(--z-3-graphic); pointer-events: none; }
        .z-4-text { position: relative; z-index: var(--z-4-text); }
        .z-5-graphic { position: absolute; z-index: var(--z-5-graphic); pointer-events: none; }
        .z-6-text { position: relative; z-index: var(--z-6-text); }
        .z-7-graphic { position: absolute; z-index: var(--z-7-graphic); pointer-events: none; }
        .z-8-text { position: relative; z-index: var(--z-8-text); }
        .z-9-interaction { position: relative; z-index: var(--z-9-interaction); }
        .z-dropdown { position: absolute; z-index: var(--z-dropdown); }
        .z-modal { position: fixed; z-index: var(--z-modal); }
        .z-notification { position: fixed; z-index: var(--z-notification); }
        .z-critical { position: fixed; z-index: var(--z-critical); }
        .stack-context { position: relative; z-index: 0; isolation: isolate; }

/* ═══════════════════════════════════════════════════════════════════════════
 * PROCESS TRACKER CSS RULES v1.1 — APPENDED FOR v9.1.0
 * SPHERING³ LLC | March 2026
 * ═══════════════════════════════════════════════════════════════════════════ */
.lc-sidebar { display:flex;flex-direction:column;overflow-y:auto; }
.lc-title { color:var(--gold, #c9a227);font-size:0.86rem;font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px; }
.lc-card { display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px;border-radius:6px;border-left:3px solid transparent;cursor:pointer;opacity:0.4;transition:opacity 0.3s; }
.lc-card.lc-active { opacity:1.0; }
.lc-card.lc-expanded { opacity:1.0;background:rgba(29,185,136,0.08); }
.lc-card:hover { background:rgba(255,255,255,0.05); }
.lc-card .lc-circle { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:0.85rem;flex-shrink:0; }
.lc-card .lc-info { flex:1;min-width:0; }
.lc-card .lc-info-title { font-size:0.92rem;font-weight:600; }
.lc-card .lc-info-desc { font-size:0.75rem;color:var(--text-dim, #888); }
.lc-card .lc-check { display:none;color:var(--green, #1db988);font-size:0.9rem;margin-left:auto; }
.lc-card.lc-completed .lc-check { display:block; }
.lc-substeps { display:none;width:100%;padding:10px 0 5px 40px;border-top:1px solid rgba(255,255,255,0.05);margin-top:10px; }
.lc-card.lc-expanded .lc-substeps { display:block; }
.lc-substep { display:flex;align-items:center;gap:8px;padding:5px 0;font-size:0.7rem;color:var(--text-dim, #888); }
.lc-led { width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.2);flex-shrink:0;transition:all 0.3s; }
.lc-substep.lc-lit { color:var(--green, #1db988); }
.lc-substep.lc-lit .lc-led { background:var(--green, #1db988);border-color:var(--green, #1db988);box-shadow:0 0 6px var(--green, #1db988); }