/* Profile studio: sticky preview + loadout on the left, options in tabs on the right. */
.studio2-head .page-lede{max-width:640px}
.studio2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:18px;align-items:start}
.studio2-side{position:sticky;top:16px;display:grid;gap:12px}
.studio2-sticky{display:grid;gap:10px}
.studio2-stage{position:relative}
.studio2-stage .studio-content p{margin:6px 0 8px}
.studio2-badge{position:absolute;top:10px;left:10px;z-index:6;font-size:10px;font-weight:800;letter-spacing:.4px;padding:4px 9px;border-radius:99px;background:#151018c4;color:#ff9e57;pointer-events:none}
.studio2-stage.is-hover .studio2-badge{color:#ffd76a}
.studio2-stage.is-hover{box-shadow:0 0 0 1px #ffd76a66}
.studio2-actions{display:grid;gap:7px;padding:12px;background:#231d26;border-radius:12px}
.studio2-actions.is-clean{padding:10px 12px}
.studio2-status{font-size:12px;font-weight:800;color:#ff9e57}
.studio2-actions.is-clean .studio2-status{color:#ab9ea9;font-weight:700}
.studio2-locked{font-size:11px;color:#d9aaff;line-height:1.4}
/* The left column must never grow with its content: long button labels wrap instead of pushing over the tabs. */
.studio2-grid>*,.studio2-side,.studio2-sticky>*{min-width:0}
.studio2-sticky{grid-template-columns:minmax(0,1fr)}
.studio2-actions-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.studio2-actions-head .studio2-status{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio2-reset{flex:none;border:0;background:none;padding:4px 2px;color:var(--muted,#b7abb4);font:700 12px var(--font);cursor:pointer;border-radius:8px}
.studio2-reset:hover{color:var(--ink,#f7f1ec)}
.studio2-main{width:100%;margin:2px 0 0;white-space:normal;line-height:1.25;text-align:center;justify-content:center}
.studio2-loadout{display:grid;gap:2px;padding:12px;background:#231d26;border-radius:12px}
.studio2-loadout .control-label{margin:0 0 6px 8px}
.studio2-slot{display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:8px;text-align:left;background:none;border:0;padding:7px 8px;border-radius:8px;color:#dbceda;cursor:pointer;font-size:12px}
.studio2-slot:hover{background:#312a35}
.studio2-slot span{color:#ab9ea9;font-size:11px;font-weight:700}
.studio2-slot strong{color:#f6f0eb;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio2-slot.is-changed strong{color:#ff9e57}
.studio2-motion{margin:4px 0 0;padding:6px 8px;font-size:11px;font-weight:700}
.opt-tag{font-style:normal;font-size:9px;font-weight:800;line-height:1.2;padding:2px 6px;border-radius:99px;white-space:nowrap;letter-spacing:.2px}
.opt-tag.is-locked{background:#3a2a52;color:#e2c6ff}
.opt-tag.is-worn{background:#173a29;color:#9ff0b8}
.opt-tag.is-free{background:#2f2833;color:#8fe3ff}
.opt-tag.is-owned{background:#38313c;color:#dbceda}
.opt-tag.is-new{background:#2f3c14;color:#ff9e57}
.studio2-panel{min-width:0}
.studio2-tabs{position:sticky;top:12px;z-index:7;display:flex;gap:4px;padding:5px;background:#1c161ff2;border-radius:12px;backdrop-filter:blur(10px)}
.studio2-tabs button{flex:1;position:relative;padding:10px 6px;border:0;border-radius:9px;background:none;color:#bdb0bb;font-size:12px;font-weight:800;cursor:pointer}
.studio2-tabs button:hover{color:#f6f0eb;background:#2c242f}
.studio2-tabs button.active{background:#39323d;color:#f2ece8;box-shadow:inset 0 0 0 1px #b58bff66}
.studio2-dot{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:#ff9e57}
.studio2-body{display:grid;gap:12px;padding-top:12px}
.studio2-group{background:#231d26;border-radius:12px;padding:14px}
.studio2-group-head h3{margin:0 0 3px;font:800 14px var(--font);color:#faf4ef}
.studio2-group-head p{margin:0 0 12px;font-size:11px;line-height:1.45;color:#ab9ea9}
.studio2-group.is-extra{background:#201a23}
.studio2-sub{display:block;margin:14px 0 7px;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#ab9ea9}
.studio2-body .choice{display:flex;align-items:center;gap:6px;cursor:pointer}
.studio2-body .choice .opt-tag{margin-left:auto}
.studio2-body .opt-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio2-body .choice>i{width:10px;height:10px;border-radius:50%;background:var(--choice);flex:none}
.studio2-none{width:100%;justify-content:flex-start}
.studio2-body .set-card{min-height:96px;gap:4px}
.studio2-body .set-card .opt-tag{margin-top:2px}
.studio2-body .media-controls{display:flex;flex-wrap:wrap;gap:7px}
.studio2-body .media-help{margin:9px 0 0;font-size:11px;line-height:1.45;color:#ab9ea9}
.studio2-login{margin-top:16px}
@media(max-width:1180px){
  .studio2-grid{grid-template-columns:1fr}
  /* the side column dissolves so the preview can stick over the options while scrolling */
  .studio2-side{display:contents}
  .studio2-sticky{order:0;position:sticky;top:0;z-index:9;padding:6px 0 10px;background:linear-gradient(#151018 88%,#15101800)}
  .studio2-panel{order:1}
  .studio2-loadout{order:2}
  .studio2-loadout{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .studio2-loadout .control-label,.studio2-motion{grid-column:1/-1}
  .studio2-slot{grid-template-columns:minmax(0,1fr) auto;row-gap:1px;background:#29222d}
  .studio2-slot span{grid-column:1/-1}
  .studio2-tabs{top:var(--studio-sticky,0)}
}
@media(max-width:1180px) and (min-width:731px){
  .studio2-sticky{grid-template-columns:minmax(0,1.3fr) minmax(220px,1fr);align-items:end}
}
@media(max-width:730px){
  .studio2-head .page-lede{font-size:12px}
  .studio2-stage .studio-banner{height:78px}
  .studio2-stage>.avatar{width:58px!important;height:58px!important;margin:-29px 0 0 14px}
  .studio2-stage .studio-content{padding:4px 14px 10px}
  .studio2-stage .studio-content h2{font-size:16px}
  .studio2-stage .studio-content p,.studio2-stage .studio-content .chips{display:none}
  .studio2-badge{top:7px;left:7px}
  .studio2-actions{padding:8px 10px;gap:5px}
  .studio2-actions .btn{min-height:38px;padding:8px 12px}
  .studio2-actions .studio2-locked{display:none}
  .studio2-actions.is-clean{padding:7px 10px}
  .studio2-tabs{top:auto;position:static}
  .studio2-tabs button{font-size:11px;padding:9px 4px}
  .studio2-group{padding:12px}
  .studio2-body .choice .opt-tag.is-worn span{display:none}
}

/* ---------- Profile page or profile card (2026-11-11) ---------- */
.studio-target { display: grid; gap: 8px; margin: 4px 0 18px; padding: 14px 16px; border-radius: 16px; background: var(--surface); }
.studio-target .control-label { margin: 0; }
.studio-target-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); justify-self: start; }
.studio-target-tabs button { border: 0; border-radius: 999px; padding: 8px 18px; background: transparent; color: var(--muted); font: 700 14px/1.2 var(--font); cursor: pointer; }
.studio-target-tabs button.active { background: var(--ink); color: var(--bg); }
.studio-target-hint { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.studio-target-hint b { display: block; margin-top: 4px; color: var(--ink); font-weight: 600; }
.studio-target-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.studio-card-note { margin: 0 0 14px; }
@media (max-width: 560px) { .studio-target-tabs { justify-self: stretch; } .studio-target-tabs button { flex: 1; padding-inline: 10px; } .studio-target-actions .btn { width: 100%; } }