From b4ce8523b01633f4409d32383d65eaf7bf10c5e7 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Thu, 16 Apr 2026 12:51:31 +0200
Subject: [PATCH] feat(credits): merge subscription management into Credits &
 Abo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The standalone "Abonnement" workbench app (lib/modules/subscription/)
duplicated billing functionality that should live alongside credits.
Users saw two separate apps for the same domain.

Replace the placeholder SubscriptionPage in the Abo tab with the real
subscription management from the subscription module:
- Current plan status with cancel/reactivate
- Plan selection with billing interval toggle (monatlich/jährlich)
- Stripe checkout integration
- Invoice history (collapsed <details>)
- Stripe billing portal link

Delete:
- lib/modules/subscription/ (merged into credits)
- app-registry 'subscription' registration
- CreditCard icon import (no longer used)

The Credits & Abo app now has 5 tabs:
1. Übersicht — balance + recent transactions + quick-buy
2. Abo — current subscription + plan picker + invoices
3. Verlauf — full transaction table
4. Kaufen — one-time credit packages (Stripe)
5. Kosten — per-operation pricing breakdown

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../apps/web/src/lib/app-registry/apps.ts     |  11 -
 .../src/lib/modules/credits/ListView.svelte   | 736 +++++++++++++---
 .../lib/modules/subscription/ListView.svelte  | 792 ------------------
 3 files changed, 632 insertions(+), 907 deletions(-)
 delete mode 100644 apps/mana/apps/web/src/lib/modules/subscription/ListView.svelte

diff --git a/apps/mana/apps/web/src/lib/app-registry/apps.ts b/apps/mana/apps/web/src/lib/app-registry/apps.ts
index abb981a5b..cc61f2864 100644
--- a/apps/mana/apps/web/src/lib/app-registry/apps.ts
+++ b/apps/mana/apps/web/src/lib/app-registry/apps.ts
@@ -67,7 +67,6 @@ import {
 	Key,
 	Question,
 	ChatCircleDots,
-	CreditCard,
 	SquaresFour,
 	Scroll,
 	Spiral,
@@ -1189,13 +1188,3 @@ registerApp({
 		list: { load: () => import('$lib/modules/feedback/ListView.svelte') },
 	},
 });
-
-registerApp({
-	id: 'subscription',
-	name: 'Abonnement',
-	color: '#10B981',
-	icon: CreditCard,
-	views: {
-		list: { load: () => import('$lib/modules/subscription/ListView.svelte') },
-	},
-});
diff --git a/apps/mana/apps/web/src/lib/modules/credits/ListView.svelte b/apps/mana/apps/web/src/lib/modules/credits/ListView.svelte
index 89fba5632..1eed84f96 100644
--- a/apps/mana/apps/web/src/lib/modules/credits/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/credits/ListView.svelte
@@ -1,7 +1,7 @@
 <!--
-  Credits & Abo — Workbench-embedded billing hub. Merges the former
-  /credits (balance, transactions, packages, cost breakdown) with
-  /mana (subscription plans) into a single tabbed view.
+  Credits & Abo — Workbench-embedded billing hub. Single place for
+  balance, subscription management, credit purchases, transactions,
+  and cost breakdown.
 
   Stripe redirect handling: after checkout Stripe sends the user back
   to /?app=credits&success=true (or &canceled=true). The workbench
@@ -12,13 +12,19 @@
 	import { _ } from 'svelte-i18n';
 	import { onMount } from 'svelte';
 	import { Card } from '@mana/shared-ui';
-	import { SubscriptionPage } from '@mana/subscriptions';
+	import { Check } from '@mana/shared-icons';
 	import {
 		creditsService,
 		type CreditBalance,
 		type CreditTransaction,
 		type CreditPackage,
 	} from '$lib/api/credits';
+	import {
+		subscriptionsService,
+		type SubscriptionPlan,
+		type CurrentSubscription,
+		type Invoice,
+	} from '$lib/api/subscriptions';
 	import {
 		OPERATION_METADATA,
 		CREDIT_COSTS,
@@ -29,9 +35,22 @@
 	import { ManaEvents } from '@mana/shared-utils/analytics';
 	import { authStore } from '$lib/stores/auth.svelte';
 
+	// ── Credits state ──────────────────────────────────────
 	let balance = $state<CreditBalance | null>(null);
 	let transactions = $state<CreditTransaction[]>([]);
 	let packages = $state<CreditPackage[]>([]);
+
+	// ── Subscription state ─────────────────────────────────
+	let subPlans = $state<SubscriptionPlan[]>([]);
+	let currentSub = $state<CurrentSubscription | null>(null);
+	let invoices = $state<Invoice[]>([]);
+	let billingInterval = $state<'month' | 'year'>('month');
+	let processingPlanId = $state<string | null>(null);
+	let cancelingSub = $state(false);
+	let reactivatingSub = $state(false);
+	let openingPortal = $state(false);
+
+	// ── Shared state ───────────────────────────────────────
 	let loading = $state(true);
 	let error = $state<string | null>(null);
 	let activeTab = $state<'overview' | 'subscriptions' | 'transactions' | 'packages' | 'costs'>(
@@ -109,7 +128,6 @@
 
 	// ── Lifecycle ──────────────────────────────────────────
 	onMount(async () => {
-		// Read URL params for tab selection + Stripe redirect
 		const params = new URLSearchParams(window.location.search);
 		const tab = params.get('tab');
 		if (tab === 'packages') activeTab = 'packages';
@@ -121,8 +139,7 @@
 		const canceled = params.get('canceled');
 
 		if (success === 'true') {
-			showToast('Credits wurden erfolgreich gekauft!', 'success');
-			// Clean Stripe params from URL
+			showToast('Zahlung erfolgreich!', 'success');
 			history.replaceState({}, '', '/');
 		} else if (canceled === 'true') {
 			showToast('Kauf wurde abgebrochen', 'error');
@@ -137,17 +154,18 @@
 		loading = true;
 		error = null;
 
-		// API calls require auth — skip for guests, still show costs tab (static data)
 		if (!authStore.isAuthenticated) {
 			loading = false;
 			return;
 		}
 
-		// Load each independently so a single 401/failure doesn't blank the whole page
 		const results = await Promise.allSettled([
 			creditsService.getBalance(),
 			creditsService.getTransactions(20),
 			creditsService.getPackages(),
+			subscriptionsService.getPlans(),
+			subscriptionsService.getCurrentSubscription(),
+			subscriptionsService.getInvoices(10),
 		]);
 
 		if (results[0].status === 'fulfilled') balance = results[0].value;
@@ -155,8 +173,12 @@
 		if (results[2].status === 'fulfilled') {
 			packages = results[2].value.filter((p) => p.active).sort((a, b) => a.sortOrder - b.sortOrder);
 		}
+		if (results[3].status === 'fulfilled') {
+			subPlans = results[3].value.filter((p) => p.active).sort((a, b) => a.sortOrder - b.sortOrder);
+		}
+		if (results[4].status === 'fulfilled') currentSub = results[4].value;
+		if (results[5].status === 'fulfilled') invoices = results[5].value;
 
-		// Only show error if ALL three failed
 		const allFailed = results.every((r) => r.status === 'rejected');
 		if (allFailed) {
 			const firstErr = results.find((r) => r.status === 'rejected') as PromiseRejectedResult;
@@ -167,7 +189,7 @@
 		loading = false;
 	}
 
-	// ── Helpers ────────────────────────────────────────────
+	// ── Credit helpers ─────────────────────────────────────
 	function formatCredits(amount: number): string {
 		return amount.toLocaleString('de-DE');
 	}
@@ -186,6 +208,14 @@
 		});
 	}
 
+	function formatDateShort(dateStr: string): string {
+		return new Date(dateStr).toLocaleDateString('de-DE', {
+			day: '2-digit',
+			month: '2-digit',
+			year: 'numeric',
+		});
+	}
+
 	function getTransactionIcon(type: string): string {
 		switch (type) {
 			case 'purchase':
@@ -214,6 +244,7 @@
 		}
 	}
 
+	// ── Credit actions ─────────────────────────────────────
 	async function handleBuyPackage(pkg: CreditPackage) {
 		processingPackageId = pkg.id;
 		try {
@@ -229,12 +260,74 @@
 		}
 	}
 
-	function handleSubscribe(planId: string) {
-		showToast(`Abo "${planId}" ausgewählt. Bezahlsystem wird in Kürze integriert.`, 'success');
+	// ── Subscription helpers ───────────────────────────────
+	function getStatusLabel(status: string): string {
+		const map: Record<string, string> = {
+			active: 'Aktiv',
+			canceled: 'Gekündigt',
+			past_due: 'Überfällig',
+			trialing: 'Testphase',
+		};
+		return map[status] || status;
 	}
 
-	function handleBuySubscriptionPackage(packageId: string) {
-		showToast(`Paket "${packageId}" ausgewählt. Bezahlsystem wird in Kürze integriert.`, 'success');
+	function getSavingsPercent(monthly: number, yearly: number): number {
+		const full = monthly * 12;
+		if (full === 0) return 0;
+		return Math.round(((full - yearly) / full) * 100);
+	}
+
+	// ── Subscription actions ───────────────────────────────
+	async function handleSelectPlan(plan: SubscriptionPlan) {
+		if (plan.isDefault) return;
+		processingPlanId = plan.id;
+		try {
+			const { url } = await subscriptionsService.createCheckout(plan.id, billingInterval);
+			window.location.href = url;
+		} catch (e) {
+			showToast(e instanceof Error ? e.message : 'Fehler beim Checkout', 'error');
+		} finally {
+			processingPlanId = null;
+		}
+	}
+
+	async function handleOpenPortal() {
+		openingPortal = true;
+		try {
+			const { url } = await subscriptionsService.openPortal();
+			window.location.href = url;
+		} catch (e) {
+			showToast(e instanceof Error ? e.message : 'Fehler beim Billing-Portal', 'error');
+		} finally {
+			openingPortal = false;
+		}
+	}
+
+	async function handleCancelSub() {
+		if (!confirm('Möchtest du dein Abonnement wirklich kündigen?')) return;
+		cancelingSub = true;
+		try {
+			await subscriptionsService.cancelSubscription();
+			showToast('Abonnement wird zum Ende der Laufzeit gekündigt', 'success');
+			await loadData();
+		} catch (e) {
+			showToast(e instanceof Error ? e.message : 'Fehler beim Kündigen', 'error');
+		} finally {
+			cancelingSub = false;
+		}
+	}
+
+	async function handleReactivateSub() {
+		reactivatingSub = true;
+		try {
+			await subscriptionsService.reactivateSubscription();
+			showToast('Abonnement wurde reaktiviert', 'success');
+			await loadData();
+		} catch (e) {
+			showToast(e instanceof Error ? e.message : 'Fehler beim Reaktivieren', 'error');
+		} finally {
+			reactivatingSub = false;
+		}
 	}
 
 	function showToast(message: string, type: 'success' | 'error') {
@@ -246,9 +339,7 @@
 
 <div class="credits-page">
 	{#if loading}
-		<div class="loading">
-			<div class="spinner"></div>
-		</div>
+		<div class="loading"><div class="spinner"></div></div>
 	{:else if error}
 		<Card>
 			<div class="text-center py-8">
@@ -275,7 +366,7 @@
 
 		<!-- Tabs -->
 		<div class="tab-bar">
-			{#each [{ key: 'overview', label: 'Übersicht' }, { key: 'subscriptions', label: 'Abonnements' }, { key: 'transactions', label: 'Transaktionen' }, { key: 'packages', label: 'Kaufen' }, { key: 'costs', label: 'Kosten' }] as tab}
+			{#each [{ key: 'overview', label: 'Übersicht' }, { key: 'subscriptions', label: 'Abo' }, { key: 'transactions', label: 'Verlauf' }, { key: 'packages', label: 'Kaufen' }, { key: 'costs', label: 'Kosten' }] as tab}
 				<button
 					onclick={() => (activeTab = tab.key as typeof activeTab)}
 					class="tab-btn"
@@ -345,16 +436,155 @@
 
 			<!-- ── Tab: Abonnements ─────────────────────────── -->
 		{:else if activeTab === 'subscriptions'}
-			<SubscriptionPage
-				appName="Mana"
-				onSubscribe={handleSubscribe}
-				onBuyPackage={handleBuySubscriptionPackage}
-				currentPlanId="free"
-				pageTitle="Wähle dein Abo"
-				subscriptionsTitle="Abonnements"
-				packagesTitle="Einmal-Pakete"
-				yearlyDiscount="20% Rabatt"
-			/>
+			<!-- Current subscription status -->
+			{#if currentSub?.subscription}
+				{@const sub = currentSub.subscription}
+				{@const plan = currentSub.plan}
+				<div class="status-card">
+					<div class="status-header">
+						<div>
+							<div class="status-title-row">
+								<span class="sub-plan-name">{plan?.name || 'Aktueller Plan'}</span>
+								<span
+									class="status-badge"
+									class:active={sub.status === 'active'}
+									class:canceled={sub.status === 'canceled'}
+								>
+									{getStatusLabel(sub.status)}
+								</span>
+							</div>
+							<span class="sub-mana">
+								{plan?.monthlyCredits.toLocaleString('de-DE')} Mana / Monat
+							</span>
+						</div>
+						<button class="portal-btn" disabled={openingPortal} onclick={handleOpenPortal}>
+							{openingPortal ? '...' : 'Zahlungsmethode'}
+						</button>
+					</div>
+					<div class="status-details">
+						<div class="detail">
+							<span class="detail-label">Zeitraum</span>
+							<span>{sub.billingInterval === 'year' ? 'Jährlich' : 'Monatlich'}</span>
+						</div>
+						<div class="detail">
+							<span class="detail-label">Periode</span>
+							<span>
+								{formatDateShort(sub.currentPeriodStart)} – {formatDateShort(sub.currentPeriodEnd)}
+							</span>
+						</div>
+						<div class="detail">
+							{#if sub.cancelAtPeriodEnd}
+								<span class="detail-label">Endet am</span>
+								<span class="text-warn">{formatDateShort(sub.currentPeriodEnd)}</span>
+								<button class="link-btn" disabled={reactivatingSub} onclick={handleReactivateSub}>
+									{reactivatingSub ? '...' : 'Reaktivieren'}
+								</button>
+							{:else}
+								<span class="detail-label">Verlängert am</span>
+								<span>{formatDateShort(sub.currentPeriodEnd)}</span>
+								<button class="link-btn danger" disabled={cancelingSub} onclick={handleCancelSub}>
+									{cancelingSub ? '...' : 'Kündigen'}
+								</button>
+							{/if}
+						</div>
+					</div>
+				</div>
+			{:else}
+				<div class="status-card">
+					<div class="status-title-row">
+						<span class="sub-plan-name">Free Plan</span>
+						<span class="status-badge active">Aktuell</span>
+					</div>
+					<span class="sub-mana">150 Mana / Monat</span>
+				</div>
+			{/if}
+
+			<!-- Billing interval toggle -->
+			<div class="interval-toggle">
+				<button
+					class="interval-btn"
+					class:selected={billingInterval === 'month'}
+					onclick={() => (billingInterval = 'month')}>Monatlich</button
+				>
+				<button
+					class="interval-btn"
+					class:selected={billingInterval === 'year'}
+					onclick={() => (billingInterval = 'year')}
+				>
+					Jährlich <span class="save-tag">–17%</span>
+				</button>
+			</div>
+
+			<!-- Plans list -->
+			<div class="plans-list">
+				{#each subPlans as plan}
+					{@const isCurrent = currentSub?.plan?.id === plan.id}
+					{@const price =
+						billingInterval === 'year' ? plan.priceYearlyEuroCents : plan.priceMonthlyEuroCents}
+					<button
+						class="plan-row"
+						class:current={isCurrent}
+						disabled={isCurrent || plan.isDefault || processingPlanId === plan.id}
+						onclick={() => handleSelectPlan(plan)}
+					>
+						<div class="plan-info">
+							<span class="plan-row-name">
+								{plan.name}
+								{#if isCurrent}<span class="current-tag">Dein Plan</span>{/if}
+							</span>
+							<span class="plan-row-mana"
+								>{plan.monthlyCredits.toLocaleString('de-DE')} Mana / Monat</span
+							>
+							{#if plan.features?.length}
+								<span class="plan-features-preview">
+									{plan.features.slice(0, 2).join(' · ')}
+								</span>
+							{/if}
+						</div>
+						<div class="plan-price-col">
+							{#if plan.isDefault}
+								<span class="plan-price-free">Kostenlos</span>
+							{:else}
+								<span class="plan-price-amount">{formatPrice(price)}</span>
+								<span class="plan-price-period"
+									>/ {billingInterval === 'year' ? 'Jahr' : 'Monat'}</span
+								>
+							{/if}
+						</div>
+					</button>
+				{/each}
+			</div>
+
+			<!-- Invoices -->
+			{#if invoices.length > 0}
+				<details class="invoices-details">
+					<summary class="invoices-summary">Rechnungen ({invoices.length})</summary>
+					<div class="invoices-list">
+						{#each invoices as inv}
+							<div class="invoice-row">
+								<div class="invoice-info">
+									<span class="invoice-number">{inv.number || '-'}</span>
+									<span class="invoice-date">{formatDateShort(inv.createdAt)}</span>
+								</div>
+								<div class="invoice-right">
+									<span class="invoice-amount">{formatPrice(inv.amountPaidEuroCents)}</span>
+									<span class="invoice-status" class:paid={inv.status === 'paid'}>
+										{inv.status === 'paid' ? 'Bezahlt' : inv.status}
+									</span>
+									{#if inv.invoicePdfUrl}
+										<a
+											href={inv.invoicePdfUrl}
+											target="_blank"
+											rel="noopener noreferrer"
+											class="pdf-link">PDF</a
+										>
+									{/if}
+								</div>
+							</div>
+						{/each}
+					</div>
+				</details>
+			{/if}
 
 			<!-- ── Tab: Transaktionen ───────────────────────── -->
 		{:else if activeTab === 'transactions'}
@@ -485,9 +715,7 @@
 </div>
 
 {#if toastMessage}
-	<div class="toast" class:toast-error={toastType === 'error'}>
-		{toastMessage}
-	</div>
+	<div class="toast" class:toast-error={toastType === 'error'}>{toastMessage}</div>
 {/if}
 
 <style>
@@ -497,7 +725,7 @@
 		overflow-y: auto;
 		display: flex;
 		flex-direction: column;
-		gap: 1.5rem;
+		gap: 1rem;
 	}
 
 	.loading {
@@ -531,22 +759,22 @@
 
 	.balance-card {
 		text-align: center;
-		padding: 1rem;
+		padding: 0.75rem;
 		background: hsl(var(--color-card));
 		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.75rem;
 	}
 
 	.balance-label {
-		font-size: 0.75rem;
+		font-size: 0.6875rem;
 		color: hsl(var(--color-muted-foreground));
 		margin: 0;
 	}
 
 	.balance-value {
-		font-size: 1.5rem;
+		font-size: 1.25rem;
 		font-weight: 700;
-		margin: 0.25rem 0 0;
+		margin: 0.125rem 0 0;
 		color: hsl(var(--color-foreground));
 	}
 
@@ -569,11 +797,11 @@
 
 	.tab-btn {
 		flex-shrink: 0;
-		padding: 0.5rem 1rem;
+		padding: 0.5rem 0.75rem;
 		margin-bottom: -1px;
 		border: none;
 		background: none;
-		font-size: 0.875rem;
+		font-size: 0.8125rem;
 		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: color 0.15s;
@@ -593,25 +821,19 @@
 	/* ── Overview ────────────────────────────────────────── */
 	.overview-grid {
 		display: grid;
-		gap: 1.5rem;
-	}
-
-	@media (min-width: 1024px) {
-		.overview-grid {
-			grid-template-columns: 1fr 1fr;
-		}
+		gap: 1rem;
 	}
 
 	.card-title {
-		font-size: 1rem;
+		font-size: 0.9375rem;
 		font-weight: 600;
-		margin: 0 0 1rem;
+		margin: 0 0 0.75rem;
 		color: hsl(var(--color-foreground));
 	}
 
 	.empty-hint {
 		color: hsl(var(--color-muted-foreground));
-		font-size: 0.875rem;
+		font-size: 0.8125rem;
 		text-align: center;
 		padding: 1rem;
 		margin: 0;
@@ -620,14 +842,13 @@
 	.tx-list {
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
 	}
 
 	.tx-row {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 0.5rem 0;
+		padding: 0.375rem 0;
 		border-bottom: 1px solid hsl(var(--color-border));
 	}
 
@@ -638,37 +859,37 @@
 	.tx-left {
 		display: flex;
 		align-items: center;
-		gap: 0.75rem;
+		gap: 0.5rem;
 	}
 
 	.tx-icon {
-		font-size: 1.25rem;
+		font-size: 1rem;
 	}
 
 	.tx-desc {
-		font-size: 0.875rem;
+		font-size: 0.8125rem;
 		font-weight: 500;
 		margin: 0;
 		color: hsl(var(--color-foreground));
 	}
 
 	.tx-date {
-		font-size: 0.75rem;
+		font-size: 0.6875rem;
 		color: hsl(var(--color-muted-foreground));
 		margin: 0;
 	}
 
 	.tx-amount {
 		font-weight: 600;
-		font-size: 0.875rem;
+		font-size: 0.8125rem;
 	}
 
 	.link-btn {
 		display: block;
-		margin-top: 1rem;
+		margin-top: 0.75rem;
 		background: none;
 		border: none;
-		font-size: 0.875rem;
+		font-size: 0.8125rem;
 		color: hsl(var(--color-primary));
 		cursor: pointer;
 		padding: 0;
@@ -678,11 +899,19 @@
 		text-decoration: underline;
 	}
 
+	.link-btn.danger {
+		color: hsl(var(--color-error));
+	}
+
+	.link-btn:disabled {
+		opacity: 0.5;
+	}
+
 	/* ── Quick buy ───────────────────────────────────────── */
 	.quick-buy {
 		display: flex;
 		flex-direction: column;
-		gap: 0.75rem;
+		gap: 0.5rem;
 	}
 
 	.quick-buy-btn {
@@ -690,7 +919,7 @@
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
-		padding: 0.75rem;
+		padding: 0.625rem;
 		background: hsl(var(--color-card));
 		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.5rem;
@@ -711,11 +940,12 @@
 
 	.pkg-name {
 		font-weight: 500;
+		font-size: 0.8125rem;
 		margin: 0;
 	}
 
 	.pkg-credits {
-		font-size: 0.875rem;
+		font-size: 0.75rem;
 		color: hsl(var(--color-muted-foreground));
 		margin: 0;
 	}
@@ -723,6 +953,316 @@
 	.pkg-price {
 		font-weight: 600;
 		color: hsl(var(--color-primary));
+		font-size: 0.875rem;
+	}
+
+	/* ── Subscription tab ────────────────────────────────── */
+	.status-card {
+		padding: 0.75rem;
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.625rem;
+		background: hsl(var(--color-card));
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.status-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+
+	.status-title-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.sub-plan-name {
+		font-size: 0.875rem;
+		font-weight: 700;
+		color: hsl(var(--color-foreground));
+	}
+
+	.status-badge {
+		font-size: 0.5625rem;
+		font-weight: 600;
+		padding: 0.0625rem 0.375rem;
+		border-radius: 9999px;
+		background: hsl(var(--color-muted) / 0.3);
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.status-badge.active {
+		background: hsl(142 71% 45% / 0.12);
+		color: hsl(142 71% 45%);
+	}
+
+	.status-badge.canceled {
+		background: hsl(45 93% 47% / 0.12);
+		color: hsl(45 93% 47%);
+	}
+
+	.sub-mana {
+		font-size: 0.6875rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.portal-btn {
+		flex-shrink: 0;
+		padding: 0.1875rem 0.5rem;
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.375rem;
+		background: transparent;
+		font-size: 0.625rem;
+		cursor: pointer;
+		color: hsl(var(--color-foreground));
+	}
+
+	.portal-btn:hover {
+		background: hsl(var(--color-surface-hover));
+	}
+
+	.status-details {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1875rem;
+		margin-top: 0.375rem;
+		padding-top: 0.375rem;
+		border-top: 1px solid hsl(var(--color-border));
+	}
+
+	.detail {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.6875rem;
+	}
+
+	.detail-label {
+		color: hsl(var(--color-muted-foreground));
+		min-width: 5rem;
+	}
+
+	.text-warn {
+		color: hsl(45 93% 47%);
+	}
+
+	.interval-toggle {
+		display: flex;
+		gap: 0.25rem;
+		justify-content: center;
+		padding: 0.1875rem;
+		background: hsl(var(--color-muted) / 0.2);
+		border-radius: 0.5rem;
+	}
+
+	.interval-btn {
+		padding: 0.3125rem 0.625rem;
+		border: none;
+		border-radius: 0.375rem;
+		background: transparent;
+		font-size: 0.6875rem;
+		font-weight: 500;
+		cursor: pointer;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.interval-btn.selected {
+		background: hsl(var(--color-card));
+		color: hsl(var(--color-foreground));
+		box-shadow: 0 1px 3px hsl(0 0% 0% / 0.08);
+	}
+
+	.save-tag {
+		font-size: 0.5625rem;
+		color: hsl(142 71% 45%);
+	}
+
+	.plans-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	.plan-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+		width: 100%;
+		padding: 0.625rem 0.75rem;
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.625rem;
+		background: hsl(var(--color-card));
+		cursor: pointer;
+		transition: all 0.15s;
+		text-align: left;
+		color: hsl(var(--color-foreground));
+		font: inherit;
+	}
+
+	.plan-row:hover:not(:disabled) {
+		background: hsl(var(--color-surface-hover));
+		border-color: hsl(var(--color-primary) / 0.3);
+	}
+
+	.plan-row:disabled {
+		cursor: default;
+		opacity: 0.8;
+	}
+
+	.plan-row.current {
+		border-color: hsl(var(--color-primary) / 0.35);
+		background: hsl(var(--color-primary) / 0.05);
+	}
+
+	.plan-info {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.0625rem;
+	}
+
+	.plan-row-name {
+		font-size: 0.8125rem;
+		font-weight: 600;
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	.current-tag {
+		font-size: 0.5625rem;
+		font-weight: 600;
+		color: hsl(var(--color-primary));
+		background: hsl(var(--color-primary) / 0.1);
+		padding: 0.0625rem 0.375rem;
+		border-radius: 9999px;
+	}
+
+	.plan-row-mana {
+		font-size: 0.6875rem;
+		color: hsl(var(--color-primary));
+		font-weight: 500;
+	}
+
+	.plan-features-preview {
+		font-size: 0.625rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.plan-price-col {
+		flex-shrink: 0;
+		text-align: right;
+	}
+
+	.plan-price-amount {
+		font-size: 0.875rem;
+		font-weight: 700;
+		display: block;
+	}
+
+	.plan-price-free {
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.plan-price-period {
+		font-size: 0.5625rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	/* ── Invoices ────────────────────────────────────────── */
+	.invoices-details {
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.625rem;
+		overflow: hidden;
+	}
+
+	.invoices-summary {
+		padding: 0.625rem 0.75rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: hsl(var(--color-muted-foreground));
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.invoices-summary:hover {
+		color: hsl(var(--color-foreground));
+	}
+
+	.invoices-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		padding: 0 0.75rem 0.75rem;
+	}
+
+	.invoice-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		padding: 0.375rem 0;
+		border-bottom: 1px solid hsl(var(--color-border));
+	}
+
+	.invoice-row:last-child {
+		border-bottom: none;
+	}
+
+	.invoice-info {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.invoice-number {
+		font-family: monospace;
+		font-size: 0.6875rem;
+	}
+
+	.invoice-date {
+		font-size: 0.625rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.invoice-right {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	.invoice-amount {
+		font-size: 0.75rem;
+		font-weight: 500;
+	}
+
+	.invoice-status {
+		font-size: 0.5625rem;
+		padding: 0.0625rem 0.375rem;
+		border-radius: 9999px;
+		background: hsl(45 93% 47% / 0.12);
+		color: hsl(45 93% 47%);
+	}
+
+	.invoice-status.paid {
+		background: hsl(142 71% 45% / 0.12);
+		color: hsl(142 71% 45%);
+	}
+
+	.pdf-link {
+		font-size: 0.625rem;
+		color: hsl(var(--color-primary));
+		text-decoration: none;
+	}
+
+	.pdf-link:hover {
+		text-decoration: underline;
 	}
 
 	/* ── Transactions table ──────────────────────────────── */
@@ -736,16 +1276,16 @@
 	}
 
 	.tx-table th {
-		padding: 0 0 0.75rem;
-		font-size: 0.875rem;
+		padding: 0 0 0.5rem;
+		font-size: 0.75rem;
 		font-weight: 500;
 		color: hsl(var(--color-muted-foreground));
 		text-align: left;
 	}
 
 	.tx-table td {
-		padding: 0.75rem 0.5rem 0.75rem 0;
-		font-size: 0.875rem;
+		padding: 0.5rem 0.375rem 0.5rem 0;
+		font-size: 0.8125rem;
 		border-bottom: 1px solid hsl(var(--color-border));
 		color: hsl(var(--color-foreground));
 	}
@@ -755,7 +1295,7 @@
 	}
 
 	.tx-icon-sm {
-		font-size: 1rem;
+		font-size: 0.875rem;
 	}
 
 	.muted {
@@ -777,19 +1317,7 @@
 	/* ── Packages grid ───────────────────────────────────── */
 	.packages-grid {
 		display: grid;
-		gap: 1rem;
-	}
-
-	@media (min-width: 640px) {
-		.packages-grid {
-			grid-template-columns: repeat(2, 1fr);
-		}
-	}
-
-	@media (min-width: 1024px) {
-		.packages-grid {
-			grid-template-columns: repeat(3, 1fr);
-		}
+		gap: 0.75rem;
 	}
 
 	.pkg-card {
@@ -797,40 +1325,40 @@
 	}
 
 	.pkg-card-name {
-		font-size: 1.125rem;
+		font-size: 1rem;
 		font-weight: 700;
 		margin: 0;
 		color: hsl(var(--color-foreground));
 	}
 
 	.pkg-card-desc {
-		font-size: 0.875rem;
+		font-size: 0.8125rem;
 		color: hsl(var(--color-muted-foreground));
 		margin: 0.25rem 0 0;
 	}
 
 	.pkg-card-credits {
-		font-size: 2rem;
+		font-size: 1.75rem;
 		font-weight: 700;
 		color: hsl(var(--color-primary));
-		margin: 1rem 0 0;
+		margin: 0.75rem 0 0;
 	}
 
 	.pkg-card-unit {
-		font-size: 0.875rem;
+		font-size: 0.75rem;
 		color: hsl(var(--color-muted-foreground));
 		margin: 0;
 	}
 
 	.pkg-card-price {
-		font-size: 1.25rem;
+		font-size: 1.125rem;
 		font-weight: 600;
-		margin: 1rem 0 0;
+		margin: 0.75rem 0 0;
 		color: hsl(var(--color-foreground));
 	}
 
 	.pkg-buy-btn {
-		margin-top: 1rem;
+		margin-top: 0.75rem;
 		width: 100%;
 	}
 
@@ -838,13 +1366,13 @@
 	.cost-filters {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 0.5rem;
+		gap: 0.375rem;
 	}
 
 	.filter-chip {
-		padding: 0.375rem 0.75rem;
+		padding: 0.3125rem 0.625rem;
 		border-radius: 9999px;
-		font-size: 0.875rem;
+		font-size: 0.8125rem;
 		font-weight: 500;
 		border: none;
 		cursor: pointer;
@@ -863,11 +1391,11 @@
 	}
 
 	.info-banner {
-		padding: 1rem;
+		padding: 0.75rem;
 		border-radius: 0.5rem;
 		background: hsl(210 100% 95%);
 		border: 1px solid hsl(210 100% 85%);
-		font-size: 0.875rem;
+		font-size: 0.8125rem;
 		color: hsl(210 50% 30%);
 	}
 
@@ -880,7 +1408,7 @@
 	.cost-groups {
 		display: flex;
 		flex-direction: column;
-		gap: 1rem;
+		gap: 0.75rem;
 	}
 
 	.cost-list {
@@ -892,9 +1420,9 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 0.75rem 0;
+		padding: 0.5rem 0;
 		border-bottom: 1px solid hsl(var(--color-border));
-		gap: 1rem;
+		gap: 0.75rem;
 	}
 
 	.cost-row:last-child {
@@ -907,35 +1435,35 @@
 	}
 
 	.cost-name {
-		font-size: 0.875rem;
+		font-size: 0.8125rem;
 		font-weight: 500;
 		margin: 0;
 		color: hsl(var(--color-foreground));
 	}
 
 	.cost-desc {
-		font-size: 0.75rem;
+		font-size: 0.6875rem;
 		color: hsl(var(--color-muted-foreground));
-		margin: 0.125rem 0 0;
+		margin: 0.0625rem 0 0;
 	}
 
 	.cost-right {
 		display: flex;
 		align-items: center;
-		gap: 0.75rem;
+		gap: 0.5rem;
 		flex-shrink: 0;
 	}
 
 	.cost-category {
-		font-size: 0.75rem;
+		font-size: 0.6875rem;
 		color: hsl(var(--color-muted-foreground));
 	}
 
 	.cost-badge {
 		display: inline-flex;
-		padding: 0.125rem 0.625rem;
+		padding: 0.0625rem 0.5rem;
 		border-radius: 9999px;
-		font-size: 0.75rem;
+		font-size: 0.6875rem;
 		font-weight: 600;
 		background: hsl(210 100% 95%);
 		color: hsl(210 50% 40%);
@@ -970,7 +1498,7 @@
 	.btn {
 		padding: 0.5rem 1rem;
 		border-radius: 0.5rem;
-		font-size: 0.875rem;
+		font-size: 0.8125rem;
 		font-weight: 500;
 		border: none;
 		cursor: pointer;
@@ -1001,7 +1529,7 @@
 		color: white;
 		border-radius: 0.5rem;
 		box-shadow: 0 4px 12px hsl(0 0% 0% / 0.15);
-		font-size: 0.875rem;
+		font-size: 0.8125rem;
 		animation: fadeIn 0.2s ease-out;
 	}
 
diff --git a/apps/mana/apps/web/src/lib/modules/subscription/ListView.svelte b/apps/mana/apps/web/src/lib/modules/subscription/ListView.svelte
deleted file mode 100644
index 03e98f523..000000000
--- a/apps/mana/apps/web/src/lib/modules/subscription/ListView.svelte
+++ /dev/null
@@ -1,792 +0,0 @@
-<!--
-  Subscription — Workbench-embedded subscription management with plan
-  selection, current status, billing interval toggle, and invoice history.
--->
-<script lang="ts">
-	import { _ } from 'svelte-i18n';
-	import { onMount } from 'svelte';
-	import { Check } from '@mana/shared-icons';
-	import {
-		subscriptionsService,
-		type SubscriptionPlan,
-		type CurrentSubscription,
-		type Invoice,
-	} from '$lib/api/subscriptions';
-
-	let plans = $state<SubscriptionPlan[]>([]);
-	let currentSubscription = $state<CurrentSubscription | null>(null);
-	let invoices = $state<Invoice[]>([]);
-	let loading = $state(true);
-	let error = $state<string | null>(null);
-	let activeTab = $state<'plans' | 'invoices'>('plans');
-	let billingInterval = $state<'month' | 'year'>('month');
-	let processingPlanId = $state<string | null>(null);
-	let cancelingSubscription = $state(false);
-	let reactivatingSubscription = $state(false);
-	let openingPortal = $state(false);
-
-	let toastMessage = $state<string | null>(null);
-	let toastType = $state<'success' | 'error'>('success');
-
-	onMount(async () => {
-		await loadData();
-	});
-
-	async function loadData() {
-		loading = true;
-		error = null;
-		try {
-			const [plansData, subscriptionData, invoicesData] = await Promise.all([
-				subscriptionsService.getPlans(),
-				subscriptionsService.getCurrentSubscription(),
-				subscriptionsService.getInvoices(10),
-			]);
-			plans = plansData.filter((p) => p.active).sort((a, b) => a.sortOrder - b.sortOrder);
-			currentSubscription = subscriptionData;
-			invoices = invoicesData;
-		} catch (e) {
-			error = e instanceof Error ? e.message : $_('common.error_loading');
-		} finally {
-			loading = false;
-		}
-	}
-
-	function formatPrice(cents: number): string {
-		return (cents / 100).toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });
-	}
-
-	function formatMonthlyEquivalent(yearlyCents: number): string {
-		return (yearlyCents / 12 / 100).toLocaleString('de-DE', {
-			style: 'currency',
-			currency: 'EUR',
-		});
-	}
-
-	function formatDate(dateStr: string): string {
-		return new Date(dateStr).toLocaleDateString('de-DE', {
-			day: '2-digit',
-			month: '2-digit',
-			year: 'numeric',
-		});
-	}
-
-	function getStatusLabel(status: string): string {
-		const map: Record<string, string> = {
-			active: 'Aktiv',
-			canceled: 'Gekündigt',
-			past_due: 'Überfällig',
-			trialing: 'Testphase',
-		};
-		return map[status] || status;
-	}
-
-	function getSavingsPercent(monthly: number, yearly: number): number {
-		const full = monthly * 12;
-		if (full === 0) return 0;
-		return Math.round(((full - yearly) / full) * 100);
-	}
-
-	async function handleSelectPlan(plan: SubscriptionPlan) {
-		if (plan.isDefault) return;
-		processingPlanId = plan.id;
-		try {
-			const { url } = await subscriptionsService.createCheckout(plan.id, billingInterval);
-			window.location.href = url;
-		} catch (e) {
-			showToast(e instanceof Error ? e.message : 'Fehler beim Checkout', 'error');
-		} finally {
-			processingPlanId = null;
-		}
-	}
-
-	async function handleOpenPortal() {
-		openingPortal = true;
-		try {
-			const { url } = await subscriptionsService.openPortal();
-			window.location.href = url;
-		} catch (e) {
-			showToast(e instanceof Error ? e.message : 'Fehler beim Billing-Portal', 'error');
-		} finally {
-			openingPortal = false;
-		}
-	}
-
-	async function handleCancelSubscription() {
-		if (!confirm('Möchtest du dein Abonnement wirklich kündigen?')) return;
-		cancelingSubscription = true;
-		try {
-			await subscriptionsService.cancelSubscription();
-			showToast('Abonnement wird zum Ende der Laufzeit gekündigt', 'success');
-			await loadData();
-		} catch (e) {
-			showToast(e instanceof Error ? e.message : 'Fehler beim Kündigen', 'error');
-		} finally {
-			cancelingSubscription = false;
-		}
-	}
-
-	async function handleReactivateSubscription() {
-		reactivatingSubscription = true;
-		try {
-			await subscriptionsService.reactivateSubscription();
-			showToast('Abonnement wurde reaktiviert', 'success');
-			await loadData();
-		} catch (e) {
-			showToast(e instanceof Error ? e.message : 'Fehler beim Reaktivieren', 'error');
-		} finally {
-			reactivatingSubscription = false;
-		}
-	}
-
-	function showToast(message: string, type: 'success' | 'error') {
-		toastMessage = message;
-		toastType = type;
-		setTimeout(() => (toastMessage = null), 4000);
-	}
-</script>
-
-<div class="sub-page">
-	{#if loading}
-		<div class="loading"><div class="spinner"></div></div>
-	{:else if error}
-		<div class="error-box">
-			<p>{error}</p>
-			<button class="retry-btn" onclick={loadData}>Erneut versuchen</button>
-		</div>
-	{:else}
-		<!-- Current Subscription -->
-		{#if currentSubscription?.subscription}
-			{@const sub = currentSubscription.subscription}
-			{@const plan = currentSubscription.plan}
-			<div class="status-card">
-				<div class="status-header">
-					<div>
-						<div class="status-title-row">
-							<span class="plan-name">{plan?.name || 'Aktueller Plan'}</span>
-							<span
-								class="status-badge"
-								class:active={sub.status === 'active'}
-								class:canceled={sub.status === 'canceled'}
-								class:past-due={sub.status === 'past_due'}
-							>
-								{getStatusLabel(sub.status)}
-							</span>
-						</div>
-						<span class="plan-credits">
-							{plan?.monthlyCredits.toLocaleString('de-DE')} Mana / Monat
-						</span>
-					</div>
-					<button class="portal-btn" disabled={openingPortal} onclick={handleOpenPortal}>
-						{openingPortal ? '...' : 'Zahlungsmethode'}
-					</button>
-				</div>
-				<div class="status-details">
-					<div class="detail">
-						<span class="detail-label">Zeitraum</span>
-						<span>{sub.billingInterval === 'year' ? 'Jährlich' : 'Monatlich'}</span>
-					</div>
-					<div class="detail">
-						<span class="detail-label">Periode</span>
-						<span>{formatDate(sub.currentPeriodStart)} – {formatDate(sub.currentPeriodEnd)}</span>
-					</div>
-					<div class="detail">
-						{#if sub.cancelAtPeriodEnd}
-							<span class="detail-label">Endet am</span>
-							<span class="text-warn">{formatDate(sub.currentPeriodEnd)}</span>
-							<button
-								class="link-btn"
-								disabled={reactivatingSubscription}
-								onclick={handleReactivateSubscription}
-							>
-								{reactivatingSubscription ? '...' : 'Reaktivieren'}
-							</button>
-						{:else}
-							<span class="detail-label">Verlängert am</span>
-							<span>{formatDate(sub.currentPeriodEnd)}</span>
-							<button
-								class="link-btn danger"
-								disabled={cancelingSubscription}
-								onclick={handleCancelSubscription}
-							>
-								{cancelingSubscription ? '...' : 'Kündigen'}
-							</button>
-						{/if}
-					</div>
-				</div>
-			</div>
-		{:else}
-			<div class="status-card">
-				<div class="status-title-row">
-					<span class="plan-name">Free Plan</span>
-					<span class="status-badge active">Aktuell</span>
-				</div>
-				<span class="plan-credits">150 Mana / Monat</span>
-			</div>
-		{/if}
-
-		<!-- Tabs -->
-		<div class="tabs">
-			<button class="tab" class:active={activeTab === 'plans'} onclick={() => (activeTab = 'plans')}
-				>Pläne</button
-			>
-			<button
-				class="tab"
-				class:active={activeTab === 'invoices'}
-				onclick={() => (activeTab = 'invoices')}>Rechnungen</button
-			>
-		</div>
-
-		{#if activeTab === 'plans'}
-			<!-- Billing toggle -->
-			<div class="interval-toggle">
-				<button
-					class="interval-btn"
-					class:selected={billingInterval === 'month'}
-					onclick={() => (billingInterval = 'month')}>Monatlich</button
-				>
-				<button
-					class="interval-btn"
-					class:selected={billingInterval === 'year'}
-					onclick={() => (billingInterval = 'year')}
-				>
-					Jährlich <span class="save-tag">–17%</span>
-				</button>
-			</div>
-
-			<!-- Plans -->
-			<div class="plans-list">
-				{#each plans as plan}
-					{@const isCurrent = currentSubscription?.plan?.id === plan.id}
-					{@const price =
-						billingInterval === 'year' ? plan.priceYearlyEuroCents : plan.priceMonthlyEuroCents}
-					<div class="plan-card" class:current={isCurrent}>
-						{#if isCurrent}<span class="current-tag">Dein Plan</span>{/if}
-						<span class="plan-card-name">{plan.name}</span>
-						{#if plan.description}
-							<span class="plan-desc">{plan.description}</span>
-						{/if}
-						<div class="plan-price">
-							<span class="price-amount">
-								{plan.isDefault ? 'Kostenlos' : formatPrice(price)}
-							</span>
-							{#if !plan.isDefault}
-								<span class="price-period">/ {billingInterval === 'year' ? 'Jahr' : 'Monat'}</span>
-								{#if billingInterval === 'year'}
-									<span class="price-monthly"
-										>{formatMonthlyEquivalent(plan.priceYearlyEuroCents)} / Monat</span
-									>
-								{/if}
-							{/if}
-						</div>
-						<span class="plan-mana">
-							{plan.monthlyCredits.toLocaleString('de-DE')} Mana / Monat
-						</span>
-						{#if plan.features?.length}
-							<ul class="features">
-								{#each plan.features as feature}
-									<li><Check size={14} /> {feature}</li>
-								{/each}
-							</ul>
-						{/if}
-						<button
-							class="select-btn"
-							class:disabled={isCurrent || plan.isDefault}
-							disabled={isCurrent || processingPlanId === plan.id || plan.isDefault}
-							onclick={() => handleSelectPlan(plan)}
-						>
-							{#if processingPlanId === plan.id}
-								...
-							{:else if isCurrent}
-								Aktuell
-							{:else if plan.isDefault}
-								Kostenlos
-							{:else}
-								Auswählen
-							{/if}
-						</button>
-					</div>
-				{/each}
-			</div>
-		{:else}
-			<!-- Invoices -->
-			<div class="invoices">
-				{#if invoices.length === 0}
-					<p class="empty">Noch keine Rechnungen vorhanden.</p>
-				{:else}
-					{#each invoices as inv}
-						<div class="invoice-row">
-							<div class="invoice-info">
-								<span class="invoice-number">{inv.number || '-'}</span>
-								<span class="invoice-date">{formatDate(inv.createdAt)}</span>
-							</div>
-							<div class="invoice-right">
-								<span class="invoice-amount">{formatPrice(inv.amountPaidEuroCents)}</span>
-								<span class="invoice-status" class:paid={inv.status === 'paid'}>
-									{inv.status === 'paid' ? 'Bezahlt' : inv.status}
-								</span>
-								{#if inv.invoicePdfUrl}
-									<a
-										href={inv.invoicePdfUrl}
-										target="_blank"
-										rel="noopener noreferrer"
-										class="pdf-link">PDF</a
-									>
-								{/if}
-							</div>
-						</div>
-					{/each}
-				{/if}
-			</div>
-		{/if}
-	{/if}
-</div>
-
-{#if toastMessage}
-	<div class="toast" class:error={toastType === 'error'}>{toastMessage}</div>
-{/if}
-
-<style>
-	.sub-page {
-		padding: 0.75rem;
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-		height: 100%;
-		overflow-y: auto;
-	}
-
-	.loading {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 3rem 0;
-	}
-
-	.spinner {
-		width: 2rem;
-		height: 2rem;
-		border: 3px solid hsl(var(--color-border));
-		border-top-color: hsl(var(--color-primary));
-		border-radius: 50%;
-		animation: spin 0.6s linear infinite;
-	}
-
-	@keyframes spin {
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	.error-box {
-		text-align: center;
-		padding: 2rem;
-	}
-
-	.error-box p {
-		color: hsl(0 84% 60%);
-		font-size: 0.8125rem;
-		margin-bottom: 0.75rem;
-	}
-
-	.retry-btn {
-		padding: 0.375rem 0.75rem;
-		border-radius: 0.5rem;
-		background: hsl(var(--color-primary));
-		color: white;
-		border: none;
-		font-size: 0.8125rem;
-		cursor: pointer;
-	}
-
-	/* Status card */
-	.status-card {
-		padding: 0.875rem;
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 0.625rem;
-		background: hsl(var(--color-card));
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-	}
-
-	.status-header {
-		display: flex;
-		align-items: flex-start;
-		justify-content: space-between;
-		gap: 0.5rem;
-	}
-
-	.status-title-row {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
-	.plan-name {
-		font-size: 0.9375rem;
-		font-weight: 700;
-		color: hsl(var(--color-foreground));
-	}
-
-	.status-badge {
-		font-size: 0.625rem;
-		font-weight: 600;
-		padding: 0.125rem 0.5rem;
-		border-radius: 9999px;
-		background: hsl(var(--color-muted) / 0.3);
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.status-badge.active {
-		background: hsl(142 71% 45% / 0.12);
-		color: hsl(142 71% 45%);
-	}
-
-	.status-badge.canceled {
-		background: hsl(45 93% 47% / 0.12);
-		color: hsl(45 93% 47%);
-	}
-
-	.status-badge.past-due {
-		background: hsl(0 84% 60% / 0.12);
-		color: hsl(0 84% 60%);
-	}
-
-	.plan-credits {
-		font-size: 0.75rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.portal-btn {
-		flex-shrink: 0;
-		padding: 0.25rem 0.625rem;
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 0.375rem;
-		background: transparent;
-		font-size: 0.6875rem;
-		cursor: pointer;
-		color: hsl(var(--color-foreground));
-	}
-
-	.portal-btn:hover {
-		background: hsl(var(--color-surface-hover));
-	}
-
-	.status-details {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-		margin-top: 0.5rem;
-		padding-top: 0.5rem;
-		border-top: 1px solid hsl(var(--color-border));
-	}
-
-	.detail {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		font-size: 0.75rem;
-	}
-
-	.detail-label {
-		color: hsl(var(--color-muted-foreground));
-		min-width: 5rem;
-	}
-
-	.text-warn {
-		color: hsl(45 93% 47%);
-	}
-
-	.link-btn {
-		background: none;
-		border: none;
-		font-size: 0.6875rem;
-		color: hsl(var(--color-primary));
-		cursor: pointer;
-		text-decoration: underline;
-	}
-
-	.link-btn.danger {
-		color: hsl(0 84% 60%);
-	}
-
-	.link-btn:disabled {
-		opacity: 0.5;
-	}
-
-	/* Tabs */
-	.tabs {
-		display: flex;
-		gap: 0.25rem;
-		border-bottom: 1px solid hsl(var(--color-border));
-	}
-
-	.tab {
-		padding: 0.5rem 0.75rem;
-		border: none;
-		background: none;
-		font-size: 0.8125rem;
-		font-weight: 500;
-		color: hsl(var(--color-muted-foreground));
-		cursor: pointer;
-		border-bottom: 2px solid transparent;
-		margin-bottom: -1px;
-	}
-
-	.tab.active {
-		color: hsl(var(--color-primary));
-		border-bottom-color: hsl(var(--color-primary));
-	}
-
-	/* Interval toggle */
-	.interval-toggle {
-		display: flex;
-		gap: 0.25rem;
-		justify-content: center;
-		padding: 0.25rem;
-		background: hsl(var(--color-muted) / 0.2);
-		border-radius: 0.5rem;
-	}
-
-	.interval-btn {
-		padding: 0.375rem 0.75rem;
-		border: none;
-		border-radius: 0.375rem;
-		background: transparent;
-		font-size: 0.75rem;
-		font-weight: 500;
-		cursor: pointer;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.interval-btn.selected {
-		background: hsl(var(--color-card));
-		color: hsl(var(--color-foreground));
-		box-shadow: 0 1px 3px hsl(0 0% 0% / 0.08);
-	}
-
-	.save-tag {
-		font-size: 0.625rem;
-		color: hsl(142 71% 45%);
-	}
-
-	/* Plans */
-	.plans-list {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.plan-card {
-		padding: 0.875rem;
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 0.625rem;
-		background: hsl(var(--color-card));
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-	}
-
-	.plan-card.current {
-		border-color: hsl(var(--color-primary) / 0.35);
-	}
-
-	.current-tag {
-		font-size: 0.625rem;
-		font-weight: 600;
-		color: hsl(var(--color-primary));
-		background: hsl(var(--color-primary) / 0.1);
-		padding: 0.125rem 0.5rem;
-		border-radius: 9999px;
-		align-self: flex-start;
-	}
-
-	.plan-card-name {
-		font-size: 0.9375rem;
-		font-weight: 700;
-		color: hsl(var(--color-foreground));
-	}
-
-	.plan-desc {
-		font-size: 0.6875rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.plan-price {
-		display: flex;
-		align-items: baseline;
-		gap: 0.25rem;
-		flex-wrap: wrap;
-	}
-
-	.price-amount {
-		font-size: 1.25rem;
-		font-weight: 700;
-		color: hsl(var(--color-foreground));
-	}
-
-	.price-period {
-		font-size: 0.75rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.price-monthly {
-		font-size: 0.6875rem;
-		color: hsl(142 71% 45%);
-	}
-
-	.plan-mana {
-		font-size: 0.8125rem;
-		font-weight: 600;
-		color: hsl(var(--color-primary));
-	}
-
-	.features {
-		list-style: none;
-		padding: 0;
-		margin: 0.375rem 0 0;
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-	}
-
-	.features li {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		font-size: 0.75rem;
-		color: hsl(var(--color-foreground));
-	}
-
-	.features li :global(svg) {
-		color: hsl(142 71% 45%);
-		flex-shrink: 0;
-	}
-
-	.select-btn {
-		margin-top: 0.5rem;
-		padding: 0.5rem;
-		border: none;
-		border-radius: 0.5rem;
-		background: hsl(var(--color-primary));
-		color: white;
-		font-size: 0.8125rem;
-		font-weight: 500;
-		cursor: pointer;
-	}
-
-	.select-btn:hover {
-		opacity: 0.9;
-	}
-
-	.select-btn.disabled {
-		background: hsl(var(--color-muted) / 0.3);
-		color: hsl(var(--color-muted-foreground));
-		cursor: not-allowed;
-	}
-
-	/* Invoices */
-	.invoices {
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-	}
-
-	.empty {
-		text-align: center;
-		color: hsl(var(--color-muted-foreground));
-		font-size: 0.8125rem;
-		padding: 2rem;
-	}
-
-	.invoice-row {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 0.5rem;
-		padding: 0.5rem 0.75rem;
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 0.5rem;
-		background: hsl(var(--color-card));
-	}
-
-	.invoice-info {
-		display: flex;
-		flex-direction: column;
-		gap: 0.125rem;
-	}
-
-	.invoice-number {
-		font-family: monospace;
-		font-size: 0.75rem;
-	}
-
-	.invoice-date {
-		font-size: 0.6875rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-
-	.invoice-right {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
-	.invoice-amount {
-		font-size: 0.8125rem;
-		font-weight: 500;
-	}
-
-	.invoice-status {
-		font-size: 0.625rem;
-		padding: 0.125rem 0.375rem;
-		border-radius: 9999px;
-		background: hsl(45 93% 47% / 0.12);
-		color: hsl(45 93% 47%);
-	}
-
-	.invoice-status.paid {
-		background: hsl(142 71% 45% / 0.12);
-		color: hsl(142 71% 45%);
-	}
-
-	.pdf-link {
-		font-size: 0.6875rem;
-		color: hsl(var(--color-primary));
-		text-decoration: none;
-	}
-
-	.pdf-link:hover {
-		text-decoration: underline;
-	}
-
-	/* Toast */
-	.toast {
-		position: fixed;
-		bottom: 1rem;
-		right: 1rem;
-		z-index: 50;
-		padding: 0.75rem 1rem;
-		background: hsl(142 71% 45%);
-		color: white;
-		border-radius: 0.5rem;
-		box-shadow: 0 4px 12px hsl(0 0% 0% / 0.15);
-		font-size: 0.875rem;
-		animation: fade-in 0.2s ease-out;
-	}
-
-	.toast.error {
-		background: hsl(0 84% 60%);
-	}
-
-	@keyframes fade-in {
-		from {
-			opacity: 0;
-			transform: translateY(10px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-</style>