:root{color:#1c1f24;background:#f4f5f7;font-family:system-ui,sans-serif}body{margin:0}h2{margin:0 0 8px;font-size:15px}button{cursor:pointer}.app{grid-template-columns:240px minmax(0,1fr) 300px;height:100vh;display:grid}.left,.right{background:#fff;padding:12px;overflow:auto}.left{border-right:1px solid #ddd}.right{border-left:1px solid #ddd}main{padding:12px;overflow:auto}header{flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:8px;display:flex}.tpl-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.tpl{text-align:center;background:#f4f5f7;border:2px solid #0000;padding:4px;font-size:11px}.tpl.on{border-color:#2f80ed}.tpl img{width:100%;display:block}.tabs{gap:4px;display:flex}.tabs button{background:#fff;border:1px solid #ccc;border-radius:4px;padding:6px 12px}.tabs button.on{color:#fff;background:#2f80ed;border-color:#2f80ed}.accent{flex-direction:column;font-size:13px;display:flex}.accent small{color:#666;max-width:260px}.export{flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto;display:flex}.screen{width:100%;position:relative}.screen img,.screen svg{width:100%;display:block}.screen svg{height:100%;position:absolute;inset:0}.layer{fill:#0000;stroke:#78787880;stroke-width:1px;stroke-dasharray:4 3;cursor:not-allowed}.layer.can{stroke:#2f80edcc;cursor:pointer}@media (hover:hover){.layer.can:hover{fill:#2f80ed2e}}.layer.sel{fill:#2f80ed4d;stroke-width:2px;stroke-dasharray:none}.tip{color:#444;min-height:18px;margin:4px 0 12px;font-size:12px}.compare img{width:100%;display:block}.compare .row{align-items:center;gap:14px;margin-bottom:6px;font-size:13px;display:flex}.row{align-items:center;gap:8px;display:flex}.right ul{padding:0}.usage{color:#666;margin:4px 0}.usage.warn{color:#b45309;font-weight:600}.meta,.hint{color:#555;font-size:12px}.err{color:#b42318}.notice{background:#fff4d6;border-radius:4px;padding:6px 10px;font-size:13px}.right,.right *{overflow-wrap:anywhere}.name input{width:200px}.my-themes{margin-bottom:12px}.my-themes select{width:100%}.install-hint{color:#555;flex-basis:100%;margin-top:6px;font-size:12px}.install-hint ol{margin:4px 0;padding-left:18px}.install-hint code{word-break:break-all;background:#f0f0f0;padding:0 3px}.cards{grid-template-columns:1fr 1fr;gap:8px;margin:0 0 8px;padding:0;display:grid}.card{border:1px solid #ddd;border-radius:4px;flex-direction:column;gap:4px;padding:8px;font-size:12px;list-style:none;display:flex}.card-label{font-weight:600}.card-meta,.card-hint{color:#666}.card-preview{background:repeating-conic-gradient(#2a2a2a 0 25%, #3a3a3a 0 50%) 0 0 / 12px 12px;justify-content:center;align-items:center;min-height:48px;display:flex}.card-preview img{max-width:96px;max-height:96px}.recolor{margin:8px 0;font-size:13px;display:block}.color-edit{flex-direction:column;gap:6px;display:flex}.color-edit code{white-space:nowrap}.color-edit input[type=range]{box-sizing:border-box;width:100%}@media (width<=760px),(pointer:coarse) and (height<=500px){input[type=text],input:not([type]),select,textarea{font-size:16px}.app.m{height:auto;min-height:100vh;display:block}.app.m main{min-width:0;padding:8px 12px 24px;overflow:visible}button,summary,select{min-height:40px}input[type=color]{width:56px;height:40px;padding:2px}input[type=checkbox]{vertical-align:middle;width:22px;height:22px}.topbar{z-index:5;background:#fff;border-bottom:1px solid #ddd;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;display:flex;position:sticky;top:0}.topbar .menu-btn{background:#fff;border:1px solid #ccc;border-radius:6px;width:40px;font-size:18px}.topname{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:600;overflow:hidden}.topbar .export{margin-left:0}.topbar .export button{color:#fff;background:#2f80ed;border:0;border-radius:6px;padding:0 14px;font-weight:600}.topbar .export button:disabled{color:#fff;background:#c9ccd1}.menu{background:#fff;border-bottom:1px solid #ddd;flex-direction:column;gap:12px;padding:8px 12px 12px;display:flex}.menu .my-themes{margin:0}.menu .my-themes button{margin-top:8px}.menu .name input{box-sizing:border-box;width:100%;min-height:40px;margin-top:4px}.tabs{flex-wrap:nowrap;max-width:100%;margin:4px 0 8px;padding-bottom:4px;overflow-x:auto}.tabs button{white-space:nowrap;border-radius:20px;flex:none;min-height:40px}.tip{display:none}.build-status{overflow-wrap:anywhere;background:#fff;border-bottom:1px solid #ddd;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;display:flex}.build-status a{align-items:center;min-height:40px;display:inline-flex}.preview-bar{justify-content:flex-end;margin-top:4px;display:flex}.preview-bar .zoom{background:#ffffffb3;border:1px solid #ccc;border-radius:8px;width:40px;height:40px;padding:0;font-size:20px}.recolor{box-sizing:border-box;min-height:40px;margin:0;padding:8px 0}.accent{margin:12px 0}.accent small{max-width:none}.accent input[type=color]{margin:4px 0}.app.m h2{margin-top:12px}.tpl-grid{gap:8px;padding-bottom:6px;display:flex;overflow-x:auto}.tpl{flex:0 0 104px}.elements{color:#2f80ed;background:#fff;border:1px solid #2f80ed;border-radius:10px;width:100%;margin:12px 0;font-weight:600;display:block}.install-hint{margin:8px 0;font-size:13px}.install-hint summary{align-items:center;display:flex}.notice,.err{overflow-wrap:anywhere}.sheet-dim{z-index:20;background:#00000059;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{box-sizing:border-box;width:100%;max-height:80dvh;padding:8px 12px calc(14px + env(safe-area-inset-bottom));background:#fff;border-radius:16px 16px 0 0;outline:none;flex-direction:column;display:flex;position:relative;box-shadow:0 -4px 18px #0000002e}.sheet-grab{background:#ccc;border-radius:2px;flex:none;width:40px;height:4px;margin:0 auto 8px}.sheet-close{background:0 0;border:0;width:40px;font-size:18px;position:absolute;top:6px;right:8px}.sheet-dim,.sheet-body{overscroll-behavior:contain}.sheet-body{overflow-wrap:anywhere;padding-right:36px;overflow:auto}.sheet-body .cards{margin-right:-36px;padding-right:0}.sheet-body h2{margin-top:0}.el-list{z-index:15;background:#fff;flex-direction:column;display:flex;position:fixed;inset:0}.el-head{border-bottom:1px solid #ddd;flex:none;align-items:center;gap:8px;padding:8px 12px;display:flex}.el-back{background:#fff;border:1px solid #ccc;border-radius:6px;width:40px;font-size:20px}.el-body{overscroll-behavior:contain;padding:8px 12px calc(16px + env(safe-area-inset-bottom));flex:1;overflow:auto}.el-body ul{margin:8px 0 0;padding:0;list-style:none}.el-row{text-align:left;background:#fff;border:1px solid #ddd;border-radius:10px;align-items:center;gap:12px;width:100%;min-height:56px;margin-bottom:4px;padding:4px 8px;display:flex}.el-row.sel{background:#eef4fe;border-color:#2f80ed}.el-thumb{background:repeating-conic-gradient(#e6e6e6 0 25%, #fff 0 50%) 0 0/12px 12px;border-radius:6px;flex:none;justify-content:center;align-items:center;width:44px;height:44px;display:flex;overflow:hidden}.el-thumb img{object-fit:contain;max-width:100%;max-height:100%}.el-swatch{box-sizing:border-box;border:1px solid #ccc;border-radius:6px;width:100%;height:100%}.el-title{overflow-wrap:anywhere;flex:1;min-width:0}.zoom-view{z-index:15;background:#111;flex-direction:column;display:flex;position:fixed;inset:0}.zoom-bar{height:calc(56px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);box-sizing:border-box;flex:none;justify-content:flex-end;align-items:center;padding-right:8px;display:flex}.zoom-err{color:#ffb4a8;overflow-wrap:anywhere;flex:1;min-width:0;padding:0 8px;font-size:12px}.zoom-close{background:#ffffffe6;border:0;border-radius:22px;width:44px;height:44px;font-size:20px}.zoom-scroll{overscroll-behavior:contain;flex:1;align-items:center;min-height:0;display:flex;overflow:auto hidden}.zoom-scroll .screen{width:auto;height:calc(100vh - 56px - env(safe-area-inset-top));height:calc(100dvh - 56px - env(safe-area-inset-top));aspect-ratio:1920/720;flex:none;max-height:100%}.zoom-scroll .screen img,.zoom-scroll .screen svg{width:100%;height:100%}}.lazy-img{justify-content:center;align-items:center;max-width:100%;max-height:100%;display:inline-flex}.img-ph{background:#d9dce1;border-radius:4px;width:24px;height:24px;display:inline-block}