style: unify UI/UX across question entry and quiz templates

- Add CSS variables for consistent color scheme (--bg-dark, --accent-info, etc.)
- Unify note card/section styling with gradient backgrounds and hover effects
- Add consistent btn-pill styling with hover transforms
- Apply gradient backgrounds to modal headers
- Improve progress bar with gradient fill
- Add consistent transitions (--transition-fast, --transition-normal)
- Unify toolbar and button styling in notes modal
- Add shadow variables for consistent depth

Co-Authored-By: Claude (claude-opus-4-5-thinking) <noreply@anthropic.com>

templates/question_entry_v2.html

@@ -5,48 +5,91 @@
 {% block head %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
 <style>
-    .keyboard-hint { font-size: 0.8em; color: #6c757d; margin-top: 2px; }
+    /* === UNIFIED DESIGN SYSTEM === */
+    :root {
+        --bg-dark: #212529;
+        --bg-card: #2b3035;
+        --bg-elevated: #343a40;
+        --bg-hover: #3d444b;
+        --border-subtle: #495057;
+        --border-muted: #6c757d;
+        --text-primary: #e9ecef;
+        --text-muted: #adb5bd;
+        --accent-primary: #0d6efd;
+        --accent-info: #0dcaf0;
+        --accent-success: #198754;
+        --accent-warning: #ffc107;
+        --accent-danger: #dc3545;
+        --transition-fast: 0.15s ease;
+        --transition-normal: 0.25s ease;
+        --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
+        --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+    }
+
+    .keyboard-hint { font-size: 0.8em; color: var(--text-muted); margin-top: 2px; }
     .status-buttons { display: flex; gap: 0.25rem; margin-top: 0.25rem; }
-    .status-btn { flex: 1; font-size: 0.75rem; padding: 0.25rem 0.5rem; border: 1px solid #495057; background: transparent; color: #fff; border-radius: 0.25rem; cursor: pointer; transition: all 0.2s; }
-    .status-btn.active { background: #0d6efd; border-color: #0d6efd; }
-    .status-btn:hover { background: #495057; }
+    .status-btn {
+        flex: 1;
+        font-size: 0.75rem;
+        padding: 0.25rem 0.5rem;
+        border: 1px solid var(--border-subtle);
+        background: transparent;
+        color: #fff;
+        border-radius: 20px;
+        cursor: pointer;
+        transition: all var(--transition-fast);
+    }
+    .status-btn.active { background: var(--accent-primary); border-color: var(--accent-primary); }
+    .status-btn:hover { background: var(--bg-hover); transform: translateY(-1px); }
     .auto-extract-btn { min-width: 120px; }
 
     /* Subject pills */
-    .subject-pill { transition: all 0.2s; }
-    .subject-pill.active { transform: scale(1.05); box-shadow: 0 0 10px rgba(255,255,255,0.3); }
+    .subject-pill {
+        transition: all var(--transition-fast);
+        border-radius: 20px;
+    }
+    .subject-pill.active {
+        transform: scale(1.05);
+        box-shadow: 0 0 12px rgba(255,255,255,0.3);
+    }
 
     /* Range toggles */
-    .range-toggle { transition: all 0.2s; }
+    .range-toggle {
+        transition: all var(--transition-fast);
+        border-radius: 20px;
+    }
+    .range-toggle:hover {
+        transform: translateY(-1px);
+    }
     .range-toggle.active { transform: scale(1.02); box-shadow: 0 0 8px rgba(255,255,255,0.2); }
-    .range-toggle.active.btn-outline-primary { background: #0d6efd; color: #fff; }
-    .range-toggle.active.btn-outline-warning { background: #ffc107; color: #000; }
-    .range-toggle.active.btn-outline-danger { background: #dc3545; color: #fff; }
-    .range-toggle.active.btn-outline-secondary { background: #6c757d; color: #fff; }
-    .range-toggle.active.btn-outline-info { background: #0dcaf0; color: #000; }
+    .range-toggle.active.btn-outline-primary { background: var(--accent-primary); color: #fff; }
+    .range-toggle.active.btn-outline-warning { background: var(--accent-warning); color: #000; }
+    .range-toggle.active.btn-outline-danger { background: var(--accent-danger); color: #fff; }
+    .range-toggle.active.btn-outline-secondary { background: var(--border-muted); color: #fff; }
+    .range-toggle.active.btn-outline-info { background: var(--accent-info); color: #000; }
 
     /* Range slider styling */
-    .range-slider-row { background: #343a40; border-radius: 8px; padding: 12px; margin-bottom: 10px; }
-    .range-slider-row:hover { background: #3d444b; }
+    .range-slider-row { background: var(--bg-elevated); border-radius: 10px; padding: 12px; margin-bottom: 10px; transition: all var(--transition-fast); }
+    .range-slider-row:hover { background: var(--bg-hover); }
     .dual-range-container { position: relative; height: 40px; }
-    .dual-range-track { position: absolute; top: 50%; left: 0; right: 0; height: 8px; background: #495057; border-radius: 4px; transform: translateY(-50%); }
-    .dual-range-highlight { position: absolute; top: 50%; height: 8px; background: linear-gradient(90deg, #0d6efd, #0dcaf0); border-radius: 4px; transform: translateY(-50%); }
+    .dual-range-track { position: absolute; top: 50%; left: 0; right: 0; height: 8px; background: var(--border-subtle); border-radius: 4px; transform: translateY(-50%); }
+    .dual-range-highlight { position: absolute; top: 50%; height: 8px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-info)); border-radius: 4px; transform: translateY(-50%); }
     .dual-range-container input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: none; background: transparent; pointer-events: none; }
-    .dual-range-container input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; background: #fff; border: 3px solid #0d6efd; border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: transform 0.15s; }
+    .dual-range-container input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; background: #fff; border: 3px solid var(--accent-primary); border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast); }
     .dual-range-container input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
-    .dual-range-container input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; background: #fff; border: 3px solid #0d6efd; border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
+    .dual-range-container input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; background: #fff; border: 3px solid var(--accent-primary); border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: var(--shadow-sm); }
 
     /* Tom Select Dark Theme */
     .ts-wrapper .ts-control, .ts-wrapper .ts-control input {
-        background: #212529;
+        background: var(--bg-dark);
         color: #fff;
-        border-color: #6c757d;
+        border-color: var(--border-muted);
     }
 
     .ts-dropdown {
-        background: #212529;
+        background: var(--bg-dark);
         color: #fff;
-        border-color: #6c757d;
+        border-color: var(--border-muted);
     }
 
     .ts-dropdown .option {
@@ -54,9 +97,9 @@
     }
 
     .ts-dropdown .option:hover, .ts-dropdown .active {
-        background: #495057;
+        background: var(--border-subtle);
     }
-    
+
     /* Notes Modal Styles */
     #notes-canvas-body {
         height: calc(100vh - 140px);
@@ -68,16 +111,16 @@
     #notes-canvas-container {
         height: 100%;
         background: #f8f9fa;
-        border: 1px solid #495057;
+        border: 1px solid var(--border-subtle);
         overflow: hidden;
         position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
-        touch-action: none;  /* Prevent browser gestures from interfering */
+        touch-action: none;
     }
     #notes-canvas-container canvas {
-        touch-action: none;  /* Critical for stylus/touch drawing */
+        touch-action: none;
     }
     @media (max-width: 768px) {
         #question-reference-panel {
@@ -88,8 +131,8 @@
         display: flex;
         gap: 8px;
         padding: 12px 16px;
-        background: linear-gradient(180deg, #2c3034, #212529);
-        border-bottom: 1px solid #495057;
+        background: linear-gradient(180deg, var(--bg-card), var(--bg-dark));
+        border-bottom: 1px solid var(--border-subtle);
         flex-wrap: wrap;
         align-items: center;
     }
@@ -97,7 +140,7 @@
         display: flex;
         gap: 4px;
         padding: 0 8px;
-        border-right: 1px solid #495057;
+        border-right: 1px solid var(--border-subtle);
     }
     .notes-toolbar .tool-group:last-child {
         border-right: none;
@@ -108,6 +151,14 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        border-radius: 8px;
+        transition: all var(--transition-fast);
+    }
+    .notes-toolbar .btn:hover {
+        transform: translateY(-2px);
+    }
+    .notes-toolbar .btn.active {
+        box-shadow: 0 0 10px rgba(255,255,255,0.3);
     }
     .color-swatch {
         width: 28px;
@@ -115,23 +166,33 @@
         border-radius: 50%;
         cursor: pointer;
         border: 2px solid transparent;
-        transition: transform 0.15s, border-color 0.15s;
+        transition: all var(--transition-fast);
     }
     .color-swatch:hover { transform: scale(1.1); }
-    .color-swatch.active { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 8px rgba(255,255,255,0.5); }
+    .color-swatch.active { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 10px rgba(255,255,255,0.5); }
 
-    /* Note Card Styles */
+    /* --- UNIFIED NOTE CARD STYLES --- */
     .note-card {
-        background: rgba(13, 202, 240, 0.1);
-        border: 1px solid #0dcaf0;
-        border-radius: 8px;
-        padding: 8px;
+        background: linear-gradient(135deg, rgba(13, 202, 240, 0.08), rgba(13, 202, 240, 0.15));
+        border: 1px solid rgba(13, 202, 240, 0.3);
+        border-radius: 10px;
+        padding: 10px;
         margin-bottom: 8px;
+        transition: all var(--transition-fast);
+    }
+    .note-card:hover {
+        border-color: var(--accent-info);
+        box-shadow: 0 0 12px rgba(13, 202, 240, 0.15);
     }
     .note-thumbnail {
         max-height: 80px;
         object-fit: contain;
-        border-radius: 4px;
+        border-radius: 6px;
+        border: 1px solid rgba(13, 202, 240, 0.3);
+        transition: transform var(--transition-fast);
+    }
+    .note-thumbnail:hover {
+        transform: scale(1.05);
     }
     .note-actions {
         display: flex;
@@ -142,7 +203,18 @@
         cursor: pointer;
     }
     .include-pdf-toggle input:checked + .form-check-label {
-        color: #0dcaf0;
+        color: var(--accent-info);
+    }
+
+    /* --- UNIFIED BUTTON STYLES --- */
+    .btn-pill {
+        border-radius: 50px;
+        font-weight: 500;
+        transition: all var(--transition-fast);
+    }
+    .btn-pill:hover {
+        transform: translateY(-1px);
+        box-shadow: var(--shadow-sm);
     }
 </style>
 {% endblock %}
@@ -223,16 +295,16 @@
                                            onchange="toggleNoteInPdf('{{ image.id }}', this.checked)">
                                     <label class="form-check-label small" for="include_note_{{ image.id }}">In PDF</label>
                                 </div>
-                                <button type="button" class="btn btn-sm btn-outline-info" onclick="openNotesModal('{{ image.id }}', '/image/processed/{{ session_id }}/{{ image.processed_filename }}', '{{ image.note_filename }}')" title="Edit Note">
+                                <button type="button" class="btn btn-sm btn-outline-info btn-pill" onclick="openNotesModal('{{ image.id }}', '/image/processed/{{ session_id }}/{{ image.processed_filename }}', '{{ image.note_filename }}')" title="Edit Note">
                                     <i class="bi bi-pencil"></i>
                                 </button>
-                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteNote('{{ image.id }}')" title="Delete Note">
+                                <button type="button" class="btn btn-sm btn-outline-danger btn-pill" onclick="deleteNote('{{ image.id }}')" title="Delete Note">
                                     <i class="bi bi-trash"></i>
                                 </button>
                             </div>
                         </div>
                         {% else %}
-                        <button type="button" class="btn btn-sm btn-outline-info w-100" onclick="openNotesModal('{{ image.id }}', '/image/processed/{{ session_id }}/{{ image.processed_filename }}', '')">
+                        <button type="button" class="btn btn-sm btn-outline-info btn-pill w-100" onclick="openNotesModal('{{ image.id }}', '/image/processed/{{ session_id }}/{{ image.processed_filename }}', '')">
                             <i class="bi bi-pencil-square me-1"></i>Add Revision Notes
                         </button>
                         {% endif %}
@@ -383,13 +455,13 @@
             <div class="modal fade" id="notesModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
                 <div class="modal-dialog modal-fullscreen">
                     <div class="modal-content bg-dark text-white">
-                        <div class="modal-header py-2 border-secondary">
+                        <div class="modal-header py-2 border-secondary" style="background: linear-gradient(180deg, var(--bg-card), var(--bg-dark));">
                             <h5 class="modal-title"><i class="bi bi-pencil-fill me-2"></i>Add Revision Notes</h5>
                             <div class="d-flex gap-2">
-                                <button class="btn btn-success" onclick="saveNotes()">
+                                <button class="btn btn-success btn-pill px-3" onclick="saveNotes()">
                                     <i class="bi bi-check-lg me-1"></i>Save Notes
                                 </button>
-                                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
+                                <button type="button" class="btn btn-outline-secondary btn-pill" data-bs-dismiss="modal">
                                     <i class="bi bi-x-lg me-1"></i>Cancel
                                 </button>
                             </div>
@@ -519,7 +591,7 @@
 <div class="modal fade" id="manualClassificationModal" tabindex="-1">
     <div class="modal-dialog modal-lg">
         <div class="modal-content bg-dark text-white">
-            <div class="modal-header border-secondary">
+            <div class="modal-header border-secondary" style="background: linear-gradient(180deg, var(--bg-card), var(--bg-dark));">
                 <h5 class="modal-title"><i class="bi bi-list-check me-2"></i>Quick Classification</h5>
                 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
@@ -602,7 +674,7 @@
                 </div>
             </div>
             <div class="modal-footer border-secondary">
-                <button type="button" class="btn btn-lg btn-primary w-100" onclick="startManualClassification()">
+                <button type="button" class="btn btn-lg btn-primary btn-pill w-100" onclick="startManualClassification()">
                     <i class="bi bi-play-fill me-2"></i>Start Classification
                 </button>
             </div>
@@ -614,11 +686,11 @@
 <div class="modal fade" id="topicSelectionModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
     <div class="modal-dialog modal-lg modal-dialog-centered">
         <div class="modal-content bg-dark text-white border-secondary">
-            <div class="modal-header border-secondary py-2">
+            <div class="modal-header border-secondary py-2" style="background: linear-gradient(180deg, var(--bg-card), var(--bg-dark));">
                 <div class="d-flex align-items-center gap-3">
                     <span class="badge bg-primary fs-6" id="topic_q_num">#1</span>
                     <div class="progress flex-grow-1" style="width: 150px; height: 6px;">
-                        <div class="progress-bar" id="topic_progress_bar" role="progressbar" style="width: 0%"></div>
+                        <div class="progress-bar" id="topic_progress_bar" role="progressbar" style="width: 0%; background: linear-gradient(90deg, var(--accent-primary), var(--accent-info));"></div>
                     </div>
                     <small id="topic_progress" class="text-muted">1/10</small>
                 </div>
@@ -668,10 +740,10 @@
                 <div id="ai_error_msg" class="alert alert-danger d-none mt-2 py-2"></div>
             </div>
             <div class="modal-footer border-secondary py-2">
-                <button type="button" class="btn btn-outline-secondary btn-lg px-4" onclick="prevTopicQuestion()">
+                <button type="button" class="btn btn-outline-secondary btn-lg btn-pill px-4" onclick="prevTopicQuestion()">
                     <i class="bi bi-chevron-left"></i>
                 </button>
-                <button type="button" class="btn btn-primary btn-lg px-5" onclick="nextTopicQuestion()">
+                <button type="button" class="btn btn-primary btn-lg btn-pill px-5" onclick="nextTopicQuestion()">
                     Next <i class="bi bi-chevron-right ms-1"></i>
                 </button>
             </div>

templates/quiz_v2.html

@@ -4,14 +4,35 @@
 
 {% block head %}
 <style>
+    /* === UNIFIED DESIGN SYSTEM === */
+    :root {
+        --bg-dark: #212529;
+        --bg-card: #2b3035;
+        --bg-elevated: #343a40;
+        --bg-hover: #3d444b;
+        --border-subtle: #495057;
+        --border-muted: #6c757d;
+        --text-primary: #e9ecef;
+        --text-muted: #adb5bd;
+        --accent-primary: #0d6efd;
+        --accent-info: #0dcaf0;
+        --accent-success: #198754;
+        --accent-warning: #ffc107;
+        --accent-danger: #dc3545;
+        --transition-fast: 0.15s ease;
+        --transition-normal: 0.25s ease;
+        --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
+        --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+    }
+
     /* --- FORCE NO SCROLL ON PAGE --- */
     body, html {
         overflow: hidden;
         height: 100%;
-        background-color: #212529;
+        background-color: var(--bg-dark);
     }
 
-    /* --- MAIN CONTAINER (The Hammer) --- */
+    /* --- MAIN CONTAINER --- */
     .quiz-container {
         height: 88dvh;
         max-height: 88dvh;
@@ -19,23 +40,23 @@
         display: flex;
         flex-direction: column;
         margin: 0 auto;
-        background-color: #2b3035;
+        background-color: var(--bg-card);
     }
 
     /* --- 1. TOP PROGRESS --- */
     .progress-container {
         height: 5px;
-        background-color: #343a40;
+        background-color: var(--bg-elevated);
         flex-shrink: 0;
     }
     .progress-bar {
         height: 100%;
-        background-color: #0d6efd;
+        background: linear-gradient(90deg, var(--accent-primary), var(--accent-info));
         width: 0%;
-        transition: width 0.3s;
+        transition: width var(--transition-normal);
     }
 
-    /* --- 2. MIDDLE IMAGE AREA (Flexible) --- */
+    /* --- 2. MIDDLE IMAGE AREA --- */
     .question-display {
         flex: 1;
         min-height: 0;
@@ -53,25 +74,25 @@
         width: auto;
         height: auto;
         object-fit: contain;
-        border-radius: 6px;
+        border-radius: 8px;
         opacity: 0;
-        transition: opacity 0.3s ease-in;
+        transition: opacity var(--transition-normal);
     }
     .question-image.loaded {
         opacity: 1;
     }
 
-    /* Loading spinner for lazy load */
+    /* Loading spinner */
     .image-loading {
         position: absolute;
         display: none;
-        color: #6c757d;
+        color: var(--text-muted);
     }
     .image-loading.show {
         display: block;
     }
 
-    /* --- 3. BOTTOM CONTROLS (Fixed Height) --- */
+    /* --- 3. BOTTOM CONTROLS --- */
     .quiz-controls {
         flex-shrink: 0;
         height: 70px;
@@ -79,65 +100,98 @@
         grid-template-columns: 1fr auto 1fr;
         align-items: center;
         padding: 0 15px;
-        background-color: #212529;
-        border-top: 1px solid #495057;
+        background: linear-gradient(180deg, var(--bg-card), var(--bg-dark));
+        border-top: 1px solid var(--border-subtle);
         z-index: 50;
     }
 
-    /* --- DETAILS PANEL (Overlay style) --- */
+    /* --- DETAILS PANEL --- */
     .details-spoiler {
         display: none;
-        background-color: #343a40;
-        border-top: 1px solid #6c757d;
+        background-color: var(--bg-elevated);
+        border-top: 1px solid var(--border-muted);
         max-height: 50%;
         overflow-y: auto;
         padding: 15px;
         font-size: 0.9rem;
-        color: #e9ecef;
-    }
-    .details-spoiler .note-thumb {
-        max-height: 200px;
-        object-fit: contain;
-        border-radius: 6px;
-        border: 2px solid #0dcaf0;
-        background: #fff;
+        color: var(--text-primary);
     }
+
+    /* --- UNIFIED NOTE SECTION --- */
     .note-section {
-        background: rgba(13, 202, 240, 0.1);
-        border-radius: 8px;
-        padding: 10px;
+        background: linear-gradient(135deg, rgba(13, 202, 240, 0.08), rgba(13, 202, 240, 0.15));
+        border: 1px solid rgba(13, 202, 240, 0.3);
+        border-radius: 10px;
+        padding: 12px;
         margin-top: 10px;
+        transition: all var(--transition-fast);
+    }
+    .note-section:hover {
+        border-color: var(--accent-info);
+        box-shadow: 0 0 12px rgba(13, 202, 240, 0.15);
     }
     .note-section h6 {
-        color: #0dcaf0;
-        margin-bottom: 8px;
+        color: var(--accent-info);
+        margin-bottom: 10px;
+        font-weight: 600;
+        font-size: 0.85rem;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+    .note-section .note-thumb {
+        max-height: 200px;
+        width: 100%;
+        object-fit: contain;
+        border-radius: 8px;
+        border: 2px solid var(--accent-info);
+        background: #fff;
+        transition: transform var(--transition-fast);
+    }
+    .note-section .note-thumb:hover {
+        transform: scale(1.02);
     }
 
-    /* --- BUTTON STYLES --- */
-    .btn-pill { border-radius: 50px; }
+    /* --- UNIFIED BUTTON STYLES --- */
+    .btn-pill {
+        border-radius: 50px;
+        font-weight: 500;
+        transition: all var(--transition-fast);
+    }
+    .btn-pill:hover {
+        transform: translateY(-1px);
+        box-shadow: var(--shadow-sm);
+    }
+    .btn-pill:active {
+        transform: translateY(0);
+    }
 
     /* --- OVERLAYS --- */
     .answer-overlay {
         position: absolute;
         top: 10px;
-        padding: 5px 10px;
-        border-radius: 15px;
+        padding: 6px 12px;
+        border-radius: 20px;
         color: white;
-        font-weight: bold;
+        font-weight: 600;
         font-size: 0.8rem;
         z-index: 10;
         display: none;
-        backdrop-filter: blur(2px);
-        box-shadow: 0 2px 5px rgba(0,0,0,0.5);
+        backdrop-filter: blur(4px);
+        box-shadow: var(--shadow-md);
+        transition: all var(--transition-fast);
     }
     #your-answer-overlay { left: 10px; background: rgba(13, 110, 253, 0.9); }
     #correct-answer-overlay { right: 10px; background: rgba(25, 135, 84, 0.9); }
 
     /* Bookmark button states */
+    .bookmark-btn {
+        transition: all var(--transition-fast);
+    }
     .bookmark-btn.bookmarked {
-        background-color: #ffc107 !important;
-        border-color: #ffc107 !important;
+        background-color: var(--accent-warning) !important;
+        border-color: var(--accent-warning) !important;
         color: #000 !important;
+        box-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
     }
     .bookmark-btn.bookmarked i::before {
         content: "\F147"; /* bi-bookmark-fill */
@@ -146,13 +200,15 @@
     /* Collection list in modal */
     .collection-item {
         cursor: pointer;
-        transition: background-color 0.15s;
+        transition: all var(--transition-fast);
+        border-radius: 6px;
     }
     .collection-item:hover {
-        background-color: #3d444b;
+        background-color: var(--bg-hover);
+        transform: translateX(2px);
     }
     .collection-item.selected {
-        background-color: #0d6efd;
+        background-color: var(--accent-primary);
         color: white;
     }
 </style>
@@ -220,7 +276,7 @@
 <div class="modal fade" id="bookmarkModal" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content bg-dark text-white">
-            <div class="modal-header border-secondary">
+            <div class="modal-header border-secondary" style="background: linear-gradient(180deg, var(--bg-card, #2b3035), var(--bg-dark, #212529));">
                 <h5 class="modal-title"><i class="bi bi-bookmark me-2"></i>Add to Collection</h5>
                 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
@@ -231,7 +287,7 @@
                 <div class="border-top border-secondary pt-3">
                     <div class="input-group">
                         <input type="text" id="new-collection-name" class="form-control bg-secondary text-white border-secondary" placeholder="New collection name...">
-                        <button class="btn btn-success" id="create-collection-btn">
+                        <button class="btn btn-success btn-pill" id="create-collection-btn">
                             <i class="bi bi-plus-lg"></i> Create
                         </button>
                     </div>
@@ -239,7 +295,7 @@
             </div>
             <div class="modal-footer border-secondary">
                 <span id="bookmark-status" class="text-muted small me-auto"></span>
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-secondary btn-pill" data-bs-dismiss="modal">Close</button>
             </div>
         </div>
     </div>