diff --git a/ui/global.css b/ui/global.css
index 86347cd..b764e8b 100644
--- a/ui/global.css
+++ b/ui/global.css
@@ -727,3 +727,140 @@ table { border-collapse: collapse; width: 100%; }
         grid-template-columns: 1fr;
     }
 }
+
+/* ═══════════════════════════════════════════════════════════
+   PREMIUM UPGRADE LAYER
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── Ambient background glow (body) ─────────────────────── */
+body {
+    background-image:
+        radial-gradient(ellipse 80% 50% at 10% -10%, rgba(91,158,240,0.07) 0%, transparent 60%),
+        radial-gradient(ellipse 60% 40% at 90% 110%, rgba(167,139,250,0.05) 0%, transparent 60%);
+    background-attachment: fixed;
+}
+
+/* ── Page title: subtle gradient text ───────────────────── */
+.page-header h1 {
+    background: linear-gradient(135deg, #fff 60%, rgba(91,158,240,0.85) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* ── Nav: stronger glass + accent underline ─────────────── */
+.nav {
+    background: rgba(9,11,16,0.80);
+    backdrop-filter: blur(20px) saturate(1.8);
+    -webkit-backdrop-filter: blur(20px) saturate(1.8);
+    box-shadow: 0 1px 0 rgba(91,158,240,0.08), 0 4px 24px rgba(0,0,0,0.3);
+    border-bottom-color: rgba(255,255,255,0.06);
+}
+.nav-brand svg { filter: drop-shadow(0 0 8px rgba(91,158,240,0.4)); }
+.nav-links a.active { box-shadow: inset 0 0 0 1px rgba(91,158,240,0.2); }
+
+/* ── Panels: gradient border on hover ───────────────────── */
+.panel {
+    position: relative;
+    transition: border-color var(--duration) var(--ease),
+                box-shadow var(--duration) var(--ease);
+}
+.panel::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: var(--radius-lg);
+    padding: 1px;
+    background: linear-gradient(135deg, rgba(91,158,240,0.18), transparent 50%, rgba(167,139,250,0.1));
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--duration) var(--ease);
+}
+.panel:hover::before { opacity: 1; }
+.panel:hover {
+    box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(91,158,240,0.08);
+}
+
+/* ── Stat cards: gradient surface + shimmer top edge ─────── */
+.stat-card {
+    background: linear-gradient(145deg, var(--surface-2), var(--surface-1));
+    overflow: hidden;
+}
+.stat-card::after {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
+    pointer-events: none;
+}
+.stat-card { position: relative; }
+.stat-card:hover {
+    box-shadow: var(--shadow-md), 0 0 20px rgba(91,158,240,0.08);
+    transform: translateY(-2px);
+}
+
+/* ── Buttons: gradient fills + inner highlight ───────────── */
+.btn { position: relative; overflow: hidden; }
+.btn::after {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 50%;
+    background: linear-gradient(to bottom, rgba(255,255,255,0.07), transparent);
+    border-radius: inherit;
+    pointer-events: none;
+}
+.btn-primary {
+    background: linear-gradient(135deg, var(--accent), #4a8de0);
+    box-shadow: 0 2px 8px rgba(91,158,240,0.25);
+}
+.btn-primary:hover {
+    background: linear-gradient(135deg, var(--accent-hover), var(--accent));
+    box-shadow: 0 4px 20px rgba(91,158,240,0.4);
+}
+.btn-success {
+    background: linear-gradient(135deg, var(--success), #38c46c);
+    box-shadow: 0 2px 8px rgba(74,222,128,0.2);
+}
+.btn-success:hover { box-shadow: 0 4px 20px rgba(74,222,128,0.4); transform: translateY(-1px); }
+.btn-purple {
+    background: linear-gradient(135deg, var(--purple), #9171f0);
+    box-shadow: 0 2px 8px rgba(167,139,250,0.2);
+}
+.btn-purple:hover { box-shadow: 0 4px 20px rgba(167,139,250,0.4); transform: translateY(-1px); }
+
+/* ── Tags: subtle colored border ────────────────────────── */
+.tag-blue   { border: 1px solid rgba(91,158,240,0.25); }
+.tag-green  { border: 1px solid rgba(74,222,128,0.25); }
+.tag-yellow { border: 1px solid rgba(251,191,36,0.25); }
+.tag-red    { border: 1px solid rgba(248,113,113,0.25); }
+.tag-purple { border: 1px solid rgba(167,139,250,0.25); }
+
+/* ── Progress fill: glow ─────────────────────────────────── */
+.progress-fill { box-shadow: 0 0 8px rgba(91,158,240,0.5); }
+
+/* ── Badge running: glow dot ─────────────────────────────── */
+.badge-running { box-shadow: 0 0 12px rgba(91,158,240,0.15); }
+.badge-running::before { box-shadow: 0 0 6px var(--accent); }
+
+/* ── Toast: glassmorphism + colored glow ─────────────────── */
+.toast { backdrop-filter: blur(12px); }
+.toast-success { box-shadow: var(--shadow-lg), 0 0 20px rgba(74,222,128,0.1); }
+.toast-error   { box-shadow: var(--shadow-lg), 0 0 20px rgba(248,113,113,0.1); }
+
+/* ── Divider: fade-out gradient ──────────────────────────── */
+.divider {
+    background: linear-gradient(90deg, transparent, var(--border), transparent);
+}
+
+/* ── Inputs: inset shadow for depth ─────────────────────── */
+.form-input, .form-select, .form-textarea {
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
+}
+.form-input:focus, .form-select:focus, .form-textarea:focus {
+    box-shadow: 0 0 0 3px var(--accent-dim), inset 0 1px 3px rgba(0,0,0,0.1);
+}