.hwr-imager-root {
  --bg: #0b1020;
  --panel: #121a2f;
  --panel-2: #18233d;
  --line: #2b3858;
  --text: #f4f7ff;
  --muted: #99a6c4;
  --accent: #35b8ff;
  --accent-2: #6f5cff;
  --success: #45d18a;
  --danger: #ff6b7a;
  --shadow: 0 22px 55px rgba(0,0,0,.28);
}

.hwr-imager-root * { box-sizing: border-box; }
.hwr-imager-root { background: var(--bg); }
.hwr-imager-root {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  font: 15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 20% 0%, rgba(53,184,255,.12), transparent 28rem),
    radial-gradient(circle at 85% 10%, rgba(111,92,255,.12), transparent 28rem),
    var(--bg);
}
.hwr-imager-root button, .hwr-imager-root input, .hwr-imager-root select, .hwr-imager-root textarea { font: inherit; }
.hwr-imager-root button, .hwr-imager-root select { cursor: pointer; }
.hwr-imager-root button {
  color: var(--text);
  background: #202b47;
  border: 1px solid var(--line);
  border-radius: 11px;
  min-height: 42px;
  padding: 9px 13px;
  transition: .16s ease;
}
.hwr-imager-root button:hover { border-color: #50658f; transform: translateY(-1px); }
.hwr-imager-root button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.hwr-imager-root button.primary {
  background: linear-gradient(135deg, var(--accent), #4d8dff);
  color: #07101c;
  border: 0;
  font-weight: 800;
}
.hwr-imager-root input, .hwr-imager-root select, .hwr-imager-root textarea {
  color: var(--text);
  background: #0d1528;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 42px;
  padding: 10px 12px;
  outline: none;
}
.hwr-imager-root input:focus, .hwr-imager-root select:focus, .hwr-imager-root textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(53,184,255,.13);
}
.hwr-imager-root textarea { resize: vertical; min-height: 78px; }

.hwr-imager-root .app-shell { max-width: 1540px; margin: 0 auto; padding: 22px; }
.hwr-imager-root .topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-bottom: 18px;
}
.hwr-imager-root .brand { display: flex; align-items: center; gap: 13px; }
.hwr-imager-root .brand-mark {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 14px; background: linear-gradient(145deg, #25c2ff, #6b5aff);
  color: white; font-size: 25px; font-weight: 1000;
  box-shadow: 0 12px 28px rgba(53,184,255,.22);
}
.hwr-imager-root .brand h1 { margin: 0; font-size: 22px; line-height: 1.1; letter-spacing: -.3px; }
.hwr-imager-root .brand h1 span {
  display: inline-block; vertical-align: 2px; font-size: 10px; letter-spacing: 1px;
  background: #f3c94a; color: #17130a; border-radius: 5px; padding: 2px 5px; margin-left: 4px;
}
.hwr-imager-root .brand p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.hwr-imager-root .server-pill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(18,26,47,.8); border: 1px solid var(--line);
  color: var(--muted); border-radius: 999px; padding: 8px 12px; font-size: 12px;
}
.hwr-imager-root .server-pill span { width: 8px; height: 8px; border-radius: 50%; background: #f3c94a; }
.hwr-imager-root .server-pill.online span { background: var(--success); }

.hwr-imager-root .workspace { display: grid; grid-template-columns: 390px minmax(0,1fr); gap: 18px; align-items: start; }
.hwr-imager-root .panel { background: rgba(18,26,47,.94); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.hwr-imager-root .preview-panel { padding: 18px; position: sticky; top: 18px; }
.hwr-imager-root .editor-panel { padding: 20px; min-width: 0; }

.hwr-imager-root .load-user label { display:block; font-weight: 750; margin-bottom: 8px; }
.hwr-imager-root .search-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.hwr-imager-root .hint { color: var(--muted); font-size: 12px; margin: 7px 0 0; min-height: 18px; }

.hwr-imager-root .avatar-stage {
  position: relative; overflow: hidden; isolation: isolate;
  height: 340px; display: grid; place-items: center; margin: 16px 0;
  border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #18294a, #101a30 70%);
}
.hwr-imager-root .stage-grid {
  position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 24px 24px;
  transform: perspective(350px) rotateX(54deg) scale(1.5);
  transform-origin: center bottom;
}
.hwr-imager-root .avatar-stage img {
  max-height: 285px; max-width: 96%;
  image-rendering: pixelated;
  filter: drop-shadow(0 24px 15px rgba(0,0,0,.35));
}
.hwr-imager-root .loader {
  position: absolute; bottom: 13px; right: 13px;
  color: #dbe8ff; background: rgba(6,10,20,.78); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 9px; font-size: 11px;
}

.hwr-imager-root .quick-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-bottom: 14px; }
.hwr-imager-root .quick-actions button { padding-left: 7px; padding-right: 7px; font-size: 12px; }

.hwr-imager-root .control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.hwr-imager-root .control-grid label { color: var(--muted); font-size: 11px; font-weight: 700; }
.hwr-imager-root .control-grid select { width: 100%; margin-top: 5px; color: var(--text); }

.hwr-imager-root .switch-row { display: flex; align-items: center; gap: 8px; color: var(--muted); margin: 13px 0; }
.hwr-imager-root .switch-row input { min-height: 0; width: 18px; height: 18px; accent-color: var(--accent); }

.hwr-imager-root .export-card { padding-top: 14px; border-top: 1px solid var(--line); }
.hwr-imager-root .section-title { display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 8px; }
.hwr-imager-root .section-title span { color: var(--muted); font-size: 11px; margin-left: 8px; }
.hwr-imager-root .link-btn { min-height: 0; padding: 4px 8px; background: transparent; color: var(--accent); border: 0; }
.hwr-imager-root #figureString { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.hwr-imager-root .export-actions { display:grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

.hwr-imager-root .editor-head { display:flex; justify-content:space-between; gap: 16px; align-items:flex-start; }
.hwr-imager-root .editor-head h2 { margin: 0; font-size: 23px; }
.hwr-imager-root .editor-head p { color: var(--muted); margin: 4px 0 0; }
.hwr-imager-root .save-actions { display:flex; gap:8px; }
.hwr-imager-root .save-actions span {
  background: rgba(255,255,255,.09); padding: 2px 6px; border-radius: 999px; font-size: 11px;
}

.hwr-imager-root .category-tabs {
  display: flex; gap: 7px; overflow-x: auto; padding: 18px 0 12px;
  scrollbar-width: thin;
}
.hwr-imager-root .category-tabs button { white-space: nowrap; min-height: 38px; background: #101a30; }
.hwr-imager-root .category-tabs button.active {
  background: rgba(53,184,255,.12); border-color: var(--accent); color: #bfeaff;
}

.hwr-imager-root .toolbar {
  display:grid; grid-template-columns:minmax(180px,1fr) 190px auto; gap: 8px;
  padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #0f172a;
}
.hwr-imager-root .search-box { position:relative; }
.hwr-imager-root .search-box span { position:absolute; left: 12px; top: 9px; color: var(--muted); font-size: 18px; }
.hwr-imager-root .search-box input { width:100%; padding-left: 36px; }

.hwr-imager-root .category-info {
  display:flex; justify-content:space-between; align-items:center; gap:10px; padding: 16px 2px 9px;
}
.hwr-imager-root .category-info strong { font-size: 16px; }
.hwr-imager-root .category-info span { color: var(--muted); font-size: 11px; margin-left: 8px; }
.hwr-imager-root .category-info p { margin:0; color:var(--muted); font-size:11px; }

.hwr-imager-root .items-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap: 8px;
  min-height: 220px;
}
.hwr-imager-root .item-card {
  position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:stretch;
  min-height: 118px; padding:0; background:#10192e; border:1px solid var(--line); border-radius:13px;
}
.hwr-imager-root .item-card:hover { background:#15213a; }
.hwr-imager-root .item-card.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.hwr-imager-root .item-preview {
  height:82px; display:grid; place-items:center; background:
    linear-gradient(45deg,#162038 25%,transparent 25%) 0 0/16px 16px,
    linear-gradient(45deg,transparent 75%,#162038 75%) 0 0/16px 16px,
    #10172a;
}
.hwr-imager-root .item-preview img { max-width: 84px; max-height: 78px; image-rendering:pixelated; }
.hwr-imager-root .item-meta {
  display:flex; align-items:center; justify-content:space-between; gap:5px;
  padding:7px 8px; font: 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.hwr-imager-root .item-badges { position:absolute; top:5px; right:5px; display:flex; gap:3px; }
.hwr-imager-root .badge { padding:2px 4px; border-radius:4px; font-size:8px; font-weight:900; background:#253452; }
.hwr-imager-root .badge.hc { background:#f2bf3a; color:#241c05; }
.hwr-imager-root .badge.special { background:#765cff; color:#fff; }
.hwr-imager-root .badge.pin { background:#36c789; color:#072218; }

.hwr-imager-root .empty-state {
  grid-column:1/-1; display:grid; place-items:center; min-height:220px; text-align:center;
  color:var(--muted); border:1px dashed var(--line); border-radius:14px; padding:30px;
}
.hwr-imager-root .load-more { width:100%; margin-top: 10px; }

.hwr-imager-root .colour-section { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }
.hwr-imager-root .colour-grid { display:flex; flex-wrap:wrap; gap:7px; min-height: 36px; }
.hwr-imager-root .colour-swatch {
  width: 34px; min-height:34px; height:34px; padding:0; border-radius:9px;
  border:2px solid rgba(255,255,255,.14); position:relative;
}
.hwr-imager-root .colour-swatch.selected::after {
  content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  color:white; text-shadow:0 1px 3px #000; font-weight:1000;
}

.hwr-imager-root .collectible-lab {
  margin-top: 20px; padding: 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(111,92,255,.10), rgba(53,184,255,.06));
  border: 1px solid #3a4272;
}
.hwr-imager-root .collectible-lab p { color:var(--muted); margin:4px 0 12px; font-size:12px; }
.hwr-imager-root .collectible-row { display:grid; grid-template-columns:120px minmax(120px,1fr) auto; gap:8px; }
.hwr-imager-root .pinned-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.hwr-imager-root .pin-chip {
  min-height:30px; padding:5px 9px; font-size:11px; border-radius:999px;
  background:#171d37; border-color:#424b78;
}
.hwr-imager-root .pin-chip b { color:#a9dcff; }

.hwr-imager-root dialog {
  width:min(660px,calc(100% - 28px)); max-height:80%; padding:0; border:1px solid var(--line);
  border-radius:18px; background:#111a30; color:var(--text); box-shadow:var(--shadow);
}
.hwr-imager-root dialog::backdrop { background:rgba(3,7,16,.76); }
.hwr-imager-root .dialog-card { padding:18px; }
.hwr-imager-root .dialog-head { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.hwr-imager-root .dialog-head h3 { margin:0; font-size:20px; }
.hwr-imager-root .dialog-head p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.hwr-imager-root .close-btn { min-height:36px; width:36px; padding:0; font-size:20px; }
.hwr-imager-root .saved-list { display:grid; gap:8px; margin-top:14px; }
.hwr-imager-root .saved-item {
  display:grid; grid-template-columns:70px minmax(0,1fr) auto; align-items:center; gap:10px;
  border:1px solid var(--line); background:#0d1528; border-radius:12px; padding:9px;
}
.hwr-imager-root .saved-item img { width:62px; height:78px; object-fit:contain; image-rendering:pixelated; }
.hwr-imager-root .saved-item strong { display:block; }
.hwr-imager-root .saved-item code { display:block; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; font-size:10px; }
.hwr-imager-root .saved-actions { display:flex; gap:6px; }
.hwr-imager-root .saved-actions button { min-height:34px; padding:6px 8px; font-size:11px; }

.hwr-imager-root .toast {
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,16px);
  background:#eef5ff; color:#111827; padding:10px 14px; border-radius:10px;
  box-shadow:0 14px 35px rgba(0,0,0,.3); opacity:0; pointer-events:none;
  transition:.18s ease; font-weight:700; font-size:12px; z-index:50;
}
.hwr-imager-root .toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 1050px) {
  .hwr-imager-root .workspace { grid-template-columns: 330px minmax(0,1fr); }
  .hwr-imager-root .avatar-stage { height:300px; }
}
@media (max-width: 860px) {
  .hwr-imager-root .app-shell { padding:12px; }
  .hwr-imager-root .workspace { grid-template-columns:1fr; }
  .hwr-imager-root .preview-panel { position:static; }
  .hwr-imager-root .editor-head { flex-direction:column; }
  .hwr-imager-root .toolbar { grid-template-columns:1fr 1fr; }
  .hwr-imager-root .toolbar .search-box { grid-column:1/-1; }
}
@media (max-width: 520px) {
  .hwr-imager-root .topbar { align-items:flex-start; }
  .hwr-imager-root .server-pill { display:none; }
  .hwr-imager-root .quick-actions { grid-template-columns:1fr 1fr; }
  .hwr-imager-root .control-grid { grid-template-columns:1fr; }
  .hwr-imager-root .export-actions, .hwr-imager-root .collectible-row, .hwr-imager-root .toolbar { grid-template-columns:1fr; }
  .hwr-imager-root .toolbar .search-box { grid-column:auto; }
  .hwr-imager-root .save-actions { width:100%; }
  .hwr-imager-root .save-actions button { flex:1; }
  .hwr-imager-root .items-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hwr-imager-root .item-card { min-height:108px; }
  .hwr-imager-root .item-preview { height:74px; }
  .hwr-imager-root .saved-item { grid-template-columns:52px minmax(0,1fr); }
  .hwr-imager-root .saved-item img { width:46px; }
  .hwr-imager-root .saved-actions { grid-column:1/-1; }
}

.hwr-imager-root{width:100%;min-width:0;border-radius:20px;overflow:clip;margin:0;background:radial-gradient(circle at 20% 0%,rgba(53,184,255,.12),transparent 28rem),radial-gradient(circle at 85% 10%,rgba(111,92,255,.12),transparent 28rem),#0b1020;color:#f4f7ff;}
.hwr-imager-root .preview-panel{top:94px;}

/* v1.8 — larger wardrobe previews + cleaner radio-site UI */
.hwr-imager-root{
  --panel:#0f1b31;
  --panel-2:#172640;
  --line:#314566;
  border:1px solid rgba(74,127,167,.35);
  box-shadow:0 28px 80px rgba(3,15,30,.24);
}
.hwr-imager-root .app-shell{padding:28px;max-width:1600px}
.hwr-imager-root .topbar{padding:4px 4px 20px;margin-bottom:0;border-bottom:1px solid rgba(255,255,255,.08)}
.hwr-imager-root .brand-mark{width:54px;height:54px;border-radius:16px;background:linear-gradient(145deg,#49c9ff,#2f77d7);box-shadow:0 14px 32px rgba(49,147,217,.25)}
.hwr-imager-root .brand h1{font-size:25px;letter-spacing:-.5px}
.hwr-imager-root .brand p{font-size:13px}
.hwr-imager-root .workspace{grid-template-columns:410px minmax(0,1fr);gap:22px;margin-top:22px}
.hwr-imager-root .panel{border-radius:20px;border-color:#304664;background:linear-gradient(180deg,rgba(17,30,53,.97),rgba(12,24,44,.97))}
.hwr-imager-root .preview-panel{padding:20px}
.hwr-imager-root .editor-panel{padding:24px}
.hwr-imager-root .avatar-stage{height:370px;border-radius:18px;background:radial-gradient(circle at 50% 35%,#24446c 0,#122641 42%,#0b172b 78%);border-color:#365474}
.hwr-imager-root .avatar-stage img{max-height:320px}
.hwr-imager-root .editor-head{padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.08)}
.hwr-imager-root .editor-head h2{font-size:28px;letter-spacing:-.5px}
.hwr-imager-root .editor-head p{font-size:13px;max-width:640px}
.hwr-imager-root .category-tabs{padding-top:20px;gap:9px}
.hwr-imager-root .category-tabs button{min-height:42px;padding:9px 14px;border-radius:12px;background:#0d1a2e}
.hwr-imager-root .category-tabs button.active{background:linear-gradient(135deg,rgba(53,184,255,.20),rgba(77,141,255,.16));box-shadow:inset 0 0 0 1px rgba(73,196,255,.25)}
.hwr-imager-root .toolbar{padding:14px;border-radius:16px;background:#0b1729;grid-template-columns:minmax(220px,1fr) 210px auto}
.hwr-imager-root .category-info{padding:20px 4px 12px}
.hwr-imager-root .category-info strong{font-size:18px}
.hwr-imager-root .items-grid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:12px;min-height:280px}
.hwr-imager-root .item-card{min-height:182px;border-radius:16px;background:linear-gradient(180deg,#101d33,#0d182b);border-color:#30425f}
.hwr-imager-root .item-card:hover{background:#172943;border-color:#4b6b94;transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.hwr-imager-root .item-card.selected{border-color:#49c6ff;box-shadow:0 0 0 2px rgba(73,198,255,.18),0 12px 26px rgba(0,0,0,.16)}
.hwr-imager-root .item-preview{height:132px;background:radial-gradient(circle at 50% 45%,#263b5d 0,#16253f 48%,#101a2e 100%)}
.hwr-imager-root .item-preview img{max-width:124px;max-height:124px;transform:scale(1.08);transform-origin:center;image-rendering:pixelated}
.hwr-imager-root .item-meta{padding:9px 10px;font-size:11px;background:rgba(5,12,23,.24)}
.hwr-imager-root .item-meta b{font-size:12px;color:#dcecff}
.hwr-imager-root .badge{font-size:9px;padding:3px 5px}
.hwr-imager-root .colour-section{margin-top:24px;padding-top:20px}
.hwr-imager-root .colour-grid{gap:9px}
.hwr-imager-root .colour-swatch{width:40px;height:40px;min-height:40px;border-radius:11px}
.hwr-imager-root .collectible-lab{margin-top:24px;padding:18px;border-radius:16px}
@media(max-width:1050px){.hwr-imager-root .workspace{grid-template-columns:350px minmax(0,1fr)}.hwr-imager-root .items-grid{grid-template-columns:repeat(auto-fill,minmax(125px,1fr))}}
@media(max-width:860px){.hwr-imager-root .app-shell{padding:14px}.hwr-imager-root .workspace{grid-template-columns:1fr}.hwr-imager-root .items-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}}
@media(max-width:520px){.hwr-imager-root .items-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hwr-imager-root .item-card{min-height:166px}.hwr-imager-root .item-preview{height:116px}.hwr-imager-root .item-preview img{max-width:108px;max-height:108px}.hwr-imager-root .toolbar{grid-template-columns:1fr}.hwr-imager-root .avatar-stage{height:310px}}