:root{--bg: #f4f6ef;--panel: #ffffff;--line: #d7dccd;--ink: #1f2a1f;--muted: #5e6858;--brand: #22543d;--brand-soft: #e6f3ea;--danger: #b42318;--pending: #7c5c11;--processing: #0f5e85;--done: #166534}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;height:100%;font-family:Sora,sans-serif;color:var(--ink);background:radial-gradient(700px 340px at 8% -10%,#e8efe0 0%,transparent 70%),radial-gradient(760px 360px at 95% -8%,#e6efe7 0%,transparent 72%),var(--bg)}#root{height:100%}input[type=checkbox]{flex-shrink:0;width:18px;height:18px}input[type=checkbox]:checked{accent-color:var(--brand)}.app-shell{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.top-bar{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:0 16px;height:64px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#fff,#f5f9f3)}.top-bar .hero-label{font-size:1.25rem;letter-spacing:.1em;white-space:nowrap;margin:0}.top-bar .notice{flex:1;min-width:0;padding:6px 10px;font-size:.75rem;border-radius:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-bar .status-row{margin-top:0;flex-shrink:0}.content-area{flex:1;display:flex;overflow:hidden;min-height:0}.sidebar{width:20%;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--panel);overflow:hidden}.sidebar-section{flex-shrink:0;padding:14px;border-bottom:1px solid var(--line)}.sidebar-section h2{margin-bottom:8px}.sidebar-sources{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}.sidebar-sources-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.sidebar-sources-header h2{margin:0}.main-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:var(--bg)}.tab-nav{flex-shrink:0;display:flex;align-items:stretch;border-bottom:1px solid var(--line);padding:0 16px;background:var(--panel);gap:2px}.tab-btn{display:inline-flex;align-items:center;gap:7px;padding:12px 14px;background:none;border:0;border-radius:0;border-bottom:2px solid transparent;color:var(--muted);font-weight:600;font-size:.86rem;cursor:pointer;white-space:nowrap;margin-bottom:-1px;transition:color .14s ease,border-color .14s ease}.tab-btn:hover{color:var(--ink)}.tab-btn.active{color:var(--brand);border-bottom-color:var(--brand)}.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:.7rem;font-weight:700;letter-spacing:0}.tab-badge.active-badge{background:#fff4d6;color:var(--pending)}.tab-content{flex:1;overflow-y:auto;padding:14px 16px;min-height:0}.tab-content[hidden]{display:none}.sticky-toolbar{position:sticky;top:0;z-index:2;background:var(--bg);padding-bottom:0;border-radius:10px;margin-bottom:4px}.hero{border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#fff,#f3f8f1);padding:18px}.hero-label{margin:0;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--brand)}h1{margin:6px 0;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.02em}.hero-sub{margin:0;color:var(--muted)}.status-row{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}.status-row span{border-radius:999px;border:1px solid #c5d4c8;background:var(--brand-soft);padding:4px 10px;font-size:.8rem}.notice{border:1px solid #d9e2d2;border-radius:12px;background:#f8fbf6;color:#344130;padding:10px 12px;font-size:.9rem}.spinner{border-radius:50%;width:16px;height:16px;background:linear-gradient(90deg,#fff,#e6f3ea,#fff);box-shadow:inset 0 0 0 2px #22543d1f}.notice.fade-out{opacity:0;transform:translateY(-6px);transition:opacity .32s ease,transform .32s ease;pointer-events:none}.notice.ok{border-color:#b5d8bf;background:#ecf9f0;color:#14532d}.notice.warn{border-color:#efdca6;background:#fff8e8;color:#6b4f0f}.notice.error{border-color:#f2c0bc;background:#fff2f1;color:#7f1d1d}.panel{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px;min-width:0}h2{margin:0 0 10px;font-size:.92rem;text-transform:uppercase;letter-spacing:.06em;color:var(--brand)}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.row{display:flex;gap:8px;min-width:0}.row+.row{margin-top:8px}input[type=url],input[type=text],select{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:10px 12px;font-family:IBM Plex Mono,monospace;font-size:.86rem}select{width:auto;min-width:120px}button{border:0;border-radius:10px;padding:10px 12px;background:var(--brand);color:#fff;cursor:pointer;font-weight:600;white-space:nowrap;transition:opacity .12s ease,transform .1s ease,background .12s ease}button:hover:not(:disabled){opacity:.88}button:active:not(:disabled){transform:scale(.97)}button:disabled{opacity:.45;cursor:not-allowed}button.secondary{background:#f5f8f2;color:#2f3e2f;border:1px solid var(--line)}button.danger{background:#fff4f4;color:var(--danger);border:1px solid #f0c8c6}.option-group{display:flex;flex-direction:column;gap:3px}.option-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding-left:2px;pointer-events:none}.options-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;align-items:end}.options-grid .option-group input,.options-grid .option-group select{width:100%;height:36px}.options-actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.video-item:has(input:checked){border-color:var(--brand);background:#f0faf3;box-shadow:inset 3px 0 0 var(--brand)}.video-item{cursor:pointer;transition:border-color .12s ease,background .12s ease,box-shadow .12s ease}.video-item:hover{border-color:#b5cebb;background:#f8fcf6}.video-list,.source-list,.queue-list,.result-list{display:grid;gap:8px;min-width:0}.video-item,.source-item,.queue-item,.result-item{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fcfdfb;min-width:0;overflow:hidden}.source-item{cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease}.source-item:hover{border-color:#bfccb9;box-shadow:0 4px 12px #1f2a1f0f}.source-item.selected{border-color:var(--brand);background:#f3fbf4;box-shadow:inset 3px 0 0 var(--brand)}.result-item.clickable{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.result-item.clickable:hover{transform:translateY(-1px);border-color:#bfccb9;box-shadow:0 10px 24px #1f2a1f0f}.video-title,.source-title,.result-head,.queue-top{display:flex;align-items:center;gap:8px;justify-content:space-between;font-weight:600;min-width:0}.source-title,.result-head strong,.queue-top strong,.video-title span{min-width:0;overflow-wrap:anywhere;word-break:break-word}.video-title{justify-content:flex-start}.video-meta,.source-meta,.queue-meta{margin-top:6px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;font-size:.82rem;text-transform:capitalize}.video-meta span{border:#1665341a 1px solid;background:#1665340d;color:#166534;padding:2px 8px;border-radius:999px;font-weight:700}.source-title .platform{text-transform:capitalize;font-weight:700;font-size:small;color:var(--danger);background-color:#b5cebb68;padding:6px;border-radius:6px}.result-tags{margin-top:6px;display:flex;flex-wrap:wrap;gap:5px}.tag{display:inline-block;padding:2px 9px;border-radius:999px;border:1px solid #dde5d7;background:#f4f8f1;font-size:.74rem;color:var(--muted);text-transform:capitalize}.tag.ok{color:#1f6b2f;border-color:#9dcfa8;background:#ebf8ef;font-weight:700}.tag.warn{color:#8a6418;border-color:#e2cc95;background:#fff8e5;font-weight:700}.tag.muted{color:#9aad95;border-color:#eaece7;background:transparent}.result-chosen-hook{margin:7px 0 0;font-size:.87rem;color:#2a3d2a;font-style:italic;line-height:1.45;overflow-wrap:anywhere;word-break:break-word}.result-hook-hint{margin:6px 0 0;font-size:.8rem;color:var(--muted)}.video-description,.queue-description,.result-description{margin-top:6px;color:#445244;line-height:1.45;font-size:.84rem;overflow-wrap:anywhere;word-break:break-word}.video-url,.queue-url{margin-top:6px;font-size:.78rem;color:#556252;word-break:break-all}.result-text{overflow-wrap:anywhere;word-break:break-word}.source-actions{margin-top:8px;flex-wrap:wrap}.source-note{margin-top:6px;color:var(--muted);font-size:.82rem}.error-text{color:var(--danger)}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}.compact-row{align-items:center}.switch{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.82rem}.badge{border-radius:999px;padding:3px 10px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.badge.pending{background:#fff4d6;color:var(--pending)}.badge.processing{background:#e8f5fb;color:var(--processing)}.badge.done{background:#e8f8ec;color:var(--done)}.result-text{margin:8px 0;color:#2d382d;line-height:1.5}.hook-list{display:flex;gap:6px;flex-wrap:wrap;min-width:0}.hook-item{display:grid;gap:6px;min-width:0}.hook-talktrack-preview,.hook-talktrack{margin:0;padding:8px 10px;border:1px solid #dbe4d6;border-radius:10px;background:#f9fcf7;color:#344334;font-size:.82rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.hook-variant-list{display:grid;gap:10px}.hook-variant-item{display:grid;gap:8px}.hook-card-list{display:grid;gap:12px}.hook-card{border:1px solid #d5e2d2;border-radius:12px;padding:12px 14px;background:#fff;display:grid;gap:10px;transition:border-color .16s ease}.hook-card.chosen{border-color:var(--brand);background:#f3fbf4;box-shadow:inset 3px 0 0 var(--brand)}.hook-card.used{border-color:#8bc59b;background:#f0fbf3}.hook-card.favorite{border-color:#d4b84a;background:#fff9e4}.hook-card.rejected{border-color:#d9a9a7;background:#fff3f2;opacity:.72}.hook-card-head{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}.hook-card-text{margin:0;font-weight:700;font-size:.97rem;color:#1d2e1d;line-height:1.45;overflow-wrap:anywhere;word-break:break-word;flex:1}.hook-apply{flex-shrink:0;padding:5px 13px;font-size:.78rem;border:1px solid #c5d5c2;background:#f6faf5;border-radius:8px;color:#3a5a3a;cursor:pointer;white-space:nowrap;transition:background .14s ease,border-color .14s ease}.hook-apply:hover{background:#e8f5ea;border-color:var(--brand)}.hook-apply.active{background:#d2f0d8;border-color:var(--brand);color:#1a4624;font-weight:700}.hook-card-body{border-top:1px solid #eaf0e6;padding-top:10px}.hook-card-actions{display:flex;gap:6px;flex-wrap:wrap;padding-top:4px;border-top:1px solid #f0f4ed}.script-body{min-width:0}.script-para{margin:0 0 8px;color:#2e3e2e;line-height:1.65;overflow-wrap:anywhere;word-break:break-word;font-size:.88rem}.script-para:last-child{margin-bottom:0}.result-muted{color:var(--muted);font-style:italic}.hook-actions{display:flex;gap:6px;flex-wrap:wrap}.pagination-row{position:sticky;bottom:0;margin-top:12px;padding:5px;display:flex;z-index:2;align-items:center;justify-content:flex-end;gap:12px;color:var(--muted);font-size:.84rem}.hook{border:1px solid #c9d5c8;background:#f7faf4;color:#2f3c2f;box-shadow:none;font-weight:500;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word;text-align:left}.hook.active{border-color:#9bc4a2;background:#ecf8ef;color:#1f5132}.hook.used{border-color:#8bc59b;background:#ebf8ef}.hook.favorite{border-color:#e6c56d;background:#fff8dd}.hook.rejected{border-color:#e1b5b3;background:#fff2f1;color:#8a2f29}button.small{padding:6px 8px;font-size:.75rem}.empty{border:1px dashed var(--line);border-radius:10px;padding:14px;color:var(--muted);font-size:.9rem;text-align:center}.drawer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#18211800;pointer-events:none;transition:background .22s ease}.drawer-backdrop.open{background:#18211847;pointer-events:auto}.drawer-panel{position:fixed;top:0;right:0;width:min(950px,100vw);max-width:100vw;height:100vh;padding:25px;background:#fbfdf8;border-left:1px solid var(--line);box-shadow:-18px 0 40px #1f2a1f24;overflow-y:auto;transform:translate(100%);transition:transform .22s ease;z-index:20}.drawer-panel.open{transform:translate(0)}.drawer-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}.drawer-header h3{margin:4px 0 0;font-size:1.1rem;overflow-wrap:anywhere;word-break:break-word}.drawer-label{margin:0;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--brand)}.drawer-section{margin-top:18px;padding-top:18px;border-top:1px solid #e1e7d8}.drawer-section h4{margin:0 0 8px;font-size:.84rem;text-transform:uppercase;letter-spacing:.06em;color:var(--brand)}.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.meta-grid span,.shoot-step span{border-radius:10px;text-transform:capitalize;border:1px solid #dde5d7;background:#f5f8f1;padding:8px 10px;font-size:.82rem;color:var(--muted)}.result-detail-text{margin:0;color:#304030;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.shoot-plan-list{display:grid;gap:10px}.shoot-step{display:grid;gap:8px;border:1px solid #e0e6d8;border-radius:12px;background:#fff;padding:12px}.shoot-step strong,.shoot-step p{margin:0}@media (max-width: 980px){.grid-2{grid-template-columns:1fr}.panel-header{flex-direction:column;align-items:flex-start}}@media (max-width: 720px){.content-area{flex-direction:column}.sidebar{width:100%;max-height:40vh;border-right:none;border-bottom:1px solid var(--line)}.row{flex-direction:column}select{width:100%}.drawer-panel{width:100vw}.meta-grid{grid-template-columns:1fr}}