/* === SOURCE: css/193-v5549-diy-attribute-layout-controls.css === */

/* v5.5.49 · Fixed DIY attribute columns, collapsible groups, complete rows,
   80-start steppers and 90 shortcut. */
@media(min-width:761px){
  #diyPanel .diy-attribute-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:9px!important;
    align-items:start!important;
    align-content:start!important;
  }
  #diyPanel .diy-attr-column{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:9px;
  }

  #diyPanel .diy-attr-group{
    display:block!important;
    min-width:0!important;
  }
  #diyPanel .diy-attr-group-head{
    appearance:none!important;
    width:100%!important;
    height:32px!important;
    min-height:32px!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.045)!important;
    background:rgba(255,255,255,.006)!important;
    color:inherit!important;
    padding:0 9px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    cursor:pointer!important;
    text-align:left!important;
  }
  #diyPanel .diy-attr-group-head:hover{
    background:rgba(255,255,255,.018)!important;
  }
  #diyPanel .diy-attr-group-title{
    min-width:0;
    display:flex;
    align-items:baseline;
    gap:7px;
  }
  #diyPanel .diy-attr-group-title strong{
    color:#919da8!important;
    font-size:11.5px!important;
    font-weight:750!important;
  }
  #diyPanel .diy-attr-group-title em{
    color:#596570;
    font-size:8px;
    font-style:normal;
    font-weight:700;
  }
  #diyPanel .diy-attr-group-chevron{
    flex:0 0 auto;
    color:#67737e;
    font-size:15px;
    line-height:1;
    transform:rotate(90deg);
    transition:transform .26s cubic-bezier(.22,.68,.24,1),color .18s ease;
  }
  #diyPanel .diy-attr-group.is-collapsed .diy-attr-group-chevron{
    transform:rotate(0deg);
  }
  #diyPanel .diy-attr-group-body{
    max-height:320px;
    opacity:1;
    overflow:hidden;
    transition:max-height .36s cubic-bezier(.22,.68,.24,1),opacity .22s ease;
  }
  #diyPanel .diy-attr-group.is-collapsed .diy-attr-group-body{
    max-height:0;
    opacity:0;
  }

  #diyPanel .diy-attr-row{
    min-height:34px!important;
    grid-template-columns:minmax(72px,1fr) auto 18px!important;
    gap:6px!important;
    padding:4px 7px 4px 9px!important;
  }
  #diyPanel .diy-attr-control{
    display:grid;
    grid-template-columns:23px 42px 23px 30px;
    gap:3px;
    align-items:center;
  }
  #diyPanel .diy-attr-step,
  #diyPanel .diy-attr-quick{
    appearance:none;
    height:24px;
    border:1px solid rgba(255,255,255,.065);
    border-radius:6px;
    background:rgba(255,255,255,.018);
    color:#8d99a4;
    display:grid;
    place-items:center;
    padding:0;
    cursor:pointer;
    font:720 10.5px/1 inherit;
    transition:border-color .15s ease,background .15s ease,color .15s ease;
  }
  #diyPanel .diy-attr-step:hover,
  #diyPanel .diy-attr-quick:hover{
    border-color:rgba(205,216,227,.16);
    background:rgba(205,216,227,.045);
    color:#d3dae0;
  }
  #diyPanel .diy-attr-quick{
    color:#bba867;
    border-color:rgba(216,184,95,.12);
    background:rgba(216,184,95,.025);
    font-size:9px;
    font-weight:800;
  }
  #diyPanel .diy-attr-quick:hover{
    color:#e0cb81;
    border-color:rgba(216,184,95,.26);
    background:rgba(216,184,95,.07);
  }
  #diyPanel .diy-attr-input{
    width:42px!important;
    height:24px!important;
    padding:0 3px!important;
    border-radius:6px!important;
    font-size:11px!important;
  }

  /* Every badge category renders the entire dataset and may wrap to as many
     rows as needed; category count in the header reflects the full set. */
  #diyPanel .diy-badge-grid{
    grid-auto-flow:row!important;
    grid-auto-rows:65px!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  #diyPanel .diy-badge-group{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
}

@media(max-width:1180px) and (min-width:761px){
  #diyPanel .diy-attribute-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  #diyPanel .diy-attr-control{
    grid-template-columns:21px 38px 21px 28px;
    gap:2px;
  }
  #diyPanel .diy-attr-input{width:38px!important}
}

@media(max-width:760px){
  #diyPanel .diy-attribute-grid{
    display:block!important;
  }
  #diyPanel .diy-attr-column{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:8px;
  }
  #diyPanel .diy-attr-group-head{
    width:100%;
    height:34px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.045);
    background:rgba(255,255,255,.008);
    color:inherit;
    padding:0 9px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  #diyPanel .diy-attr-group-title{display:flex;gap:7px;align-items:baseline}
  #diyPanel .diy-attr-group-title strong{font-size:11.5px;color:#919da8}
  #diyPanel .diy-attr-group-title em{font-size:8px;color:#596570;font-style:normal}
  #diyPanel .diy-attr-group-chevron{transform:rotate(90deg)}
  #diyPanel .diy-attr-group.is-collapsed .diy-attr-group-chevron{transform:none}
  #diyPanel .diy-attr-group-body{max-height:340px;overflow:hidden}
  #diyPanel .diy-attr-group.is-collapsed .diy-attr-group-body{max-height:0}
  #diyPanel .diy-attr-row{
    grid-template-columns:minmax(72px,1fr) auto 18px!important;
  }
  #diyPanel .diy-attr-control{
    display:grid;
    grid-template-columns:23px 42px 23px 30px;
    gap:3px;
  }
  #diyPanel .diy-attr-step,
  #diyPanel .diy-attr-quick{
    height:24px;border:1px solid rgba(255,255,255,.065);border-radius:6px;
    background:rgba(255,255,255,.018);color:#8d99a4;
  }
  #diyPanel .diy-attr-input{width:42px!important;height:24px!important}
}

/* === SOURCE: css/194-v5550-ap-calculator-polish-apply.css === */

/* v5.5.50 · AP Calculator naming, long-press stepping, stronger numeric focus,
   and one-click application into a selected archetype. */
#diyPanel .diy-attr-input{
  appearance:textfield!important;
  -moz-appearance:textfield!important;
  text-align:center!important;
  text-align-last:center!important;
  padding-left:0!important;
  padding-right:0!important;
  color:#aeb8c2!important;
  caret-color:#e3d18c!important;
  font-variant-numeric:tabular-nums!important;
}
#diyPanel .diy-attr-input::-webkit-outer-spin-button,
#diyPanel .diy-attr-input::-webkit-inner-spin-button{
  -webkit-appearance:none!important;
  margin:0!important;
}
#diyPanel .diy-attr-input::placeholder{
  color:#596570!important;
  opacity:1!important;
  text-align:center!important;
}
#diyPanel .diy-attr-row.is-active .diy-attr-input{
  color:#dfca82!important;
  border-color:rgba(216,184,95,.18)!important;
  background:rgba(216,184,95,.040)!important;
  box-shadow:inset 0 0 0 1px rgba(216,184,95,.018)!important;
}
#diyPanel .diy-attr-row.is-active .diy-attr-input:focus{
  color:#ead993!important;
  border-color:rgba(216,184,95,.36)!important;
  background:rgba(216,184,95,.060)!important;
  box-shadow:0 0 0 1px rgba(216,184,95,.09),0 0 11px rgba(216,184,95,.035)!important;
}
#diyPanel .diy-attr-step:active{
  border-color:rgba(216,184,95,.26)!important;
  background:rgba(216,184,95,.065)!important;
  color:#e0cb81!important;
}

.diy-detail-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.diy-apply-model-btn{
  appearance:none;
  min-width:112px;
  height:40px;
  padding:0 11px;
  border:1px solid rgba(216,184,95,.30);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(216,184,95,.13),rgba(216,184,95,.048));
  color:#e5d08a;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
}
.diy-apply-model-btn>span{
  font-size:11.5px;
  line-height:1;
  font-weight:820;
}
.diy-apply-model-btn>small{
  margin-top:4px;
  color:#99884f;
  font-size:8px;
  line-height:1;
  font-weight:680;
}
.diy-apply-model-btn:hover{
  border-color:rgba(216,184,95,.48);
  background:linear-gradient(180deg,rgba(216,184,95,.18),rgba(216,184,95,.070));
  box-shadow:0 0 18px rgba(216,184,95,.07);
  transform:translateY(-1px);
}
.diy-apply-model-btn:active{transform:none}

@media(max-width:700px){
  .diy-detail-head{align-items:flex-start!important;flex-wrap:wrap}
  .diy-detail-head-actions{width:100%;justify-content:space-between}
}

/* === SOURCE: css/195-v5552-diy-badge-ratio-fix.css === */

/* v5.5.52 · DIY silver PlayStyle badge proportions.
   Match the existing PlayStyle selector ratio:
   shell 35×40 / icon 22×22 rather than the previous 31×31 / 24×24. */
#diyPanel .diy-silver-badge{
  position:relative!important;
  width:38px!important;
  height:40px!important;
  flex:0 0 40px!important;
  display:block!important;
}

#diyPanel .diy-silver-badge::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:35px!important;
  height:40px!important;
  transform:translate(-50%,-50%)!important;
  background:var(--fc27-ps-silver) center/100% 100% no-repeat!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.20))!important;
  pointer-events:none!important;
  z-index:1!important;
}

#diyPanel .diy-silver-badge img{
  position:absolute!important;
  z-index:2!important;
  left:50%!important;
  top:50%!important;
  width:22px!important;
  height:22px!important;
  max-width:none!important;
  max-height:none!important;
  transform:translate(-50%,-50%)!important;
  object-fit:contain!important;
  opacity:.82!important;
  filter:none!important;
}

#diyPanel .diy-silver-badge .diy-badge-fallback{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  display:grid!important;
  place-items:center!important;
  color:#171d22!important;
  font-size:6px!important;
  font-weight:900!important;
}

#diyPanel .diy-badge-btn.selected .diy-silver-badge img{
  opacity:1!important;
}

#diyPanel .diy-badge-btn.selected .diy-silver-badge::before{
  filter:
    drop-shadow(0 3px 7px rgba(0,0,0,.20))
    drop-shadow(0 0 7px rgba(220,228,235,.13))!important;
}

/* === SOURCE: css/196-v5553-ap-calculator-copy-polish.css === */

/* v5.5.53 · Copy reduction and primary action moved into the target-value header. */
#diyPanel .diy-attribute-section-head{
  padding-top:7px!important;
  padding-bottom:7px!important;
}

#diyPanel .diy-attribute-section-head>div{
  display:flex!important;
  align-items:center!important;
}

#diyPanel .diy-calculate-btn-head{
  flex:0 0 auto!important;
  width:116px!important;
  height:34px!important;
  min-height:34px!important;
  border-radius:9px!important;
  margin:0!important;
  padding:0 10px!important;
}

#diyPanel .diy-calculate-btn-head span{
  font-size:11.5px!important;
  line-height:1!important;
}

#diyPanel .diy-calculate-btn-head small{
  margin-top:3px!important;
  font-size:8px!important;
  line-height:1!important;
}

#diyPanel .diy-badge-panel .diy-badge-groups{
  flex:1 1 auto!important;
  min-height:0!important;
  padding-bottom:10px!important;
}

/* Old dock is removed from the DOM; keep a hard fallback in case a stale fragment is restored. */
#diyPanel .diy-calc-dock,
#diyPanel .diy-requirement-summary{
  display:none!important;
}

@media(max-width:760px){
  #diyPanel .diy-calculate-btn-head{
    width:108px!important;
    height:34px!important;
  }
}

/* === SOURCE: css/197-v5554-ap-calculator-primary-cta.css === */

/* v5.5.54 · Make Calculate AP the dominant CTA.
   Disabled state remains recognizable instead of collapsing into grey. */

#diyPanel .diy-calculate-btn-head{
  border-color:rgba(226,192,92,.58)!important;
  background:
    linear-gradient(180deg,rgba(224,190,87,.22),rgba(188,149,54,.105))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,238,173,.10),
    0 0 0 1px rgba(219,183,76,.055),
    0 4px 14px rgba(0,0,0,.16),
    0 0 18px rgba(218,181,73,.075)!important;
  color:#f1d977!important;
}

#diyPanel .diy-calculate-btn-head span{
  color:#f3dc83!important;
  font-weight:850!important;
  text-shadow:0 0 10px rgba(229,193,91,.10);
}

#diyPanel .diy-calculate-btn-head small{
  color:#c8ab58!important;
  font-weight:720!important;
}

#diyPanel .diy-calculate-btn-head:not(:disabled):hover{
  border-color:rgba(237,205,111,.80)!important;
  background:
    linear-gradient(180deg,rgba(231,199,100,.29),rgba(194,154,57,.14))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,241,185,.14),
    0 0 0 1px rgba(230,194,94,.08),
    0 5px 16px rgba(0,0,0,.17),
    0 0 24px rgba(221,184,76,.13)!important;
  transform:translateY(-1px);
}

#diyPanel .diy-calculate-btn-head:active:not(:disabled){
  transform:translateY(0);
}

/* Keep disabled meaning, but do not visually erase the primary action. */
#diyPanel .diy-calculate-btn-head:disabled{
  opacity:1!important;
  cursor:not-allowed!important;
  filter:none!important;
  border-color:rgba(204,172,78,.34)!important;
  background:
    linear-gradient(180deg,rgba(200,170,77,.105),rgba(145,116,41,.045))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,235,168,.04),
    0 3px 10px rgba(0,0,0,.12)!important;
}

#diyPanel .diy-calculate-btn-head:disabled span{
  color:rgba(224,200,126,.70)!important;
  text-shadow:none!important;
}

#diyPanel .diy-calculate-btn-head:disabled small{
  color:rgba(184,153,76,.72)!important;
}

/* === SOURCE: css/198-v5555-nav-brand-overview-alignment-fix.css === */

/* v5.5.55 · Navigation becomes line-only; brand geometry is invariant across
   editor pages; remove the legacy attribute-page Archetype Overview offset. */

@media(min-width:761px){
  /* ---------- Primary navigation: no enclosing glass box ---------- */
  .editor-view-tabs,
  body.attributes-workspace-compact .editor-view-tabs{
    box-sizing:border-box!important;
    border:0!important;
    border-bottom:1px solid rgba(220,229,237,.105)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }

  .editor-view-tab,
  body.attributes-workspace-compact .editor-view-tab{
    background:transparent!important;
    box-shadow:none!important;
  }

  .editor-view-tab.active,
  body.attributes-workspace-compact .editor-view-tab.active{
    background:transparent!important;
    box-shadow:none!important;
  }

  /* Active gold segment sits directly on the shared baseline. */
  .editor-view-tab.active::after,
  body.attributes-workspace-compact .editor-view-tab.active::after{
    bottom:-1px!important;
    height:2px!important;
    z-index:2!important;
  }

  /* ---------- Site brand: one geometry on every editor page ---------- */
  .topbar,
  body.attributes-workspace-compact .topbar{
    display:flex!important;
    align-items:center!important;
  }

  .topbar>.site-brand,
  body.attributes-workspace-compact .topbar>.site-brand,
  body.attributes-workspace-compact .topbar>div:first-child{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:13px!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }

  .site-logo,
  body.attributes-workspace-compact .site-logo{
    display:block!important;
    flex:0 0 auto!important;
    align-self:center!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }

  .site-brand-copy,
  body.attributes-workspace-compact .site-brand-copy{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
    gap:4px!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }

  .topbar .eyebrow,
  body.attributes-workspace-compact .topbar .eyebrow{
    display:block!important;
    margin:0!important;
    padding:0!important;
    line-height:1!important;
    transform:none!important;
  }

  .topbar h1,
  body.attributes-workspace-compact .topbar h1{
    display:block!important;
    margin:0!important;
    padding:0!important;
    line-height:1.05!important;
    transform:none!important;
  }

  /* ---------- Attribute page left rail: remove old 12px drop ---------- */
  body.attributes-workspace-compact .global-archetype-overview-card{
    top:0!important;
    margin-top:0!important;
    transform:none!important;
  }
}

/* Keep the same line-only language on mobile as well. */
@media(max-width:760px){
  .editor-view-tabs,
  body.attributes-workspace-compact .editor-view-tabs{
    border-left:0!important;
    border-right:0!important;
    border-top:0!important;
    border-bottom:1px solid rgba(220,229,237,.10)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
}

/* === SOURCE: css/199-v5556-header-nav-attribute-toolbar.css === */

/* v5.5.56
   1) Non-attribute brand copy returns to the attribute-page baseline.
   2) Navigation + entire workspace start 6px higher by reducing real header spacing.
   3) Attribute Points gets the same English-title + 46px toolbar cadence. */

@media(min-width:761px){
  /* ---------- Brand alignment ---------- */
  /* Attribute page is the visual reference. Other editor pages were ~2px too high. */
  body.non-attribute-editor-active .site-brand-copy{
    transform:translateY(2px)!important;
  }

  /* ---------- Move navigation + complete workspace upward 6px ---------- */
  .topbar,
  body.attributes-workspace-compact .topbar{
    margin-bottom:4px!important;
  }

  /* ---------- Attribute Points decorative English heading ---------- */
  body.attributes-workspace-compact .workspace-decor-header{
    display:block!important;
    flex:0 0 36px!important;
    width:100%!important;
    height:36px!important;
    min-height:36px!important;
    margin:0 0 6px!important;
  }

  /* ---------- Attribute workspace toolbar ---------- */
  body.attributes-workspace-compact .attribute-workspace-toolbar{
    box-sizing:border-box!important;
    width:100%!important;
    min-height:46px!important;
    height:46px!important;
    margin:0 0 9px!important;
    padding:6px 9px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    overflow:visible!important;
    border:1px solid rgba(218,228,238,.145)!important;
    border-radius:13px!important;
    background:
      linear-gradient(180deg,rgba(229,236,243,.092) 0%,rgba(198,209,219,.064) 42%,rgba(157,171,184,.044) 100%)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.090),
      inset 0 -1px 0 rgba(58,72,85,.18),
      0 4px 14px rgba(0,0,0,.12)!important;
    position:relative!important;
  }

  body.attributes-workspace-compact .attribute-workspace-toolbar::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    bottom:9px;
    width:2px;
    border-radius:0 2px 2px 0;
    background:linear-gradient(
      180deg,
      rgba(235,242,248,.16),
      rgba(235,242,248,.72),
      rgba(235,242,248,.16)
    );
    box-shadow:0 0 7px rgba(221,231,240,.10);
    pointer-events:none;
  }

  /* Existing controls become compact toolbar controls instead of two cards. */
  body.attributes-workspace-compact .attribute-workspace-toolbar .view-switch-row{
    flex:0 0 auto!important;
    width:auto!important;
    min-height:34px!important;
    height:34px!important;
    margin:0!important;
    padding:0 10px!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    border:1px solid rgba(218,228,238,.08)!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.018)!important;
    box-shadow:none!important;
  }

  body.attributes-workspace-compact .attribute-workspace-toolbar .tool-copy{
    display:flex!important;
    align-items:center!important;
  }

  body.attributes-workspace-compact .attribute-workspace-toolbar .tool-title{
    font-size:11.5px!important;
    line-height:1!important;
    font-weight:700!important;
    color:#8995a0!important;
    white-space:nowrap!important;
  }

  body.attributes-workspace-compact .attribute-workspace-toolbar .ios-switch{
    width:36px!important;
    height:22px!important;
    flex:0 0 36px!important;
  }

  body.attributes-workspace-compact .attribute-workspace-toolbar .cost-help{
    flex:0 0 auto!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:10px!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  body.attributes-workspace-compact .attribute-workspace-toolbar .cost-help>summary{
    box-sizing:border-box!important;
    min-height:34px!important;
    height:34px!important;
    padding:0 10px!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    border:1px solid rgba(218,228,238,.08)!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.018)!important;
    color:#8995a0!important;
    font-size:11.5px!important;
    font-weight:700!important;
    line-height:1!important;
    cursor:pointer!important;
  }

  body.attributes-workspace-compact .attribute-workspace-toolbar .cost-help>summary:hover,
  body.attributes-workspace-compact .attribute-workspace-toolbar .view-switch-row:hover{
    border-color:rgba(218,228,238,.14)!important;
    background:rgba(255,255,255,.028)!important;
  }

  body.attributes-workspace-compact .attribute-workspace-toolbar .cost-help-chevron{
    font-size:14px!important;
    color:#66737f!important;
  }

  /* The expanded cost explanation drops below the toolbar control itself. */
  body.attributes-workspace-compact .attribute-workspace-toolbar .cost-help-body{
    position:absolute!important;
    z-index:80!important;
    top:40px!important;
    right:0!important;
    width:min(430px,48vw)!important;
    padding:11px 12px 12px!important;
    border:1px solid rgba(218,228,238,.12)!important;
    border-radius:12px!important;
    background:rgba(10,16,22,.985)!important;
    box-shadow:0 16px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.035)!important;
  }

  /* Existing attribute canvas begins immediately after the standardized rail. */
  body.attributes-workspace-compact #attributes{
    margin-top:0!important;
  }
}

@media(max-width:760px){
  /* Keep mobile behavior unchanged; the desktop toolbar conversion should not
     interfere with the existing sticky mobile attribute controls. */
  body.attributes-workspace-compact .workspace-decor-header{
    display:none!important;
  }
}

/* === SOURCE: css/200-v5557-attribute-toolbar-header-lock.css === */

/* v5.5.57
   Header copy uses one immutable geometry on every page.
   Attribute Points receives a true desktop toolbar in the same workspace slot as other pages. */

@media(min-width:761px){
  /* ---------- Header lock: page switching must never move the brand ---------- */
  .topbar,
  body.attributes-workspace-compact .topbar,
  body.non-attribute-editor-active .topbar{
    align-items:center!important;
    overflow:visible!important;
  }

  .topbar>.site-brand,
  body.attributes-workspace-compact .topbar>.site-brand,
  body.non-attribute-editor-active .topbar>.site-brand{
    display:flex!important;
    align-items:center!important;
    align-self:center!important;
    gap:13px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    position:static!important;
  }

  .site-logo,
  body.attributes-workspace-compact .site-logo,
  body.non-attribute-editor-active .site-logo{
    align-self:center!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    position:static!important;
  }

  .site-brand-copy,
  body.attributes-workspace-compact .site-brand-copy,
  body.non-attribute-editor-active .site-brand-copy{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
    align-self:center!important;
    gap:4px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    translate:none!important;
    position:static!important;
    top:auto!important;
    bottom:auto!important;
  }

  .topbar .eyebrow,
  body.attributes-workspace-compact .topbar .eyebrow,
  body.non-attribute-editor-active .topbar .eyebrow{
    margin:0!important;
    padding:0!important;
    transform:none!important;
    position:static!important;
  }

  .topbar h1,
  body.attributes-workspace-compact .topbar h1,
  body.non-attribute-editor-active .topbar h1{
    margin:0!important;
    padding:0!important;
    transform:none!important;
    position:static!important;
  }

  /* Kill the previous v5.5.56 state-dependent compensation explicitly. */
  body.non-attribute-editor-active .site-brand-copy{
    transform:none!important;
  }

  /* ---------- The old mobile sticky controls are not the desktop toolbar ---------- */
  #mobileStickyControls .attribute-workspace-toolbar{
    display:none!important;
  }

  /* ---------- Dedicated Attribute Points toolbar ---------- */
  #attributeDesktopToolbar{
    display:none!important;
  }

  body.attributes-workspace-compact #attributeDesktopToolbar{
    box-sizing:border-box!important;
    width:100%!important;
    height:46px!important;
    min-height:46px!important;
    margin:0 0 9px!important;
    padding:6px 9px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    position:relative!important;
    overflow:visible!important;
    border:1px solid rgba(218,228,238,.145)!important;
    border-radius:13px!important;
    background:
      linear-gradient(180deg,rgba(229,236,243,.092) 0%,rgba(198,209,219,.064) 42%,rgba(157,171,184,.044) 100%)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.090),
      inset 0 -1px 0 rgba(58,72,85,.18),
      0 4px 14px rgba(0,0,0,.12)!important;
  }

  body.attributes-workspace-compact #attributeDesktopToolbar::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    bottom:9px;
    width:2px;
    border-radius:0 2px 2px 0;
    background:linear-gradient(180deg,rgba(235,242,248,.16),rgba(235,242,248,.72),rgba(235,242,248,.16));
    box-shadow:0 0 7px rgba(221,231,240,.10);
    pointer-events:none;
  }

  #attributeDesktopToolbar .toolbar-icon-button{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    flex:0 0 34px!important;
    border-radius:10px!important;
  }

  #attributeDesktopToolbar .toolbar-icon-button svg{
    width:16px!important;
    height:16px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }

  #attributeDesktopToolbar .attribute-toolbar-divider{
    width:1px;
    height:18px;
    margin:0 1px;
    flex:0 0 1px;
    background:rgba(222,231,239,.11);
  }

  #attributeDesktopToolbar .attribute-visibility-button .attribute-eye-off{
    display:none!important;
  }

  #attributeDesktopToolbar .attribute-visibility-button.is-filtered{
    color:#e0c978!important;
    border-color:rgba(216,184,95,.23)!important;
    background:rgba(216,184,95,.055)!important;
    box-shadow:inset 0 0 0 1px rgba(216,184,95,.025),0 0 12px rgba(216,184,95,.025)!important;
  }

  #attributeDesktopToolbar .attribute-visibility-button.is-filtered .attribute-eye-on{
    display:none!important;
  }
  #attributeDesktopToolbar .attribute-visibility-button.is-filtered .attribute-eye-off{
    display:block!important;
  }

  #attributeDesktopToolbar .attribute-price-help{
    position:relative!important;
    flex:0 0 auto!important;
    margin:0!important;
    padding:0!important;
  }

  #attributeDesktopToolbar .attribute-price-help>summary{
    list-style:none!important;
  }
  #attributeDesktopToolbar .attribute-price-help>summary::-webkit-details-marker{
    display:none!important;
  }

  #attributeDesktopToolbar .attribute-price-summary{
    box-sizing:border-box!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 11px!important;
    border-radius:10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#8995a0!important;
    font-size:11.5px!important;
    font-weight:700!important;
    cursor:pointer!important;
  }

  #attributeDesktopToolbar .attribute-price-help[open] .attribute-price-summary{
    color:#d8c27b!important;
    border-color:rgba(216,184,95,.20)!important;
    background:rgba(216,184,95,.045)!important;
  }

  #attributeDesktopToolbar .attribute-price-body{
    position:absolute!important;
    z-index:120!important;
    top:40px!important;
    left:0!important;
    width:380px!important;
    max-width:min(380px,52vw)!important;
    padding:11px 12px 12px!important;
    border:1px solid rgba(218,228,238,.12)!important;
    border-radius:12px!important;
    background:rgba(10,16,22,.985)!important;
    box-shadow:0 16px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.035)!important;
  }

  #attributeDesktopToolbar .attribute-price-body .cost-legend{
    margin:0!important;
  }

  /* Attribute content follows immediately after the toolbar just like other workspaces. */
  body.attributes-workspace-compact #attributes{
    margin-top:0!important;
  }
}

@media(max-width:760px){
  #attributeDesktopToolbar{
    display:none!important;
  }
}