:root{
  --ra-bg:#ffffff;
  --ra-fg:#0f172a;
  --ra-muted:#6b7280;
  --ra-border:#e5e7eb;
  --ra-card:#ffffff;
  --ra-shadow:0 8px 24px rgba(2,6,23,.06);
  --ra-chip:#eef2ff;
  --ra-chip-fg:#1f2937;
}

.regenalarm-widget{ background:var(--ra-bg); color:var(--ra-fg); border:1px solid var(--ra-border); border-radius:16px; padding:18px; }
.ra-search{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ra-search label{ font-weight:700; }
.ra-input{ flex:1; padding:12px 14px; border:1px solid var(--ra-border); border-radius:12px; }
.ra-btn{ padding:12px 16px; border:1px solid var(--ra-border); background:#f9fafb; border-radius:12px; cursor:pointer; font-weight:600; }
.ra-btn:hover{ background:#f3f4f6; }

.ra-suggestions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.ra-suggest-item{ padding:6px 10px; border-radius:999px; border:1px solid var(--ra-border); background:#fff; cursor:pointer; box-shadow:var(--ra-shadow); }
.ra-suggest-item:hover{ background:#f3f4f6; }

.ra-status{ margin-top:8px; color:var(--ra-muted); }

.ra-header{ margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ra-title{ margin:0; font-size:22px; }
.ra-sub{ margin:0; color:var(--ra-muted); }

.ra-badge{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; font-weight:700; }
.ra-badge .ra-badge-label{ opacity:.9; }
.ra-badge.level-0{ background:#e5e7eb; }
.ra-badge.level-1{ background:#fef3c7; }
.ra-badge.level-2{ background:#ffedd5; }
.ra-badge.level-3{ background:#fee2e2; }
.ra-badge.level-4{ background:#fae8ff; }

/* Nowcast chip */
.ra-nowcast{ margin-top:12px; }
.ra-nowcast-chip{ display:inline-block; background:var(--ra-chip); color:var(--ra-chip-fg); padding:8px 12px; border-radius:999px; border:1px solid var(--ra-border); font-weight:600; }

/* KPI row */
.ra-kpis{ margin-top:12px; display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.kpi{ background:#f8fafc; border:1px solid var(--ra-border); border-radius:12px; padding:10px 12px; box-shadow:var(--ra-shadow); }
.kpi-v{ font-size:20px; font-weight:800; }
.kpi-l{ font-size:12px; color:var(--ra-muted); }

/* Layout modes */
.ra-stack{ display:flex; flex-direction:column; gap:16px; margin-top:16px; }
.ra-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:16px; }
.ra-card{ background:var(--ra-card); border:1px solid var(--ra-border); border-radius:16px; padding:10px; box-shadow:var(--ra-shadow); }

/* Chart heights */
#forecast-chart{ width:100%; height:520px; }
#past7-chart, #past31-chart{ width:100%; height:320px; }

/* Compact mode tweaks */
.ra-compact #forecast-chart{ height:420px; }
.ra-compact #past7-chart, .ra-compact #past31-chart{ height:260px; }