.design-test-view{padding:24px;box-sizing:border-box}.design-test-head{margin-bottom:20px}.design-test-head h2{margin:0 0 6px}.design-test-head span{color:var(--muted,#8792a2)}.design-test-workbench{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,720px);gap:20px;align-items:start}.design-test-controls{display:grid;gap:12px;padding:16px;border:1px solid var(--line,#dfe4ea);border-radius:12px;background:var(--panel,#fff)}.design-test-controls label{display:grid;gap:5px;font-weight:600}.design-test-controls input,.design-test-controls select,.design-test-controls textarea{font:inherit;padding:8px;border:1px solid var(--line,#dfe4ea);border-radius:7px;box-sizing:border-box}.design-test-controls input[type=color]{height:36px;padding:2px}.design-test-actions{display:flex;flex-wrap:wrap;gap:8px}.design-test-actions button{padding:8px 11px;border:1px solid var(--line,#dfe4ea);border-radius:7px;background:var(--panel,#fff);cursor:pointer}.design-test-stage{min-width:0}.design-test-stage canvas{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;border-radius:10px;background:#c62828;box-shadow:0 2px 10px #0002}.design-test-animated-preview{margin-top:10px;padding:8px;text-align:center;border:1px dashed var(--line,#dfe4ea);border-radius:8px}.design-test-animated-preview svg{max-width:100%;height:auto}@media(max-width:800px){.design-test-workbench{grid-template-columns:1fr}.design-test-stage{order:-1}}
.design-test-view{color:#e7eef5;background:#0b1720;min-height:100vh}.design-test-controls{background:#132532;border-color:#2d5264;box-shadow:0 4px 18px #0004}.design-test-controls label{color:#e7eef5}.design-test-controls input,.design-test-controls select,.design-test-controls textarea{color:#e7eef5;background:#0c1821;border-color:#3a6375}.design-test-controls input[type=range]{accent-color:#2da9e8}.design-test-controls input[type=color]{background:#0c1821}.design-test-actions button{color:#e7eef5;background:#173342;border-color:#3a6375}.design-test-actions .button--primary{background:#1c8bc0;border-color:#5bd0ff}.design-test-head span,.design-test-controls .muted{color:#a8bfcc}.design-test-stage canvas{background:#071018;box-shadow:0 3px 18px #0008}
.design-test-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center}.design-test-controls output{font-weight:400;color:var(--muted,#8792a2)}
.design-test-stage canvas{cursor:grab;touch-action:none}.design-test-stage canvas:active{cursor:grabbing}
.design-selection-box{position:absolute;border:2px solid #18a0ff;box-sizing:border-box;z-index:3}.design-selection-box i{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #087dbb;box-sizing:border-box}.design-selection-box i[data-h=nw]{left:-7px;top:-7px}.design-selection-box i[data-h=ne]{right:-7px;top:-7px}.design-selection-box i[data-h=sw]{left:-7px;bottom:-7px}.design-selection-box i[data-h=se]{right:-7px;bottom:-7px}
.design-tool-tabs{display:flex;gap:8px;overflow-x:auto;margin:16px 0;padding-bottom:4px}.design-tool-tabs button,.design-tool-library button{color:#e7eef5;background:#173342;border:1px solid #3a6375;border-radius:7px;padding:8px 12px;white-space:nowrap;cursor:pointer}.design-tool-tabs button.active{background:#1c8bc0;border-color:#5bd0ff}.design-tool-library{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 16px;padding:12px;border:1px solid #2d5264;border-radius:10px;background:#132532}.design-tool-library strong{width:100%;color:#d9eef7}.design-tool-library[hidden]{display:none}
.design-template-library{margin:8px 0;padding:12px;border:1px solid #2d5264;border-radius:10px;background:#132532}.design-template-library h3{margin:0 0 8px;color:#e7eef5}.design-template-grid{display:flex;flex-wrap:wrap;gap:7px}.design-template-grid button{padding:7px 10px;border:1px solid #3a6375;border-radius:7px;background:#173342;color:#e7eef5;cursor:pointer}.design-template-grid button:hover{background:#1c8bc0}
.design-tool-library{max-width:320px;box-sizing:border-box}.design-tool-library button{padding:6px 9px}.design-test-workbench{margin-top:8px}
.design-test-view{display:grid;grid-template-columns:420px minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);column-gap:18px;align-items:start}.design-test-head{grid-column:1}.design-tool-tabs{grid-column:1;display:flex;flex-wrap:wrap;align-content:start}.design-tool-library{grid-column:1;width:100%;}.design-test-workbench{grid-column:2;grid-row:1/5;width:100%;height:calc(100vh - 36px);margin:0;display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px}.design-test-workbench .design-test-controls{max-height:calc(100vh - 72px)}.design-test-workbench .design-test-stage{max-height:calc(100vh - 72px)}
@media(max-width:900px){.design-test-view{display:block;overflow:auto}.design-test-workbench{height:auto;display:grid}.design-tool-library{max-width:none}}
.design-test-view{height:100vh;min-height:0;overflow:hidden;padding:18px;box-sizing:border-box;align-content:start}.design-test-head{margin-bottom:10px}.design-tool-tabs{margin:8px 0}.design-tool-library{margin-bottom:10px;padding:10px}.design-test-workbench{height:calc(100vh - 230px);overflow:hidden}.design-test-controls{max-height:100%;overflow-y:auto}.design-test-stage{max-height:100%;overflow:hidden}.design-test-stage canvas{max-height:calc(100vh - 250px)}
.design-test-workbench{align-items:start;min-height:0}.design-test-controls{max-height:calc(100vh - 220px);overflow-y:auto;align-content:start}.design-test-stage{position:sticky;top:12px;align-self:start}.design-test-stage canvas{max-height:calc(100vh - 180px);object-fit:contain}
.design-real-comic-library{display:block}.design-comic-cards{display:flex;flex-wrap:wrap;gap:10px}.design-comic-card{width:150px;padding:6px;border:1px solid #3a6375;border-radius:8px;background:#173342;color:#e7eef5;cursor:pointer;text-align:left}.design-comic-card:hover{background:#1c8bc0;border-color:#5bd0ff}.design-comic-card img{display:block;width:100%;height:110px;object-fit:cover;border-radius:5px;margin-bottom:5px;background:#fff}.design-comic-card strong{display:block;font-size:13px;line-height:1.35;white-space:normal}
.design-selection-box{pointer-events:none;background:transparent}.design-selection-box i{pointer-events:auto}
.design-test-color-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.design-test-color-row label{min-width:0}
.design-comic-filters{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;white-space:nowrap}.design-comic-filters button{flex:0 0 auto;padding:6px 10px;border:1px solid #3a6375;border-radius:999px;background:#173342;color:#e7eef5;cursor:pointer}.design-comic-filters button.active,.design-comic-filters button:hover{background:#1c8bc0;border-color:#5bd0ff}.design-comic-cards{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;scroll-snap-type:x proximity}.design-comic-card{flex:0 0 150px;scroll-snap-align:start}.design-comic-card[hidden]{display:none}
.design-comic-card--圆形{border-radius:50%;overflow:hidden}.design-comic-card--花形{clip-path:polygon(50% 0%,61% 12%,76% 7%,82% 22%,97% 28%,88% 42%,100% 55%,85% 63%,88% 80%,71% 80%,61% 96%,50% 84%,37% 96%,28% 80%,11% 82%,15% 64%,0% 55%,12% 42%,3% 28%,18% 22%,24% 7%,39% 12%)}
.design-comic-cards{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:150px;flex-wrap:unset;max-height:none;overflow-x:auto;overflow-y:hidden;align-content:start}.design-comic-card img{object-fit:contain}.design-comic-library{overflow:visible}
.design-comic-library{margin-bottom:24px;min-width:0}.design-comic-cards{grid-auto-columns:100px}.design-comic-card{width:100px}.design-comic-card img{height:60px}
.design-test-view>.design-tool-library{display:block;width:100%;max-width:none;min-width:0;overflow:visible;box-sizing:border-box}.design-industry-phrases{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:max-content;gap:8px;overflow-x:auto;white-space:nowrap;padding-bottom:4px}.design-industry-phrases button{flex:0 0 auto}
.design-test-view{grid-template-rows:auto auto auto minmax(0,1fr)}
.design-test-view>.design-tool-library{margin-top:16px;position:static}
.design-test-controls input[type="range"]{touch-action:none}
.design-selection-box i{width:18px;height:18px}
.design-comic-custom{margin-top:8px;display:flex;align-items:center;gap:8px}.design-comic-custom label{display:flex;align-items:center;gap:8px;color:#e7eef5;font-weight:600}.design-comic-custom input{font:inherit;color:#e7eef5;background:#0c1821;border:1px solid #3a6375;border-radius:7px;padding:5px}
.design-test-view>.design-tool-tabs{grid-row:2;min-height:94px;align-content:start;position:relative;z-index:6}.design-test-view>.design-tab-library{grid-column:1;grid-row:3;position:relative;z-index:5;margin-top:8px;align-self:start}.design-test-view>.design-template-library{grid-column:1;position:relative;z-index:4}
.design-section-hidden{display:none!important}
.design-tab-library{grid-column:1;width:100%;margin:0 0 12px;padding:10px;border:1px solid #2d5264;border-radius:10px;background:#132532;box-sizing:border-box}.design-tab-library h3{margin:0 0 8px;color:#e7eef5;font-size:16px}.design-tab-library-list{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:120px;gap:8px;overflow-x:auto;padding-bottom:4px}.design-tab-library button{width:120px;min-height:74px;padding:5px;border:1px solid #3a6375;border-radius:8px;background:#173342;color:#e7eef5;cursor:pointer;text-align:left}.design-tab-library button:hover{background:#1c8bc0;border-color:#5bd0ff}.design-tab-library img{display:block;width:100%;height:42px;object-fit:cover;border-radius:4px;margin-bottom:4px}.design-tab-library strong{display:block;font-size:12px;line-height:1.2}.design-tab-library[hidden]{display:none}
@media(min-width:901px){.design-poster-template-item{display:flex;flex-direction:column;gap:4px;width:120px}.design-poster-template-item .design-poster-template-call{width:120px;min-height:74px}.design-poster-template-item .design-poster-template-favorite,.design-poster-template-item .design-poster-template-delete{width:120px;min-height:28px;padding:4px 3px;text-align:center;font-size:11px;background:#214c5e;border-color:#4d879c}.design-poster-template-item .design-poster-template-favorite:hover{background:#c18a2b;border-color:#f4ce72;color:#fff}.design-poster-template-item .design-poster-template-delete{background:#5d2a38;border-color:#a75b6b}.design-poster-template-item .design-poster-template-delete:hover{background:#8e1b1b;border-color:#f28c8c;color:#fff}}
.design-action-flash{animation:designActionFlash .7s ease-in-out}
.design-poster-options{display:grid;gap:8px;padding:10px;border:1px solid #3a6375;border-radius:8px;background:#102430}.design-poster-options[hidden]{display:none!important}.design-poster-options label{display:grid;gap:4px;font-size:13px}.design-poster-options input[type=range]{width:100%}
@keyframes designActionFlash{0%,100%{filter:none;transform:scale(1)}25%{filter:brightness(1.8);transform:scale(1.06)}50%{filter:brightness(1.3);transform:scale(.98)}75%{filter:brightness(1.7);transform:scale(1.04)}}
.design-test-workbench{height:calc(100vh - 36px);min-height:0}.design-test-workbench .design-test-controls{height:100%;max-height:none;overflow-y:auto}.design-test-workbench .design-test-stage{height:100%;max-height:none}
@media(min-width:901px){body{margin:0;overflow:hidden}}
@media(min-width:901px){.design-test-workbench{grid-template-columns:360px minmax(0,1fr)}.design-test-controls{min-width:0}.design-poster-options{grid-column:1/-1}}
.design-poster-inline-row{display:flex;flex-wrap:nowrap;align-items:end;gap:6px;overflow-x:auto;padding:6px 0;border-top:1px solid #2d5264}.design-poster-inline-row label{flex:0 0 72px;min-width:72px;font-size:11px!important;gap:3px!important}.design-poster-inline-row label.design-test-check{flex-basis:78px;min-width:78px;align-self:center}.design-poster-inline-row input[type=range]{width:72px}.design-poster-inline-row select{width:82px;padding:5px!important}.design-poster-inline-row input[type=color]{width:48px;height:30px}.design-poster-inline-row input[type=checkbox]{width:auto}
.design-tab-library img{height:74px;object-fit:contain;background:#102a38}
.design-tab-library button{min-height:110px}
/* Desktop comic component picker.  It is intentionally scoped so the
   mobile editor and motion controls keep their existing layout. */
.design-comic-components{margin-top:12px;padding:10px;border:1px solid #3a6375;border-radius:10px;background:#102430}
.design-comic-components[hidden]{display:none!important}
.design-comic-components h3{margin:0 0 4px;color:#e7eef5;font-size:15px}
.design-comic-components .muted{margin:0 0 8px;color:#a8bfcc;font-size:12px}
.design-comic-component-group{margin-top:8px}
.design-comic-component-group>strong{display:block;margin-bottom:5px;color:#f2c14e;font-size:13px}
.design-comic-component-row{display:flex;gap:7px;overflow-x:auto;padding:2px 0 5px}
.design-comic-component-card{flex:0 0 92px;width:92px;padding:4px;border:1px solid #3a6375;border-radius:7px;background:#173342;color:#e7eef5;cursor:pointer;text-align:center}
.design-comic-component-card:hover{background:#1c8bc0;border-color:#5bd0ff}
.design-comic-component-card img{display:block;width:82px;height:58px;object-fit:contain;background:#fff;border-radius:4px;margin-bottom:3px}
.design-comic-component-card span{display:block;font-size:11px;line-height:1.25;white-space:normal}
@media(max-width:900px){.design-comic-components{display:none!important}}
@media(min-width:901px){.design-tab-library .design-tab-choice-active{border-color:#ffd76b;box-shadow:0 0 0 2px rgba(255,215,107,.28),0 8px 18px rgba(0,0,0,.22);background:#20465a}.design-tab-library .design-tab-choice-active strong{color:#fff3bf}}
@media(min-width:901px){.design-comic-text-row{display:flex;align-items:center;gap:6px;overflow-x:auto}.design-comic-text-row input[type=text]{flex:1 1 180px;min-width:150px;padding:7px;border:1px solid #3a6375;border-radius:6px;background:#0c1821;color:#fff}.design-comic-text-row input[type=color]{width:38px;height:32px;padding:2px}.design-comic-text-row input[type=range]{width:110px}.design-comic-text-add{flex:0 0 auto;padding:7px 9px;border:1px solid #4d879c;border-radius:6px;background:#173f52;color:#fff;cursor:pointer}.design-comic-text-add:hover{background:#1c8bc0}}