.hookGrid{grid-template-columns:minmax(330px,410px) minmax(0,1fr);gap:18px}
.hookControls{padding:18px;top:14px}
.mediaDropZone{min-height:118px;border:1px dashed #4e647f;border-radius:8px;background:#0b111b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s}
.mediaDropZone:hover,.mediaDropZone:focus-visible,.mediaDropZone.dragging{outline:0;border-color:#62c6c3;background:#0d1c24;box-shadow:0 0 0 3px rgba(98,198,195,.12)}
.mediaDropZone input{display:none}
.mediaDropZone strong{font-size:15px}
.mediaDropZone small{color:#94a3b8}
.uploadGlyph{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#17363c;color:#8ce3d8;font-size:25px;line-height:1}
.scriptField{margin-top:16px}
.fieldHeading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fieldHeading b{font-size:14px}
.fieldHeading output{color:#91a0b7;font-size:12px;font-variant-numeric:tabular-nums}
.scriptField textarea{width:100%;resize:vertical;min-height:132px;max-height:320px;background:#090e17;color:#f4f7fb;border:1px solid #2b3749;border-radius:8px;padding:12px;outline:0;font:14px/1.7 "Microsoft YaHei UI","Segoe UI",sans-serif}
.scriptField textarea:focus{border-color:#62c6c3;box-shadow:0 0 0 3px rgba(98,198,195,.12)}
.optionGroup{min-width:0;border:0;padding:0;margin:16px 0 0}
.optionGroup legend{padding:0;margin-bottom:8px;color:#dce5f2;font-size:14px;font-weight:700}
.voiceOptions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.voiceOption{position:relative;min-width:0;cursor:pointer}
.voiceOption input{position:absolute;opacity:0;pointer-events:none}
.voiceOption span{min-height:58px;border:1px solid #2b3749;border-radius:8px;background:#0b111b;padding:9px 10px;display:flex;flex-direction:column;justify-content:center;gap:3px;transition:.18s}
.voiceOption b{font-size:13px;color:#eef4fa}
.voiceOption small{font-size:11px;color:#8e9bad}
.voiceOption input:checked+span{border-color:#62c6c3;background:#10272a;box-shadow:inset 3px 0 #62c6c3}
.voiceOption input:focus-visible+span{outline:2px solid #8ce3d8;outline-offset:2px}
.rangeGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:5px}
.rangeGrid .field{margin-bottom:0}
.rangeGrid input[type="range"]{accent-color:#f0b35f}
.delayField{margin-top:14px}
.delayField .fieldHeading small{color:#91a0b7;font-size:12px;font-weight:400}
.delayInputWrap{height:42px;margin-top:8px;border:1px solid #2b3749;border-radius:8px;background:#090e17;display:grid;grid-template-columns:minmax(0,1fr) 42px;align-items:center;overflow:hidden;transition:border-color .18s,box-shadow .18s}
.delayInputWrap:focus-within{border-color:#62c6c3;box-shadow:0 0 0 3px rgba(98,198,195,.12)}
.delayInputWrap input{width:100%;height:100%;min-width:0;border:0;outline:0;background:transparent;color:#f4f7fb;padding:0 12px;font:14px "Microsoft YaHei UI","Segoe UI",sans-serif;font-variant-numeric:tabular-nums}
.delayInputWrap>span{height:24px;border-left:1px solid #2b3749;color:#91a0b7;display:grid;place-items:center;font-size:12px}
.audioGroup{margin-top:14px}
.segmented{display:grid;grid-template-columns:1fr 1fr;padding:3px;border:1px solid #2b3749;border-radius:8px;background:#090e17}
.segmented label{position:relative;cursor:pointer}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented span{min-height:35px;border-radius:5px;display:grid;place-items:center;color:#98a6ba;font-size:13px;font-weight:700;transition:.18s}
.segmented input:checked+span{background:#273348;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.24)}
.segmented input:focus-visible+span{outline:2px solid #8ce3d8;outline-offset:1px}
.ttsActions{grid-template-columns:140px minmax(0,1fr);margin-top:16px}
.ttsActions button{min-height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.ttsActions .primary{background:#2f7f79;box-shadow:0 10px 24px rgba(47,127,121,.25)}
.ttsActions .ghost{background:#172033}
.voicePreview{width:100%;height:42px;margin-top:12px;display:none}
.voicePreview.ready{display:block}
.hookControls .status{margin-top:10px;min-height:22px}
.hookControls[aria-busy="true"] .mediaDropZone,.hookControls[aria-busy="true"] .optionGroup,.hookControls[aria-busy="true"] .rangeGrid,.hookControls[aria-busy="true"] .delayField,.hookControls[aria-busy="true"] .scriptField{opacity:.72}
.hookPreviewPanel{min-height:650px;padding:14px;align-items:stretch}
.previewTop,.resultHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:5px 4px 13px;border-bottom:1px solid rgba(255,255,255,.08)}
.previewTop>div,.resultHeader>div{min-width:0;display:flex;flex-direction:column;gap:4px}
.previewTop strong,.resultHeader strong{font-size:14px;overflow-wrap:anywhere}
.previewTop small,.resultHeader small{color:#8f9db1;font-size:12px;overflow-wrap:anywhere}
.stateBadge{flex:0 0 auto;border:1px solid #344159;border-radius:999px;padding:5px 9px;color:#a8b4c6;background:#111827;font-size:11px}
.stateBadge.ready{border-color:#2d6d68;color:#90e2d8;background:#102421}
.stateBadge.working{border-color:#8b6535;color:#ffd08a;background:#2a2014}
.mediaStage{position:relative;width:100%;min-height:520px;margin-top:14px;border:1px solid #273348;border-radius:8px;background:#06090e;display:grid;place-items:center;overflow:hidden}
.mediaStage img,.mediaStage video{display:none;width:100%;height:100%;max-height:610px;object-fit:contain;background:#000}
.mediaStage img.visible,.mediaStage video.visible{display:block}
.emptyPreview{display:flex;flex-direction:column;align-items:center;gap:9px;color:#77869b}
.emptyPreview span{font-size:48px;color:#40506a}
.emptyPreview strong{font-size:13px}
.resultSection{margin-top:18px;padding-top:2px}
.resultSection[hidden]{display:none}
.resultStage{min-height:420px;margin-top:12px}
.resultStage video{display:block}
.downloadButton{flex:0 0 auto;min-height:36px;padding:8px 12px;border-radius:8px;background:#2f7f79;color:#fff;text-decoration:none;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:7px}
.downloadButton:hover{filter:brightness(1.1)}
@media(max-width:1080px){.hookGrid{grid-template-columns:360px minmax(0,1fr)}.mediaStage{min-height:440px}}
@media(max-width:900px){.hookGrid{grid-template-columns:1fr}.hookControls{position:static}.hookPreviewPanel{min-height:0}.mediaStage{min-height:360px}.resultStage{min-height:320px}}
@media(max-width:560px){.shell{width:min(100% - 20px,1220px);margin-top:12px}.hookControls,.hookPreviewPanel{padding:12px}.voiceOptions{grid-template-columns:1fr 1fr}.rangeGrid{grid-template-columns:1fr}.ttsActions{grid-template-columns:1fr}.mediaStage{min-height:270px}.resultStage{min-height:250px}.previewTop,.resultHeader{align-items:flex-start}.resultHeader{flex-wrap:wrap}.downloadButton{width:100%;justify-content:center}.announcementBar{padding:14px}.announcementBar h1{font-size:24px}.announcementBar .ghost{width:100%;text-align:center}.stateBadge{margin-top:1px}}
@media(max-width:360px){.voiceOptions{grid-template-columns:1fr}.segmented{grid-template-columns:1fr}.segmented span{min-height:34px}}