@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap";
.hls-root{color:#e4e4e7;-webkit-font-smoothing:antialiased;background-color:#000;min-height:100vh;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif}.hls-root ::-webkit-scrollbar{width:6px;height:6px}.hls-root ::-webkit-scrollbar-track{background:0 0}.hls-root ::-webkit-scrollbar-thumb{background:#27272a;border-radius:9999px}.hls-root ::-webkit-scrollbar-thumb:hover{background:#3f3f46}.hls-navbar{z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:#000000d9;border-bottom:1px solid #18181b;justify-content:space-between;align-items:center;height:56px;padding:0 24px;display:flex;position:sticky;top:0}.hls-navbar-left{align-items:center;gap:16px;display:flex}.hls-brand{align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.hls-brand-icon{color:#a855f7;width:18px;height:18px}.hls-brand-name{color:#fff;font-weight:700}.hls-brand-slash{color:#3f3f46;font-weight:400}.hls-brand-sub{color:#71717a;font-weight:500}.hls-brand-active{color:#f4f4f5;font-weight:600}.hls-navbar-right{align-items:center;gap:12px;display:flex}.hls-back-btn{color:#a1a1aa;background-color:#09090b;border:1px solid #27272a;border-radius:6px;align-items:center;gap:6px;height:32px;padding:0 12px;font-size:12px;font-weight:600;text-decoration:none;transition:all .15s;display:inline-flex}.hls-back-btn:hover{color:#fff;background-color:#18181b;border-color:#3f3f46}.hls-container{flex-direction:column;gap:24px;max-width:1280px;margin:0 auto;padding:32px 24px 80px;display:flex}.hls-card{background-color:#09090b;border:1px solid #18181b;border-radius:12px;flex-direction:column;gap:16px;padding:20px;display:flex}.hls-card-header{justify-content:space-between;align-items:center;display:flex}.hls-card-title{color:#fff;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:700;display:flex}.hls-input-group{flex-direction:column;gap:6px;display:flex}.hls-label{letter-spacing:.05em;color:#71717a;text-transform:uppercase;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600}.hls-input{color:#f4f4f5;background-color:#000;border:1px solid #27272a;border-radius:6px;width:100%;height:38px;padding:0 12px;font-family:JetBrains Mono,monospace;font-size:13px;transition:border-color .15s}.hls-input:focus{border-color:#52525b;outline:none}.hls-presets-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.hls-preset-btn{color:#a1a1aa;cursor:pointer;background-color:#121215;border:1px solid #27272a;border-radius:6px;height:28px;padding:0 10px;font-size:12px;font-weight:500;transition:all .15s}.hls-preset-btn:hover{color:#fff;background-color:#18181b;border-color:#3f3f46}.hls-preset-btn.is-active{color:#a855f7;background-color:#a855f71f;border-color:#a855f74d;font-weight:600}.hls-grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.hls-btn-primary{color:#000;cursor:pointer;background-color:#fff;border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;height:38px;padding:0 18px;font-size:13px;font-weight:600;transition:all .15s;display:inline-flex}.hls-btn-primary:hover{background-color:#e4e4e7}.hls-btn-secondary{color:#a1a1aa;cursor:pointer;background-color:#121215;border:1px solid #27272a;border-radius:8px;justify-content:center;align-items:center;gap:8px;height:38px;padding:0 16px;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex}.hls-btn-secondary:hover{color:#fff;background-color:#18181b;border-color:#3f3f46}.hls-stage-grid{grid-template-columns:1.2fr 1fr;gap:20px;display:grid}@media (max-width:1024px){.hls-stage-grid{grid-template-columns:1fr}}.hls-video-container{aspect-ratio:16/9;background-color:#000;border:1px solid #18181b;border-radius:10px;width:100%;position:relative;overflow:hidden}.hls-video-element{object-fit:contain;width:100%;height:100%}.hls-hud-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;display:grid}.hls-hud-tile{background-color:#000;border:1px solid #18181b;border-radius:8px;flex-direction:column;gap:4px;padding:10px 12px;display:flex}.hls-hud-label{color:#71717a;text-transform:uppercase;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:600}.hls-hud-value{font-family:JetBrains Mono,monospace;font-size:14px;font-weight:700}.hls-hud-cyan{color:#38bdf8}.hls-hud-green{color:#34d399}.hls-hud-yellow{color:#fbbf24}.hls-tabs-header{border-bottom:1px solid #18181b;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:12px;display:flex}.hls-tab-btn{color:#71717a;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;align-items:center;gap:6px;height:32px;padding:0 12px;font-size:12px;font-weight:500;transition:all .15s;display:inline-flex}.hls-tab-btn:hover{color:#f4f4f5}.hls-tab-btn.is-active{color:#fff;border-bottom-color:#a855f7;font-weight:600}.hls-logs-scroll{flex-direction:column;gap:8px;max-height:340px;padding-right:4px;display:flex;overflow-y:auto}.hls-log-item{background-color:#000;border-left:3px solid #3f3f46;border-radius:6px;flex-direction:column;gap:4px;padding:10px 12px;font-size:12px;display:flex}.hls-log-item.log-info{border-left-color:#3b82f6}.hls-log-item.log-success{border-left-color:#10b981}.hls-log-item.log-warn{border-left-color:#f59e0b}.hls-log-item.log-error{border-left-color:#ef4444}.hls-log-meta{color:#71717a;justify-content:space-between;align-items:center;font-family:JetBrains Mono,monospace;font-size:10px;display:flex}.hls-log-msg{color:#f4f4f5;font-weight:600}.hls-log-details{color:#a1a1aa;word-break:break-all;font-family:JetBrains Mono,monospace;font-size:11px}.hls-code-block{background-color:#000;border:1px solid #18181b;border-radius:8px;padding:14px;position:relative}.hls-code-block pre{color:#c084fc;white-space:pre-wrap;margin:0;font-family:JetBrains Mono,monospace;font-size:12px;line-height:1.5}.hls-toast{z-index:120;color:#fff;background-color:#18181b;border:1px solid #27272a;border-radius:8px;align-items:center;gap:8px;padding:10px 16px;font-size:13px;font-weight:500;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 10px 15px -3px #0006}