:root{--bg: #101216;--bg-panel: #17191f;--bg-raised: #1e2128;--bg-control: #262a33;--bg-control-hover: #303542;--border: #2e323c;--border-strong: #3d4250;--text: #e6e8ee;--text-dim: #9aa1af;--text-faint: #6b7280;--accent: #3d7bfd;--accent-soft: rgba(61, 123, 253, .16);--good: #4ade80;--dot: rgba(255, 255, 255, .04);--radius: 8px;--radius-sm: 6px}:root[data-theme=light]{--bg: #eef0f3;--bg-panel: #ffffff;--bg-raised: #f6f7f9;--bg-control: #ffffff;--bg-control-hover: #e7eaef;--border: #d4d8df;--border-strong: #b7bdc7;--text: #1c2127;--text-dim: #59626e;--text-faint: #8a929e;--accent: #2b62d9;--accent-soft: rgba(43, 98, 217, .12);--good: #157a3c;--dot: rgba(0, 0, 0, .05)}@font-face{font-family:Legacy Sans Ultra;src:url(/fonts/LegacySansUltra.ttf) format("truetype");font-display:swap}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:13px}button{background:var(--bg-control);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 10px;font:inherit;cursor:pointer;transition:background .12s,border-color .12s;white-space:nowrap}button:hover:not(:disabled){background:var(--bg-control-hover);border-color:var(--border-strong)}button:active:not(:disabled){transform:translateY(.5px)}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}input[type=text],input[type=number],select,textarea{background:var(--bg-control)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm);padding:4px 7px;font:inherit}input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}input[type=color]{inline-size:30px;block-size:22px;border:1px solid var(--border);border-radius:5px;background:var(--bg-control);padding:1px;cursor:pointer;vertical-align:middle}input[type=checkbox]{accent-color:var(--accent)}input[type=range]{accent-color:var(--accent);vertical-align:middle}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-control-hover);border-radius:6px;border:2px solid var(--bg)}::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}.app{display:flex;flex-direction:column;height:100vh;height:100dvh}.app-header{display:flex;align-items:center;gap:14px;padding:8px 16px;background:#172e4d;border-bottom:1px solid #24406b}.app-header img.logo{height:34px}.app-header .title{font-family:Legacy Sans Ultra,Segoe UI,system-ui,sans-serif;font-size:16px;font-weight:400;text-transform:uppercase;letter-spacing:1px;color:#e6e8ee}.app-header .subtitle{color:#6b7280;font-size:12px}.app-header .spacer{flex:1}.app-header .source{color:#9aa1af;font-size:12px}.app-header .theme-toggle{background:#21406e;color:#e6e8ee;border:1px solid #2c4f85}.app-header .theme-toggle:hover{background:#2a4d84;border-color:#3a629f}.app-body{display:flex;flex:1;min-height:0}.workspace{flex:1;display:flex;flex-direction:column;min-width:0}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 14px;background:var(--bg-panel);border-bottom:1px solid var(--border)}.toolbar .path-input{flex:1 1 260px;min-width:220px}.tb-group{display:flex;align-items:center;gap:4px;padding:3px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius)}.tb-group>.tb-label{color:var(--text-faint);font-size:10px;text-transform:uppercase;letter-spacing:.7px;padding:0 6px 0 8px;-webkit-user-select:none;user-select:none}.tb-group button{border:none;background:transparent;padding:5px 8px;border-radius:5px}.tb-group button:hover:not(:disabled){background:var(--bg-control-hover)}.canvas-area{position:relative;flex:1;overflow:auto;padding:18px;background:radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 0) 0 0 / 22px 22px,var(--bg)}.canvas-frame{display:inline-block;border-radius:4px;box-shadow:0 8px 30px #00000080,0 0 0 1px var(--border)}.canvas-empty{color:var(--text-faint);padding:40px}.status-bar{padding:6px 16px;background:var(--bg-panel);border-top:1px solid var(--border);color:var(--good);font-size:12px;min-height:28px}.panel-resizer{width:5px;flex-shrink:0;cursor:col-resize;background:transparent;transition:background .12s}.panel-resizer:hover{background:var(--accent-soft)}.props-panel{width:312px;flex-shrink:0;background:var(--bg-panel);border-left:1px solid var(--border);padding:14px 16px;overflow-y:auto;line-height:1.9}.props-panel h3{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim)}.props-panel .el-title{font-size:14px;font-weight:600}.props-panel .el-type{color:var(--text-faint);font-weight:400;font-size:12px}.props-panel .section{margin-top:12px;padding:10px 12px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius)}.props-panel .muted{color:var(--text-faint);font-size:12px}.props-panel select,.props-panel input[type=text],.props-panel input[type=number]{max-width:100%}.props-panel .src{color:#7ea6ff;font-size:12px;word-break:break-all}@media (max-width: 900px) and (orientation: portrait){.app-body{flex-direction:column}.workspace{flex:1 1 auto;min-height:45vh}.panel-resizer{display:none}.props-panel{width:100%!important;flex:0 0 auto;max-height:42vh;border-left:none;border-top:1px solid var(--border);padding:10px 12px}}@media (max-height: 520px){.panel-resizer{display:none}.props-panel{width:240px!important;padding:8px 10px}.workspace{min-width:0}.status-bar{display:none}}@media (max-width: 900px),(max-height: 520px){.app-header{gap:8px;padding:4px 10px}.app-header .source{display:none}.toolbar{gap:5px;padding:4px 7px;flex-wrap:nowrap;overflow-x:auto}.tb-group{flex-shrink:0}.tb-group>.tb-label{display:none}.tb-group button{padding:4px 6px}.canvas-area{padding:6px}}.panel-toggle{align-self:center;flex-shrink:0;width:18px;height:52px;padding:0;border-radius:6px 0 0 6px;border-right:none;font-size:10px;color:var(--text-dim);z-index:5}@media (max-width: 900px) and (orientation: portrait){.panel-toggle{width:100%;height:16px;border-radius:0;border-right:1px solid var(--border)}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#00000073;display:flex;align-items:center;justify-content:center}.modal{background:var(--bg-panel);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:0 16px 60px #00000080;padding:16px 18px;width:min(440px,calc(100vw - 32px));max-height:min(70vh,620px);display:flex;flex-direction:column}.modal h3{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim)}.library-list{overflow-y:auto;display:flex;flex-direction:column;gap:4px}.library-list button{text-align:left}.modal-footer{margin-top:12px;display:flex;justify-content:flex-end;gap:8px}.modal-wide{width:min(720px,calc(100vw - 32px))}.el-lib{overflow-y:auto}.el-lib-cat{margin:10px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--text-faint)}.el-lib>div:first-child .el-lib-cat{margin-top:0}.el-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.el-lib-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px;background:var(--bg-raised)}.el-lib-item img{width:100%;height:72px;object-fit:contain;background:#14161b;border-radius:4px}.el-lib-item span{font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.zoom-pill{position:sticky;bottom:0;left:100%;transform:translate(-8px,-8px);display:inline-flex;align-items:center;gap:2px;padding:3px;background:var(--bg-raised);border:1px solid var(--border);border-radius:999px;box-shadow:0 4px 16px #00000073;width:max-content}.zoom-pill button{border:none;background:transparent;border-radius:999px;padding:3px 9px;font-size:13px}.zoom-pill button.active{background:var(--accent-soft);color:var(--accent)}.zoom-pill .zoom-value{min-width:44px;text-align:center;color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:12px}