:root:has(.comic-studio),body:has(.comic-studio){background:#f6f7f4}.comic-studio{--bg:#f6f7f4;--surface:#ffffff;--surface-soft:#f2f4f0;--surface-tint:#edf4f1;--line:#e1e5df;--line-strong:#cfd7d0;--ink:#202624;--muted:#6d7773;--faint:#9aa39f;--accent:#0f6f64;--accent-2:#0b5c53;--accent-soft:rgba(15,111,100,0.1);--green:#258b5a;--danger:#c53d33;--shadow:0 10px 28px rgba(25,33,30,0.08);--radius:8px;min-height:100dvh;background:linear-gradient(90deg,rgba(15,111,100,.035) 1px,transparent 1px),linear-gradient(rgba(15,111,100,.03) 1px,transparent 1px),var(--bg);background-size:24px 24px;color:var(--ink);font-family:PingFang SC,Noto Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}.comic-studio *{box-sizing:border-box}.studio-topbar{height:48px;display:grid;grid-template-columns:164px auto 1fr auto auto;align-items:center;gap:18px;padding:0 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}.studio-brand{display:inline-flex;align-items:center;gap:10px;min-width:0}.studio-brand strong{font-size:17px;letter-spacing:.01em}.export-button,.icon-button,.movie-button,.topbar-link,.zoom-control{height:32px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--ink);font-size:13px;white-space:nowrap}.topbar-link{color:var(--muted);text-decoration:none}.project-title{min-width:0;color:#42434c;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.save-state{display:flex;align-items:center;gap:12px;justify-content:center;color:var(--faint);font-size:12px}.save-state b{padding:3px 8px;border-radius:999px;color:#218653;background:rgba(59,191,115,.12);font-weight:600}.topbar-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px}.export-button,.icon-button,.zoom-control{border-color:var(--line);background:var(--surface)}.movie-button{min-width:112px;border-color:var(--accent-2);background:var(--accent);color:#fff;font-weight:700;box-shadow:0 8px 18px rgba(15,111,100,.18)}.inspector-primary:disabled,.movie-button:disabled,.primary-action:disabled{opacity:.58;cursor:wait}.icon-button:disabled,.timeline-head button:disabled{opacity:.36;cursor:not-allowed}.studio-shell{height:calc(100dvh - 48px - 150px);min-height:600px;display:grid;grid-template-columns:46px 122px 200px minmax(440px,1fr) 282px;overflow:hidden}.asset-library,.inspector,.page-strip,.tool-rail{min-height:0;background:rgba(255,255,255,.95);border-right:1px solid var(--line)}.tool-rail{padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:14px}.rail-button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#5e606c}.rail-button--active{color:var(--accent);background:var(--accent-soft)}.page-strip{padding:13px 10px;overflow-y:auto}.asset-group-title,.asset-title,.panel-heading,.range-head,.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.asset-title h2,.panel-heading h2{margin:0;font-size:14px;font-weight:800}.panel-heading button{height:30px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:12px}.page-list{display:grid;gap:13px;margin-top:14px}.add-page,.page-thumb{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:7px;text-align:left}.page-thumb--active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.page-preview{height:78px;display:grid;grid-template-columns:repeat(2,1fr);gap:2px;overflow:hidden;border-radius:5px;background:#f0f0f2}.page-preview img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;filter:grayscale(1)}.page-preview--empty{display:grid;grid-template-columns:1fr;place-items:center;border:1px dashed var(--line-strong);color:var(--faint);font-size:12px}.page-thumb b{display:block;margin-top:7px;font-size:12px}.add-page{height:48px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-style:dashed;color:var(--muted)}.asset-library{padding:13px 12px 18px;overflow-y:auto}.asset-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:12px;border-bottom:1px solid var(--line)}.asset-tabs button{height:32px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-size:13px}.asset-tabs .asset-tab--active{color:var(--accent);border-color:var(--accent);font-weight:700}.search-box{height:34px;display:flex;align-items:center;margin:12px 0;padding:0 10px;border:1px solid var(--line);border-radius:7px;color:var(--faint);font-size:12px}.character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.character-card,.scene-grid button{border:0;background:transparent;padding:0;color:var(--ink);font-size:12px}.character-card img{width:100%;aspect-ratio:1/1;-o-object-fit:cover;object-fit:cover;-o-object-position:center 25%;object-position:center 25%;border-radius:8px;border:1px solid var(--line);filter:grayscale(1)}.character-card--active img,.scene-grid .scene-grid--active img{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.character-card span,.scene-grid span{display:block;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.small-button,.wide-button{height:32px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:#4d4f5b;font-size:12px}.wide-button{width:100%;margin-top:10px}.wide-button--active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.asset-group{margin-top:18px}.asset-group h3,.bubble-assets h3,.inspector-section h3{margin:0;font-size:13px;font-weight:800}.asset-group-title button{border:0;background:transparent;color:var(--muted);font-size:12px}.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}.expression-row button,.mini-grid button{border:1px solid var(--line);border-radius:7px;background:var(--surface);padding:0;overflow:hidden}.expression-row .expression-active,.mini-grid .asset-mini--active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.expression-row img,.mini-grid img{width:100%;aspect-ratio:1/1;-o-object-fit:cover;object-fit:cover;filter:grayscale(1)}.bubble-assets{margin-top:18px}.bubble-assets>div{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:9px}.bubble-assets button{height:34px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:12px}.scene-grid{display:grid;gap:10px}.scene-grid img{width:100%;height:74px;-o-object-fit:cover;object-fit:cover;border-radius:8px;border:1px solid var(--line);filter:grayscale(1)}.canvas-workspace{position:relative;min-width:0;overflow:hidden;padding:16px 24px 12px}.canvas-header{height:44px;display:flex;align-items:flex-start;justify-content:space-between}.canvas-header h2{margin:0 0 6px;font-size:14px}.canvas-header span{color:var(--muted);font-size:12px}.floating-toolbar{display:flex;gap:4px;padding:6px;border:1px solid var(--line);border-radius:9px;background:var(--surface);box-shadow:var(--shadow)}.floating-toolbar button{width:30px;height:28px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:#646673}.floating-toolbar .tool-active{color:var(--accent);background:var(--accent-soft)}.canvas-frame{position:relative;height:calc(100% - 98px);display:grid;place-items:center;min-height:420px}.comic-page{width:min(46vh,470px);aspect-ratio:.706;display:grid;grid-template-rows:.85fr 1.25fr 1fr;grid-template-columns:1fr 1fr;gap:8px;padding:16px;border:1px solid #d8d8df;background:#fff;box-shadow:0 16px 42px rgba(28,28,36,.14)}.canvas-panel{position:relative;min-width:0;padding:0;overflow:hidden;border:2px solid #1d1d24;background:#eee;cursor:pointer}.canvas-panel img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform .18s ease,object-position .18s ease,filter .18s ease;transition:transform .18s ease,object-position .18s ease,filter .18s ease,-o-object-position .18s ease}.canvas-panel--empty{border-style:dashed;border-color:var(--line-strong);background:linear-gradient(135deg,rgba(15,111,100,.08),transparent 42%),#f7f8f5}.canvas-panel--deleted{opacity:.72}.canvas-panel--locked{cursor:default}.canvas-panel--locked img{filter:grayscale(1) contrast(.94) brightness(.9)}.canvas-panel--layout-closeup img{transform:scale(1.13)}.canvas-panel--layout-wide img{transform:scale(.94)}.canvas-panel--align-top img{-o-object-position:center top;object-position:center top}.canvas-panel--align-bottom img{-o-object-position:center bottom;object-position:center bottom}.canvas-panel-placeholder{width:100%;height:100%;display:grid;place-items:center;align-content:center;gap:6px;color:var(--muted);font-size:12px}.canvas-panel-placeholder b{color:var(--ink);font-size:13px}.panel-wide{grid-column:1/-1}.panel-one img{-o-object-position:center 35%;object-position:center 35%}.panel-three img,.panel-two img{-o-object-position:center 24%;object-position:center 24%}.panel-four img{-o-object-position:center 42%;object-position:center 42%}.canvas-panel--selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,111,100,.2)}.canvas-panel--selected:after,.canvas-panel--selected:before{content:"";position:absolute;width:9px;height:9px;border-radius:2px;background:#fff;border:2px solid var(--accent);z-index:3}.canvas-panel--selected:before{top:-6px;left:-6px}.canvas-panel--selected:after{right:-6px;bottom:-6px}.caption-box{top:18px;left:34px;padding:10px 14px;border:1px solid #333;background:rgba(255,255,255,.88);color:#333;line-height:1.5}.caption-box,.speech-bubble{position:absolute;font-weight:700;font-size:13px}.speech-bubble{right:12px;top:48px;min-width:78px;padding:12px 13px;border:2px solid #222;border-radius:999px;background:#fff;color:#222;line-height:1.45}.speech-bubble--small{right:43%;top:22px;min-width:70px;font-size:12px}.canvas-overlay{position:absolute;z-index:4;display:inline-flex;align-items:center;justify-content:center;pointer-events:none;color:#222;text-align:center;font-weight:800;line-height:1.35}.canvas-overlay--bubble{right:10%;top:18%;min-width:72px;max-width:118px;min-height:44px;padding:10px 12px;border:2px solid #222;border-radius:999px;background:#fff;font-size:12px}.canvas-overlay--text{left:10%;top:12%;max-width:138px;padding:8px 10px;border:1px solid rgba(34,34,34,.75);background:rgba(255,255,255,.86);font-size:12px}.layer-badge{position:absolute;left:8px;bottom:8px;z-index:5;display:inline-flex;align-items:center;min-height:22px;padding:0 7px;border-radius:999px;color:var(--accent);background:rgba(255,255,255,.88);box-shadow:0 4px 10px rgba(0,0,0,.16);font-size:11px;font-weight:800}.context-menu{position:absolute;top:82px;right:10px;width:104px;display:grid;gap:2px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}.context-menu button{height:33px;display:flex;align-items:center;gap:9px;border:0;border-radius:6px;background:transparent;color:#4a4b55;font-size:12px}.context-menu button:hover{background:var(--surface-tint);color:var(--accent)}.canvas-actions{display:flex;justify-content:center;gap:10px;height:54px;margin-top:8px}.canvas-actions button{height:38px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:#4a4b55;padding:0 14px;box-shadow:0 6px 14px rgba(32,32,40,.06);font-size:13px}.canvas-actions .primary-action{min-width:126px;justify-content:center;border-color:var(--accent-2);background:var(--accent);color:#fff;font-weight:800}.studio-error{border-radius:8px;background:rgba(215,77,77,.1);color:var(--danger)}.studio-error,.studio-notice{max-width:470px;margin:0 auto;padding:9px 12px;font-size:13px}.studio-notice{border:1px solid rgba(15,111,100,.18);border-radius:8px;background:rgba(15,111,100,.08);color:var(--accent-2)}.inspector{border-right:0;border-left:1px solid var(--line);padding:13px 13px 18px;overflow-y:auto}.inspector-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.inspector-tabs button{height:34px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-size:13px}.inspector-tabs .inspector-tab--active{color:var(--accent);border-color:var(--accent);font-weight:800}.inspector-section{padding:15px 0;border-bottom:1px solid var(--line)}.selected-pill{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:13px}.selected-pill b{color:#22935c;background:rgba(59,191,115,.12);border-radius:999px;padding:3px 8px}.inspector-field{display:grid;gap:6px;margin-top:10px;color:var(--muted);font-size:12px}.inspector-field input{width:100%;height:34px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);padding:0 10px;font-size:13px;outline:none}.inspector-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.inspector-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.section-title span{color:var(--muted);font-size:12px}.inspector textarea{width:100%;min-height:76px;margin-top:10px;padding:10px;resize:vertical;border:1px solid var(--line);border-radius:8px;outline:0;color:var(--ink);background:var(--surface-soft);font-size:13px;line-height:1.55}.small-button{float:right;margin-top:8px;padding:0 10px}.reference-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.add-character,.reference-card{min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:6px;color:var(--ink);font-size:11px}.reference-card--active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.reference-card img{width:100%;aspect-ratio:1/1;-o-object-fit:cover;object-fit:cover;-o-object-position:center 24%;object-position:center 24%;border-radius:6px;filter:grayscale(1)}.reference-card span{display:block;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.add-character{display:grid;place-items:center;min-height:84px;border-style:dashed;color:var(--muted)}.expression-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.range-head span{min-width:44px;padding:3px 8px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:12px;text-align:center}.range{width:100%;accent-color:var(--accent);margin-top:12px}.field-row{display:grid;grid-template-columns:82px 1fr;align-items:center;gap:8px;margin-top:10px;color:var(--muted);font-size:12px}.field-row input,.field-row select{width:100%;height:32px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);padding:0 8px;font-size:12px}.page-setting-list{display:grid;gap:8px;margin-top:10px}.page-setting-list span{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}.page-setting-list b{color:var(--ink);font-weight:700;text-align:right}.check-row{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:10px}.check-row label{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-size:12px}.check-row input{accent-color:var(--accent)}.inspector-primary{width:100%;height:42px;margin-top:10px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-weight:800;box-shadow:0 10px 20px rgba(15,111,100,.2)}.timeline{height:150px;display:grid;grid-template-rows:42px 1fr;border-top:1px solid var(--line);background:rgba(255,255,255,.95)}.timeline-head{display:flex;align-items:center;gap:12px;padding:0 14px;color:var(--muted);font-size:12px}.timeline-title{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:800}.timeline-head button{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--muted)}.align-toggle{display:inline-flex;align-items:center;gap:6px;margin-left:8px}.align-toggle input,.timeline-zoom input{accent-color:var(--accent)}.timeline-zoom{margin-left:auto;display:inline-flex;align-items:center;gap:10px}.timeline-body{display:grid;grid-template-columns:154px 1fr;gap:10px;padding:0 12px 12px;min-width:0}.playback{display:flex;align-items:end;gap:8px;padding-bottom:6px}.playback button{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--surface)}.playback .playback-active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.playback span{color:var(--muted);font-size:12px;white-space:nowrap}.clips{display:grid;grid-template-columns:repeat(4,minmax(140px,180px)) minmax(150px,1fr);gap:8px;min-width:0;overflow-x:auto}.clip,.clip-add{position:relative;height:88px;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden;padding:0;min-width:140px;text-align:left}.clip--active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.clip img{width:100%;height:58px;-o-object-fit:cover;object-fit:cover;filter:grayscale(1)}.clip b,.clip span{position:absolute;bottom:7px;color:#3b3c45;font-size:12px}.clip span{left:9px}.clip b{right:9px;font-weight:600}.clip-add{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-style:dashed;color:var(--muted)}button{cursor:pointer}button:disabled:not(.movie-button):not(.primary-action):not(.inspector-primary){cursor:not-allowed}button:hover:not(:disabled){border-color:#c9c5d8}@media (max-width:1180px){.studio-topbar{grid-template-columns:auto auto 1fr}.project-title,.save-state{display:none}.studio-shell{grid-template-columns:46px 106px 180px minmax(360px,1fr)}.inspector{display:none}}@media (max-width:820px){.comic-studio{overflow:auto}.studio-topbar{position:sticky;top:0;z-index:5;height:auto;min-height:52px;grid-template-columns:1fr auto;gap:8px;padding:9px 10px}.export-button,.topbar-link,.zoom-control{display:none}.studio-shell{height:auto;min-height:0;grid-template-columns:44px minmax(0,1fr);overflow:visible}.asset-library,.inspector,.page-strip{display:none}.canvas-workspace{padding:12px;overflow:visible}.canvas-frame{height:auto;min-height:0;padding:12px 0}.comic-page{width:min(100%,430px)}.context-menu{display:none}.canvas-actions{flex-wrap:wrap;height:auto;padding-bottom:12px}.timeline{height:auto;grid-template-rows:auto auto;max-width:100vw;overflow:hidden}.timeline-head{display:grid;grid-template-columns:auto repeat(3,32px) minmax(0,1fr);grid-template-rows:32px auto;align-items:center;gap:8px;padding:10px 12px 8px}.timeline-title{min-width:0}.align-toggle{justify-self:end;margin-left:0;white-space:nowrap}.timeline-zoom{grid-column:1/-1;width:100%;margin-left:0;display:grid;grid-template-columns:auto minmax(120px,1fr);gap:8px}.timeline-zoom span{white-space:nowrap}.timeline-zoom input{width:100%;min-width:0}.timeline-body{grid-template-columns:1fr;gap:8px;padding:0 12px 12px;overflow:hidden}.playback{align-items:center;padding-bottom:0}.playback span{min-width:0;overflow:hidden;text-overflow:ellipsis}.clips{display:flex;gap:8px;width:100%;padding-bottom:4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity}.clip,.clip-add{flex:0 0 clamp(124px,38vw,150px);min-width:0;scroll-snap-align:start}}