*{box-sizing:border-box}html,body{margin:0;height:100%;font:13px/1.3 system-ui,sans-serif;color:#e8eef5;background:#0e1520;overflow:hidden}
body{display:flex}
#side{width:300px;flex:none;display:flex;flex-direction:column;gap:8px;padding:12px;background:linear-gradient(#1b2636,#141c28);border-right:2px solid #2b3a52;user-select:none}
.brand{font-weight:800;font-size:18px;color:#ffd84a;text-shadow:0 2px 0 #7a4b00}
.row{display:flex;flex-wrap:wrap;gap:4px}
button{flex:1;background:#2a3a55;color:#e8eef5;border:1px solid #3c5277;border-radius:6px;padding:5px 4px;cursor:pointer;font:inherit;white-space:nowrap}
button:hover{background:#34496b}button.on{background:#3d8b3d;border-color:#6fd16f}
.layers label,.chk{flex:1;background:#202d42;padding:4px 6px;border-radius:6px;cursor:pointer}
#search{background:#0e1520;border:1px solid #3c5277;border-radius:6px;padding:7px 9px;color:#fff;font:inherit}
#sel{display:flex;gap:8px;align-items:center;background:#202d42;border-radius:6px;padding:6px}
#sel small{display:block;color:#9fb3cc}#sel b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}#selIcon{width:32px;height:32px;background:#0e1520;border-radius:4px}
#grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,40px);gap:4px;align-content:start;background:#0f1724;border-radius:6px;padding:6px}
#grid canvas{width:40px;height:40px;background:#1f2b3e;border-radius:4px;border:2px solid transparent;cursor:pointer}
#grid canvas:hover{border-color:#ffd84a}#grid canvas.on{border-color:#6fd16f;background:#2d4a2d}
#view{flex:1;position:relative;overflow:hidden;background:#5aa9e6;cursor:crosshair}
#world{position:absolute;left:0;top:0}
#status{position:absolute;left:10px;bottom:10px;background:#000a;padding:5px 9px;border-radius:6px;pointer-events:none;max-width:calc(100% - 20px)}
#glue{background:#202d42;border-radius:6px;padding:6px;display:flex;flex-direction:column;gap:5px}
#glue .gluehead{align-items:center;justify-content:space-between}
#glue .gluehead b{flex:none}
#glue .chk{flex:none}
#g3{display:grid;grid-template-columns:repeat(3,26px);gap:3px;width:max-content;margin:0 auto}
#g3 label,#g3 .hub{width:26px;height:26px;margin:0;background:#0e1520;border:1px solid #3c5277;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0}
#g3 label.dis{opacity:.28}
#g3 .hub{color:#5c7190;font-weight:700}
#glue small{color:#9fb3cc;display:block;line-height:1.35}
.tabs button{font-weight:700}
#picker,#weatherPane{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
#picker[hidden],#weatherPane[hidden]{display:none !important}
#wSearch{background:#0e1520;border:1px solid #3c5277;border-radius:6px;padding:7px 9px;color:#fff;font:inherit}
#wOpts:empty{display:none}
#wOpts{background:#202d42;border-radius:6px;padding:6px;display:flex;flex-direction:column;gap:6px}
#wOpts small,#wNote{color:#9fb3cc;line-height:1.35}
#wOpts .row{align-items:center}
#wOpts input[type=color]{flex:none;width:42px;height:28px;padding:2px;border:1px solid #3c5277;border-radius:6px;background:#0e1520;cursor:pointer}
#wOpts input[type=search],#wOpts input[type=text]{flex:1;min-width:0;background:#0e1520;border:1px solid #3c5277;border-radius:6px;padding:5px 7px;color:#fff;font:inherit}
#wBlockList{max-height:132px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.brow{display:flex;align-items:center;gap:6px;background:#1f2b3e;border:2px solid transparent;border-radius:4px;padding:2px 4px;cursor:pointer;color:#e8eef5}
.brow:hover{border-color:#ffd84a}
.brow.on{border-color:#6fd16f;background:#243628}
.brow canvas{width:24px;height:24px;flex:none;background:#0e1520;border-radius:3px}
.brow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#wList{flex:1;min-height:0;overflow-y:auto;background:#0f1724;border-radius:6px;padding:4px}
.wgroup{position:sticky;top:0;z-index:1;background:#172232;color:#9fb3cc;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:6px 6px 3px}
.wrow{flex:none;width:100%;display:flex;align-items:center;gap:8px;text-align:left;background:transparent;border:2px solid transparent;border-radius:6px;padding:3px 4px}
.wrow:hover:not(:disabled){border-color:#ffd84a}
.wrow.on{border-color:#6fd16f;background:#243628}
.wrow:disabled{opacity:.48;cursor:not-allowed}
.wthumb,.swatch{width:64px;height:36px;flex:none;border-radius:3px;background:#0e1520;object-fit:cover;image-rendering:auto}
.swatch{display:block}
.swatch.sky{background:linear-gradient(#2f6f9a,#5aa9e6 45%,#78bdf0)}
.swatch.party{background:linear-gradient(100deg,#ff5d73,#ffd84a,#5dffa1,#5dc8ff,#c45dff)}
.swatch.tint{background:linear-gradient(#5aa9e6,#ffb703)}
.swatch.block{background:repeating-linear-gradient(90deg,#24344c 0 8px,#1a2638 8px 16px)}
.swatch.cycle{background:#202d42;color:#ffd84a;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px}
.swatch.color{background:#000}
.swatch.empty{background:#141c28;border:1px dashed #3c5277;box-sizing:border-box}
.wname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{flex:none;font-size:10px;line-height:1.4;background:#6a4a12;color:#ffd84a;border-radius:999px;padding:0 5px}
.badge.art{background:#5a2a2a;color:#ffb4b4}