:root{
  --green:#12b886; --amber:#fab005; --red:#fa5252;
  --border:#ececec; --muted:#666;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;margin:20px}
h1{margin:0 0 10px}
h2{margin:0 0 10px;font-size:16px;color:#111}

.overall{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin:0 0 16px}
.dot{width:12px;height:12px;border-radius:50%}
.green{background:var(--green)} .amber{background:var(--amber)} .red{background:var(--red)}
.label{font-size:12px;color:var(--muted)}

/* Layout: give the Usage column enough width for 2 cards */
.layout{
  display:grid;
  grid-template-columns: 1fr 620px;   /* was ~360–380px */
  gap:16px; align-items:start;
}

/* collapse to single column on narrower screens */
@media (max-width: 1400px){
  .layout{ grid-template-columns: 1fr; }
}

.service-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(320px,1fr));
  grid-auto-rows:auto;
  gap:16px;
}
/* Usage column: true 2-column grid that wraps gracefully */
.usage-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(270px, 1fr));
  gap:12px;
}

/* fall back to 1 column when space is tight */
@media (max-width: 700px){
  .usage-grid{ grid-template-columns: 1fr; }
}

.tile{ display:flex; gap:8px; align-items:flex-start; padding:10px; border:1px solid var(--border); border-radius:12px; }
.title{ font-weight:600; font-size:13px; line-height:1.1; margin-bottom:4px }
.ms{ font-size:11px; color:var(--muted) }
.meta{ color:var(--muted); font-size:11px; line-height:1.2 }

/* --- Donut ring --- */
.ring {
  width: 72px; height: 72px; position: relative; flex: 0 0 72px;
}
.ring svg { display:block; width:100%; height:100%; }
.ring .pct {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:#111;
}
.ring.green { --c:#12b886; }
.ring.amber { --c:#fab005; }
.ring.red   { --c:#fa5252; }