:root{--nb-bg: #f4f0ea;--nb-dot: #000000;--nb-sidebar: #fffdf8;--nb-surface: #ffffff;--nb-surface-alt: #f8f5ee;--nb-input-bg: #ffffff;--nb-input-focus: #fffbeb;--nb-placeholder: #71717a;--nb-black: #000000;--nb-text: #000000;--nb-muted: #27272a;--nb-stroke: #000000;--nb-shadow-color: #000000;--nb-accent: #fe990d;--nb-accent-hover: #ffae33;--nb-yellow: #ffd600;--nb-blue: #38bdf8;--nb-green: #4ade80;--nb-purple: #c084fc;--nb-pink: #f472b6;--nb-red: #f87171;--nb-border-thick: 4px solid var(--nb-stroke);--nb-border: 3px solid var(--nb-stroke);--nb-border-thin: 2px solid var(--nb-stroke);--nb-shadow-lg: 6px 6px 0px var(--nb-shadow-color);--nb-shadow: 4px 4px 0px var(--nb-shadow-color);--nb-shadow-sm: 2px 2px 0px var(--nb-shadow-color);--nb-shadow-none: 0px 0px 0px var(--nb-shadow-color);--font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;--font-mono: "Space Mono", ui-monospace, SFMono-Regular, Consolas, monospace}html[data-theme=dark]{--nb-bg: #0d0f14;--nb-dot: #2e3446;--nb-sidebar: #13161f;--nb-surface: #1b1f2b;--nb-surface-alt: #161923;--nb-input-bg: #0f1219;--nb-input-focus: #232838;--nb-placeholder: #717a8f;--nb-text: #f8fafc;--nb-muted: #a1a9b8;--nb-stroke: #000000;--nb-shadow-color: #000000}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:var(--font-display);background-color:var(--nb-bg);color:var(--nb-text);overflow:hidden;-webkit-font-smoothing:antialiased}.app-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100vh;width:100vw;overflow:hidden}.app-header{padding:12px 24px;border-bottom:var(--nb-border-thick);background:var(--nb-yellow);display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:20}html[data-theme=dark] .app-header{background:#1b1f2b;border-bottom:4px solid #000000;box-shadow:inset 0 -2px #2e3446}.app-body{display:grid;grid-template-columns:460px 1fr;min-height:0;overflow:hidden}.sidebar{background:var(--nb-sidebar);border-right:var(--nb-border-thick);display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;position:relative;z-index:10}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-logo{width:46px;height:46px;border-radius:0;background:var(--nb-black);border:3px solid #000000;box-shadow:2px 2px #000;display:flex;align-items:center;justify-content:center;padding:6px;flex-shrink:0;transform:rotate(-2deg)}html[data-theme=dark] .brand-logo{background:var(--nb-accent);border-color:#000}html[data-theme=dark] .brand-logo img{filter:brightness(0)}.brand-logo img{width:100%;height:100%;object-fit:contain}.brand-text h1{margin:0;font-family:var(--font-display);font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:-.5px;color:#000;line-height:1.05}html[data-theme=dark] .brand-text h1{color:#f8fafc}.brand-text p{margin:4px 0 0;font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;color:#000;background:#fff;border:1.5px solid #000000;padding:1px 6px;display:inline-block;box-shadow:2px 2px #000}html[data-theme=dark] .brand-text p{background:var(--nb-yellow);color:#000}.theme-switch-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#000;border:2.5px solid #000000;border-radius:0;padding:7px 10px;font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;cursor:pointer;flex-shrink:0;box-shadow:3px 3px #000;transition:transform .08s ease,box-shadow .08s ease,background-color .08s ease}.theme-switch-btn:hover{background:var(--nb-accent);color:#000;transform:translate(-1px,-1px);box-shadow:4px 4px #000}.theme-switch-btn:active{transform:translate(2px,2px);box-shadow:0 0 #000}html[data-theme=dark] .theme-switch-btn{background:var(--nb-yellow);color:#000}html[data-theme=dark] .theme-switch-btn:hover{background:var(--nb-accent)}.theme-switch-icon{font-size:13px;line-height:1}.form-toolbar{padding:12px 18px;border-bottom:var(--nb-border);background:var(--nb-surface-alt);display:flex;align-items:center;justify-content:space-between;gap:12px}.advanced-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}.advanced-switch input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.advanced-switch-track{position:relative;width:42px;height:24px;background:var(--nb-input-bg);border:var(--nb-border-thin);border-radius:0;box-shadow:var(--nb-shadow-sm);transition:background-color .1s ease;flex-shrink:0}.advanced-switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--nb-text);border-radius:0;transition:transform .12s cubic-bezier(.2,.9,.3,1)}.advanced-switch input:checked+.advanced-switch-track{background:var(--nb-green)}.advanced-switch input:checked+.advanced-switch-track .advanced-switch-thumb{transform:translate(18px);background:#000}.advanced-switch input:focus-visible+.advanced-switch-track{outline:2px dashed var(--nb-text);outline-offset:2px}.advanced-switch-label{font-family:var(--font-display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--nb-text);white-space:nowrap}.btn-icon-action{background:var(--nb-surface);color:var(--nb-text);border:var(--nb-border-thin);border-radius:0;padding:7px 12px;font-family:var(--font-display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;cursor:pointer;white-space:nowrap;box-shadow:var(--nb-shadow-sm);transition:transform .08s ease,box-shadow .08s ease,background-color .08s ease,color .08s ease}.btn-icon-action:hover{background:var(--nb-yellow);color:#000;transform:translate(-1px,-1px);box-shadow:3px 3px #000}.btn-icon-action:active{transform:translate(2px,2px);box-shadow:var(--nb-shadow-none)}.sidebar-form{flex:1;overflow-y:auto;padding:18px 18px 28px;display:flex;flex-direction:column;gap:18px}.sidebar-form::-webkit-scrollbar{width:12px}.sidebar-form::-webkit-scrollbar-track{background:var(--nb-surface-alt);border-left:var(--nb-border-thin)}.sidebar-form::-webkit-scrollbar-thumb{background:var(--nb-accent);border:2px solid #000000}.sidebar-form::-webkit-scrollbar-thumb:hover{background:var(--nb-yellow)}.form-section{background:var(--nb-surface);border:var(--nb-border);border-radius:0;padding:0;display:flex;flex-direction:column;box-shadow:var(--nb-shadow);transition:transform .1s ease,box-shadow .1s ease}html[data-theme=dark] .form-section{outline:1px solid #30374b}.section-header{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:var(--nb-purple);border-bottom:var(--nb-border);cursor:pointer;user-select:none}.form-section.section-template .section-header{background:var(--nb-purple)}.form-section.section-match .section-header{background:var(--nb-yellow)}.form-section.section-homeTeam .section-header{background:var(--nb-accent)}.form-section.section-awayTeam .section-header{background:var(--nb-blue)}.form-section.is-collapsed .section-header{border-bottom:none}.section-title{margin:0;font-family:var(--font-display);font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#000}.section-description{margin:3px 0 0;font-family:var(--font-mono);font-size:11px;color:#000}.section-toggle-btn{width:26px;height:26px;background:#fff;border:2px solid #000000;box-shadow:2px 2px #000;color:#000;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,background-color .1s ease}.section-header:hover .section-toggle-btn{background:#000;color:#fff}.form-section.is-collapsed .section-toggle-btn svg{transform:rotate(-90deg)}.form-section.is-collapsed .form-grid{display:none}.form-grid{display:grid;gap:13px;padding:14px 15px 16px;background:var(--nb-surface)}.form-group{display:flex;flex-direction:column;gap:6px}.form-section.is-hidden,.form-group.is-hidden{display:none!important}.form-group label{font-family:var(--font-display);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--nb-text)}.form-group input[type=text],.form-group select,.form-group textarea{width:100%;background:var(--nb-input-bg);border:var(--nb-border-thin);color:var(--nb-text);border-radius:0;padding:8px 10px;font-size:13px;font-weight:600;font-family:var(--font-display);outline:none;box-shadow:var(--nb-shadow-sm);transition:transform .08s ease,box-shadow .08s ease,background-color .08s ease}html[data-theme=dark] .form-group input[type=text],html[data-theme=dark] .form-group select,html[data-theme=dark] .form-group textarea,html[data-theme=dark] .number-stepper,html[data-theme=dark] .color-picker-wrap,html[data-theme=dark] .season-stepper,html[data-theme=dark] .season-reset-btn,html[data-theme=dark] .btn-icon-action,html[data-theme=dark] .btn-secondary{border-color:#000;outline:1px solid #384159}.form-group input[type=text]::placeholder,.form-group input[type=number]::placeholder,.form-group textarea::placeholder{color:var(--nb-placeholder);font-weight:500}.form-group input[type=text]:focus,.form-group select:focus,.form-group textarea:focus{background:var(--nb-input-focus);transform:translate(-1px,-1px);box-shadow:4px 4px #000}html[data-theme=dark] .form-group input[type=text]:focus,html[data-theme=dark] .form-group select:focus,html[data-theme=dark] .form-group textarea:focus{outline-color:var(--nb-accent);box-shadow:3px 3px 0 var(--nb-accent)}.number-stepper{display:flex;align-items:center;justify-content:space-between;background:var(--nb-input-bg);border:var(--nb-border-thin);border-radius:0;padding:3px;box-shadow:var(--nb-shadow-sm);transition:transform .08s ease,box-shadow .08s ease,background-color .08s ease}.number-stepper:focus-within{background:var(--nb-input-focus);transform:translate(-1px,-1px);box-shadow:4px 4px #000}html[data-theme=dark] .number-stepper:focus-within{outline-color:var(--nb-accent);box-shadow:3px 3px 0 var(--nb-accent)}.number-stepper input[type=number]{flex:1;min-width:0;width:100%;background:transparent;border:none;box-shadow:none;color:var(--nb-text);font-family:var(--font-mono);font-size:13.5px;font-weight:700;text-align:center;padding:4px 6px;outline:none;-moz-appearance:textfield;appearance:textfield}.number-stepper input[type=number]::-webkit-outer-spin-button,.number-stepper input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number-step-btn{width:28px;height:28px;border-radius:0;border:2px solid #000000;background:var(--nb-yellow);color:#000;font-family:var(--font-mono);font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .08s ease,background-color .08s ease}.number-step-btn:hover:not(:disabled){background:var(--nb-accent)}.number-step-btn:active:not(:disabled){transform:translate(1px,1px)}.number-step-btn:disabled{opacity:.35;cursor:not-allowed}.file-input-wrap input[type=file]{width:100%;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--nb-text);background:var(--nb-input-bg);border:2px dashed var(--nb-text);border-radius:0;padding:6px 8px;cursor:pointer;box-shadow:var(--nb-shadow-sm)}.file-input-wrap input[type=file]::file-selector-button{background:var(--nb-yellow);color:#000;border:2px solid #000000;border-radius:0;padding:4px 10px;margin-right:10px;font-family:var(--font-display);font-size:11px;font-weight:700;text-transform:uppercase;cursor:pointer;box-shadow:2px 2px #000;transition:background-color .1s ease}.file-input-wrap input[type=file]::file-selector-button:hover{background:var(--nb-accent)}.color-picker-wrap{display:flex;align-items:center;gap:10px;background:var(--nb-input-bg);border:var(--nb-border-thin);border-radius:0;padding:5px 10px;box-shadow:var(--nb-shadow-sm)}.color-picker-wrap input[type=color]{-webkit-appearance:none;appearance:none;border:2px solid #000000;width:30px;height:26px;padding:0;background:none;cursor:pointer;flex-shrink:0;box-shadow:2px 2px #000}.color-picker-wrap input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-picker-wrap input[type=color]::-webkit-color-swatch{border:none;border-radius:0}.color-hex{font-size:12.5px;font-weight:700;font-family:var(--font-mono);color:var(--nb-text);text-transform:uppercase}.season-control{display:flex;align-items:stretch;gap:8px}.season-stepper{flex:1;display:flex;align-items:center;justify-content:space-between;background:var(--nb-input-bg);border:var(--nb-border-thin);border-radius:0;padding:3px;box-shadow:var(--nb-shadow-sm)}.season-step-btn{width:28px;height:28px;border-radius:0;border:2px solid #000000;background:var(--nb-yellow);color:#000;font-family:var(--font-mono);font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .08s ease,background-color .08s ease}.season-step-btn:hover{background:var(--nb-accent)}.season-step-btn:active{transform:translate(1px,1px)}.season-value{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--nb-text);letter-spacing:.4px;white-space:nowrap;user-select:none;padding:0 6px}.season-reset-btn{width:36px;border-radius:0;border:var(--nb-border-thin);background:var(--nb-surface);color:var(--nb-text);font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--nb-shadow-sm);transition:transform .08s ease,box-shadow .08s ease,background-color .08s ease,color .08s ease}.season-reset-btn:hover:not(:disabled){background:var(--nb-pink);color:#000;transform:translate(-1px,-1px);box-shadow:3px 3px #000}.season-reset-btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:var(--nb-shadow-none)}.season-reset-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.field-help{font-family:var(--font-mono);font-size:10.5px;color:var(--nb-muted)}.json-actions-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}.btn-secondary{background:var(--nb-surface);color:var(--nb-text);border:var(--nb-border-thin);padding:9px 12px;border-radius:0;font-family:var(--font-display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;box-shadow:var(--nb-shadow);transition:transform .08s ease,box-shadow .08s ease,background-color .08s ease,color .08s ease}.btn-secondary:hover{background:var(--nb-blue);color:#000;transform:translate(-2px,-2px);box-shadow:var(--nb-shadow-lg)}.btn-secondary:active{transform:translate(2px,2px);box-shadow:var(--nb-shadow-none)}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--nb-accent);color:#000;border:3px solid #000000;padding:11px 22px;border-radius:0;font-family:var(--font-display);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;box-shadow:var(--nb-shadow);transition:transform .08s ease,box-shadow .08s ease,background-color .08s ease}.btn-primary:hover{background:var(--nb-yellow);transform:translate(-2px,-2px);box-shadow:var(--nb-shadow-lg)}.btn-primary:active{transform:translate(3px,3px);box-shadow:var(--nb-shadow-none)}.btn-primary:disabled{opacity:.65;cursor:wait;transform:none;box-shadow:var(--nb-shadow-sm)}.btn-full{width:100%}.preview-workspace{display:flex;flex-direction:column;height:100%;min-height:0;background-color:var(--nb-bg);background-image:radial-gradient(var(--nb-dot) 1.5px,transparent 1.5px);background-size:24px 24px;overflow:hidden}.preview-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;overflow:hidden;position:relative}.preview-scale-wrapper{width:1280px;height:720px;transform-origin:center center;outline:6px solid #000000;box-shadow:16px 16px #000;border-radius:0;overflow:hidden;flex-shrink:0;background:#070a12}html[data-theme=dark] .preview-scale-wrapper{outline:6px solid #000000;box-shadow:0 0 0 2px #384159,16px 16px #000}.app-footer{display:grid;grid-template-columns:460px 1fr;border-top:var(--nb-border-thick);background:var(--nb-surface);z-index:20}.footer-left{padding:12px 18px;border-right:var(--nb-border-thick);background:var(--nb-surface-alt);display:flex;align-items:center}.footer-right{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 28px;background:var(--nb-surface);min-width:0}.video-title-box{display:flex;align-items:center;gap:12px;background:var(--nb-surface-alt);border:var(--nb-border);border-radius:0;padding:8px 12px;min-width:0;flex:1;max-width:720px;box-shadow:var(--nb-shadow)}html[data-theme=dark] .video-title-box{outline:1px solid #30374b}.video-title-label{font-family:var(--font-display);font-size:12px;font-weight:700;text-transform:uppercase;color:#000;background:var(--nb-yellow);border:1.5px solid #000000;padding:2px 7px;white-space:nowrap}.video-title-text{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--nb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.btn-copy{background:var(--nb-green);color:#000;border:2px solid #000000;border-radius:0;padding:6px 12px;font-family:var(--font-display);font-size:12px;font-weight:700;text-transform:uppercase;cursor:pointer;white-space:nowrap;box-shadow:var(--nb-shadow-sm);transition:transform .08s ease,box-shadow .08s ease,background-color .08s ease}.btn-copy:hover{background:var(--nb-yellow);transform:translate(-1px,-1px);box-shadow:3px 3px #000}.btn-copy:active{transform:translate(2px,2px);box-shadow:var(--nb-shadow-none)}@media (max-width: 1080px){html,body{overflow:auto}.app-layout{height:auto;overflow:visible}.app-body{grid-template-columns:1fr;overflow:visible}.sidebar{height:auto;border-right:none;border-bottom:var(--nb-border-thick)}.preview-workspace{height:600px}.app-footer{grid-template-columns:1fr}.footer-left{border-right:none;border-bottom:var(--nb-border-thick)}.footer-right{flex-wrap:wrap}}
