/* 细浅滚动条：支持系统滚动/触控，仅替换外观。 */
*{scrollbar-width:thin;scrollbar-color:#d5dde7 transparent}
@supports selector(::-webkit-scrollbar){html,body,.stage,.settings-scroll,.nav-scroll,.phone-viewport,.suite-film,textarea,dialog{scrollbar-width:auto;scrollbar-color:auto}*::-webkit-scrollbar{width:5px;height:5px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:#d5dde7;border-radius:8px;min-height:24px}*::-webkit-scrollbar-thumb:hover{background:#b6c3d4}*::-webkit-scrollbar-button{display:none;width:0;height:0}*::-webkit-scrollbar-corner{background:transparent}}
.tools-nav-row{display:flex;align-items:center;border-radius:9px;margin:3px 0}.tools-nav-row .primary-nav{margin:0;min-width:0;flex:1}.tools-nav-row:has(.primary-nav.active){background:#eaf2ff}.tool-toggle{height:36px;width:32px;flex:none;display:grid;place-items:center;color:#8e9eb4;border-radius:6px;margin-right:5px}.tool-toggle:hover{background:#e5edf8;color:#577aa8}.tool-toggle svg{width:13px;height:13px;transition:transform .15s}.tool-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.suite-view-tabs{flex-wrap:wrap;gap:5px}.suite-view-tabs button{padding:8px 12px;font-size:13px}.suite-image-grid img{cursor:pointer}.suite-export-bar{border:1px solid #e5ebf4;background:white;border-radius:10px;padding:16px 19px;margin-top:27px;display:flex;align-items:center;justify-content:space-between;gap:15px}.suite-export-bar b{display:block;font-size:14px;font-weight:600;margin-bottom:6px}.suite-export-bar span{display:block;font-size:11px;color:#99a7bb;line-height:1.7}.suite-export-bar>div:last-child{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.suite-export-bar button{font-size:12px;border:1px solid #e0e8f3;padding:8px 10px;border-radius:6px;color:#6c85a8}.suite-single{background:white;border:1px solid #e3eaf3;border-radius:12px;overflow:hidden}.single-top{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;color:#8898ae;font-size:13px;border-bottom:1px solid #edf1f7}.single-canvas{height:470px;display:flex;align-items:center;justify-content:center;background:#f9fbfe;padding:18px}.single-canvas img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in}.single-controls{display:flex;justify-content:center;align-items:center;gap:35px;font-size:12px;color:#8194b0;padding:15px}.single-controls button{border:1px solid #e2e9f3;padding:7px 12px;border-radius:6px}.suite-film{display:flex;gap:9px;padding:14px 18px;overflow:auto;border-top:1px solid #edf1f7}.suite-film button{width:52px;height:60px;flex:none;border:1px solid #e4eaf2;background:#f8faff;padding:3px;border-radius:5px}.suite-film button.selected{border-color:#7fa6d9;background:#edf4ff}.suite-film img{width:100%;height:100%;object-fit:contain}
.phone-workspace{display:flex;align-items:flex-start;justify-content:center;gap:38px;padding:24px;border:1px solid #e4eaf3;border-radius:13px;background:#fff}.phone-notes{max-width:230px;padding-top:24px}.phone-notes h3{font-size:17px;font-weight:600;margin-bottom:12px}.phone-notes p{font-size:13px;line-height:1.9;color:#8b9bb1}.phone-note-list{display:flex;flex-direction:column;gap:13px;margin-top:25px}.phone-note-list span{font-size:12px;color:#899ab3;border-left:2px solid #c8d9f0;padding-left:12px}.suite-phone{width:318px;height:620px;flex:none;background:white;border:6px solid #354154;border-radius:31px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 25px #23324a12;padding-top:9px}.phone-status{display:flex;justify-content:space-between;padding:3px 18px 9px;font-size:10px;color:#42526a}.suite-phone>header{display:flex;justify-content:space-between;padding:9px 13px;border-bottom:1px solid #edf0f4;font-size:12px;color:#53647c}.suite-phone>header small{font-size:10px;color:#97a3b4}.phone-viewport{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:#fff}.phone-viewport img{width:100%;display:block;cursor:zoom-in}.phone-hero{aspect-ratio:1;background:#fafcff}.phone-hero>img{height:100%;object-fit:contain}.phone-carousel{display:flex;justify-content:center;align-items:center;gap:5px;padding:8px}.phone-carousel button{font-size:10px;color:#8b9aaf;padding:4px 7px;border-radius:4px;border:1px solid transparent}.phone-carousel .selected{background:#edf3ff;border-color:#cadcf6;color:#477cbf}.phone-info{padding:14px;border-top:1px solid #edf0f5;border-bottom:1px solid #edf0f5}.phone-info h3{font-size:15px;font-weight:600;line-height:1.6;margin-bottom:4px}.phone-info p{font-size:11px;color:#98a4b7}.phone-details-anchor{padding:13px;text-align:center;background:#f7f9fd;font-size:12px;color:#7b8da7}.phone-end{text-align:center;font-size:10px;padding:15px;color:#9aa8ba}.phone-actions{display:flex;justify-content:space-around;border-top:1px solid #e7edf5;padding:9px;flex:none}.phone-actions button{font-size:12px;padding:5px 16px;color:#748ba9;border-radius:5px}.phone-actions button:hover{background:#f1f5fb}.phone-bar{height:4px;width:86px;background:#354154;border-radius:4px;margin:5px auto 8px;flex:none}
.slice-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px;gap:12px}.slice-heading h3{font-size:17px;font-weight:600;margin-bottom:10px}.slice-heading p{font-size:12px;color:#8b9bb2;line-height:1.8}.sample-chip{font-size:11px;padding:5px 9px;background:#eff4fc;border:1px solid #e4ebf5;border-radius:5px;color:#8298b8;white-space:nowrap}.slice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.slice-grid article{border:1px solid #e3eaf2;border-radius:9px;overflow:hidden;background:white}.slice-grid article>div{height:300px;overflow:hidden;background:#f9fbfe}.slice-grid img{width:100%;height:100%;object-fit:contain;display:block;cursor:zoom-in}.slice-grid footer{padding:12px;display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:11px;border-top:1px solid #e7edf6}.slice-grid b{font-size:12px;font-weight:600}.slice-grid span{color:#9aa7b9}.slice-grid button{margin-left:auto;color:#6486b2;font-size:11px}.suite-long-preview .light-button{margin-top:17px}
@media(max-width:1400px){.phone-workspace{gap:20px;padding:21px 17px}.phone-notes{max-width:170px}.suite-phone{width:294px;height:580px}.slice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.slice-grid article>div{height:280px}.suite-view-tabs button{font-size:12px;padding:8px 9px}.suite-export-bar{flex-direction:column;align-items:flex-start}.suite-export-bar>div:last-child{justify-content:flex-start}.single-canvas{height:410px}}
@media(max-width:1100px){.phone-workspace{flex-direction:column;align-items:center}.phone-notes{max-width:100%;padding-top:0}.phone-note-list{display:none}.slice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}