/* === Scoped styles for the quota card === */
.quota-card{--card-bg:#fff;--card-border:#e5e7eb;--text:#0f172a;--muted:#6b7280;--ring:#e2e8f0;--shadow:0 6px 28px rgba(16,24,40,.08);border-radius:20px;border:1px solid var(--card-border);background:
  radial-gradient(120% 100% at 100% 0%, rgba(2,132,199,0.04), transparent 40%),
  var(--card-bg);padding:22px;box-shadow:var(--shadow)}
.quota-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.quota-title{font-size:18px;line-height:1.25;font-weight:800;color:var(--text);letter-spacing:.2px;margin:0}
.quota-date{font-size:12px;color:var(--muted)}

.quota-row{padding:14px 0;border-top:1px dashed var(--ring)}
.quota-row:first-child{border-top:none}
.quota-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.quota-dot{width:10px;height:10px;border-radius:999px;background:var(--fill);box-shadow:0 0 0 3px var(--track)}
.quota-name{font-size:14px;font-weight:700;color:var(--text);flex:1}
.quota-badge{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px;border:1px solid currentColor;opacity:.9}
.quota-badge--ok{color:#0ea5e9}
.quota-badge--warn{color:#f59e0b}
.quota-badge--limit{color:#22c55e}
.quota-badge--over{color:#ef4444}

.quota-remaining{font-size:13px;font-weight:700;color:var(--text)}
.quota-remaining span{font-weight:500;color:var(--muted);margin-left:4px}

.quota-bar{position:relative;width:100%;height:12px;background:var(--track);
  border-radius:999px;overflow:hidden;outline:1px solid rgba(0,0,0,.04)}
.quota-fill{height:100%;background:var(--fill);border-radius:999px;transition:width .5s cubic-bezier(.22,.61,.36,1)}
/* diagonal hatch when over limit */
.quota-fill--over{background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.12) 0 8px, rgba(255,255,255,.12) 8px 16px);mix-blend-mode:multiply}

.quota-caption{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--muted)}
.quota-sep{opacity:.6}
.quota-plan{color:#9ca3af}

@media (prefers-reduced-motion: reduce){
  .quota-fill{transition:none}
}

@media (prefers-color-scheme: dark){
  .quota-card{--card-bg:#0b1220;--card-border:#1f2937;--text:#e5e7eb;--muted:#9ca3af;--ring:#1f2937;--shadow:0 8px 36px rgba(0,0,0,.45)}
}