/* ===== library: premade shades, my designs, editor strip =====
 * Uses the app's existing tokens (styles.css) and component classes; nothing here
 * restyles the editor. */

.lib[hidden], .lib [hidden], .lib-strip [hidden]{ display:none !important; }

/* ---- editor strip (above the presets) ---- */
.lib-strip{
  display:grid; grid-template-columns:34px minmax(0,1fr) 34px; gap:8px; align-items:center;
  margin-top:var(--space-3);
}
.lib-step{
  width:34px; height:34px; border-radius:var(--radius-sm); cursor:pointer;
  background:var(--card-bg); border:1px solid var(--field-border, #2a343c); color:var(--text);
  font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:transform 140ms var(--ease-out), border-color 140ms ease, color 140ms ease;
}
.lib-step:active{ transform:scale(0.93); }
@media (hover:hover) and (pointer:fine){ .lib-step:hover{ border-color:var(--accent); color:var(--accent); } }
.lib-strip-name{ min-width:0; text-align:center; line-height:1.25; }
.lib-strip-name b{ display:block; font-size:var(--text-md); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib-strip-sub{ display:block; font-size:var(--text-xs); color:var(--text-muted); }
.lib-modified{ color:#ffd27d; }
.lib-strip-actions{ grid-column:1 / -1; display:flex; gap:var(--space-2); }
.lib-strip-actions .btn{ flex:1; padding-left:8px; padding-right:8px; white-space:nowrap; }
/* icon buttons, the top bar Library link, the back link, random row, seed field, lock links */
.btn-icon{ display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; white-space:nowrap; }
.btn-icon .icon{ flex:0 0 auto; }
a.btn-icon.is-active{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.lib-backlink{
  grid-column:1 / -1; justify-self:start; background:none; border:none; cursor:pointer; padding:4px 2px;
  font-size:var(--text-xs); font-weight:600; color:var(--accent-strong); text-decoration:underline; text-underline-offset:2px;
}
.lib-backlink[hidden]{ display:none; }
.rnd-row .btn:first-child{ flex:1 1 0; }
.rnd-seed{
  flex:0 0 96px; min-width:0; width:96px; padding:6px 8px; text-align:center;
  background:var(--input-bg); border:1px solid var(--field-border, #2a343c); border-radius:var(--radius-md);
  color:var(--text); font-size:var(--text-sm); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-variant-numeric:tabular-nums;
  transition:border-color 140ms ease, box-shadow 140ms ease;
}
.rnd-seed::placeholder{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--text-muted); }
.rnd-seed:hover{ border-color:var(--accent); }
.rnd-seed:focus-visible{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(88,196,255,0.28); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.rnd-lock[aria-pressed="true"]{ color:var(--accent); text-decoration-color:var(--accent); font-weight:700; }
.rnd-status{ margin:var(--space-3) 0 0; font-size:var(--text-xs); color:var(--text-muted); line-height:1.5; word-break:break-all; }
.btn-danger{ background:var(--danger-bg); color:var(--danger); border:1px solid rgba(255,138,128,0.35); }
.btn-danger:hover{ border-color:var(--danger); }

/* ---- the view ---- */
.lib{
  position:fixed; inset:0; z-index:40;
  display:flex; flex-direction:column; min-height:0;
  background:var(--bg); color:var(--text);
  transform:translateX(32px); opacity:0;
  transition:transform 260ms var(--ease-out), opacity 200ms ease;
}
.lib.is-open{ transform:none; opacity:1; }
.lib-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:12px var(--space-5);
  background:linear-gradient(180deg, #0d1013 0%, var(--topbar-bg) 100%);
  border-bottom:1px solid var(--border);
}
.lib-title{ margin:0; font-size:var(--text-xl); letter-spacing:.01em; }
.lib-sub{ margin:2px 0 0; font-size:var(--text-sm); color:var(--text-muted); max-width:62ch; }

.lib-tools{
  flex:0 0 auto; display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:flex-end;
  padding:var(--space-3) var(--space-5) 0;
}
.lib-input{
  width:100%; background:var(--input-bg); border:1px solid var(--field-border, #2a343c);
  border-radius:var(--radius-md); padding:9px 12px; font-size:var(--text-md); color:var(--text);
  transition:border-color 140ms ease, box-shadow 140ms ease;
}
.lib-input:hover{ border-color:var(--accent); }
.lib-input:focus-visible{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(88,196,255,0.28); }
.lib-search{ flex:1 1 220px; max-width:360px; }
.lib-selects{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.lib-select{ display:block; min-width:150px; }
.lib-select-label{ display:block; font-size:var(--text-xs); color:var(--text-muted); margin-bottom:2px; }
.lib-select select{ margin-top:0; padding-top:9px; padding-bottom:9px; }

.lib-chips{
  flex:0 0 auto; display:flex; gap:6px; overflow-x:auto; scrollbar-width:thin;
  padding:var(--space-3) var(--space-5) var(--space-2);
}
.lib-chip{
  flex:0 0 auto; padding:6px 13px; border-radius:var(--radius-pill); cursor:pointer;
  background:var(--card-bg); border:1px solid var(--border); color:var(--text-muted);
  font-size:var(--text-sm); font-weight:600; white-space:nowrap;
  transition:background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms var(--ease-out);
}
.lib-chip:active{ transform:scale(0.96); }
.lib-chip[aria-pressed="true"]{ background:var(--accent); color:var(--accent-contrast); border-color:transparent; }
.lib-chip .n{ margin-left:4px; opacity:.75; font-variant-numeric:tabular-nums; }
@media (hover:hover) and (pointer:fine){
  .lib-chip[aria-pressed="false"]:hover{ color:var(--text); border-color:var(--border-strong); }
}

.lib-body{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 380px; }
.lib-main{ min-width:0; min-height:0; overflow-y:auto; padding:0 var(--space-5) var(--space-6); scrollbar-width:thin; scrollbar-color:#2a343c transparent; }
.lib-count{ margin:var(--space-2) 0 var(--space-3); font-size:var(--text-xs); color:var(--text-muted); }
.lib-mine-tools{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-3); }

.lib-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(176px, 1fr)); gap:var(--space-3);
}
.lib-card{
  display:flex; flex-direction:column; min-width:0;
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg);
  transition:border-color 140ms ease, box-shadow 140ms ease;
}
.lib-card.is-active{ border-color:rgba(88,196,255,0.55); box-shadow:0 6px 18px -8px rgba(88,196,255,0.55); }
.lib-card-main{
  display:flex; flex-direction:column; align-items:stretch; gap:4px; text-align:left;
  background:none; border:none; padding:8px 8px 4px; color:inherit; cursor:pointer; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  transition:transform 140ms var(--ease-out);
}
.lib-card-main:active{ transform:scale(0.985); }
.lib-thumb{
  position:relative; display:block; aspect-ratio:1; border-radius:var(--radius-md); overflow:hidden;
  background:#000; border:1px solid var(--hairline, rgba(255,255,255,0.06));
}
.lib-thumb::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, #0b0f12 30%, #151c22 50%, #0b0f12 70%); background-size:220% 100%;
  animation:lib-shimmer 1.3s linear infinite;
}
.lib-thumb.ready::before{ display:none; }
.lib-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 220ms ease; }
.lib-thumb.ready img{ opacity:1; }
@keyframes lib-shimmer{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
.lib-card-name{ font-size:var(--text-md); font-weight:700; margin-top:4px; }
.lib-card-desc{ font-size:var(--text-xs); color:var(--text-muted); line-height:1.4; min-height:2.8em; }
.lib-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.lib-tag{ font-size:10.5px; padding:2px 7px; border-radius:var(--radius-pill); background:var(--track-bg); color:var(--text-muted); }
.lib-tag.cat{ background:var(--accent-soft); color:var(--accent-strong); }
.lib-meta{ font-size:var(--text-xs); color:#dbe6ee; font-variant-numeric:tabular-nums; }
.lib-badge{
  align-self:flex-start; font-size:10.5px; font-weight:600; line-height:1.3; padding:3px 8px; border-radius:var(--radius-pill);
  background:var(--track-bg); color:var(--text-muted);
}
.lib-badge.ok{ background:rgba(110,231,168,0.14); color:#9af0c3; border:1px solid rgba(110,231,168,0.3); }
.lib-badge.warn{ background:rgba(255,210,125,0.12); color:#ffe3a6; border:1px solid rgba(255,210,125,0.3); }
.lib-badge.pending{ width:150px; height:20px; background:linear-gradient(100deg, #12181d 30%, #1b242b 50%, #12181d 70%); background-size:220% 100%; animation:lib-shimmer 1.3s linear infinite; }
.lib-card-actions{ display:flex; gap:4px; padding:4px 8px 8px; margin-top:auto; }
.lib-act{
  flex:1; min-height:30px; padding:5px 4px; border-radius:var(--radius-sm); cursor:pointer;
  background:transparent; border:1px solid var(--field-border, #2a343c); color:var(--text-muted);
  font-size:var(--text-xs); font-weight:600;
  transition:border-color 140ms ease, color 140ms ease, transform 140ms var(--ease-out);
}
.lib-act:active{ transform:scale(0.96); }
@media (hover:hover) and (pointer:fine){ .lib-act:hover{ border-color:var(--accent); color:var(--accent); } }

.lib-empty{ max-width:46ch; margin:var(--space-6) auto; text-align:center; }
.lib-empty h3{ margin:0 0 var(--space-2); font-size:var(--text-lg); }
.lib-empty p{ margin:0 0 var(--space-3); font-size:var(--text-sm); color:var(--text-muted); line-height:1.5; }
.lib-empty .btn{ width:auto; display:inline-block; margin-top:0; }

/* ---- preview + details pane ---- */
.lib-side{
  min-height:0; overflow-y:auto; border-left:1px solid var(--border); background:var(--panel-bg);
  padding:var(--space-4) var(--space-5) var(--space-6); scrollbar-width:thin; scrollbar-color:#2a343c transparent;
}
.lib-side-empty{ margin:var(--space-6) 0; color:var(--text-muted); font-size:var(--text-sm); text-align:center; }
.lib-sheet-close{ display:none; }
.lib-preview{
  position:relative; width:100%; aspect-ratio:1; border-radius:var(--radius-lg); overflow:hidden;
  background:#000; border:1px solid var(--border);
}
.lib-preview canvas{ display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.lib-side-name{ margin:var(--space-4) 0 4px; font-size:var(--text-xl); }
.lib-side-desc{ margin:0 0 var(--space-3); font-size:var(--text-sm); color:var(--text-muted); line-height:1.5; }
#libSideBadge{ margin-top:var(--space-3); display:inline-block; }
.lib-stats{
  display:grid; grid-template-columns:auto 1fr; gap:5px 14px; margin:var(--space-3) 0 0; padding:10px 12px;
  font-size:var(--text-sm); background:var(--card-bg); border:1px solid var(--hairline, rgba(255,255,255,0.06)); border-radius:var(--radius-md);
}
.lib-stats dt{ color:var(--text-muted); }
.lib-stats dd{ margin:0; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.lib-side-h{ margin:var(--space-4) 0 var(--space-2); font-size:var(--text-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.lib-checks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.lib-checks li{
  display:flex; gap:9px; align-items:flex-start; padding:7px 10px;
  font-size:var(--text-xs); line-height:1.45; color:#dbe6ee;
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.lib-checks .mark{
  flex:0 0 auto; width:16px; height:16px; border-radius:50%; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#04141c; background:#6ee7a8;
}
.lib-checks li.bad{ border-color:rgba(255,138,128,0.35); }
.lib-checks li.bad .mark{ background:var(--danger); }
.lib-side-actions{ margin-top:var(--space-4); }
.lib-side-actions .btn{ width:100%; margin-top:var(--space-2); }
.lib-side-actions .btn:first-child{ margin-top:0; }
.lib-side-mine{ display:flex; gap:var(--space-2); margin-top:var(--space-3); }

/* ---- dialogs and toast ---- */
.lib-modal{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:var(--space-4);
  background:rgba(2,4,5,0.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  animation:lib-fade 160ms ease both;
}
.lib-dialog{
  width:100%; max-width:420px; padding:var(--space-5); background:var(--panel-bg);
  border:1px solid var(--border-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  animation:lib-pop 200ms var(--ease-out) both;
}
.lib-dialog-title{ margin:0 0 var(--space-2); font-size:var(--text-lg); }
.lib-dialog-text{ margin:0 0 var(--space-3); font-size:var(--text-sm); color:var(--text-muted); line-height:1.5; }
.lib-dialog-label{ display:block; margin-bottom:4px; font-size:var(--text-sm); }
.lib-dialog-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--space-2); margin-top:var(--space-4); }
@keyframes lib-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes lib-pop{ from{ opacity:0; transform:translateY(8px) scale(0.97); } to{ opacity:1; transform:none; } }

.lib-toast{
  position:fixed; left:50%; bottom:20px; z-index:120; max-width:min(92vw, 460px);
  padding:10px 14px; border-radius:var(--radius-md); font-size:var(--text-sm); line-height:1.4;
  background:var(--accent-soft); color:var(--accent-strong); border:1px solid rgba(88,196,255,0.3); box-shadow:var(--shadow);
  opacity:0; transform:translate(-50%, 8px); pointer-events:none;
  transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.lib-toast.show{ opacity:1; transform:translate(-50%, 0); }
.lib-toast.error{ background:var(--danger-bg); color:var(--danger); border-color:rgba(255,138,128,0.35); }

.lib-pulse{ animation:lib-pulse 1.1s ease-out 2; }
@keyframes lib-pulse{ 0%{ box-shadow:0 0 0 0 rgba(88,196,255,0.7); } 100%{ box-shadow:0 0 0 14px rgba(88,196,255,0); } }

/* ---- size check: stats pill and the Build volume section ---- */
.size-pill .size-state{ opacity:.8; }
.size-pill .size-state::before{ content:"· "; }
.size-pill[data-state="warn"]{ border-color:rgba(255,210,125,0.55); }
.size-pill[data-state="warn"] b, .size-pill[data-state="warn"] .size-state{ color:#ffe3a6; opacity:1; }
.size-pill[data-state="bad"]{ border-color:rgba(255,138,128,0.7); background:rgba(42,21,18,0.8); }
.size-pill[data-state="bad"] b, .size-pill[data-state="bad"] .size-state{ color:#ffb4ac; opacity:1; }
.size-readout{ margin:var(--space-3) 0 0; padding:8px 10px; font-size:var(--text-xs); line-height:1.45; color:var(--text-muted); background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm); }
.size-readout[data-state="warn"]{ color:#ffe3a6; border-color:rgba(255,210,125,0.35); }
.size-readout[data-state="bad"]{ color:var(--danger); background:var(--danger-bg); border-color:rgba(255,138,128,0.35); }
.toast.info{ background:var(--accent-soft); color:var(--accent-strong); border:1px solid rgba(88,196,255,0.25); }

/* the hidden renderer that makes the thumbnails */
.lib-offscreen{ position:fixed; left:-10000px; top:0; width:288px; height:288px; pointer-events:none; }

/* ---- narrow screens: the preview becomes a sheet that opens on tap ---- */
@media (max-width: 959px){
  .lib-body{ grid-template-columns:minmax(0,1fr); }
  .lib-side{
    position:fixed; left:0; right:0; bottom:0; z-index:45; max-height:86vh;
    border-left:none; border-top:1px solid var(--border-strong); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow:0 -16px 40px rgba(0,0,0,0.6);
    transform:translateY(105%); transition:transform 260ms var(--ease-out);
  }
  .lib-side.sheet-open{ transform:none; }
  .lib-sheet-close{ display:inline-block; margin-bottom:var(--space-3); }
  .lib-preview{ max-width:360px; margin:0 auto; }
}
@media (max-width: 480px){
  .lib-head, .lib-tools, .lib-chips{ padding-left:14px; padding-right:14px; }
  .lib-main{ padding-left:14px; padding-right:14px; }
  .lib-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-2); }
  .lib-sub{ display:none; }
  .lib-selects, .lib-select, .lib-search{ width:100%; max-width:none; }
  .lib-select{ flex:1; min-width:0; }
}
@media (prefers-reduced-motion: reduce){
  .lib{ transform:none; }
  .lib-thumb::before, .lib-badge.pending{ animation:none; }
  .lib-pulse{ animation:none; outline:2px solid var(--accent); outline-offset:3px; }
}