:root{
  --card-w: 360px;
  --card-h: 560px;
  --radius: 18px;

  --ring: rgba(255,255,255,.10);
  --glass: rgba(255,255,255,.14);
  --glass-weak: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.18);

  --sunpillar-clr-1: hsl(210, 90%, 60%);
  --sunpillar-clr-2: hsl(270, 85%, 66%);
  --sunpillar-clr-3: hsl(320, 85%, 66%);
  --sunpillar-clr-4: hsl(40, 90%, 60%);
  --sunpillar-clr-5: hsl(120, 70%, 58%);
  --sunpillar-clr-6: hsl(190, 80%, 62%);

  --pointer-x: 50%;
  --pointer-y: 50%;
  --background-x: 50%;
  --background-y: 50%;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; overflow-x:hidden; 
  background:
    radial-gradient(60% 60% at 20% 15%, #15161d 0%, #0e1016 45%, #080b11 100%),
    #000;
  color:#fff;
  font: 14px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky; top:0; background:rgba(10,12,16,.75);
  backdrop-filter: blur(8px); z-index:10;
}
.topbar .left h1{ font-size:16px; margin:0 0 2px }

.btn{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  padding:8px 12px; border-radius:12px; color:#fff; cursor:pointer;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.2);
  transform: translateY(-1px);
}
.file-btn{ display:flex; align-items:center; gap:8px; cursor:pointer }

.importer{ position:relative }
.importer[open] summary{ border-bottom-left-radius:0; border-bottom-right-radius:0 }
.importer summary{ list-style:none }
.importer summary::-webkit-details-marker{ display:none }
.import-grid{
  position:absolute; right:0; margin-top:8px; display:grid; grid-template-columns: 1fr 1fr; gap:8px;
  background:rgba(15,17,23,.96); padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}

.layout{
  display:grid;
  grid-template-columns:
    clamp(100px, 8vw, 130px)
    clamp(100px, 10vw, 140px)
    minmax(480px, 1fr)
    clamp(260px, 24vw);
  grid-template-areas: "left drops stage right";
  gap:18px;
  padding:22px;
  align-items:start;
  max-width:100vw;
}

.thumbs-rail, .drops-rail, .stage, .sidebar{
  min-width:0; 
}

.thumbs-rail, .drops-rail, .sidebar{
  position: sticky; top: 72px;
  max-height: calc(100vh - 96px);
  overflow: auto;
}

.left-rail{ 
  grid-area:left; 
  display:flex; flex-direction:column; gap:16px;
  position:sticky; top:72px;
  max-height: calc(100vh - 96px);
  overflow:auto;
}

.drops-rail{ 
  grid-area:drops; 
  position:sticky; top:72px;
  max-height: calc(100vh - 96px);
  overflow:auto;
}
.thumbs-handle{
  display:block;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:8px 10px; border-radius:10px; color:#fff; cursor:pointer;
}
.left-rail-content{
  border:1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(10,12,16,.9);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px;
  height: calc(100vh - 96px);
  overflow: hidden;
}
.left-rail-content.closed{ display:none; }

.filter-buttons{
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.filter-btn{
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.filter-btn:hover{
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
}
.filter-btn.active{
  background: linear-gradient(180deg, rgba(78,161,255,.25), rgba(78,161,255,.15));
  border-color: rgba(78,161,255,.5);
  color: #fff;
  box-shadow: 0 2px 8px rgba(78,161,255,.2);
}

.rarity-btn {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rarity-btn:hover {
  background: rgba(255,255,255,.15);
}

.rarity-btn.active {
  background: linear-gradient(180deg, rgba(78,161,255,.25), rgba(78,161,255,.15));
  border-color: rgba(78,161,255,.5);
  color: #fff;
  box-shadow: 0 2px 8px rgba(78,161,255,.2);
}

.preset-btn {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 80px;
}

.preset-btn:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.30);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.preset-btn:active {
  transform: translateY(0);
}

.preset-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
}

.preset-desc {
  font-size: 11px;
  opacity: 0.8;
  line-height: 1.2;
}

/* Inline styles migrated from HTML */
.rarity-buttons{ display:flex; gap:4px; margin-top:8px; flex-wrap:wrap; }
.preset-buttons{ display:flex; flex-direction:row; gap:6px; flex-wrap:wrap; }
.visibility-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; margin-bottom:16px; }
.label-inline{ display:flex; align-items:center; gap:8px; font-size:12px; cursor:pointer; }
.show-toggle{ cursor:pointer; }
.input-compact{ flex:1; padding:8px; border-radius:8px; border:1px solid rgba(255,255,255,.20); background:rgba(255,255,255,.08); color:#fff; font-size:12px; }
.row-gap8{ display:flex; gap:8px; margin-top:8px; }
.favorites-list{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; max-height:300px; overflow-y:auto; }
.flex-1{ flex:1; }
.ctrl-line{ display:flex; align-items:center; gap:8px; flex:1; }
.range-value{ min-width:40px; text-align:right; font-size:11px; font-family:monospace; }
.panel .row.space-between{ justify-content:space-between; }
#infoConfig th:last-child{ width:1%; }
.btn-row{ margin-top:8px; display:flex; gap:8px; }
.inline-label{ display:flex; align-items:center; gap:6px; font-size:12px; }
.gen-sentinel{ height:1px; }

/* Generator modal */
.gen-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1000; }
.gen-modal[aria-hidden="false"]{ display:flex; }
.gen-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.gen-panel{ position:relative; width:min(1200px, 96vw); height:min(90vh, 900px); background:#0f1117; border:1px solid rgba(255,255,255,.18); border-radius:12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); display:flex; flex-direction:column; overflow:hidden; }
.gen-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.12); background:rgba(15,17,23,.85); }
.gen-actions{ display:flex; align-items:center; gap:8px; }
.gen-status{ font-size:12px; opacity:.8; min-width:64px; text-align:right; }
.gen-content{ flex:1; overflow:auto; }
.gen-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; padding:10px; }
.gen-grid .card{ transform: scale(.72); transform-origin: top left; width: calc(var(--card-w) * .72); height: calc(var(--card-h) * .72); margin: 0 auto; }
.gen-grid .card .glare{ display:block; }
.gen-item{ position: relative; }
.gen-fav-btn{
  position:absolute; top:8px; right:8px; z-index:5;
  padding:4px 6px; border-radius:999px; border:1px solid rgba(255,255,255,.20);
  background: rgba(15,17,23,.75); color:#fff; cursor:pointer; font-size:12px; line-height:1;
  backdrop-filter: blur(4px);
}
.gen-fav-btn:hover{ background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.30); color:#fff; }
.gen-fav-btn.is-active{
  background: rgba(255,59,48,.20);
  border-color: rgba(255,59,48,.45);
  color:#ff3b30;
}
.gen-grid .card .wm-img{ opacity:0; }
.gen-grid .card:hover .wm-img{ opacity:1; }

.toggle-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toggle-input {
  display: none;
}

.toggle-label {
  position: relative;
  display: flex;
  align-items: center;
  width: 80px;
  height: 24px;
  background: rgba(255,255,255,.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,.2);
}

.toggle-label::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.toggle-input:checked + .toggle-label::before {
  transform: translateX(56px);
}

.toggle-input:checked + .toggle-label {
  background: rgba(78,161,255,.3);
  border-color: rgba(78,161,255,.5);
}

.toggle-text {
  position: absolute;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  transition: all 0.3s ease;
}

.toggle-text:first-child {
  left: 8px;
}

.toggle-text:last-child {
  right: 8px;
}

.toggle-input:checked + .toggle-label .toggle-text:first-child {
  color: rgba(255,255,255,.4);
}

.toggle-input:checked + .toggle-label .toggle-text:last-child {
  color: #fff;
}

.thumbs-container{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  display: grid; 
  grid-template-columns: repeat(auto-fill, 32px); 
  gap: 3px;
  align-content: start;
  padding: 4px;
}
.thumbs-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.thumbs{
  display:grid; 
  grid-template-columns: repeat(auto-fill, 32px); 
  gap:3px;
  justify-content: start;
  max-width: 100%;
}
.thumb{
  width: 32px; 
  height: 32px;
  object-fit:cover; 
  border-radius:5px;
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer; 
  opacity:.95;
  transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1), border-color .15s ease, opacity .15s ease, box-shadow .15s ease;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  contain: layout style paint;
  will-change: transform, opacity;
  transform: translateZ(0);
}
.thumb.hidden{
  display: none;
}
.thumb:hover{ 
  transform: scale(1.08) translateY(-1px); 
  opacity:1; 
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  border-color: rgba(255,255,255,.25);
}
.thumb.selected{ box-shadow: 0 0 0 2px rgba(255,255,255,.6) inset; }
.thumb-empty{
  display:grid; place-items:center; font-size:7px; color:rgba(255,255,255,.7);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 4px, rgba(255,255,255,.04) 4px 8px);
  border:1px dashed rgba(255,255,255,.45);
}
.thumb.used-bg{ outline:1px dashed #ff5a5a; outline-offset:1px; box-shadow:0 0 0 1px rgba(255,90,90,.35) inset; }
.thumb.used-face{ outline:1px dashed #4ea1ff; outline-offset:1px; box-shadow:0 0 0 1px rgba(78,161,255,.35) inset; }
.thumb.used-wm{ outline:1px dashed #38d57a; outline-offset:1px; box-shadow:0 0 0 1px rgba(56,213,122,.35) inset; }
.thumb.used-frame{ outline:1px dashed #ffb347; outline-offset:1px; box-shadow:0 0 0 1px rgba(255,179,71,.35) inset; }
.thumbs.dropping{
  outline: 2px dashed rgba(255,255,255,.45);
  outline-offset: 4px;
  background: rgba(255,255,255,.06);
}

/* Favorites list */
.favorite-item{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); min-width:0; }
.favorite-num{ font-size:11px; font-weight:600; color:#fff; min-width:20px; }
.favorite-title{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:#fff; opacity:.9; }
.load-favorite{ padding:4px; background:rgba(78,161,255,.2); border:1px solid rgba(78,161,255,.4); color:#4ea1ff; border-radius:4px; cursor:pointer; font-size:12px; }
.delete-favorite{ padding:4px; background:rgba(255,90,90,.2); border:1px solid rgba(255,90,90,.4); color:#ff5a5a; border-radius:4px; cursor:pointer; font-size:12px; }

.drop-panel{ max-width: 100%; }
.drop-panel h2{ font-size:12px; text-align:center; margin:0 0 8px; }
.drop-zones{ display:flex; flex-direction:column; gap:8px; }
.drop-zone{
  border:1px dashed rgba(255,255,255,.45);
  border-radius:10px; padding:10px; text-align:center; opacity:.95; font-size:11px;
  background: rgba(255,255,255,.04);
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drop-zone-label {
  flex: 1;
  text-align: center;
  padding-left: 32px;
}

.drop-zone-clear {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 2px 4px;
  border-radius: 3px;
  margin-left: 8px;
}

.drop-zone-clear:hover {
  color: #ff6b6b;
  background: rgba(255,107,107,.1);
}
.drop-zone:hover{ background: rgba(255,255,255,.06); }
.drop-zone.dropping{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.75); }
.drop-target.dropping{
  box-shadow: 0 0 0 3px rgba(255,255,255,.35) inset, 0 0 0 2px rgba(255,255,255,.25);
  filter: brightness(1.08) saturate(1.04);
}
.drop-zone.has-bg{ border-color:#ff5a5a; box-shadow:0 0 0 1px rgba(255,90,90,.35) inset; }
.drop-zone.has-face{ border-color:#4ea1ff; box-shadow:0 0 0 1px rgba(78,161,255,.35) inset; }
.drop-zone.has-wm{ border-color:#38d57a; box-shadow:0 0 0 1px rgba(56,213,122,.35) inset; }
.drop-zone.has-wm2{ border-color:#2dd4bf; box-shadow:0 0 0 1px rgba(45,212,191,.35) inset; }
.drop-zone.has-frame{ border-color:#ffb347; box-shadow:0 0 0 1px rgba(255,179,71,.35) inset; }

.drop-zone{ position:relative; }
.drop-zone-rand{
  position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; display:grid; place-items:center;
  background:rgba(78,161,255,.12); border:1px solid rgba(78,161,255,.3); 
  color:#4ea1ff; border-radius:6px; cursor:pointer;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size:14px; font-weight:700;
  opacity:.9;
  z-index: 10;
  pointer-events: auto;
}
.drop-zone-rand:hover{
  background:rgba(78,161,255,.25);
  border-color:rgba(78,161,255,.5);
  box-shadow: 0 0 12px rgba(78,161,255,.3);
  opacity:1;
  transform:translateY(-50%) scale(1.1);
}
.drop-zone-rand:active{
  transform:translateY(-50%) scale(0.95);
}
.drop-zone-rand.spin{ 
  animation: spinArrow 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes spinArrow {
  0% { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) rotate(360deg); }
}

.stage{
  grid-area:stage;
  display:flex; align-items:center; justify-content:center;
  min-height: calc(100vh - 180px);
  padding: 0 8px;
}
.card{
  isolation:isolate;
  position:relative; width:var(--card-w); height:var(--card-h);
  border-radius:var(--radius); overflow:hidden; background:#0f1117;
  will-change: transform;
  transition: transform .08s ease-out, box-shadow .2s ease;
  contain: layout style paint;
  transform: translateZ(0);
  transform-style:preserve-3d;
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px var(--ring);
  transition: transform .12s ease-out;
  will-change: transform;
  margin:0 auto;
}
.bg-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; filter: brightness(1.06) saturate(1.04) contrast(0.98);
}
.card-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:1; filter: brightness(1.04) saturate(1.03) contrast(0.99);
  transform: scale(2.1) translate(0px, -50px);
}
.wm-img{
  position:absolute; inset:-4%;
  z-index:2; width:108%; height:108%; object-fit:cover;
  pointer-events:none; opacity:0; mix-blend-mode: screen;
  will-change: opacity, transform;
  transition: opacity .2s ease-out;
  filter: brightness(1.81) saturate(1.06) contrast(0.98);
  transform: translate3d(0px, 185px, 0) scale(1);
  transition: opacity .12s ease-out, transform .1s ease-out;
}

.wm2-img{ z-index:3; }
.card:hover .wm-img{
  opacity: 1;
}
.glare{
  position:absolute; inset:-20%; pointer-events:none; mix-blend-mode: screen;
  filter: blur(22px); opacity:.0; transition: opacity .15s ease-out;
}
.frame-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  pointer-events:none; z-index:4;
}

.liquid-frame{
  position:absolute; inset:14px; border-radius:calc(var(--radius) - 6px);
  pointer-events:none; z-index:4;
}
.avatar-panel{
  position:absolute; top:14px; left:14px;
  width:80px; height:80px; border-radius:999px; overflow:hidden;
  backdrop-filter: blur(8px) saturate(1.05);
  background: linear-gradient(180deg, var(--glass), rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 20px rgba(0,0,0,.35);
  z-index:2;
}
.avatar-panel img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.95; }
.avatar-ring{
  position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  --b:2px;
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,.0),
      rgba(255,255,255,.75),
      rgba(255,255,255,.10),
      rgba(255,255,255,.0) 70%,
      rgba(255,255,255,.7) 100%) 0 0/200% 200% no-repeat;
  animation: ring-scan 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: var(--b);
}
@keyframes ring-scan { to { background-position:200% 200%; } }

.info-panel{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  width: calc(100% - 80px); padding: 8px; border-radius: 12px;
  background: linear-gradient(180deg, var(--glass), rgba(255,255,255,.05));
  border:1px solid var(--stroke);
  backdrop-filter: blur(8px) saturate(1.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 28px rgba(0,0,0,.3);
}
.info-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; }
.info-grid.dynamic-2{ grid-template-columns: repeat(2, 1fr); }
.info-grid.dynamic-1{ grid-template-columns: 1fr; }
.info-cell{
  border-radius: 8px; background: var(--glass-weak); border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:space-between;
  padding: 6px 8px; font-size: 10px; min-width:0; min-height:28px;
}
.info-cell .k{ font-size: 6px; letter-spacing:.05em; text-transform:uppercase; opacity:.85; }
.info-cell .v{ font-weight:600; font-size: 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.sidebar{
  grid-area:right;
  display:flex; flex-direction:column; gap:16px;
}

/* Sidebar resizer removed */

/* Resizer handles */
/* resizer handles removed */
.cta-random{
  display:block; width:100%;
  padding:10px 14px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(78,161,255,.5);
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(180deg, rgba(78,161,255,.20), rgba(78,161,255,.10));
  color:#fff; font-weight:700; letter-spacing:.02em;
  box-shadow: 0 8px 24px rgba(78,161,255,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
.cta-random:hover{ 
  filter: brightness(1.05); 
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(78,161,255,.24), inset 0 1px 0 rgba(255,255,255,.25);
}
.cta-random:active{ 
  transform: translateY(0);
}
.cta-random:hover .random-icon{ animation: spin 0.6s ease-in-out; }
.random-icon{ 
  display: inline-block; 
  font-size: 18px; 
  transition: transform 0.2s ease;
}
@keyframes spin { 
  from { transform: rotate(0deg); } 
  to { transform: rotate(360deg); } 
}
.btn-accent{
  border-color: rgba(78,161,255,.6) !important;
  background: linear-gradient(180deg, rgba(78,161,255,.20), rgba(78,161,255,.10)) !important;
  box-shadow: 0 4px 14px rgba(78,161,255,.15), inset 0 1px 0 rgba(255,255,255,.18);
}

.panel{
  padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:12px;
  background:rgba(255,255,255,.04); backdrop-filter: blur(6px);
}
.panel h2{ font-size:13px; margin:0 0 8px; }

.panel h3{ font-size:12px; margin:0 0 8px; opacity:.9 }
.panel .row{ display:flex; align-items:center; gap:10px; margin:8px 0; }
.panel .row label{ width:110px; font-size:12px; opacity:.9 }
.panel .row input[type="range"], .panel .row select{
  flex:1; padding:6px 8px; border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08); color:#fff;
}
.panel .row input[type="range"]{ height:28px }
.panel .row:last-child{ margin-top:12px }

#personalize .panel:first-of-type{ margin-bottom:16px; }

.controls{
  display:flex; flex-direction:column; gap:8px; margin-top:8px;
  padding-top:8px; border-top:1px solid rgba(255,255,255,.08);
}
.control-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px;
}
.control-row select, .control-row input[type="range"]{
  padding:6px 8px; border:1px solid rgba(255,255,255,.20); border-radius:8px;
  background:rgba(255,255,255,.08); color:#fff; font-size:12px;
}
.control-row input[type="range"]{ width:80px; }

.visibility-inline{ margin-bottom:12px; }
.vis-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:6px;
}
.switch{
  display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04);
}

.composer-table{ width:100%; border-collapse:collapse; font-size:12px; }
.composer-table th, .composer-table td{ border:1px solid rgba(255,255,255,.12); padding:6px; text-align:left; }
.composer-table th{ background:rgba(255,255,255,.06); font-weight:600; }
.composer-table select{ width:100%; padding:6px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.20); background:rgba(255,255,255,.08); color:#fff; }
.composer-table .apply{ padding:6px 10px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; border-radius:8px; cursor:pointer }
.composer-table .apply:hover{ background:rgba(255,255,255,.12); }
.composer-table .row-rand.big{ font-size:18px; padding:4px 8px; }
.composer-table .row-rand:hover .random-icon{ animation: spin 0.4s ease-in-out; }
.composer-table .show-toggle{ 
  width:16px; height:16px; cursor:pointer; 
  accent-color: #4ea1ff;
}

.hidden{ display:none !important; }
.is-empty{ display:none !important; }
@media (prefers-reduced-motion: reduce){
  .card, .wm-img, .glare { transition:none; }
  .avatar-ring{ animation:none; }
}

@media (max-width: 1400px){
  .layout{
    grid-template-columns:
      clamp(100px, 14vw, 160px)   
      minmax(520px, 1fr)          
      clamp(240px, 28vw, 300px);  
    grid-template-areas:
      "left stage right"
      "drops  stage right";
  }
  .left-rail, .drops-rail, .stage, .sidebar{ min-width:0; }
}

@media (max-width: 1200px){
  .layout{
    grid-template-columns:
      clamp(100px, 16vw, 150px)
      1fr
      clamp(220px, 32vw, 280px);
  }
  .thumbs{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px){
  .layout{
    grid-template-columns: 1fr;
    /* Put the card (stage) first on mobile */
    grid-template-areas:
      "stage"
      "left"
      "drops"
      "right";
  }
  .left-rail, .drops-rail, .sidebar{
    position: static; max-height: none; overflow: visible;
  }
  .thumbs-handle{ display:block; }
  .left-rail-content.closed{ display:none; }
  .stage{ min-height: 0; }
  .thumbs{ grid-template-columns: repeat(5, 1fr); }
}

/* Mobile sizing: keep the card fully visible */
@media (max-width: 600px){
  :root{
    /* Scale card to viewport width while preserving aspect ratio */
    --card-w: min(92vw, 360px);
    --card-h: calc(min(92vw, 360px) * 1.556);
  }
  .layout{ padding: 14px; gap: 12px; }
}


.wm-holo{
  position:absolute; inset:-4%;
  width:108%; height:108%;
  z-index:3;
  pointer-events:none;
  opacity:0;
  transform: translate3d(0,0,0) scale(1.02);
  transition: opacity .15s ease-out, transform .1s ease-out;
}
.wm-holo.active{ opacity:1; }

.wm-holo__shine{
  position:absolute; inset:0;
  -webkit-mask-image: var(--icon); mask-image: var(--icon);
  -webkit-mask-mode: luminance;    mask-mode: luminance;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-size: contain;      mask-size: contain;
  -webkit-mask-position: center;   mask-position: center;

  --space:5%;
  --angle:-45deg;
  background:
    repeating-linear-gradient(
      0deg,
      var(--sunpillar-clr-1) calc(var(--space)*1),
      var(--sunpillar-clr-2) calc(var(--space)*2),
      var(--sunpillar-clr-3) calc(var(--space)*3),
      var(--sunpillar-clr-4) calc(var(--space)*4),
      var(--sunpillar-clr-5) calc(var(--space)*5),
      var(--sunpillar-clr-6) calc(var(--space)*6),
      var(--sunpillar-clr-1) calc(var(--space)*7)
    ),
    repeating-linear-gradient(
      var(--angle),
      #0e152e 0%,
      hsl(180, 10%, 60%) 3.8%,
      hsl(180, 29%, 66%) 4.5%,
      hsl(180, 10%, 60%) 5.2%,
      #0e152e 10%,
      #0e152e 12%
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0,0%,0%,.10) 12%,
      hsla(0,0%,0%,.15) 20%,
      hsla(0,0%,0%,.25) 120%
    );
  background-position:
    0 var(--background-y),
    var(--background-x) var(--background-y),
    center;
  background-size:
    500% 500%,
    300% 300%,
    200% 200%;
  background-blend-mode: color, hard-light;
  mix-blend-mode: color-dodge;
  filter: brightness(0.66) contrast(1.33) saturate(0.33) opacity(0.5);
}

.wm-holo__glare{
  position:absolute; inset:0;
  -webkit-mask-image: var(--icon); mask-image: var(--icon);
  -webkit-mask-mode: luminance;    mask-mode: luminance;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-size: contain;      mask-size: contain;
  -webkit-mask-position: center;   mask-position: center;

  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(248, 25%, 80%) 12%,
    hsla(207, 40%, 30%, 0.8) 90%
  );
  mix-blend-mode: overlay;
  filter: brightness(0.8) contrast(1.2);
}

@keyframes wm-holo-move {
  0%   { background-position: 0 var(--background-y),   0   0,    center; }
  100% { background-position: 0 var(--background-y),  90% 90%,   center; }
}

.wm-holo__shine{
  animation: wm-holo-move 18s linear infinite;
}

.card:hover .wm-holo__shine,
.card:active .wm-holo__shine{
  animation: none;
}

.wm-holo__shine::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(
      45deg,
      hsl(176,100%,76%),
      hsl(228,100%,74%),
      hsl(283,100%,73%),
      hsl(2,100%,73%),
      hsl(53,100%,69%),
      hsl(93,100%,69%)
    ),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y),
      hsl(0 0% 70%) 0%,
      hsl(0 0% 30% / .2) 90%
    );
  background-size: 250% 250%, 100% 100%;
  background-position: var(--pointer-x) var(--pointer-y), center;
  mix-blend-mode: color-dodge;
  opacity:.9;
  pointer-events:none;
}

.batch-controls {
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}

.batch-controls .btn {
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  font-size:12px;
}

.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}

.gallery-grid img {
  width:100%;
  border-radius:10px;
  background:#111;
  border:1px solid rgba(255,255,255,.15);
}

@media(max-width:900px){
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){
  .gallery-grid { grid-template-columns:1fr; }
}
.favorites-empty{
  text-align:center; padding:16px; color:rgba(255,255,255,.5); font-size:12px;
}
.input-full{ width:100%; }