:root{--bg:#FDFDF9;--card:#FFFFFF;--surface:#F4F6FB;--line:#DAE1ED;--fg:#0F172B;--muted:#898989;--primary:#222A76;--primary-ink:#ffffff;--primary-soft:#E8EAF6;--primary-on-dark:#8EA2FF;--brand:#254FAD;--code-bg:#0e1116;--code-bg2:#0b0d11;--code-line:#222834;--code-fg:#d8dde4;--code-muted:#8a93a3;--fixture:#894B00;--live:#22C55E;--high:#22C55E;--moderate:#E88050;--low:#DC3545;--green:#39B54A;--radius:16px;--radius-sm:12px;--shadow:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);--shadow-sm:0 1px 2px rgba(0,0,0,.06);--track-bg:#EAEDF4;--chip-off-bg:#E8EAF6;--live-bg:#DAFAC1;--overlay-bg:rgba(253,253,249,.6)}[data-theme=dark]{--bg:#0E1015;--card:#171B27;--surface:#0A0C12;--line:#232938;--fg:#EEF1FA;--muted:#8590A8;--primary:#4A5FC4;--primary-ink:#ffffff;--primary-soft:rgba(74,95,196,.16);--primary-on-dark:#8EA2FF;--brand:#8EA2FF;--fixture:#c9952b;--live:#22C55E;--high:#22C55E;--moderate:#E88050;--low:#FF6B7A;--green:#39B54A;--shadow:0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);--shadow-sm:0 1px 2px rgba(0,0,0,.3);--track-bg:#232938;--chip-off-bg:#232938;--live-bg:rgba(57,181,74,.18);--overlay-bg:rgba(10,12,18,.6)}*{box-sizing:border-box}html,body{margin:0;height:100%}body{font-family:Figtree,ui-sans-serif,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}#app{width:100%;height:100vh;padding:14px 22px;display:flex;flex-direction:column;gap:12px;overflow:hidden}.muted{color:var(--muted);font-size:13px}h2{margin:6px 0 4px;font-size:18px;font-weight:700}h3{margin:4px 0;font-size:15px;font-weight:700}h4{margin:8px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}.app-header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:9px}.app-logo{height:26px;width:auto;display:block;flex:0 0 auto}.app-title{flex:1;text-align:center;margin:0;font-size:23px;font-weight:800;letter-spacing:-.01em;background:linear-gradient(90deg,var(--primary),var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent}.lang-btn{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;font-weight:600;min-width:48px;box-shadow:var(--shadow-sm)}.lang-btn:hover{border-color:var(--primary);color:var(--primary)}.app-actions{display:flex;align-items:center;gap:8px}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:999px;cursor:pointer;box-shadow:var(--shadow-sm);padding:0}.icon-btn:hover{border-color:var(--primary);color:var(--primary)}.tabbar{display:flex;gap:6px}.tab{background:transparent;color:var(--muted);border:1px solid transparent;border-bottom:none;border-radius:12px 12px 0 0;padding:10px 18px;cursor:pointer;font-size:14px;font-weight:600}.tab:hover{color:var(--fg)}.tab.active{background:var(--card);color:var(--fg);border-color:var(--line);box-shadow:0 -2px 10px #16140f0a}.content{background:var(--card);border:1px solid var(--line);border-radius:0 16px 16px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow:auto;box-shadow:var(--shadow)}.tab-pane{display:contents}.tab-e2e{margin-left:auto;color:var(--primary);border:1px solid var(--line)}.tab-e2e.active{background:var(--primary);color:#fff;border-color:var(--primary)}.e2e-tab{display:flex;flex-direction:column;gap:12px}.e2e-tab .integration-grid{align-items:stretch}.e2e-tab .integration-left .stage{flex:1 1 0;min-height:280px}.e2e-tab .integration-right{gap:12px}.e2e-tab .calllog{flex:none;height:200px}.e2e-tab .integration-right .result-pane{flex:0 0 auto}.pane-title-row{display:flex;align-items:baseline;gap:10px}.pane-sub{font-size:12px;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--muted)}.stream-feed .calllog-row{grid-template-columns:minmax(120px,auto) 1fr;align-items:start}.stream-feed .cl-path{white-space:normal;overflow:visible;text-overflow:clip}.stream-feed .cl-method{white-space:nowrap}.e2e-results{display:flex;flex-direction:column;gap:14px}.e2e-interp{max-height:520px}@media (max-width: 1000px){.e2e-results{grid-template-columns:1fr}}.row-label{font-weight:700;font-size:14px;margin-right:4px}.ctl-label{font-size:13px;color:var(--muted)}.window-note{font-size:12px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap}.slider-ctl{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer}.slider-ctl .ctl-label{font-weight:600;color:var(--fg)}.slider-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:96px;height:4px;border-radius:999px;background:var(--line);outline:none;cursor:pointer}.slider-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--primary);cursor:pointer;border:2px solid var(--card);box-shadow:var(--shadow-sm)}.slider-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--primary);cursor:pointer;border:2px solid var(--card)}.slider-range:disabled{opacity:.5;cursor:not-allowed}.slider-val{font-family:ui-monospace,monospace;font-size:12px;font-weight:700;color:var(--primary);min-width:30px;text-align:right}button[disabled]{opacity:.45;cursor:not-allowed}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.field{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:9px 11px;box-shadow:var(--shadow-sm)}.field:focus{outline:none;border-color:var(--primary)}select.field{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:30px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23898989' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 10px center}select.field:hover{border-color:var(--primary)}select.field option{background:var(--card);color:var(--fg)}.btn-primary{background:var(--primary);color:var(--primary-ink);border:0;border-radius:999px;padding:10px 18px;cursor:pointer;font-weight:700;box-shadow:0 1px 2px #222a762e}.btn-primary:hover:not([disabled]){filter:brightness(1.05)}.btn-secondary{background:var(--card);color:var(--primary);border:1px solid var(--primary);border-radius:999px;padding:10px 18px;cursor:pointer;font-weight:600;box-shadow:var(--shadow-sm)}.btn-secondary:hover:not([disabled]){background:var(--primary-soft)}.status{font-size:13px;color:var(--fg)}.integration-tab{height:100%;display:flex;flex-direction:column;gap:12px;min-height:0}.integration-grid{flex:1;min-height:0;display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:stretch}.integration-left,.integration-right{display:flex;flex-direction:column;gap:10px;min-height:0}.stage{position:relative;flex:0 0 auto;height:40vh;min-height:220px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#14171d,#05070b);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}.video-wrap{position:relative;height:100%;max-width:100%}.stage-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#9aa3b2;pointer-events:none}.stage-icon{color:#3a4150}.stage-hint{font-size:13px}.stage-loading{background:#00000059;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--primary);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-dots:after{content:"";animation:dots 1.2s steps(4,end) infinite}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}to{content:""}}.preview{display:block;height:100%;width:100%;object-fit:cover;transition:opacity .25s ease}.face-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.result-pane{border:1px solid var(--line);border-radius:16px;padding:12px;flex:0 0 auto;background:var(--card);box-shadow:var(--shadow-sm)}.pane-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px;font-weight:700}.tel-panel{border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--surface);box-shadow:var(--shadow-sm)}.tel-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.tel-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-right:auto;font-weight:700}.tel-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--green);color:#fff}.tel-badge-off{background:var(--chip-off-bg);color:var(--muted)}.tel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;font-family:ui-monospace,monospace;font-size:11px}.tel-col-title{font-family:Figtree,system-ui,sans-serif;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:4px;font-weight:700}.tel-row{display:flex;justify-content:space-between;gap:8px;padding:1px 0}.tel-key{color:var(--muted)}.tel-val{color:var(--fg)}.tel-green{color:var(--green)}.tel-red{color:#d8493a}.tel-blue{color:var(--brand)}.tel-energy{height:5px;background:var(--track-bg);border-radius:4px;overflow:hidden;margin-top:10px}.tel-energy-fill{height:100%;width:0%;background:var(--primary)}.tel-counters{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);margin-top:8px}.calllog{border:1px solid var(--code-line);border-radius:16px;padding:12px;background:var(--code-bg2);flex:1;min-height:0;display:flex;flex-direction:column}.calllog-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--code-muted);margin-bottom:4px;font-weight:700}.calllog-hint{font-size:11px;color:var(--code-muted);margin-bottom:8px;line-height:1.4}.calllog-list{display:flex;flex-direction:column;gap:4px;flex:1;min-height:0;overflow:auto;font-family:ui-monospace,monospace;font-size:12px}.calllog-row{display:grid;grid-template-columns:64px 48px 1fr auto 22px;gap:8px;align-items:center;padding:3px 0;border-bottom:1px solid #1a1d24}.calllog-row.clickable{cursor:pointer;border-radius:6px;transition:background-color .12s ease}.calllog-row.clickable:hover{background:#ffffff0f}.calllog-row.clickable .cl-path{text-decoration:underline;text-decoration-color:#fff3;text-underline-offset:2px}.cl-open{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;color:var(--primary-on-dark);opacity:.75}.calllog-row.clickable:hover .cl-open{opacity:1;background:#ffffff14}.calllog-row.example{opacity:.78}.calllog-row.example:hover{opacity:1}.st-example,.cl-time{color:var(--code-muted)}.cl-method{color:var(--primary-on-dark);font-weight:700}.cl-path{color:var(--code-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cl-status{font-weight:700;text-align:right;color:var(--code-fg)}.st-ok{color:#3ddc84}.st-warn{color:#f0b449}.st-error{color:#ff6b6b}.st-fixture{color:#e0b057}.result-box{max-width:720px}.hci-card{border:1px solid var(--line);border-radius:16px;padding:16px;max-width:720px;background:var(--card);box-shadow:var(--shadow-sm)}.hci-card-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:10px}.hci-row{display:grid;grid-template-columns:200px 50px 80px 1fr;align-items:center;gap:10px;margin:7px 0}.hci-label{font-size:13px;font-weight:600}.hci-value{font-family:ui-monospace,monospace;text-align:right;font-weight:800;font-size:16px}.hci-band{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}.hci-bar{height:8px;background:var(--track-bg);border-radius:6px;overflow:hidden}.hci-fill{height:100%}.band-high{background:var(--high)}.band-moderate{background:var(--moderate)}.band-low{background:var(--low)}.band-text-high{color:var(--high)}.band-text-moderate{color:var(--moderate)}.band-text-low{color:var(--low)}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700}.badge-fixture{background:var(--primary-soft);color:var(--fixture)}.badge-live{background:var(--live-bg);color:var(--live)}.call-box{margin:8px 0 0}.retr-step{border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:14px;background:var(--card);box-shadow:var(--shadow-sm)}.step-head{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;margin-bottom:12px}.step-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font-size:13px;font-weight:700}.step-body{margin-top:12px}.step-sub{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px;font-weight:700}.retr-grid{display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;gap:18px;align-items:start}.retr-col{min-width:0}.retr-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}.retr-filters .field[type=date]{padding:6px 9px;font-size:12px}.chip-btn{padding:5px 12px;font-size:12px}.chip-btn.active{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}.filter-note{font-size:11px;margin-bottom:8px}.session-list{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto;padding-right:4px}.session-item{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;width:100%}.session-item:hover{border-color:var(--primary)}.session-item.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset;background:var(--primary-soft)}.si-id{font-weight:700;font-family:ui-monospace,monospace}.detail{min-height:60px}.detail-placeholder{padding:24px;text-align:center;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}.detail-head{font-weight:700;font-size:15px;margin-bottom:12px}.interp-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.interp-note-chip{font-size:11px;font-weight:500;color:var(--muted);background:var(--primary-soft);border:1px solid var(--line);border-radius:999px;padding:3px 10px}.detail-grid{display:grid;grid-template-columns:minmax(320px,.9fr) 1.1fr;gap:18px;align-items:start}.interpretation-text{font-size:13.5px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:12px;padding:4px 16px;max-height:520px;overflow:auto}.md h4,.md h5,.md h6{margin:14px 0 6px;font-size:14px;color:var(--fg)}.md p{margin:8px 0;line-height:1.6;color:var(--fg)}.md ul{margin:8px 0;padding-left:20px}.md li{margin:3px 0;line-height:1.5}.md strong{color:var(--primary)}.interp-progress{display:flex;align-items:center;gap:10px;padding:10px 0}.spinner-sm{width:18px;height:18px;border-width:2px}.call-trace{display:grid;grid-template-columns:1fr 1fr;gap:12px}.call-trace-vertical{grid-template-columns:1fr}.interp-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;align-items:stretch}.interp-grid>.interpretation-text{height:560px;max-height:560px}.interp-call{display:flex;flex-direction:column;gap:8px;height:560px}.interp-call .call-trace-vertical{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}.interp-call .call-trace-vertical .call-col:last-child{flex:1;min-height:0;display:flex;flex-direction:column}.interp-call .call-trace-vertical .call-col:last-child .code{flex:1;max-height:none}.interp-note{font-size:12px;color:var(--muted);background:var(--primary-soft);border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:8px;padding:7px 10px;margin-bottom:10px}.code{background:var(--code-bg2);border:1px solid var(--code-line);border-radius:10px;padding:10px;color:var(--code-fg);font-family:ui-monospace,monospace;font-size:11px;overflow:auto;max-height:340px;white-space:pre-wrap;word-break:break-word}.file-field{padding:7px 9px;font-size:12px;max-width:220px}.call-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1100;display:flex;align-items:center;justify-content:center;background:#0f111b80;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:24px}.call-modal{width:min(720px,94vw);max-height:88vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 70px #16140f47}.call-modal-head{display:flex;align-items:center;gap:10px}.call-modal-head .cl-method{color:var(--primary);font-weight:800;font-family:ui-monospace,monospace}.call-modal-path{font-weight:700;font-family:ui-monospace,monospace;font-size:14px}.call-modal-note{margin-left:auto;font-size:12px;color:var(--muted)}.call-modal-close{background:transparent;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:8px}.call-modal-close:hover{color:var(--fg);background:var(--surface)}.call-modal-section{display:flex;flex-direction:column;gap:6px}.call-modal-section .code{max-height:300px}.call-modal-actions{display:flex;gap:10px;flex-wrap:wrap}.copy-btn{font-size:13px;padding:8px 14px}.copy-btn.copied{color:var(--live);border-color:var(--live);background:var(--live-bg)}.gate-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--overlay-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.gate-modal{width:min(380px,90vw);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 26px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 70px #16140f2e;text-align:center}.gate-title{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}.gate-label{font-size:12px;font-weight:600;color:var(--muted);text-align:left;margin:4px 0 -6px}.gate-input{background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-size:15px}.gate-input:focus{outline:none;border-color:var(--primary)}.gate-submit{width:100%;padding:11px}.gate-error{color:var(--low);font-size:13px;min-height:16px}@media (max-width: 1000px){.integration-grid,.detail-grid,.call-trace{grid-template-columns:1fr}#app{height:auto;overflow:auto}}