/* Device Hour Timer - modern red card */
.dht-wrap{display:flex;justify-content:center;margin:20px 0;}
.dht-card{
  width:min(520px,92vw);
  background: radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.18), transparent 60%),
              linear-gradient(135deg,#b30000,#7a0000);
  color:#fff;border-radius:18px;padding:18px;
  box-shadow:0 14px 35px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.14);
  display:flex;gap:14px;align-items:center;position:relative;overflow:hidden;
}
.dht-card:before{content:"";position:absolute;inset:-2px;background:radial-gradient(600px 220px at 80% 0%, rgba(255,255,255,.18), transparent 60%);pointer-events:none;}
.dht-badge{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  font-size:24px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);flex:0 0 auto;
}
.dht-content{position:relative;z-index:1;flex:1;}
.dht-title{font-weight:700;font-size:16px;opacity:.95;margin-bottom:6px;letter-spacing:.2px;}
.dht-mmss{
  font-variant-numeric:tabular-nums;
  font-weight:800;font-size:48px;line-height:1;letter-spacing:1px;
  text-shadow:0 8px 18px rgba(0,0,0,.25);
}
.dht-sub{margin-top:10px;font-size:13px;opacity:.85;}
.dht-done .dht-mmss{font-size:36px;}
.dht-progress{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(255,255,255,.18);}
.dht-progress>i{display:block;height:100%;width:100%;transform-origin:left center;background:rgba(255,255,255,.55);}