:root{--bg:#f5f7fb;--paper:#fff;--ink:#1e293e;--muted:#7b879a;--line:#e8edf4;--blue:#4169e1;--blue-soft:#edf2ff;--green:#208164;--amber:#b7791f;--red:#c04949;--radius:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);font-size:14px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg)}
[hidden]{display:none!important}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
a{color:var(--blue);text-decoration:none}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
button:focus-visible,a:focus-visible{outline:3px solid #a9bcff;outline-offset:3px}
input,textarea,select{width:100%;border:1px solid #dfe5ef;border-radius:8px;padding:11px 12px;background:white;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{border-color:#7c99ef;box-shadow:0 0 0 3px #4169e111}
textarea{resize:vertical;line-height:1.8}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue);box-shadow:none;padding:0;flex-shrink:0}
label{display:flex;flex-direction:column;gap:9px;font-size:13px;font-weight:550}
h1,h2,h3,p{margin:0}
h1{font-size:27px;letter-spacing:-.6px;font-weight:650}
h2{font-size:20px;font-weight:650}
h3{font-size:15px;font-weight:600}
.muted{color:var(--muted)}
.eyebrow{font-size:11px;letter-spacing:2.1px;font-weight:650}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:39px;padding:9px 16px;border:1px solid #dfe5ef;border-radius:8px;background:#fff;color:#47536a;font-weight:550;font-size:13px;white-space:nowrap}
.button:hover{background:#f8faff;border-color:#b9c7e7}
.button.primary{color:#fff;background:var(--blue);border-color:var(--blue);box-shadow:0 3px 5px #4169e11a}
.button.primary:hover{background:#345bcf}
.button.danger{color:var(--red)}
.button.small{padding:6px 11px;min-height:32px;font-size:12px}
.button.full{width:100%;justify-content:space-between}
.text-button{border:0;background:transparent;color:var(--muted);font-size:12px;padding:5px 7px}
.text-button:hover{color:var(--blue)}
.actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.workspace{display:flex;min-height:100vh}
.sidebar{width:232px;flex-shrink:0;background:#fff;border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:32px 20px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:15px;letter-spacing:.4px;line-height:1.55}
.brand strong{display:block;font-size:12px;font-weight:450;letter-spacing:1.4px;color:var(--muted)}
.brand-mark{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border:1px solid #ffffff44;border-radius:15px;font-size:29px;font-weight:700;letter-spacing:-3px;background:#ffffff15}
.brand-mark.small{width:39px;height:42px;border:0;border-radius:11px;color:white;font-size:24px;background:linear-gradient(145deg,#7394f2,#4169e1);box-shadow:0 4px 9px #4169e126}
.sidebar-label{margin:48px 14px 14px;color:#a1abba;font-size:11px;letter-spacing:1.5px}
nav{display:flex;flex-direction:column;gap:7px}
nav a{display:flex;align-items:center;gap:13px;color:#6d7a91;padding:12px 14px;border-radius:9px;font-size:13px}
nav a:hover{background:#f6f8fc}
nav a.active{background:var(--blue-soft);color:var(--blue);font-weight:600}
.nav-symbol{font-size:19px;line-height:1}
.sidebar-bottom{margin-top:auto;color:#6d7d92;padding:18px 12px 0;font-size:12px;border-top:1px solid var(--line)}
.sidebar-bottom small{display:block;color:#a1aab8;font-size:10px;margin:8px 0 0 15px}
.connection-dot{display:inline-block;width:6px;height:6px;background:#55a689;border-radius:50%;margin-right:9px}
.workspace-body{margin-left:232px;flex:1;min-width:0}
.topbar{height:75px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 36px;background:#fff;font-size:12px}
.breadcrumb-slash{margin:0 15px;color:#c4ccd9}
.account{display:flex;gap:10px;align-items:center}
.environment{color:#9d752d;background:#fff7e7;padding:5px 9px;border-radius:5px;font-size:10px;margin-right:12px}
.user-avatar{display:flex;align-items:center;justify-content:center;width:27px;height:27px;background:#edf1fa;border-radius:50%;color:#6079a8;font-size:11px}
.mode-banner{display:flex;align-items:center;gap:9px;padding:10px 36px;background:#fcfaf5;border-bottom:1px solid #f0eadb;color:#9e8761;font-size:11px}
.banner-dot{height:5px;width:5px;border-radius:50%;background:#c3a36a}
main{padding:34px 36px 55px;max-width:1540px;margin:auto}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:27px}
.page-heading p{color:var(--muted);font-size:12px;margin-top:10px;line-height:1.7}
.page-heading .eyebrow{color:#96a4bc;margin-bottom:11px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:28px}
.stat{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;display:flex;align-items:center;justify-content:space-between}
.stat-label{color:#8793a6;font-size:12px}
.stat-value{font-size:29px;font-weight:620;margin-top:10px;letter-spacing:-1px}
.stat-icon{width:39px;height:39px;border-radius:11px;background:#f0f4fd;color:#7c97db;display:flex;justify-content:center;align-items:center;font-size:22px}
.stat:nth-child(2) .stat-icon{background:#fff6e7;color:#c7a15e}
.stat:nth-child(3) .stat-icon{background:#edf7f4;color:#71ad96}
.panel{background:white;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:21px 24px;gap:12px;border-bottom:1px solid var(--line)}
.panel-heading h2{font-size:14px}
.filters{display:flex;align-items:center;gap:7px}
.filter{border:0;border-radius:6px;background:transparent;color:#8793a5;padding:7px 11px;font-size:12px}
.filter.active{background:var(--blue-soft);color:var(--blue)}
.search{width:200px;padding:8px 11px;font-size:12px}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;text-align:left}
th{background:#fafbfe;font-weight:500;color:#96a0b0;font-size:11px;padding:14px 22px;white-space:nowrap}
td{border-top:1px solid #f0f3f7;padding:20px 22px;font-size:12px}
tbody tr:hover{background:#fdfdff}
.task-title{font-weight:600;font-size:13px;display:block;margin-bottom:7px;color:#34405b;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-meta{color:#a0aabc;font-size:10px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:5px;font-size:10px;font-weight:500;white-space:nowrap;background:#f2f4f8;color:#7c889d}
.badge.blue{background:#edf2ff;color:#5e7cc6}
.badge.green{background:#eaf7f1;color:#428e73}
.badge.amber{background:#fff6e6;color:#b28b43}
.badge.red{background:#fceeee;color:#bb6767}
.branch-line{display:flex;align-items:center;gap:9px;font-size:11px;color:#7d899c;line-height:2}
.branch-name{min-width:44px;color:#8a97aa}
.empty{padding:70px 24px;text-align:center}
.empty-icon{width:62px;height:62px;display:flex;align-items:center;justify-content:center;background:#f1f5fd;color:#a1b4e3;border-radius:18px;font-size:30px;margin:0 auto 20px}
.empty h3{font-size:15px;margin-bottom:10px}
.empty p{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:21px}
.back-link{display:inline-flex;align-items:center;gap:8px;color:#8b98ad;font-size:12px;margin-bottom:20px}
.task-heading{margin-bottom:23px}
.task-heading .task-meta{margin-top:12px}
.tabs{display:flex;gap:28px;border-bottom:1px solid #dfe5ef;margin:0 0 24px;overflow-x:auto}
.tab{background:none;border:0;color:#8995a9;padding:13px 2px 16px;white-space:nowrap;font-size:13px;border-bottom:2px solid transparent}
.tab.active{color:var(--blue);border-color:var(--blue);font-weight:600}
.tab-num{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;background:#e8edf6;border-radius:50%;font-size:10px;margin-right:8px}
.tab.active .tab-num{background:var(--blue);color:white}
.notice{padding:13px 17px;border:1px solid #e3eaf9;background:#f4f7ff;border-radius:9px;color:#7788ac;font-size:12px;line-height:1.8;margin-bottom:20px}
.notice.warning{border-color:#f2e5c7;background:#fffbf1;color:#a48c5b}
.notice.error{border-color:#f1dcdc;background:#fff7f7;color:#b56c6c}
.notice .text-button{color:var(--blue)}
.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.content-panel{padding:24px}
.content-panel h3{margin-bottom:16px}
.progress-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.progress-title h3{margin:0}
.progress-bar{height:5px;border-radius:8px;background:#edf1f8;overflow:hidden;margin:19px 0}
.progress-fill{height:100%;background:#6989e2;border-radius:8px}
.progress-fill.p25{width:25%}
.progress-fill.p50{width:50%}
.progress-fill.p100{width:100%;background:#5da889}
.body-copy{white-space:pre-wrap;line-height:1.9;color:#76839a;font-size:12px}
.script-panel{margin-top:20px}
.script-text{font-size:13px;line-height:2;color:#66758e;white-space:pre-wrap;max-height:260px;overflow:auto}
.review-intro{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}
.review-intro p{font-size:12px;color:var(--muted);line-height:1.8}
.selection-count{font-weight:600;color:var(--blue);white-space:nowrap}
.shot-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.shot-card{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.shot-card.selected{border-color:#94abeb;box-shadow:0 0 0 1px #94abeb22}
.shot-card-header{padding:18px 21px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f3f8}
.shot-selection{flex-direction:row;align-items:center;gap:10px;cursor:pointer}
.shot-number{font-size:11px;color:#98a5bb;font-weight:500;letter-spacing:.5px}
.shot-body{padding:19px 21px;display:flex;flex-direction:column;gap:17px}
.source-quote{font-size:11px;color:#8c99ae;line-height:1.8;border-left:2px solid #dce5fb;padding-left:11px}
.shot-body label{font-size:11px;color:#8a97ab;font-weight:500}
.shot-body textarea{font-size:12px;line-height:1.8}
.duration-row{display:flex;align-items:center;justify-content:space-between}
.duration-row input{width:75px;padding:7px 9px}
.duration-field{flex-direction:row!important;align-items:center;gap:8px}
.review-footer{position:sticky;bottom:18px;background:#fffffff2;backdrop-filter:blur(10px);border:1px solid #e2e8f4;border-radius:11px;padding:15px 20px;margin-top:25px;display:flex;justify-content:space-between;align-items:center;gap:15px;box-shadow:0 6px 20px #2a3e5b0a;z-index:3}
.review-footer p{font-size:11px;color:#8a98af}
.video-frame{background:#e9edf5;min-height:210px;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;position:relative}
.video-frame video{width:100%;height:100%;object-fit:contain;background:#182333}
.video-frame .placeholder{display:flex;flex-direction:column;align-items:center;gap:10px;color:#8c9bb2;font-size:11px}
.spinner{width:24px;height:24px;border:2px solid #d7dfed;border-top-color:#7e9ade;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}
}
.video-info{padding:18px 21px}
.video-info p{font-size:12px;color:#8592a8;line-height:1.8;margin:9px 0 15px}
.video-info select{font-size:11px;padding:8px 10px}
.clip-actions{display:flex;align-items:center;gap:9px;margin-top:14px}
.clip-actions select{flex:1;min-width:0}
.compact-prompt{font-size:11px;line-height:1.8;color:#98a2b3;white-space:pre-wrap;max-height:72px;overflow:auto;margin-top:12px}
.downloads{display:flex;flex-direction:column;gap:1px}
.download-row{display:flex;align-items:center;justify-content:space-between;padding:19px 24px;border-bottom:1px solid var(--line);gap:15px}
.download-row strong{display:block;font-size:13px;margin-bottom:7px}
.download-row small{color:#99a4b5;font-size:11px}
.package-ready{padding:28px;display:flex;justify-content:space-between;align-items:center;background:#f6faf8;border:1px solid #deece5;border-radius:12px;margin-bottom:21px}
.package-ready h3{color:#347e63;font-size:17px;margin-bottom:9px}
.package-ready p{font-size:12px;color:#8b9d93}
.asset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.asset-portrait{height:170px;background:linear-gradient(140deg,#e8eefb,#f3f5fa);display:flex;justify-content:center;align-items:center;font-size:64px;color:#acbddc;font-weight:200}
.asset-info{padding:21px}
.asset-card{overflow:hidden}
.asset-portrait img{width:100%;height:100%;object-fit:contain}
.asset-preview{background:#182333;margin:16px 0;aspect-ratio:16/9}
.asset-preview video{width:100%;height:100%;object-fit:contain}
.asset-card[data-format="9:16"] .asset-preview{aspect-ratio:9/16;max-width:250px;margin:16px auto}
.asset-info .asset-script{color:#67758a;font-size:12px}
.reference-portrait{max-width:100%;max-height:380px;object-fit:contain}
#avatar-source-fields{display:flex;flex-direction:column;gap:18px}
#task-content[data-format="9:16"] .video-frame{aspect-ratio:9/16;max-width:340px;margin:0 auto}
.asset-info p{color:#93a0b4;font-size:12px;line-height:1.8;margin:12px 0}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.status-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);font-size:12px}
.status-row:last-child{border:0}
.timeline{padding:5px 24px}
.timeline-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 0;border-bottom:1px solid var(--line)}
.timeline-row strong{font-size:12px;font-weight:550}
.timeline-row p{font-size:11px;color:#9ba6b8;margin-top:8px}
.login-layout{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.login-story{position:relative;overflow:hidden;background:#244274;color:#fff;padding:70px 13%;display:flex;flex-direction:column;justify-content:center}
.login-story:after{content:"";position:absolute;width:450px;height:450px;border:1px solid #ffffff0d;border-radius:80px;transform:rotate(25deg);right:-220px;bottom:-80px;box-shadow:0 0 0 80px #ffffff03,0 0 0 160px #ffffff02}
.login-story .eyebrow{color:#b1c3e5;margin-top:50px}
.login-story h1{font-size:43px;line-height:1.5;margin-top:20px;font-weight:550;letter-spacing:1px}
.login-story>p{font-size:13px;color:#b0c1de;line-height:2;margin-top:25px}
.login-flow{display:flex;gap:13px;align-items:center;font-size:11px;color:#cfdaec;margin-top:45px}
.login-flow i{font-style:normal;color:#6e8ebd}
.story-footer{position:absolute;bottom:40px;color:#7290bc;font-size:10px;letter-spacing:2px}
.login-form-wrap{display:flex;align-items:center;justify-content:center;background:#fff;padding:50px}
.login-form{width:340px}
.login-form .eyebrow{color:#a1afc5;font-size:9px;margin-bottom:15px}
.login-form h2{font-size:25px;margin-bottom:12px}
.login-form>p{font-size:12px;line-height:1.9;margin-bottom:35px}
.login-form label{margin-bottom:22px;color:#61718d;font-size:12px}
.login-form .button{margin-top:9px;min-height:44px}
.login-form .login-note{font-size:10px;color:#a5afbd;text-align:center;margin:24px 0}
.error-text{font-size:12px;color:var(--red);line-height:1.7;min-height:18px}
dialog{border:1px solid var(--line);border-radius:17px;padding:0;width:600px;max-width:calc(100vw - 32px);max-height:90vh;box-shadow:0 22px 90px #192e5b24}
dialog::backdrop{background:#15213955;backdrop-filter:blur(3px)}
.dialog-header{padding:25px 28px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.dialog-header p{font-size:11px;color:#98a4b8;margin-top:9px}
.dialog-body{padding:25px 28px;display:flex;flex-direction:column;gap:21px}
.dialog-body .hint{font-size:11px;color:#98a5b9;line-height:1.8}
.dialog-body textarea{font-size:13px}
.dialog-footer{display:flex;justify-content:flex-end;gap:10px;padding:18px 28px;border-top:1px solid var(--line)}
.dialog-close{background:none;border:0;font-size:23px;font-weight:200;color:#a1acbe}
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:#263955;color:white;box-shadow:0 5px 30px #172c5030;border-radius:9px;padding:13px 23px;max-width:90vw;z-index:20;font-size:12px;line-height:1.7}
.toast.error{background:#9f4c4c}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bottom-note{font-size:11px;color:#9ba6b8;line-height:1.9;margin-top:20px}
.loading{padding:60px;text-align:center;color:#9da9bc}
.stale-bar{margin-bottom:16px}
video{display:block}
.snapshot-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.history-script{max-height:180px;overflow:auto}
.table-link{font-weight:550;font-size:12px;color:var(--blue)}
@media(max-width:1100px){.sidebar{width:196px;padding:28px 14px}
.workspace-body{margin-left:196px}
.brand{font-size:13px}
.topbar{padding:0 24px}
main{padding:28px 24px}
.mode-banner{padding:10px 24px}
.asset-grid{grid-template-columns:repeat(2,1fr)}
td,th{padding-left:16px;padding-right:16px}
.stats{gap:10px}
.stat{padding:17px}
.stat-icon{display:none}
.shot-list{gap:13px}
}
@media(max-width:760px){.sidebar{width:68px;padding:24px 10px}
.brand>span:last-child,.sidebar-label,.sidebar-bottom{display:none}
.brand{justify-content:center}
nav{margin-top:40px}
nav a{font-size:0;justify-content:center;padding:13px}
.nav-symbol{font-size:23px}
.workspace-body{margin-left:68px}
.topbar{padding:0 17px}
.topbar>div:first-child{display:none}
.account{margin-left:auto}
.mode-banner{padding:10px 17px;font-size:10px;line-height:1.8}
main{padding:25px 17px}
.page-heading{align-items:flex-start}
.page-heading h1{font-size:23px}
.page-heading .button{padding:9px 11px}
.stats{grid-template-columns:1fr 1fr}
.shot-list,.two-columns,.settings-grid,.asset-grid{grid-template-columns:1fr}
.panel-heading{padding:16px;flex-wrap:wrap}
.search{width:150px}
.review-footer{padding:14px;align-items:flex-start;flex-direction:column}
.tabs{gap:17px}
.review-intro{align-items:flex-start;flex-direction:column}
.login-layout{grid-template-columns:1fr}
.login-story{display:none}
.login-form-wrap{min-height:100vh;padding:30px}
.package-ready{flex-direction:column;align-items:flex-start;gap:20px}
.task-heading .page-heading{flex-direction:column}
.form-grid{grid-template-columns:1fr}
.dialog-body{padding:23px}
.environment{margin-right:2px}
}
