/* C04 resource control shared by the component atlas and system pages. */
.resource-control{position:relative;width:132px;height:48px;padding:5px 6px;display:grid;grid-template-columns:34px minmax(44px,1fr) 28px;align-items:center;overflow:hidden;color:var(--text);text-decoration:none;border:1px solid rgba(255,255,255,.2);border-radius:6px;background:rgba(8,9,13,.88);box-shadow:0 8px 24px rgba(0,0,0,.3);backdrop-filter:blur(12px)}
.resource-control::before{position:absolute;inset:3px;content:"";border:1px solid rgba(255,255,255,.06);border-radius:3px;pointer-events:none}
.resource-control span{z-index:1;min-width:0;padding:0 7px;display:grid;align-content:center;gap:4px}
.resource-control small{overflow:hidden;color:rgba(255,255,255,.54);font:500 9px/1 var(--serif);letter-spacing:.08em;white-space:nowrap}
.resource-control strong{overflow:hidden;font:600 14px/1 var(--mono);letter-spacing:.02em;white-space:nowrap}
.resource-control>b{z-index:1;height:28px;display:grid;place-items:center;border-left:1px solid rgba(255,255,255,.16);color:var(--gold);font:500 23px/1 var(--sans)}
.resource-control--diamond strong{color:#dbc7ff}
.resource-control--static{grid-template-columns:34px 1fr}
.resource-control .resource-icon{z-index:1;width:34px;height:34px;fill:rgba(255,255,255,.03);stroke-width:1.5;stroke-linejoin:round}
.resource-control .resource-icon.coin,.resource-control .resource-icon.heart{stroke:var(--gold)}
.resource-control .resource-icon.diamond{stroke:#dbc7ff}
.resource-control .resource-icon.resonance{stroke:var(--mint)}
a.resource-control:hover,a.resource-control:focus-visible{border-color:var(--gold);outline:none}
a.resource-control:active{transform:translateY(1px)}
@media(max-width:1000px),(max-height:560px){
  .resource-control{width:104px;height:44px;grid-template-columns:24px minmax(40px,1fr) 18px;gap:0;padding:4px 5px}
  .resource-control--static{grid-template-columns:24px 1fr}
  .resource-control .resource-icon{width:24px;height:24px}
  .resource-control span{padding:0 3px}
  .resource-control small{display:none}
  .resource-control strong{font-size:10px}
  .resource-control>b{height:24px;font-size:18px}
}