:root{--bg-deep: #070d18;--bg-base: #0c1527;--bg-card: rgba(18, 30, 56, .78);--bg-card-hover: rgba(28, 46, 84, .92);--bg-elevated: #15223e;--border-subtle: #24385f;--border-coral: #f43f5e;--border-cyan: #06b6d4;--fg-primary: #ffffff;--fg-secondary: #e2e8f0;--fg-muted: #94a3b8;--accent-coral: #f43f5e;--accent-orange: #f97316;--accent-cyan: #06b6d4;--accent-mint: #10b981;--accent-amber: #f59e0b;--gradient-sunset: linear-gradient(135deg, #f43f5e 0%, #f97316 100%);--gradient-cyan-blue: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);--gradient-aurora-relay: radial-gradient(circle at 10% 10%, rgba(244, 63, 94, .2) 0%, transparent 50%), radial-gradient(circle at 90% 20%, rgba(6, 182, 212, .2) 0%, transparent 50%), radial-gradient(circle at 50% 90%, rgba(249, 115, 22, .15) 0%, transparent 60%);--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;--text-xs: clamp(.8rem, .75rem + .2vw, .9rem);--text-sm: clamp(.9rem, .85rem + .3vw, 1rem);--text-base: clamp(1rem, .95rem + .3vw, 1.125rem);--text-lg: clamp(1.15rem, 1.05rem + .4vw, 1.3rem);--text-xl: clamp(1.35rem, 1.2rem + .6vw, 1.6rem);--min-touch-target: 48px}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);background-color:var(--bg-deep);background-image:var(--gradient-aurora-relay);background-attachment:fixed;color:var(--fg-secondary);-webkit-font-smoothing:antialiased;min-height:100vh}.studio-nav-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding:.75rem 1.5rem;background:#0b1426d9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);position:sticky;top:0;z-index:50}.nav-left{display:flex;align-items:center;gap:1rem}.btn-back-studio{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;min-height:var(--min-touch-target);background:#f43f5e26;border:1px solid rgba(244,63,94,.4);border-radius:8px;color:#fff;text-decoration:none;font-weight:600;font-size:var(--text-sm);transition:all .2s ease}.btn-back-studio:hover{background:#f43f5e4d;border-color:var(--accent-coral);transform:translate(-2px)}.brand-divider{width:1px;height:28px;background:var(--border-subtle)}.brand-titles{display:flex;flex-direction:column}.brand-main{font-size:1.1rem;font-weight:800;color:#fff}.brand-accent-coral{color:var(--accent-coral)}.brand-sub{font-size:var(--text-xs);color:var(--fg-muted)}.nav-right{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.status-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;min-height:var(--min-touch-target);border-radius:999px;font-size:var(--text-sm);font-weight:600}.status-pill.live{background:#10b98126;border:1px solid var(--accent-mint);color:#10b981}.status-pill.sandbox{background:#f59e0b26;border:1px solid var(--accent-amber);color:#fbbf24}.status-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:pulse-dot 2s infinite ease-in-out}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}.telemetry-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.4rem .75rem;min-height:var(--min-touch-target);background:#ffffff0d;border:1px solid var(--border-subtle);border-radius:8px;font-family:var(--font-mono);font-size:var(--text-xs);color:#06b6d4}.btn-reset-demo{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;min-height:var(--min-touch-target);background:#f43f5e26;border:1px solid rgba(244,63,94,.4);border-radius:8px;color:#fda4af;font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:all .2s ease}.btn-reset-demo:hover:not(:disabled){background:#f43f5e47;border-color:var(--accent-coral);color:#fff}.spin-icon{display:inline-block;animation:spin 1s infinite linear}@keyframes spin{to{transform:rotate(360deg)}}.switcher-dropdown-wrap{position:relative}.btn-switcher-toggle{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;min-height:var(--min-touch-target);background:#06b6d426;border:1px solid rgba(6,182,212,.35);border-radius:8px;color:#fff;font-size:var(--text-sm);font-weight:600;cursor:pointer}.switcher-menu{position:absolute;right:0;top:calc(100% + 8px);width:270px;background:#0f182c;border:1px solid var(--border-subtle);border-radius:12px;box-shadow:0 16px 36px #00000080;padding:.5rem;z-index:100;display:flex;flex-direction:column;gap:.3rem}.switcher-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-radius:8px;text-decoration:none;color:var(--fg-secondary);transition:background .15s ease}.switcher-item:hover,.switcher-item.active{background:#ffffff14}.switcher-item strong{display:block;font-size:var(--text-sm);color:#fff}.switcher-item small{display:block;font-size:var(--text-xs);color:var(--fg-muted)}.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.dot-emerald{background:#10b981}.dot-indigo{background:#8b5cf6}.dot-coral{background:#f43f5e}.dot-gold{background:#fbbf24}.relay-main-container{max-width:1300px;margin:0 auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.telemetry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}.kpi-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;padding:1.25rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:.4rem;transition:transform .2s ease,border-color .2s ease}.kpi-card:hover{transform:translateY(-2px)}.kpi-card.card-cyan{border-top:3px solid var(--accent-cyan)}.kpi-card.card-mint{border-top:3px solid var(--accent-mint)}.kpi-card.card-amber{border-top:3px solid var(--accent-amber)}.kpi-card.card-coral{border-top:3px solid var(--accent-coral)}.kpi-header{display:flex;justify-content:space-between;align-items:center}.kpi-label{font-size:var(--text-xs);font-weight:700;color:var(--fg-muted);letter-spacing:.05em}.kpi-value{font-size:2rem;font-weight:800;color:#fff}.text-mint{color:#10b981!important}.text-amber{color:#fbbf24!important}.text-coral{color:#f43f5e!important}.text-cyan{color:#06b6d4!important}.kpi-subtext{font-size:var(--text-xs);color:var(--fg-muted)}.simulator-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}.simulator-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:.75rem}.simulator-header h3{margin:0;font-size:1.25rem;color:#fff}.simulator-subtitle{margin:.25rem 0 0;font-size:var(--text-sm);color:var(--fg-muted)}.badge-free{background:#06b6d426;border:1px solid var(--accent-cyan);color:#06b6d4;padding:.3rem .8rem;border-radius:999px;font-size:var(--text-xs);font-weight:700}.simulator-buttons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.75rem}.btn-scenario{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;min-height:var(--min-touch-target);border-radius:12px;cursor:pointer;border:1px solid var(--border-subtle);background:#ffffff08;color:#fff;text-align:left;transition:all .2s ease}.btn-scenario:hover:not(:disabled){transform:translateY(-2px);background:#ffffff14}.btn-scenario:disabled{opacity:.5;cursor:not-allowed}.btn-valid:hover:not(:disabled){border-color:var(--accent-mint);box-shadow:0 4px 16px #10b98133}.btn-duplicate:hover:not(:disabled){border-color:var(--accent-amber);box-shadow:0 4px 16px #f59e0b33}.btn-bad-sig:hover:not(:disabled){border-color:var(--accent-coral);box-shadow:0 4px 16px #f43f5e33}.btn-fail:hover:not(:disabled){border-color:var(--accent-orange);box-shadow:0 4px 16px #f9731633}.btn-scenario-icon{font-size:1.5rem;flex-shrink:0}.btn-scenario strong{display:block;font-size:var(--text-sm)}.btn-scenario small{display:block;font-size:var(--text-xs);color:var(--fg-muted)}.execution-feedback-bar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:8px;font-family:var(--font-mono);font-size:var(--text-sm)}.execution-feedback-bar.success{background:#10b98126;border:1px solid var(--accent-mint);color:#34d399}.execution-feedback-bar.warning{background:#f59e0b26;border:1px solid var(--accent-amber);color:#fbbf24}.execution-feedback-bar.danger{background:#f43f5e26;border:1px solid var(--accent-coral);color:#fda4af}.status-code-badge{padding:.2rem .5rem;border-radius:4px;background:#0000004d;font-weight:700}.backoff-timeline-box{background:#00000040;border:1px solid var(--border-subtle);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.timeline-title{font-size:var(--text-xs);font-weight:700;color:var(--fg-muted)}.timeline-steps{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}.step-node{display:flex;align-items:center;gap:.5rem;font-size:var(--text-xs);color:var(--fg-muted)}.step-node.active{color:#34d399}.step-node.danger{color:#fda4af}.node-circle{width:28px;height:28px;border-radius:50%;background:#ffffff1a;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-xs)}.step-node.active .node-circle{background:#10b981;color:#fff}.step-node.danger .node-circle{background:#f43f5e;color:#fff}.timeline-line{flex:1;height:2px;background:var(--border-subtle);min-width:20px}.dlq-section-card,.table-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.dlq-header,.table-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}.dlq-header h3,.table-header h3{margin:0;font-size:1.2rem;color:#fff}.dlq-subtitle,.table-subtitle{margin:.25rem 0 0;font-size:var(--text-sm);color:var(--fg-muted)}.dlq-counter-pill{background:#f43f5e26;border:1px solid var(--accent-coral);color:#f43f5e;padding:.3rem .8rem;border-radius:999px;font-size:var(--text-xs);font-weight:700}.empty-dlq-state{text-align:center;padding:2rem;color:var(--fg-muted)}.empty-icon{font-size:2.5rem;display:block;margin-bottom:.5rem}.swipe-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--border-subtle);border-radius:10px}.data-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);text-align:left;min-width:650px}.data-table th{background:#ffffff0d;color:var(--fg-muted);font-weight:600;padding:.85rem 1rem;border-bottom:1px solid var(--border-subtle)}.data-table td{padding:.85rem 1rem;border-bottom:1px solid rgba(255,255,255,.04);color:var(--fg-secondary)}.mono-text{font-family:var(--font-mono);font-size:var(--text-xs)}.btn-inspect-link{background:none;border:none;color:#06b6d4;cursor:pointer;font-family:inherit;font-size:inherit;padding:0;text-decoration:underline}.btn-replay-action{background:var(--gradient-sunset);border:none;border-radius:6px;color:#fff;padding:.4rem .8rem;min-height:38px;font-weight:700;font-size:var(--text-xs);cursor:pointer;transition:transform .15s ease}.btn-replay-action:hover:not(:disabled){transform:translateY(-1px)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:200}.inspector-modal{width:100%;max-width:650px;background:#0f182c;border:1px solid rgba(6,182,212,.5);border-radius:16px;box-shadow:0 24px 60px #0009,0 0 30px #06b6d426;padding:1.75rem;display:flex;flex-direction:column;gap:1.25rem}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-title-row{display:flex;align-items:center;gap:.75rem}.modal-title-row h3{margin:0;font-size:1.2rem;color:#fff}.modal-sub{font-size:var(--text-xs);color:var(--fg-muted)}.btn-close-modal{background:none;border:none;color:var(--fg-muted);font-size:1.2rem;cursor:pointer}.info-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:var(--text-sm)}.info-label{color:var(--fg-muted)}.badge-status-valid{color:#34d399;font-weight:700}.payload-box{margin-top:.75rem;background:#0006;border:1px solid var(--border-subtle);border-radius:8px;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.payload-header{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-xs);color:var(--fg-muted)}.btn-copy-payload{background:#ffffff1a;border:none;border-radius:4px;color:#fff;font-size:var(--text-xs);padding:.2rem .5rem;cursor:pointer}.payload-code{margin:0;font-family:var(--font-mono);font-size:var(--text-xs);color:#38bdf8;max-height:220px;overflow-y:auto}.btn-done-modal{width:100%;min-height:var(--min-touch-target);background:var(--gradient-cyan-blue);border:none;border-radius:10px;color:#fff;font-size:var(--text-base);font-weight:700;cursor:pointer}