/* ============================================================
   status3 裝置 grid — 取 demo.html 的卡片 + 倒數環
   調成與 status2 同調的亮色、只管 .v3-* 卡片區、不碰整頁
   精簡版：壓低卡片高度、一頁看得到更多台
   ============================================================ */

/* 問候語 + 時鐘（取自 demo.html、放名稱下方） */
.v3-greet {
  text-align: center;
  font-size: 1.18rem;
  color: #3881e7;
  margin: 2px 0 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.v3-greet strong { color: #475569; font-weight: 700; }

.v3-grid {
  display: grid;
  grid-template-columns: 1fr;   /* 一台一列、跟 status2 一樣、mobile 友善 */
  gap: 8px;
}

.v3-card {
  display: block;
  min-width: 0;          /* grid item 預設 min-width:auto、不縮、會被 nowrap 長名稱撐爆；歸零讓內層 ellipsis 生效 */
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #e9ecf2;   /* 整圈細邊、不要突兀的粗左條（demo 風） */
  border-radius: 16px;
  padding: 11px 14px;
  box-shadow: 0 2px 8px rgba(20, 30, 60, 0.05);
  transition: transform .15s ease, box-shadow .2s ease;
}
.v3-card:active { transform: scale(.985); }
.v3-card.running {
  border-color: #f6c0c0;
  background: linear-gradient(135deg, #fff4f4 0%, #fff 60%);
}
.v3-card.idle {
  border-color: #c1e7cc;
  background: linear-gradient(135deg, #f1fdf5 0%, #fff 60%);
}
.v3-card.closed {
  border-color: #dce2e9;
  background: #fbfcfd;
}

/* 頭列：狀態點 + 圖示 + 名稱 */
.v3-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.v3-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #94a3b8; flex-shrink: 0;
  position: relative;
}
.v3-card.running .v3-dot {
  background: #ef4444;
  box-shadow: 0 0 9px rgba(239, 68, 68, .65);
}
.v3-card.idle .v3-dot {
  background: #22c55e;
  box-shadow: 0 0 9px rgba(34, 197, 94, .65);
}
/* 擴散漣漪：運轉中 / 可使用 的狀態點向外脈動 */
.v3-card.running .v3-dot::after,
.v3-card.idle .v3-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: v3pulse 2s ease-out infinite;
}
.v3-card.running .v3-dot::after { color: #ef4444; }
.v3-card.idle .v3-dot::after    { color: #22c55e; }
@keyframes v3pulse {
  0%   { transform: scale(1);   opacity: .75; }
  100% { transform: scale(2.2); opacity: 0; }
}
.v3-thumb {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  flex-shrink: 0;
}
.v3-thumb img { max-width: 24px; max-height: 24px; }
.v3-name {
  flex: 1; min-width: 0;
  font-size: 1.02rem; font-weight: 700; color: #1e293b;
  line-height: 1.25;
  overflow-wrap: anywhere;   /* 超長名稱換行、不截斷、不溢出 */
}

/* 身體：倒數環 + 資訊 */
.v3-body { display: flex; align-items: center; gap: 13px; }
.v3-ring { position: relative; width: 82px; height: 82px; flex-shrink: 0; }
.v3-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.v3-ring-bg { fill: none; stroke: #edf0f4; stroke-width: 9; }
.v3-ring-fg {
  fill: none;
  stroke: #cbd5e1;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  transition: stroke-dashoffset 1s linear, stroke .3s ease;
}
.v3-card.running .v3-ring-fg {
  stroke: #ff5a5a;
  filter: drop-shadow(0 0 3px rgba(255, 90, 90, 0.7));   /* 環身微微發光 */
}
.v3-card.idle .v3-ring-fg { stroke: #34d27a; }
.v3-ring-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.v3-ring-time {
  font-size: 1.22rem; font-weight: 700; color: #334155;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.v3-card.running .v3-ring-time { color: #dc2626; }
.v3-card.idle .v3-ring-time    { color: #16a34a; }
.v3-card.closed .v3-ring-time  { color: #94a3b8; }

/* 運轉中跑光暫時關閉（再議）— 要恢復：取消下面整段註解、
   並恢復 status2.html updateCounter 裡的 --arc-deg setProperty 那行
.v3-card.running .v3-ring::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 240, 236, 0.95) 0%,
    rgba(255, 95, 95, 0.55) 38%,
    rgba(255, 95, 95, 0) 72%);
  animation: v3comet 2s linear infinite;
}
@keyframes v3comet {
  from { transform: translate(-50%, -50%) rotate(var(--arc-deg, 360deg)) translateY(-34px); }
  to   { transform: translate(-50%, -50%) rotate(0deg)                  translateY(-34px); }
}
*/

/* 資訊：徽章 + 行動提示（往右靠、垂直置中） */
.v3-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center;
  gap: 6px;
}
.v3-badge {
  align-self: flex-end;
  font-size: .84rem; font-weight: 700; color: #fff;
  padding: 6px 14px; border-radius: 7px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.v3-card.running .v3-badge { background: linear-gradient(135deg, #ff1a1a, #dd0000); }
.v3-card.idle .v3-badge    { background: linear-gradient(135deg, #00ee00, #00bb00); }
.v3-card.closed .v3-badge  { background: linear-gradient(135deg, #94a3b8, #64748b); }
.v3-go { font-size: .8rem; font-weight: 600; color: #64748b; }
.v3-sn { font-size: .64rem; font-weight: 400; color: #c6ccd6; letter-spacing: .02em; }