/* === SOURCE: css/029-v337-pc-sidebar-refine.css === */

  .build-control-heading{
    padding:4px 2px 16px;
    margin-bottom:6px;
    justify-content:flex-start;
  }
  .build-control-eyebrow{
    font-size:14px;
    letter-spacing:.16em;
    color:#d7c18a;
  }
  .build-control-note{display:none!important;}
  .model-panel .label,
  .status-level .label{
    margin-bottom:8px;
  }
  #modelSelect,
  .reset-btn{
    width:100%;
    min-height:68px;
    height:68px;
    border-radius:24px;
  }
  #modelSelect{
    background:rgba(7,10,15,.88)!important;
    border:1.5px solid rgba(210,174,87,.88)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 0 0 1px rgba(210,174,87,.16);
  }
  .reset-btn{
    border:1.5px solid rgba(210,174,87,.86)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 0 0 1px rgba(210,174,87,.16);
  }
  .compact-status{
    padding:14px 16px 16px!important;
    border-radius:24px;
    overflow:hidden;
  }
  .compact-status .status-inline-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:10px;
  }
  .compact-status .status-inline{
    display:flex;
    align-items:baseline;
    gap:8px;
    min-width:0;
  }
  .compact-status .status-inline .k{
    font-size:14px;
    color:#96a0aa;
    font-weight:600;
    white-space:nowrap;
  }
  .compact-status .status-inline .v{
    font-size:20px;
    line-height:1;
    font-weight:800;
    color:#eef1f5;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  .compact-status .status-inline .u{
    font-size:.72em;
    opacity:.82;
    margin-left:2px;
  }
  .compact-status .status-inline.used .v{
    color:var(--ap-used-text)!important;
  }
  .compact-status .status-inline.remaining:not(.negative) .v,
  .compact-status #remainingStat:not(.negative) .v{
    color:var(--ap-remaining-text)!important;
  }
  .compact-status .status-progress{
    padding:0!important;
    margin:0!important;
    background:transparent!important;
  }
  .compact-status .status-progress-rail{
    height:12px;
    border-radius:999px;
    overflow:hidden;
    display:flex;
    background:rgba(255,255,255,.075);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  }

  .compact-special-panel{
    padding-top:12px!important;
    padding-bottom:10px!important;
  }
  .special-row.compact{
    padding:16px 0;
    border-top:1px solid rgba(255,255,255,.055);
  }
  .special-row.compact:first-child{
    border-top:0;
    padding-top:0;
  }
  .special-inline{
    display:grid;
    grid-template-columns:120px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
  }
  .special-inline-name{
    font-size:var(--fs-label);
    font-weight:700;
    color:#eef1f4;
    white-space:nowrap;
  }
  .special-inline-controls{
    min-width:0;
  }
  .star-rating-row{
    display:flex;
    gap:8px;
    flex-wrap:nowrap;
  }
  .star-rate-btn{
    min-width:56px;
    height:46px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    color:#9da6b2;
    background:rgba(255,255,255,.035);
    font-size:16px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    transition:transform .15s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  }
  .star-rate-btn[data-tier="1"].active{background:rgba(210,174,87,.10); border-color:rgba(210,174,87,.28); color:#d7c18a;}
  .star-rate-btn[data-tier="2"].active{background:rgba(210,174,87,.14); border-color:rgba(210,174,87,.34); color:#dcc688;}
  .star-rate-btn[data-tier="3"].active{background:rgba(210,174,87,.18); border-color:rgba(210,174,87,.42); color:#e2cb87;}
  .star-rate-btn[data-tier="4"].active{background:rgba(210,174,87,.24); border-color:rgba(210,174,87,.50); color:#e8d084;}
  .star-rate-btn[data-tier="5"].active{
    background:linear-gradient(180deg, rgba(218,183,96,.34), rgba(210,174,87,.24));
    border-color:rgba(224,191,106,.66);
    color:#f0d995;
    box-shadow:0 0 0 1px rgba(224,191,106,.14), 0 8px 20px rgba(210,174,87,.10);
  }
  .star-rate-btn.current{
    transform:translateY(-1px);
    box-shadow:0 0 0 1px rgba(224,191,106,.16), 0 10px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
  }
  .star-rate-btn:hover:not(.cap-disabled){
    border-color:rgba(224,191,106,.62);
    color:#f1d993;
  }
  .star-rate-btn.cap-disabled{
    opacity:.42;
    cursor:not-allowed;
    filter:saturate(.55);
  }
  .special-inline-cost{
    font-size:20px;
    font-weight:800;
    color:#d7bc76;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }

  @media (max-width: 980px){
    .special-inline{
      grid-template-columns:1fr;
      gap:10px;
    }
    .special-inline-name,
    .special-inline-cost{
      white-space:normal;
    }
    .special-inline-cost{
      justify-self:end;
    }
    .star-rating-row{
      flex-wrap:wrap;
    }
    .star-rate-btn{
      min-width:58px;
      flex:1 1 calc(20% - 8px);
    }
  }

/* === SOURCE: css/030-v338-compact-sidebar.css === */

/* =========================================================
   v3.3.8 — Compact PC sidebar
   No fixed sidebar height: the slab now follows real content height.
   ========================================================= */
@media(min-width:761px){
  .sidebar{
    height:auto!important;
    min-height:0!important;
    align-self:start;
    padding:14px!important;
  }

  .build-control-heading{
    padding:1px 2px 10px!important;
    margin-bottom:0!important;
  }
  .build-control-eyebrow{
    font-size:13px!important;
    letter-spacing:.13em!important;
  }

  /* Heading already says 原型选择, so hide the duplicate visual label on PC only. */
  .model-panel > .label{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
  }

  .sidebar > .panel{
    padding:11px 2px!important;
  }
  .sidebar > .model-panel,
  .sidebar > .status-panel{
    border-bottom-color:rgba(255,255,255,.05)!important;
  }
  .sidebar .reset-panel{
    padding:10px 2px 1px!important;
  }

  /* Select + reset use the same compact footprint. */
  #modelSelect,
  .reset-btn{
    width:100%!important;
    min-height:52px!important;
    height:52px!important;
    border-radius:18px!important;
  }
  #modelSelect{
    padding-left:14px!important;
    padding-right:14px!important;
    font-size:15px!important;
  }
  .reset-btn{
    font-size:12px!important;
  }

  /* Level line: trim vertical air without changing the familiar layout. */
  .status-level{
    grid-template-columns:68px 52px minmax(74px,1fr) 66px!important;
    gap:7px!important;
    padding:8px 0 10px!important;
    border-bottom:0!important;
  }
  .status-level .label{
    margin:0!important;
    font-size:12px!important;
  }
  .level-value{
    width:52px!important;
    height:36px!important;
    border-radius:12px!important;
    font-size:15px!important;
  }
  .status-level-ap{
    font-size:15px!important;
  }

  /* AP summary: one text row + thin capacity bar. */
  .compact-status{
    margin-top:0!important;
    padding:9px 10px 10px!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.015)!important;
  }
  .compact-status .status-inline-row{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin-bottom:7px!important;
  }
  .compact-status .status-inline{
    display:flex!important;
    align-items:baseline!important;
    gap:5px!important;
    min-width:0!important;
  }
  .compact-status .status-inline .k{
    font-size:11px!important;
    color:#89939e!important;
    font-weight:650!important;
  }
  .compact-status .status-inline .v{
    font-size:16px!important;
    line-height:1!important;
    font-weight:800!important;
  }
  .compact-status .status-inline .u{
    font-size:10px!important;
    margin-left:1px!important;
  }
  .compact-status .status-progress-rail{
    height:7px!important;
  }

  /* Star rows: name | five stars | AP — guaranteed to fit even at min sidebar width. */
  .compact-special-panel{
    padding-top:10px!important;
    padding-bottom:8px!important;
  }
  .special-row.compact{
    padding:10px 0!important;
  }
  .special-row.compact:first-child{
    padding-top:0!important;
  }
  .special-inline{
    display:grid!important;
    grid-template-columns:62px minmax(0,1fr) 44px!important;
    gap:4px!important;
    align-items:center!important;
  }
  .special-inline-name{
    font-size:12px!important;
    font-weight:700!important;
    line-height:1.1!important;
  }
  .special-inline-controls{
    min-width:0!important;
  }
  .star-rating-row{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:3px!important;
    width:100%!important;
  }
  .star-rate-btn{
    width:100%!important;
    min-width:0!important;
    height:32px!important;
    padding:0!important;
    border-radius:10px!important;
    font-size:11px!important;
    line-height:1!important;
    transform:none!important;
  }

  /* Always show a subtle 1→5 depth ramp; selected/owned stars intensify it. */
  .star-rate-btn[data-tier="1"]{background:rgba(210,174,87,.045)!important;border-color:rgba(210,174,87,.13)!important;}
  .star-rate-btn[data-tier="2"]{background:rgba(210,174,87,.065)!important;border-color:rgba(210,174,87,.17)!important;}
  .star-rate-btn[data-tier="3"]{background:rgba(210,174,87,.085)!important;border-color:rgba(210,174,87,.21)!important;}
  .star-rate-btn[data-tier="4"]{background:rgba(210,174,87,.11)!important;border-color:rgba(210,174,87,.25)!important;}
  .star-rate-btn[data-tier="5"]{background:rgba(210,174,87,.14)!important;border-color:rgba(210,174,87,.30)!important;}

  .star-rate-btn[data-tier="1"].active{background:rgba(210,174,87,.10)!important;border-color:rgba(210,174,87,.28)!important;}
  .star-rate-btn[data-tier="2"].active{background:rgba(210,174,87,.14)!important;border-color:rgba(210,174,87,.34)!important;}
  .star-rate-btn[data-tier="3"].active{background:rgba(210,174,87,.18)!important;border-color:rgba(210,174,87,.42)!important;}
  .star-rate-btn[data-tier="4"].active{background:rgba(210,174,87,.23)!important;border-color:rgba(210,174,87,.50)!important;}
  .star-rate-btn[data-tier="5"].active{
    background:linear-gradient(180deg,rgba(224,190,104,.34),rgba(210,174,87,.24))!important;
    border-color:rgba(229,196,111,.68)!important;
    color:#f3dc98!important;
  }
  .star-rate-btn.current{
    box-shadow:0 0 0 1px rgba(232,200,118,.20),0 5px 12px rgba(0,0,0,.20)!important;
  }
  .star-rate-btn[data-tier="5"].current{
    box-shadow:0 0 0 1px rgba(237,207,128,.30),0 7px 16px rgba(210,174,87,.13)!important;
  }
  .star-rate-btn.cap-disabled{
    opacity:.38!important;
  }

  .special-inline-cost{
    justify-self:end!important;
    font-size:12px!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }
}

/* v3.3.7 made some compact-PC rules global. Restore the proven mobile scale. */
@media(max-width:760px){
  #modelSelect{
    min-height:38px!important;
    height:38px!important;
    border-radius:var(--radius-control)!important;
    font-size:var(--m-fs-control)!important;
  }

  .compact-special-panel{
    padding:7px var(--m-card-pad)!important;
  }
  .special-row.compact{
    padding:7px 0!important;
  }
  .special-inline{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr) 46px!important;
    gap:5px!important;
    align-items:center!important;
  }
  .special-inline-name{
    font-size:var(--m-fs-primary)!important;
    white-space:nowrap!important;
  }
  .star-rating-row{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:2px!important;
  }
  .star-rate-btn{
    min-width:0!important;
    width:100%!important;
    height:28px!important;
    padding:0!important;
    border-radius:9px!important;
    font-size:9px!important;
  }
  .special-inline-cost{
    justify-self:end!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
}

/* === SOURCE: css/031-v339-star-state-visuals.css === */

/* =========================================================
   Star visual language
   - initial owned: already lit, progressively brighter from 1★ to base star
   - upgraded owned: more saturated
   - available: lights off, clickable
   - model hard cap: darkest, permanently non-interactive
   ========================================================= */

.star-rate-btn{
  position:relative;
  color:#8f98a3!important;
  background:rgba(255,255,255,.028)!important;
  border-color:rgba(255,255,255,.085)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  opacity:1!important;
}

/* Available but not bought: "lamp off". */
.star-rate-btn.available-off{
  color:#9aa2ac!important;
  background:rgba(255,255,255,.032)!important;
  border-color:rgba(255,255,255,.095)!important;
  cursor:pointer;
}
.star-rate-btn.available-off:hover{
  color:#d9c17e!important;
  border-color:rgba(215,193,126,.42)!important;
  background:rgba(210,174,87,.075)!important;
}

/* Initial owned stars: 1→5 progressively more luminous even before upgrades. */
.star-rate-btn.owned-initial[data-tier="1"]{
  color:#b69f65!important;
  background:rgba(210,174,87,.085)!important;
  border-color:rgba(210,174,87,.20)!important;
}
.star-rate-btn.owned-initial[data-tier="2"]{
  color:#c4ad70!important;
  background:rgba(210,174,87,.12)!important;
  border-color:rgba(210,174,87,.28)!important;
}
.star-rate-btn.owned-initial[data-tier="3"]{
  color:#d8be78!important;
  background:rgba(210,174,87,.17)!important;
  border-color:rgba(210,174,87,.38)!important;
}
.star-rate-btn.owned-initial[data-tier="4"]{
  color:#e3ca82!important;
  background:rgba(210,174,87,.22)!important;
  border-color:rgba(210,174,87,.48)!important;
}
.star-rate-btn.owned-initial[data-tier="5"]{
  color:#edd58d!important;
  background:rgba(210,174,87,.27)!important;
  border-color:rgba(224,191,106,.58)!important;
}

/* Bought upgrades: stronger saturation than archetype-owned stars. */
.star-rate-btn.owned-upgrade[data-tier="2"],
.star-rate-btn.owned-upgrade[data-tier="3"]{
  color:#e7ce83!important;
  background:rgba(218,182,91,.24)!important;
  border-color:rgba(224,190,101,.52)!important;
}
.star-rate-btn.owned-upgrade[data-tier="4"]{
  color:#f0d68b!important;
  background:rgba(220,182,88,.31)!important;
  border-color:rgba(232,198,111,.66)!important;
}
.star-rate-btn.owned-upgrade[data-tier="5"]{
  color:#f6df98!important;
  background:linear-gradient(180deg,rgba(229,194,105,.42),rgba(210,174,87,.30))!important;
  border-color:rgba(239,207,126,.78)!important;
  box-shadow:
    0 0 0 1px rgba(238,205,124,.16),
    0 7px 18px rgba(210,174,87,.13),
    inset 0 1px 0 rgba(255,255,255,.055)!important;
}

/* Current selected level gets an extra precise ring. */
.star-rate-btn.current:not(.hard-cap):not(.budget-locked){
  box-shadow:
    0 0 0 1px rgba(235,203,121,.26),
    0 6px 15px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04)!important;
}

/* Lower-than-base stars remain visibly owned, but cannot be clicked downward. */
.star-rate-btn.base-floor:disabled{
  cursor:default!important;
  opacity:1!important;
  filter:none!important;
}

/* Budget locked: currently unavailable, but visually distinguish from a true model cap. */
.star-rate-btn.budget-locked:disabled{
  color:#59616b!important;
  background:rgba(255,255,255,.022)!important;
  border-color:rgba(255,255,255,.055)!important;
  opacity:.62!important;
  cursor:not-allowed!important;
}

/* Hard model cap: permanently darkest. */
.star-rate-btn.hard-cap:disabled{
  color:#3f464f!important;
  background:rgba(255,255,255,.012)!important;
  border-color:rgba(255,255,255,.035)!important;
  opacity:.42!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
}

/* Ensure disabled owned base stars don't inherit the generic disabled dimming. */
.star-rate-btn.owned-initial.base-floor:disabled{
  opacity:1!important;
}

@media(max-width:760px){
  .star-rate-btn.available-off:hover{
    background:rgba(255,255,255,.032)!important;
    color:#9aa2ac!important;
    border-color:rgba(255,255,255,.095)!important;
  }
}

/* === SOURCE: css/032-v340-narrow-sidebar.css === */

/* ===== PC: sidebar ~15% narrower, released width goes to the three attribute columns ===== */
@media(min-width:761px){
  .workspace{
    grid-template-columns:clamp(276px,16vw,306px) minmax(0,1fr)!important;
    gap:18px!important;
  }

  /* Large desktop keeps the same ~15% reduction instead of jumping back to 350px. */
  .shell{--v340-sidebar-max:306px}

  .sidebar{
    padding:13px!important;
  }

  /* Shorter labels let the compact sidebar breathe. */
  .status-level{
    grid-template-columns:38px 50px minmax(64px,1fr) 62px!important;
    gap:6px!important;
  }
  .special-inline{
    grid-template-columns:38px minmax(0,1fr) 42px!important;
    gap:4px!important;
  }
  .special-inline-name{
    font-size:12px!important;
  }
  .special-inline-cost{
    font-size:11px!important;
  }

  /* More of each released pixel now reaches the attribute slider. */
  .attr-main{
    grid-template-columns:104px minmax(0,1fr) 92px!important;
    column-gap:10px!important;
  }
  .attr-name-wrap{
    width:104px!important;
  }

  /* Model select + reset: same font size as right-side attribute names. */
  #modelSelect,
  #resetBtn{
    font-size:var(--fs-label)!important;
    font-weight:700!important;
    letter-spacing:0!important;
  }

  /* Center selected archetype text within the control, not left aligned. */
  #modelSelect{
    text-align:center!important;
    text-align-last:center!important;
    padding-left:36px!important;
    padding-right:36px!important;
  }
  #modelSelect option,
  #modelSelect optgroup{
    text-align:left;
  }

  #resetBtn{
    text-align:center!important;
  }
}

/* Override the old 1700px rule that widened the sidebar again. */
@media(min-width:1700px){
  .workspace{
    grid-template-columns:306px minmax(0,1fr)!important;
    gap:18px!important;
  }
}

/* AP-shortage feedback for temporarily unaffordable star upgrades. */
.star-budget-toast{
  position:fixed;
  z-index:100;
  left:0;
  top:0;
  transform:translate(-50%,-100%) translateY(-5px) scale(.96);
  padding:5px 9px;
  border-radius:9px;
  border:1px solid rgba(214,183,79,.34);
  background:rgba(13,16,20,.96);
  color:#e7cc84;
  box-shadow:0 8px 22px rgba(0,0,0,.34);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .10s ease,transform .12s ease;
}
.star-budget-toast.show{
  opacity:1;
  transform:translate(-50%,-100%) translateY(-8px) scale(1);
}

/* Budget lock is visually dark but still intentionally clickable for the explanation. */
.star-rate-btn.budget-locked{
  cursor:pointer!important;
}
.star-rate-btn.budget-locked:hover{
  color:#7e7561!important;
  background:rgba(210,174,87,.035)!important;
  border-color:rgba(210,174,87,.12)!important;
}

/* Hard cap remains the darkest and truly non-interactive. */
.star-rate-btn.hard-cap:disabled{
  cursor:not-allowed!important;
}

/* Keep mobile width/layout untouched; only the shorter wording is shared. */
@media(max-width:760px){
  #modelSelect{
    text-align:left!important;
    text-align-last:auto!important;
  }
}

/* === SOURCE: css/033-v341-compact-controls-star-toggle.css === */

/* ===== PC: reduce vertical waste and soften gold framing ===== */
@media(min-width:761px){
  #modelSelect,
  #resetBtn{
    min-height:44px!important;
    height:44px!important;
    border-radius:14px!important;
    border-width:1px!important;
  }

  #modelSelect{
    border-color:rgba(210,174,87,.58)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }

  #resetBtn{
    border-color:rgba(210,174,87,.56)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }

  .model-panel{
    padding-top:9px!important;
    padding-bottom:9px!important;
  }

  .sidebar .reset-panel{
    padding-top:8px!important;
  }

  .compact-special-panel{
    padding-top:8px!important;
    padding-bottom:6px!important;
  }

  .special-row.compact{
    padding:9px 0!important;
  }
}

/* ===== Star state + toggle visual language, shared by PC and mobile ===== */

/* Initial stars: visibly lit and progressively stronger, but permanently owned. */
.star-rate-btn.owned-initial[data-tier="1"]{
  color:#b69f65!important;
  background:rgba(210,174,87,.085)!important;
  border-color:rgba(210,174,87,.20)!important;
}
.star-rate-btn.owned-initial[data-tier="2"]{
  color:#c4ad70!important;
  background:rgba(210,174,87,.12)!important;
  border-color:rgba(210,174,87,.28)!important;
}
.star-rate-btn.owned-initial[data-tier="3"]{
  color:#d8be78!important;
  background:rgba(210,174,87,.17)!important;
  border-color:rgba(210,174,87,.38)!important;
}
.star-rate-btn.owned-initial[data-tier="4"]{
  color:#e3ca82!important;
  background:rgba(210,174,87,.22)!important;
  border-color:rgba(210,174,87,.48)!important;
}
.star-rate-btn.owned-initial[data-tier="5"]{
  color:#edd58d!important;
  background:rgba(210,174,87,.27)!important;
  border-color:rgba(224,191,106,.58)!important;
}
.star-rate-btn.owned-initial.base-floor:disabled{
  opacity:1!important;
  filter:none!important;
  cursor:default!important;
}

/* Purchased upgrades are more saturated than initial-owned levels. */
.star-rate-btn.owned-upgrade{
  color:#efd486!important;
  background:rgba(220,182,88,.28)!important;
  border-color:rgba(232,198,111,.62)!important;
}
.star-rate-btn.owned-upgrade[data-tier="5"]{
  color:#f6df98!important;
  background:linear-gradient(180deg,rgba(229,194,105,.42),rgba(210,174,87,.30))!important;
  border-color:rgba(239,207,126,.78)!important;
  box-shadow:
    0 0 0 1px rgba(238,205,124,.14),
    0 7px 18px rgba(210,174,87,.12),
    inset 0 1px 0 rgba(255,255,255,.05)!important;
}

/* Available upgrade, still off. */
.star-rate-btn.available-off{
  color:#949ca6!important;
  background:rgba(255,255,255,.028)!important;
  border-color:rgba(255,255,255,.085)!important;
  cursor:pointer!important;
}
.star-rate-btn.available-off:hover{
  color:#d9c17e!important;
  background:rgba(210,174,87,.07)!important;
  border-color:rgba(210,174,87,.34)!important;
}

/* Temporary AP lock: dark, but clickable to show the reason. */
.star-rate-btn.budget-locked{
  color:#59616b!important;
  background:rgba(255,255,255,.022)!important;
  border-color:rgba(255,255,255,.055)!important;
  opacity:.68!important;
  cursor:pointer!important;
}
.star-rate-btn.budget-locked:hover{
  color:#887d63!important;
  background:rgba(210,174,87,.035)!important;
  border-color:rgba(210,174,87,.12)!important;
}

/* Hard model cap: darkest + truly non-interactive. */
.star-rate-btn.hard-cap:disabled{
  color:#3e454d!important;
  background:rgba(255,255,255,.010)!important;
  border-color:rgba(255,255,255,.030)!important;
  opacity:.40!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
}

/* Current selected upgrade ring. */
.star-rate-btn.current:not(.base-floor):not(.hard-cap):not(.budget-locked){
  box-shadow:
    0 0 0 1px rgba(235,203,121,.24),
    0 5px 14px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04)!important;
}

/* ===== Mobile: use the exact same semantics, fix cramped/garbled row ===== */
@media(max-width:760px){
  .compact-special-panel{
    padding:7px var(--m-card-pad)!important;
  }

  .special-row.compact{
    padding:8px 0!important;
  }

  .special-inline{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 40px!important;
    gap:4px!important;
    align-items:center!important;
  }

  .special-inline-name{
    font-size:11px!important;
    font-weight:700!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  .star-rating-row{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:3px!important;
    min-width:0!important;
  }

  .star-rate-btn{
    width:100%!important;
    min-width:0!important;
    height:30px!important;
    padding:0!important;
    border-radius:9px!important;
    font-size:10px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }

  .special-inline-cost{
    justify-self:end!important;
    font-size:10px!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }

  /* touch devices: don't leave a fake hover state */
  .star-rate-btn.available-off:hover{
    color:#949ca6!important;
    background:rgba(255,255,255,.028)!important;
    border-color:rgba(255,255,255,.085)!important;
  }
}

/* === SOURCE: css/034-v342-star-tooltip-mobile-fix.css === */

/* Reset button copy is intentionally quieter. */
#resetBtn{
  font-weight:400!important;
}

/* One compact hover language for star actions. */
.star-rate-btn[data-tip]{
  position:relative;
}
@media(hover:hover) and (pointer:fine){
  .star-rate-btn[data-tip]::after{
    content:attr(data-tip);
    position:absolute;
    left:50%;
    bottom:calc(100% + 7px);
    transform:translateX(-50%) translateY(3px);
    z-index:120;
    min-width:max-content;
    padding:4px 7px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:7px;
    background:rgba(10,13,17,.96);
    color:#d9dde3;
    box-shadow:0 7px 18px rgba(0,0,0,.32);
    font-size:10px;
    font-weight:650;
    line-height:1.1;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .09s ease,transform .10s ease;
  }
  .star-rate-btn[data-tip]::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:calc(100% + 3px);
    transform:translateX(-50%);
    z-index:119;
    width:7px;
    height:7px;
    background:rgba(10,13,17,.96);
    border-right:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    rotate:45deg;
    opacity:0;
    pointer-events:none;
    transition:opacity .09s ease;
  }
  .star-rate-btn[data-tip]:hover::after{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
  .star-rate-btn[data-tip]:hover::before{
    opacity:1;
  }
}

/* AP-locked star uses the same hover popup style, not a separate visual language. */
.star-rate-btn.budget-locked[data-tip]::after{
  color:#e5cb86;
}

/* Mobile garble fix:
   old mobile .special-row is itself a 3-column grid. The new v3.4.x DOM puts
   one .special-inline grid inside it, so that outer grid was squeezing the
   entire row into its first column. Force the compact row back to a full-width
   block before laying out name | five stars | AP. */
@media(max-width:760px){
  .special-row.compact{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    grid-template-columns:none!important;
    grid-template-areas:none!important;
    gap:0!important;
  }

  .special-inline{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 40px!important;
    gap:4px!important;
    align-items:center!important;
  }

  .special-inline-controls,
  .star-rating-row{
    width:100%!important;
    min-width:0!important;
  }

  .star-rating-row{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:3px!important;
  }

  .star-rate-btn{
    min-width:0!important;
    width:100%!important;
    height:30px!important;
    padding:0!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    font-family:inherit!important;
    font-size:10px!important;
    line-height:30px!important;
  }

  .special-inline-name,
  .special-inline-cost{
    min-width:0!important;
    white-space:nowrap!important;
  }

  /* Touch has no persistent hover; AP shortage is shown via the matching 0.5s toast. */
  .star-rate-btn[data-tip]::after,
  .star-rate-btn[data-tip]::before{
    display:none!important;
  }
}

/* Touch AP-shortage toast matches the desktop hover bubble. */
.star-budget-toast{
  padding:4px 7px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:7px!important;
  background:rgba(10,13,17,.96)!important;
  color:#e5cb86!important;
  box-shadow:0 7px 18px rgba(0,0,0,.32)!important;
  font-size:10px!important;
  font-weight:650!important;
}

/* === SOURCE: css/035-v343-mobile-ap-bar-star-tone.css === */

/* =========================================================
   1) Star colors: keep the 1→5 progression, but make it much more restrained.
   ========================================================= */

/* Initial-owned stars: same gold family, only a small luminance/saturation ramp. */
.star-rate-btn.owned-initial[data-tier="1"]{
  color:#c4ad73!important;
  background:rgba(210,174,87,.10)!important;
  border-color:rgba(210,174,87,.22)!important;
}
.star-rate-btn.owned-initial[data-tier="2"]{
  color:#c9b176!important;
  background:rgba(210,174,87,.115)!important;
  border-color:rgba(210,174,87,.245)!important;
}
.star-rate-btn.owned-initial[data-tier="3"]{
  color:#ceb679!important;
  background:rgba(210,174,87,.13)!important;
  border-color:rgba(210,174,87,.27)!important;
}
.star-rate-btn.owned-initial[data-tier="4"]{
  color:#d3bb7c!important;
  background:rgba(210,174,87,.145)!important;
  border-color:rgba(210,174,87,.295)!important;
}
.star-rate-btn.owned-initial[data-tier="5"]{
  color:#d8c080!important;
  background:rgba(210,174,87,.16)!important;
  border-color:rgba(210,174,87,.32)!important;
}

/* Bought upgrades: slightly fuller than initial-owned, but no big jump. */
.star-rate-btn.owned-upgrade[data-tier="2"],
.star-rate-btn.owned-upgrade[data-tier="3"]{
  color:#d9c17f!important;
  background:rgba(214,178,89,.18)!important;
  border-color:rgba(222,188,101,.36)!important;
}
.star-rate-btn.owned-upgrade[data-tier="4"]{
  color:#dec683!important;
  background:rgba(216,180,90,.20)!important;
  border-color:rgba(225,191,104,.40)!important;
}
.star-rate-btn.owned-upgrade[data-tier="5"]{
  color:#e3cb87!important;
  background:rgba(218,182,92,.22)!important;
  border-color:rgba(228,195,108,.44)!important;
  box-shadow:
    0 0 0 1px rgba(228,195,108,.08),
    0 5px 12px rgba(210,174,87,.06),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* Current selected level: precise ring, not a large visual jump. */
.star-rate-btn.current:not(.base-floor):not(.hard-cap):not(.budget-locked){
  box-shadow:
    0 0 0 1px rgba(230,199,116,.18),
    0 4px 10px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* =========================================================
   2) Mobile AP summary: storage-capacity feel.
      Thicker main rail + one-line text below it.
   ========================================================= */
@media(max-width:760px){
  .mobile-compact-summary{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-areas:
      "bar bar"
      "used remain"!important;
    gap:0!important;
    overflow:hidden!important;
  }

  .mobile-compact-summary .mobile-summary-progress{
    grid-area:bar!important;
    padding:10px 12px 7px!important;
    background:#15171C!important;
  }

  .mobile-compact-summary .mobile-summary-rail{
    height:14px!important;
    border-radius:999px!important;
    background:var(--ap-track)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      inset 0 -1px 0 rgba(0,0,0,.22)!important;
  }

  .mobile-compact-summary .mobile-summary-item{
    min-height:28px!important;
    padding:2px 12px 8px!important;
    display:flex!important;
    align-items:baseline!important;
    gap:6px!important;
    background:#15171C!important;
  }

  .mobile-compact-summary .mobile-summary-item.used{
    grid-area:used!important;
    justify-content:flex-start!important;
  }

  .mobile-compact-summary .mobile-summary-item.remaining{
    grid-area:remain!important;
    justify-content:flex-end!important;
    border-left:0!important;
  }

  .mobile-compact-summary .mobile-summary-item .k{
    font-size:11px!important;
    line-height:1!important;
    margin:0!important;
    color:#858A95!important;
    font-weight:750!important;
    white-space:nowrap!important;
  }

  .mobile-compact-summary .mobile-summary-item .v{
    font-size:16px!important;
    line-height:1!important;
    margin:0!important;
    font-weight:850!important;
    white-space:nowrap!important;
  }

  /* Docked: text disappears, but the capacity rail keeps enough visual presence. */
  .mobile-compact-summary.is-docked .mobile-summary-progress{
    padding:8px 10px!important;
  }

  .mobile-compact-summary.is-docked .mobile-summary-rail{
    height:12px!important;
  }

  .mobile-compact-summary.is-docked .mobile-summary-item{
    min-height:0!important;
    max-height:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    opacity:0!important;
    overflow:hidden!important;
  }

  /* Make the storage bar itself the hero; no extra tall empty shell. */
  .mobile-compact-summary.is-docked{
    min-height:0!important;
  }
}

@media(max-width:430px){
  .mobile-compact-summary .mobile-summary-progress{
    padding:9px 10px 6px!important;
  }
  .mobile-compact-summary .mobile-summary-rail{
    height:13px!important;
  }
  .mobile-compact-summary .mobile-summary-item{
    padding:2px 10px 7px!important;
  }
  .mobile-compact-summary .mobile-summary-item .k{
    font-size:10px!important;
  }
  .mobile-compact-summary .mobile-summary-item .v{
    font-size:15px!important;
  }
  .mobile-compact-summary.is-docked .mobile-summary-rail{
    height:11px!important;
  }
}

/* === SOURCE: css/036-v345-mobile-star-333-style.css === */

@media(max-width:760px){
  /* Keep the longer mobile labels but use the roomier 3.3.3 style layout. */
  .special-inline{
    grid-template-columns:72px minmax(0,1fr) 48px!important;
    gap:8px!important;
    align-items:center!important;
  }
  .special-inline-name{
    font-size:var(--m-fs-primary)!important;
    line-height:1!important;
    font-weight:700!important;
    color:#c5c5ca!important;
    white-space:nowrap!important;
  }
  .special-inline-controls{
    min-width:0!important;
  }
  .star-rating-row{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
  }
  .star-rate-btn{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:34px!important;
    padding:0 8px!important;
    border-radius:12px!important;
    font-size:12px!important;
    line-height:34px!important;
    justify-content:center!important;
  }
  .special-inline-cost{
    width:48px!important;
    justify-self:end!important;
    text-align:right!important;
    font-size:10px!important;
    font-weight:800!important;
  }

  /* Mobile model select: thinner restrained gold line + centered selected value. */
  #modelSelect{
    border:1px solid rgba(208,173,88,.36)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
    text-align:center!important;
    text-align-last:center!important;
    padding-left:28px!important;
    padding-right:28px!important;
  }
  #modelSelect:hover{
    border-color:rgba(208,173,88,.44)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.022)!important;
  }
  #modelSelect:focus,
  #modelSelect:focus-visible{
    border-color:rgba(224,190,102,.54)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 0 0 1px rgba(208,173,88,.04)!important;
  }
}

@media(max-width:430px){
  .special-inline{
    grid-template-columns:68px minmax(0,1fr) 44px!important;
    gap:7px!important;
  }
  .star-rating-row{gap:5px!important;}
  .star-rate-btn{
    height:33px!important;
    border-radius:11px!important;
    font-size:11px!important;
    line-height:33px!important;
    padding:0 6px!important;
  }
  .special-inline-cost{
    width:44px!important;
    font-size:10px!important;
  }
}

@media(max-width:390px){
  .special-inline{
    grid-template-columns:64px minmax(0,1fr) 40px!important;
    gap:6px!important;
  }
  .star-rating-row{gap:4px!important;}
  .star-rate-btn{
    height:32px!important;
    border-radius:11px!important;
    font-size:11px!important;
    line-height:32px!important;
    padding:0 5px!important;
  }
  .special-inline-cost{
    width:40px!important;
    font-size:9px!important;
  }
}

@media(max-width:360px){
  .special-inline{
    grid-template-columns:60px minmax(0,1fr) 36px!important;
    gap:5px!important;
  }
  .special-inline-name{
    font-size:14px!important;
  }
  .star-rate-btn{
    height:30px!important;
    border-radius:10px!important;
    font-size:10px!important;
    line-height:30px!important;
    padding:0 4px!important;
  }
  .special-inline-cost{
    width:36px!important;
    font-size:9px!important;
  }
}

/* === SOURCE: css/037-v349-full-archetype-logos.css === */

/* One icon-capable archetype picker for PC + mobile. Native select stays as data source. */
#modelSelect{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  clip:rect(0,0,0,0)!important;
}
.model-panel{position:relative;overflow:visible!important}
.mobile-model-picker{display:block;position:relative;min-width:0;width:100%}
.mobile-model-trigger{
  position:relative;
  width:100%;
  height:44px;
  padding:0 46px 0 18px;
  border:1px solid rgba(208,173,88,.30);
  border-radius:14px;
  background:#111113;
  color:#f0f0ee;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  font-size:var(--fs-label);
  font-weight:600;
  text-align:center;
  overflow:hidden;
}
.mobile-model-trigger-content{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-width:0;
}
.mobile-model-trigger-icon{width:24px;height:24px;object-fit:contain;flex:0 0 auto;opacity:.96}
.mobile-model-trigger-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-model-trigger-chevron{
  position:absolute;right:14px;top:50%;transform:translateY(-52%);
  color:#d8dce1;font-size:18px;font-weight:500;pointer-events:none
}
.mobile-model-picker.open .mobile-model-trigger{
  border-color:rgba(224,190,102,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 0 0 1px rgba(208,173,88,.04)
}
.mobile-model-menu{
  position:absolute;z-index:120;left:0;right:0;top:calc(100% + 7px);
  max-height:min(62vh,480px);overflow:auto;padding:7px;
  border:1px solid rgba(255,255,255,.09);border-radius:14px;
  background:rgba(14,17,21,.985);box-shadow:0 16px 38px rgba(0,0,0,.48);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transform:translateY(-4px) scale(.99);transform-origin:top center;
  transition:opacity .12s ease,transform .12s ease,visibility .12s ease
}
.mobile-model-picker.open .mobile-model-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.mobile-model-group{
  padding:8px 10px 5px;color:#727b86;font-size:10px;font-weight:800;letter-spacing:.08em;text-align:left
}
.mobile-model-option{
  width:100%;min-height:40px;padding:0 10px;border:0;border-radius:9px;background:transparent;
  color:#e8ebef;display:flex;align-items:center;justify-content:flex-start;text-align:left;
  font-size:13px;font-weight:600
}
.mobile-model-option + .mobile-model-option{margin-top:1px}
.mobile-model-option:hover{background:rgba(255,255,255,.045)}
.mobile-model-option.selected{background:rgba(210,174,87,.10);color:#efd58f}
.mobile-model-option-inner{display:flex;align-items:center;gap:10px;width:100%;min-width:0}
.mobile-model-option-icon{width:22px;height:22px;object-fit:contain;flex:0 0 auto;opacity:.96}
.mobile-model-option-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:760px){
  .mobile-model-trigger{
    height:38px;padding:0 34px 0 14px;border-radius:var(--radius-control);
    border-color:rgba(208,173,88,.28);font-size:var(--m-fs-control)
  }
  .mobile-model-trigger-content{gap:8px}
  .mobile-model-trigger-icon{width:20px;height:20px}
  .mobile-model-trigger-chevron{right:11px;font-size:18px}
  .mobile-model-menu{top:calc(100% + 6px);max-height:min(58vh,420px);padding:6px;border-radius:14px}
  .mobile-model-group{padding:7px 9px 5px;font-size:10px}
  .mobile-model-option{min-height:38px;padding:0 9px;font-size:14px}
  .mobile-model-option-inner{gap:9px}
  .mobile-model-option-icon{width:19px;height:19px}
}

/* === SOURCE: css/038-v3410-logo-safe-mobile-overlay.css === */

/* Give every logo its own safety box. This prevents visual cropping even when
   individual source artwork reaches close to its transparent-canvas edge. */
.archetype-icon-safe{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible!important;
}
.archetype-icon-safe.option-safe{
  width:26px;
  height:26px;
  flex-basis:26px;
}
.mobile-model-trigger-icon,
.mobile-model-option-icon{
  display:block;
  width:88%!important;
  height:88%!important;
  max-width:88%!important;
  max-height:88%!important;
  object-fit:contain!important;
  object-position:center!important;
  flex:0 0 auto!important;
  overflow:visible!important;
  transform:none!important;
}

/* Also allow the icon row itself to breathe. */
.mobile-model-option-inner,
.mobile-model-trigger-content{
  overflow:visible!important;
}

/* Menu can open either inside the picker (desktop) or as a body-level portal
   (mobile). Both states use the same visual appearance. */
.mobile-model-menu.is-open{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0) scale(1)!important;
}

@media(max-width:760px){
  .model-panel,
  .sidebar,
  .workspace,
  .shell{
    overflow:visible!important;
  }

  .model-panel:has(.mobile-model-picker.open),
  .mobile-model-picker.open{
    position:relative!important;
    z-index:99990!important;
  }

  .archetype-icon-safe{
    width:24px;
    height:24px;
    flex-basis:24px;
  }
  .archetype-icon-safe.option-safe{
    width:23px;
    height:23px;
    flex-basis:23px;
  }

  /* The dropdown is physically moved under <body> while open, so no card,
     sticky dock, backdrop-filter or parent stacking context can cover it. */
  .mobile-model-menu.model-menu-portaled{
    position:fixed!important;
    z-index:99999!important;
    right:auto!important;
    margin:0!important;
    transform-origin:top center!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}

/* === SOURCE: css/039-v3411-mobile-sticky-reset.css === */

.mobile-sticky-reset-btn{display:none}

@media(max-width:760px){
  .mobile-sticky-controls .attribute-tools{
    position:relative;
    display:grid!important;
    grid-template-columns:minmax(0,1.38fr) minmax(0,1.05fr) 62px!important;
    gap:6px!important;
    align-items:stretch!important;
  }

  .mobile-sticky-controls .view-switch-row,
  .mobile-sticky-controls .cost-help,
  .mobile-sticky-reset-btn{
    min-width:0!important;
    min-height:46px!important;
    height:46px!important;
    border-radius:14px!important;
  }

  .mobile-sticky-controls .view-switch-row{
    padding:0 9px!important;
    gap:6px!important;
  }

  .mobile-sticky-controls .tool-title{
    font-size:11px!important;
    letter-spacing:-.01em!important;
    white-space:nowrap!important;
  }

  .mobile-sticky-controls .ios-switch{
    width:36px!important;
    height:22px!important;
  }
  .mobile-sticky-controls .switch-thumb{
    width:16px!important;
    height:16px!important;
    top:2px!important;
    left:2px!important;
  }
  .mobile-sticky-controls .ios-switch input:checked + .switch-track .switch-thumb{
    transform:translateX(14px)!important;
  }

  .mobile-sticky-controls .cost-help{
    overflow:visible!important;
  }

  .mobile-sticky-controls .cost-help summary{
    min-height:46px!important;
    height:46px!important;
    padding:0 9px!important;
    gap:5px!important;
    font-size:11px!important;
    white-space:nowrap!important;
  }

  .mobile-sticky-controls .cost-help-chevron{
    font-size:15px!important;
    flex:0 0 auto!important;
  }

  /* Keep the second-row width compact, but let the help body open full-width
     below the row so its explanatory content doesn't get squeezed. */
  .mobile-sticky-controls .cost-help-body{
    position:absolute!important;
    z-index:18!important;
    left:0!important;
    right:0!important;
    top:calc(100% + 6px)!important;
    padding:10px!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:14px!important;
    background:rgba(13,18,25,.98)!important;
    box-shadow:0 14px 34px rgba(0,0,0,.34)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }

  .mobile-sticky-reset-btn{
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:0;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(15,21,29,.58);
    color:#a7afb8;
    box-shadow:0 10px 24px rgba(0,0,0,.14);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  .mobile-sticky-reset-icon{
    color:#d2bb78;
    font-size:17px;
    line-height:1;
    font-weight:500;
  }

  .mobile-sticky-reset-label{
    font-size:9px;
    line-height:1;
    font-weight:500;
    color:#969faa;
  }

  .mobile-sticky-reset-btn:active{
    transform:scale(.97);
    background:rgba(210,174,87,.055);
    border-color:rgba(210,174,87,.20);
  }

  .mobile-sticky-controls.is-docked .mobile-sticky-reset-btn{
    background:rgba(15,21,29,.93);
    box-shadow:0 8px 20px rgba(0,0,0,.22);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
}

@media(max-width:430px){
  .mobile-sticky-controls .attribute-tools{
    grid-template-columns:minmax(0,1.45fr) minmax(0,.98fr) 56px!important;
    gap:5px!important;
  }
  .mobile-sticky-controls .view-switch-row,
  .mobile-sticky-controls .cost-help,
  .mobile-sticky-reset-btn{
    min-height:44px!important;
    height:44px!important;
    border-radius:13px!important;
  }
  .mobile-sticky-controls .cost-help summary{
    min-height:44px!important;
    height:44px!important;
    padding:0 7px!important;
    font-size:10px!important;
  }
  .mobile-sticky-controls .view-switch-row{
    padding:0 7px!important;
  }
  .mobile-sticky-controls .tool-title{
    font-size:10px!important;
  }
  .mobile-sticky-controls .ios-switch{
    width:34px!important;
    height:21px!important;
  }
  .mobile-sticky-controls .switch-thumb{
    width:15px!important;
    height:15px!important;
  }
  .mobile-sticky-controls .ios-switch input:checked + .switch-track .switch-thumb{
    transform:translateX(13px)!important;
  }
  .mobile-sticky-reset-icon{font-size:16px}
  .mobile-sticky-reset-label{font-size:8px}
}

/* === SOURCE: css/040-v350-ut-similarity-demo.css === */

.ut-sim-panel{display:none}

@media(min-width:761px){
  .ut-sim-panel{
    display:block;
    margin-top:12px;
    padding:12px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:18px;
    background:rgba(16,21,28,.66);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  }

  .ut-sim-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
  }

  .ut-sim-title{
    font-size:13px;
    font-weight:800;
    color:#eef1f4;
  }

  .ut-sim-sub{
    margin-top:3px;
    font-size:9px;
    color:#737d88;
  }

  .ut-sim-demo-badge{
    padding:3px 6px;
    border:1px solid rgba(210,174,87,.22);
    border-radius:999px;
    color:#cbb477;
    background:rgba(210,174,87,.06);
    font-size:8px;
    font-weight:850;
    letter-spacing:.07em;
  }

  .ut-sim-mode{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    padding:3px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:11px;
    background:rgba(0,0,0,.15);
  }

  .ut-mode-btn{
    height:30px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#858f9a;
    font-size:10px;
    font-weight:750;
  }

  .ut-mode-btn.active{
    background:rgba(210,174,87,.11);
    color:#ddc27d;
    box-shadow:inset 0 0 0 1px rgba(210,174,87,.16);
  }

  .ut-sim-rule{
    margin:8px 2px;
    color:#76808a;
    font-size:9px;
    line-height:1.35;
    text-align:center;
  }

  .ut-match-btn{
    width:100%;
    height:34px;
    border:1px solid rgba(210,174,87,.26);
    border-radius:11px;
    background:rgba(210,174,87,.065);
    color:#e2ca88;
    font-size:10px;
    font-weight:800;
  }

  .ut-match-btn:hover{
    border-color:rgba(210,174,87,.40);
    background:rgba(210,174,87,.09);
  }

  .ut-match-result{
    margin-top:10px;
  }

  .ut-match-empty{
    min-height:44px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:8px;
    border:1px dashed rgba(255,255,255,.06);
    border-radius:11px;
    color:#717b85;
    font-size:9px;
    text-align:center;
  }

  .ut-match-empty strong{
    color:#9da6af;
    font-size:10px;
  }

  .ut-match-kicker{
    margin-bottom:5px;
    color:#707a84;
    font-size:8px;
    font-weight:800;
    letter-spacing:.04em;
  }

  .ut-top-match{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 42px;
    gap:8px;
    align-items:center;
    padding:9px;
    border:1px solid rgba(255,255,255,.065);
    border-radius:13px;
    background:rgba(255,255,255,.025);
    text-decoration:none;
    color:inherit;
  }

  .ut-top-match:hover{
    border-color:rgba(210,174,87,.18);
    background:rgba(210,174,87,.035);
  }

  .ut-top-rating{
    width:38px;
    height:42px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:linear-gradient(180deg,rgba(210,174,87,.18),rgba(210,174,87,.07));
    border:1px solid rgba(210,174,87,.25);
    color:#e4ca84;
    font-size:18px;
    font-weight:900;
  }

  .ut-top-copy{
    min-width:0;
  }

  .ut-top-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#f0f2f5;
    font-size:11px;
    font-weight:800;
  }

  .ut-top-meta{
    margin-top:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#7d8791;
    font-size:8px;
  }

  .ut-top-score{
    text-align:right;
  }

  .ut-top-score strong{
    display:block;
    color:#76d08f;
    font-size:15px;
    line-height:1;
  }

  .ut-top-score span{
    display:block;
    margin-top:4px;
    color:#737d87;
    font-size:8px;
  }

  .ut-match-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    margin-top:5px;
  }

  .ut-match-metrics span{
    padding:5px 3px;
    border-radius:8px;
    background:rgba(255,255,255,.022);
    color:#68727c;
    font-size:8px;
    text-align:center;
  }

  .ut-match-metrics b{
    color:#cbd1d7;
    font-weight:800;
  }

  .ut-alt-list{
    margin-top:6px;
    border-top:1px solid rgba(255,255,255,.045);
  }

  .ut-alt-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:6px;
    align-items:center;
    min-height:29px;
    text-decoration:none;
    color:#8d97a1;
    font-size:8px;
    border-bottom:1px solid rgba(255,255,255,.035);
  }

  .ut-alt-row span:first-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#b8c0c8;
  }

  .ut-alt-row b{
    color:#a9cdb2;
  }

  .ut-demo-note{
    margin-top:7px;
    color:#5f6872;
    font-size:7px;
    text-align:center;
  }

  .ut-sim-panel.disabled .ut-sim-mode,
  .ut-sim-panel.disabled .ut-sim-rule,
  .ut-sim-panel.disabled .ut-match-btn{
    opacity:.35;
    pointer-events:none;
  }
}

/* === SOURCE: css/041-v351-ea-official-db.css === */

@media(min-width:761px){
  .ut-db-line{
    display:grid;
    grid-template-columns:7px minmax(0,1fr) auto;
    gap:6px;
    align-items:center;
    min-height:25px;
    margin:7px 1px;
    padding:0 5px;
    border-radius:8px;
    background:rgba(255,255,255,.018);
  }

  .ut-db-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#5e6771;
    box-shadow:0 0 0 2px rgba(94,103,113,.10);
  }
  .ut-db-dot.loading{
    background:#d1ad57;
    box-shadow:0 0 0 2px rgba(209,173,87,.12);
    animation:utDbPulse 1s ease-in-out infinite;
  }
  .ut-db-dot.ready{
    background:#62ba80;
    box-shadow:0 0 0 2px rgba(98,186,128,.12);
  }
  .ut-db-dot.error{
    background:#b85d5a;
    box-shadow:0 0 0 2px rgba(184,93,90,.12);
  }

  @keyframes utDbPulse{
    0%,100%{opacity:.5}
    50%{opacity:1}
  }

  .ut-db-status-text{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#707a84;
    font-size:8px;
  }

  .ut-db-refresh{
    border:0;
    background:transparent;
    color:#83745b;
    padding:2px 3px;
    font-size:8px;
    font-weight:700;
  }
  .ut-db-refresh:hover{color:#d5bc7b}

  .ut-match-btn:disabled{
    cursor:wait;
    opacity:.68;
  }
}

/* === SOURCE: css/042-v352-similar-player-drawer.css === */

/* ===== PC post-build actions ===== */
.post-build-tools{display:none}

@media(min-width:761px){
  .post-build-tools{
    display:grid;
    grid-template-columns:minmax(0,1.22fr) minmax(0,.92fr);
    gap:7px;
    min-height:38px;
  }

  .post-build-action{
    min-width:0;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:12px;
    background:rgba(18,21,26,.72);
    color:#aeb6bf;
    font-size:10px;
    font-weight:750;
    letter-spacing:.01em;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.022);
  }

  .similarity-action{
    border-color:rgba(210,174,87,.16);
    color:#d8dde2;
  }
  .similarity-action:hover{
    border-color:rgba(210,174,87,.32);
    background:rgba(210,174,87,.045);
    color:#f0f2f4;
  }

  .post-build-beta{
    display:inline-flex;
    align-items:center;
    height:15px;
    padding:0 5px;
    border-radius:999px;
    border:1px solid rgba(210,174,87,.13);
    background:rgba(210,174,87,.045);
    color:#9f916f;
    font-size:6.5px;
    line-height:1;
    letter-spacing:.08em;
    font-weight:850;
  }

  .player-card-action{
    color:#727c86;
    background:rgba(15,18,22,.52);
    cursor:default;
  }
}

/* ===== Drawer ===== */
.ut-drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:99970;
  background:rgba(0,0,0,.42);
  opacity:0;
  pointer-events:none;
  transition:opacity .20s ease;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.ut-drawer-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

.ut-sim-drawer{
  position:fixed;
  z-index:99980;
  top:0;
  right:0;
  width:min(420px,calc(100vw - 28px));
  height:100vh;
  transform:translateX(104%);
  transition:transform .24s cubic-bezier(.22,.8,.24,1);
  background:
    radial-gradient(circle at 82% 8%,rgba(210,174,87,.045),transparent 24%),
    linear-gradient(180deg,rgba(16,20,26,.99),rgba(9,12,17,.995));
  border-left:1px solid rgba(255,255,255,.085);
  box-shadow:-28px 0 70px rgba(0,0,0,.42);
  overflow:hidden;
}

.ut-sim-drawer.open{transform:translateX(0)}
body.ut-drawer-open{overflow:hidden}

.ut-drawer-head{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 22px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.ut-drawer-title-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.ut-drawer-title{
  color:#eef1f4;
  font-size:17px;
  font-weight:820;
  letter-spacing:-.02em;
}

.ut-drawer-beta{
  display:inline-flex;
  align-items:center;
  height:17px;
  padding:0 6px;
  border:1px solid rgba(210,174,87,.14);
  border-radius:999px;
  background:rgba(210,174,87,.045);
  color:#9d906f;
  font-size:7px;
  font-weight:850;
  letter-spacing:.08em;
}

.ut-drawer-close{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  padding:0 0 2px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:#7f8994;
  font-size:20px;
  font-weight:300;
}
.ut-drawer-close:hover{
  color:#d9dee3;
  background:rgba(255,255,255,.045);
}

.ut-drawer-body{
  height:calc(100vh - 76px);
  overflow:auto;
  padding:18px 20px 30px;
}

.ut-drawer-mode{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  padding:4px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:13px;
  background:rgba(0,0,0,.18);
}

.ut-drawer-mode-btn{
  height:38px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#76808a;
  font-size:11px;
  font-weight:760;
  transition:.15s ease;
}

.ut-drawer-mode-btn.active{
  background:rgba(210,174,87,.105);
  color:#e1ca8a;
  box-shadow:inset 0 0 0 1px rgba(210,174,87,.16);
}

.ut-generate-btn{
  width:100%;
  height:45px;
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(210,174,87,.28);
  border-radius:13px;
  background:
    linear-gradient(180deg,rgba(210,174,87,.11),rgba(210,174,87,.055));
  color:#e5cd8b;
  font-size:12px;
  font-weight:820;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 10px 28px rgba(0,0,0,.12);
}
.ut-generate-btn:hover{
  border-color:rgba(210,174,87,.40);
  background:linear-gradient(180deg,rgba(210,174,87,.15),rgba(210,174,87,.075));
}
.ut-generate-btn:disabled{
  cursor:wait;
  opacity:.58;
}
.ut-generate-icon{
  color:#f0d994;
  font-size:13px;
}

.ut-drawer-result{
  margin-top:16px;
  min-height:250px;
}

.ut-result-idle{
  height:230px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  opacity:.42;
}
.ut-result-idle span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#665d49;
}
.ut-result-idle span:nth-child(2){
  width:7px;
  height:7px;
  background:#8a7953;
}
.ut-result-idle span:nth-child(3){
  background:#665d49;
}

.ut-generation-loading{
  min-height:250px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:19px;
}

.ut-generation-orbit{
  position:relative;
  width:62px;
  height:62px;
  border:1px solid rgba(210,174,87,.11);
  border-radius:50%;
  animation:utOrbitRotate 2.1s linear infinite;
}
.ut-generation-orbit::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(255,255,255,.045);
  border-radius:50%;
}
.ut-generation-orbit i{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#c1a55d;
  box-shadow:0 0 15px rgba(193,165,93,.18);
}
.ut-generation-orbit i:nth-child(1){left:27px;top:-3px}
.ut-generation-orbit i:nth-child(2){right:1px;bottom:8px;opacity:.55}
.ut-generation-orbit i:nth-child(3){left:3px;bottom:8px;opacity:.30}

@keyframes utOrbitRotate{to{transform:rotate(360deg)}}

.ut-generation-status{
  color:#89939d;
  font-size:11px;
  font-weight:650;
  letter-spacing:.01em;
}

.ut-generation-error{
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#818b95;
  font-size:11px;
  text-align:center;
}
.ut-generation-error>span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(184,93,90,.20);
  background:rgba(184,93,90,.055);
  color:#b87976;
}

.ut-result-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:7px;
  color:#68727c;
  font-size:8px;
  font-weight:760;
  letter-spacing:.045em;
  text-transform:uppercase;
}

.ut-result-hero{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 58px;
  gap:12px;
  align-items:center;
  min-height:82px;
  padding:12px;
  border:1px solid rgba(210,174,87,.14);
  border-radius:17px;
  background:
    radial-gradient(circle at 12% 50%,rgba(210,174,87,.08),transparent 30%),
    rgba(255,255,255,.026);
  text-decoration:none;
  color:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.ut-result-hero:hover{
  border-color:rgba(210,174,87,.27);
  background:
    radial-gradient(circle at 12% 50%,rgba(210,174,87,.11),transparent 31%),
    rgba(255,255,255,.034);
}

.ut-result-rating{
  width:58px;
  height:58px;
  border-radius:15px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(210,174,87,.22);
  background:linear-gradient(180deg,rgba(210,174,87,.16),rgba(210,174,87,.055));
}
.ut-result-rating strong{
  color:#ead08b;
  font-size:23px;
  line-height:1;
  font-weight:900;
}
.ut-result-rating span{
  margin-top:5px;
  color:#99885d;
  font-size:8px;
  font-weight:800;
}

.ut-result-copy{min-width:0}
.ut-result-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f0f3f5;
  font-size:14px;
  font-weight:830;
}
.ut-result-meta{
  margin-top:6px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#75808b;
  font-size:8px;
}

.ut-result-score{text-align:right}
.ut-result-score strong{
  display:block;
  color:#70c489;
  font-size:18px;
  line-height:1;
  font-weight:900;
}
.ut-result-score span{
  display:block;
  margin-top:5px;
  color:#65707a;
  font-size:8px;
}

.ut-core-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px;
}
.ut-core-tags span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#9ca6af;
  font-size:8px;
  font-weight:680;
}

.ut-other-results{
  margin-top:14px;
  border-top:1px solid rgba(255,255,255,.05);
}
.ut-other-row{
  min-height:43px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 40px;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.04);
  text-decoration:none;
  color:#7e8993;
  font-size:9px;
}
.ut-other-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#bdc5cc;
  font-size:10px;
  font-weight:700;
}
.ut-other-meta{white-space:nowrap}
.ut-other-row strong{
  color:#83b892;
  text-align:right;
  font-size:10px;
}

@media(max-width:760px){
  .post-build-tools,
  .ut-drawer-backdrop,
  .ut-sim-drawer{
    display:none!important;
  }
}

/* === SOURCE: css/043-v364-compact-similarity.css === */

.ut-db-readyline{display:flex;align-items:center;justify-content:center;gap:7px;min-height:26px;margin-top:7px;color:#6f7a84;font-size:8px;font-weight:680;letter-spacing:.02em}
.ut-db-ready-dot{width:6px;height:6px;border-radius:50%;background:#65bd82;box-shadow:0 0 0 3px rgba(101,189,130,.08)}
.ut-compact-list{display:grid;gap:8px;margin-top:12px}
.ut-compact-player{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:stretch;padding:10px 11px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018))}
.ut-compact-player.is-top{border-color:rgba(219,184,95,.28);background:linear-gradient(180deg,rgba(219,184,95,.075),rgba(255,255,255,.018));box-shadow:inset 0 0 0 1px rgba(219,184,95,.04)}
.ut-compact-rank{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.055);color:#78838d;font-size:11px;font-weight:850}.ut-compact-player.is-top .ut-compact-rank{color:#d6b86c;background:rgba(214,184,108,.09)}
.ut-compact-main{min-width:0}.ut-compact-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}.ut-compact-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#edf2f6;font-size:13px;font-weight:820}.ut-compact-meta{display:flex;align-items:baseline;gap:5px;color:#9aa5af}.ut-compact-meta strong{font-size:15px;color:#eef2f5}.ut-compact-meta span{font-size:9px;font-weight:800;letter-spacing:.06em}.ut-compact-score{display:flex;align-items:baseline;gap:4px;min-width:58px;justify-content:flex-end}.ut-compact-score strong{font-size:14px;color:#d8bd78}.ut-compact-score span{font-size:7px;color:#6f7b85}
.ut-compact-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-top:8px}.ut-compact-stat{display:flex;align-items:baseline;justify-content:center;gap:4px;padding:5px 4px;border-radius:8px;background:rgba(255,255,255,.028)}.ut-compact-stat span{font-size:7px;color:#69757f;font-weight:800;letter-spacing:.04em}.ut-compact-stat strong{font-size:11px;color:#c8d0d6}
.ut-official-footnote{margin-top:12px;color:#58636d;font-size:7.5px;line-height:1.45;text-align:center}
@media(max-width:560px){.ut-compact-head{grid-template-columns:minmax(0,1fr) auto}.ut-compact-score{grid-column:1/-1;justify-content:flex-start}.ut-compact-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* === SOURCE: css/044-v4110e-perk-description-text.css === */

.specialization-card,
.specialization-card.base-card{
  min-height:660px!important;
  height:auto!important;
}
.spec-info-block .signature-style + small{line-height:1.35}
.spec-perk-list.rich-list{gap:7px!important}
.spec-perk-row.rich{
  min-height:unset!important;
  align-items:stretch!important;
  padding:9px 10px!important;
}
.spec-perk-main{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.spec-perk-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.spec-perk-top span{display:block;min-width:0;color:#cdd5dc;font-size:10px;font-weight:800;line-height:1.25}
.spec-perk-top b{flex:0 0 auto;color:#85919c;font-size:8px;font-weight:800}
.spec-perk-desc{display:block;color:#7e8a95;font-size:8.5px;line-height:1.4;letter-spacing:.01em}
.spec-reward-row.perk-rich{align-items:stretch}
.spec-reward-row.perk-rich>div{display:flex;flex-direction:column;justify-content:flex-start}
.spec-reward-row.perk-rich strong{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.28}
.spec-reward-row .spec-reward-desc{display:block;margin-top:4px;color:#7f8a95;font-size:8px;line-height:1.4}
@media (max-width:1600px){
  .specialization-card,.specialization-card.base-card{min-height:642px!important}
}
@media (max-width:1360px){
  .specialization-card,.specialization-card.base-card{min-height:628px!important}
}
@media (max-width:760px){
  .specialization-card,.specialization-card.base-card{min-height:0!important;height:auto!important}
  .spec-perk-row.rich{padding:8px 9px!important}
  .spec-perk-top span{font-size:11px}
  .spec-perk-desc{font-size:9px}
  .spec-reward-row .spec-reward-desc{font-size:8.5px}
}