/* v28i: "Your collection" redesign — the item is the hero, the action sits right under it, swipe to browse. */
#workshop-dialog.cx{
  --cx-glass:rgba(255,255,255,.035);--cx-edge:rgba(255,255,255,.1);--cx-edge2:rgba(255,255,255,.2);
  --cx-violet:#8b6cff;--cta-h:168px;
  width:min(1280px,calc(100% - 28px))!important;height:min(900px,calc(100dvh - 28px))!important;
  border-radius:18px!important;border:1px solid var(--cx-edge)!important;
  background:
    radial-gradient(1200px 600px at 30% -10%,rgba(139,108,255,.13),transparent 60%),
    radial-gradient(900px 500px at 110% 110%,rgba(255,255,255,.06),transparent 60%),
    #07070a!important;
  box-shadow:0 40px 120px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
#workshop-dialog.cx::backdrop{background:rgba(3,3,5,.82);backdrop-filter:blur(16px)}
#workshop-dialog.cx .workshop-shell{grid-template-rows:auto auto minmax(0,1fr)!important}

/* header */
#workshop-dialog.cx .workshop-header{border:0!important;padding:22px 28px 14px!important;background:transparent!important}
#workshop-dialog.cx .workshop-header h2{font:400 clamp(28px,3vw,40px)/1 var(--heading)!important;letter-spacing:-.02em;margin-top:8px!important;
  background:var(--chrome-text);-webkit-background-clip:text;background-clip:text;color:transparent}
#workshop-dialog.cx .round-button{border-radius:999px!important;width:44px;height:44px}

/* category switch: glass pills */
#workshop-dialog.cx .workshop-tabs{border:0!important;padding:0 28px 16px!important;gap:8px!important;overflow-x:auto;scrollbar-width:none;background:transparent!important}
#workshop-dialog.cx .workshop-tabs::-webkit-scrollbar{display:none}
#workshop-dialog.cx .workshop-tabs button{flex:none!important;min-height:40px!important;padding:0 18px!important;border-radius:999px!important;
  border:1px solid var(--cx-edge2)!important;background:var(--cx-glass)!important;color:#c9cad0!important;box-shadow:none!important;
  font:600 11px/1 var(--label)!important;letter-spacing:.18em!important;transition:background .25s,color .25s,border-color .25s}
#workshop-dialog.cx .workshop-tabs button:hover{border-color:#fff!important;color:#fff!important}
#workshop-dialog.cx .workshop-tabs button[aria-selected=true]{background:var(--chrome)!important;color:#060607!important;border-color:transparent!important;box-shadow:0 6px 24px rgba(255,255,255,.12)!important}
#workshop-dialog.cx .workshop-tabs button[aria-selected=true] span{color:#34363b!important}

/* body: stage + info card, thumbnails underneath */
#workshop-dialog.cx .gallery-body{display:grid!important;grid-template-columns:minmax(0,1fr) 320px!important;grid-template-rows:minmax(0,1fr) auto!important;
  gap:14px 16px;padding:0 28px 20px;overflow:hidden!important;border:0!important}
#workshop-dialog.cx .preview-stage{grid-column:1;grid-row:1;height:auto!important;min-height:0!important;border-radius:16px;border:1px solid var(--cx-edge);
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%,color-mix(in srgb,var(--preview-accent,#8b6cff) 16%,transparent),transparent 70%),
    radial-gradient(ellipse at 50% 120%,rgba(255,255,255,.1),transparent 55%),
    linear-gradient(180deg,#0f0f14,#08080b)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
#workshop-dialog.cx #workshop-canvas{top:0!important;left:0!important;width:100%!important;height:calc(100% - var(--cta-h))!important}
#workshop-dialog.cx[data-group=maps] #workshop-canvas{height:100%!important}

/* top line: label, counter, progress */
#workshop-dialog.cx .cx-top{position:absolute;left:22px;right:22px;top:18px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:2}
#workshop-dialog.cx .gallery-preview-label,#workshop-dialog.cx .gallery-count{position:static!important;font:600 10px/1 var(--label)!important;letter-spacing:.3em!important;color:rgba(255,255,255,.62)!important}
#workshop-dialog.cx .gallery-preview-label::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff4d6d;margin-right:9px;vertical-align:1px;box-shadow:0 0 10px #ff4d6d;animation:cx-live 1.6s ease-in-out infinite}
@keyframes cx-live{50%{opacity:.25}}
#workshop-dialog.cx .cx-progress{position:absolute;left:0;right:0;top:22px;height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
#workshop-dialog.cx .cx-progress i{display:block;height:100%;width:0;background:var(--chrome);transition:width .45s cubic-bezier(.2,1,.3,1)}

/* arrows are gone: swipe / drag / arrow keys / thumbnails */
#workshop-dialog.cx .gallery-arrow{display:none!important}

/* the action block right under the item */
#workshop-dialog.cx .cx-cta{position:absolute;left:0;right:0;bottom:0;min-height:var(--cta-h);padding:8px 22px 22px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;z-index:2;pointer-events:none}
#workshop-dialog.cx[data-group=maps] .cx-cta{background:linear-gradient(180deg,transparent,rgba(4,4,6,.55) 35%,rgba(4,4,6,.88))}
#workshop-dialog.cx .cx-cta>*{pointer-events:auto}
#workshop-dialog.cx .selected-heading{display:flex;flex-direction:column;align-items:center}
#workshop-dialog.cx #selected-tier{font:600 10px/1 var(--label)!important;letter-spacing:.34em!important;color:rgba(255,255,255,.55)!important}
#workshop-dialog.cx .selected-heading h3{font:400 clamp(32px,3.4vw,50px)/1.02 var(--heading)!important;letter-spacing:-.02em;margin:8px 0 14px!important;
  background:var(--chrome-text);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;animation:cx-in .45s cubic-bezier(.2,1,.3,1)}
@keyframes cx-in{from{opacity:0;transform:translateY(6px)}}
#workshop-dialog.cx .cx-actions{display:flex;align-items:center;justify-content:center;gap:18px;position:relative}
#workshop-dialog.cx #workshop-equip{min-width:230px!important;min-height:52px!important;padding:0 28px!important;border-radius:2px!important;font:700 12px/1 var(--label)!important;letter-spacing:.22em!important;
  background:var(--chrome)!important;background-size:220% 220%!important;color:#050506!important;border:0!important;
  box-shadow:0 10px 30px rgba(255,255,255,.14),inset 0 1px 0 #fff!important;transition:background-position .6s,transform .15s,box-shadow .3s}
#workshop-dialog.cx #workshop-equip:hover:enabled{background-position:100% 50%!important;box-shadow:0 12px 40px rgba(255,255,255,.22),inset 0 1px 0 #fff!important}
#workshop-dialog.cx #workshop-equip:active:enabled{transform:scale(.97)}
#workshop-dialog.cx #workshop-equip:enabled{animation:cx-shine 3.2s ease-in-out infinite}
@keyframes cx-shine{0%,60%{background-position:0 50%}80%,100%{background-position:100% 50%}}
#workshop-dialog.cx #workshop-equip:disabled{background:rgba(255,255,255,.06)!important;color:rgba(255,255,255,.55)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)!important;opacity:1!important}
#workshop-dialog.cx .gallery-swipe-hint{position:static!important;display:inline-flex;align-items:center;gap:8px;font:600 10px/1 var(--label)!important;letter-spacing:.3em!important;color:rgba(255,255,255,.5)!important;text-shadow:none!important;white-space:nowrap}
#workshop-dialog.cx .gallery-swipe-hint i{font:300 20px/1 var(--label);font-style:normal;color:#fff;opacity:.7;animation:cx-nudge-l 1.6s ease-in-out infinite}
#workshop-dialog.cx .gallery-swipe-hint i:last-child{animation-name:cx-nudge-r}
@keyframes cx-nudge-l{50%{transform:translateX(-4px);opacity:1}}
@keyframes cx-nudge-r{50%{transform:translateX(4px);opacity:1}}
#workshop-dialog.cx .cx-status{margin-top:11px;font:500 11px/1.4 var(--label);letter-spacing:.08em;color:rgba(255,255,255,.55)}
#workshop-dialog.cx #quick-item-name{display:none}

/* info card */
#workshop-dialog.cx .selected-detail{grid-column:2!important;grid-row:1!important;border:1px solid var(--cx-edge)!important;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015))!important;
  padding:26px 24px!important;backdrop-filter:blur(12px);overflow-y:auto}
#workshop-dialog.cx #selected-description{font:400 14px/1.7 var(--label)!important;color:#c9cad0!important;margin:0 0 18px!important}
#workshop-dialog.cx .selected-feature{border-radius:999px!important;padding:8px 14px!important;font:600 10px/1 var(--label)!important;letter-spacing:.16em!important;text-transform:uppercase;border:1px solid var(--cx-edge2)!important;background:var(--cx-glass)!important}
#workshop-dialog.cx .reward-progress progress{height:4px!important;border-radius:4px;overflow:hidden}
#workshop-dialog.cx .reward-progress progress::-webkit-progress-bar{background:rgba(255,255,255,.1);border-radius:4px}
#workshop-dialog.cx .reward-progress progress::-webkit-progress-value{background:linear-gradient(90deg,#8b6cff,#fff);border-radius:4px}
#workshop-dialog.cx .reward-progress progress::-moz-progress-bar{background:linear-gradient(90deg,#8b6cff,#fff)}

/* thumbnails */
#workshop-dialog.cx .gallery-strip{grid-column:1 / -1!important;grid-row:2!important;border:0!important;padding:4px max(16px,calc(50% - 66px))!important;gap:10px!important;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
#workshop-dialog.cx .gallery-thumb{flex:0 0 132px!important;min-height:62px!important;border-radius:12px!important;border:1px solid var(--cx-edge)!important;background:var(--cx-glass)!important;transition:border-color .2s,background .2s,transform .2s}
#workshop-dialog.cx .gallery-thumb:hover{border-color:var(--cx-edge2)!important}
#workshop-dialog.cx .gallery-thumb.selected{border-color:#fff!important;background:rgba(255,255,255,.08)!important;transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.2)!important}
#workshop-dialog.cx .workshop-footer{display:none!important}

/* phones: full screen, item on top, action right under it, details scroll below */
@media(max-width:700px){
  #workshop-dialog.cx{--cta-h:150px;width:100%!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;border:0!important}
  #workshop-dialog.cx .workshop-header{padding:calc(12px + env(safe-area-inset-top)) 16px 10px!important}
  #workshop-dialog.cx .workshop-header h2{font-size:28px!important}
  #workshop-dialog.cx .workshop-tabs{padding:0 16px 12px!important;gap:6px!important}
  #workshop-dialog.cx .workshop-tabs button{padding:0 14px!important;min-height:36px!important;font-size:10px!important;letter-spacing:.14em!important}
  #workshop-dialog.cx .gallery-body{display:flex!important;flex-direction:column;overflow-y:auto!important;padding:0 12px calc(16px + env(safe-area-inset-bottom));gap:12px}
  #workshop-dialog.cx .preview-stage{flex:none!important;height:clamp(420px,62dvh,600px)!important}
  #workshop-dialog.cx .gallery-strip{order:2;flex:none;padding:2px max(12px,calc(50% - 60px))!important}
  #workshop-dialog.cx .gallery-thumb{flex-basis:120px!important;min-height:56px!important}
  #workshop-dialog.cx .selected-detail{order:3;flex:none;padding:20px!important;overflow:visible}
  #workshop-dialog.cx .cx-top{left:16px;right:16px;top:15px}
  #workshop-dialog.cx .cx-cta{padding:6px 14px 16px}
  #workshop-dialog.cx .selected-heading h3{font-size:34px!important;margin:6px 0 12px!important}
  #workshop-dialog.cx #workshop-equip{min-width:0!important;flex:1;max-width:240px;min-height:50px!important;font-size:11px!important;letter-spacing:.16em!important}
  #workshop-dialog.cx .cx-actions{width:100%;gap:12px}
  #workshop-dialog.cx .gallery-swipe-hint{letter-spacing:.2em!important}
}
@media(prefers-reduced-motion:reduce){#workshop-dialog.cx *{animation:none!important}}
#workshop-dialog.cx .reward-progress{margin-top:28px!important;padding-top:22px!important;border-top:1px solid var(--cx-edge)}
#workshop-dialog.cx .test-access{white-space:nowrap;border-radius:999px}
@media(max-width:700px){#workshop-dialog.cx .collection-eyebrow{white-space:nowrap;font-size:10px!important;letter-spacing:.2em!important}#workshop-dialog.cx .test-access{font-size:9px!important;padding:5px 8px!important}}

/* v28k: bigger frame, and the 3D view starts under the top line so nothing overlaps it */
#workshop-dialog.cx{--top-h:46px;width:min(1480px,calc(100% - 20px))!important;height:calc(100dvh - 20px)!important;max-height:calc(100dvh - 20px)!important}
#workshop-dialog.cx .workshop-header{padding:16px 24px 10px!important}
#workshop-dialog.cx .workshop-tabs{padding:0 24px 12px!important}
#workshop-dialog.cx .gallery-body{grid-template-columns:minmax(0,1fr) 300px!important;padding:0 20px 14px;gap:12px 14px}
#workshop-dialog.cx #workshop-canvas{top:var(--top-h)!important;height:calc(100% - var(--cta-h) - var(--top-h))!important}
#workshop-dialog.cx[data-group=maps] #workshop-canvas{top:0!important;height:100%!important}
#workshop-dialog.cx .gallery-thumb{min-height:54px!important}
@media(max-width:700px){
  #workshop-dialog.cx{--top-h:40px;width:100%!important;height:100dvh!important;max-height:100dvh!important}
  #workshop-dialog.cx .gallery-body{padding:0 10px calc(14px + env(safe-area-inset-bottom))}
  #workshop-dialog.cx .preview-stage{height:clamp(460px,68dvh,680px)!important}
}

/* v28w: no TEST ACCESS badge in the collection header */
#collection-test,.test-access{display:none!important}