/* The editor's appearance is independent from the source slide and split style. */
:root{color-scheme:dark;--bg:#131719;--surface:#1b2023;--surface-raised:#22282c;--field:#151a1d;--hover:#2b3338;--line:#30383d;--line-soft:#272e32;--text:#e9eeef;--sub:#a6b2b8;--muted:#89979e;--accent:#a9ebc1;--accent-ink:#152e21;--accent-soft:#263e32;--warning:#edc98e;--warning-bg:#332d23;--danger:#ff9b9f;--canvas:#111719;--grid:#ffffff08;--shadow:0 14px 42px #0003;--ring:#a9ebc1}
:root[data-theme=light]{color-scheme:light;--bg:#eeefeb;--surface:#fafbf8;--surface-raised:#fff;--field:#f0f2ed;--hover:#e7ebe4;--line:#d5dad2;--line-soft:#e3e7df;--text:#25362f;--sub:#566b60;--muted:#697b72;--accent:#285d42;--accent-ink:#fff;--accent-soft:#e2eee3;--warning:#8a6125;--warning-bg:#f8eedb;--danger:#ac3542;--canvas:#e4e8e1;--grid:#3148390d;--shadow:0 14px 42px #283a2d0a;--ring:#387752}
html:root{min-height:100%;background:var(--bg)}
.studio{min-height:100vh;min-height:100svh;color:var(--text);background:var(--bg);font-family:"Bahnschrift","Microsoft YaHei UI","PingFang SC",sans-serif;font-size:13px;line-height:1.5}
.studio *{scrollbar-color:var(--line) transparent;scrollbar-width:thin}
.studio button{color:var(--text);background:var(--surface-raised);border-radius:8px;padding:9px 13px;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
.studio button:hover:not(:disabled){background:var(--hover);border-color:var(--line);transform:translateY(-1px)}
.studio button:active:not(:disabled){transform:translateY(0)}
.studio button:disabled{opacity:.36}
.studio :is(button,input,textarea,select,summary,a):focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.studio a{color:var(--accent)}
.studio .primary{color:var(--accent-ink);background:var(--accent);font-weight:700;box-shadow:0 3px 12px #0001;border:1px solid var(--accent)}
.studio .primary:hover:not(:disabled){background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 5px 18px #0002}
.studio .outline{border-color:var(--line);background:transparent;color:var(--sub)}
.studio .quiet{background:transparent;color:var(--sub)}
.studio .muted{color:var(--muted)}
.studio .topbar{height:76px;padding:0 26px;background:var(--surface);border-color:var(--line);gap:18px}
.studio .brand{font-size:19px;letter-spacing:.5px;gap:13px}
.studio .brand span{font-size:14px;letter-spacing:0;color:var(--sub);border-color:var(--line);margin-left:12px}
.studio .brand small{color:var(--muted);background:var(--field);border:1px solid var(--line);font-size:10px;letter-spacing:0;padding:4px 8px}
.studio .mark{width:37px;height:37px;background:var(--accent-soft);border:1px solid var(--line);color:var(--accent);border-radius:11px}
.mark svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.studio .header-actions{gap:16px}.studio .header-actions .primary{padding:10px 17px}.studio .header-actions span:last-child{margin-left:0}
.theme-switch{display:flex;background:var(--field);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.studio .theme-switch button{font-size:11px;min-width:65px;padding:6px 9px;color:var(--muted);background:transparent;border-radius:6px;white-space:nowrap}
.studio .theme-switch button.active{background:var(--surface-raised);color:var(--text);box-shadow:0 1px 5px #0002;border-color:var(--line)}
.studio .app-layout{grid-template-columns:218px minmax(0,1fr) 274px;min-height:calc(100vh - 76px)}
.studio .sidebar{padding:25px 16px 16px;background:var(--surface);border-color:var(--line);max-height:calc(100vh - 76px);top:0}
.studio .sidebar-heading{font-size:12px;letter-spacing:1px;margin:0 3px 20px;color:var(--sub)}
.studio .pill{color:var(--sub);background:var(--field);border:1px solid var(--line);font-size:11px}
.studio .upload-button{background:var(--accent-soft);border:1px solid var(--line);color:var(--accent);padding:13px;margin:0;font-size:12px;font-weight:600}
.studio #manage-pages{width:100%;padding:7px;margin:8px 0 0;border-color:transparent;color:var(--muted);font-size:11px}
.import-hint{font-size:9px;color:var(--muted);text-align:center;margin:12px 0 22px;letter-spacing:.3px}
.studio .page-list{min-height:100px}
.studio .page-card{padding:9px;margin-bottom:14px;border-radius:9px;background:transparent;position:relative}
.studio .page-card.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 3px 15px #0001}
.studio .page-card img{border-radius:5px;box-shadow:0 2px 8px #0002}
.studio .page-card .caption{font-size:11px;gap:7px;margin-top:11px;color:var(--text)}
.studio .page-card .caption span:first-child{color:var(--muted);font-size:10px}
.studio .tiny-status{color:var(--muted);font-size:10px;margin-top:5px}.studio .tiny-status.ready{color:var(--accent)}
.studio .sidebar-bottom{border-color:var(--line);gap:14px;padding-top:15px;color:var(--muted)}
.resource-menu{width:100%}.resource-menu summary{cursor:pointer;list-style:none;color:var(--sub);font-size:11px;padding:5px 0}.resource-menu summary::after{content:'＋';float:right}.resource-menu[open] summary::after{content:'−'}.resource-menu a{display:block;padding:7px 0;font-size:10px;color:var(--muted)}
.local-caption{font-size:10px;display:flex;align-items:center;gap:7px}.local-caption i,.canvas-heading i{width:5px;height:5px;background:var(--accent);border-radius:50%;display:inline-block}
.studio main{padding:26px 28px 32px;min-width:0}
.studio .project-heading{margin-bottom:18px;align-items:center}
.studio .eyebrow{font-size:9px;color:var(--muted);letter-spacing:1.5px}.eyebrow-divider{margin:0 9px;color:var(--line)}
.studio .project-heading input{color:var(--text);font-size:27px;font-weight:600;letter-spacing:-.7px;min-width:0;max-width:100%;padding:6px 0 1px}
.studio .project-heading input:focus{box-shadow:0 1px var(--accent)}
.studio .project-heading p{font-size:11px;color:var(--muted);margin:5px 0 0}
.studio #batch{white-space:nowrap;font-size:11px;padding:9px 13px}
.studio .live-status{background:transparent;border:0;border-bottom:1px solid var(--line-soft);padding:0 0 12px;margin:0 0 15px;border-radius:0;color:var(--sub);font-size:10px;gap:10px;justify-content:flex-start}
.live-status::before{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px var(--accent-soft);flex-shrink:0;margin:0 4px}
.live-status.disconnected::before{background:var(--danger);box-shadow:none}.studio .live-status.disconnected{color:var(--danger)}
.studio #live-message{flex:1;min-width:0}.studio .live-status button{padding:5px 10px;font-size:10px}
.studio .workflow{gap:12px;margin:0 0 17px;color:var(--muted);font-size:10px;flex-wrap:wrap}
.studio .workflow b{width:19px;height:19px;background:var(--surface-raised);border:1px solid var(--line);color:var(--muted);font-size:9px}
.studio .workflow i{height:1px;flex:1;min-width:5px;background:var(--line);font-size:0}
.studio .workflow .active{color:var(--accent)}.studio .workflow .active b{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.studio .workflow .done{color:var(--sub)}.studio .workflow .done b{color:var(--accent);background:var(--accent-soft);border-color:var(--line)}
.studio .workflow .status{background:var(--accent-soft);border-color:var(--line);color:var(--accent);margin-left:4px;font-size:9px;padding:3px 7px}
.studio .workflow .status.warn{color:var(--warning);background:var(--warning-bg);border-color:var(--line)}
.studio .workarea{background:var(--surface);border-color:var(--line);border-radius:12px;box-shadow:var(--shadow)}
.canvas-heading{height:42px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line-soft);font-size:11px;font-weight:600;color:var(--sub)}
.canvas-heading span{display:flex;align-items:center;gap:9px}.canvas-heading small{font-size:9px;font-weight:400;color:var(--muted)}
.studio .toolbar{height:45px;border-color:var(--line-soft);padding:0 10px;gap:5px}
.studio .view-tabs{gap:2px;overflow-x:auto;min-width:0}.studio .view-tabs button{font-size:10px;padding:6px 9px;color:var(--muted);border-radius:5px}
.studio .view-tabs button.active{background:var(--accent-soft);color:var(--accent);font-weight:500}
.studio .tools button{font-size:18px;color:var(--sub);padding:3px 7px;background:transparent}.studio .tools span{color:var(--muted);font-size:9px;margin-left:4px}
.studio .canvas-host{min-height:330px;padding:27px 24px;background-color:var(--canvas);background-image:radial-gradient(var(--grid) 1px,transparent 1px);background-size:16px 16px}
.studio .stage-shell{box-shadow:0 12px 30px #0005;outline:1px solid #ffffff12}
.studio .canvas-footer{height:36px;font-size:9px;color:var(--muted);padding:0 14px;border-top:1px solid var(--line-soft);gap:10px}
.studio .action-row{gap:9px;margin:14px 0 0;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.studio .action-row>div{gap:6px}.studio .action-row button{font-size:11px;padding:9px 11px}.studio #basic-split{padding-inline:16px}
.more-tools{position:relative;margin-left:auto}.more-tools summary{cursor:pointer;color:var(--sub);font-size:11px;padding:9px 12px;list-style:none;border:1px solid var(--line);border-radius:8px;background:var(--surface);white-space:nowrap}.more-tools summary span{margin-left:12px}
.tool-menu{position:absolute;right:0;top:calc(100% + 7px);width:186px;display:flex;flex-direction:column;gap:4px;z-index:3000;padding:7px;background:var(--surface-raised);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.studio .tool-menu button{background:transparent;text-align:left;border:0;padding:10px}
.studio .notice{font-size:10px;margin:14px 1px;color:var(--sub);line-height:1.8}.studio .notice.warn{color:var(--warning)}.studio .notice-dot{background:var(--accent);margin-top:6px}.studio .notice.warn .notice-dot{background:var(--warning)}
.studio .inspector{background:var(--surface);border-color:var(--line);height:calc(100vh - 76px);top:0}
.studio .inspector-tabs{height:61px;gap:30px;padding:0 20px;border-color:var(--line)}
.studio .inspector-tabs button{padding:19px 3px 14px;color:var(--muted);background:transparent;border-radius:0}
.studio .inspector-tabs button.active{color:var(--accent);border-bottom:2px solid var(--accent)}
.studio .inspector-tabs span{background:var(--field);color:var(--muted);font-size:9px}
.studio .layer-search{padding:17px 16px 11px}.studio .layer-search input{background:var(--field);border-color:var(--line);color:var(--text);padding:9px 11px;border-radius:7px}
.studio .filters{padding:0 14px 14px;gap:5px}.studio .filters button{color:var(--muted);background:transparent;font-size:10px;padding:5px 9px}.studio .filters button.active{background:var(--accent-soft);color:var(--accent)}
.studio .layer-list{padding:0 10px}.studio .layer-row{min-height:43px;padding:8px 7px;gap:8px;color:var(--sub);font-size:11px;margin-bottom:2px}
.studio .layer-row:hover{background:var(--hover)}.studio .layer-row.selected{background:var(--accent-soft);color:var(--accent)}
.studio .layer-symbol{width:25px;height:25px;color:var(--muted);background:var(--field);border:1px solid var(--line-soft);font-size:11px;border-radius:6px}
.studio .layer-row button{color:var(--muted);padding:3px;font-size:12px;background:transparent}.studio .hidden-layer{opacity:.5}
.studio .inspector-bottom{border-color:var(--line);padding:17px 19px;color:var(--sub);font-size:11px}.studio .inspector-bottom small{color:var(--muted);font-size:10px;line-height:1.8}
.studio .property-section{padding:19px;border-color:var(--line)}.studio .property-section h3{color:var(--sub)}.studio .property-section label{color:var(--muted)}
.studio :is(.property-section input,.property-section textarea,.property-section select,dialog input:not([type=checkbox]),dialog select){background:var(--field);color:var(--text);border-color:var(--line)}
.studio .property-buttons button,.studio .run-actions button{border-color:var(--line);background:var(--surface-raised)}.studio .run-actions button.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.studio .empty-property{color:var(--muted)}.studio .danger{color:var(--danger)!important;border-color:var(--line)}
.studio .delivery-proof{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:15px;margin-top:18px}
.studio .proof-heading{color:var(--sub);font-size:11px}.studio .proof-heading span{background:var(--field);color:var(--muted);font-size:9px}
.studio .proof-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.studio .proof-grid div{background:var(--field);border-color:var(--line-soft);padding:10px;border-radius:6px}.studio .proof-grid small{color:var(--muted);font-size:9px}.studio .proof-grid b{color:var(--accent);font-size:11px;font-weight:500}.studio .proof-grid b.warn{color:var(--warning)}.studio .proof-note{color:var(--muted)}
.studio .quality-issues{color:var(--warning);background:var(--warning-bg);border-color:var(--line)}.studio .quality-issues button{background:transparent;color:var(--warning)}
.studio .job-panel{background:var(--surface);border-color:var(--line);padding:17px;border-radius:10px}.studio .section-title{color:var(--sub);gap:10px;flex-wrap:wrap;font-size:11px}.studio .section-title span{font-size:9px;color:var(--muted)}
.studio .job{border-color:var(--line);font-size:11px;padding:14px 0 0}.studio .job-title{gap:15px;align-items:flex-start}.studio .job-title strong{font-weight:500;max-width:60%;overflow-wrap:anywhere}.studio .job-title span{font-size:10px;color:var(--muted);text-align:right}.studio .job .tiny-status{margin-left:0;font-size:10px}.studio .job small{color:var(--sub);display:block}.studio .job.failed small{color:var(--danger)}.studio .job-details{color:var(--accent);font-size:10px;background:transparent;padding:4px 0}
.studio .supplier-warning{background:var(--warning-bg);color:var(--warning);border-color:var(--line)}
.studio .empty{padding:40px 18px;color:var(--muted)}.studio .empty h2{font-size:22px;color:var(--text);font-weight:500}.studio .empty p{max-width:330px;margin:10px auto 24px;line-height:1.9;font-size:11px}.studio .empty-icon{border:1px dashed var(--line);width:68px;height:68px;border-radius:18px;margin:auto;font-size:34px;display:grid;place-items:center;color:var(--accent);background:var(--surface)}
.studio dialog{max-height:88vh;overflow:auto;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:0 24px 100px #0006}
.studio dialog::backdrop{background:#080d1199;backdrop-filter:blur(6px)}.studio dialog h2{color:var(--text);font-size:23px}.studio dialog p{color:var(--sub);font-size:12px}.studio dialog label{color:var(--sub)}.studio dialog .info-box{background:var(--field);color:var(--sub);border:1px solid var(--line-soft)}
.studio :is(#batch-pages label,#checklist label,#manage-page-list label,#manage-dialog>label,#export-pages label){background:var(--field);color:var(--sub);border:1px solid var(--line-soft);border-radius:7px;padding:11px;display:flex;flex-direction:row;gap:9px;align-items:center;font-size:11px}
.studio input[type=checkbox],.studio input[type=range]{accent-color:var(--accent)}.studio dialog input[type=checkbox]{flex-shrink:0}.studio .dialog-actions{flex-wrap:wrap;gap:7px}.studio .dialog-actions button{font-size:11px}.studio .job-log-list li{border-color:var(--line);color:var(--sub)}.studio .job-log-list time{color:var(--muted)}.studio .evidence-sheets figcaption{color:var(--sub)}.studio .calibration-option{border-color:var(--line)}
.studio #toast{background:var(--surface-raised);border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow);font-size:12px;line-height:1.6}
.page-progress{display:flex;gap:15px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:15px 17px;margin:0 0 17px;background:var(--surface);position:relative;overflow:hidden}
.progress-orbit{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;position:relative;border:3px solid var(--line);color:var(--muted)}
.progress-orbit::before{content:'';position:absolute;inset:-3px;border-radius:50%;border:3px solid transparent;border-top-color:var(--accent);opacity:0}
.progress-orbit svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}
.page-progress[data-state=running] .progress-orbit::before{opacity:1;animation:orbit 1.8s linear infinite}.page-progress[data-state=running] .progress-orbit{color:var(--accent)}
.page-progress[data-state=verified] .progress-orbit{border-color:var(--accent);color:var(--accent)}.page-progress[data-state=failed] .progress-orbit{color:var(--danger);border-color:var(--danger)}
.page-progress[data-state=interrupted] .progress-orbit,.page-progress[data-state=review] .progress-orbit{color:var(--warning)}
.progress-content{flex:1;min-width:0}.progress-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 8px;font-size:11px}.progress-head strong{font-weight:500;color:var(--text)}.progress-head [data-percent]{color:var(--accent);white-space:nowrap;font-size:10px}.page-progress[data-state=failed] [data-percent]{color:var(--danger)}.page-progress[data-state=review] [data-percent],.page-progress[data-state=interrupted] [data-percent]{color:var(--warning)}
.progress-track{position:relative;background:var(--line);height:5px;border-radius:99px;overflow:hidden;margin:8px 0}
.progress-track>i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);border-radius:99px;box-shadow:0 0 9px var(--accent)}
.progress-track[data-mode=running]>i{width:32%;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:progress-flow 2.4s ease-in-out infinite}
.progress-track[data-mode=verified]>i{width:100%}.progress-track[data-mode=review]>i{width:100%;background:repeating-linear-gradient(90deg,var(--warning) 0 4px,transparent 4px 9px);opacity:.45;box-shadow:none}
.progress-track[data-mode=failed]>i{width:100%;background:var(--danger);opacity:.3;box-shadow:none}.progress-track[data-mode=interrupted]>i,.progress-track[data-mode=queued]>i{width:100%;background:repeating-linear-gradient(90deg,var(--muted) 0 3px,transparent 3px 8px);opacity:.3;box-shadow:none}
.progress-note{color:var(--muted);font-size:10px;line-height:1.7;overflow-wrap:anywhere}.progress-sub{display:flex;gap:14px;color:var(--sub);font-size:9px;margin-top:6px}.progress-sub:empty{display:none}
@keyframes orbit{to{transform:rotate(360deg)}}@keyframes progress-flow{0%{left:-32%}100%{left:100%}}
@media(min-width:1600px){.studio .app-layout{grid-template-columns:238px minmax(0,1fr) 296px}.studio main{padding:31px 36px}.studio .canvas-host{padding:36px 30px}.studio .proof-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1200px){.studio .app-layout{grid-template-columns:182px minmax(0,1fr) 242px}.studio main{padding:23px 18px}.studio .topbar{padding:0 20px}.studio .brand small{display:none}.studio .header-actions{gap:9px}.studio .canvas-host{padding:22px 24px}.studio .canvas-heading small{display:none}.studio .workflow{gap:6px}.studio .view-tabs button{padding:6px 7px}}
@media(max-width:1000px){.studio .app-layout{grid-template-columns:170px minmax(0,1fr)}.studio .inspector{grid-column:1/-1;height:380px;position:static;display:flex;border-top:1px solid var(--line)}.studio .sidebar{max-height:calc(100vh - 76px)}.studio .brand span{font-size:12px}.studio .header-actions #save-state{display:none}.studio .canvas-host{min-height:300px}.studio .workflow .status{display:block}.studio .proof-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.studio .topbar{height:auto;min-height:100px;padding:13px 15px;flex-wrap:wrap;gap:10px}.studio .brand{font-size:16px}.studio .brand span{font-size:11px}.studio .header-actions{width:100%;justify-content:space-between;gap:5px}.studio .header-actions button{font-size:10px}.studio .header-actions .primary{padding:8px 12px}.studio .theme-switch button{min-width:52px;font-size:10px;padding:4px 6px}.studio .app-layout{display:flex;flex-direction:column}.studio .sidebar{position:static;max-height:none;padding:16px;border-right:0;border-bottom:1px solid var(--line)}.studio .sidebar-heading{margin:0 0 12px}.studio .import-hint{margin:8px 0 12px}.studio .page-list{display:flex;overflow-x:auto;min-height:0;gap:10px}.studio .page-card{min-width:150px;width:150px;flex-shrink:0;margin:0 0 4px}.studio .sidebar-bottom{display:none}.studio main{padding:20px 14px}.studio .project-heading input{font-size:22px}.studio .project-heading p{font-size:10px;line-height:1.7}.studio .workflow{font-size:9px;gap:5px}.studio .workflow b{width:16px;height:16px;margin-right:3px}.studio .workflow .status{display:none}.studio .tools span{display:none}.studio .canvas-host{min-height:230px;padding:20px 24px}.studio .toolbar{height:auto;min-height:45px;padding:5px 8px;flex-wrap:wrap}.studio .canvas-footer{height:auto;min-height:36px;flex-wrap:wrap;padding:8px 12px}.studio .action-row button{font-size:10px;padding:8px 9px}.studio .more-tools{margin-top:4px}.page-progress{padding:13px 12px;gap:11px}.progress-orbit{width:36px;height:36px}.progress-head{align-items:flex-start}.progress-head strong{font-size:10px}.progress-head [data-percent]{white-space:normal;text-align:right}.studio .proof-grid{gap:6px}.studio .proof-grid div{padding:8px}.studio dialog{padding:20px;width:94vw}.studio .dialog-actions button{flex:1}.studio .inspector{height:400px}}
@media(prefers-reduced-motion:reduce){.studio *, .studio *::before{animation:none!important;transition:none!important}.progress-track[data-mode=running]>i{left:34%;background:var(--accent);opacity:.7}}