/* UI components */
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.divider{height:1px;background:var(--line);margin:14px 0}.piece-list{display:flex;flex-direction:column;gap:6px}.piece-item{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#101722;cursor:pointer;font-weight:700}.piece-item.selected{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}.piece-item.locked{opacity:.65}.piece-item.hidden{opacity:.45}.tree-line{display:flex;align-items:center;gap:6px}.tree-icon{width:18px;text-align:center;color:var(--muted)}.group-item{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#101722;margin-bottom:6px}.small-btn{padding:5px 8px;font-size:12px}.badge{font-size:11px;color:var(--muted);font-weight:600}.section-title{font-weight:900;margin:10px 0 8px}.ok{color:var(--green)} pre{background:#070b11;border:1px solid var(--line);border-radius:8px;padding:10px;white-space:pre-wrap;max-height:260px;overflow:auto;font-size:12px}.mini{font-size:12px;color:var(--muted)} .param-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.full{grid-column:1/-1}.library-item{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#101722;margin-bottom:6px}.swatch{display:inline-block;width:18px;height:18px;border-radius:4px;border:1px solid var(--line);vertical-align:middle;margin-right:6px}.slot-row{display:grid;grid-template-columns:22px 1fr 42px;gap:6px;align-items:center;margin:6px 0}.slot-row input[type=color]{height:30px;padding:2px}.slot-name{font-size:12px;font-weight:800;color:var(--txt)}.slot-row.active{outline:1px solid var(--blue);border-radius:7px;background:#101722}.palette-label{font-size:12px;color:var(--muted);margin-top:4px}
  
    .palette-manager{border:1px solid var(--line);border-radius:10px;background:#101722;padding:10px;margin-top:8px}
    .palette-desc{font-size:12px;color:var(--muted);margin:8px 0 8px;line-height:1.35}
    .palette-strip{display:flex;gap:5px;margin:8px 0 10px;flex-wrap:wrap}
    .palette-chip{width:24px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.35);box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;cursor:pointer}
    .palette-card{display:grid;grid-template-columns:34px 1fr 36px;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;background:#0d141f;padding:8px;margin:7px 0}
    .palette-card.active{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
    .palette-card input[type=color]{height:30px;width:34px;padding:2px;border-radius:8px}
    .palette-slot-key{font-size:11px;text-transform:uppercase;font-weight:900;color:#ffb3b3;letter-spacing:.03em}
    .palette-slot-label{font-size:12px;color:var(--txt);font-weight:800}
    .palette-slot-desc{font-size:11px;color:var(--muted);margin-top:2px}
    .variant-item{border:1px solid var(--line);border-radius:8px;background:#101722;padding:8px 10px;margin:6px 0}.variant-item.active{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}.variant-title{font-weight:900}.variant-desc{font-size:12px;color:var(--muted);margin-top:3px}

.wide{width:100%;margin-top:8px}.top-gap{margin-top:8px}.panel-section{display:block}
:root[data-theme="light"] .piece-item,:root[data-theme="light"] .group-item,:root[data-theme="light"] .library-item,:root[data-theme="light"] .variant-item,:root[data-theme="light"] .palette-manager,:root[data-theme="light"] .palette-card{background:#fff8e9;color:var(--txt)}
:root[data-theme="light"] pre{background:#fff8e9;color:var(--txt)}
.menu-popup{position:fixed;z-index:50;min-width:220px;background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 32px rgba(0,0,0,.35);padding:8px;display:flex;flex-direction:column;gap:4px}
.menu-popup button{width:100%;text-align:left;justify-content:flex-start;background:transparent;color:var(--txt);border:1px solid transparent;box-shadow:none;padding:8px 10px}
.menu-popup button:hover{background:var(--btn);border-color:var(--line)}
.menu-separator{height:1px;background:var(--line);margin:4px 0}.toast-box{position:fixed;right:16px;bottom:44px;z-index:60;display:flex;flex-direction:column;gap:8px}.toast-item{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:0 8px 22px rgba(0,0,0,.3);font-weight:700;max-width:360px}

.autosave-recovery-prompt{
  position:fixed;
  left:50%;
  top:86px;
  transform:translateX(-50%);
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-width:min(720px, calc(100vw - 32px));
  max-width:920px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  color:var(--txt);
  box-shadow:0 16px 40px rgba(0,0,0,.42);
}
.autosave-recovery-copy{display:flex;flex-direction:column;gap:3px;line-height:1.25}
.autosave-recovery-copy strong{font-size:14px;font-weight:900}
.autosave-recovery-copy span{font-size:12px;color:var(--muted)}
.autosave-recovery-actions{display:flex;gap:8px;flex-shrink:0}
.autosave-recovery-actions .secondary{background:transparent;color:var(--txt)}
@media (max-width:720px){
  .autosave-recovery-prompt{align-items:stretch;flex-direction:column;top:76px}
  .autosave-recovery-actions{justify-content:flex-end}
}