:root{color:#172033;background:#f6f8fc;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:geometricPrecision}*{box-sizing:border-box}html{min-height:100%}body{min-height:100vh;margin:0;background:radial-gradient(circle at 18% -10%,rgba(37,99,235,.16),transparent 30%),linear-gradient(180deg,#f8fbff,#eef3fb)}body.editor-body-lock,body.editor-body-lock #root{height:100vh;overflow:hidden}html.obs-player-root,html.obs-player-root body,body.obs-player-body{background:transparent}button,input,select,textarea{font:inherit}button{min-height:38px;border:1px solid #dbe3ef;border-radius:10px;padding:9px 14px;background:#fff;color:#213047;cursor:pointer;box-shadow:0 1px 2px #0f172a0f;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}button:hover{border-color:#b8c6dc;box-shadow:0 8px 22px #0f172a1a;transform:translateY(-1px)}button.primary{border-color:#2563eb;background:#2563eb;color:#fff;box-shadow:0 10px 24px #2563eb3d}button.primary:hover{background:#1d4ed8}button.danger{border-color:#fecaca;background:#fff1f2;color:#be123c}button.danger:hover{border-color:#fda4af;background:#ffe4e6}input,select,textarea{width:100%;min-width:0;border:1px solid #dbe3ef;border-radius:10px;padding:10px 12px;background:#fff;color:#172033;outline:none;transition:border-color .14s ease,box-shadow .14s ease}input:focus,select:focus,textarea:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb1f}textarea{resize:vertical;font:13px ui-monospace,SFMono-Regular,Consolas,monospace}label{display:grid;gap:7px;color:#516076;font-size:13px;font-weight:600}h1,h2,p{margin:0}h1{color:#101828;font-size:28px;font-weight:760;letter-spacing:0}h2{color:#1f2a3d;font-size:15px;font-weight:740;margin:0 0 14px}a{color:inherit;text-decoration:none}.muted{color:#66758c;font-size:13px;line-height:1.45}.center,.login{min-height:100vh;display:grid;place-items:center;padding:24px}.login-panel{width:min(420px,100%);display:grid;gap:16px}.panel,.material-card,.login-panel,.sound-page,.tool-panel{background:#fffffff0;border:1px solid rgba(219,227,239,.86);border-radius:18px;box-shadow:0 18px 48px #1c273c17;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.panel,.material-card,.login-panel{padding:22px}.app-shell{min-height:100vh;padding:28px}.editor-page{height:100vh;max-height:100vh;padding:14px;overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr)}.material-page{background:radial-gradient(circle at 86% -8%,rgba(14,165,233,.16),transparent 28%),linear-gradient(180deg,#f8fbff,#f1f5fb)}.topbar,.editor-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;margin-bottom:12px}.topbar p{margin-top:4px;color:#6b7890;font-size:13px}.editor-hero{grid-template-columns:auto minmax(0,1fr) auto}.hero-title{min-width:0;display:grid;gap:7px}.hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.build-badge{min-height:34px;display:inline-flex;align-items:center;padding:7px 10px;border:1px solid #dbe3ef;border-radius:10px;background:#ffffffbd;color:#64748b;font-size:12px;font-weight:800;white-space:nowrap}.icon-text,.upload-button{display:inline-flex;align-items:center;justify-content:center;gap:8px}.icon-button{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:14px;background:#fff;border:1px solid #dbe3ef;box-shadow:0 10px 28px #0f172a14}.toolbar{margin-bottom:18px;padding:14px;border-radius:18px;background:#ffffffb8;border:1px solid rgba(219,227,239,.8)}.inline-form,.user-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:14px}.streamer-card{display:grid;gap:12px;min-height:118px;padding:20px;background:#fff;border:1px solid #e1e8f2;border-radius:18px;box-shadow:0 14px 34px #0f172a12;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.streamer-card:hover{transform:translateY(-2px);border-color:#bfd0eb;box-shadow:0 22px 48px #0f172a1c}.streamer-card strong{font-size:17px;color:#111827}.streamer-card span{color:#64748b;font-size:12px;overflow-wrap:anywhere}.table{display:grid;gap:10px;margin-top:16px}.table-row{display:grid;grid-template-columns:minmax(150px,1fr) 110px minmax(150px,220px) minmax(150px,1fr) auto auto;align-items:center;gap:10px;padding:12px;border:1px solid #edf2f7;border-radius:14px;background:#fbfdff}.error{color:#b42318;font-weight:650}.notice{margin-bottom:16px;padding:12px 14px;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:14px;color:#166534;font-size:14px;box-shadow:0 8px 20px #16653414}.toast-notice{position:fixed;right:24px;top:24px;z-index:50;max-width:min(520px,calc(100vw - 48px));margin:0}.upload-progress{position:fixed;right:24px;top:84px;z-index:51;width:min(420px,calc(100vw - 48px));padding:14px;border:1px solid #bfdbfe;border-radius:14px;background:#fffffff5;box-shadow:0 16px 38px #0f172a29}.upload-progress div{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;color:#1f2a3d;font-size:13px}.upload-progress strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-progress span{color:#2563eb;font-weight:800}.upload-progress progress{width:100%;height:10px;accent-color:#2563eb}.overlay-link{display:flex;gap:8px;align-items:center;min-width:260px;padding:8px 8px 8px 12px;background:#fff;border:1px solid #e1e8f2;border-radius:14px;box-shadow:0 10px 26px #0f172a12}.overlay-link span{flex:1;color:#516076;font-size:13px;overflow-wrap:anywhere}.tabs{display:inline-flex;gap:5px;padding:5px;margin-bottom:10px;background:#e8eef7;border:1px solid #dbe3ef;border-radius:16px}.tabs button{min-width:116px;border:0;background:transparent;box-shadow:none;color:#56657b;font-weight:700}.tabs button:hover{transform:none;box-shadow:none;background:#ffffff73}.tabs button.active{background:#fff;color:#1d4ed8;box-shadow:0 8px 18px #0f172a1f}.tab-panel.hidden{display:none}.tab-panel{min-height:0;height:100%;overflow:hidden}.editor-workspace{display:grid;gap:14px;align-items:stretch;min-height:0;height:100%;overflow:hidden}.tool-panel{padding:14px;position:relative;max-height:none;height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.sidebar-resizer{position:absolute;top:12px;right:-12px;width:12px;height:calc(100% - 24px);cursor:col-resize;z-index:5}.sidebar-resizer:after{content:"";position:absolute;top:0;right:5px;width:3px;height:100%;border-radius:999px;background:#2563eb29}.sidebar-resizer:hover:after{background:#2563eb73}.upload-button{width:100%;border:1px dashed #a7b6cc;border-radius:14px;padding:12px;margin-bottom:14px;background:#f8fbff;color:#334155;cursor:pointer;font-weight:720}.upload-button:hover{background:#f1f6ff}.upload-button.compact{width:auto;margin-bottom:0}.upload-button input{display:none}.wide-button{width:100%;justify-content:center;margin-bottom:20px}.property-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.property-grid input{width:100%}.property-actions{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.property-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;align-self:end}.property-html{grid-column:1 / -1}.code-editor{min-height:120px;border:1px solid #dbe3ef;border-radius:12px;background:#0f172a;overflow:hidden}.code-editor textarea,.code-editor pre{outline:0!important;font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace!important}.code-editor textarea{caret-color:#f8fafc!important}.code-editor pre{color:#dbeafe!important}.code-editor .token.tag,.code-editor .token.selector,.code-editor .token.keyword{color:#7dd3fc}.code-editor .token.attr-name,.code-editor .token.property{color:#fbbf24}.code-editor .token.string,.code-editor .token.attr-value{color:#86efac}.code-editor .token.function{color:#c4b5fd}.code-editor .token.number,.code-editor .token.boolean{color:#fdba74}.code-editor .token.comment{color:#94a3b8}.layer-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}.layer-actions button,.property-actions button{min-height:34px;padding:7px 8px;font-size:12px;font-weight:700}.outliner{display:grid;gap:7px;max-height:320px;overflow:auto}.outliner.hidden{display:none}.layer-panel{display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr);gap:10px}.layer-panel .wide-button{margin-bottom:0}.layer-panel .outliner{max-height:none;min-height:0}.layer-hint{margin-bottom:0}.layer-row{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px;border:1px solid #e1e8f2;border-radius:12px;background:#fff;cursor:pointer}.layer-row[draggable=true]{cursor:grab}.layer-row.dragging{opacity:.48;border-style:dashed;background:#f8fbff}.layer-row.active{border-color:#2563eb;background:#eff6ff;color:#1d4ed8}.layer-row input{flex:1;min-height:32px;padding:6px 8px;border-radius:8px;font-size:13px}.layer-row small{min-width:72px;color:#64748b;font-size:11px;text-align:right}.layer-visibility{min-width:32px;width:32px;height:32px;min-height:32px;padding:0;display:grid;place-items:center;border-radius:9px}.outliner small{color:#64748b;font-size:11px}.editor-stage-shell{min-width:0;min-height:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;padding-bottom:0}.stage-toolbar{z-index:4;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;margin-bottom:0;padding:4px 8px;color:#64748b;font-size:13px;font-weight:700;background:#f6f8fce0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.zoom-controls{display:inline-flex;align-items:center;gap:8px}.zoom-controls button{min-width:34px;min-height:30px;padding:5px 8px}.zoom-controls input{width:140px;padding:0}.zoom-controls .active-tool{border-color:#2563eb;background:#eff6ff;color:#1d4ed8}.zoom-controls .live-tool{border-color:#16a34a;background:#ecfdf5;color:#166534}.stage-status{min-height:30px;display:inline-flex;align-items:center;padding:5px 10px;border:1px solid #dbe3ef;border-radius:10px;background:#ffffffb3;color:#64748b;font-size:12px;font-weight:800}.custom-stage-wrap{position:relative;width:100%;height:100%;min-width:0;min-height:0;margin:0 auto;overflow:hidden;border-radius:0;background:#dfe7f2}.custom-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:top left;outline:1px solid #1f2b42;background:linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.035) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.035) 75%),#0f172a;background-size:32px 32px;background-position:0 0,0 16px,16px -16px,-16px 0;overflow:hidden;-webkit-user-select:none;user-select:none;cursor:default;will-change:transform}.stage-element{outline:1px solid transparent;cursor:move}.stage-element.selected{outline:3px solid #38bdf8;box-shadow:0 0 0 1px #ffffffe6,0 0 34px #38bdf873}.stage-element.ghosted{filter:grayscale(.55)}.stage-element.ghosted:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:2px dashed rgba(248,250,252,.85);background:#0f172a38;pointer-events:none}.stage-element img{width:100%;height:100%;display:block;pointer-events:none}.stage-element video{width:100%;height:100%;display:block;pointer-events:none}.html-preview{width:100%;height:100%;pointer-events:none}.html-preview-frame{width:100%;height:100%;border:0;background:transparent;display:block;pointer-events:none}.countdown-preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:none}.text-preview{width:100%;height:100%;display:flex;align-items:center;white-space:pre-wrap;word-break:break-word;overflow:hidden;pointer-events:none}.check-row{display:flex;grid-template-columns:none;align-items:center;gap:9px;padding:9px 10px;border:1px solid #e1e8f2;border-radius:10px;background:#fbfdff}.check-row input{width:16px;min-width:16px;height:16px}.video-live-controls{grid-column:1 / -1;display:grid;gap:10px;padding:10px;border:1px solid #dbe3ef;border-radius:10px;background:#fbfdff}.video-live-controls>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.video-live-controls button{display:inline-flex;align-items:center;justify-content:center;gap:7px}.resize-handle{position:absolute;width:18px;height:18px;border-radius:50%;background:#38bdf8;border:2px solid #fff;box-shadow:0 5px 14px #0f172a47;pointer-events:auto}.resize-handle-nw{left:-8px;top:-8px;cursor:nwse-resize}.resize-handle-ne{right:-8px;top:-8px;cursor:nesw-resize}.resize-handle-sw{left:-8px;bottom:-8px;cursor:nesw-resize}.resize-handle-se{right:-8px;bottom:-8px;cursor:nwse-resize}.guide-bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.sound-page{padding:22px;height:100%;overflow:auto}.section-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.section-header p{color:#66758c;font-size:13px;margin-top:5px}.sound-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.sound-card{display:grid;gap:14px;padding:16px;border:1px solid #e1e8f2;border-radius:16px;background:linear-gradient(180deg,#fff,#f9fbff);box-shadow:0 10px 26px #0f172a0f}.sound-card strong{color:#172033;overflow-wrap:anywhere}.sound-duration{color:#64748b;font-size:13px;font-weight:700}.volume-row{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:9px}.sound-actions{display:flex;gap:8px;flex-wrap:wrap}.asset-list{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:18px}.asset-list img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid #e1e8f2;border-radius:12px;background:#f8fafc}.token-editor{display:grid;grid-template-columns:1fr auto auto;gap:8px}.settings-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr);gap:18px;height:100%;overflow:auto}.player{width:100vw;height:100vh;margin:0;overflow:hidden;background:transparent}.player-stage{width:1920px;height:1080px;position:relative;overflow:hidden;transform-origin:top left}@media(max-width:1000px){.topbar,.editor-hero,.section-header{grid-template-columns:1fr;align-items:stretch;flex-direction:column}.editor-workspace,.settings-grid{grid-template-columns:1fr}.tool-panel{position:static;max-height:none}.sidebar-resizer{display:none}.custom-stage-wrap{min-width:0;width:100%}.hero-actions{flex-wrap:wrap}.table-row{grid-template-columns:1fr}}