:root{--bg: #111214;--bg-panel: #1a1c1f;--bg-elevated: #232529;--bg-hover: #2b2e33;--bg-active: #34383e;--border: #2e3136;--text: #e8eaed;--text-dim: #9aa0a8;--accent: #4c9ffe;--accent-dim: #2d6cb5;--danger: #e05c5c;--radius: 10px;--panel-w: 320px;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);font-family:Hiragino Kaku Gothic ProN,Yu Gothic UI,Segoe UI,system-ui,sans-serif;font-size:13px;-webkit-font-smoothing:antialiased;touch-action:manipulation}button{font:inherit;color:inherit;background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:7px 12px;cursor:pointer;transition:background .15s;user-select:none;-webkit-user-select:none;white-space:nowrap}button:hover{background:var(--bg-hover)}button:active{background:var(--bg-active)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent-dim);border-color:var(--accent-dim)}button.primary:hover{background:var(--accent)}button.toggled{border-color:var(--accent);color:var(--accent)}input[type=file]{display:none}select,input[type=number],input[type=text],input[type=password],input[type=search]{font:inherit;color:inherit;background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:6px 8px;max-width:100%}input[type=number]{width:52px;text-align:center}.text-field{width:100%}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--border);border-radius:2px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#d7dbe0;border:none;box-shadow:0 1px 4px #00000080}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#d7dbe0;border:none}.app{display:flex;flex-direction:column;height:100%}.header{height:50px;display:flex;align-items:center;gap:7px;padding:0 10px;background:var(--bg-panel);border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto;scrollbar-width:none}.header::-webkit-scrollbar{display:none}.header .logo{font-weight:700;font-size:15px;white-space:nowrap;background:linear-gradient(120deg,#6db4ff,#7ee0c2);-webkit-background-clip:text;background-clip:text;color:transparent;margin-right:2px}.header .spacer{flex:1}.header .file-info{color:var(--text-dim);font-size:11px;white-space:nowrap}.main{flex:1;display:flex;min-height:0}.main.drag-over{outline:2px dashed var(--accent);outline-offset:-6px}.stage-wrap{flex:1;min-width:0;position:relative;display:flex;min-height:0}.stage-area{flex:1;min-width:0;display:flex;overflow:auto;background:repeating-conic-gradient(#17181b 0% 25%,#131417 0% 50%) 0 0 / 24px 24px}.stage-canvas{display:block;margin:auto;padding:0;box-shadow:0 6px 32px #00000073;cursor:move;touch-action:none;flex-shrink:0}.stage-area .drop-hint{margin:auto}.zoom-bar{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;gap:4px;align-items:center;padding:5px 7px;background:#16181beb;border:1px solid var(--border);border-radius:999px;box-shadow:0 4px 16px #0006;z-index:10}.zoom-bar button{padding:3px 10px;font-size:11.5px;border-radius:999px;border-color:transparent;background:transparent}.zoom-bar button:hover{background:var(--bg-hover)}.zoom-bar button:disabled{opacity:.35}.zoom-bar .zoom-value{min-width:86px;text-align:center;font-variant-numeric:tabular-nums;color:var(--text);border:1px solid var(--border)}.zoom-bar button.toggled{color:var(--accent);border:1px solid var(--accent-dim)}.stage-area .drop-hint{border:2px dashed var(--border);border-radius:var(--radius);padding:40px 48px;display:flex;flex-direction:column;gap:12px;align-items:center;color:var(--text-dim);text-align:center}.stage-area .drop-hint h2{font-size:17px;color:var(--text)}.stage-area .drop-hint .formats{font-size:11px;max-width:460px;line-height:1.7}.panel-resizer{width:6px;flex-shrink:0;cursor:col-resize;background:transparent;border-left:1px solid var(--border);transition:background .15s;touch-action:none}.panel-resizer:hover{background:#4c9ffe59}.side-panel{width:var(--panel-w);background:var(--bg-panel);border-left:1px solid var(--border);overflow-y:auto;flex-shrink:0}.section{border-bottom:1px solid var(--border)}.section-title{padding:11px 14px;font-weight:600;font-size:12.5px;cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between}.section-title:hover{background:var(--bg-hover)}.title-side{display:flex;align-items:center;gap:8px}.section-title .chev{color:var(--text-dim);transition:transform .15s;font-size:10px;cursor:pointer}.section-title .chev.open{transform:rotate(90deg)}.title-action{padding:2px 8px;font-size:10.5px;border-radius:6px;font-weight:400}.section-body{padding:8px 14px 16px;display:flex;flex-direction:column;gap:10px}.field-row{display:grid;grid-template-columns:84px 1fr;align-items:center;gap:8px}.field-row label{font-size:12px;color:var(--text-dim);white-space:nowrap}.field-row input[type=color]{width:40px;height:26px;padding:0;border:1px solid var(--border);border-radius:6px;background:none}.field-row input[type=checkbox]{width:16px;height:16px;justify-self:start}.rc-inputs{display:flex;align-items:center;gap:6px}.row-buttons{display:flex;flex-wrap:wrap;gap:6px}.export-btn{width:100%}.hint{font-size:10.5px;color:var(--text-dim);line-height:1.6}.preset-search{width:100%;font-size:12px;padding:7px 10px}.cat-chips{display:flex;flex-wrap:wrap;gap:4px}.cat-chips button{padding:4px 10px;font-size:11px;border-radius:999px}.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:320px;overflow-y:auto;padding-top:6px}.preset-grid button{padding:8px 4px;font-size:11px}.preset-item{position:relative}.preset-item>button:first-child{width:100%;padding:8px 4px;font-size:10.5px;white-space:normal;line-height:1.35;min-height:38px}.preset-item .fav,.preset-item .del{position:absolute;top:-6px;width:18px;height:18px;padding:0;font-size:10px;line-height:1;border-radius:50%;background:var(--bg-panel);opacity:0;transition:opacity .12s}.preset-item .fav{right:-4px;color:var(--text-dim)}.preset-item .fav.on{opacity:1;color:#ffb400;border-color:#ffb400}.preset-item .del{left:-4px;color:var(--danger)}.preset-item:hover .fav,.preset-item:hover .del{opacity:1}.layout-thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;max-height:400px;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;padding:6px 2px 2px}.layout-thumb-grid::-webkit-scrollbar{width:8px}.layout-thumb-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.layout-thumb-grid::-webkit-scrollbar-thumb:hover{background:#4a4f57}.layout-thumb-item{position:relative}.layout-thumb-btn{width:100%;padding:4px 4px 6px;display:flex;flex-direction:column;gap:4px;align-items:center;border-radius:10px}.layout-thumb-btn:hover{border-color:var(--accent)}.layout-thumb-canvas{width:100%;aspect-ratio:3 / 2;border-radius:6px;display:block;border:1px solid var(--border);background:#2a2e34}.layout-thumb-label{font-size:10px;color:var(--text-dim);line-height:1.3;white-space:normal;max-height:26px;overflow:hidden}.layout-thumb-item .fav,.layout-thumb-item .del{position:absolute;top:-6px;width:18px;height:18px;padding:0;font-size:10px;line-height:1;border-radius:50%;background:var(--bg-panel);opacity:0;transition:opacity .12s;z-index:1}.layout-thumb-item .fav{right:0;color:var(--text-dim)}.layout-thumb-item .fav.on{opacity:1;color:#ffb400;border-color:#ffb400}.layout-thumb-item .del{left:0;color:var(--danger)}.layout-thumb-item:hover .fav,.layout-thumb-item:hover .del{opacity:1}.inline-setting{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-dim);cursor:pointer;user-select:none}.inline-setting input[type=checkbox]{width:14px;height:14px}.style-thumb{aspect-ratio:2 / 1}.confirm-modal{width:min(440px,92vw)}.confirm-message{font-size:13px;line-height:1.8}button.danger-btn{background:#7a2727;border-color:#a03434}button.danger-btn:hover{background:#a03434}.layer-tree{display:flex;flex-direction:column;gap:3px}.layer-row{display:flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid var(--border);border-radius:8px;cursor:pointer}.layer-row.active{border-color:var(--accent);background:#4c9ffe14}.layer-row{position:relative}.layer-row.drop-above:before,.layer-row.drop-below:after{content:"";position:absolute;left:4px;right:4px;height:3px;border-radius:2px;background:var(--accent);pointer-events:none}.layer-row.drop-above:before{top:-3px}.layer-row.drop-below:after{bottom:-3px}.layer-row.drop-into{outline:2px solid var(--accent);outline-offset:-2px}.layer-row.hidden-layer .layer-name{opacity:.4;text-decoration:line-through}.layer-row .layer-icon{font-size:11px;flex-shrink:0;width:26px;text-align:center;color:var(--text-dim)}.layer-row .layer-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.layer-row .layer-ops{display:flex;gap:2px}.layer-row .layer-ops button{padding:2px 5px;font-size:10px;border-radius:6px}.mini-btn{padding:1px 4px;font-size:10px;border-radius:6px;flex-shrink:0}.mini-btn.eye{width:24px}.text-input{width:100%;font:inherit;color:inherit;background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:8px;resize:vertical}.font-select{width:100%}.anchor-grid{display:grid;grid-template-columns:repeat(3,26px);gap:3px}.anchor-grid button{width:26px;height:22px;padding:0;font-size:14px;line-height:1;border-radius:5px}.modal-backdrop{position:fixed;inset:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:40}.modal{background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;padding:20px;width:min(580px,94vw);max-height:88vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.modal h3{font-size:15px}.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}.bg-thumb{padding:4px;display:flex;flex-direction:column;gap:3px;align-items:center;border-radius:10px}.bg-thumb.active{border-color:var(--accent);background:#4c9ffe1a}.bg-thumb canvas{width:96px;height:64px;border-radius:6px;display:block;border:1px solid var(--border)}.bg-thumb span{font-size:10px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px}.custom-bg-editor{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}.custom-bg-preview{border:1px solid var(--border);border-radius:8px;flex-shrink:0;max-width:100%}.custom-bg-fields{flex:1;min-width:220px;display:flex;flex-direction:column;gap:10px}.ai-error{background:#3d1c1c;border:1px solid var(--danger);color:#ffd7d7;padding:8px 12px;border-radius:8px;font-size:12px;line-height:1.5}.ai-result{border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--bg-elevated)}.ai-result-head{display:flex;flex-direction:column;gap:2px}.ai-layer-list{list-style:none;display:flex;flex-direction:column;gap:4px}.ai-layer-list li{display:flex;justify-content:space-between;gap:8px;padding:4px 8px;border:1px solid var(--border);border-radius:6px;font-size:12px}.ai-layer-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-image-preview{max-width:100%;max-height:220px;object-fit:contain;border-radius:8px;border:1px solid var(--border);align-self:center}.help-link{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--border);border-radius:50%;background:var(--bg-elevated);color:var(--text-dim);text-decoration:none;font-size:13px}.help-link:hover{color:var(--accent);border-color:var(--accent-dim)}.toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%);background:#3d1c1c;border:1px solid var(--danger);color:#ffd7d7;padding:10px 18px;border-radius:10px;font-size:12.5px;max-width:min(640px,92vw);z-index:30}.toast.notice{background:#16283d;border-color:var(--accent-dim);color:#cfe4ff}@media (max-width: 768px){.main{flex-direction:column}.panel-resizer{display:none}.side-panel{width:100%!important;border-left:none;border-top:1px solid var(--border);max-height:46%}}