*{box-sizing:border-box}body{margin:0;min-width:1080px;background:#18202c;color:#eaf2ff;font-family:Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif}button,input{font:inherit}.app{display:flex;height:100vh;overflow:hidden}.palette{width:330px;flex:0 0 330px;display:flex;flex-direction:column;gap:12px;padding:16px;color:#172033;background:#f8fafc;border-right:1px solid #dbe3ee}header p{margin:0}h1{margin:3px 0 5px;font-size:21px}.eyebrow{color:#4f6f9e;font-size:11px;font-weight:800;letter-spacing:.12em}.subtle{color:#66758b;font-size:12px}.search{width:100%;border:1px solid #cdd7e5;border-radius:8px;padding:9px 10px;color:#172033;outline-color:#4f7cff}.part-list{overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:2px}.part-card{display:flex;min-width:0;flex-direction:column;align-items:center;gap:5px;border:1px solid #dce4ef;border-radius:9px;padding:6px;text-align:center;cursor:pointer;color:#1c2940;background:#fff;font-size:12px;font-weight:650;line-height:1.25}.part-card img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:6px;background:#f8fafc}.part-card:hover{border-color:#88a5ff;box-shadow:0 2px 7px #22447718}.part-card.active{background:#edf3ff;border-color:#4f7cff;box-shadow:0 0 0 2px #dce8ff}.note{margin-top:auto;padding:10px;border-radius:9px;color:#44546c;background:#edf2f7;font-size:12px;line-height:1.55}.stage{position:relative;flex:1;min-width:0}.toolbar{position:absolute;z-index:2;top:14px;left:14px;right:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;border:1px solid #ffffff25;border-radius:11px;background:#1e2635e8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.toolbar button{border:1px solid #62718b;border-radius:6px;padding:6px 8px;cursor:pointer;color:#f5f8ff;background:#344156;font-size:12px}.toolbar button:hover:not(:disabled){background:#4f7cff;border-color:#80a0ff}.toolbar button:disabled{cursor:not-allowed;opacity:.42}.toolbar i{height:20px;width:1px;margin:0 1px;background:#65728a}.count{margin-left:auto;color:#c7d5eb;font-size:12px;white-space:nowrap}.toggle{display:flex;gap:4px;align-items:center;color:#e7eef9;font-size:12px;-webkit-user-select:none;user-select:none;white-space:nowrap}.toggle input{accent-color:#4f7cff}.color-tools{display:flex;align-items:center;gap:5px;color:#e7eef9;font-size:12px}.color-swatches{display:flex;gap:3px;align-items:center}.color-dot{width:16px;height:16px!important;padding:0!important;border:1px solid #ffffff88!important;border-radius:50%!important}.color-tools>input{width:21px;height:21px;padding:0;border:0;background:transparent}.guide{position:absolute;z-index:2;left:18px;bottom:16px;padding:8px 11px;border-radius:8px;color:#c7d5eb;background:#1e2635d9;font-size:12px;pointer-events:none}.selection-info{position:absolute;z-index:2;left:18px;bottom:48px;padding:8px 11px;border-radius:8px;color:#d9e7fa;background:#1e2635e8;font-size:12px;line-height:1.6;pointer-events:none}.loading,.error{position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);padding:20px;border-radius:9px;background:#26344c}.error{background:#7c2633}.error button{margin-top:10px}.stage canvas{display:block}.feature-candidate{position:absolute;z-index:3;right:18px;top:68px;max-width:310px;padding:9px 11px;border-radius:8px;background:#1e2635e8;font-size:12px;line-height:1.55;pointer-events:none}.feature-candidate.peg_socket{border-left:3px solid #34d399;color:#d1fae5}.feature-candidate.hex_support{border-left:3px solid #22d3ee;color:#cffafe}.hard-confirm{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);min-width:340px;padding:18px;border:1px solid #34d399;border-radius:12px;color:#ecfdf5;background:#13342def;box-shadow:0 12px 42px #0008}.hard-confirm div{display:flex;gap:8px;margin-top:12px}.hard-confirm button{border:1px solid #5eead4;border-radius:6px;padding:7px 10px;color:#ecfdf5;background:#16665a;cursor:pointer}.hard-confirm button+button{border-color:#94a3b8;background:#334155}.captive-info{position:absolute;z-index:3;right:18px;bottom:78px;max-width:400px;padding:9px 11px;border-left:3px solid #a78bfa;border-radius:7px;color:#eee7ff;background:#241b38e8;font-size:12px;line-height:1.55;pointer-events:none}.shortcut-panel{position:absolute;z-index:5;right:18px;bottom:18px;width:156px;border-radius:9px;background:#1e2635e8;border:1px solid #64748b99;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden}.shortcut-toggle{width:100%;border:0;padding:8px 10px;color:#dbeafe;background:transparent;text-align:left;cursor:pointer;font-size:12px}.shortcut-content{display:grid;gap:5px;padding:0 10px 10px;color:#d9e7fa;font-size:11px;line-height:1.4}.shortcut-content b{margin-top:5px;color:#93c5fd;font-size:11px}.shortcut-content span{color:#dbe4f4}