diff --git a/agents/core-logic/app.py b/agents/core-logic/app.py
index 958c9b0..d60b9ae 100644
--- a/agents/core-logic/app.py
+++ b/agents/core-logic/app.py
@@ -13,7 +13,7 @@ from pydantic import BaseModel
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
-# Gjor ml-pakken tilgjengelig uansett cwd (Cloud Run starter i agents/core-logic/)
+# Gjor ml-pakken tilgjengelig uansett cwd
 sys.path.insert(0, os.path.join(os.path.dirname(__file__), '..', '..'))
 
 try:
@@ -27,10 +27,13 @@ except ImportError as e:
     raise
 
 session_service = InMemorySessionService()
-APP_NAME       = os.environ.get("CLOUD_RUN_SERVICE", "gcp-orchestrator")
-PROJECT_ID     = os.environ.get("GOOGLE_CLOUD_PROJECT", "propane-will-491900-m5")
+APP_NAME           = os.environ.get("CLOUD_RUN_SERVICE", "gcp-orchestrator")
+PROJECT_ID         = os.environ.get("GOOGLE_CLOUD_PROJECT", "propane-will-491900-m5")
 BQ_BILLING_DATASET = os.environ.get("BQ_BILLING_DATASET", "billing_data")
 
+# CG6: in-memory budget store (TODO Fase-C: migrate to Firestore per-user)
+_budget_store: dict = {}  # key: user_email | "default"
+
 
 @asynccontextmanager
 async def lifespan(app: FastAPI):
@@ -59,6 +62,11 @@ class RunResponse(BaseModel):
     response: str
 
 
+class BudgetRequest(BaseModel):
+    budget: float
+    user: str = "default"
+
+
 async def _ensure_session(user_id: str, session_id: str):
     try:
         session = await session_service.get_session(
@@ -75,13 +83,13 @@ async def _ensure_session(user_id: str, session_id: str):
     return session
 
 
-# ── helse ──────────────────────────────────────────────────────────────────────
+# ── helse ────────────────────────────────────────────────────────────────────
 @app.get("/health")
 async def health():
     return JSONResponse({"status": "ok", "service": APP_NAME})
 
 
-# ── agent run ──────────────────────────────────────────────────────────────────
+# ── agent run ────────────────────────────────────────────────────────────────
 @app.post("/run", response_model=RunResponse)
 async def run(req: RunRequest):
     try:
@@ -103,12 +111,9 @@ async def run(req: RunRequest):
         raise HTTPException(status_code=500, detail=str(e))
 
 
-# ── billing: tokens ────────────────────────────────────────────────────────────
+# ── billing: tokens ──────────────────────────────────────────────────────────
 @app.get("/billing/tokens/summary")
 async def billing_tokens_summary():
-    """
-    CG3e — LLM token-bruk og estimert kostnad per agent siste 30 dager.
-    """
     try:
         from google.cloud import bigquery
         client = bigquery.Client(project=PROJECT_ID)
@@ -142,12 +147,9 @@ async def billing_tokens_summary():
         raise HTTPException(status_code=500, detail=str(e))
 
 
-# ── billing: anbefalinger ──────────────────────────────────────────────────────
+# ── billing: anbefalinger ────────────────────────────────────────────────────
 @app.get("/billing/recommendations")
 async def billing_recommendations(budget: float = 500.0):
-    """
-    CG4 — Anbefalings- og anomali-motor.
-    """
     try:
         recommendations = get_recommendations(budget)
         return JSONResponse(recommendations)
@@ -156,23 +158,95 @@ async def billing_recommendations(budget: float = 500.0):
         raise HTTPException(status_code=500, detail=str(e))
 
 
-# ── billing: tjenester med SKU-detaljer (CG5) ───────────────────────────────────
+# ── billing: tjenester med SKU-detaljer (CG5) ────────────────────────────────
 @app.get("/billing/by-service")
 async def billing_by_service(days: int = 30):
+    try:
+        from ml.billing_agent import BillingAgent
+        agent = BillingAgent()
+        return JSONResponse(agent.get_service_totals(days))
+    except Exception as e:
+        logger.error(f"[/billing/by-service] Failed: {e}", exc_info=True)
+        return JSONResponse([])  # fallback: tom liste, dashbordet krasjer ikke
+
+
+# ── billing: anomalier (CG6) ─────────────────────────────────────────────────
+@app.get("/billing/anomalies")
+async def billing_anomalies():
     """
-    CG5 — Kostnad per tjeneste med SKU-detaljer for drill-down i dashbordet.
-    Returnerer liste sortert etter total_cost DESC.
-    Hvert element: {service, total_cost, skus: [{sku, sku_cost}]}
-    Fallback: hvis BillingAgent feiler returneres en tom liste (dashbordet
-    viser da fallback-visning istedenfor å krasje).
+    CG6 — Anomalideteksjon: sammenligner dagens kostnad mot 7-dagers snitt per tjeneste.
+    Returnerer tjenester der dagens kostnad > 2x snittet.
+    Fallback: tom liste ved feil slik at dashbordet ikke krasjer.
     """
     try:
         from ml.billing_agent import BillingAgent
         agent = BillingAgent()
-        data = agent.get_service_totals(days)
-        return JSONResponse(data)
+        return JSONResponse(agent.get_anomalies())
     except Exception as e:
-        logger.error(f"[/billing/by-service] Failed: {e}", exc_info=True)
-        # Returner tom liste istedenfor 500 — dashbordet faller da tilbake til
-        # den enkle buildSvc-visningen uten å miste all annen data.
-        return JSONResponse([])
+        logger.error(f"[/billing/anomalies] Failed: {e}", exc_info=True)
+        return JSONResponse({"anomalies": []})
+
+
+# ── billing: historikk for bar-chart (CG6) ───────────────────────────────────
+@app.get("/billing/history")
+async def billing_history(days: int = 30):
+    """
+    CG6 — Daglig MTD-historikk for bar-chart i dashbordet.
+    Returnerer liste: [{date, mtd}] sortert ASC.
+    """
+    try:
+        from ml.billing_agent import BillingAgent
+        agent = BillingAgent()
+        return JSONResponse({"history": agent.get_daily_history(days)})
+    except Exception as e:
+        logger.error(f"[/billing/history] Failed: {e}", exc_info=True)
+        return JSONResponse({"history": []})
+
+
+# ── billing: summary ─────────────────────────────────────────────────────────
+@app.get("/billing/summary")
+async def billing_summary():
+    try:
+        from ml.billing_agent import BillingAgent
+        agent = BillingAgent()
+        return JSONResponse(agent.get_summary())
+    except Exception as e:
+        logger.error(f"[/billing/summary] Failed: {e}", exc_info=True)
+        return JSONResponse({"summary": []})
+
+
+# ── billing: live / forecast ─────────────────────────────────────────────────
+@app.get("/billing/live")
+async def billing_live():
+    try:
+        from ml.billing_agent import BillingAgent
+        agent = BillingAgent()
+        return JSONResponse(agent.get_forecast())
+    except Exception as e:
+        logger.error(f"[/billing/live] Failed: {e}", exc_info=True)
+        return JSONResponse({})
+
+
+# ── billing: budsjett GET + POST (CG6) ───────────────────────────────────────
+# TODO Fase-C: erstatt _budget_store med Firestore-dokument per bruker
+@app.get("/billing/budget")
+async def get_budget(user: str = "default"):
+    """
+    CG6 — Hent lagret budsjett for bruker.
+    In-memory; nullstilles ved redeploy (Firestore i Fase C).
+    """
+    budget = _budget_store.get(user, 500.0)
+    return JSONResponse({"budget": budget, "user": user})
+
+
+@app.post("/billing/budget")
+async def set_budget(req: BudgetRequest):
+    """
+    CG6 — Lagre budsjett for bruker.
+    In-memory; nullstilles ved redeploy (Firestore i Fase C).
+    """
+    if req.budget <= 0:
+        raise HTTPException(status_code=400, detail="Budget must be > 0")
+    _budget_store[req.user] = req.budget
+    logger.info(f"Budget updated: {req.user} -> {req.budget}")
+    return JSONResponse({"budget": req.budget, "user": req.user})
diff --git a/ml/billing_agent.py b/ml/billing_agent.py
index 0b2ec88..2b9a904 100644
--- a/ml/billing_agent.py
+++ b/ml/billing_agent.py
@@ -2,6 +2,7 @@ import os
 import datetime
 from google.cloud import bigquery
 
+
 class BillingAgent:
     def __init__(self):
         self.project_id = os.environ.get("GOOGLE_CLOUD_PROJECT")
@@ -14,10 +15,8 @@ class BillingAgent:
 
         self.bq_client = bigquery.Client(project=self.project_id)
 
+    # ── summary ──────────────────────────────────────────────────────────────
     def get_summary(self):
-        """
-        Henter daglig billing-sammendrag per prosjekt og tjeneste siste 30 dager.
-        """
         query = f"""
             SELECT
                 DATE(usage_start_time) AS usage_date,
@@ -35,7 +34,7 @@ class BillingAgent:
             {
                 "usage_date": str(row.usage_date),
                 "project_id": row.project_id,
-                "service": row.service,
+                "service":    row.service,
                 "daily_cost": row.daily_cost,
             }
             for row in results
@@ -43,18 +42,17 @@ class BillingAgent:
         if not summary:
             return {
                 "onboarding_status": {
-                    "state": "awaiting_data",
+                    "state":   "awaiting_data",
                     "message": "Fakturaeksport er aktiv, men ingen data for siste 30 dager ennå.",
                 }
             }
         return {"summary": summary}
 
+    # ── forecast ─────────────────────────────────────────────────────────────
     def get_forecast(self):
-        """
-        Prognose basert på siste 7 dager.
-        """
         q7 = f"""
-            SELECT SUM(cost) + SUM(IFNULL((SELECT SUM(c.amount) FROM UNNEST(credits) c), 0)) AS total_cost
+            SELECT SUM(cost) + SUM(IFNULL(
+                (SELECT SUM(c.amount) FROM UNNEST(credits) c), 0)) AS total_cost
             FROM `{self.billing_table}`
             WHERE _PARTITIONTIME >= TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 7 DAY)
         """
@@ -62,12 +60,15 @@ class BillingAgent:
         daily_average = total_7d / 7
 
         today = datetime.date.today()
-        next_month = datetime.date(today.year + (1 if today.month == 12 else 0),
-                                   (today.month % 12) + 1, 1)
+        next_month = datetime.date(
+            today.year + (1 if today.month == 12 else 0),
+            (today.month % 12) + 1, 1
+        )
         remaining_days = (next_month - today).days
 
         q_mtd = f"""
-            SELECT SUM(cost) + SUM(IFNULL((SELECT SUM(c.amount) FROM UNNEST(credits) c), 0)) AS total_cost
+            SELECT SUM(cost) + SUM(IFNULL(
+                (SELECT SUM(c.amount) FROM UNNEST(credits) c), 0)) AS total_cost
             FROM `{self.billing_table}`
             WHERE EXTRACT(MONTH FROM _PARTITIONTIME) = EXTRACT(MONTH FROM CURRENT_DATE())
               AND EXTRACT(YEAR  FROM _PARTITIONTIME) = EXTRACT(YEAR  FROM CURRENT_DATE())
@@ -75,24 +76,23 @@ class BillingAgent:
         mtd_cost = list(self.bq_client.query(q_mtd).result())[0].total_cost or 0
 
         return {
-            "daily_average_last_7_days": daily_average,
-            "month_to_date_cost": mtd_cost,
-            "forecasted_remaining_cost": daily_average * remaining_days,
-            "total_monthly_forecast": mtd_cost + daily_average * remaining_days,
-            "remaining_days_in_month": remaining_days,
+            "daily_average_last_7_days":  daily_average,
+            "month_to_date_cost":         mtd_cost,
+            "forecasted_remaining_cost":  daily_average * remaining_days,
+            "total_monthly_forecast":     mtd_cost + daily_average * remaining_days,
+            "remaining_days_in_month":    remaining_days,
             "data_note": "Prognose basert på siste 7 dager. BigQuery kan ha 24-48 timers forsinkelse.",
         }
 
+    # ── anomalier ─────────────────────────────────────────────────────────────
     def get_anomalies(self):
-        """
-        Oppdager anomalier ved å sammenligne dagens kostnad mot 7-dagers snitt.
-        """
         query = f"""
             WITH daily_costs AS (
                 SELECT
                     service.description AS service,
                     DATE(_PARTITIONTIME) AS usage_date,
-                    SUM(cost) + SUM(IFNULL((SELECT SUM(c.amount) FROM UNNEST(credits) c), 0)) AS daily_cost
+                    SUM(cost) + SUM(IFNULL(
+                        (SELECT SUM(c.amount) FROM UNNEST(credits) c), 0)) AS daily_cost
                 FROM `{self.billing_table}`
                 WHERE _PARTITIONTIME >= TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 14 DAY)
                 GROUP BY 1, 2
@@ -117,32 +117,51 @@ class BillingAgent:
         return {
             "anomalies": [
                 {
-                    "service": row.service,
+                    "service":    row.service,
                     "today_cost": row.today_cost,
-                    "avg_7d": row.avg_7day,
-                    "ratio": row.ratio,
+                    "avg_7d":     row.avg_7day,
+                    "ratio":      row.ratio,
                 }
                 for row in results
             ]
         }
 
-    def get_service_totals(self, days: int = 30):
+    # ── daglig historikk for bar-chart (CG6) ──────────────────────────────────
+    def get_daily_history(self, days: int = 30):
         """
-        CG5 — Henter total kostnad per tjeneste gruppert med SKU-detaljer.
-        Returnerer en liste sortert etter total_cost DESC.
-        Hvert element har:
-          service    : str
-          total_cost : float
-          skus       : list av {sku: str, sku_cost: float}
+        Returnerer [{date: str, mtd: float}] for siste `days` dager, sortert ASC.
+        MTD (month-to-date) er kumulativ sum fra 1. i måneden til den dato.
         """
         query = f"""
             SELECT
-                service.description          AS service,
-                sku.description              AS sku,
-                SUM(cost)
-                  + SUM(IFNULL(
-                      (SELECT SUM(c.amount) FROM UNNEST(credits) c), 0
-                    ))                       AS sku_cost
+                DATE(usage_start_time)   AS usage_date,
+                SUM(cost) + SUM(IFNULL(
+                    (SELECT SUM(c.amount) FROM UNNEST(credits) c), 0)) AS day_cost
+            FROM `{self.billing_table}`
+            WHERE _PARTITIONTIME >= TIMESTAMP_SUB(CURRENT_TIMESTAMP(),
+                                                  INTERVAL {int(days)} DAY)
+            GROUP BY usage_date
+            ORDER BY usage_date ASC
+        """
+        results = list(self.bq_client.query(query).result())
+        history = []
+        mtd = 0.0
+        for row in results:
+            # Nullstill MTD ved månedsskifte
+            if history and row.usage_date.day == 1:
+                mtd = 0.0
+            mtd += float(row.day_cost or 0)
+            history.append({"date": str(row.usage_date), "mtd": round(mtd, 6)})
+        return history
+
+    # ── tjenester med SKU-detaljer (CG5) ─────────────────────────────────────
+    def get_service_totals(self, days: int = 30):
+        query = f"""
+            SELECT
+                service.description AS service,
+                sku.description     AS sku,
+                SUM(cost) + SUM(IFNULL(
+                    (SELECT SUM(c.amount) FROM UNNEST(credits) c), 0)) AS sku_cost
             FROM `{self.billing_table}`
             WHERE _PARTITIONTIME >= TIMESTAMP_SUB(CURRENT_TIMESTAMP(),
                                                   INTERVAL {int(days)} DAY)
@@ -151,26 +170,25 @@ class BillingAgent:
             ORDER BY service, sku_cost DESC
         """
         results = self.bq_client.query(query).result()
-
-        # Grupper SKU-er under tjeneste
         services: dict = {}
         for row in results:
             svc = row.service
             if svc not in services:
                 services[svc] = {"service": svc, "total_cost": 0.0, "skus": []}
-            services[svc]["total_cost"] = round(services[svc]["total_cost"] + float(row.sku_cost), 6)
+            services[svc]["total_cost"] = round(
+                services[svc]["total_cost"] + float(row.sku_cost), 6
+            )
             services[svc]["skus"].append({
-                "sku": row.sku,
+                "sku":      row.sku,
                 "sku_cost": round(float(row.sku_cost), 6),
             })
-
-        # Sorter etter total_cost DESC
         return sorted(services.values(), key=lambda x: x["total_cost"], reverse=True)
 
 
 if __name__ == '__main__':
     agent = BillingAgent()
-    print("Summary:", agent.get_summary())
-    print("Forecast:", agent.get_forecast())
-    print("Anomalies:", agent.get_anomalies())
-    print("By-service:", agent.get_service_totals())
+    print("Summary:",     agent.get_summary())
+    print("Forecast:",    agent.get_forecast())
+    print("Anomalies:",   agent.get_anomalies())
+    print("By-service:",  agent.get_service_totals())
+    print("History:",     agent.get_daily_history())
diff --git a/static/billing-dashboard.html b/static/billing-dashboard.html
index a0b1f1a..3a88ba5 100644
--- a/static/billing-dashboard.html
+++ b/static/billing-dashboard.html
@@ -12,8 +12,6 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
-<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
-<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js"></script>
 <style>
 :root{
   --bg:#0a0a0f;--surface:#13131c;--surface-2:#1a1a26;--surface-3:#242436;
@@ -25,70 +23,112 @@
   --yellow:#ffb454;--yellow-bg:rgba(255,180,84,0.12);
   --red:#ff5c7c;--red-bg:rgba(255,92,124,0.12);
   --ok:#00d4a8;--warn:#ffb454;
-  --gem-a:#7c5cff;--gem-b:#00d4a8;--gem-c:#a78bfa;
   --font:'Inter',-apple-system,sans-serif;--mono:'JetBrains Mono',monospace;
   --r:10px;--tr:200ms cubic-bezier(0.2,0,0,1);
 }
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 html{-webkit-font-smoothing:antialiased}
 body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;min-height:100vh}
+
+/* ── topbar ── */
 .topbar{height:56px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:0;position:sticky;top:0;z-index:200}
 .tb-logo{display:flex;align-items:center;gap:10px;padding:0 16px;border-right:1px solid var(--border)}
 .tb-logo-icon{width:28px;height:28px;background:linear-gradient(135deg,#7c5cff,#00d4a8);border-radius:8px;display:flex;align-items:center;justify-content:center}
-.tb-logo-icon svg{fill:#fff;width:16px;height:16px}
+.tb-logo-icon svg{fill:none;stroke:#fff;stroke-width:2;width:16px;height:16px}
 .tb-logo-name{font-size:15px;font-weight:500;letter-spacing:-.01em}
 .tb-logo-name span{background:linear-gradient(135deg,#7c5cff,#00d4a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
-.tb-project{display:flex;align-items:center;gap:6px;padding:6px 12px;margin:0 8px;border-radius:6px;font-size:13px;color:var(--muted)}
+.tb-project{display:flex;align-items:center;gap:6px;padding:6px 12px;margin:0 8px;font-size:13px;color:var(--muted)}
 .tb-project .material-symbols-outlined{font-size:16px}
 .tb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
 .tb-badge{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;padding:4px 10px;border-radius:16px;border:1px solid}
-.tb-badge.ok{background:var(--green-bg);color:var(--green);border-color:rgba(52,168,83,0.25)}
-.tb-badge.warn{background:var(--yellow-bg);color:var(--yellow);border-color:rgba(251,188,4,0.25)}
-.tb-badge.err{background:var(--red-bg);color:var(--red);border-color:rgba(234,67,53,0.25)}
+.tb-badge.ok{background:var(--green-bg);color:var(--green);border-color:rgba(0,212,168,0.25)}
+.tb-badge.warn{background:var(--yellow-bg);color:var(--yellow);border-color:rgba(255,180,84,0.25)}
+.tb-badge.err{background:var(--red-bg);color:var(--red);border-color:rgba(255,92,124,0.25)}
 .tb-period{background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:13px;font-family:var(--font);padding:5px 12px;border-radius:6px;cursor:pointer;outline:none;transition:border-color var(--tr)}
 .tb-period:hover{border-color:var(--border-h)}
 .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;position:relative}
 .pulse::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:var(--green);opacity:.4;animation:pulse 2s ease-out infinite}
 @keyframes pulse{0%{transform:scale(1);opacity:.4}100%{transform:scale(2.5);opacity:0}}
+
+/* ── layout ── */
 .layout{display:flex;min-height:calc(100vh - 56px)}
-.sidebar{width:240px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);padding:12px 0}
+.sidebar{width:200px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);padding:12px 0}
 .nav-section{padding:8px 16px 4px;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
 .nav-item{display:flex;align-items:center;gap:12px;padding:8px 16px;font-size:13px;color:var(--muted);cursor:pointer;transition:all var(--tr);border-radius:0 20px 20px 0;margin-right:8px}
 .nav-item:hover{background:var(--surface-2);color:var(--text)}
 .nav-item.active{background:var(--blue-bg);color:var(--blue);font-weight:600;border-left:2px solid var(--blue)}
 .nav-item .material-symbols-outlined{font-size:18px}
 .content{flex:1;padding:24px;overflow:hidden}
-.onboarding-banner{background:linear-gradient(135deg,rgba(66,133,244,0.08),rgba(138,180,248,0.05));border:1px solid var(--blue-border);border-radius:12px;padding:16px 20px;display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
-.onboarding-banner.hidden{display:none}
-.ob-icon{width:36px;height:36px;border-radius:50%;background:var(--blue-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
-.ob-icon .material-symbols-outlined{font-size:20px;color:var(--blue)}
-.ob-body h4{font-size:14px;font-weight:500;color:var(--text);margin-bottom:4px}
-.ob-body p{font-size:13px;color:var(--muted);line-height:1.6}
-.ob-close{margin-left:auto;cursor:pointer;color:var(--muted);transition:color var(--tr);background:none;border:none;padding:4px}
-.ob-close:hover{color:var(--text)}
-.page-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
-.page-title{font-size:24px;font-weight:600;letter-spacing:-.02em}
-.page-title strong{font-weight:700;background:linear-gradient(135deg,#7c5cff,#00d4a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
-.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
-.kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;transition:box-shadow var(--tr),border-color var(--tr)}
-.kpi:hover{border-color:var(--border-h);box-shadow:0 1px 8px rgba(0,0,0,.3)}
-.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
+
+/* ── sel / buttons ── */
+.sel{background:var(--surface-2);border:1px solid var(--border);color:var(--muted);padding:5px 10px;border-radius:6px;font-size:12px;font-family:var(--font);display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:background var(--tr),border-color var(--tr),color var(--tr)}
+.sel:hover{background:var(--surface-3);border-color:var(--border-h);color:var(--text)}
+.dropdown{position:relative;display:inline-block}
+.dropdown-content{display:none;position:absolute;background:var(--surface-2);min-width:140px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:99;right:0;border-radius:var(--r);border:1px solid var(--border)}
+.dropdown-content a{color:var(--text);padding:8px 12px;text-decoration:none;display:block;font-size:12px}
+.dropdown-content a:hover{background:var(--surface-3)}
+.dropdown:hover .dropdown-content{display:block}
+
+/* ── module grid (CG6 drag) ── */
+.module-grid{display:flex;flex-direction:column;gap:12px}
+.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
+.charts-row{display:grid;grid-template-columns:2fr 1fr;gap:12px}
+.bottom-row{display:grid;grid-template-columns:2fr 1fr;gap:12px}
+
+/* ── draggable module ── */
+.module{
+  position:relative;
+  background:var(--surface);
+  border:1px solid var(--border);
+  border-radius:12px;
+  transition:box-shadow var(--tr),border-color var(--tr),opacity .15s;
+}
+.module:hover{border-color:var(--border-h)}
+.module.dragging{opacity:.45;box-shadow:0 8px 32px rgba(124,92,255,.25);cursor:grabbing;}
+.module.drag-over{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-bg)}
+.module-handle{
+  display:flex;align-items:center;justify-content:space-between;
+  padding:14px 18px 0;
+  cursor:grab;
+  user-select:none;
+}
+.module-handle:active{cursor:grabbing}
+.module-handle-left{display:flex;align-items:center;gap:8px}
+.drag-grip{color:var(--faint);font-size:16px!important;transition:color var(--tr)}
+.module-handle:hover .drag-grip{color:var(--muted)}
+.module-title{font-size:14px;font-weight:500}
+.module-sub{font-size:12px;color:var(--muted)}
+.module-actions{display:flex;align-items:center;gap:4px}
+.module-btn{background:none;border:none;cursor:pointer;color:var(--muted);padding:2px 4px;border-radius:4px;transition:color var(--tr),background var(--tr);display:flex;align-items:center}
+.module-btn:hover{color:var(--text);background:var(--surface-3)}
+.module-btn .material-symbols-outlined{font-size:16px!important}
+.module-body{padding:14px 18px 18px}
+.module.collapsed .module-body{display:none}
+.module.collapsed{border-color:var(--border)}
+.collapse-icon{transition:transform .2s}
+.module.collapsed .collapse-icon{transform:rotate(-90deg)}
+
+/* ── kpi card ── */
+.kpi{padding:0}
+.kpi .module-body{display:flex;flex-direction:column;gap:4px}
+.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
 .kpi-lbl{font-size:12px;color:var(--muted);font-weight:500}
 .kpi-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}
 .kpi-icon .material-symbols-outlined{font-size:18px}
 .ki-blue{background:var(--blue-bg)}.ki-blue .material-symbols-outlined{color:var(--blue)}
 .ki-green{background:var(--green-bg)}.ki-green .material-symbols-outlined{color:var(--green)}
 .ki-yellow{background:var(--yellow-bg)}.ki-yellow .material-symbols-outlined{color:var(--yellow)}
-.charts-row{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:20px}
-.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px}
-.card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
-.card-title{font-size:14px;font-weight:500}
-.card-sub{font-size:12px;color:var(--muted)}
+.kpi-val{font-size:22px;font-weight:700;font-family:var(--mono);letter-spacing:-.03em}
+.kpi-delta{font-size:12px;color:var(--muted)}
+
+/* ── chart ── */
 .chart-wrap{position:relative;height:200px}
-.bottom-row{display:grid;grid-template-columns:2fr 1fr;gap:12px}
+.empty-state{color:var(--muted);font-size:13px;padding:24px 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
+.empty-state .material-symbols-outlined{font-size:32px;opacity:.3}
+
+/* ── service list ── */
 .svc-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
 .svc-row:last-child{border-bottom:none}
-.svc-row.expanded{background:var(--surface-3);border-radius:8px;padding:8px 6px}
 .svc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
 .svc-name{font-size:13px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .svc-bar-w{width:80px;height:2px;background:var(--surface-3);border-radius:2px;flex-shrink:0}
@@ -99,126 +139,52 @@ body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14
 .svc-skus{display:none;padding:4px 0 4px 28px;border-left:2px solid var(--surface-3);margin:0 0 6px 18px}
 .svc-skus.open{display:block}
 .sku-row{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding:3px 0}
+
+/* ── gauge ── */
 .gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0}
 .gauge-ring{position:relative;width:130px;height:72px;overflow:hidden}
 .gauge-ring svg{position:absolute;top:0;left:0}
-.gauge-num{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:-.02em}
+.gauge-num{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:20px;font-weight:500}
 .gauge-meta{font-size:12px;color:var(--muted);text-align:center}
-.empty-state{color:var(--muted);font-size:13px;padding:24px 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
-.empty-state .material-symbols-outlined{font-size:32px;opacity:.3}
-.err-banner{background:var(--red-bg);border:1px solid rgba(234,67,53,0.2);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--red);display:none;align-items:center;gap:8px;margin-bottom:16px}
+
+/* ── anomaly rows ── */
+.anom-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
+.anom-row:last-child{border-bottom:none}
+.anom-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;flex-shrink:0}
+.anom-badge.high{background:var(--red-bg);color:var(--red)}
+.anom-badge.med{background:var(--yellow-bg);color:var(--yellow)}
+
+/* ── misc ── */
+.err-banner{background:var(--red-bg);border:1px solid rgba(255,92,124,.2);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--red);display:none;align-items:center;gap:8px;margin-bottom:16px}
 .err-banner.show{display:flex}
+.page-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
+.page-title{font-size:22px;font-weight:600;letter-spacing:-.02em}
+.page-title strong{font-weight:700;background:linear-gradient(135deg,#7c5cff,#00d4a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+.blink{animation:blink 1.2s ease-in-out infinite}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
 footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:center}
+
+/* ── responsive ── */
 @media(max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr)}.charts-row,.bottom-row{grid-template-columns:1fr}}
 @media(max-width:720px){
   .topbar{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px}
-  .tb-logo{padding:0 10px 0 0;border-right:none}
   .tb-project{display:none}
-  .tb-right{width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;gap:6px}
-  .tb-right::-webkit-scrollbar{display:none}
+  .tb-right{width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;gap:6px}
   .tb-right>*{flex-shrink:0}
   .layout{flex-direction:column}
   .sidebar{width:100%;display:flex;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:8px;gap:4px}
-  .sidebar::-webkit-scrollbar{display:none}
   .nav-section{display:none}
   .nav-item{flex-shrink:0;border-radius:99px;border-left:none;margin-right:0;padding:8px 14px;white-space:nowrap}
   .nav-item.active{border-left:none;border:1px solid var(--blue)}
   .content{padding:16px 12px}
   .kpi-row{grid-template-columns:1fr 1fr;gap:8px}
-  .kpi{padding:14px}
-  .kpi-val{font-size:20px}
-  .page-title{font-size:20px}
-  .card{padding:14px}
+  .page-title{font-size:18px}
 }
 @media(max-width:420px){.kpi-row{grid-template-columns:1fr}}
-@media print {
-    body {
-        background: #fff;
-        color: #000;
-    }
-    .topbar, #user-profile, #push-btn, .sel, footer, #budget-modal, .dropdown {
-        display: none !important;
-    }
-    .main {
-        padding: 0;
-        margin: 0;
-    }
-    .kpi, .card {
-        border: 1px solid #ddd;
-        box-shadow: none;
-    }
-    .kpi-row, .charts-row, .bottom-row {
-        grid-template-columns: 1fr !important;
-    }
-}
-.dropdown {
-    position: relative;
-    display: inline-block;
-}
-.dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: var(--surface-2);
-    min-width: 130px;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    z-index: 1;
-    right: 0;
-    border-radius: var(--r);
-    border: 1px solid var(--border);
-}
-.dropdown-content a {
-    color: var(--text);
-    padding: 8px 12px;
-    text-decoration: none;
-    display: block;
-    font-size: 12px;
-}
-.dropdown-content a:hover {background-color: var(--surface-3);}
-.dropdown:hover .dropdown-content {display: block;}
-.dropdown:hover .sel {
-    border-color: var(--border-h);
-    color: var(--text);
-}
-.sel {
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  color: var(--muted);
-  padding: 6px 10px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-family: var(--font);
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-  transition: background var(--tr), border-color var(--tr), color var(--tr);
-}
-.sel:hover{
-  background: var(--surface-3);
-  border-color: var(--border-h);
-  color: var(--text);
-}
-.sel-opt {
-    background: transparent;
-    border: none;
-    color: var(--muted);
-    padding: 4px 10px;
-    cursor: default;
-    border-radius: 4px;
-    font-size: 12px;
-    font-family: var(--font);
-}
-.sel-opt.active {
-    background: var(--surface-3);
-    color: var(--text);
-    font-weight: 600;
-}
-.blink {
-  animation: blink 1.2s ease-in-out infinite;
-}
-@keyframes blink {
-  0%,100% { opacity: 1; }
-  50%     { opacity: .3; }
+@media print{
+  .topbar,.sidebar,#budget-modal{display:none!important}
+  .module{border:1px solid #ddd}
+  .kpi-row,.charts-row,.bottom-row{grid-template-columns:1fr!important}
 }
 </style>
 </head>
@@ -227,7 +193,7 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente
 <header class="topbar">
   <div class="tb-logo">
     <div class="tb-logo-icon">
-      <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+      <svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
     </div>
     <span class="tb-logo-name">Cost<span>Guard</span></span>
   </div>
@@ -236,10 +202,6 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente
     propane-will-491900-m5
   </div>
   <div class="tb-right">
-    <div id="provider-toggle" class="sel" style="display:flex; gap: 4px; padding: 2px;">
-      <span class="sel-opt active" data-provider="gcp">GCP</span>
-    </div>
-    <span id="push-badge" class="badge" style="display:none; background: #333; color: #aaa;">🔔 Varsler aktive</span>
     <span class="pulse" id="live-dot"></span>
     <span id="top-badge" class="tb-badge ok">
       <span class="material-symbols-outlined" style="font-size:13px">check_circle</span>
@@ -250,10 +212,6 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente
       <option value="30" selected>30 dager</option>
       <option value="90">90 dager</option>
     </select>
-    <button id="push-btn" class="sel" onclick="setupPushNotifications()" title="Aktiver push-varsler">
-      <span class="material-symbols-outlined" style="font-size:16px">notifications</span>
-      <span>Push</span>
-    </button>
     <button class="sel" onclick="fetchAll()" title="Oppdater">
       <span class="material-symbols-outlined" style="font-size:16px">refresh</span>
     </button>
@@ -264,15 +222,14 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente
       </button>
       <div class="dropdown-content">
         <a href="#" onclick="exportCSV()">Eksporter som CSV</a>
-        <a href="#" onclick="exportPDF()">Eksporter til PDF</a>
+        <a href="#" onclick="window.print()">Eksporter til PDF</a>
       </div>
     </div>
-    <div class="sep"></div>
-    <div id="user-profile" style="display: none; align-items: center; gap: 8px;">
-      <img id="user-avatar" src="" alt="avatar" style="width: 28px; height: 28px; border-radius: 50%;">
-      <div style="display: flex; flex-direction: column; line-height: 1.2;">
-        <span id="user-name" style="font-size: 12px; font-weight: 600;"></span>
-        <a href="/auth/logout" style="font-size: 10px; color: var(--muted); text-decoration: none;">Logg ut</a>
+    <div id="user-profile" style="display:none;align-items:center;gap:8px">
+      <img id="user-avatar" src="" alt="" style="width:28px;height:28px;border-radius:50%">
+      <div style="display:flex;flex-direction:column;line-height:1.2">
+        <span id="user-name" style="font-size:12px;font-weight:600"></span>
+        <a href="/auth/logout" style="font-size:10px;color:var(--muted);text-decoration:none">Logg ut</a>
       </div>
     </div>
   </div>
@@ -281,37 +238,15 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente
 <div class="layout">
   <nav class="sidebar">
     <div class="nav-section">Oversikt</div>
-    <div class="nav-item active" onclick="window.scrollTo({top:0,behavior:'smooth'})">
-      <span class="material-symbols-outlined">bar_chart</span>Billing
-    </div>
-    <div class="nav-item">
-      <span class="material-symbols-outlined">notifications</span>Varsler
-    </div>
-    <div class="nav-item">
-      <span class="material-symbols-outlined">trending_up</span>Prognoser
-    </div>
+    <div class="nav-item active"><span class="material-symbols-outlined">bar_chart</span>Billing</div>
+    <div class="nav-item"><span class="material-symbols-outlined">notifications</span>Varsler</div>
+    <div class="nav-item"><span class="material-symbols-outlined">trending_up</span>Prognoser</div>
     <div class="nav-section" style="margin-top:12px">Innstillinger</div>
-    <div class="nav-item" onclick="openBudgetModal()">
-      <span class="material-symbols-outlined">account_balance_wallet</span>Budsjett
-    </div>
-    <div class="nav-item">
-      <span class="material-symbols-outlined">settings</span>Konfigurasjon
-    </div>
+    <div class="nav-item" onclick="openBudgetModal()"><span class="material-symbols-outlined">account_balance_wallet</span>Budsjett</div>
+    <div class="nav-item"><span class="material-symbols-outlined">settings</span>Konfigurasjon</div>
   </nav>
 
   <main class="content">
-
-    <div class="onboarding-banner hidden" id="onboarding-banner">
-      <div class="ob-icon"><span class="material-symbols-outlined">schedule</span></div>
-      <div class="ob-body">
-        <h4>BigQuery billing export synkroniserer</h4>
-        <p>GCP eksporterer fakturadata med 24–48 timers forsinkelse første gang. Kom tilbake i morgen for å se ditt faktiske forbruk.</p>
-      </div>
-      <button class="ob-close" onclick="document.getElementById('onboarding-banner').classList.add('hidden')">
-        <span class="material-symbols-outlined">close</span>
-      </button>
-    </div>
-
     <div class="err-banner" id="err-banner">
       <span class="material-symbols-outlined" style="font-size:14px">warning</span>
       <span id="err-msg">Kan ikke nå API.</span>
@@ -322,524 +257,485 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente
       <span style="font-size:12px;color:var(--muted)" id="last-updated">Henter data...</span>
     </div>
 
-    <section class="cg-section" style="margin-bottom:20px">
-      <h2 style="font-size:14px;margin-bottom:4px">Kostnader siste 30 dager</h2>
-      <p style="font-size:13px;color:var(--muted);max-width:720px">
-        Denne oversikten viser dine faktiske GCP-kostnader de siste 30 dagene, hentet direkte fra BigQuery billing export for din billing-konto.
-        Dataene er aggregert per <strong>dato</strong>, <strong>prosjekt</strong> og <strong>tjeneste</strong>, slik at du raskt ser hvor pengene går.
-      </p>
-    </section>
+    <!-- MODULE GRID: alle kort er draggable og collapsible -->
+    <div class="module-grid" id="module-grid">
 
-    <div class="kpi-row">
-      <div class="kpi">
-        <div class="kpi-top">
-          <span class="kpi-lbl">Totalkostnad MTD</span>
-          <div class="kpi-icon ki-blue"><span class="material-symbols-outlined">payments</span></div>
+      <!-- KPI-rad -->
+      <div class="module" id="mod-kpis" draggable="true">
+        <div class="module-handle" ondragstart="dragStart(event,'mod-kpis')" ondragover="dragOver(event)" ondrop="drop(event,'mod-kpis')">
+          <div class="module-handle-left">
+            <span class="material-symbols-outlined drag-grip">drag_indicator</span>
+            <span class="module-title">Nøkkeltall</span>
+            <span class="module-sub" id="period-lbl">30 dager</span>
+          </div>
+          <div class="module-actions">
+            <button class="module-btn" onclick="toggleModule('mod-kpis')" title="Minimer">
+              <span class="material-symbols-outlined collapse-icon">expand_less</span>
+            </button>
+          </div>
         </div>
-        <div class="kpi-val" id="k-mtd">—</div>
-        <div class="kpi-delta"><span id="k-mtd-d">hittil denne måneden</span></div>
-      </div>
-      <div class="kpi">
-        <div class="kpi-top">
-          <span class="kpi-lbl">Daglig snitt (7d)</span>
-          <div class="kpi-icon ki-green"><span class="material-symbols-outlined">today</span></div>
+        <div class="module-body">
+          <div class="kpi-row">
+            <div class="module" style="border:none;box-shadow:none">
+              <div class="module-body" style="padding:14px">
+                <div class="kpi-top">
+                  <span class="kpi-lbl">Totalkostnad MTD</span>
+                  <div class="kpi-icon ki-blue"><span class="material-symbols-outlined">payments</span></div>
+                </div>
+                <div class="kpi-val" id="k-mtd">—</div>
+                <div class="kpi-delta">hittil denne måneden</div>
+              </div>
+            </div>
+            <div class="module" style="border:none;box-shadow:none">
+              <div class="module-body" style="padding:14px">
+                <div class="kpi-top">
+                  <span class="kpi-lbl">Daglig snitt (7d)</span>
+                  <div class="kpi-icon ki-green"><span class="material-symbols-outlined">today</span></div>
+                </div>
+                <div class="kpi-val" id="k-daily">—</div>
+                <div class="kpi-delta">snitt siste 7 dager</div>
+              </div>
+            </div>
+            <div class="module" style="border:none;box-shadow:none">
+              <div class="module-body" style="padding:14px">
+                <div class="kpi-top">
+                  <span class="kpi-lbl">Prognose måneden</span>
+                  <div class="kpi-icon ki-yellow"><span class="material-symbols-outlined">trending_up</span></div>
+                </div>
+                <div class="kpi-val" id="k-fc">—</div>
+                <div class="kpi-delta"><span id="k-fc-d">— dager gjenbstår</span></div>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="kpi-val" id="k-daily">—</div>
-        <div class="kpi-delta"><span>snitt siste 7 dager</span></div>
       </div>
-      <div class="kpi">
-        <div class="kpi-top">
-          <span class="kpi-lbl">Prognose måneden</span>
-          <div class="kpi-icon ki-yellow"><span class="material-symbols-outlined">trending_up</span></div>
-        </div>
-        <div class="kpi-val" id="k-fc">—</div>
-        <div class="kpi-delta"><span id="k-fc-d">— dager gjenstår</span></div>
-      </div>
-    </div>
 
-    <div class="charts-row">
-      <div class="card">
-        <div class="card-hdr">
-          <span class="card-title">Daglig kostnad</span>
-          <span class="card-sub" id="period-lbl">30 dager · netto etter kreditter</span>
-        </div>
-        <div class="chart-wrap" id="bar-wrap">
-          <div class="empty-state" id="bar-empty">
-            <span class="material-symbols-outlined">bar_chart</span>
-            Ingen daglig data tilgjengelig ennå
+      <!-- Charts-rad -->
+      <div class="module" id="mod-charts" draggable="true">
+        <div class="module-handle" ondragstart="dragStart(event,'mod-charts')" ondragover="dragOver(event)" ondrop="drop(event,'mod-charts')">
+          <div class="module-handle-left">
+            <span class="material-symbols-outlined drag-grip">drag_indicator</span>
+            <span class="module-title">Kostnadsutvikling</span>
+          </div>
+          <div class="module-actions">
+            <button class="module-btn" onclick="toggleModule('mod-charts')" title="Minimer">
+              <span class="material-symbols-outlined collapse-icon">expand_less</span>
+            </button>
+          </div>
+        </div>
+        <div class="module-body">
+          <div class="charts-row">
+            <div>
+              <div style="font-size:13px;font-weight:500;margin-bottom:12px">Daglig kostnad <span style="font-size:11px;color:var(--muted)">netto etter kreditter</span></div>
+              <div class="chart-wrap">
+                <div class="empty-state" id="bar-empty"><span class="material-symbols-outlined">bar_chart</span>Ingen daglig data</div>
+                <canvas id="bar-chart" style="display:none"></canvas>
+              </div>
+            </div>
+            <div>
+              <div style="font-size:13px;font-weight:500;margin-bottom:12px">Fordeling per tjeneste <span style="font-size:11px;color:var(--muted)">andel av total</span></div>
+              <div class="chart-wrap">
+                <div class="empty-state" id="donut-empty"><span class="material-symbols-outlined">donut_large</span>Ingen tjenestedata</div>
+                <canvas id="donut-chart" style="display:none"></canvas>
+              </div>
+            </div>
           </div>
-          <canvas id="bar-chart" style="display:none"></canvas>
         </div>
       </div>
-      <div class="card">
-        <div class="card-hdr">
-          <span class="card-title">Fordeling per tjeneste</span>
-          <span class="card-sub">Andel av total</span>
-        </div>
-        <div class="chart-wrap" id="donut-wrap">
-          <div class="empty-state" id="donut-empty">
-            <span class="material-symbols-outlined">donut_large</span>
-            Ingen tjenestedata tilgjengelig ennå
-          </div>
-          <canvas id="donut-chart" style="display:none"></canvas>
-        </div>
-      </div>
-    </div>
 
-    <div class="bottom-row">
-      <div class="card">
-        <div class="card-hdr"><span class="card-title">Kostnad per tjeneste</span><span class="card-sub">Klikk for detaljer</span></div>
-        <div id="services-body"></div>
-      </div>
-      <div class="card">
-        <div class="card-hdr">
-          <span class="card-title">Budsjett-status</span>
-          <div style="display: flex; align-items: center; gap: 8px;">
-            <span class="card-sub" id="budget-month"></span>
-            <svg onclick="openBudgetModal()" style="cursor: pointer; color: var(--muted);" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" title="Endre budsjett"><path d="M12.22 2h-4.44a2 2 0 0 0-2 2v.78a2 2 0 0 1-1.11 1.79l-.65.44a2 2 0 0 1-1.79 1.11H2v4.44a2 2 0 0 0 2 2h.78a2 2 0 0 1 1.79 1.11l.44.65a2 2 0 0 1 1.11 1.79V22h4.44a2 2 0 0 0 2-2v-.78a2 2 0 0 1 1.11-1.79l.65-.44a2 2 0 0 1 1.79-1.11H22v-4.44a2 2 0 0 0-2-2h-.78a2 2 0 0 1-1.79-1.11l-.44-.65a2 2 0 0 1-1.11-1.79V2z"/><circle cx="12" cy="12" r="3"/></svg>
+      <!-- Tjenester + Budsjett -->
+      <div class="module" id="mod-services" draggable="true">
+        <div class="module-handle" ondragstart="dragStart(event,'mod-services')" ondragover="dragOver(event)" ondrop="drop(event,'mod-services')">
+          <div class="module-handle-left">
+            <span class="material-symbols-outlined drag-grip">drag_indicator</span>
+            <span class="module-title">Tjenester &amp; Budsjett</span>
+            <span class="module-sub">Klikk for SKU-detaljer</span>
+          </div>
+          <div class="module-actions">
+            <button class="module-btn" onclick="toggleModule('mod-services')" title="Minimer">
+              <span class="material-symbols-outlined collapse-icon">expand_less</span>
+            </button>
           </div>
         </div>
-        <div class="gauge-wrap">
-          <div class="gauge-ring">
-            <svg width="120" height="66" viewBox="0 0 120 66">
-              <path d="M10,60 A50,50 0 0,1 110,60" stroke="var(--surface-3)" stroke-width="10" fill="none" stroke-linecap="round"/>
-              <path d="M10,60 A50,50 0 0,1 110,60" stroke="var(--primary)" stroke-width="10" fill="none" stroke-linecap="round"
-                stroke-dasharray="157" id="gauge-arc" stroke-dashoffset="157" style="transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1)"/>
-            </svg>
-            <span class="gauge-num" id="gauge-pct">0%</span>
-          </div>
-          <div>
-            <div style="font-family:var(--mono);font-size:13px;font-weight:600;text-align:center" id="gauge-used">kr 0,00</div>
-            <div class="gauge-meta" id="gauge-budget-total">av kr 500,00 budsjett</div>
-            <div class="gauge-meta" id="gauge-remain" style="margin-top:4px">— gjenstår</div>
+        <div class="module-body">
+          <div class="bottom-row">
+            <div id="services-body"><div class="empty-state"><span class="material-symbols-outlined">list</span>Laster...</div></div>
+            <div>
+              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
+                <span style="font-size:13px;font-weight:500">Budsjett-status</span>
+                <span style="display:flex;align-items:center;gap:6px">
+                  <span style="font-size:12px;color:var(--muted)" id="budget-month"></span>
+                  <button class="module-btn" onclick="openBudgetModal()" title="Endre budsjett">
+                    <span class="material-symbols-outlined">edit</span>
+                  </button>
+                </span>
+              </div>
+              <div class="gauge-wrap">
+                <div class="gauge-ring">
+                  <svg width="130" height="72" viewBox="0 0 130 72">
+                    <path d="M15,65 A50,50 0 0,1 115,65" stroke="var(--surface-3)" stroke-width="10" fill="none" stroke-linecap="round"/>
+                    <path d="M15,65 A50,50 0 0,1 115,65" stroke="var(--primary)" stroke-width="10" fill="none" stroke-linecap="round"
+                      stroke-dasharray="157" id="gauge-arc" stroke-dashoffset="157" style="transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1)"/>
+                  </svg>
+                  <span class="gauge-num" id="gauge-pct">0%</span>
+                </div>
+                <div>
+                  <div style="font-family:var(--mono);font-size:13px;font-weight:600;text-align:center" id="gauge-used">kr 0,00</div>
+                  <div class="gauge-meta" id="gauge-budget-total">av kr 500,00 budsjett</div>
+                  <div class="gauge-meta" id="gauge-remain" style="margin-top:4px">— gjenbstår</div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-      <!-- CG3e: Tokenbruk per agent -->
-    <div class="card" style="margin-top:12px">
-      <div class="card-hdr">
-        <span class="card-title">⚡ Tokenbruk per agent</span>
-        <span class="card-sub">Siste 30 dager</span>
-      </div>
-      <div id="token-usage-body">
-        <div class="empty-state">
-          <span class="material-symbols-outlined">bolt</span>
-          Laster tokendata...
+      <!-- Anomalier (CG6) -->
+      <div class="module" id="mod-anomalies" draggable="true">
+        <div class="module-handle" ondragstart="dragStart(event,'mod-anomalies')" ondragover="dragOver(event)" ondrop="drop(event,'mod-anomalies')">
+          <div class="module-handle-left">
+            <span class="material-symbols-outlined drag-grip">drag_indicator</span>
+            <span class="module-title">⚡ Anomalier</span>
+            <span class="module-sub">Kostnadsavvik i dag vs 7d snitt</span>
+          </div>
+          <div class="module-actions">
+            <button class="module-btn" onclick="toggleModule('mod-anomalies')" title="Minimer">
+              <span class="material-symbols-outlined collapse-icon">expand_less</span>
+            </button>
+          </div>
+        </div>
+        <div class="module-body">
+          <div id="anomalies-body">
+            <div class="empty-state"><span class="material-symbols-outlined">warning</span>Laster...</div>
+          </div>
         </div>
       </div>
-    </div>
+
+      <!-- Anbefalinger (CG4) -->
+      <div class="module" id="mod-recommendations" draggable="true">
+        <div class="module-handle" ondragstart="dragStart(event,'mod-recommendations')" ondragover="dragOver(event)" ondrop="drop(event,'mod-recommendations')">
+          <div class="module-handle-left">
+            <span class="material-symbols-outlined drag-grip">drag_indicator</span>
+            <span class="module-title">💡 Anbefalinger</span>
+            <span class="module-sub" id="rec-savings"></span>
+          </div>
+          <div class="module-actions">
+            <button class="module-btn" onclick="toggleModule('mod-recommendations')" title="Minimer">
+              <span class="material-symbols-outlined collapse-icon">expand_less</span>
+            </button>
+          </div>
+        </div>
+        <div class="module-body">
+          <div id="recommendations-body">
+            <div class="empty-state"><span class="material-symbols-outlined">tips_and_updates</span>Laster anbefalinger...</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tokenbruk (CG3e) -->
+      <div class="module" id="mod-tokens" draggable="true">
+        <div class="module-handle" ondragstart="dragStart(event,'mod-tokens')" ondragover="dragOver(event)" ondrop="drop(event,'mod-tokens')">
+          <div class="module-handle-left">
+            <span class="material-symbols-outlined drag-grip">drag_indicator</span>
+            <span class="module-title">⚡ Tokenbruk per agent</span>
+            <span class="module-sub">Siste 30 dager</span>
+          </div>
+          <div class="module-actions">
+            <button class="module-btn" onclick="toggleModule('mod-tokens')" title="Minimer">
+              <span class="material-symbols-outlined collapse-icon">expand_less</span>
+            </button>
+          </div>
+        </div>
+        <div class="module-body">
+          <div id="token-usage-body">
+            <div class="empty-state"><span class="material-symbols-outlined">bolt</span>Laster tokendata...</div>
+          </div>
+        </div>
+      </div>
+
+    </div><!-- /module-grid -->
   </main>
 </div>
 
 <footer>
   <span id="footer-txt">Henter data...</span>
+  &nbsp;&middot;&nbsp;
   <span style="color:var(--faint)">CostGuard · Vauco · nettokostnad etter kreditter</span>
 </footer>
 
-<div id="budget-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200; align-items: center; justify-content: center; backdrop-filter: blur(4px);">
-  <div style="background: var(--surface-2); padding: 24px; border-radius: var(--r); border: 1px solid var(--border); width: 320px; display: flex; flex-direction: column; gap: 16px;">
-    <h3 style="font-size: 16px; font-weight: 600;">Sett månedsbudsjett</h3>
+<!-- Budget modal -->
+<div id="budget-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;align-items:center;justify-content:center;backdrop-filter:blur(4px)">
+  <div style="background:var(--surface-2);padding:24px;border-radius:var(--r);border:1px solid var(--border);width:320px;display:flex;flex-direction:column;gap:16px">
+    <h3 style="font-size:16px;font-weight:600">Sett månedsbudsjett</h3>
     <div>
-      <label for="budget-input" style="font-size: 11px; color: var(--muted); margin-bottom: 4px; display: block;">Budsjett (NOK)</label>
-      <input id="budget-input" type="number" style="width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; color: var(--text); font-family: var(--mono); font-size: 14px;">
+      <label for="budget-input" style="font-size:11px;color:var(--muted);margin-bottom:4px;display:block">Budsjett (NOK)</label>
+      <input id="budget-input" type="number" style="width:100%;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text);font-family:var(--mono);font-size:14px">
     </div>
-    <div style="display: flex; justify-content: flex-end; gap: 10px;">
-      <button onclick="closeBudgetModal()" style="background: var(--surface-3); border: 1px solid var(--border); color: var(--text); padding: 6px 14px; border-radius: 6px; cursor: pointer;">Avbryt</button>
-      <button id="budget-save-btn" onclick="saveBudget()" style="background: var(--primary); border: none; color: var(--bg); font-weight: 600; padding: 7px 16px; border-radius: 6px; cursor: pointer;">Lagre</button>
+    <div style="display:flex;justify-content:flex-end;gap:10px">
+      <button onclick="closeBudgetModal()" style="background:var(--surface-3);border:1px solid var(--border);color:var(--text);padding:6px 14px;border-radius:6px;cursor:pointer">Avbryt</button>
+      <button id="budget-save-btn" onclick="saveBudget()" style="background:var(--primary);border:none;color:var(--bg);font-weight:600;padding:7px 16px;border-radius:6px;cursor:pointer">Lagre</button>
     </div>
   </div>
 </div>
 
 <script>
 const API_BASE = '';
-let currentBudget = 500;
 const REFRESH_MS = 5 * 60 * 1000;
-let currentProvider = 'gcp';
+const LS_BUDGET = 'cg_budget';
+const LS_COLLAPSED = 'cg_collapsed';
+const LS_ORDER = 'cg_order';
+let currentBudget = parseFloat(localStorage.getItem(LS_BUDGET) || '500');
+let barChart, donutChart, period = 30;
+let currentData = null;
 
-const DEMO_SUMMARY = [
-  {service:'Cloud Run',total_cost:1.82},{service:'Cloud Build',total_cost:0.61},
-  {service:'Artifact Registry',total_cost:0.23},{service:'BigQuery',total_cost:0.18},
-  {service:'Secret Manager',total_cost:0.09},{service:'Pub/Sub',total_cost:0.04},
-  {service:'Cloud Storage',total_cost:0.03}
-];
-const DEMO_FORECAST = {month_to_date_cost:3.00,daily_average_last_7_days:0.13,total_monthly_forecast:3.52};
+// TODO Fase-C: erstatt med Firestore per-bruker
+
+const DEMO_SUMMARY  = [{service:'Cloud Run',total_cost:1.82},{service:'Cloud Build',total_cost:0.61},{service:'Artifact Registry',total_cost:0.23},{service:'BigQuery',total_cost:0.18},{service:'Secret Manager',total_cost:0.09}];
+const DEMO_FORECAST = {month_to_date_cost:3.00,daily_average_last_7_days:0.13,total_monthly_forecast:3.52,remaining_days_in_month:21};
 const DEMO_ANOMALIES = [];
 
-let barChart,donutChart,period=30;
-let currentData={gcp: null};
-let userProfile = null;
+const SVC_COLORS = ['#7c5cff','#00d4a8','#ffb454','#ff5c7c','#a78bfa','#5eead4','#c4b5fd'];
+function fmtNOK(v,d=2){return 'kr '+Math.abs(Number(v)||0).toLocaleString('no-NO',{minimumFractionDigits:d,maximumFractionDigits:d});}
+function animN(el,end,fmt,dur=700){const t0=performance.now();const go=now=>{const p=Math.min((now-t0)/dur,1),e=1-Math.pow(1-p,3);el.textContent=fmt(e*Math.abs(end));if(p<1)requestAnimationFrame(go);};requestAnimationFrame(go);}
+function serviceColor(i){return SVC_COLORS[i%SVC_COLORS.length];}
 
-function fmtNOK(v,d=2){
-  const n=Math.abs(Number(v)||0);
-  return 'kr '+n.toLocaleString('no-NO',{minimumFractionDigits:d,maximumFractionDigits:d});
-}
-function fmtDager(n){return n===1?'1 dag gjenstår':n+' dager gjenstår';}
-function animN(el,end,fmt,dur=700){
-  const abs=Math.abs(end);
-  const t0=performance.now();
-  const go=now=>{const p=Math.min((now-t0)/dur,1),e=1-Math.pow(1-p,3);el.textContent=fmt(e*abs);if(p<1)requestAnimationFrame(go);};
-  requestAnimationFrame(go);
+async function apiFetch(url,opts={}){const r=await fetch(url,opts);if(r.status===401){window.location.href='/auth/login';return new Promise(()=>{});}return r;}
+
+// ── auth ──────────────────────────────────────────────────────────────────
+async function checkAuth(){
+  try{
+    const r=await apiFetch(API_BASE+'/auth/me');
+    if(!r.ok) throw new Error('not logged in');
+    const u=await r.json();
+    document.getElementById('user-name').textContent=u.name;
+    document.getElementById('user-avatar').src=u.picture;
+    document.getElementById('user-profile').style.display='flex';
+  }catch(e){console.warn('auth:',e.message);}
+  restoreLayout();
+  await fetchAll();
+  setInterval(fetchAll,REFRESH_MS);
 }
 
-async function apiFetch(url, options = {}) {
-  const response = await fetch(url, options);
-  if (response.status === 401) {
-    window.location.href = '/auth/login';
-    return new Promise(() => {});
-  }
-  return response;
+// ── budget (localStorage) ─────────────────────────────────────────────────
+function openBudgetModal(){document.getElementById('budget-input').value=currentBudget;document.getElementById('budget-modal').style.display='flex';}
+function closeBudgetModal(){document.getElementById('budget-modal').style.display='none';}
+function saveBudget(){
+  const v=parseFloat(document.getElementById('budget-input').value);
+  if(isNaN(v)||v<=0){alert('Oppgi et gyldig beløp.');return;}
+  currentBudget=v;
+  localStorage.setItem(LS_BUDGET,v);
+  closeBudgetModal();
+  if(currentData)buildGauge(currentData.forecast.month_to_date_cost||0);
 }
 
-function switchProvider(provider) {
-  currentProvider = 'gcp';
-  localStorage.setItem('costguard_provider', 'gcp');
-  document.querySelectorAll('#provider-toggle .sel-opt').forEach(btn => {
-    btn.classList.toggle('active', btn.dataset.provider === 'gcp');
-  });
-  fetchAll();
-}
-
-async function checkAuth() {
-  try {
-    const response = await apiFetch(API_BASE + '/auth/me');
-    if (!response.ok) throw new Error('Not logged in');
-    userProfile = await response.json();
-    document.getElementById('user-name').textContent = userProfile.name;
-    document.getElementById('user-avatar').src = userProfile.picture;
-    document.getElementById('user-profile').style.display = 'flex';
-    switchProvider(currentProvider);
-    await fetchBudget();
-    setInterval(fetchAll, REFRESH_MS);
-  } catch (err) {
-    console.error("Authentication check failed", err);
-  }
-}
-
-async function fetchBudget() {
-  try {
-    const response = await apiFetch(API_BASE + '/billing/budget');
-    if (!response.ok) throw new Error('Failed to fetch budget');
-    const data = await response.json();
-    currentBudget = data.budget;
-    document.getElementById('budget-input').value = currentBudget;
-    renderAll();
-  } catch (err) {
-    console.warn('Could not fetch budget, using default:', err.message);
-  }
-}
-
-async function saveBudget() {
-  const btn = document.getElementById('budget-save-btn');
-  const originalText = btn.textContent;
-  btn.textContent = 'Lagrer...';
-  btn.disabled = true;
-  const input = document.getElementById('budget-input');
-  const newBudgetValue = parseFloat(input.value);
-  if (isNaN(newBudgetValue) || newBudgetValue <= 0) {
-    alert('Vennligst oppgi et gyldig, positivt tall for budsjettet.');
-    btn.textContent = originalText;
-    btn.disabled = false;
-    return;
-  }
-  try {
-    const response = await apiFetch(API_BASE + '/billing/budget', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ budget: newBudgetValue })
-    });
-    if (!response.ok) throw new Error('Failed to save budget');
-    const data = await response.json();
-    currentBudget = data.budget;
-    closeBudgetModal();
-    renderAll();
-  } catch (err) {
-    alert('Kunne ikke lagre budsjett: ' + err.message);
-  } finally {
-    btn.textContent = originalText;
-    btn.disabled = false;
-  }
-}
-
-function openBudgetModal() {
-  document.getElementById('budget-input').value = currentBudget;
-  document.getElementById('budget-modal').style.display = 'flex';
-}
-
-function closeBudgetModal() {
-  document.getElementById('budget-modal').style.display = 'none';
+// ── module drag & drop ────────────────────────────────────────────────────
+let dragSrc=null;
+function dragStart(e,id){dragSrc=id;e.dataTransfer.effectAllowed='move';document.getElementById(id).classList.add('dragging');}
+document.addEventListener('dragend',()=>{document.querySelectorAll('.module').forEach(m=>{m.classList.remove('dragging','drag-over');});saveOrder();});
+function dragOver(e){e.preventDefault();e.dataTransfer.dropEffect='move';const m=e.currentTarget.closest('.module');if(m&&m.id!==dragSrc)m.classList.add('drag-over');}
+function drop(e,targetId){
+  e.preventDefault();
+  if(!dragSrc||dragSrc===targetId)return;
+  const grid=document.getElementById('module-grid');
+  const src=document.getElementById(dragSrc);
+  const tgt=document.getElementById(targetId);
+  if(!src||!tgt)return;
+  const children=[...grid.children];
+  const si=children.indexOf(src),ti=children.indexOf(tgt);
+  if(si<ti)grid.insertBefore(src,tgt.nextSibling);
+  else grid.insertBefore(src,tgt);
+  document.querySelectorAll('.module').forEach(m=>m.classList.remove('drag-over'));
+  saveOrder();
+}
+function saveOrder(){
+  const ids=[...document.getElementById('module-grid').children].map(m=>m.id);
+  localStorage.setItem(LS_ORDER,JSON.stringify(ids));
+}
+function restoreLayout(){
+  // Restore collapsed state
+  const collapsed=JSON.parse(localStorage.getItem(LS_COLLAPSED)||'[]');
+  collapsed.forEach(id=>{const m=document.getElementById(id);if(m)m.classList.add('collapsed');});
+  // Restore order
+  const order=JSON.parse(localStorage.getItem(LS_ORDER)||'[]');
+  if(!order.length)return;
+  const grid=document.getElementById('module-grid');
+  order.forEach(id=>{const m=document.getElementById(id);if(m)grid.appendChild(m);});
+}
+function toggleModule(id){
+  const m=document.getElementById(id);
+  if(!m)return;
+  m.classList.toggle('collapsed');
+  const collapsed=[...document.querySelectorAll('.module.collapsed')].map(x=>x.id);
+  localStorage.setItem(LS_COLLAPSED,JSON.stringify(collapsed));
 }
 
+// ── fetch ─────────────────────────────────────────────────────────────────
 async function fetchAll(){
   const dot=document.getElementById('live-dot');
   dot.style.background='var(--warn)';
-  try {
-    const gcpSummary  = apiFetch(API_BASE+'/billing/summary');
-    const gcpForecast = apiFetch(API_BASE+'/billing/live');
-    const gcpAnomalies= apiFetch(API_BASE+'/billing/anomalies');
-    const gcpHistory  = apiFetch(API_BASE+'/billing/history');
-    const gcpServices = apiFetch(API_BASE+'/billing/by-service');
-
-    const [gcpSR,gcpLR,gcpAR,gcpHR,gcpSvcR] = await Promise.all([gcpSummary,gcpForecast,gcpAnomalies,gcpHistory,gcpServices]);
-
-    if (!gcpSR.ok || !gcpLR.ok || !gcpAR.ok) throw new Error('HTTP error on core billing endpoints');
-
-    const [gcpS,gcpL,gcpA] = await Promise.all([gcpSR.json(),gcpLR.json(),gcpAR.json()]);
-
-    let gcpH = { history: [] };
-    if (gcpHR.ok) { try { gcpH = await gcpHR.json(); } catch(e){ console.warn('history parse error',e); } }
-
-    let gcpSvcData = null;
-    if (gcpSvcR.ok) { try { gcpSvcData = await gcpSvcR.json(); } catch(e){ console.warn('by-service parse error',e); } }
-
-    currentData.gcp = {
-      summary: gcpS.summary || [],
-      forecast: gcpL,
-      anomalies: gcpA.anomalies || [],
-      history: gcpH.history || [],
-      serviceGroups: gcpSvcData || null
-    };
-
+  try{
+    const [sr,fr,ar,hr,svcr] = await Promise.all([
+      apiFetch(API_BASE+'/billing/summary'),
+      apiFetch(API_BASE+'/billing/live'),
+      apiFetch(API_BASE+'/billing/anomalies'),
+      apiFetch(API_BASE+'/billing/history'),
+      apiFetch(API_BASE+'/billing/by-service'),
+    ]);
+    if(!sr.ok||!fr.ok) throw new Error('Core endpoints failed');
+    const [s,f] = await Promise.all([sr.json(),fr.json()]);
+    const a = ar.ok ? await ar.json() : {anomalies:[]};
+    const h = hr.ok ? await hr.json() : {history:[]};
+    const svc = svcr.ok ? await svcr.json() : [];
+    currentData={summary:s.summary||[],forecast:f,anomalies:a.anomalies||[],history:h.history||[],serviceGroups:svc};
     document.getElementById('err-banner').classList.remove('show');
     dot.style.background='var(--ok)';
-  } catch(err) {
+  }catch(err){
     console.warn('API feil, demo-data:',err.message);
-    if (err.message.includes("Not logged in")) return;
-    currentData.gcp = { summary: DEMO_SUMMARY, forecast: DEMO_FORECAST, anomalies: DEMO_ANOMALIES, history: [], serviceGroups: null };
-    document.getElementById('err-msg').textContent='API utilgjengelig: '+err.message+' — demo-data vises.';
+    currentData={summary:DEMO_SUMMARY,forecast:DEMO_FORECAST,anomalies:DEMO_ANOMALIES,history:[],serviceGroups:null};
+    document.getElementById('err-msg').textContent='API utilgjengelig: '+err.message;
     document.getElementById('err-banner').classList.add('show');
     dot.style.background='var(--red)';
   }
   renderAll();
+  fetchTokens();
+  fetchRecommendations();
 }
 
-function getVisibleData() {
-  return currentData.gcp;
-}
-
-function calculateDailyCosts(history) {
-  if (!history || history.length === 0) return { labels: [], costs: [] };
-  const dailyCosts = [], labels = [];
-  for (let i = 0; i < history.length; i++) {
-    const entry = history[i];
-    const currentMtd = entry.mtd || 0;
-    const entryDate = new Date(entry.date);
-    const prevMtd = (i > 0 && entryDate.getDate() !== 1) ? (history[i-1].mtd || 0) : 0;
-    dailyCosts.push(Math.max(0, currentMtd - prevMtd));
-    labels.push(entryDate.toLocaleDateString('no-NO', {day:'numeric',month:'short'}));
-  }
-  return { labels, costs: dailyCosts };
-}
-
-const SVC_COLORS = ['#7c5cff','#00d4a8','#ffb454','#ff5c7c','#a78bfa','#5eead4','#c4b5fd'];
-function serviceColor(name, i) {
-  if (i !== undefined) return SVC_COLORS[i % SVC_COLORS.length];
-  let h = 0;
-  for (let c of name) h = (h * 31 + c.charCodeAt(0)) & 0xffffffff;
-  return SVC_COLORS[Math.abs(h) % SVC_COLORS.length];
-}
-
+// ── render ────────────────────────────────────────────────────────────────
 function renderAll(){
-  const data = getVisibleData();
-  if (!data) return;
-  const {summary, forecast, anomalies, history, serviceGroups} = data;
-  const { labels, costs } = calculateDailyCosts(history);
-  buildBar(labels, costs);
+  if(!currentData)return;
+  const{summary,forecast,anomalies,history,serviceGroups}=currentData;
+  buildBar(history);
   buildDonut(summary);
-  // CG5: bruk serviceGroups fra /billing/by-service hvis tilgjengelig, ellers fallback til summary
-  if (serviceGroups && serviceGroups.length) {
-    renderServiceRows(serviceGroups);
-  } else {
-    buildSvc(summary);
-  }
+  serviceGroups&&serviceGroups.length?renderServiceRows(serviceGroups):buildSvc(summary);
   buildAnom(anomalies);
-  if (forecast) updateKPIs(forecast, anomalies.length);
-  const ts = new Date().toLocaleTimeString('no-NO',{hour:'2-digit',minute:'2-digit'});
+  if(forecast)updateKPIs(forecast);
+  const ts=new Date().toLocaleTimeString('no-NO',{hour:'2-digit',minute:'2-digit'});
   document.getElementById('footer-txt').textContent='Sist oppdatert '+ts;
   document.getElementById('last-updated').textContent='Sist oppdatert '+ts;
-  const monthName = new Date().toLocaleString('no-NO', { month: 'long' });
-  document.getElementById('budget-month').textContent = monthName.charAt(0).toUpperCase() + monthName.slice(1) + " " + new Date().getFullYear();
+  const mn=new Date().toLocaleString('no-NO',{month:'long'});
+  document.getElementById('budget-month').textContent=mn.charAt(0).toUpperCase()+mn.slice(1)+' '+new Date().getFullYear();
 }
 
-function buildBar(labels, costs){
+function buildBar(history){
   const ctx=document.getElementById('bar-chart').getContext('2d');
   if(barChart)barChart.destroy();
-  if (!costs || costs.length === 0) {
+  if(!history||!history.length){
     document.getElementById('bar-empty').style.display='flex';
     document.getElementById('bar-chart').style.display='none';
     return;
   }
   document.getElementById('bar-empty').style.display='none';
   document.getElementById('bar-chart').style.display='block';
-  barChart=new Chart(ctx,{type:'bar',data:{labels,datasets:[{label:'Kostnad',data:costs,backgroundColor:'rgba(124,92,255,0.55)',borderRadius:4,borderSkipped:false}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false},tooltip:{backgroundColor:'rgba(22,21,19,.95)',borderColor:'rgba(255,255,255,.08)',borderWidth:1,titleColor:'#7a7874',bodyColor:'#e8e6e2',titleFont:{family:'Inter',size:11},bodyFont:{family:'JetBrains Mono',size:12,weight:'600'},callbacks:{label:c=>'  '+fmtNOK(c.raw,2)}}},scales:{x:{grid:{display:false},ticks:{color:'#3f3d3a',font:{size:10},maxTicksLimit:15}},y:{grid:{color:'rgba(255,255,255,.04)'},ticks:{color:'#3f3d3a',font:{family:'JetBrains Mono',size:10},callback:v=>'kr '+v.toFixed(2)},border:{display:false}}}}});
+  // Daglig delta fra MTD
+  const labels=[],costs=[];
+  history.forEach((e,i)=>{
+    const d=new Date(e.date);
+    labels.push(d.toLocaleDateString('no-NO',{day:'numeric',month:'short'}));
+    const prev=i>0&&d.getDate()!==1?(history[i-1].mtd||0):0;
+    costs.push(Math.max(0,(e.mtd||0)-prev));
+  });
+  barChart=new Chart(ctx,{type:'bar',data:{labels,datasets:[{label:'Kostnad',data:costs,backgroundColor:'rgba(124,92,255,.55)',borderRadius:4,borderSkipped:false}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false},tooltip:{callbacks:{label:c=>'  '+fmtNOK(c.raw)}}},scales:{x:{grid:{display:false},ticks:{color:'#3f3d3a',font:{size:10},maxTicksLimit:15}},y:{grid:{color:'rgba(255,255,255,.04)'},ticks:{color:'#3f3d3a',font:{family:'JetBrains Mono',size:10},callback:v=>'kr '+v.toFixed(2)},border:{display:false}}}}});
 }
 
 function buildDonut(summary){
-  const hasData=summary.some(s=>(s.daily_cost??s.total_cost??s.cost??0)>0);
-  if(!hasData){
-    document.getElementById('donut-empty').style.display='flex';
-    document.getElementById('donut-chart').style.display='none';
-    if(donutChart){donutChart.destroy();donutChart=null;}
-    return;
-  }
-  document.getElementById('donut-empty').style.display='none';
-  document.getElementById('donut-chart').style.display='block';
+  const hasData=summary.some(s=>(s.daily_cost??s.total_cost??0)>0);
+  if(!hasData){document.getElementById('donut-empty').style.display='flex';document.getElementById('donut-chart').style.display='none';if(donutChart){donutChart.destroy();donutChart=null;}return;}
+  document.getElementById('donut-empty').style.display='none';document.getElementById('donut-chart').style.display='block';
   const ctx=document.getElementById('donut-chart').getContext('2d');
   if(donutChart)donutChart.destroy();
-  const top=summary.filter(s=>(s.daily_cost??s.total_cost??s.cost??0)>0).slice(0,7);
-  donutChart=new Chart(ctx,{type:'doughnut',data:{labels:top.map(s=>s.service),datasets:[{data:top.map(s=>s.daily_cost??s.total_cost??s.cost??0),backgroundColor:SVC_COLORS,borderColor:'#13131c',borderWidth:2,hoverBorderWidth:3}]},options:{responsive:true,maintainAspectRatio:false,cutout:'70%',plugins:{legend:{display:false},tooltip:{backgroundColor:'rgba(22,27,34,.97)',borderColor:'rgba(139,148,158,.15)',borderWidth:1,titleColor:'#8b949e',bodyColor:'#e6edf3',callbacks:{label:c=>'  '+fmtNOK(c.raw)}}}}});
+  const top=summary.filter(s=>(s.daily_cost??s.total_cost??0)>0).slice(0,7);
+  donutChart=new Chart(ctx,{type:'doughnut',data:{labels:top.map(s=>s.service),datasets:[{data:top.map(s=>s.daily_cost??s.total_cost??0),backgroundColor:SVC_COLORS,borderColor:'#13131c',borderWidth:2}]},options:{responsive:true,maintainAspectRatio:false,cutout:'70%',plugins:{legend:{display:false},tooltip:{callbacks:{label:c=>'  '+fmtNOK(c.raw)}}}}});
 }
 
-// CG5: ny grouped render med SKU drill-down
-function renderServiceRows(data) {
-  const container = document.getElementById('services-body');
-  if (!data || !data.length) {
-    container.innerHTML = '<div class="empty-state"><span class="material-symbols-outlined">list</span>Ingen data</div>';
-    return;
-  }
-  const max = Math.max(...data.map(s => s.total_cost || 0), 0.000001);
-  container.innerHTML = data.slice(0,8).map((svc, i) => {
-    const hasSkus = svc.skus && svc.skus.length > 1;
-    const color = serviceColor(svc.service, i);
-    const pct = ((svc.total_cost || 0) / max * 100).toFixed(1);
-    const skuRows = (svc.skus || []).map(s =>
-      `<div class="sku-row"><span>${s.sku}</span><span>${fmtNOK(s.sku_cost)}</span></div>`
-    ).join('');
-    return `<div class="svc-row" data-idx="${i}" ${hasSkus ? `onclick="toggleSkus(${i})"` : ''}>
+function renderServiceRows(data){
+  const el=document.getElementById('services-body');
+  if(!data||!data.length){el.innerHTML='<div class="empty-state"><span class="material-symbols-outlined">list</span>Ingen data</div>';return;}
+  const max=Math.max(...data.map(s=>s.total_cost||0),1e-6);
+  el.innerHTML=data.slice(0,8).map((svc,i)=>{
+    const hasSkus=svc.skus&&svc.skus.length>1;
+    const color=serviceColor(i);
+    const pct=((svc.total_cost||0)/max*100).toFixed(1);
+    const skuRows=(svc.skus||[]).map(s=>`<div class="sku-row"><span>${s.sku}</span><span>${fmtNOK(s.sku_cost)}</span></div>`).join('');
+    return `<div class="svc-row" data-idx="${i}" ${hasSkus?`onclick="toggleSkus(${i})"`:''}>
       <div class="svc-dot" style="background:${color}"></div>
       <span class="svc-name">${svc.service}</span>
       <div class="svc-bar-w"><div class="svc-bar" style="width:${pct}%;background:${color}"></div></div>
       <span class="svc-cost">${fmtNOK(svc.total_cost)}</span>
-      ${hasSkus ? '<span class="material-symbols-outlined svc-chevron">chevron_right</span>' : ''}
-    </div>
-    ${hasSkus ? `<div class="svc-skus" id="skus-${i}">${skuRows}</div>` : ''}`;
-  }).join('');
+      ${hasSkus?'<span class="material-symbols-outlined svc-chevron">chevron_right</span>':''}
+    </div>${hasSkus?`<div class="svc-skus" id="skus-${i}">${skuRows}</div>`:''}`;}).join('');
 }
+function toggleSkus(i){const row=document.querySelector(`.svc-row[data-idx="${i}"]`);const skus=document.getElementById(`skus-${i}`);if(!row||!skus)return;row.classList.toggle('expanded');skus.classList.toggle('open');}
 
-function toggleSkus(i) {
-  const row = document.querySelector(`.svc-row[data-idx="${i}"]`);
-  const skus = document.getElementById(`skus-${i}`);
-  if (!row || !skus) return;
-  row.classList.toggle('expanded');
-  skus.classList.toggle('open');
-}
-
-// Fallback: brukes når /billing/by-service ikke er tilgjengelig
 function buildSvc(summary){
-  const el = document.getElementById('services-body');
-  const top = [...summary].sort((a,b) => {
-    return (b.daily_cost??b.total_cost??b.cost??0) - (a.daily_cost??a.total_cost??a.cost??0);
-  }).slice(0,8);
-  if (!top.length) {
-    el.innerHTML='<div class="empty-state"><span class="material-symbols-outlined">list</span>Ingen data</div>';
-    return;
-  }
-  const max = Math.max(...top.map(s=>Math.abs(s.daily_cost??s.total_cost??s.cost??0)),0.000001);
-  el.innerHTML = top.map((s,i) => {
-    const c = s.daily_cost??s.total_cost??s.cost??0;
-    const pct = (Math.abs(c)/max*100).toFixed(1);
-    const color = serviceColor(s.service, i);
-    return `<div class="svc-row" data-idx="${i}">
-      <div class="svc-dot" style="background:${color}"></div>
-      <span class="svc-name">${s.service}</span>
-      <div class="svc-bar-w"><div class="svc-bar" style="width:${pct}%;background:${color}"></div></div>
-      <span class="svc-cost">${fmtNOK(c)}</span>
-    </div>`;
-  }).join('');
+  const el=document.getElementById('services-body');
+  const top=[...summary].sort((a,b)=>(b.daily_cost??b.total_cost??0)-(a.daily_cost??a.total_cost??0)).slice(0,8);
+  if(!top.length){el.innerHTML='<div class="empty-state"><span class="material-symbols-outlined">list</span>Ingen data</div>';return;}
+  const max=Math.max(...top.map(s=>Math.abs(s.daily_cost??s.total_cost??0)),1e-6);
+  el.innerHTML=top.map((s,i)=>{const c=s.daily_cost??s.total_cost??0;const pct=(Math.abs(c)/max*100).toFixed(1);return `<div class="svc-row"><div class="svc-dot" style="background:${serviceColor(i)}"></div><span class="svc-name">${s.service}</span><div class="svc-bar-w"><div class="svc-bar" style="width:${pct}%;background:${serviceColor(i)}"></div></div><span class="svc-cost">${fmtNOK(c)}</span></div>`;}).join('');
 }
 
 function buildAnom(anomalies){
   const tb=document.getElementById('top-badge');
-  if(!tb) return;
+  const body=document.getElementById('anomalies-body');
   if(!anomalies||!anomalies.length){
-    tb.className='tb-badge ok';
-    tb.innerHTML='<span class="material-symbols-outlined" style="font-size:13px">check_circle</span> Ingen anomalier';
+    tb.className='tb-badge ok';tb.innerHTML='<span class="material-symbols-outlined" style="font-size:13px">check_circle</span> Ingen anomalier';
+    body.innerHTML='<div class="empty-state"><span class="material-symbols-outlined">check_circle</span>Ingen avvik oppdaget i dag</div>';
     return;
   }
   const maxRatio=Math.max(...anomalies.map(a=>a.ratio||0));
-  if(maxRatio<1.5){
-    tb.className='tb-badge ok';
-    tb.innerHTML='<span class="material-symbols-outlined" style="font-size:13px">check_circle</span> Mild økning, innenfor normalen';
-  }else if(maxRatio<2.5){
-    tb.className='tb-badge warn';
-    tb.innerHTML='<span class="material-symbols-outlined" style="font-size:13px">error</span> Økt bruk på flere tjenester';
-  }else{
-    tb.className='tb-badge err';
-    tb.innerHTML='<span class="material-symbols-outlined blink" style="font-size:13px">warning</span> Kraftig avvik — sjekk kostnad per tjeneste';
-  }
+  if(maxRatio<2.5){tb.className='tb-badge warn';tb.innerHTML='<span class="material-symbols-outlined" style="font-size:13px">error</span> Økt bruk';}
+  else{tb.className='tb-badge err';tb.innerHTML='<span class="material-symbols-outlined blink" style="font-size:13px">warning</span> Kraftig avvik';}
+  body.innerHTML=anomalies.map(a=>{
+    const severity=a.ratio>4?'high':'med';
+    return `<div class="anom-row">
+      <span class="anom-badge ${severity}">×${(a.ratio||0).toFixed(1)}</span>
+      <span class="svc-name">${a.service}</span>
+      <span style="font-family:var(--mono);font-size:12px;color:var(--muted)">${fmtNOK(a.today_cost)} <span style="color:var(--faint)">vs snitt ${fmtNOK(a.avg_7d)}</span></span>
+    </div>`;}).join('');
 }
 
 function buildGauge(mtd){
   const pct=Math.min(mtd/currentBudget,1);
   const arc=document.getElementById('gauge-arc');
   arc.style.stroke=pct>.8?'var(--red)':pct>.6?'var(--yellow)':'var(--blue)';
-  setTimeout(()=>arc.style.strokeDashoffset=173*(1-pct),80);
+  setTimeout(()=>arc.style.strokeDashoffset=157*(1-pct),80);
   document.getElementById('gauge-pct').textContent=Math.round(pct*100)+'%';
   document.getElementById('gauge-used').textContent=fmtNOK(mtd);
   document.getElementById('gauge-budget-total').textContent=`av ${fmtNOK(currentBudget,0)} budsjett`;
   const r=currentBudget-mtd;
   const rel=document.getElementById('gauge-remain');
-  rel.textContent=r>0?fmtNOK(r)+' gjenstår':'Budsjett overskredet';
+  rel.textContent=r>0?fmtNOK(r)+' gjenbstår':'Budsjett overskredet';
   rel.style.color=r<0?'var(--red)':'var(--muted)';
 }
 
-function updateKPIs(forecast,anomCount){
+function updateKPIs(forecast){
   const mtd=forecast.month_to_date_cost||0;
   const daily=forecast.daily_average_last_7_days;
   const fc=forecast.total_monthly_forecast||0;
   const left=forecast.remaining_days_in_month??(31-new Date().getDate());
   animN(document.getElementById('k-mtd'),mtd,v=>fmtNOK(v));
-  if(daily!==null&&daily>0){animN(document.getElementById('k-daily'),daily,v=>fmtNOK(v,4));}
-  else{document.getElementById('k-daily').textContent='kr —';}
+  if(daily>0)animN(document.getElementById('k-daily'),daily,v=>fmtNOK(v,4));
+  else document.getElementById('k-daily').textContent='kr —';
   animN(document.getElementById('k-fc'),fc,v=>fmtNOK(v));
-  document.getElementById('k-fc-d').textContent=left+' dager gjenstår';
+  document.getElementById('k-fc-d').textContent=left+' dager gjenbstår';
   buildGauge(mtd);
 }
 
-function updatePeriod(n){
-  period=n;
-  document.getElementById('period-lbl').textContent=n+' dager';
-  const data=getVisibleData();
-  if(data&&data.history){
-    const{labels,costs}=calculateDailyCosts(data.history);
-    buildBar(labels,costs);
-  }
+function updatePeriod(n){period=n;if(currentData)buildBar(currentData.history);}
+
+function exportCSV(){
+  if(!currentData||!currentData.summary)return;
+  const rows=currentData.summary.map(s=>`"${s.service}",${(s.daily_cost??s.total_cost??0).toFixed(2)}`);
+  const csv='data:text/csv;charset=utf-8,Tjeneste,Kostnad (NOK)\n'+rows.join('\n');
+  const a=document.createElement('a');a.href=encodeURI(csv);a.download=`costguard_${new Date().toISOString().split('T')[0]}.csv`;
+  document.body.appendChild(a);a.click();document.body.removeChild(a);
 }
 
-function exportCSV() {
-  const data=getVisibleData();
-  if(!data||!data.summary) return;
-  const headers="Tjeneste,Kostnad (NOK)";
-  const rows=data.summary.map(service=>{
-    const cost=(service.daily_cost??service.total_cost??service.cost??0).toFixed(2);
-    return `"${service.service}",${cost}`;
-  });
-  const csvContent="data:text/csv;charset=utf-8,"+[headers,...rows].join("\n");
-  const link=document.createElement("a");
-  link.setAttribute("href",encodeURI(csvContent));
-  link.setAttribute("download",`costguard_export_${new Date().toISOString().split('T')[0]}.csv`);
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-}
-
-function exportPDF() { window.print(); }
-
-document.addEventListener('DOMContentLoaded', checkAuth);
-
-if ('serviceWorker' in navigator) {
-  window.addEventListener('load', () => {
-    navigator.serviceWorker.register('/sw.js').then(r=>{
-      console.log('ServiceWorker registered:', r.scope);
-    }, err=>console.log('ServiceWorker failed:', err));
-  });
-}
-
-// CG4: hent anbefalinger
-(function(){
-  const ICONS = {high:'🔴', medium:'🟡', low:'🟢', anomaly:'⚡', waste:'♻️', budget:'💸'};
-  fetch('/billing/recommendations')
+// ── anbefalinger (CG4) ────────────────────────────────────────────────────
+function fetchRecommendations(){
+  const ICONS={high:'🔴',medium:'🟡',low:'🟢',anomaly:'⚡',waste:'♻️',budget:'💸'};
+  fetch(API_BASE+'/billing/recommendations')
     .then(r=>r.ok?r.json():Promise.reject(r.status))
     .then(data=>{
       const body=document.getElementById('recommendations-body');
@@ -856,47 +752,38 @@ if ('serviceWorker' in navigator) {
           <span class="svc-name">${r.message}</span>
           <span style="font-size:11px;color:var(--muted);background:var(--surface-3);padding:2px 8px;border-radius:99px;flex-shrink:0">${r.service}</span>
           ${r.estimated_savings_nok>0?`<span class="svc-cost">-${r.estimated_savings_nok.toLocaleString('no-NO',{minimumFractionDigits:2})} kr</span>`:''}
-        </div>
-      `).join('');
+        </div>`).join('');
     })
-    .catch(()=>{
-      document.getElementById('recommendations-body').innerHTML=
-        '<div class="empty-state"><span class="material-symbols-outlined">check_circle</span>Ingen anbefalinger tilgjengelig</div>';
-      document.getElementById('rec-savings').textContent='';
-    });
-})();
+    .catch(()=>{document.getElementById('recommendations-body').innerHTML='<div class="empty-state"><span class="material-symbols-outlined">check_circle</span>Ingen anbefalinger tilgjengelig</div>';});
+}
 
-// CG3e: hent tokenbruk
-(function(){
-  fetch('/billing/tokens/summary')
+// ── tokenbruk (CG3e) ──────────────────────────────────────────────────────
+function fetchTokens(){
+  fetch(API_BASE+'/billing/tokens/summary')
     .then(r=>r.ok?r.json():Promise.reject(r.status))
     .then(data=>{
       const body=document.getElementById('token-usage-body');
-      if(!data.rows||!data.rows.length){
-        body.innerHTML='<div class="empty-state"><span class="material-symbols-outlined">bolt</span>Ingen tokendata ennå</div>';
-        return;
-      }
+      if(!data.rows||!data.rows.length){body.innerHTML='<div class="empty-state"><span class="material-symbols-outlined">bolt</span>Ingen tokendata ennå</div>';return;}
       body.innerHTML=`<table style="width:100%;border-collapse:collapse;font-size:13px">
         <thead><tr style="color:var(--muted);font-size:11px;text-align:left">
-          <th style="padding:6px 0">Agent</th>
-          <th>Modell</th>
-          <th style="text-align:right">Tokens</th>
-          <th style="text-align:right">Kost (USD)</th>
+          <th style="padding:6px 0">Agent</th><th>Modell</th>
+          <th style="text-align:right">Tokens</th><th style="text-align:right">Kost (USD)</th>
         </tr></thead>
         <tbody>${data.rows.map(r=>`<tr style="border-top:1px solid var(--border)">
           <td style="padding:7px 0">${r.agent_name}</td>
           <td style="color:var(--muted)">${r.model_name}</td>
           <td style="text-align:right;font-family:var(--mono)">${r.total_tokens.toLocaleString()}</td>
           <td style="text-align:right;font-family:var(--mono)">$${r.total_cost_usd.toFixed(4)}</td>
-        </tr>`).join('')}</tbody>
-      </table>`;
+        </tr>`).join('')}</tbody></table>`;
     })
-    .catch(()=>{
-      document.getElementById('token-usage-body').innerHTML=
-        '<div class="empty-state"><span class="material-symbols-outlined">bolt</span>Ingen tokendata ennå</div>';
-    });
-})();
-</script>
+    .catch(()=>{document.getElementById('token-usage-body').innerHTML='<div class="empty-state"><span class="material-symbols-outlined">bolt</span>Ingen tokendata ennå</div>';});
+}
 
+document.addEventListener('DOMContentLoaded',checkAuth);
+
+if('serviceWorker' in navigator){
+  window.addEventListener('load',()=>navigator.serviceWorker.register('/sw.js').catch(()=>{}));
+}
+</script>
 </body>
 </html>