Add several card styles

assets/page.erb

@@ -143,6 +143,201 @@
     @keyframes spin {
       to { transform: rotate(360deg); }
     }
+
+    .last-updated {
+      font-size: 0.75rem;
+      color: #475569;
+    }
+
+    .overall-status {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: #4ade80;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 1rem;
+      align-items: start;
+    }
+
+    @media (max-width: 1200px) { .grid { grid-template-columns: repeat(3, 1fr); } }
+    @media (max-width: 800px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
+    @media (max-width: 500px)  { .grid { grid-template-columns: 1fr; } }
+
+    /* span modifiers */
+    .span-2 { grid-column: span 2; }
+    .span-3 { grid-column: span 3; }
+
+    .card:hover { border-color: #2d3748; }
+
+    .card.ok   { border-left: 3px solid #22c55e; }
+    .card.warn { border-left: 3px solid #f59e0b; }
+    .card.bad  { border-left: 3px solid #ef4444; }
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 0.5rem;
+    }
+
+    .badge {
+      font-size: 0.65rem;
+      font-weight: 700;
+      padding: 0.15rem 0.5rem;
+      border-radius: 999px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .badge.ok   { background: #14532d; color: #4ade80; }
+    .badge.warn { background: #451a03; color: #fbbf24; }
+    .badge.bad  { background: #450a0a; color: #f87171; }
+
+    .card-value {
+      font-size: 1.6rem;
+      font-weight: 700;
+      line-height: 1.1;
+      margin-bottom: 0.15rem;
+    }
+
+    .card-value.ok   { color: #4ade80; }
+    .card-value.warn { color: #fbbf24; }
+    .card-value.bad  { color: #f87171; }
+
+    .card-sub {
+      font-size: 0.72rem;
+      color: #475569;
+      margin-bottom: 0.6rem;
+    }
+
+    /* progress bar */
+    .bar-track {
+      height: 4px;
+      background: #1e2433;
+      border-radius: 2px;
+      overflow: hidden;
+      margin-top: 0.5rem;
+    }
+
+    .bar-fill {
+      height: 100%;
+      border-radius: 2px;
+      transition: width 0.4s ease;
+    }
+
+    .bar-fill.ok   { background: #22c55e; }
+    .bar-fill.warn { background: #f59e0b; }
+    .bar-fill.bad  { background: #ef4444; }
+
+    /* subitems */
+    .subitems {
+      display: flex;
+      flex-direction: column;
+      gap: 0.45rem;
+      margin-top: 0.6rem;
+    }
+
+    .subitem {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.4rem 0.6rem;
+      background: #0f1117;
+      border-radius: 7px;
+      font-size: 0.78rem;
+    }
+
+    .subitem-left {
+      display: flex;
+      align-items: center;
+      gap: 0.45rem;
+    }
+
+    .dot {
+      width: 7px; height: 7px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .dot.ok   { background: #22c55e; box-shadow: 0 0 5px #22c55e88; }
+    .dot.warn { background: #f59e0b; box-shadow: 0 0 5px #f59e0b88; }
+    .dot.bad  { background: #ef4444; box-shadow: 0 0 5px #ef444488; }
+
+    .subitem-name { color: #cbd5e1; }
+
+    .subitem-value {
+      font-size: 0.72rem;
+      font-weight: 600;
+    }
+
+    .subitem-value.ok   { color: #4ade80; }
+    .subitem-value.warn { color: #fbbf24; }
+    .subitem-value.bad  { color: #f87171; }
+
+    /* drive type badge */
+    .drive-type {
+      font-size: 0.6rem;
+      font-weight: 700;
+      padding: 0.1rem 0.35rem;
+      border-radius: 4px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-left: 0.35rem;
+    }
+
+    .drive-type.hdd { background: #1e3a5f; color: #60a5fa; }
+    .drive-type.ssd { background: #2d1b69; color: #a78bfa; }
+
+    /* per-drive health stats row */
+    .drive-stats {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.3rem;
+    }
+
+    .stat {
+      font-size: 0.67rem;
+      font-weight: 600;
+      padding: 0.15rem 0.45rem;
+      border-radius: 5px;
+    }
+
+    .stat.ok   { background: #0f2a1a; color: #4ade80; }
+    .stat.warn { background: #2d1a00; color: #fbbf24; }
+    .stat.bad  { background: #2d0a0a; color: #f87171; }
+
+    /* uptime row */
+    .uptime-blocks {
+      display: flex;
+      gap: 2px;
+      margin-top: 0.5rem;
+    }
+
+    .uptime-block {
+      flex: 1;
+      height: 20px;
+      border-radius: 3px;
+    }
+
+    .uptime-block.ok   { background: #22c55e; }
+    .uptime-block.bad  { background: #ef4444; }
+    .uptime-block.warn { background: #f59e0b; }
+    .uptime-block.empty { background: #1e2433; }
+
+    .section-label {
+      font-size: 0.68rem;
+      color: #334155;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      margin: 1.5rem 0 0.5rem;
+      grid-column: 1 / -1;
+    }
   </style>
 </head>
 <body>