:root{--color-bg-deep: #09090b;--color-bg-base: #0f0f13;--color-bg-panel: rgba(18, 18, 22, .8);--color-bg-card: rgba(28, 28, 35, .4);--color-bg-input: #141418;--color-border: rgba(255, 255, 255, .08);--color-border-hover: rgba(255, 255, 255, .16);--color-border-glow: rgba(99, 102, 241, .3);--color-text-main: #f4f4f5;--color-text-muted: #a1a1aa;--color-text-placeholder: #52525b;--color-twitch-purple: #6366f1;--color-twitch-purple-hover: #818cf8;--color-twitch-purple-glow: rgba(99, 102, 241, .2);--color-success: #10b981;--color-success-bg: rgba(16, 185, 129, .1);--color-success-border: rgba(16, 185, 129, .2);--color-success-glow: rgba(16, 185, 129, .25);--color-danger: #ef4444;--color-danger-bg: rgba(239, 68, 68, .1);--color-danger-border: rgba(239, 68, 68, .2);--color-danger-glow: rgba(239, 68, 68, .25);--color-accent: #a855f7;--color-shadow: rgba(0, 0, 0, .4);--color-glass-specular: rgba(255, 255, 255, .03);--font-family-sans: "Inter", system-ui, -apple-system, sans-serif;--font-family-display: "Outfit", sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--transition-normal: all .25s cubic-bezier(.16, 1, .3, 1);--transition-fast: all .15s cubic-bezier(.16, 1, .3, 1)}body.light-theme{--color-bg-deep: #f4f4f5;--color-bg-base: #fafafa;--color-bg-panel: rgba(255, 255, 255, .75);--color-bg-card: rgba(255, 255, 255, .6);--color-bg-input: #ffffff;--color-border: rgba(9, 9, 11, .08);--color-border-hover: rgba(9, 9, 11, .16);--color-border-glow: rgba(99, 102, 241, .15);--color-text-main: #09090b;--color-text-muted: #71717a;--color-text-placeholder: #a1a1aa;--color-twitch-purple: #4f46e5;--color-twitch-purple-hover: #4338ca;--color-twitch-purple-glow: rgba(79, 70, 229, .15);--color-success: #10b981;--color-success-bg: rgba(16, 185, 129, .08);--color-success-border: rgba(16, 185, 129, .15);--color-danger: #ef4444;--color-danger-bg: rgba(239, 68, 68, .08);--color-danger-border: rgba(239, 68, 68, .15);--color-accent: #7c3aed;--color-shadow: rgba(9, 9, 11, .05);--color-glass-specular: rgba(255, 255, 255, .6)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg-deep);color:var(--color-text-main);font-family:var(--font-family-sans);height:100vh;overflow:hidden;display:flex;flex-direction:column;transition:background-color .4s ease,color .4s ease}.app-container{display:flex;flex-direction:column;height:100vh;background:var(--color-bg-deep);transition:background .4s ease}.app-header{display:flex;justify-content:space-between;align-items:center;padding:14px 28px;background:var(--color-bg-panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--color-border);z-index:10;box-shadow:0 4px 20px #00000026;transition:background-color .4s ease,border-color .4s ease}.logo-area{display:flex;align-items:center;gap:12px}.logo-icon{width:28px;height:28px;background:linear-gradient(135deg,var(--color-twitch-purple),var(--color-accent));border-radius:8px;position:relative;box-shadow:0 0 14px var(--color-twitch-purple-glow)}.logo-icon:before{content:"";position:absolute;top:7px;left:7px;width:14px;height:14px;background:var(--color-bg-deep);border-radius:3px;clip-path:polygon(0% 0%,100% 0%,100% 70%,70% 70%,40% 100%,40% 70%,0% 70%)}.logo-area h1{font-family:var(--font-family-display);font-size:20px;font-weight:800;letter-spacing:-.5px}.logo-area h1 span{background:linear-gradient(135deg,var(--color-twitch-purple-hover),var(--color-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.header-controls{display:flex;align-items:center;gap:16px}.status-indicator{display:flex;align-items:center;gap:10px;background:var(--color-bg-input);padding:8px 18px;border-radius:9999px;border:1px solid var(--color-border);box-shadow:inset 0 2px 4px var(--color-shadow);transition:all .4s ease}.indicator-dot{width:8px;height:8px;border-radius:50%;background-color:var(--color-text-muted);box-shadow:0 0 8px var(--color-text-muted);transition:all .3s ease}.status-indicator.recording{border-color:var(--color-danger-border);background:var(--color-danger-bg)}.status-indicator.recording .indicator-dot{background-color:var(--color-danger);box-shadow:0 0 12px var(--color-danger);animation:pulse 1.5s infinite}#recording-time{font-variant-numeric:tabular-nums;font-weight:700;font-size:13.5px;letter-spacing:.5px}.status-text{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);font-weight:600}.status-indicator.recording .status-text{color:var(--color-danger)}.btn-theme{width:36px;height:36px;border-radius:50%;background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-text-main);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px var(--color-shadow);transition:var(--transition-normal)}.btn-theme:hover{border-color:var(--color-twitch-purple);transform:rotate(30deg) scale(1.05);box-shadow:0 0 12px var(--color-twitch-purple-glow)}.workspace{display:flex;flex:1;overflow:hidden;position:relative;background-image:radial-gradient(circle at 10% 20%,rgba(99,102,241,.03) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(168,85,247,.03) 0%,transparent 40%)}.panel{width:310px;background:var(--color-bg-panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-right:1px solid var(--color-border);display:flex;flex-direction:column;z-index:5;box-shadow:0 0 20px #0000001a;transition:var(--transition-normal)}.right-panel{border-right:none;border-left:1px solid var(--color-border)}.panel-header{padding:20px 24px;border-bottom:1px solid var(--color-border)}.panel-header h2{font-family:var(--font-family-display);font-size:13px;font-weight:700;color:var(--color-text-main);letter-spacing:1px;text-transform:uppercase;background:linear-gradient(90deg,var(--color-text-main) 0%,var(--color-text-muted) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.panel-content{padding:24px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:28px}.control-group{display:flex;flex-direction:column;gap:14px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:16px;transition:var(--transition-normal)}.control-group:hover{border-color:var(--color-border-hover);box-shadow:0 4px 12px #0000000d}.control-group h3{font-family:var(--font-family-sans);font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-muted);font-weight:700;margin-bottom:2px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.04)}body.light-theme .control-group h3{border-bottom-color:#09090b0a}.sources-list-stack{display:flex;flex-direction:column;gap:10px}.btn-source{width:100%;background:var(--color-bg-input);border:1px solid var(--color-border);padding:12px 14px;color:var(--color-text-main);display:flex;align-items:center;gap:12px;border-radius:var(--radius-sm);cursor:pointer;text-align:left;position:relative;overflow:hidden;transition:var(--transition-normal)}.btn-source .icon{font-size:20px;width:28px;height:28px;border-radius:6px;background:#ffffff0a;display:flex;align-items:center;justify-content:center;transition:var(--transition-normal)}body.light-theme .btn-source .icon{background:#09090b0a}.btn-source .source-info{flex:1;display:flex;flex-direction:column;gap:2px}.btn-source .source-info .title-lbl{font-size:13px;font-weight:600;color:var(--color-text-main)}.btn-source .source-info .desc-lbl{font-size:11px;color:var(--color-text-muted)}.btn-source .badge-status{font-size:9px;text-transform:uppercase;padding:4px 8px;border-radius:4px;font-weight:700;letter-spacing:.5px;background:#ffffff0d;color:var(--color-text-muted);border:1px solid rgba(255,255,255,.05);transition:var(--transition-fast)}.btn-source:hover{border-color:var(--color-border-hover);background:#ffffff08;transform:translateY(-1px)}.btn-source:hover .icon{transform:scale(1.05);background:#ffffff14}.btn-source.active{border-color:var(--color-twitch-purple);background:#6366f10f;box-shadow:0 0 12px var(--color-twitch-purple-glow)}.btn-source.active .icon{background:var(--color-twitch-purple);color:#fff}.btn-source.active .badge-status{background:var(--color-success-bg);color:var(--color-success);border-color:var(--color-success-border);box-shadow:0 0 8px #10b98126}.settings-stack,.fields-stack{display:flex;flex-direction:column;gap:14px}.setting-item,.field-item{display:flex;flex-direction:column;gap:8px}.setting-item label,.field-item label{font-size:12px;color:var(--color-text-main);font-weight:600;letter-spacing:.2px}.label-row{display:flex;justify-content:space-between;align-items:center}.label-row label{margin-bottom:0}.value-lbl{font-size:11px;color:var(--color-twitch-purple);background:var(--color-twitch-purple-glow);padding:2px 6px;border-radius:4px;font-weight:700}select,input[type=text],input[type=number]{background-color:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-text-main);padding:10px 14px;border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-family-sans);width:100%;transition:var(--transition-fast)}select:hover,input[type=text]:hover,input[type=number]:hover{border-color:var(--color-border-hover)}select:focus,input[type=text]:focus,input[type=number]:focus{outline:none;border-color:var(--color-twitch-purple);background-color:#6366f105;box-shadow:0 0 0 2px var(--color-twitch-purple-glow)}select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:14px;padding-right:36px}select option{background-color:var(--color-bg-deep);color:var(--color-text-main)}.slider-container{display:flex;align-items:center;padding:4px 0}.slider-container input[type=range]{flex:1;-webkit-appearance:none;background:var(--color-border);height:5px;border-radius:999px;outline:none;transition:var(--transition-fast);border:none}.slider-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--color-text-main);cursor:pointer;border:2.5px solid var(--color-twitch-purple);box-shadow:0 2px 6px #0000004d;transition:var(--transition-fast)}.slider-container input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);background:var(--color-twitch-purple);border-color:var(--color-text-main)}.checkbox-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--color-text-main);font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-item input[type=checkbox]{accent-color:var(--color-twitch-purple);width:16px;height:16px;cursor:pointer;border-radius:4px}.btn-popout-action{width:100%;background:var(--color-bg-input);border:1px solid var(--color-border);padding:12px 14px;color:var(--color-text-main);font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-normal)}.btn-popout-action:hover{border-color:var(--color-border-hover);background:#ffffff05;transform:translateY(-1px)}.btn-popout-action .badge{font-size:9px;text-transform:uppercase;padding:3px 6px;border-radius:4px;background:#ffffff14;color:var(--color-text-muted);font-weight:700}body.light-theme .btn-popout-action .badge{background:#09090b0d}.btn-popout-action.active{border-color:var(--color-twitch-purple);background:#6366f10f}.btn-popout-action.active .badge{background:var(--color-twitch-purple);color:#fff;box-shadow:0 0 8px var(--color-twitch-purple-glow)}.hype-buttons-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btn-hype{background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-text-main);padding:12px;font-size:12px;font-weight:600;border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:var(--transition-normal)}.btn-hype .icon{font-size:20px;transition:var(--transition-normal)}.btn-hype:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}#btn-trigger-hype:hover{border-color:#f59e0b;background:#f59e0b0d;color:#fbbf24}#btn-trigger-hype:hover .icon{transform:scale(1.1) rotate(5deg)}#btn-trigger-raid:hover{border-color:#a855f7;background:#a855f70d;color:#c084fc}#btn-trigger-raid:hover .icon{transform:scale(1.1) translateY(-2px)}#btn-trigger-lul:hover{border-color:#eab308;background:#eab3080d;color:#facc15}#btn-trigger-lul:hover .icon{transform:scale(1.1) rotate(-5deg)}#btn-trigger-pog:hover{border-color:#3b82f6;background:#3b82f60d;color:#60a5fa}#btn-trigger-pog:hover .icon{transform:scale(1.1) scale(1.1)}.inject-chat-container{display:flex;flex-direction:column;gap:12px}.inject-chat-form{display:flex;gap:8px}.inject-chat-form input{flex:1}.btn-accent{background:var(--color-twitch-purple);color:#fff;padding:0 16px;font-weight:600;font-size:13px;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:var(--transition-normal);box-shadow:0 2px 8px var(--color-twitch-purple-glow)}.btn-accent:hover{background:var(--color-twitch-purple-hover);transform:translateY(-1px);box-shadow:0 4px 12px var(--color-twitch-purple-glow)}.inject-as-selection{display:flex;gap:16px;font-size:11.5px;color:var(--color-text-muted)}.inject-as-selection label{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:500}.inject-as-selection input{accent-color:var(--color-twitch-purple);cursor:pointer}.stage-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;overflow:hidden;position:relative;gap:20px}.canvas-wrapper{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;background-color:#000;border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:0 20px 50px #00000080,0 0 0 1px #ffffff0d;overflow:hidden;transition:border-color .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1)}body:not(.recording) .canvas-wrapper{box-shadow:0 20px 50px #00000080,0 0 30px var(--color-twitch-purple-glow)}body.recording .canvas-wrapper{border-color:var(--color-danger);box-shadow:0 20px 50px #0009,0 0 30px var(--color-danger-glow)}#composite-canvas{width:100%;height:100%;display:block}.canvas-titlebar{height:34px;background:#121216f2;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;padding:0 14px;position:absolute;top:0;left:0;width:100%;z-index:4}body.light-theme .canvas-titlebar{background:#f4f4f5f2;border-bottom-color:#09090b0f}.canvas-titlebar .controls{display:flex;gap:6px}.canvas-titlebar .dot{width:8px;height:8px;border-radius:50%;background:#27272a}.canvas-titlebar .dot.red{background:#ef4444}.canvas-titlebar .dot.yellow{background:#f59e0b}.canvas-titlebar .dot.green{background:#10b981}.canvas-titlebar .title{margin-left:auto;margin-right:auto;font-size:11px;font-weight:600;color:var(--color-text-muted);letter-spacing:.5px;text-transform:uppercase}.canvas-placeholder{position:absolute;top:34px;left:0;width:100%;height:calc(100% - 34px);background:linear-gradient(135deg,#09090b,#121217);display:flex;align-items:center;justify-content:center;z-index:2;transition:opacity .5s ease;pointer-events:none}body.light-theme .canvas-placeholder{background:linear-gradient(135deg,#fff,#f4f4f5)}.placeholder-content{text-align:center;max-width:400px;padding:24px}.glow-ring{width:60px;height:60px;border-radius:50%;border:3px solid var(--color-border);border-top-color:var(--color-twitch-purple);margin:0 auto 24px;box-shadow:0 0 15px var(--color-twitch-purple-glow);animation:spin 1.8s linear infinite}.placeholder-content h3{font-family:var(--font-family-display);font-size:20px;margin-bottom:10px;color:var(--color-text-main);font-weight:700}.placeholder-content p{font-size:13.5px;color:var(--color-text-muted);line-height:1.5}.canvas-help-text{font-size:12.5px;color:var(--color-text-muted);text-align:center;font-weight:500}.sidebar-record-footer{display:flex;flex-direction:column;gap:10px;padding:20px 24px;background:var(--color-bg-base);border-top:1px solid var(--color-border);margin-top:auto}.btn-record-main{width:100%;padding:14px 16px;font-size:13px;font-weight:700;letter-spacing:.5px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:var(--transition-normal)}.btn-record-start{background:var(--color-danger);color:#fff;border:1px solid transparent;box-shadow:0 4px 12px #ef444440}.btn-record-start:hover:not(:disabled){background:#ff5754;box-shadow:0 6px 18px #ef444466;transform:translateY(-1px)}.btn-record-start:disabled{background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);box-shadow:none;cursor:not-allowed}.record-dot-icon{width:10px;height:10px;border-radius:50%;background-color:#fff;display:inline-block;transition:background-color .3s ease}.btn-record-start:disabled .record-dot-icon{background-color:var(--color-text-muted)}body.recording .record-dot-icon{animation:pulse 1.2s infinite}.btn-record-stop{background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-text-main)}.btn-record-stop:hover:not(:disabled){background:#ffffff05;border-color:var(--color-border-hover);transform:translateY(-1px)}.btn-record-stop:disabled{opacity:.4;cursor:not-allowed}.stop-sq-icon{width:9px;height:9px;background-color:var(--color-text-main);display:inline-block;border-radius:2px}.btn-record-stop:disabled .stop-sq-icon{background-color:var(--color-text-muted)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:4px}body.light-theme ::-webkit-scrollbar-thumb{background:#09090b14}::-webkit-scrollbar-thumb:hover{background:var(--color-twitch-purple)}.toast-container{position:fixed;bottom:28px;right:28px;display:flex;flex-direction:column;gap:12px;z-index:100}.toast{background:var(--color-bg-panel);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-border);padding:16px 22px;border-radius:var(--radius-md);color:var(--color-text-main);box-shadow:0 10px 30px #00000040;display:flex;align-items:center;gap:12px;min-width:280px;animation:slideIn .35s cubic-bezier(.16,1,.3,1) forwards;position:relative;overflow:hidden;font-size:13px;font-weight:600}.toast:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background-color:var(--color-twitch-purple)}.toast.toast-success:before{background-color:var(--color-success)}.toast.toast-error:before{background-color:var(--color-danger)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.4}to{transform:scale(1);opacity:1}}@keyframes slideIn{0%{transform:translate(120%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOut{to{opacity:0;transform:translateY(12px)}}.toast.fade-out{animation:fadeOut .35s ease forwards}.pip-chat-container{display:flex;flex-direction:column;height:100vh;background-color:var(--color-bg-base);color:var(--color-text-main);font-family:var(--font-family-sans);overflow:hidden;transition:background-color .4s ease,color .4s ease}.pip-chat-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background-color:var(--color-bg-base);border-bottom:1px solid var(--color-border);font-family:var(--font-family-display);font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--color-text-muted);text-transform:uppercase;transition:all .4s ease}.pip-chat-header .title{display:flex;align-items:center;gap:8px}.pip-chat-header .dot{width:8px;height:8px;border-radius:50%;background-color:var(--color-twitch-purple);box-shadow:0 0 8px var(--color-twitch-purple-glow)}.pip-chat-messages{flex:1;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}.pip-chat-message{font-size:13px;line-height:1.5;word-break:break-word;display:flex;flex-wrap:wrap;align-items:center;gap:4px}.pip-badge{width:15px;height:15px;display:inline-block;vertical-align:middle}.pip-username{font-weight:700;display:inline-block}.pip-text{color:var(--color-text-main);display:inline}.pip-emote{width:19px;height:19px;display:inline-block;vertical-align:middle}