:root{--bg-primary: #0b0f19;--bg-secondary: #131a2c;--bg-glass: rgba(19, 26, 44, .65);--bg-glass-card: rgba(15, 23, 42, .55);--border-glass: rgba(255, 255, 255, .07);--border-glass-active: rgba(59, 130, 246, .4);--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--color-primary: #3b82f6;--color-primary-hover: #2563eb;--color-secondary: #8b5cf6;--color-accent: #06b6d4;--color-success: #10b981;--color-warning: #f59e0b;--color-danger: #ef4444;--font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "Share Tech Mono", monospace;--shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, .3), 0 8px 10px -6px rgba(0, 0, 0, .3);--shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, .4);--radius-sm: 6px;--radius-md: 12px;--radius-lg: 18px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.glass-panel{background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-glass);border-radius:var(--radius-md);box-shadow:var(--shadow-glass)}.glass-card{background:var(--bg-glass-card);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border-glass);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);transition:border-color .2s,box-shadow .2s}.glass-card:hover{border-color:#ffffff1f}.app-container{display:grid;grid-template-columns:380px 1fr;height:100vh;overflow:hidden}.app-container.in-zoom{grid-template-columns:100%}.sidebar{border-right:1px solid var(--border-glass);display:flex;flex-direction:column;height:100%;overflow-y:auto;background:#0f1422}.sidebar-header{padding:1.5rem;border-bottom:1px solid var(--border-glass);background:linear-gradient(to bottom,#131929,#0f1422)}.sidebar-logo{display:flex;align-items:center;gap:.75rem;font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--text-primary);background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.sidebar-content{padding:1.25rem;flex:1;display:flex;flex-direction:column;gap:1.5rem}.tabs-header{display:flex;flex-wrap:wrap;background:#ffffff08;padding:.25rem;border-radius:8px;border:1px solid var(--border-glass);margin-bottom:1rem;gap:.2rem}.tab-btn{flex:1 1 calc(33.33% - .2rem);white-space:nowrap;background:transparent;border:none;color:var(--text-secondary);padding:.5rem .25rem;font-size:.75rem;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.35rem}.tab-btn:hover{color:var(--text-primary);background:#ffffff05}.tab-btn.active{color:var(--text-primary);background:#ffffff14;box-shadow:0 2px 4px #0003}.main-view{display:flex;flex-direction:column;height:100%;background-color:var(--bg-primary);overflow:hidden}.top-bar{height:64px;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-glass);background:#0f142280;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.preview-area{flex:1;display:flex;align-items:center;justify-content:center;padding:1rem;overflow:auto;background:radial-gradient(circle at center,#161e33,#0b0f19)}.monitor-canvas-container{width:100%;max-width:960px;aspect-ratio:16 / 9;position:relative;box-shadow:0 25px 50px -12px #0009;border-radius:var(--radius-md);overflow:hidden;background-color:#0d111d;border:2px solid rgba(255,255,255,.05)}.monitor-canvas-grid{position:absolute;top:0;left:0;right:0;bottom:0;background-size:40px 40px;background-image:linear-gradient(to right,rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.02) 1px,transparent 1px);pointer-events:none;z-index:0}.monitor-canvas-label{position:absolute;top:10px;left:10px;background:#0009;padding:.25rem .5rem;border-radius:var(--radius-sm);font-size:.75rem;color:var(--text-secondary);font-family:var(--font-mono);z-index:10}.overlay-card-wrapper{position:absolute;cursor:move;-webkit-user-select:none;user-select:none;touch-action:none;z-index:10;display:flex;flex-direction:column}.overlay-card-wrapper.selected{outline:2px solid var(--color-primary);box-shadow:0 0 15px #3b82f64d}.resize-handle{position:absolute;width:10px;height:10px;background:var(--color-primary);border:2px solid #fff;border-radius:50%;z-index:100}.resize-handle.se{right:-5px;bottom:-5px;cursor:se-resize}.resize-handle.sw{left:-5px;bottom:-5px;cursor:sw-resize}.resize-handle.ne{right:-5px;top:-5px;cursor:ne-resize}.resize-handle.nw{left:-5px;top:-5px;cursor:nw-resize}.form-group{margin-bottom:1.25rem}.form-label{display:block;font-size:.8rem;font-weight:500;color:var(--text-secondary);margin-bottom:.5rem;font-family:var(--font-display)}.form-input{width:100%;background:#ffffff08;border:1px solid var(--border-glass);padding:.65rem .75rem;color:var(--text-primary);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.875rem;transition:all .2s}.form-input:focus{outline:none;border-color:var(--color-primary);background:#ffffff0f;box-shadow:0 0 0 2px #3b82f626}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.switch-group{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.switch-label{font-size:.85rem;font-weight:500;color:var(--text-primary)}.switch{position:relative;display:inline-block;width:44px;height:24px}.switch input{opacity:0;width:0;height:0}.slider-switch{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#334155;transition:.3s;border-radius:24px}.slider-switch:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%;box-shadow:0 1px 3px #0006}input:checked+.slider-switch{background-color:var(--color-primary)}input:checked+.slider-switch:before{transform:translate(20px)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1rem;font-size:.875rem;font-weight:600;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;border:none;font-family:var(--font-display)}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;box-shadow:0 4px 12px #3b82f633}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px #3b82f64d}.btn-secondary{background:#ffffff0f;border:1px solid var(--border-glass);color:var(--text-primary)}.btn-secondary:hover{background:#ffffff1a;border-color:#ffffff26}.btn-danger{background:var(--color-danger);color:#fff;box-shadow:0 4px 12px #ef444433}.btn-danger:hover{background:#dc2626}.btn:disabled{opacity:.35!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}.btn-sm{padding:.4rem .75rem;font-size:.75rem}.btn-full{width:100%}.range-slider-container{display:flex;align-items:center;gap:.75rem}.range-slider{flex:1;-webkit-appearance:none;width:100%;height:6px;background:#334155;border-radius:3px;outline:none}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:transform .1s}.range-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.render-card{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 15px #00000040;border-radius:inherit;transition:opacity .15s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;backface-visibility:hidden;transform:translateZ(0)}.render-topic{justify-content:center;padding:.75rem 1.25rem}.render-topic h3{font-weight:700;line-height:1.2}.render-topic p{opacity:.8;font-size:.9em;margin-top:.25rem}.aboutme-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 4px 10px #00000026}.aboutme-details{display:flex;flex-direction:column}.aboutme-name{font-weight:700;font-size:.95rem}.aboutme-title{font-size:.75rem;opacity:.8}.aboutme-bio{font-size:.75rem;margin-top:.15rem;opacity:.65}.render-timer{align-items:center;justify-content:center;padding:.5rem;position:relative}.timer-header{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:.1rem}.timer-display{font-family:var(--font-mono);font-size:2.2rem;line-height:1;font-weight:500}.timer-indicator{position:absolute;bottom:0;left:0;height:4px;background-color:var(--color-success);transition:width .2s linear}.timer-indicator.warning{background-color:var(--color-warning)}.timer-indicator.danger{background-color:var(--color-danger)}.render-scoreboard{padding:.5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center}.scoreboard-team{display:flex;flex-direction:column;padding:0 .5rem}.team-name{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.team-score{font-family:var(--font-mono);font-size:2.2rem;font-weight:700;line-height:1.1}.scoreboard-vs{font-family:var(--font-display);font-size:.65rem;font-weight:800;opacity:.4;padding:0 .25rem}.preset-list{display:flex;flex-direction:column;gap:.75rem;margin-top:.75rem}.preset-item{padding:.75rem;background:#ffffff05;border:1px solid var(--border-glass);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:space-between;transition:all .2s}.preset-item:hover{background:#ffffff0d;border-color:#ffffff26}.preset-item.active{background:#3b82f614!important;border-color:var(--color-primary)!important;box-shadow:0 0 10px #3b82f626!important}.preset-name{font-weight:500;font-size:.85rem}.preset-date{font-size:.7rem;color:var(--text-muted)}.preset-actions{display:flex;gap:.35rem}.color-picker-row{display:flex;gap:.5rem;align-items:center}.color-dot-btn{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s,border-color .1s}.color-dot-btn.selected{border-color:#fff;transform:scale(1.1)}.demo-banner{background:linear-gradient(to right,#1e3a8a,#3b82f6);color:#fff;padding:.5rem 1rem;font-size:.8rem;font-weight:500;text-align:center;display:flex;align-items:center;justify-content:center;gap:.5rem}.font-sans{font-family:var(--font-body)}.font-display{font-family:var(--font-display)}.font-mono{font-family:var(--font-mono)}.font-serif{font-family:Playfair Display,Georgia,serif}.font-lexend{font-family:Lexend,sans-serif}.camera-overlay-viewport{width:100vw;height:100vh;position:relative;overflow:hidden;background:transparent}@media (max-width: 900px){.app-container{grid-template-columns:1fr!important;height:100vh!important;overflow:hidden!important}.main-view{display:none!important}.sidebar{border-right:none;width:100%!important;max-width:100%!important;height:100%!important;overflow-y:auto!important}.sidebar-header{padding:1rem!important}.sidebar-content{padding:1rem!important;gap:1.25rem!important}}@media (max-width: 400px){.tabs-header{flex-wrap:wrap!important;gap:3px!important;padding:.2rem!important}.tab-btn{flex:1 1 calc(33.33% - 4px)!important;font-size:.72rem!important;padding:.4rem .2rem!important;gap:.2rem!important}.form-group div[style*="display: flex"]{flex-wrap:wrap!important}}@keyframes spin{to{transform:rotate(360deg)}}