refactor: centralize UI design tokens and implement reusable glass-panel and button styles

.agent/skills/nexus-ui-engine/SKILL.md

@@ -12,14 +12,22 @@ description: Design System & Component rules for Blazor
 
 - **Styling & Isolation:** 
   - Mandatory use of scoped CSS (`.razor.css`).
+  - Strict compliance: Zero inline `<style>` tags are allowed in `.razor` files.
   - No global CSS except for design tokens in `app.css`.
   - Use `::deep` only when absolutely necessary to style child components.
 
 - **Design System (Nexus Neon):**
   - **Color Palette:**
     - Primary Accent: `--nexus-neon` (`#00ff99`) - Used for borders, highlights, and icons.
+    - Neon Glow: `--nexus-neon-glow` / `--nexus-primary-glow` (`rgba(0, 255, 153, 0.3)`).
     - Dark Mode: `--nexus-bg` (`#0a0a0a`), `--nexus-card` (`#141414`).
     - Light Mode: `--nexus-bg` (`#f8f9fa`), `--nexus-card` (`#ffffff`).
+    - **No Brand Splitting:** Strict ban on custom purple/indigo/cyan elements or hardcoded accent colors (like `#7c3aed`, `#4c1d95`, `#00b3ff`) on dashboard pages. Neutral/glass surfaces (`rgba(255, 255, 255, 0.05)`) must be used for secondary elements to preserve contrast and ensure the AI/neon-green elements are the focal point.
+  - **Buttons:**
+    - Must inherit from the global `.btn-nexus` class in `app.css`.
+    - Primary Button: `.btn-nexus-primary` (background: `var(--nexus-neon)`, text color: `#000`).
+    - Secondary Button: `.btn-nexus-secondary` (background: `rgba(255, 255, 255, 0.05)`, border: `1px solid rgba(255, 255, 255, 0.1)`, text color: `#fff`).
+    - Hover Interaction: `transform: translateY(-2px)`, increased brightness, and a signature primary neon glow shadow.
   - **Typography:**
     - UI Elements: `Inter` (Sans-Serif) for controls, menus, and labels.
     - Reading Content: `Merriweather` (Serif) with `line-height: 1.65` and `letter-spacing: -0.01em` for high readability.
@@ -44,6 +52,9 @@ description: Design System & Component rules for Blazor
 - **Interactive Flow:**
   - AI Assistant interactions must be non-blocking and smoothly transition using CSS animations.
   - Interactive elements must have clear `:hover`, `:active`, and `:focus` states.
-  - **Glass Panel Standard:** All primary data panels (`.glass-panel`) must implement the following interaction signature:
+  - **Glass Panel Standard:** All primary data panels (`.glass-panel`) must implement the following global parameters from `app.css` (only local modifiers like padding and hover offsets should live in scoped CSS):
-    - `transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`
+    - Background: `rgba(20, 20, 20, 0.85)` (fallback) / `rgba(255, 255, 255, 0.03)` with `backdrop-filter: blur(10px)` when supported.
-    - `:hover` state must include: `transform: translateY(-4px)`, increased background opacity, and a subtle `--nexus-neon` border highlight (e.g., `rgba(0, 255, 153, 0.2)`).
+    - Border: `1px solid rgba(255, 255, 255, 0.05)`.
+    - Border Radius: `var(--radius-xl)`.
+    - Transition: `all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`.
+    - `:hover` state: `transform: translateY(-4px)` (or local offset) and highlight accent `border-color: rgba(0, 255, 153, 0.2)`.

src/NexusReader.UI.Shared/Layout/AuthLayout.razor

@@ -4,21 +4,3 @@
     <link rel="stylesheet" href="_content/NexusReader.UI.Shared/css/nexus-auth.css" />
     @Body
 </div>
-
-<style>
-    .nexus-auth-shell {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100vw;
-        height: 100vh;
-        background-color: #121418 !important;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        z-index: 99999;
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-    }
-</style>

src/NexusReader.UI.Shared/Layout/AuthLayout.razor.css

@@ -0,0 +1,15 @@
+.nexus-auth-shell {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: radial-gradient(circle at center, #1b202e 0%, #0f1115 100%) !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 99999;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}

src/NexusReader.UI.Shared/Pages/Account/Profile.razor

@@ -89,7 +89,7 @@
                             <span class="tenant-tag">Node: @_profile.TenantId.ToString().ToUpper()</span>
                         </div>
                         <div class="profile-actions">
-                            <button class="btn-nexus secondary" @onclick="HandleUpgrade">Zarządzaj Subskrypcją</button>
+                            <button class="btn-nexus btn-nexus-secondary" @onclick="HandleUpgrade">Zarządzaj Subskrypcją</button>
                             <button class="btn-nexus logout" @onclick="HandleLogout">
                                 <NexusIcon Name="log-out" Size="18" />
                                 Wyloguj

src/NexusReader.UI.Shared/Pages/Account/Profile.razor.css

@@ -119,23 +119,10 @@
 }
 
 .glass-panel {
-    background: rgba(20, 20, 20, 0.8); /* Fallback */
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 24px;
     padding: 32px;
-    transition: all 0.3s ease;
-}
-
-@supports (backdrop-filter: blur(12px)) {
-    .glass-panel {
-        background: rgba(255, 255, 255, 0.03);
-        backdrop-filter: blur(12px);
-        -webkit-backdrop-filter: blur(12px);
-    }
 }
 
 .glass-panel:hover {
-    background: rgba(255, 255, 255, 0.05);
     border-color: rgba(0, 255, 153, 0.2);
     transform: translateY(-4px);
 }
@@ -289,38 +276,21 @@
     gap: 16px;
 }
 
-.btn-nexus {
+.profile-actions .btn-nexus {
     padding: 12px 24px;
-    border-radius: 12px;
     font-size: 0.9rem;
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    border: none;
 }
 
-.btn-nexus.secondary {
+.profile-actions .btn-nexus.logout {
-    background: rgba(255, 255, 255, 0.05);
-    color: #fff;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.btn-nexus.secondary:hover {
-    background: rgba(255, 255, 255, 0.1);
-}
-
-.btn-nexus.logout {
     background: rgba(255, 71, 87, 0.1);
     color: #ff4757;
     border: 1px solid rgba(255, 71, 87, 0.2);
 }
 
-.btn-nexus.logout:hover {
+.profile-actions .btn-nexus.logout:hover {
     background: #ff4757;
     color: #fff;
+    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
 }
 
 /* Decorations */

src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor

@@ -34,7 +34,7 @@
             <NexusIcon Name="alert-triangle" Size="48" Class="error-icon" />
             <h3>Wystąpił Błąd</h3>
             <p>@_errorMessage</p>
-            <button class="nexus-btn secondary-neon" @onclick="LoadDataAsync">Spróbuj ponownie</button>
+            <button class="btn-nexus btn-nexus-secondary" @onclick="LoadDataAsync">Spróbuj ponownie</button>
         </div>
     }
     else if (!BookId.HasValue || BookId.Value == Guid.Empty || Nodes == null || !Nodes.Any())
@@ -43,14 +43,14 @@
             <NexusIcon Name="book-open" Size="64" Class="dim-icon" />
             <h2>Brak Aktywnych Książek</h2>
             <p>Nie wybrano żadnej książki lub ta książka nie ma jeszcze wygenerowanej mapy pojęć przez Nexus AI.</p>
-            <a href="/library" class="nexus-btn primary-neon">Przejdź do Biblioteki</a>
+            <a href="/library" class="btn-nexus btn-nexus-primary">Przejdź do Biblioteki</a>
         </div>
     }
     else
     {
         <header class="dashboard-header">
             <div class="header-back">
-                <button class="btn-back" @onclick="GoBackToLibrary">
+                <button class="btn-nexus btn-nexus-secondary btn-back" @onclick="GoBackToLibrary">
                     <NexusIcon Name="arrow-left" Size="16" />
                     <span>Biblioteka</span>
                 </button>
@@ -60,7 +60,7 @@
                 <span class="subtitle">Interaktywna ścieżka rozwoju Twoich postępów nauki</span>
             </div>
             <div class="header-actions">
-                <button class="btn-action" @onclick="GoToReader">
+                <button class="btn-nexus btn-nexus-primary btn-action" @onclick="GoToReader">
                     <span>Otwórz Czytnik</span>
                     <NexusIcon Name="book-open" Size="16" />
                 </button>
@@ -156,7 +156,7 @@
                         </div>
 
                         <div class="workspace-footer">
-                            <button class="nexus-btn primary-neon w-100" @onclick="GoToSelectedChapter">
+                            <button class="btn-nexus btn-nexus-primary w-100" @onclick="GoToSelectedChapter">
                                 <NexusIcon Name="book-open" Size="16" />
                                 <span>Czytaj ten rozdział</span>
                             </button>

src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css

@@ -25,24 +25,15 @@
 }
 
 .header-back .btn-back {
-    background: transparent;
+    padding: 0.5rem 1.25rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: #aaa;
-    padding: 0.5rem 1rem;
-    border-radius: 8px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
     font-size: 0.85rem;
-    transition: all 0.2s ease;
 }
 
 .header-back .btn-back:hover {
     border-color: var(--nexus-neon);
     color: var(--nexus-neon);
-    background: rgba(0, 243, 255, 0.05);
+    background: var(--nexus-primary-glow);
-    box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
+    box-shadow: 0 0 10px var(--nexus-primary-glow);
 }
 
 .header-title h1 {
@@ -58,28 +49,14 @@
 }
 
 .header-actions .btn-action {
-    background: linear-gradient(135deg, rgba(0, 243, 255, 0.1), rgba(0, 243, 255, 0.05));
+    padding: 0.6rem 1.4rem;
-    border: 1px solid var(--nexus-neon);
-    color: var(--nexus-neon);
-    padding: 0.6rem 1.2rem;
-    border-radius: 8px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
     font-size: 0.85rem;
-    font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 0 15px rgba(0, 243, 255, 0.15);
 }
 
 .header-actions .btn-action:hover {
-    background: var(--nexus-neon);
+    box-shadow: 0 0 20px var(--nexus-primary-glow);
-    color: #000;
-    box-shadow: 0 0 25px var(--nexus-neon);
-    transform: translateY(-1px);
 }
 
 /* Grid Layout */
@@ -92,14 +69,10 @@
 
 /* Glass Panels */
 .glass-panel {
-    background: rgba(13, 13, 13, 0.45);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 16px;
-    backdrop-filter: blur(16px);
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    padding: 0;
 }
 
 .pane-header {
@@ -223,13 +196,13 @@
     width: 80px;
     height: 80px;
     border-radius: 50%;
-    background: rgba(0, 243, 255, 0.04);
+    background: rgba(0, 255, 153, 0.04);
-    border: 1px solid rgba(0, 243, 255, 0.1);
+    border: 1px solid rgba(0, 255, 153, 0.15);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.5rem;
-    box-shadow: 0 0 20px rgba(0, 243, 255, 0.05);
+    box-shadow: 0 0 20px var(--nexus-primary-glow);
 }
 
 .workspace-empty h4 {
@@ -265,7 +238,7 @@
 }
 
 .node-id {
-    font-family: 'Outfit', sans-serif;
+    font-family: var(--nexus-font-sans);
     font-size: 0.75rem;
     font-weight: 700;
     letter-spacing: 0.08em;
@@ -283,9 +256,9 @@
 }
 
 .badge-unlocked {
-    background: rgba(0, 243, 255, 0.08);
+    background: rgba(0, 255, 153, 0.08);
     color: var(--nexus-neon);
-    border: 1px solid rgba(0, 243, 255, 0.2);
+    border: 1px solid rgba(0, 255, 153, 0.2);
 }
 
 .badge-locked {
@@ -402,9 +375,9 @@
 }
 
 .term-pill:hover {
-    border-color: rgba(0, 243, 255, 0.2);
+    border-color: rgba(0, 255, 153, 0.2);
     color: var(--nexus-neon);
-    background: rgba(0, 243, 255, 0.03);
+    background: rgba(0, 255, 153, 0.03);
 }
 
 .workspace-footer {
@@ -412,49 +385,6 @@
     border-top: 1px solid rgba(255, 255, 255, 0.05);
 }
 
-.nexus-btn.primary-neon {
-    background: linear-gradient(135deg, var(--nexus-neon), #00b8cc);
-    color: #000;
-    border: none;
-    font-weight: 600;
-    letter-spacing: 0.03em;
-    padding: 0.75rem 1.5rem;
-    border-radius: 8px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    width: 100%;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 4px 15px rgba(0, 243, 255, 0.2);
-}
-
-.nexus-btn.primary-neon:hover {
-    box-shadow: 0 6px 25px rgba(0, 243, 255, 0.4);
-    transform: translateY(-1px);
-}
-
-.nexus-btn.secondary-neon {
-    background: transparent;
-    color: #fff;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    font-weight: 600;
-    padding: 0.75rem 1.5rem;
-    border-radius: 8px;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    transition: all 0.2s ease;
-}
-
-.nexus-btn.secondary-neon:hover {
-    border-color: var(--nexus-neon);
-    color: var(--nexus-neon);
-    box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
-}
-
 @media (max-width: 1024px) {
     .concepts-dashboard {
         grid-template-columns: 1fr;

src/NexusReader.UI.Shared/Pages/Intelligence.razor

@@ -120,7 +120,7 @@
                            @bind:event="oninput"
                            @onkeyup="HandleKeyUp"
                            disabled="@_isLoading" />
-                    <button class="btn-nexus primary search-btn" 
+                    <button class="btn-nexus btn-nexus-primary search-btn" 
                             disabled="@(string.IsNullOrWhiteSpace(_question) || _isLoading)" 
                             @onclick="AskQuestionAsync">
                         @if (_isLoading)
@@ -138,412 +138,6 @@
     </div>
 </div>
 
-<style>
-    .intelligence-page {
-        padding: 2rem;
-        max-width: 1100px;
-        margin: 0 auto;
-        height: calc(100vh - 100px);
-        display: flex;
-        flex-direction: column;
-        animation: fadeIn 0.5s ease-out;
-    }
-
-    .intelligence-header {
-        margin-bottom: 1.5rem;
-        flex-shrink: 0;
-    }
-
-    .neon-glow-text {
-        font-family: var(--nexus-font-sans, 'Outfit', sans-serif);
-        font-size: 2.5rem;
-        font-weight: 800;
-        margin: 0 0 0.25rem 0;
-        background: linear-gradient(135deg, #00ff99 0%, #06b6d4 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.2));
-    }
-
-    .subtitle {
-        font-size: 0.95rem;
-        color: rgba(255, 255, 255, 0.6);
-        margin: 0;
-    }
-
-    .intelligence-layout {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-        border-radius: 20px;
-        background: rgba(10, 16, 26, 0.45);
-        border: 1px solid rgba(6, 182, 212, 0.15);
-        backdrop-filter: blur(16px);
-        -webkit-backdrop-filter: blur(16px);
-        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(6, 182, 212, 0.05);
-        overflow: hidden;
-    }
-
-    .chat-thread-container {
-        flex-grow: 1;
-        overflow-y: auto;
-        padding: 2rem;
-        display: flex;
-        flex-direction: column;
-    }
-
-    /* Custom Scrollbars */
-    .chat-thread-container::-webkit-scrollbar {
-        width: 6px;
-    }
-    .chat-thread-container::-webkit-scrollbar-track {
-        background: rgba(255, 255, 255, 0.01);
-    }
-    .chat-thread-container::-webkit-scrollbar-thumb {
-        background: rgba(6, 182, 212, 0.2);
-        border-radius: 4px;
-    }
-    .chat-thread-container::-webkit-scrollbar-thumb:hover {
-        background: rgba(6, 182, 212, 0.4);
-    }
-
-    .chat-bubbles-scroll {
-        display: flex;
-        flex-direction: column;
-        gap: 1.5rem;
-        width: 100%;
-    }
-
-    .message-row {
-        display: flex;
-        gap: 1rem;
-        width: 100%;
-        max-width: 85%;
-        animation: bubble-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-    }
-
-    .user-row {
-        align-self: flex-end;
-        flex-direction: row-reverse;
-    }
-
-    .ai-row {
-        align-self: flex-start;
-    }
-
-    .message-avatar {
-        width: 38px;
-        height: 38px;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 1.1rem;
-        flex-shrink: 0;
-    }
-
-    .user-row .message-avatar {
-        background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
-        color: #f5f3ff;
-        border: 1px solid rgba(139, 92, 246, 0.4);
-        box-shadow: 0 0 10px rgba(139, 92, 246, 0.25);
-    }
-
-    .ai-row .message-avatar {
-        background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
-        color: #ccfbf1;
-        border: 1px solid rgba(13, 148, 136, 0.4);
-        box-shadow: 0 0 10px rgba(13, 148, 136, 0.25);
-    }
-
-    .message-bubble {
-        padding: 1.25rem 1.5rem;
-        border-radius: 16px;
-        position: relative;
-        line-height: 1.6;
-        font-size: 0.975rem;
-    }
-
-    .user-bubble {
-        background: rgba(43, 24, 80, 0.35);
-        border: 1px solid rgba(139, 92, 246, 0.25);
-        color: #f3e8ff;
-        border-top-right-radius: 4px;
-        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.05);
-    }
-
-    .ai-bubble {
-        background: rgba(10, 20, 30, 0.55);
-        border: 1px solid rgba(6, 182, 212, 0.2);
-        color: #e2e8f0;
-        border-top-left-radius: 4px;
-        box-shadow: 0 4px 15px rgba(6, 182, 212, 0.05);
-        flex-grow: 1;
-    }
-
-    .message-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 0.5rem;
-        font-size: 0.75rem;
-        opacity: 0.6;
-    }
-
-    .sender-name {
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-
-    .message-time {
-        font-family: monospace;
-    }
-
-    .message-content {
-        word-break: break-word;
-    }
-
-    /* Paragraph Spacing & Markdown */
-    .message-content p {
-        margin: 0 0 1rem 0;
-    }
-    .message-content p:last-child {
-        margin-bottom: 0;
-    }
-
-    .nexus-code-block {
-        background: rgba(0, 0, 0, 0.4) !important;
-        border: 1px solid rgba(255, 255, 255, 0.08) !important;
-        border-radius: 8px;
-        padding: 1rem;
-        margin: 1rem 0;
-        overflow-x: auto;
-        font-family: 'Fira Code', monospace;
-        font-size: 0.85rem;
-        color: #a7f3d0;
-    }
-
-    .nexus-inline-code {
-        background: rgba(255, 255, 255, 0.06);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: 4px;
-        padding: 0.15rem 0.35rem;
-        font-family: monospace;
-        font-size: 0.9em;
-        color: #f472b6; /* Light pink for inline code */
-    }
-
-    /* Pending State Bubble */
-    .pending-bubble {
-        border-color: rgba(6, 182, 212, 0.4);
-        box-shadow: 0 0 15px rgba(6, 182, 212, 0.1);
-    }
-
-    .typing-indicator {
-        display: flex;
-        gap: 4px;
-        align-items: center;
-        margin-bottom: 0.5rem;
-    }
-
-    .typing-indicator span {
-        width: 8px;
-        height: 8px;
-        background: #06b6d4;
-        border-radius: 50%;
-        display: inline-block;
-        animation: typing-bounce 1.4s infinite ease-in-out both;
-    }
-
-    .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
-    .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
-
-    .loading-label {
-        font-size: 0.85rem;
-        color: rgba(255, 255, 255, 0.5);
-        font-style: italic;
-    }
-
-    /* Input Controls */
-    .chat-input-controls {
-        padding: 1.5rem 2rem 2rem 2rem;
-        background: rgba(0, 0, 0, 0.2);
-        border-top: 1px solid rgba(255, 255, 255, 0.05);
-        flex-shrink: 0;
-    }
-
-    .input-panel-wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: 0.75rem;
-    }
-
-    .scope-bar {
-        display: flex;
-        align-items: center;
-    }
-
-    .scope-selector {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        font-size: 0.85rem;
-        color: rgba(255, 255, 255, 0.5);
-    }
-
-    .nexus-select {
-        background: rgba(255, 255, 255, 0.02);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        color: #ffffff;
-        padding: 0.35rem 2rem 0.35rem 0.75rem;
-        border-radius: 8px;
-        outline: none;
-        cursor: pointer;
-        font-size: 0.85rem;
-        transition: all 0.3s ease;
-        appearance: none;
-        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-        background-repeat: no-repeat;
-        background-position: right 0.75rem center;
-        background-size: 0.85em;
-    }
-
-    .nexus-select:focus {
-        border-color: #06b6d4;
-        box-shadow: 0 0 8px rgba(6, 182, 212, 0.2);
-    }
-
-    .input-field-group {
-        display: flex;
-        background: rgba(255, 255, 255, 0.02);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: 12px;
-        padding: 0.35rem;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .input-field-group:focus-within {
-        border-color: #06b6d4;
-        background: rgba(6, 182, 212, 0.01);
-        box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
-    }
-
-    .nexus-input {
-        flex-grow: 1;
-        background: transparent;
-        border: none;
-        color: #ffffff;
-        font-size: 1rem;
-        outline: none;
-        padding: 0.5rem 1rem;
-    }
-
-    .nexus-input::placeholder {
-        color: rgba(255, 255, 255, 0.35);
-    }
-
-    .btn-nexus {
-        padding: 0.75rem 1.25rem;
-        border-radius: 10px;
-        font-size: 0.95rem;
-        font-weight: 600;
-        cursor: pointer;
-        transition: all 0.2s;
-        border: none;
-    }
-
-    .btn-nexus.primary {
-        background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
-        color: #ffffff;
-        box-shadow: 0 4px 10px rgba(6, 182, 212, 0.25);
-    }
-
-    .btn-nexus:hover:not(:disabled) {
-        transform: translateY(-1px);
-        filter: brightness(1.1);
-        box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
-    }
-
-    .btn-nexus:disabled {
-        background: rgba(255, 255, 255, 0.05);
-        color: rgba(255, 255, 255, 0.25);
-        box-shadow: none;
-        cursor: not-allowed;
-    }
-
-    .search-btn {
-        width: 46px;
-        height: 46px;
-        padding: 0 !important;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 10px;
-    }
-
-    .welcome-state {
-        text-align: center;
-        color: rgba(255, 255, 255, 0.5);
-        padding: 4rem 2rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-    }
-
-    .welcome-icon {
-        color: rgba(6, 182, 212, 0.4);
-        margin-bottom: 1.5rem;
-        filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.2));
-        animation: pulse 2.5s infinite alternate;
-    }
-
-    .welcome-state h3 {
-        color: #ffffff;
-        font-size: 1.5rem;
-        margin: 0 0 0.75rem 0;
-    }
-
-    .welcome-state p {
-        max-width: 550px;
-        margin: 0;
-        font-size: 0.95rem;
-        line-height: 1.6;
-    }
-
-    .btn-spinner {
-        width: 20px;
-        height: 20px;
-        border: 2px solid rgba(255, 255, 255, 0.1);
-        border-radius: 50%;
-        border-top-color: #ffffff;
-        animation: spin 0.8s linear infinite;
-    }
-
-    /* Keyframe Animations */
-    @@keyframes bubble-fade-in {
-        0% { opacity: 0; transform: translateY(10px) scale(0.98); }
-        100% { opacity: 1; transform: translateY(0) scale(1); }
-    }
-
-    @@keyframes typing-bounce {
-        0%, 100% { transform: translateY(0); }
-        50% { transform: translateY(-4px); }
-    }
-
-    @@keyframes pulse {
-        0% { transform: scale(0.96); opacity: 0.8; }
-        100% { transform: scale(1.04); opacity: 1; }
-    }
-
-    @@keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
-</style>
-
 @code {
     private string _question = string.Empty;
     private string _selectedBookId = string.Empty;

src/NexusReader.UI.Shared/Pages/Intelligence.razor.css

@@ -0,0 +1,368 @@
+.intelligence-page {
+    padding: 2rem;
+    max-width: 1100px;
+    margin: 0 auto;
+    height: calc(100vh - 100px);
+    display: flex;
+    flex-direction: column;
+    animation: fadeIn 0.5s ease-out;
+}
+
+.intelligence-header {
+    margin-bottom: 1.5rem;
+    flex-shrink: 0;
+}
+
+.neon-glow-text {
+    font-family: var(--nexus-font-sans);
+    font-size: 2.5rem;
+    font-weight: 800;
+    margin: 0 0 0.25rem 0;
+    background: linear-gradient(135deg, var(--nexus-neon) 0%, rgba(0, 255, 153, 0.7) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    filter: drop-shadow(0 0 8px rgba(0, 255, 153, 0.2));
+}
+
+.subtitle {
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin: 0;
+}
+
+.intelligence-layout {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 0;
+}
+
+.chat-thread-container {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Custom Scrollbars */
+.chat-thread-container::-webkit-scrollbar {
+    width: 6px;
+}
+.chat-thread-container::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.01);
+}
+.chat-thread-container::-webkit-scrollbar-thumb {
+    background: rgba(0, 255, 153, 0.2);
+    border-radius: 4px;
+}
+.chat-thread-container::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 255, 153, 0.4);
+}
+
+.chat-bubbles-scroll {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100%;
+}
+
+.message-row {
+    display: flex;
+    gap: 1rem;
+    width: 100%;
+    max-width: 85%;
+    animation: bubble-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.user-row {
+    align-self: flex-end;
+    flex-direction: row-reverse;
+}
+
+.ai-row {
+    align-self: flex-start;
+}
+
+.message-avatar {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.1rem;
+    flex-shrink: 0;
+}
+
+.user-row .message-avatar {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
+    color: #ffffff;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
+}
+
+.ai-row .message-avatar {
+    background: linear-gradient(135deg, #005f38 0%, #004024 100%);
+    color: #e6fffa;
+    border: 1px solid rgba(0, 255, 153, 0.4);
+    box-shadow: 0 0 10px rgba(0, 255, 153, 0.25);
+}
+
+.message-bubble {
+    padding: 1.25rem 1.5rem;
+    border-radius: var(--radius-lg);
+    position: relative;
+    line-height: 1.6;
+    font-size: 0.975rem;
+}
+
+.user-bubble {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+    border-top-right-radius: 4px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.ai-bubble {
+    background: rgba(10, 20, 30, 0.55);
+    border: 1px solid rgba(0, 255, 153, 0.2);
+    color: #e2e8f0;
+    border-top-left-radius: 4px;
+    box-shadow: 0 4px 15px rgba(0, 255, 153, 0.05);
+    flex-grow: 1;
+}
+
+.message-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    font-size: 0.75rem;
+    opacity: 0.6;
+}
+
+.sender-name {
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.message-time {
+    font-family: monospace;
+}
+
+.message-content {
+    word-break: break-word;
+}
+
+/* Paragraph Spacing & Markdown */
+.message-content p {
+    margin: 0 0 1rem 0;
+}
+.message-content p:last-child {
+    margin-bottom: 0;
+}
+
+.nexus-code-block {
+    background: rgba(0, 0, 0, 0.4) !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border-radius: var(--radius-sm);
+    padding: 1rem;
+    margin: 1rem 0;
+    overflow-x: auto;
+    font-family: 'Fira Code', monospace;
+    font-size: 0.85rem;
+    color: #a7f3d0;
+}
+
+.nexus-inline-code {
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    padding: 0.15rem 0.35rem;
+    font-family: monospace;
+    font-size: 0.9em;
+    color: #f472b6; /* Light pink for inline code */
+}
+
+/* Pending State Bubble */
+.pending-bubble {
+    border-color: rgba(0, 255, 153, 0.4);
+    box-shadow: 0 0 15px rgba(0, 255, 153, 0.1);
+}
+
+.typing-indicator {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.typing-indicator span {
+    width: 8px;
+    height: 8px;
+    background: var(--nexus-neon);
+    border-radius: 50%;
+    display: inline-block;
+    animation: typing-bounce 1.4s infinite ease-in-out both;
+}
+
+.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
+.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
+
+.loading-label {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.5);
+    font-style: italic;
+}
+
+/* Input Controls */
+.chat-input-controls {
+    padding: 1.5rem 2rem 2rem 2rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    flex-shrink: 0;
+}
+
+.input-panel-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.scope-bar {
+    display: flex;
+    align-items: center;
+}
+
+.scope-selector {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.nexus-select {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: #ffffff;
+    padding: 0.35rem 2rem 0.35rem 0.75rem;
+    border-radius: var(--radius-sm);
+    outline: none;
+    cursor: pointer;
+    font-size: 0.85rem;
+    transition: all 0.3s ease;
+    appearance: none;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 0.85em;
+}
+
+.nexus-select:focus {
+    border-color: var(--nexus-neon);
+    box-shadow: 0 0 8px rgba(0, 255, 153, 0.2);
+}
+
+.input-field-group {
+    display: flex;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--radius-md);
+    padding: 0.35rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.input-field-group:focus-within {
+    border-color: var(--nexus-neon);
+    background: rgba(0, 255, 153, 0.01);
+    box-shadow: 0 0 15px rgba(0, 255, 153, 0.15);
+}
+
+.nexus-input {
+    flex-grow: 1;
+    background: transparent;
+    border: none;
+    color: #ffffff;
+    font-size: 1rem;
+    outline: none;
+    padding: 0.5rem 1rem;
+}
+
+.nexus-input::placeholder {
+    color: rgba(255, 255, 255, 0.35);
+}
+
+.search-btn {
+    width: 46px;
+    height: 46px;
+    padding: 0 !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.welcome-state {
+    text-align: center;
+    color: rgba(255, 255, 255, 0.5);
+    padding: 4rem 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.welcome-icon {
+    color: rgba(0, 255, 153, 0.4);
+    margin-bottom: 1.5rem;
+    filter: drop-shadow(0 0 10px rgba(0, 255, 153, 0.2));
+    animation: pulse 2.5s infinite alternate;
+}
+
+.welcome-state h3 {
+    color: #ffffff;
+    font-size: 1.5rem;
+    margin: 0 0 0.75rem 0;
+}
+
+.welcome-state p {
+    max-width: 550px;
+    margin: 0;
+    font-size: 0.95rem;
+    line-height: 1.6;
+}
+
+.btn-spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top-color: #000000;
+    animation: spin 0.8s linear infinite;
+}
+
+/* Keyframe Animations */
+@keyframes bubble-fade-in {
+    0% { opacity: 0; transform: translateY(10px) scale(0.98); }
+    100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes typing-bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-4px); }
+}
+
+@keyframes pulse {
+    0% { transform: scale(0.96); opacity: 0.8; }
+    100% { transform: scale(1.04); opacity: 1; }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

src/NexusReader.UI.Shared/Pages/Library.razor

@@ -59,7 +59,7 @@
                 <p>Nie masz jeszcze żadnych książek w swojej kolekcji.</p>
                 <AuthorizeView Roles="Admin, ContentManager">
                     <Authorized>
-                        <button class="btn-nexus primary" @onclick="() => _isModalOpen = true">
+                        <button class="btn-nexus btn-nexus-primary" @onclick="() => _isModalOpen = true">
                             Prześlij pierwszą książkę
                         </button>
                     </Authorized>
@@ -106,403 +106,6 @@
     </div>
 </div>
 
-<style>
-    .library-page {
-        padding: 3rem 2rem;
-        max-width: 1200px;
-        margin: 0 auto;
-        animation: fadeIn 0.6s ease-out;
-    }
-
-    .library-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 3rem;
-        flex-wrap: wrap;
-        gap: 1.5rem;
-    }
-
-    .header-title-section h1 {
-        font-family: var(--nexus-font-serif, 'Outfit', 'Georgia', serif);
-        font-size: 2.8rem;
-        font-weight: 700;
-        margin: 0 0 0.5rem 0;
-        background: linear-gradient(135deg, var(--nexus-text, #ffffff) 0%, rgba(var(--nexus-text-rgb, 255, 255, 255), 0.7) 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        letter-spacing: -0.5px;
-    }
-
-    .header-title-section .subtitle {
-        font-size: 1rem;
-        color: rgba(255, 255, 255, 0.6);
-        margin: 0;
-    }
-
-    .add-book-trigger {
-        background: linear-gradient(135deg, var(--nexus-primary, #6366f1) 0%, var(--nexus-primary-hover, #4f46e5) 100%) !important;
-        border: none !important;
-        box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important;
-        font-weight: 600 !important;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    }
-
-    .add-book-trigger:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.6) !important;
-    }
-
-    .btn-icon {
-        margin-right: 0.5rem;
-        font-weight: bold;
-    }
-
-    /* Books Grid */
-    .books-grid, .loading-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-        gap: 2rem;
-    }
-
-    .book-card {
-        cursor: pointer;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        overflow: hidden;
-        border-radius: var(--nexus-radius-lg, 16px);
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        position: relative;
-    }
-
-    .book-card::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(800px circle at var(--x, 0) var(--y, 0), rgba(255, 255, 255, 0.06), transparent 40%);
-        opacity: 0;
-        transition: opacity 0.5s;
-        pointer-events: none;
-    }
-
-    .book-card:hover {
-        transform: translateY(-8px) scale(1.02);
-        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 2px rgba(255, 255, 255, 0.1) inset;
-        border-color: rgba(255, 255, 255, 0.2);
-    }
-
-    .book-card:hover::before {
-        opacity: 1;
-    }
-
-    .book-cover-container {
-        position: relative;
-        height: 380px;
-        background: rgba(0, 0, 0, 0.2);
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    }
-
-    .book-cover {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .book-card:hover .book-cover {
-        transform: scale(1.08);
-    }
-
-    .cover-overlay {
-        position: absolute;
-        inset: 0;
-        background: rgba(15, 23, 42, 0.6);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        opacity: 0;
-        transition: opacity 0.3s ease;
-        backdrop-filter: blur(4px);
-    }
-
-    .book-card:hover .cover-overlay {
-        opacity: 1;
-    }
-
-    .read-action {
-        color: #ffffff;
-        font-weight: 600;
-        font-size: 1.1rem;
-        padding: 0.75rem 1.5rem;
-        border: 2px solid #ffffff;
-        border-radius: 30px;
-        transform: translateY(10px);
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .book-card:hover .read-action {
-        transform: translateY(0);
-        background: #ffffff;
-        color: #0f172a;
-    }
-
-    .book-details {
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        background: rgba(15, 23, 42, 0.3);
-    }
-
-    .book-title {
-        font-size: 1.25rem;
-        font-weight: 600;
-        margin: 0 0 0.5rem 0;
-        color: var(--nexus-text, #ffffff);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-family: var(--nexus-font-sans, 'Inter', sans-serif);
-    }
-
-    .book-author {
-        font-size: 0.9rem;
-        color: rgba(255, 255, 255, 0.5);
-        margin: 0 0 1rem 0;
-    }
-
-    .new-badge {
-        align-self: flex-start;
-        font-size: 0.75rem;
-        font-weight: 600;
-        color: var(--nexus-primary, #6366f1);
-        background: rgba(99, 102, 241, 0.15);
-        padding: 0.25rem 0.75rem;
-        border-radius: 20px;
-        border: 1px solid rgba(99, 102, 241, 0.3);
-    }
-
-    /* Book Progress Bar */
-    .book-progress-section {
-        margin-top: auto;
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-
-    .progress-bar {
-        height: 6px;
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 3px;
-        overflow: hidden;
-    }
-
-    .progress-fill {
-        height: 100%;
-        background: linear-gradient(90deg, var(--nexus-primary, #6366f1) 0%, #a855f7 100%);
-        border-radius: 3px;
-    }
-
-    .progress-text {
-        font-size: 0.8rem;
-        color: rgba(255, 255, 255, 0.4);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    /* Empty State */
-    .empty-state-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: 5rem 2rem;
-        text-align: center;
-        border-radius: var(--nexus-radius-lg, 16px);
-    }
-
-    .empty-icon-pulse {
-        margin-bottom: 2rem;
-        color: rgba(255, 255, 255, 0.2);
-        animation: pulse 3s infinite alternate;
-    }
-
-    .empty-state-container h3 {
-        font-family: var(--nexus-font-serif);
-        font-size: 1.8rem;
-        margin: 0 0 0.5rem 0;
-        color: var(--nexus-text);
-    }
-
-    .empty-state-container p {
-        color: rgba(255, 255, 255, 0.5);
-        max-width: 400px;
-        margin: 0 0 2rem 0;
-    }
-
-    .btn-nexus.primary {
-        background: linear-gradient(135deg, var(--nexus-primary, #6366f1) 0%, var(--nexus-primary-hover, #4f46e5) 100%);
-        color: #ffffff;
-        border: none;
-        padding: 0.75rem 2rem;
-        border-radius: 30px;
-        font-weight: 600;
-        cursor: pointer;
-        box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
-        transition: all 0.3s ease;
-    }
-
-    .btn-nexus.primary:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.6);
-    }
-
-    .restricted-info {
-        font-size: 0.85rem;
-        font-style: italic;
-        color: rgba(255, 255, 255, 0.35) !important;
-    }
-
-    /* Skeleton Loading */
-    .skeleton-card {
-        border-radius: var(--nexus-radius-lg, 16px);
-        overflow: hidden;
-        height: 480px;
-    }
-
-    .skeleton-cover {
-        height: 380px;
-        background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
-        background-size: 200% 100%;
-        animation: loading 1.5s infinite;
-    }
-
-    .skeleton-details {
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        gap: 0.75rem;
-    }
-
-    .skeleton-line {
-        background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
-        background-size: 200% 100%;
-        animation: loading 1.5s infinite;
-        border-radius: 4px;
-    }
-
-    .skeleton-line.title {
-        height: 20px;
-        width: 80%;
-    }
-
-    .skeleton-line.author {
-        height: 14px;
-        width: 50%;
-    }
-
-    .skeleton-line.progress {
-        height: 8px;
-        width: 100%;
-        margin-top: auto;
-    }
-
-    .library-loading-container {
-        position: relative;
-        width: 100%;
-    }
-
-    .library-loading-container .loader-card {
-        position: absolute;
-        top: 180px;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        z-index: 10;
-        display: flex;
-        align-items: center;
-        gap: 1.25rem;
-        padding: 1.25rem 2.25rem;
-        border-radius: 40px;
-        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.15) inset;
-        background: rgba(15, 23, 42, 0.75);
-        backdrop-filter: blur(16px);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-    }
-
-    .spinner-glow {
-        width: 60px;
-        height: 60px;
-        border: 3px solid rgba(0, 255, 153, 0.1);
-        border-radius: 50%;
-        border-top-color: var(--nexus-neon, #00ff99);
-        animation: spin 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
-        box-shadow: 0 0 15px rgba(0, 255, 153, 0.2);
-    }
-
-    .spinner-glow.small {
-        width: 28px;
-        height: 28px;
-        border-width: 2px;
-    }
-
-    .loader-text {
-        font-family: var(--nexus-font-sans, 'Inter', sans-serif);
-        font-weight: 500;
-        color: #ffffff;
-        font-size: 0.95rem;
-        letter-spacing: 0.2px;
-    }
-
-    /* Skeleton Loading enhancements */
-    .skeleton-card {
-        background: rgba(255, 255, 255, 0.02) !important;
-        border: 1px solid rgba(255, 255, 255, 0.05) !important;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
-        opacity: 0.5;
-    }
-
-    .skeleton-cover {
-        background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%) !important;
-    }
-
-    .skeleton-line {
-        background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%) !important;
-    }
-
-    /* Animations */
-    @@keyframes fadeIn {
-        from { opacity: 0; transform: translateY(15px); }
-        to { opacity: 1; transform: translateY(0); }
-    }
-
-    @@keyframes pulse {
-        0% { transform: scale(0.95); opacity: 0.6; }
-        100% { transform: scale(1.05); opacity: 0.9; }
-    }
-
-    @@keyframes loading {
-        0% { background-position: 200% 0; }
-        100% { background-position: -200% 0; }
-    }
-
-    @@keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
-
-    @@keyframes scaleIn {
-        from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
-        to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
-    }
-</style>
-
 @code {
     private bool _isModalOpen;
     private bool _isLoading = true;

src/NexusReader.UI.Shared/Pages/Library.razor.css

@@ -0,0 +1,368 @@
+.library-page {
+    padding: 3rem 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    animation: fadeIn 0.6s ease-out;
+}
+
+.library-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 3rem;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+}
+
+.header-title-section h1 {
+    font-family: var(--nexus-font-serif);
+    font-size: 2.8rem;
+    font-weight: 700;
+    margin: 0 0 0.5rem 0;
+    background: linear-gradient(135deg, var(--nexus-text) 0%, rgba(255, 255, 255, 0.7) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    letter-spacing: -0.5px;
+}
+
+.header-title-section .subtitle {
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin: 0;
+}
+
+::deep .add-book-trigger {
+    background: var(--nexus-neon) !important;
+    color: #000000 !important;
+    border: none !important;
+    box-shadow: 0 4px 15px var(--nexus-primary-glow) !important;
+    font-weight: 600 !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    border-radius: var(--radius-md) !important;
+}
+
+::deep .add-book-trigger:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 20px rgba(0, 255, 153, 0.5) !important;
+    filter: brightness(1.1);
+}
+
+.btn-icon {
+    margin-right: 0.5rem;
+    font-weight: bold;
+}
+
+/* Books Grid */
+.books-grid, .loading-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 2rem;
+}
+
+.book-card {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+}
+
+.book-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(800px circle at var(--x, 0) var(--y, 0), rgba(255, 255, 255, 0.06), transparent 40%);
+    opacity: 0;
+    transition: opacity 0.5s;
+    pointer-events: none;
+}
+
+.book-card:hover {
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 2px rgba(255, 255, 255, 0.1) inset;
+    border-color: rgba(0, 255, 153, 0.2);
+}
+
+.book-card:hover::before {
+    opacity: 1;
+}
+
+.book-cover-container {
+    position: relative;
+    height: 380px;
+    background: rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.book-cover {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.book-card:hover .book-cover {
+    transform: scale(1.08);
+}
+
+.cover-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    backdrop-filter: blur(4px);
+}
+
+.book-card:hover .cover-overlay {
+    opacity: 1;
+}
+
+.read-action {
+    color: #ffffff;
+    font-weight: 600;
+    font-size: 1.1rem;
+    padding: 0.75rem 1.5rem;
+    border: 2px solid #ffffff;
+    border-radius: 30px;
+    transform: translateY(10px);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.book-card:hover .read-action {
+    transform: translateY(0);
+    background: #ffffff;
+    color: #0f172a;
+}
+
+.book-details {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    background: rgba(15, 23, 42, 0.3);
+}
+
+.book-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0 0 0.5rem 0;
+    color: var(--nexus-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--nexus-font-sans);
+}
+
+.book-author {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.5);
+    margin: 0 0 1rem 0;
+}
+
+.new-badge {
+    align-self: flex-start;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--nexus-primary);
+    background: rgba(0, 255, 153, 0.15);
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    border: 1px solid rgba(0, 255, 153, 0.3);
+}
+
+/* Book Progress Bar */
+.book-progress-section {
+    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.progress-bar {
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--nexus-neon) 0%, #00ccff 100%);
+    border-radius: 3px;
+}
+
+.progress-text {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.4);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Empty State */
+.empty-state-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 5rem 2rem;
+    text-align: center;
+    border-radius: var(--radius-lg);
+}
+
+.empty-icon-pulse {
+    margin-bottom: 2rem;
+    color: rgba(255, 255, 255, 0.2);
+    animation: pulse 3s infinite alternate;
+}
+
+.empty-state-container h3 {
+    font-family: var(--nexus-font-serif);
+    font-size: 1.8rem;
+    margin: 0 0 0.5rem 0;
+    color: var(--nexus-text);
+}
+
+.empty-state-container p {
+    color: rgba(255, 255, 255, 0.5);
+    max-width: 400px;
+    margin: 0 0 2rem 0;
+}
+
+.restricted-info {
+    font-size: 0.85rem;
+    font-style: italic;
+    color: rgba(255, 255, 255, 0.35) !important;
+}
+
+/* Skeleton Loading */
+.skeleton-card {
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    height: 480px;
+    background: rgba(255, 255, 255, 0.02) !important;
+    border: 1px solid rgba(255, 255, 255, 0.05) !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
+    opacity: 0.5;
+}
+
+.skeleton-cover {
+    height: 380px;
+    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%) !important;
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+}
+
+.skeleton-details {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.skeleton-line {
+    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%) !important;
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+    border-radius: 4px;
+}
+
+.skeleton-line.title {
+    height: 20px;
+    width: 80%;
+}
+
+.skeleton-line.author {
+    height: 14px;
+    width: 50%;
+}
+
+.skeleton-line.progress {
+    height: 8px;
+    width: 100%;
+    margin-top: auto;
+}
+
+.library-loading-container {
+    position: relative;
+    width: 100%;
+}
+
+.library-loading-container .loader-card {
+    position: absolute;
+    top: 180px;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    padding: 1.25rem 2.25rem;
+    border-radius: 40px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.15) inset;
+    background: rgba(15, 23, 42, 0.75);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.spinner-glow {
+    width: 60px;
+    height: 60px;
+    border: 3px solid rgba(0, 255, 153, 0.1);
+    border-radius: 50%;
+    border-top-color: var(--nexus-neon);
+    animation: spin 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
+    box-shadow: 0 0 15px rgba(0, 255, 153, 0.2);
+}
+
+.spinner-glow.small {
+    width: 28px;
+    height: 28px;
+    border-width: 2px;
+}
+
+.loader-text {
+    font-family: var(--nexus-font-sans);
+    font-weight: 500;
+    color: #ffffff;
+    font-size: 0.95rem;
+    letter-spacing: 0.2px;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(15px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse {
+    0% { transform: scale(0.95); opacity: 0.6; }
+    100% { transform: scale(1.05); opacity: 0.9; }
+}
+
+@keyframes loading {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes scaleIn {
+    from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
+    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+}

src/NexusReader.UI.Shared/Pages/SerilogDemo.razor

@@ -3,7 +3,7 @@
 @inject IJSRuntime JSRuntime
 
 <div class="serilog-demo-container">
-    <div class="header-card">
+    <div class="header-card glass-panel">
         <div class="header-content">
             <NexusIcon Name="cpu" Size="36" Class="header-icon" />
             <div class="header-text">
@@ -19,7 +19,7 @@
 
     <div class="demo-grid">
         <!-- Native .NET Logging Panel -->
-        <div class="control-card">
+        <div class="control-card glass-panel">
             <div class="card-header">
                 <NexusIcon Name="terminal" Size="20" Class="card-icon" />
                 <h2>Native .NET Logs (C#)</h2>
@@ -42,7 +42,7 @@
         </div>
 
         <!-- Blazor / JS Interop Bridge Panel -->
-        <div class="control-card">
+        <div class="control-card glass-panel">
             <div class="card-header">
                 <NexusIcon Name="globe" Size="20" Class="card-icon js-icon" />
                 <h2>Blazor / JS WebView Logs</h2>
@@ -62,7 +62,7 @@
     </div>
 
     <!-- Active Log Config Panel -->
-    <div class="config-card">
+    <div class="config-card glass-panel">
         <div class="card-header">
             <NexusIcon Name="settings" Size="20" Class="card-icon" />
             <h2>Pipeline Diagnostics</h2>
@@ -88,252 +88,6 @@
     </div>
 </div>
 
-<style>
-.serilog-demo-container {
-    padding: 2rem;
-    max-width: 1200px;
-    margin: 0 auto;
-    color: #e2e8f0;
-    font-family: 'Inter', system-ui, -apple-system, sans-serif;
-}
-
-.header-card {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 16px;
-    padding: 2rem;
-    margin-bottom: 2rem;
-    backdrop-filter: blur(12px);
-    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
-}
-
-.header-content {
-    display: flex;
-    align-items: center;
-    gap: 1.5rem;
-}
-
-.header-icon {
-    color: #6366f1;
-    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
-}
-
-.header-text h1 {
-    font-size: 1.8rem;
-    font-weight: 700;
-    margin: 0;
-    background: linear-gradient(to right, #ffffff, #94a3b8);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
-.subtitle {
-    margin: 0.25rem 0 0 0;
-    color: #94a3b8;
-    font-size: 0.95rem;
-}
-
-.status-badge {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    background: rgba(16, 185, 129, 0.1);
-    border: 1px solid rgba(16, 185, 129, 0.2);
-    padding: 0.5rem 1rem;
-    border-radius: 9999px;
-}
-
-.status-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-}
-
-.status-dot.green {
-    background-color: #10b981;
-    box-shadow: 0 0 8px #10b981;
-}
-
-.status-text {
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: #10b981;
-}
-
-.demo-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 2rem;
-    margin-bottom: 2rem;
-}
-
-@@media (max-width: 768px) {
-    .demo-grid {
-        grid-template-columns: 1fr;
-    }
-}
-
-.control-card {
-    background: rgba(30, 41, 59, 0.45);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 16px;
-    padding: 2rem;
-    backdrop-filter: blur(8px);
-}
-
-.card-header {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    margin-bottom: 1rem;
-}
-
-.card-icon {
-    color: #6366f1;
-}
-
-.js-icon {
-    color: #eab308;
-}
-
-.card-header h2 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin: 0;
-}
-
-.card-desc {
-    color: #94a3b8;
-    font-size: 0.9rem;
-    margin-bottom: 1.5rem;
-    line-height: 1.5;
-}
-
-.btn-group {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-}
-
-.btn {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem 1.25rem;
-    border-radius: 8px;
-    font-size: 0.85rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: none;
-}
-
-.btn-info {
-    background-color: rgba(99, 102, 241, 0.1);
-    color: #818cf8;
-    border: 1px solid rgba(99, 102, 241, 0.2);
-}
-
-.btn-info:hover {
-    background-color: #6366f1;
-    color: white;
-}
-
-.btn-warning {
-    background-color: rgba(245, 158, 11, 0.1);
-    color: #fbbf24;
-    border: 1px solid rgba(245, 158, 11, 0.2);
-}
-
-.btn-warning:hover {
-    background-color: #f59e0b;
-    color: white;
-}
-
-.btn-error {
-    background-color: rgba(239, 68, 68, 0.1);
-    color: #f87171;
-    border: 1px solid rgba(239, 68, 68, 0.2);
-}
-
-.btn-error:hover {
-    background-color: #ef4444;
-    color: white;
-}
-
-.btn-js-info {
-    background-color: rgba(234, 179, 8, 0.1);
-    color: #fef08a;
-    border: 1px solid rgba(234, 179, 8, 0.2);
-}
-
-.btn-js-info:hover {
-    background-color: #eab308;
-    color: #0f172a;
-}
-
-.btn-js-error {
-    background-color: rgba(236, 72, 153, 0.1);
-    color: #fbcfe8;
-    border: 1px solid rgba(236, 72, 153, 0.2);
-}
-
-.btn-js-error:hover {
-    background-color: #ec4899;
-    color: white;
-}
-
-.config-card {
-    background: rgba(15, 23, 42, 0.5);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 16px;
-    padding: 2rem;
-}
-
-.config-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1.5rem;
-    margin-top: 1.5rem;
-}
-
-@@media (max-width: 768px) {
-    .config-grid {
-        grid-template-columns: 1fr;
-    }
-}
-
-.config-item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.config-item .label {
-    font-size: 0.8rem;
-    color: #64748b;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    font-weight: 600;
-}
-
-.config-item .value {
-    font-size: 0.95rem;
-    color: #cbd5e1;
-}
-
-.code-value {
-    font-family: 'Fira Code', 'Courier New', Courier, monospace;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    word-break: break-all;
-}
-</style>
 
 @code {
     private void LogInfo()

src/NexusReader.UI.Shared/Pages/SerilogDemo.razor.css

@@ -0,0 +1,246 @@
+.serilog-demo-container {
+    padding: 3rem 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    animation: fadeIn 0.6s ease-out;
+}
+
+.header-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem;
+    margin-bottom: 2rem;
+}
+
+.header-content {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+::deep .header-icon {
+    color: var(--nexus-neon);
+    filter: drop-shadow(0 0 8px var(--nexus-primary-glow));
+}
+
+.header-text h1 {
+    font-family: var(--nexus-font-sans);
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin: 0;
+    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.subtitle {
+    margin: 0.25rem 0 0 0;
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 0.95rem;
+}
+
+.status-badge {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(0, 255, 153, 0.05);
+    border: 1px solid rgba(0, 255, 153, 0.2);
+    padding: 0.5rem 1rem;
+    border-radius: 9999px;
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.status-dot.green {
+    background-color: var(--nexus-neon);
+    box-shadow: 0 0 8px var(--nexus-neon);
+}
+
+.status-text {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--nexus-neon);
+}
+
+.demo-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+@media (max-width: 768px) {
+    .demo-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.control-card {
+    border-radius: var(--radius-lg);
+    padding: 2rem;
+    transition: all 0.3s ease;
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+}
+
+::deep .card-icon {
+    color: var(--nexus-neon);
+}
+
+::deep .js-icon {
+    color: #eab308;
+}
+
+.card-header h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0;
+    color: #ffffff;
+}
+
+.card-desc {
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 0.9rem;
+    margin-bottom: 1.5rem;
+    line-height: 1.5;
+}
+
+.btn-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    border-radius: var(--radius-md);
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    border: none;
+}
+
+.btn-info {
+    background-color: rgba(0, 255, 153, 0.05);
+    color: var(--nexus-neon);
+    border: 1px solid rgba(0, 255, 153, 0.2) !important;
+}
+
+.btn-info:hover {
+    background-color: var(--nexus-neon);
+    color: #000000;
+    box-shadow: 0 0 15px var(--nexus-primary-glow);
+}
+
+.btn-warning {
+    background-color: rgba(245, 158, 11, 0.05);
+    color: #fbbf24;
+    border: 1px solid rgba(245, 158, 11, 0.2) !important;
+}
+
+.btn-warning:hover {
+    background-color: #f59e0b;
+    color: #000000;
+    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
+}
+
+.btn-error {
+    background-color: rgba(239, 68, 68, 0.05);
+    color: #f87171;
+    border: 1px solid rgba(239, 68, 68, 0.2) !important;
+}
+
+.btn-error:hover {
+    background-color: #ef4444;
+    color: white;
+    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
+}
+
+.btn-js-info {
+    background-color: rgba(234, 179, 8, 0.05);
+    color: #fef08a;
+    border: 1px solid rgba(234, 179, 8, 0.2) !important;
+}
+
+.btn-js-info:hover {
+    background-color: #eab308;
+    color: #0f172a;
+    box-shadow: 0 0 15px rgba(234, 179, 8, 0.3);
+}
+
+.btn-js-error {
+    background-color: rgba(236, 72, 153, 0.05);
+    color: #fbcfe8;
+    border: 1px solid rgba(236, 72, 153, 0.2) !important;
+}
+
+.btn-js-error:hover {
+    background-color: #ec4899;
+    color: white;
+    box-shadow: 0 0 15px rgba(236, 72, 153, 0.3);
+}
+
+.config-card {
+    border-radius: var(--radius-lg);
+    padding: 2rem;
+}
+
+.config-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+    margin-top: 1.5rem;
+}
+
+@media (max-width: 768px) {
+    .config-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.config-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.config-item .label {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.4);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 600;
+}
+
+.config-item .value {
+    font-size: 0.95rem;
+    color: #cbd5e1;
+}
+
+.code-value {
+    font-family: var(--nexus-font-mono);
+    background: rgba(0, 0, 0, 0.2);
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    word-break: break-all;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(15px); }
+    to { opacity: 1; transform: translateY(0); }
+}

src/NexusReader.UI.Shared/Pages/Settings.razor

@@ -5,7 +5,7 @@
     <h1>Settings</h1>
     <p>Configure your account and application preferences.</p>
 
-    <div class="settings-section">
+    <div class="settings-section glass-panel">
         <h2>Diagnostics & System Logs</h2>
         <p>Inspect native logging infrastructure, trigger custom logs, and trace WebView errors.</p>
         <a class="diag-btn" href="/serilog-demo">
@@ -15,50 +15,3 @@
     </div>
 </div>
 
-<style>
-    .settings-page {
-        padding: 2rem;
-        color: #e2e8f0;
-        font-family: 'Inter', sans-serif;
-    }
-    h1 {
-        margin-bottom: 0.5rem;
-        color: #fff;
-    }
-    h2 {
-        margin-top: 2rem;
-        font-size: 1.2rem;
-        color: #fff;
-        margin-bottom: 0.5rem;
-    }
-    .settings-section {
-        background: rgba(30, 41, 59, 0.45);
-        border: 1px solid rgba(255, 255, 255, 0.05);
-        padding: 1.5rem;
-        border-radius: 12px;
-        margin-top: 1.5rem;
-    }
-    .settings-section p {
-        color: #94a3b8;
-        font-size: 0.9rem;
-        margin-bottom: 1.25rem;
-    }
-    .diag-btn {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        background: rgba(99, 102, 241, 0.1);
-        color: #818cf8;
-        border: 1px solid rgba(99, 102, 241, 0.2);
-        padding: 0.75rem 1.25rem;
-        border-radius: 8px;
-        text-decoration: none;
-        font-size: 0.85rem;
-        font-weight: 600;
-        transition: all 0.2s ease;
-    }
-    .diag-btn:hover {
-        background: #6366f1;
-        color: white;
-    }
-</style>

src/NexusReader.UI.Shared/Pages/Settings.razor.css

@@ -0,0 +1,74 @@
+.settings-page {
+    padding: 3rem 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    animation: fadeIn 0.6s ease-out;
+}
+
+h1 {
+    font-family: var(--nexus-font-serif);
+    font-size: 2.8rem;
+    font-weight: 700;
+    margin: 0 0 0.5rem 0;
+    background: linear-gradient(135deg, var(--nexus-text) 0%, rgba(255, 255, 255, 0.7) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    letter-spacing: -0.5px;
+}
+
+.settings-page > p {
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 3rem;
+}
+
+.settings-section {
+    padding: 2rem;
+    margin-top: 1.5rem;
+    border-radius: var(--radius-lg);
+    transition: all 0.3s ease;
+}
+
+.settings-section h2 {
+    font-family: var(--nexus-font-sans);
+    font-size: 1.35rem;
+    font-weight: 600;
+    color: #ffffff;
+    margin: 0 0 0.75rem 0;
+}
+
+.settings-section p {
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 0.95rem;
+    margin: 0 0 1.5rem 0;
+    line-height: 1.5;
+}
+
+.diag-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(0, 255, 153, 0.05);
+    color: var(--nexus-neon);
+    border: 1px solid rgba(0, 255, 153, 0.2);
+    padding: 0.75rem 1.5rem;
+    border-radius: var(--radius-md);
+    text-decoration: none;
+    font-size: 0.9rem;
+    font-weight: 600;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 0 0 transparent;
+}
+
+.diag-btn:hover {
+    background: var(--nexus-neon);
+    color: #000000;
+    border-color: var(--nexus-neon);
+    box-shadow: 0 0 15px var(--nexus-primary-glow);
+    transform: translateY(-2px);
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(15px); }
+    to { opacity: 1; transform: translateY(0); }
+}

src/NexusReader.UI.Shared/wwwroot/app.css

@@ -2,6 +2,7 @@
 
 :root {
     --nexus-neon: #00ff99;
+    --nexus-neon-glow: rgba(0, 255, 153, 0.3);
     --nexus-bg: #121212;
     --nexus-card: #1a1a1a;
     --nexus-text: #ffffff;
@@ -9,6 +10,17 @@
     --nexus-font-sans: 'Inter', sans-serif;
     --nexus-font-serif: 'Merriweather', serif;
     
+    /* Global Semantic Theme Mapping */
+    --nexus-primary: var(--nexus-neon);
+    --nexus-primary-glow: var(--nexus-neon-glow);
+    --nexus-primary-hover: #00e688;
+    
+    /* Standard Layout Tokens */
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 20px;
+    
     /* Safe Area Insets with fallbacks */
     --safe-area-inset-top: env(safe-area-inset-top, 0px);
     --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
@@ -23,7 +35,7 @@
 .glass-panel {
     background: rgba(20, 20, 20, 0.85); /* Darker fallback for readability */
     border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 20px;
+    border-radius: var(--radius-xl);
     padding: 1.5rem;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -35,6 +47,35 @@
     }
 }
 
+/* Unified Enterprise Component Constraints */
+.btn-nexus {
+    font-family: var(--nexus-font-sans);
+    font-weight: 600;
+    border-radius: var(--radius-md);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border: none;
+    text-decoration: none;
+}
+.btn-nexus-primary {
+    background: var(--nexus-neon);
+    color: #000000;
+}
+.btn-nexus-secondary {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+}
+.btn-nexus:hover {
+    transform: translateY(-2px);
+    filter: brightness(1.1);
+    box-shadow: 0 4px 15px var(--nexus-primary-glow);
+}
+
 
 .theme-light {
     --nexus-bg: var(--nexus-paper);

src/NexusReader.UI.Shared/wwwroot/css/nexus-auth.css

@@ -1,9 +1,8 @@
 :root {
-    --nexus-primary: #44ff77;
+    --nexus-primary: var(--nexus-neon);
-    --nexus-bg: #121418;
+    --nexus-card-bg: var(--nexus-card);
-    --nexus-card-bg: #1c1f24;
     --nexus-border: rgba(255, 255, 255, 0.08);
-    --nexus-text-muted: #666;
+    --nexus-text-muted: #888888;
     --nexus-text-bright: #e2e8f0;
 }