:root{color-scheme:light;font-family:Hiragino Kaku Gothic ProN,Hiragino Sans,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--bg: #f5f6f8;--surface: #ffffff;--surface-2: #f2f0ea;--line: #d9dee5;--line-strong: #aeb9c8;--text: #15191f;--text-2: #586270;--text-3: #818b99;--accent: #5a4fcf;--accent-bg: #efedff;--accent-border: #c8c2ff;--danger: #b2435b;--danger-bg: #fae9ee;--ok: #16735f;--ok-bg: #e6f5f0;--radius: 8px}*{box-sizing:border-box}html{min-width:320px;min-height:100%;background:var(--bg)}body{min-height:100%;margin:0;color:var(--text);background:var(--bg)}body,button,input,select{font:inherit}button,input,select{color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}a{color:inherit;text-decoration:none}#root{min-height:100dvh}.app-shell{display:grid;width:min(1240px,100%);height:100dvh;margin:0 auto;padding:14px;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;overflow:hidden}.topbar{display:flex;min-height:48px;align-items:center;justify-content:space-between;gap:12px;padding:0 2px}.brand{display:inline-flex;min-width:0;align-items:center;gap:10px}.brand-mark{display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;border-radius:var(--radius);color:#fff;background:var(--text);font-size:.95rem;font-weight:900;line-height:1}.brand-copy{display:flex;min-width:0;flex-direction:column;gap:1px}.brand-name{font-size:1.02rem;font-weight:850;line-height:1.2;letter-spacing:0}.brand-sub{color:var(--text-3);font-size:.72rem;font-weight:700}.top-actions,.status-actions,.quick-actions{display:flex;min-width:0;align-items:center;justify-content:flex-end;gap:7px}.tool-button,.icon-button,.sample-button,.toggle-button{display:inline-flex;min-height:34px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:.82rem;font-weight:750;line-height:1;transition:border-color .15s,background .15s,color .15s}.tool-button,.toggle-button{gap:6px;padding:0 10px}.tool-button.primary{color:#fff;border-color:var(--accent);background:var(--accent)}.icon-button{width:34px;padding:0;color:var(--text-2)}.tool-button:hover,.icon-button:hover,.sample-button:hover,.toggle-button:hover{border-color:var(--line-strong)}.tool-button.primary:hover{border-color:#483fb4;background:#483fb4}.workspace{display:grid;min-height:0;grid-template-columns:minmax(0,1fr) minmax(380px,430px);gap:10px}.input-panel,.result-panel,.result-card,.drop-zone,.preview-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.input-panel{display:grid;min-width:0;min-height:0;grid-template-rows:auto minmax(150px,auto) minmax(0,1fr);overflow:hidden}.panel-head{display:flex;min-height:40px;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}.panel-title,.section-head span{display:inline-flex;align-items:center;gap:7px}.panel-title{font-size:.84rem;font-weight:850}.panel-count{color:var(--text-3);font-size:.76rem;font-weight:800;white-space:nowrap}.drop-zone{display:grid;align-content:center;justify-items:center;gap:8px;margin:10px;padding:18px;text-align:center;border-style:dashed;background:#fbfcfd}.drop-zone[data-active=true]{border-color:var(--accent-border);background:var(--accent-bg)}.file-input{display:none}.drop-icon{display:grid;width:46px;height:46px;place-items:center;border-radius:var(--radius);color:var(--accent);background:var(--accent-bg)}.drop-title{max-width:100%;overflow:hidden;font-size:1rem;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.drop-copy{color:var(--text-3);font-size:.78rem;font-weight:700;line-height:1.6}.preview-card{display:grid;min-height:0;margin:0 10px 10px;overflow:hidden;background:linear-gradient(45deg,#eef2f7 25%,transparent 25%),linear-gradient(-45deg,#eef2f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f7 75%),linear-gradient(-45deg,transparent 75%,#eef2f7 75%);background-color:#fbfcfd;background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.video-preview{display:block;width:100%;height:100%;min-height:320px;object-fit:contain;background:#111318}.empty-preview{display:grid;min-height:320px;place-items:center;gap:8px;color:var(--text-3);font-size:.86rem;font-weight:750}.result-panel{display:grid;min-width:0;min-height:0;align-content:start;gap:10px;overflow-y:auto;padding:10px;scrollbar-gutter:stable}.result-panel::-webkit-scrollbar{width:10px}.result-panel::-webkit-scrollbar-thumb{border:2px solid #f7f8fa;border-radius:999px;background:#b9c4cf}.result-card{display:grid;gap:10px;padding:14px}.primary-result{min-height:158px;align-content:center;border-left:3px solid var(--accent-border)}.result-kicker,.result-note{color:var(--text-3);font-size:.78rem;font-weight:800}.main-result{max-width:100%;overflow:hidden;font-size:clamp(2.2rem,7vw,3.8rem);line-height:1;letter-spacing:0;text-overflow:clip;white-space:nowrap}.progress-wrap{display:block;width:100%;height:8px;overflow:hidden;border-radius:999px;background:var(--bg)}.progress-bar{display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width .1s linear}.controls-card{gap:12px}.section-head{display:flex;min-height:30px;align-items:center;justify-content:space-between;gap:10px;color:var(--text-2);font-size:.82rem;font-weight:850}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.range-editor{display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:7px;background:#fbfcfd}.range-editor label{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:8px}.range-editor label span,.range-summary{color:var(--text-3);font-size:.72rem;font-weight:800}.range-editor input[type=range]{width:100%;min-width:0;accent-color:var(--accent)}.range-summary{justify-self:end}.quick-actions{justify-content:stretch;flex-wrap:wrap}.quick-actions .tool-button{flex:1 1 calc(50% - 4px)}.number-field,.select-field{display:grid;gap:6px}.number-field>span:first-child,.select-field>span:first-child{color:var(--text-2);font-size:.78rem;font-weight:850}.input-wrap,.select-field select,.toggle-button{min-height:42px;border:1px solid var(--line);border-radius:7px;background:#fff}.input-wrap{display:flex;align-items:center;overflow:hidden}.input-wrap input{width:100%;min-width:0;height:40px;border:0;outline:0;padding:0 10px;background:transparent;font-weight:800}.input-wrap span{flex:0 0 auto;padding:0 10px 0 0;color:var(--text-3);font-size:.76rem;font-weight:850}.select-field select{width:100%;padding:0 10px;color:var(--text);font-weight:800}.toggle-button{align-self:end;color:var(--text-2)}.toggle-button[data-active=true]{color:var(--accent);border-color:var(--accent-border);background:var(--accent-bg)}.detail-list{display:grid;gap:8px}.detail-row{display:flex;min-height:46px;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:7px;background:var(--bg)}.detail-row>span{color:var(--text-3);font-size:.72rem;font-weight:750}.detail-row strong{min-width:0;color:var(--text);font-size:.95rem;font-weight:850;overflow-wrap:anywhere;text-align:right}.statusbar{display:flex;min-height:36px;align-items:center;justify-content:space-between;gap:12px;padding:0 2px}.status-note{color:var(--text-3);font-size:.76rem;font-weight:750}.sample-button{gap:6px;padding:0 10px;color:var(--accent);border-color:var(--accent-border);background:var(--accent-bg)}.feedback{display:inline-flex;min-height:30px;align-items:center;padding:0 10px;border-radius:7px;background:var(--ok-bg);color:var(--ok);font-size:.76rem;font-weight:800;white-space:nowrap}.feedback[data-tone=error]{color:var(--danger);background:var(--danger-bg)}.spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:940px){.app-shell{height:auto;min-height:100dvh;overflow:visible}.workspace{grid-template-columns:1fr}.result-panel{overflow:visible}}@media(max-width:620px){.app-shell{padding:10px;gap:8px}.topbar{align-items:stretch;flex-direction:column}.top-actions{justify-content:stretch;flex-wrap:wrap}.tool-button{flex:1 1 auto}.field-grid{grid-template-columns:1fr}.video-preview,.empty-preview{min-height:230px}.statusbar{align-items:stretch;flex-direction:column}.status-actions{justify-content:stretch}.sample-button{flex:1 1 auto}}