* { margin:0; padding:0; box-sizing:border-box; }
body { background:#111116; color:#d8d8e0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; height:100vh; display:flex; flex-direction:column; overflow:hidden; font-size:14px; }

/* ── TOPBAR ── */
#topbar { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid #1e1e28; flex-shrink:0; background:#0b0b10; flex-wrap:wrap; }
#topbar h1 { font-size:14px; font-weight:600; color:#c0c0cc; white-space:nowrap; }
#topbar h1 span { color:#4a9eff; }
.top-sep { width:1px; height:20px; background:#1e1e28; }
.top-btn { background:none; border:1px solid #2a2a38; color:#999; font-family:inherit; font-size:12px; padding:6px 12px; cursor:pointer; border-radius:4px; white-space:nowrap; transition:all .15s; }
.top-btn:hover { border-color:#555; color:#eee; }
.top-btn.accent { border-color:#4a9eff66; color:#4a9eff; }
.top-btn.accent:hover { border-color:#4a9eff; background:#4a9eff11; }
#file-input, #import-input { display:none; }
select.top-sel { background:#0b0b10; border:1px solid #2a2a38; color:#888; font-family:inherit; font-size:12px; padding:6px 9px; cursor:pointer; border-radius:4px; }
.top-label { display:flex; align-items:center; gap:6px; font-size:12px; color:#777; cursor:pointer; user-select:none; }
input[type=color].bg-picker { width:24px; height:24px; border:1px solid #2a2a38; border-radius:3px; padding:2px; cursor:pointer; background:none; }

/* ── LAYOUT ── */
#main { display:flex; flex:1; overflow:hidden; }
#viewport { flex:1; position:relative; overflow:hidden; }
#renderCanvas { width:100%; height:100%; display:block; touch-action:none; }

/* ── OVERLAY / LOADING ── */
#drop-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:#111116; }
#drop-overlay.hidden { display:none; }
#drop-title { font-size:16px; color:#555; font-weight:500; }
#drop-sub { font-size:13px; color:#333; }
#hint { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); font-size:11px; color:#999; pointer-events:none; white-space:nowrap; }
#loading { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(11,11,16,.9); flex-direction:column; gap:12px; z-index:10; }
#loading.active { display:flex; }
.spinner { width:26px; height:26px; border:2px solid #1e1e28; border-top-color:#4a9eff; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
#loading-text { font-size:12px; color:#555; }

/* ── SIDEBAR ── */
#sidebar { width:320px; flex-shrink:0; border-left:1px solid #1e1e28; display:flex; flex-direction:column; overflow:hidden; background:#0b0b10; }
#tab-parts { flex:1; overflow-y:auto; padding:6px 0; }
#tab-parts::-webkit-scrollbar { width:3px; }
#tab-parts::-webkit-scrollbar-thumb { background:#1e1e28; border-radius:2px; }

/* ── PART BLOCKS ── */
.part-block { border-bottom:1px solid #131318; }
.part-header { display:flex; align-items:center; gap:8px; padding:8px 10px 8px 10px; cursor:pointer; transition:background .15s; }
.part-header:hover { background:#111118; }
.part-checkbox { flex-shrink:0; width:14px; height:14px; cursor:pointer; accent-color:#4a9eff; }
.swatch-wrap { position:relative; flex-shrink:0; }
.part-swatch { width:28px; height:28px; border-radius:4px; border:1px solid rgba(255,255,255,.12); position:relative; overflow:hidden; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.part-swatch input[type=color] { position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); border:none; padding:0; cursor:pointer; opacity:0; }
.part-hex-inline { width:66px; background:#111118; border:1px solid #1e1e28; color:#aaa; font-family:monospace; font-size:11px; padding:4px 5px; border-radius:3px; outline:none; flex-shrink:0; }
.part-hex-inline:focus { border-color:#3a3a55; color:#ddd; }
.part-title-view { flex:1; font-size:13px; color:#bbb; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.part-expand { font-size:10px; color:#333; transition:transform .2s; flex-shrink:0; }
.part-block.open .part-expand { transform:rotate(90deg); color:#666; }

/* ── PART DETAILS ── */
.part-details { display:none; padding:8px 14px 14px 52px; }
.part-block.open .part-details { display:block; }
.detail-label { font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#444; margin:10px 0 4px; }
.detail-label:first-child { margin-top:2px; }
.detail-input { width:100%; background:#111118; border:1px solid #1e1e28; color:#bbb; font-family:inherit; font-size:12px; padding:6px 8px; border-radius:3px; outline:none; transition:border-color .15s; }
.detail-input:focus { border-color:#3a3a55; color:#ddd; }
.detail-input::placeholder { color:#2a2a3a; }
.detail-hex-row { display:flex; gap:6px; align-items:center; }
.detail-hex-inp { width:90px; background:#111118; border:1px solid #1e1e28; color:#aaa; font-family:monospace; font-size:12px; padding:5px 7px; border-radius:3px; outline:none; }
.detail-hex-inp:focus { border-color:#3a3a55; color:#ddd; }
.detail-color-pick { width:30px; height:28px; border:1px solid #1e1e28; border-radius:3px; padding:2px; cursor:pointer; background:none; flex-shrink:0; }
.detail-link { display:inline-flex; align-items:center; gap:4px; margin-top:6px; font-size:11px; color:#4a9eff; text-decoration:none; }
.detail-link:hover { text-decoration:underline; }
#empty-parts { padding:36px 14px; font-size:13px; color:#333; text-align:center; line-height:1.8; }

/* ── SIDEBAR FOOTER ── */
#sidebar-footer { padding:10px 14px; border-top:1px solid #1e1e28; flex-shrink:0; display:flex; flex-direction:column; gap:7px; }
.foot-row { display:flex; gap:7px; }
.footer-btn { flex:1; background:none; border:1px solid #1e1e28; color:#555; font-family:inherit; font-size:11px; padding:7px 8px; cursor:pointer; border-radius:4px; text-align:center; transition:all .15s; }
.footer-btn:hover { border-color:#444; color:#ccc; }

/* ── MULTI-SELECT BAR ── */
#multi-bar { display:none; align-items:center; gap:8px; padding:8px 14px; background:#0d1520; border-top:1px solid #1a2a3a; flex-shrink:0; }
#multi-bar.visible { display:flex; }
#multi-bar span { font-size:11px; color:#4a9eff; flex:1; }
#multi-color { width:28px; height:28px; border:1px solid #2a4a6a; border-radius:3px; padding:2px; cursor:pointer; background:none; }
#multi-hex { width:72px; background:#111118; border:1px solid #1e1e28; color:#aaa; font-family:monospace; font-size:11px; padding:4px 6px; border-radius:3px; outline:none; }
#multi-apply { background:none; border:1px solid #4a9eff66; color:#4a9eff; font-family:inherit; font-size:11px; padding:5px 10px; cursor:pointer; border-radius:4px; }
#multi-apply:hover { border-color:#4a9eff; background:#4a9eff11; }
#multi-clear { background:none; border:1px solid #2a2a38; color:#555; font-family:inherit; font-size:11px; padding:5px 8px; cursor:pointer; border-radius:4px; }
#multi-clear:hover { color:#aaa; border-color:#555; }

/* ── TOAST ── */
#toast { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); background:#1e1e2e; border:1px solid #2a2a3a; color:#aaa; font-size:12px; padding:7px 16px; border-radius:20px; opacity:0; transition:opacity .3s; pointer-events:none; white-space:nowrap; }
#toast.show { opacity:1; }

/* ── HELP MODAL ── */
#help-text { font-size:13px; color:#aaa; text-align:center; max-width:600px; line-height:1.6; min-height:36px; }
#help-modal { display:none; position:fixed; inset:0; z-index:100; align-items:center; justify-content:center; }
#help-modal.active { display:flex; }
#help-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); }
#help-box { position:relative; background:#0d0d12; border:1px solid #2a2a3a; border-radius:8px; padding:20px; display:flex; flex-direction:column; gap:12px; max-width:90vw; max-height:90vh; z-index:1; align-items:center; }#help-close { position:absolute; top:10px; right:12px; background:none; border:none; color:#555; font-size:16px; cursor:pointer; }
#help-close:hover { color:#ccc; }
#help-img-wrap { min-width:400px; min-height:250px; display:flex; align-items:center; justify-content:center; }
#help-img { max-width:80vw; max-height:70vh; border-radius:4px; display:none; }
#help-no-img { font-size:13px; color:#444; text-align:center; line-height:1.8; }
#help-nav { display:flex; align-items:center; justify-content:center; gap:16px; }
#help-prev, #help-next { background:none; border:1px solid #2a2a38; color:#888; font-family:inherit; font-size:13px; padding:6px 14px; cursor:pointer; border-radius:4px; }
#help-prev:hover, #help-next:hover { color:#eee; border-color:#555; }
#help-counter { font-size:12px; color:#444; min-width:40px; text-align:center; }

#credit { font-size:10px; color:#5f5f5f; line-height:1.6; text-align:center; }
#credit a { color:#4a9eff88; text-decoration:none; }
#credit a:hover { color:#4a9eff; text-decoration:underline; }
#credit span { color:#acacac; }