/* Frosted backgrounds leave names, dates and management state colors intact. */
.device[data-status]:is([data-status="离线"],[data-status="未知"]){
  --device-gray-text:#c5cdd3;
  --device-gray-muted:#929fa9;
  --device-gray-bright:#e0e7ec;
  --device-gray-line:rgba(207,221,232,.2);
  --device-gray-control:rgba(210,225,237,.05);
  --device-gray-control-hover:rgba(210,225,237,.1);
  --device-gray-glow:rgba(190,210,225,.14);
  --text:var(--device-gray-text);
  --muted:var(--device-gray-muted);
  color:var(--device-gray-text);
  background:radial-gradient(ellipse at 0 0,rgba(235,242,250,.11),transparent 64%),linear-gradient(145deg,rgba(113,123,134,.15),rgba(30,38,45,.3) 65%,rgba(117,127,139,.1));
  border-color:var(--device-gray-line);
  box-shadow:inset 0 1px rgba(240,247,255,.13),inset 1px 0 rgba(240,247,255,.04),0 16px 38px rgba(0,0,0,.23);
  -webkit-backdrop-filter:blur(20px) saturate(.45);
  backdrop-filter:blur(20px) saturate(.45);
}
.device[data-status]:is([data-status="离线"],[data-status="未知"]):hover{
  border-color:rgba(217,233,245,.38);
  box-shadow:inset 0 1px rgba(240,247,255,.2),0 16px 38px rgba(0,0,0,.25),0 0 25px rgba(190,210,225,.07);
}
.device[data-status]:is([data-status="离线"],[data-status="未知"]) *:not(.switch-button,.switch-button *,.rental-active,.rental-active *,.rental-inactive,.rental-inactive *,.rental-pending,.rental-pending *,.icon,.icon *,.editable-name,.editable-name *,.device-dates,.device-dates *),
html[data-theme=light] .device[data-status]:is([data-status="离线"],[data-status="未知"]) *:not(.switch-button,.switch-button *,.rental-active,.rental-active *,.rental-inactive,.rental-inactive *,.rental-pending,.rental-pending *,.icon,.icon *,.editable-name,.editable-name *,.device-dates,.device-dates *){
  color:var(--device-gray-text)!important;
  -webkit-text-fill-color:currentColor;
  text-shadow:none!important;
  caret-color:var(--device-gray-bright);
}
.device[data-status]:is([data-status="离线"],[data-status="未知"]) :is(dt,label,small,.device-id,.wifi-unset){
  color:var(--device-gray-muted)!important;
}
.device[data-status]:is([data-status="离线"],[data-status="未知"]) :is(button:not(.switch-button,.icon),input,select,.badge:not(.rental-active,.rental-inactive,.rental-pending)){
  color:var(--device-gray-text)!important;
  background:var(--device-gray-control);
  border-color:var(--device-gray-line);
  box-shadow:0 0 12px rgba(180,180,180,.06);
  accent-color:var(--device-gray-bright);
}
.device[data-status]:is([data-status="离线"],[data-status="未知"]) input[readonly]{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
.device[data-status]:is([data-status="离线"],[data-status="未知"]) input::placeholder{
  color:var(--device-gray-muted)!important;
  opacity:1;
}
.device[data-status]:is([data-status="离线"],[data-status="未知"]) :is(button:not(.switch-button,.icon):hover,input:focus,select:focus){
  color:var(--device-gray-bright)!important;
  background:var(--device-gray-control-hover);
  border-color:#888;
  box-shadow:0 0 15px var(--device-gray-glow);
  filter:none;
}
.device[data-status]:is([data-status="离线"],[data-status="未知"]) .divider{
  background:var(--device-gray-line);
}
.device[data-status]:is([data-status="离线"],[data-status="未知"]) :is(button:not(.switch-button,.icon),input,select):focus-visible{
  outline-color:var(--device-gray-bright);
}

/* Keep gray text readable against the day theme's light card background. */
html[data-theme=light] .device[data-status]:is([data-status="离线"],[data-status="未知"]){
  --device-gray-text:#4f5a64;
  --device-gray-muted:#64717c;
  --device-gray-bright:#303b45;
  --device-gray-line:rgba(112,131,146,.28);
  --device-gray-control:rgba(128,145,160,.07);
  --device-gray-control-hover:rgba(128,145,160,.13);
  --device-gray-glow:rgba(100,100,100,.13);
  background:radial-gradient(ellipse at 0 0,rgba(255,255,255,.8),transparent 65%),linear-gradient(145deg,rgba(231,237,242,.48),rgba(218,226,233,.26));
  border-color:var(--device-gray-line);
  box-shadow:inset 0 1px rgba(255,255,255,.95),0 12px 30px rgba(58,76,92,.07);
}
html[data-theme=light] .device[data-status]:is([data-status="离线"],[data-status="未知"]):hover{
  border-color:#969696;
  box-shadow:0 8px 24px rgba(80,80,80,.13);
}
html[data-theme=light] .device[data-status]:is([data-status="离线"],[data-status="未知"]) :is(button:not(.switch-button,.icon),input,select,.badge:not(.rental-active,.rental-inactive,.rental-pending)){
  background:var(--device-gray-control);
  border-color:var(--device-gray-line);
  box-shadow:none;
}
html[data-theme=light] .device[data-status]:is([data-status="离线"],[data-status="未知"]) input[readonly]{
  background:transparent;
  border-color:transparent;
}
html[data-theme=light] .device[data-status]:is([data-status="离线"],[data-status="未知"]) :is(button:not(.switch-button,.icon):hover,input:focus,select:focus){
  color:var(--device-gray-bright)!important;
  background:var(--device-gray-control-hover);
  border-color:#969696;
  box-shadow:0 0 0 3px rgba(100,100,100,.1);
}

/* Mobile compositors can retain animated layers from a hidden 3D face.
   Remove the inactive face; JavaScript holds card height while rotating. */
@media (max-width:800px), (hover:none) and (pointer:coarse){
  .device .flip-inner,
  .device .flip-inner.flipped{
    -webkit-transform:none;
    transform:none;
    -webkit-transform-style:flat;
    transform-style:flat;
    transition:none;
  }
  .device .flip-face{
    -webkit-transform:none;
    transform:none;
    -webkit-backface-visibility:visible;
    backface-visibility:visible;
  }
  .device .flip-face[aria-hidden="true"]{
    display:none;
    visibility:hidden;
    pointer-events:none;
  }
}