/* === SOURCE: css/201-v5558-attribute-page-compact-grid.css === */

/* v5.5.58 · Attribute Page 2.0
   Dense three-column build surface with clear 2-row rhythm.
   Desktop legacy tool cards are retired; goalkeeper stats exist only on GK builds. */

@media(min-width:761px){
  /* The old switch/help card remains only as a hidden state carrier for mobile / JS. */
  .attribute-tools,
  .attribute-workspace-toolbar{
    display:none!important;
  }

  /* Give the dense data canvas deliberate breathing room on right and bottom. */
  body.attributes-workspace-compact #attributes{
    box-sizing:border-box!important;
    width:calc(100% - 18px)!important;
    max-width:calc(100% - 18px)!important;
    margin:0 18px 0 0!important;
    padding:0 0 18px 0!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    column-gap:10px!important;
    row-gap:0!important;
    align-items:start!important;
    overflow-y:auto!important;
  }

  body.attributes-workspace-compact #attributes .attr-column{
    gap:10px!important;
    min-width:0!important;
  }

  /* Cleaner, lighter cards. */
  body.attributes-workspace-compact #attributes .category-card{
    border:1px solid rgba(218,228,238,.075)!important;
    border-radius:12px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.008)),
      rgba(10,16,22,.72)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.018),
      0 6px 16px rgba(0,0,0,.10)!important;
    backdrop-filter:blur(12px) saturate(108%)!important;
    -webkit-backdrop-filter:blur(12px) saturate(108%)!important;
  }

  body.attributes-workspace-compact #attributes .category-head{
    box-sizing:border-box!important;
    height:29px!important;
    min-height:29px!important;
    padding:0 10px!important;
    background:rgba(255,255,255,.012)!important;
    border-bottom:1px solid rgba(255,255,255,.043)!important;
    cursor:pointer!important;
  }

  body.attributes-workspace-compact #attributes .goalkeeper-category .category-head{
    cursor:default!important;
  }

  body.attributes-workspace-compact #attributes .category-name{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    color:#dbe2e8!important;
    font-size:13.5px!important;
    line-height:1!important;
    font-weight:750!important;
    letter-spacing:-.01em!important;
  }

  body.attributes-workspace-compact #attributes .category-toggle{
    color:#687580!important;
    font-size:8px!important;
    transform-origin:center!important;
  }

  body.attributes-workspace-compact #attributes .goalkeeper-category .category-toggle{
    display:none!important;
  }

  body.attributes-workspace-compact #attributes .attr-list{
    padding:0!important;
  }

  body.attributes-workspace-compact #attributes .attr-row{
    border-bottom:1px solid rgba(255,255,255,.032)!important;
  }

  body.attributes-workspace-compact #attributes .attr-row:last-child{
    border-bottom:0!important;
  }

  /* One row: name / slider / compact stepper. */
  body.attributes-workspace-compact #attributes .attr-main{
    box-sizing:border-box!important;
    min-height:34px!important;
    height:34px!important;
    padding:3px 9px!important;
    grid-template-columns:88px minmax(72px,1fr) 78px!important;
    column-gap:7px!important;
    align-items:center!important;
  }

  body.attributes-workspace-compact #attributes .attr-row.changed .attr-main{
    background:linear-gradient(90deg,rgba(216,184,95,.030),transparent 55%)!important;
  }

  body.attributes-workspace-compact #attributes .attr-name-wrap{
    width:88px!important;
    min-width:0!important;
  }

  body.attributes-workspace-compact #attributes .attr-line{
    gap:4px!important;
  }

  body.attributes-workspace-compact #attributes .attr-name{
    color:#c8d0d7!important;
    font-size:11.5px!important;
    line-height:1!important;
    font-weight:650!important;
  }

  body.attributes-workspace-compact #attributes .tier{
    height:auto!important;
    padding:0!important;
    color:#66727e!important;
    font-size:8.5px!important;
    line-height:1!important;
    font-weight:650!important;
    opacity:.68!important;
  }

  body.attributes-workspace-compact #attributes .tier::before{
    width:4px!important;
    height:4px!important;
  }

  /* Slimmer slider with retained grab area. */
  body.attributes-workspace-compact #attributes .mini-slider{
    min-height:28px!important;
    height:28px!important;
    margin:0 1px 0 0!important;
  }

  body.attributes-workspace-compact #attributes .mini-slider .range-shell,
  body.attributes-workspace-compact #attributes .mini-slider input[type="range"]{
    height:28px!important;
  }

  body.attributes-workspace-compact #attributes .mini-slider .visual-track,
  body.attributes-workspace-compact #attributes .mini-slider input[type="range"]::-webkit-slider-runnable-track{
    height:4px!important;
  }

  body.attributes-workspace-compact #attributes .mini-slider input[type="range"]::-moz-range-track{
    height:4px!important;
  }

  /* Compact pill stepper. */
  body.attributes-workspace-compact #attributes .stepper{
    box-sizing:border-box!important;
    width:78px!important;
    height:27px!important;
    min-height:27px!important;
    grid-template-columns:22px 34px 22px!important;
    border-radius:8px!important;
    border-color:rgba(255,255,255,.065)!important;
    background:rgba(6,10,15,.50)!important;
  }

  body.attributes-workspace-compact #attributes .stepper button,
  body.attributes-workspace-compact #attributes .stepper input{
    height:27px!important;
    min-height:27px!important;
    line-height:1!important;
  }

  body.attributes-workspace-compact #attributes .stepper button{
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    color:#87939e!important;
    background:rgba(255,255,255,.018)!important;
    font-size:14px!important;
    font-weight:720!important;
  }

  body.attributes-workspace-compact #attributes .stepper button:hover:not(:disabled){
    color:#d9e0e5!important;
    background:rgba(255,255,255,.045)!important;
  }

  body.attributes-workspace-compact #attributes .stepper input{
    width:34px!important;
    padding:0!important;
    text-align:center!important;
    color:#e6d494!important;
    background:rgba(4,8,12,.40)!important;
    font-size:13.5px!important;
    font-weight:800!important;
    font-variant-numeric:tabular-nums!important;
  }

  body.attributes-workspace-compact #attributes .stepper input:focus{
    color:#f0dda0!important;
    outline:none!important;
  }

  /* Keep cards aligned by columns rather than forcing unnecessary equal heights. */
  body.attributes-workspace-compact #attributes .attr-column{
    align-self:start!important;
  }

  /* GK card is subtly identified, but stays within the same visual language. */
  body.attributes-workspace-compact #attributes .goalkeeper-category{
    border-color:rgba(205,216,227,.11)!important;
    background:
      linear-gradient(180deg,rgba(205,216,227,.032),rgba(255,255,255,.008)),
      rgba(10,16,22,.74)!important;
  }
}

/* A little more horizontal room on very large monitors without losing the compact rhythm. */
@media(min-width:1600px){
  body.attributes-workspace-compact #attributes{
    width:calc(100% - 22px)!important;
    max-width:calc(100% - 22px)!important;
    margin-right:22px!important;
    column-gap:12px!important;
  }
  body.attributes-workspace-compact #attributes .attr-column{
    gap:11px!important;
  }
  body.attributes-workspace-compact #attributes .attr-main{
    grid-template-columns:96px minmax(82px,1fr) 80px!important;
    column-gap:8px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  body.attributes-workspace-compact #attributes .attr-name-wrap{
    width:96px!important;
  }
}

/* Very short desktop windows may scroll the data canvas, but the surrounding page stays fixed. */
@media(min-width:761px) and (max-height:760px){
  body.attributes-workspace-compact #attributes .attr-main{
    min-height:32px!important;
    height:32px!important;
    padding-top:2px!important;
    padding-bottom:2px!important;
  }
  body.attributes-workspace-compact #attributes .category-head{
    height:28px!important;
    min-height:28px!important;
  }
  body.attributes-workspace-compact #attributes .attr-column{
    gap:8px!important;
  }
}

/* === SOURCE: css/202-v5559-attribute-balanced-density.css === */

/* v5.5.59 · Attribute Page 2.0 density rebalance.
   Loosen the compact grid one step while preserving a one-screen outfield layout. */

@media(min-width:761px){
  /* More deliberate right/bottom safety without wasting the canvas. */
  body.attributes-workspace-compact #attributes{
    width:calc(100% - 22px)!important;
    max-width:calc(100% - 22px)!important;
    margin-right:22px!important;
    padding-bottom:24px!important;
    column-gap:12px!important;
  }

  body.attributes-workspace-compact #attributes .attr-column{
    gap:12px!important;
  }

  body.attributes-workspace-compact #attributes .category-card{
    border-radius:13px!important;
  }

  body.attributes-workspace-compact #attributes .category-head{
    height:31px!important;
    min-height:31px!important;
    padding-left:11px!important;
    padding-right:11px!important;
  }

  /* Give each row a little more breathing room than v5.5.58. */
  body.attributes-workspace-compact #attributes .attr-main{
    min-height:36px!important;
    height:36px!important;
    padding:4px 10px!important;
    grid-template-columns:92px minmax(76px,1fr) 82px!important;
    column-gap:8px!important;
  }

  body.attributes-workspace-compact #attributes .attr-name-wrap{
    width:92px!important;
  }

  body.attributes-workspace-compact #attributes .attr-line{
    gap:5px!important;
  }

  /* Attribute names are intentionally regular-weight; hierarchy comes from layout. */
  body.attributes-workspace-compact #attributes .attr-name{
    color:#c6ced5!important;
    font-size:11.5px!important;
    font-weight:500!important;
    letter-spacing:0!important;
  }

  /* Single-character tier tags: 高 / 中 / 低 / 折. */
  body.attributes-workspace-compact #attributes .tier{
    min-width:10px!important;
    padding:0!important;
    font-size:8.5px!important;
    font-weight:650!important;
    line-height:1!important;
    opacity:.72!important;
  }

  /* A slightly roomier slider/stepper, still compact enough for one screen. */
  body.attributes-workspace-compact #attributes .mini-slider{
    min-height:30px!important;
    height:30px!important;
  }

  body.attributes-workspace-compact #attributes .mini-slider .range-shell,
  body.attributes-workspace-compact #attributes .mini-slider input[type="range"]{
    height:30px!important;
  }

  body.attributes-workspace-compact #attributes .stepper{
    width:82px!important;
    height:29px!important;
    min-height:29px!important;
    grid-template-columns:23px 36px 23px!important;
    border-radius:8px!important;
  }

  body.attributes-workspace-compact #attributes .stepper button,
  body.attributes-workspace-compact #attributes .stepper input{
    height:29px!important;
    min-height:29px!important;
  }

  body.attributes-workspace-compact #attributes .stepper input{
    width:36px!important;
    padding:0!important;
    text-align:center!important;
    color:#d8e0e6!important;
    background:rgba(4,8,12,.40)!important;
    font-size:13.5px!important;
    font-weight:760!important;
    text-shadow:none!important;
  }

  body.attributes-workspace-compact #attributes .stepper input:focus{
    color:#eef2f5!important;
  }

  /* Keep the changed-state cue extremely restrained; numeric colour stays neutral. */
  body.attributes-workspace-compact #attributes .attr-row.changed .attr-main{
    background:linear-gradient(90deg,rgba(205,216,227,.020),transparent 56%)!important;
  }
}

@media(min-width:1600px){
  body.attributes-workspace-compact #attributes{
    width:calc(100% - 26px)!important;
    max-width:calc(100% - 26px)!important;
    margin-right:26px!important;
    column-gap:13px!important;
    padding-bottom:26px!important;
  }

  body.attributes-workspace-compact #attributes .attr-column{
    gap:13px!important;
  }

  body.attributes-workspace-compact #attributes .attr-main{
    grid-template-columns:98px minmax(86px,1fr) 84px!important;
    column-gap:9px!important;
    padding-left:11px!important;
    padding-right:11px!important;
  }

  body.attributes-workspace-compact #attributes .attr-name-wrap{
    width:98px!important;
  }
}

/* Preserve the one-screen intent on shorter desktops, but less aggressively than v5.5.58. */
@media(min-width:761px) and (max-height:760px){
  body.attributes-workspace-compact #attributes .attr-main{
    min-height:34px!important;
    height:34px!important;
    padding-top:3px!important;
    padding-bottom:3px!important;
  }

  body.attributes-workspace-compact #attributes .category-head{
    height:29px!important;
    min-height:29px!important;
  }

  body.attributes-workspace-compact #attributes .attr-column{
    gap:10px!important;
  }

  body.attributes-workspace-compact #attributes{
    padding-bottom:20px!important;
  }
}

/* === SOURCE: css/203-v5560-attribute-type-spacing-tune.css === */

/* v5.5.60 · Slightly larger category / attribute typography
   and roomier category headers + attribute rows. */

@media(min-width:761px){
  /* Category title: 13.5 -> 14.5 */
  body.attributes-workspace-compact #attributes .category-head h3,
  body.attributes-workspace-compact #attributes .category-head strong,
  body.attributes-workspace-compact #attributes .category-title{
    font-size:14.5px!important;
  }

  /* Attribute name: 11.5 -> 12.5 */
  body.attributes-workspace-compact #attributes .attr-name{
    font-size:12.5px!important;
  }

  /* Category header: 31 -> 35 */
  body.attributes-workspace-compact #attributes .category-head{
    height:35px!important;
    min-height:35px!important;
  }

  /* Attribute row: 36 -> 38 */
  body.attributes-workspace-compact #attributes .attr-main{
    height:38px!important;
    min-height:38px!important;
  }
}

/* Keep shorter screens usable, but still slightly larger than the prior compact fallback. */
@media(min-width:761px) and (max-height:760px){
  body.attributes-workspace-compact #attributes .category-head{
    height:32px!important;
    min-height:32px!important;
  }

  body.attributes-workspace-compact #attributes .attr-main{
    height:35px!important;
    min-height:35px!important;
  }

  body.attributes-workspace-compact #attributes .category-head h3,
  body.attributes-workspace-compact #attributes .category-head strong,
  body.attributes-workspace-compact #attributes .category-title{
    font-size:14px!important;
  }

  body.attributes-workspace-compact #attributes .attr-name{
    font-size:12px!important;
  }
}

/* === SOURCE: css/204-v5561-attribute-comfort-density.css === */

/* v5.5.61 · Midpoint between the compact 2.0 layout and legacy v5.5.57 spacing. */

@media(min-width:761px){
  body.attributes-workspace-compact #attributes .category-head h3,
  body.attributes-workspace-compact #attributes .category-head strong,
  body.attributes-workspace-compact #attributes .category-title{
    font-size:15px!important;
  }

  body.attributes-workspace-compact #attributes .attr-name{
    font-size:13px!important;
    font-weight:500!important;
  }

  body.attributes-workspace-compact #attributes .category-head{
    height:40px!important;
    min-height:40px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  body.attributes-workspace-compact #attributes .attr-main{
    height:43px!important;
    min-height:43px!important;
    padding:5px 11px!important;
    grid-template-columns:98px minmax(84px,1fr) 86px!important;
    column-gap:10px!important;
  }

  body.attributes-workspace-compact #attributes .attr-name-wrap{
    width:98px!important;
  }

  body.attributes-workspace-compact #attributes .stepper{
    width:86px!important;
    height:31px!important;
    min-height:31px!important;
    grid-template-columns:24px 38px 24px!important;
  }

  body.attributes-workspace-compact #attributes .stepper button,
  body.attributes-workspace-compact #attributes .stepper input{
    height:31px!important;
    min-height:31px!important;
  }

  body.attributes-workspace-compact #attributes .stepper input{
    width:38px!important;
    font-size:13.5px!important;
  }

  body.attributes-workspace-compact #attributes .mini-slider{
    min-height:32px!important;
    height:32px!important;
  }

  body.attributes-workspace-compact #attributes .mini-slider .range-shell,
  body.attributes-workspace-compact #attributes .mini-slider input[type="range"]{
    height:32px!important;
  }

  body.attributes-workspace-compact #attributes{
    column-gap:13px!important;
    padding-bottom:24px!important;
  }

  body.attributes-workspace-compact #attributes .attr-column{
    gap:13px!important;
  }
}

@media(min-width:761px) and (max-height:760px){
  body.attributes-workspace-compact #attributes .category-head{
    height:36px!important;
    min-height:36px!important;
  }

  body.attributes-workspace-compact #attributes .attr-main{
    height:39px!important;
    min-height:39px!important;
    padding-top:4px!important;
    padding-bottom:4px!important;
  }

  body.attributes-workspace-compact #attributes .category-head h3,
  body.attributes-workspace-compact #attributes .category-head strong,
  body.attributes-workspace-compact #attributes .category-title{
    font-size:14.5px!important;
  }

  body.attributes-workspace-compact #attributes .attr-name{
    font-size:12.5px!important;
  }

  body.attributes-workspace-compact #attributes .attr-column{
    gap:11px!important;
  }
}