:root {
            --primary-color: #4a6fa5;
            --primary-gradient: linear-gradient(135deg, #4a6fa5, #3a5a8f);
            --secondary-color: #e9f0f9;
            --text-color: #333;
            --background-color: #fff;
            --input-bg: #f9f9f9;
            --border-color: #ddd;
            --success-color: #4caf50;
            --success-gradient: linear-gradient(135deg, #4caf50, #388e3c);
            --button-hover: #3a5a8f;
            --bg-glow-primary: rgba(74, 111, 165, 0.12);
            --bg-glow-secondary: rgba(76, 175, 80, 0.08);
            --bg-grid-color: rgba(0, 0, 0, 0.04);
            --sidebar-width: 220px;
            --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
            --card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.12);
            --border-radius: 8px;
            --border-radius-sm: 6px;
            --transition-speed: 0.2s;
        }

        [data-theme="dark"] {
            /* Match landing page aesthetic */
            --primary-color: #6366f1;
            --primary-gradient: linear-gradient(135deg, #6366f1, #a855f7);
            --secondary-color: #0f172a;
            --text-color: #f8fafc;
            --background-color: #000000;
            --input-bg: #111827;
            --border-color: #1f2937;
            --success-color: #22c55e;
            --success-gradient: linear-gradient(135deg, #22c55e, #16a34a);
            --button-hover: #4f46e5;
            --bg-glow-primary: rgba(99, 102, 241, 0.15);
            --bg-glow-secondary: rgba(168, 85, 247, 0.1);
            --bg-grid-color: rgba(255, 255, 255, 0.03);
            --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
            --card-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.45);
        }

        /* Theme Variables for additional themes */
        [data-theme="blue"] {
            --primary-color: #2196f3;
            --primary-gradient: linear-gradient(135deg, #2196f3, #0d6efd);
            --secondary-color: #e3f2fd;
            --text-color: #f0f0f0;
            --background-color: #0a1929;
            --input-bg: #132f4c;
            --border-color: #444;
            --success-color: #4caf50;
            --success-gradient: linear-gradient(135deg, #4caf50, #388e3c);
            --button-hover: #0a7feb;
            --bg-glow-primary: rgba(33, 150, 243, 0.18);
            --bg-glow-secondary: rgba(13, 110, 253, 0.12);
            --bg-grid-color: rgba(255, 255, 255, 0.03);
            --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
            --card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.25);
        }

        [data-theme="forest"] {
            --primary-color: #388e3c;
            --primary-gradient: linear-gradient(135deg, #4caf50, #2e7d32);
            --secondary-color: #e8f5e9;
            --text-color: #f0f0f0;
            --background-color: #1b2a1b;
            --input-bg: #2d3b2d;
            --border-color: #3e4e3e;
            --success-color: #81c784;
            --success-gradient: linear-gradient(135deg, #81c784, #66bb6a);
            --button-hover: #2e7d32;
            --bg-glow-primary: rgba(76, 175, 80, 0.18);
            --bg-glow-secondary: rgba(46, 125, 50, 0.12);
            --bg-grid-color: rgba(255, 255, 255, 0.03);
            --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
            --card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.25);
        }

        [data-theme="sepia"] {
            --primary-color: #a86832;
            --primary-gradient: linear-gradient(135deg, #a86832, #8e5924);
            --secondary-color: #f5e8d6;
            --text-color: #5f4b32;
            --background-color: #f8f0e3;
            --input-bg: #f5eadb;
            --border-color: #d9c7b8;
            --success-color: #7d9978;
            --success-gradient: linear-gradient(135deg, #8fa389, #7d9978);
            --button-hover: #8e5924;
            --bg-glow-primary: rgba(168, 104, 50, 0.16);
            --bg-glow-secondary: rgba(142, 89, 36, 0.1);
            --bg-grid-color: rgba(0, 0, 0, 0.04);
            --card-shadow: 0 2px 6px rgba(139, 101, 58, 0.15);
            --card-shadow-hover: 0 4px 10px rgba(139, 101, 58, 0.2);
        }

        [data-theme="purple"] {
            --primary-color: #9c27b0;
            --primary-gradient: linear-gradient(135deg, #ab47bc, #8e24aa);
            --secondary-color: #f3e5f5;
            --text-color: #f0f0f0;
            --background-color: #16081d;
            --input-bg: #2e1a3d;
            --border-color: #3f2254;
            --success-color: #81c784;
            --success-gradient: linear-gradient(135deg, #81c784, #66bb6a);
            --button-hover: #8e24aa;
            --bg-glow-primary: rgba(156, 39, 176, 0.18);
            --bg-glow-secondary: rgba(171, 71, 188, 0.12);
            --bg-grid-color: rgba(255, 255, 255, 0.03);
            --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
            --card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.25);
        }

        [data-theme="red"] {
            --primary-color: #d53c24;
            --primary-gradient: linear-gradient(135deg, #e54c36, #c62828);
            --secondary-color: #ffebee;
            --text-color: #f0f0f0;
            --background-color: #1f0a0a;
            --input-bg: #301212;
            --border-color: #471a1a;
            --success-color: #81c784;
            --success-gradient: linear-gradient(135deg, #81c784, #66bb6a);
            --button-hover: #c62828;
            --bg-glow-primary: rgba(213, 60, 36, 0.18);
            --bg-glow-secondary: rgba(229, 76, 54, 0.12);
            --bg-grid-color: rgba(255, 255, 255, 0.03);
            --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
            --card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.25);
        }

        * {
            box-sizing: border-box;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--background-color);
            color: var(--text-color);
            background-image:
                radial-gradient(circle at 30% 50%, var(--bg-glow-primary) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, var(--bg-glow-secondary) 0%, transparent 50%),
                linear-gradient(var(--bg-grid-color) 1px, transparent 1px),
                linear-gradient(90deg, var(--bg-grid-color) 1px, transparent 1px);
            background-size: auto, auto, 50px 50px, 50px 50px;
            background-attachment: fixed;
        }

        .container {
            width: 98%;
            margin: 0 auto;
            padding: 10px;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
            background-image: linear-gradient(to right, var(--primary-color), transparent);
            background-size: 100% 3px;
            background-position: bottom;
            background-repeat: no-repeat;
            position: relative;
        }

        h1 {
            margin: 0;
            font-size: 1.6rem;
            color: var(--primary-color);
        }

        h2 {
            margin: 0 0 10px 0;
            font-size: 1.4rem;
        }

        h3 {
            margin: 0 0 10px 0;
            font-size: 1.2rem;
        }

        .tab-container {
            display: flex;
            margin-bottom: 25px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 0;
            position: relative;
        }
        
        /* Mobile Hamburger Menu Toggle */
        .mobile-menu-toggle {
            display: none;
            flex-direction: column;
            justify-content: space-around;
            width: 40px;
            height: 40px;
            min-width: 40px;
            min-height: 40px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 8px;
            z-index: 1001;
            position: relative;
            margin: 0;
            flex-shrink: 0;
            align-items: center;
        }
        
        .mobile-menu-toggle span {
            width: 100%;
            height: 3px;
            background-color: var(--text-color);
            border-radius: 3px;
            transition: all 0.3s ease;
            transform-origin: center;
            display: block;
        }
        
        .mobile-menu-toggle.mobile-menu-active {
            position: fixed;
            top: 15px;
            right: 15px;
            left: auto;
            z-index: 1002;
            background: var(--input-bg);
            border-radius: var(--border-radius);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            padding: 10px;
            margin: 0;
        }
        
        /* Ensure button doesn't get cut off on small screens */
        @media (max-width: 400px) {
            .mobile-menu-toggle.mobile-menu-active {
                top: 10px;
                right: 10px;
            }
        }
        
        .mobile-menu-toggle.mobile-menu-active span {
            background-color: var(--text-color);
        }
        
        .mobile-menu-toggle.mobile-menu-active span:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }
        
        .mobile-menu-toggle.mobile-menu-active span:nth-child(2) {
            opacity: 0;
            transform: scale(0);
        }
        
        .mobile-menu-toggle.mobile-menu-active span:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
        }
        
        /* Mobile Tab Menu Backdrop */
        .mobile-menu-backdrop {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            transition: opacity 0.3s ease;
            backdrop-filter: blur(2px);
        }
        
        .mobile-menu-backdrop.mobile-menu-open {
            opacity: 1;
        }
        
        @media (max-width: 768px) {
            .mobile-menu-backdrop {
                display: block;
            }
        }
        
        /* Mobile Tab Menu */
        .mobile-tab-menu {
            display: none;
            flex-direction: column;
            position: fixed;
            top: 0;
            left: 0;
            width: 85%;
            max-width: 320px;
            bottom: 0;
            background: var(--background-color);
            z-index: 1000;
            padding: 80px 20px 20px;
            overflow-y: auto;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        }
        
        .mobile-tab-menu.mobile-menu-open {
            transform: translateX(0);
        }
        
        /* Add header to mobile menu for better spacing */
        .mobile-tab-menu::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 70px;
            background: var(--input-bg);
            border-bottom: 1px solid var(--border-color);
            z-index: 1;
        }
        
        .mobile-tab-item {
            padding: 16px 20px;
            margin-bottom: 12px;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            color: var(--text-color);
            font-size: 1.1rem;
            font-weight: 500;
            cursor: pointer;
            text-align: left;
            transition: all 0.2s ease;
            position: relative;
            z-index: 2;
            width: 100%;
            box-sizing: border-box;
        }
        
        .mobile-tab-item:first-of-type {
            margin-top: 10px;
        }
        
        .mobile-tab-item:hover {
            background: var(--secondary-color);
            transform: translateX(4px);
        }
        
        .mobile-tab-item.active {
            background: var(--primary-gradient);
            color: white;
            border-color: var(--primary-color);
        }
        
        .mobile-tab-item:active {
            transform: scale(0.98);
        }
        
        /* Override button styles for tabs specifically */
        .tab-container .tab {
            padding: 12px 20px;
            margin-right: 8px;
            cursor: pointer;
            background: none;
            background-color: transparent;
            background-image: none;
            color: var(--text-color);
            border: none;
            border-radius: 0;
            outline: none;
            font-size: 1rem;
            font-weight: 500;
            transition: all var(--transition-speed) ease;
            position: relative;
            box-shadow: none;
            opacity: 0.7;
            transform: none;
        }

        .tab-container .tab:hover {
            opacity: 0.9;
            background: none;
            background-color: transparent;
            background-image: none;
            color: var(--primary-color);
            box-shadow: none;
            transform: none;
        }

        .tab-container .tab.active {
            color: var(--primary-color);
            font-weight: 600;
            opacity: 1;
            background: none;
            background-color: transparent;
            background-image: none;
            box-shadow: none;
        }

        .tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--primary-color);
            transform-origin: center;
            transition: transform 0.3s ease;
        }
        
        .tab:hover::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--primary-color);
            opacity: 0.3;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* New styles for template sidebar */
        .notes-container {
            display: flex;
            gap: 20px;
            height: calc(100vh - 150px);
            margin-bottom: 20px;
        }

        .template-sidebar {
            width: var(--sidebar-width);
            background-color: var(--input-bg);
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
            padding: 15px;
            overflow-y: auto;
            box-shadow: var(--card-shadow);
        }

        .template-sidebar h3 {
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .mobile-collapsible-toggle {
            display: none;
        }

        .mobile-collapsible-panel {
            display: block;
        }

        .template-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .template-item {
            padding: 12px;
            margin: 6px 0;
            cursor: pointer;
            border-radius: var(--border-radius-sm);
            transition: all var(--transition-speed) ease;
            border-left: 3px solid transparent;
        }
        
        .template-item:hover {
            background-color: var(--secondary-color);
            transform: translateX(2px);
        }

        .template-item.active {
            background-image: var(--primary-gradient);
            color: white;
            border-left: 3px solid white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .notes-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .library-container {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 20px;
        }

        .library-upload-card,
        .library-list-card {
            background-color: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            padding: 16px;
        }

        .library-upload-card p {
            margin-top: 0;
            opacity: 0.85;
        }

        .library-upload-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-bottom: 6px;
            flex-wrap: wrap;
        }

        .library-upload-header h3 {
            margin: 0;
        }

        .library-function-status {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            border: 1px solid var(--border-color);
            background: var(--background-color);
            border-radius: 999px;
            font-size: 0.85rem;
        }

        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            display: inline-block;
            box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
        }

        .status-dot.status-online {
            background: #16a34a;
            box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
        }

        .status-dot.status-offline {
            background: #dc2626;
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
        }

        .status-dot.status-checking {
            background: #f59e0b;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
        }

        .library-status-refresh {
            padding: 4px 10px;
            font-size: 0.8rem;
            min-height: auto;
        }

        .library-confirm-row {
            margin: 8px 0 12px;
        }

        .library-upload-actions {
            margin-top: 10px;
        }

        .library-upload-status {
            margin-top: 10px;
            min-height: 20px;
            font-size: 0.9rem;
            color: var(--text-color);
            opacity: 0.85;
        }

        .library-list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .library-list-header h3 {
            margin: 0;
        }

        #library-search-input {
            max-width: 280px;
        }

        .library-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .library-item {
            background-color: var(--background-color);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            padding: 12px;
        }

        .library-item-title {
            margin: 0 0 6px 0;
            font-weight: 600;
        }

        .library-item-meta {
            font-size: 0.85rem;
            opacity: 0.75;
            margin-bottom: 8px;
        }

        .library-item-summary {
            margin: 0;
            white-space: pre-wrap;
        }

        .library-detail-panel {
            margin-top: 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            background: var(--background-color);
            padding: 12px;
        }

        .library-detail-panel h4 {
            margin: 0 0 8px 0;
        }

        .library-detail-panel textarea {
            min-height: 120px;
        }

        .notes-form {
            flex: 1;
            background-color: var(--input-bg);
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
            padding: 20px;
            overflow-y: auto;
            box-shadow: var(--card-shadow);
        }

        /* Original styles */
        select {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            background-color: var(--input-bg);
            color: var(--text-color);
            font-size: 1rem;
        }

        .form-group {
            margin-bottom: 12px;
        }

        label {
            display: block;
            margin-bottom: 3px;
            font-weight: 500;
        }

        input[type="text"], 
        textarea,
        .custom-dropdown {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            background-color: var(--input-bg);
            color: var(--text-color);
            font-size: 1rem;
            transition: all var(--transition-speed) ease;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
        }
        
        input[type="text"]:focus, 
        textarea:focus,
        .custom-dropdown:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
            outline: none;
        }

        textarea {
            min-height: 80px;
            resize: vertical;
        }

        .button-group {
            display: flex;
            gap: 8px;
            margin-top: 15px;
        }

        button {
            padding: 8px 16px;
            border: none;
            border-radius: var(--border-radius-sm);
            background-image: var(--primary-gradient);
            color: white;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all var(--transition-speed) ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        button:active {
            transform: translateY(1px);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        button.secondary {
            background-image: none;
            background-color: var(--secondary-color);
            color: var(--text-color);
        }

        .settings-section {
            margin-bottom: 20px;
        }

        .bookmarks-header {
            margin-bottom: 15px;
        }
        
        .bookmarks-actions {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        
        /* New Category-tabs-container style for expand/collapse buttons */
        .category-tabs-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 10px;
        }
        
        /* Modified category-tabs to work with new container */
        .category-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            border-bottom: none;
            padding-bottom: 0;
            margin-bottom: 0;
        }
        
        .category-tab {
            padding: 5px 10px;
            cursor: pointer;
            background-color: var(--secondary-color);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            font-size: 0.9rem;
            transition: background-color 0.2s ease, color 0.2s ease;
        }
        
        .category-tab.active {
            background-color: var(--primary-color);
            color: white;
        }
        
        .bookmark-sort-options {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .bookmark-sort-label {
            font-size: 0.9rem;
            white-space: nowrap;
        }
        
        .bookmark-sort-select {
            padding: 5px;
            border-radius: var(--border-radius-sm);
            border: 1px solid var(--border-color);
            background-color: var(--input-bg);
            color: var(--text-color);
        }
        
        /* New expand-collapse-buttons style */
        .expand-collapse-buttons {
            display: flex;
            gap: 10px;
            margin-left: 20px;
        }
        
        .category-order-buttons {
            display: flex;
            gap: 5px;
            margin-left: 10px;
        }
        
        .category-order-button {
            background-color: var(--secondary-color);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        
        .category-order-button:hover {
            background-color: var(--primary-color);
            color: white;
        }
        
        #bookmarks-search {
            width: 200px;
            padding: 8px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            background-color: var(--input-bg);
            color: var(--text-color);
        }
        
        #bookmarks-container {
            display: flex;
            gap: 20px;
        }
        
        #bookmarks-list {
            flex: 1;
            max-height: 70vh;
            overflow-y: auto;
        }
        
        #bookmark-edit-form {
            flex: 1;
            background-color: var(--input-bg);
            padding: 15px;
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
            box-shadow: var(--card-shadow);
        }
        
        .bookmark-category {
            margin-bottom: 20px;
        }
        
        .category-header {
            background-image: linear-gradient(to right, var(--secondary-color), transparent);
            padding: 10px 18px;
            border-radius: var(--border-radius);
            margin-bottom: 12px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all var(--transition-speed) ease;
            box-shadow: var(--card-shadow);
        }
        
        .category-header:hover {
            box-shadow: var(--card-shadow-hover);
            transform: translateY(-1px);
        }
        
        .category-bookmarks {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 10px;
        }
        
        .template-card, .bookmark-card, .statement-card {
            background-color: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: var(--card-shadow);
            transition: all var(--transition-speed) ease;
        }
        
        .template-card:hover, .bookmark-card:hover, .statement-card:hover {
            box-shadow: var(--card-shadow-hover);
            transform: translateY(-2px);
        }
        
        .bookmark-card {
            position: relative;
        }
        
        .bookmark-actions {
            display: flex;
            gap: 5px;
            margin-top: 10px;
        }
        
        .bookmark-actions button {
            padding: 5px 8px;
            font-size: 0.8rem;
        }
        
        .category-input-container {
            display: flex;
            gap: 5px;
        }
        
        .category-input-container select {
            flex: 1;
        }
        
        .category-management {
            margin-top: 10px;
            text-align: right;
        }
        
        #category-manager {
            flex: 1;
            background-color: var(--input-bg);
            padding: 15px;
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
            box-shadow: var(--card-shadow);
        }
        
        .category-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            margin-bottom: 8px;
            background-color: var(--background-color);
            border-radius: var(--border-radius-sm);
            border: 1px solid var(--border-color);
        }
        
        .category-item-name {
            font-weight: 500;
        }
        
        button.clear {
            background-image: linear-gradient(135deg, #e74c3c, #c0392b); /* Red gradient */
            color: white;
        }
        
        button.copy {
            background-image: var(--success-gradient); /* Green gradient */
            color: white;
        }
        
        button.clear:hover {
            background-image: linear-gradient(135deg, #e74c3c, #a93226); /* Darker red gradient on hover */
        }
        
        button.copy:hover {
            background-image: linear-gradient(135deg, #4caf50, #2d6a30); /* Darker green gradient on hover */
        }
        .template-card-header, .bookmark-card-header, .statement-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .template-name, .bookmark-title, .statement-title {
            font-weight: 500;
        }
        
        .bookmark-url {
            display: block;
            padding: 10px;
            margin-top: 5px;
            background-color: var(--background-color);
            border-radius: var(--border-radius-sm);
            word-break: break-all;
        }
        
        .bookmark-url a {
            color: var(--primary-color);
            text-decoration: none;
        }
        
        .bookmark-url a:hover {
            text-decoration: underline;
        }
        
        .statement-content {
            background-color: var(--background-color);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            padding: 15px;
            margin-top: 10px;
            margin-bottom: 15px;
            white-space: pre-wrap;
        }

        .copy-message {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-image: var(--success-gradient);
            color: white;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            display: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            animation: slide-up 0.3s ease;
        }
        
        .warning-message {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-image: linear-gradient(135deg, #e74c3c, #c0392b);
            color: white;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            display: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            animation: slide-up 0.3s ease;
            z-index: 1000;
            max-width: 80%;
            text-align: center;
        }
        
        .missing-fields-list {
            margin-top: 8px;
            font-size: 0.9rem;
            text-align: left;
        }

        /* Theme toggle switch */
        .theme-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 28px;
        }

        .theme-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 28px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 22px;
            width: 22px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: var(--primary-color);
        }

        input:checked + .slider:before {
            transform: translateX(22px);
        }

        .switch-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 160px;
        }

        /* New styles for full-width layout */
        .flex-container {
            display: flex;
            gap: 20px;
        }

        .flex-column {
            flex: 1;
        }

        .templates-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
        }

        .template-form-container {
            background-color: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 15px;
            box-shadow: var(--card-shadow);
        }

        .form-row {
            display: flex;
            gap: 15px;
            margin-bottom: 12px;
        }
        
        .form-row .form-group {
            flex: 1;
            margin-bottom: 0;
        }

        .compact-card {
            padding: 8px;
            margin-bottom: 8px;
        }

        .settings-flex {
            display: flex;
            gap: 20px;
        }
        
        .settings-flex > div {
            flex: 1;
        }

        /* New styles for template editing & storage settings */
        .template-fields-list {
            background-color: var(--background-color);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            padding: 10px;
            margin-top: 10px;
            list-style-type: none;
        }

        .template-field-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 8px;
            margin-bottom: 6px;
            border-bottom: 1px solid var(--border-color);
        }

        .template-field-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        .field-item-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .field-item-type {
            color: var(--primary-color);
            font-size: 0.9rem;
            background-color: var(--secondary-color);
            padding: 2px 6px;
            border-radius: 4px;
        }

        .dynamic-field-container {
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            padding: 10px;
            margin-bottom: 10px;
            background-color: var(--background-color);
        }

        .field-actions {
            display: flex;
            gap: 5px;
        }

        .settings-card {
            background-color: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: var(--card-shadow);
            transition: all var(--transition-speed) ease;
        }
        
        .settings-card:hover {
            box-shadow: var(--card-shadow-hover);
        }

        .storage-option {
            margin-bottom: 15px;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            background-color: var(--background-color);
        }

        .storage-option-label {
            font-weight: 500;
            margin-bottom: 8px;
        }

        .storage-path-input {
            display: flex;
            gap: 10px;
        }

        .storage-path-input input {
            flex: 1;
        }

        .import-export-buttons {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        /* Additional dark mode text adjustments */
        [data-theme="dark"] .tab.active {
            color: var(--secondary-color);
        }
        
        [data-theme="dark"] button:not(.copy):not(.clear) {
            color: #ffffff;
        }
        
        [data-theme="dark"] button.secondary {
            color: var(--text-color);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            /* Show hamburger menu, hide desktop tabs */
            .mobile-menu-toggle {
                display: flex;
                order: -1; /* Place it first in the flex container */
            }
            
            .mobile-menu-backdrop {
                display: block;
            }
            
            .tab-container {
                display: none;
            }
            
            .mobile-tab-menu {
                display: flex;
            }
            
            /* Ensure container has proper spacing */
            .container {
                padding-top: 0;
            }
            
            /* Add spacing after header to prevent overlap */
            header {
                margin-bottom: 15px;
            }
            
            /* Ensure header flex container wraps properly */
            header > div {
                flex-wrap: wrap;
            }
            
            /* Vertical layout for notes container */
            .notes-container {
                flex-direction: column;
                height: auto;
            }
            
            .template-sidebar {
                width: 100%;
                margin-bottom: 10px;
                max-height: 200px;
            }
            
            .notes-content {
                width: 100%;
            }

            /* Vertical layout for settings */
            .settings-flex {
                flex-direction: column;
            }
            
            /* Vertical layout for form rows */
            .form-row {
                flex-direction: column;
                gap: 12px;
            }
            
            .form-row .form-group {
                width: 100%;
            }
            
            /* Vertical layout for button groups */
            .button-group {
                flex-direction: column;
                gap: 10px;
            }
            
            .button-group button {
                width: 100%;
            }
            
            /* Vertical layout for storage path input */
            .storage-path-input {
                flex-direction: column;
            }
            
            /* Vertical layout for import/export buttons */
            .import-export-buttons {
                flex-direction: column;
            }
            
            .import-export-buttons button {
                width: 100%;
            }
            
            /* Vertical layout for bookmark actions */
            .bookmarks-actions {
                flex-direction: column;
                gap: 10px;
            }
            
            /* Vertical layout for category tabs container */
            .category-tabs-container {
                flex-direction: column;
                align-items: stretch;
            }
            
            /* Vertical layout for bookmark sort options */
            .bookmark-sort-options {
                flex-direction: column;
                align-items: stretch;
            }

            .library-list-header {
                flex-direction: column;
                align-items: stretch;
            }

            #library-search-input {
                max-width: 100%;
            }

            .library-function-status {
                width: 100%;
                justify-content: space-between;
                border-radius: var(--border-radius-sm);
            }
            
            /* Vertical layout for flex containers */
            .flex-container {
                flex-direction: column;
            }
            
            /* Vertical layout for settings cards */
            .settings-flex > div {
                width: 100%;
            }
        }

        /* Settings Sidebar Styles */
        .settings-container {
            display: flex;
            gap: 20px;
            min-height: calc(100vh - 200px);
        }

        .settings-sidebar {
            width: var(--sidebar-width);
            background-color: var(--input-bg);
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
            padding: 15px;
            box-shadow: var(--card-shadow);
            height: fit-content;
        }

        .settings-sidebar h3 {
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .settings-nav {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .settings-nav-item {
            padding: 12px;
            margin: 6px 0;
            cursor: pointer;
            border-radius: var(--border-radius-sm);
            transition: all var(--transition-speed) ease;
            border-left: 3px solid transparent;
        }

        .settings-nav-item:hover {
            background-color: var(--secondary-color);
            transform: translateX(2px);
        }

        .settings-nav-item.active {
            background-image: var(--primary-gradient);
            color: white;
            border-left: 3px solid white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .settings-content {
            flex: 1;
            overflow-y: auto;
        }

        .settings-section {
            display: none;
        }

        .settings-section.active {
            display: block;
        }

        .import-export-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .import-export-card {
            background-color: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 15px;
            box-shadow: var(--card-shadow);
        }

        .import-export-card h4 {
            margin-top: 0;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 10px;
            margin-bottom: 10px;
        }

        .import-export-buttons {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        /* Make responsive for mobile */
        @media (max-width: 768px) {
            .settings-container {
                flex-direction: column;
            }
            
            .settings-sidebar {
                width: 100%;
            }
        }
.category-button {
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-sm);
    background-color: var(--secondary-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all var(--transition-speed) ease;
}

.category-button:hover:not(:disabled) {
    background-color: var(--primary-color);
    color: white;
}

.category-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.category-actions {
    display: flex;
    gap: 3px;
}

.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 8px;
    background-color: var(--background-color);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.category-item:hover {
    background-color: var(--input-bg);
}

.delete-button {
    background-color: #ffebee;
    color: #d32f2f;
    border-color: #ffcdd2;
}

.delete-button:hover:not(:disabled) {
    background-color: #d32f2f;
    color: white;
    border-color: #d32f2f;
}

.category-count {
    background-color: var(--primary-color);
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    margin-left: 8px;
}
/* Optimizations to reduce vertical scrolling */
.container {
    width: 98%;
    margin: 0 auto;
    padding: 8px; /* Reduced from 10px */
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* More compact header */
header {
    margin-bottom: 10px; /* Reduced from 15px */
    padding-bottom: 10px; /* Reduced from 15px */
}

/* More compact tab container */
.tab-container {
    margin-bottom: 15px; /* Reduced from 25px */
}

/* Reduce tab padding */
.tab-container .tab {
    padding: 10px 16px; /* Reduced from 12px 20px */
}

/* Make settings more compact */
.settings-container {
    min-height: unset; /* Remove fixed min-height */
    height: calc(100vh - 150px); /* Control height to prevent scrolling */
    overflow: hidden;
}

.settings-content {
    padding-right: 5px; /* Add padding for scrollbar */
    overflow-y: auto; /* Allow scrolling in content area only */
}

/* More compact settings cards */
.settings-card {
    padding: 15px; /* Reduced from 20px */
    margin-bottom: 15px; /* Reduced from 25px */
}

/* More compact import/export grid */
.import-export-grid {
    gap: 10px; /* Reduced from 15px */
    margin-top: 10px; /* Reduced from 15px */
}

.import-export-card {
    padding: 12px; /* Reduced from 15px */
}

.import-export-card h4 {
    padding-bottom: 6px; /* Reduced from 10px */
    margin-bottom: 6px; /* Reduced from 10px */
}

/* More compact storage option */
.storage-option {
    padding: 8px; /* Reduced from 12px */
}

/* More compact template cards */
.template-card, .statement-card {
    padding: 12px; /* Reduced from 16px */
    margin-bottom: 12px; /* Reduced from 16px */
}

/* More compact template fields list */
.template-fields-list {
    padding: 8px; /* Reduced from 10px */
}

.template-field-item {
    padding: 4px 6px; /* Reduced from 6px 8px */
    margin-bottom: 4px; /* Reduced from 6px */
}

/* More compact category items in settings */
.category-item {
    padding: 6px 10px; /* Reduced from 8px 12px */
    margin-bottom: 6px; /* Reduced from 8px */
}

/* Adjust form groups to be more compact */
.form-group {
    margin-bottom: 8px; /* Reduced from 12px */
}

/* Reduce template form padding */
.template-form-container {
    padding: 12px; /* Reduced from 15px */
}

/* Fix footer spacing */
.settings-content > div[style] {
    margin-top: 15px !important; 
    padding-top: 10px !important;
}

/* Theme Selection Styles */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.theme-card {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    text-align: center;
}

.theme-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover);
}

.theme-card.active {
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.3);
}

.theme-preview {
    width: 100%;
    height: 80px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin-bottom: 8px;
}

.preview-header {
    height: 20px;
    width: 100%;
}

.preview-content {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-preview .preview-button {
    width: 40px;
    height: 20px;
    border-radius: 3px;
}

.theme-name {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Theme preview variations */
.dark-preview {
    background-color: #000000;
}
.dark-preview .preview-header {
    background-color: #6366f1;
}
.dark-preview .preview-button {
    background-color: #6366f1;
}

.light-preview {
    background-color: #fff;
}
.light-preview .preview-header {
    background-color: #4a6fa5;
}
.light-preview .preview-button {
    background-color: #4a6fa5;
}

.blue-preview {
    background-color: #0a1929;
}
.blue-preview .preview-header {
    background-color: #2196f3;
}
.blue-preview .preview-button {
    background-color: #2196f3;
}

.forest-preview {
    background-color: #1b2a1b;
}
.forest-preview .preview-header {
    background-color: #388e3c;
}
.forest-preview .preview-button {
    background-color: #388e3c;
}

.sepia-preview {
    background-color: #f8f0e3;
}
.sepia-preview .preview-header {
    background-color: #a86832;
}
.sepia-preview .preview-button {
    background-color: #a86832;
}

.purple-preview {
    background-color: #16081d;
}
.purple-preview .preview-header {
    background-color: #9c27b0;
}
.purple-preview .preview-button {
    background-color: #9c27b0;
}

.red-preview {
    background-color: #1f0a0a;
}
.red-preview .preview-header {
    background-color: #d53c24;
}
.red-preview .preview-button {
    background-color: #d53c24;
}

/* Color Picker Styles */
.color-pickers-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.color-picker-group {
    margin-bottom: 10px;
}

.color-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 5px;
}

.color-input-group input[type="color"] {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: transparent;
}

.color-input-group input[type="text"] {
    flex: 1;
    max-width: 100px;
    padding: 8px;
    height: 36px;
}

.live-preview {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

#color-preview {
    margin-top: 10px;
}

.preview-card {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    max-width: 400px;
    overflow: hidden;
}

.preview-card-header {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 15px;
    font-weight: 500;
}

.preview-card-body {
    padding: 15px;
    color: var(--text-color);
}

.preview-input {
    width: 100%;
    padding: 8px;
    margin: 10px 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--input-bg);
    color: var(--text-color);
}

.preview-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 8px 16px;
    cursor: pointer;
}

/* Font Settings Styles */
.font-settings-container {
    margin-top: 15px;
}

.font-size-control {
    display: flex;
    align-items: center;
    max-width: 150px;
}

.font-size-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-weight: bold;
    cursor: pointer;
    padding: 0;
}

#font-size {
    flex: 1;
    text-align: center;
    height: 30px;
    margin: 0 5px;
    font-weight: 500;
}

.checkbox-group {
    margin-top: 5px;
}

.checkbox-label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
}

.checkbox-label input {
    margin-right: 8px;
    vertical-align: middle;
}

.font-preview {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

#font-preview-container {
    margin-top: 10px;
    padding: 15px;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-color);
}

.font-preview-text {
    margin-bottom: 10px;
    font-size: 1rem;
}

.font-preview-small {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-bottom: 10px;
}

.font-preview-heading {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0;
}

/* UI Settings Styles */
.ui-settings-container {
    margin-top: 15px;
}

.toggle-switch-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-weight: normal;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--primary-color);
}

input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

.density-slider-container {
    max-width: 300px;
}

.density-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 0.8rem;
}

#ui-density {
    width: 100%;
}
/* Fix for bookmark category headers */
.category-header {
    background-image: linear-gradient(to right, var(--secondary-color), transparent);
    color: var(--text-color);
}

/* Fix for category items and backgrounds */
.category-item, 
.category-bookmarks, 
#bookmarks-list, 
.bookmark-category {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Fix for preview card in Appearance settings */
.preview-card {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
}

.preview-card-body {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Fix live preview container */
#color-preview {
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 5px;
}

/* Ensure inputs and fields properly follow theme */
.preview-input, 
input[type="text"], 
textarea, 
select {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

/* Fix for category sections */
.bookmark-category[data-category],
.category-header h3,
.category-bookmarks {
    color: var(--text-color);
    background-color: var(--background-color);
}

/* Fix for theme card previews to ensure better visibility */
.theme-card {
    border: 2px solid var(--border-color);
}

.theme-card:hover, .theme-card.active {
    border-color: var(--primary-color);
}

/* Improve visibility of toggle controls in dark themes */
.toggle-switch-label {
    color: var(--text-color);
}

/* Fix for font preview */
#font-preview-container,
.font-preview-text,
.font-preview-small,
.font-preview-heading {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Fix for bookmark URL background */
.bookmark-url {
    background-color: var(--input-bg);
    color: var(--text-color);
}

/* Ensure proper contrast for all themes */
[data-theme="dark"] .preview-card-body,
[data-theme="blue"] .preview-card-body,
[data-theme="forest"] .preview-card-body,
[data-theme="purple"] .preview-card-body,
[data-theme="red"] .preview-card-body {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Make sure checkbox labels have proper contrast */
.checkbox-label {
    color: var(--text-color);
}

/* Fix specific issues shown in screenshots */
.category-bookmarks > .bookmark-card {
    background-color: var(--input-bg);
    color: var(--text-color);
}

/* Fix font size control elements */
.font-size-control {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

#font-size {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

/* Modify appearance theme cards to be more visible in dark mode */
[data-theme="dark"] .theme-card,
[data-theme="blue"] .theme-card,
[data-theme="forest"] .theme-card,
[data-theme="purple"] .theme-card,
[data-theme="red"] .theme-card {
    background-color: var(--input-bg);
    border: 2px solid var(--border-color);
}

[data-theme="dark"] .theme-card.active,
[data-theme="blue"] .theme-card.active,
[data-theme="forest"] .theme-card.active,
[data-theme="purple"] .theme-card.active,
[data-theme="red"] .theme-card.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--background-color), 0 0 0 3px var(--primary-color);
}

/* Improve color preview container visibility */
.live-preview {
    background-color: var(--background-color);
    padding: 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

/* Make sure the buttons in the preview stand out properly */
.preview-button {
    background-color: var(--primary-color);
    color: white;
}

/* Ensure custom color pickers are properly visible */
.color-picker-group label {
    color: var(--text-color);
}

/* Adjust specific elements that were showing white in your screenshots */
.bookmark-card h3,
.bookmark-title,
.bookmark-url a {
    color: var(--text-color);
}

.statement-content {
    background-color: var(--input-bg);
}

/* Ensure theme previews have sufficient contrast */
.theme-name {
    color: var(--text-color);
    background-color: var(--input-bg);
    padding: 3px;
    border-radius: var(--border-radius-sm);
    margin-top: 5px;
}
/* Fix for Collapse All and Expand All buttons */
[data-theme="dark"] button.secondary,
[data-theme="blue"] button.secondary,
[data-theme="forest"] button.secondary,
[data-theme="purple"] button.secondary,
[data-theme="red"] button.secondary {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] button.secondary:hover,
[data-theme="blue"] button.secondary:hover,
[data-theme="forest"] button.secondary:hover,
[data-theme="purple"] button.secondary:hover,
[data-theme="red"] button.secondary:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Fix for the Reset button */
[data-theme="dark"] button.reset,
[data-theme="blue"] button.reset,
[data-theme="forest"] button.reset,
[data-theme="purple"] button.reset,
[data-theme="red"] button.reset {
    background-color: var(--input-bg);
    color: var(--text-color);
}

/* Fix for collapsible/expandable bookmark categories */
[data-theme="dark"] .category-header,
[data-theme="blue"] .category-header,
[data-theme="forest"] .category-header,
[data-theme="purple"] .category-header,
[data-theme="red"] .category-header {
    background-color: var(--input-bg);
    background-image: none;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .category-header:hover,
[data-theme="blue"] .category-header:hover,
[data-theme="forest"] .category-header:hover,
[data-theme="purple"] .category-header:hover,
[data-theme="red"] .category-header:hover {
    background-color: var(--secondary-color);
}

/* Fix for sidebar navigation hover states */
[data-theme="dark"] .template-item:hover,
[data-theme="dark"] .settings-nav-item:hover,
[data-theme="blue"] .template-item:hover,
[data-theme="blue"] .settings-nav-item:hover,
[data-theme="forest"] .template-item:hover,
[data-theme="forest"] .settings-nav-item:hover,
[data-theme="purple"] .template-item:hover,
[data-theme="purple"] .settings-nav-item:hover,
[data-theme="red"] .template-item:hover,
[data-theme="red"] .settings-nav-item:hover {
    background-color: var(--input-bg);
    color: var(--text-color);
}

/* Fix for category tabs */
[data-theme="dark"] .category-tab,
[data-theme="blue"] .category-tab,
[data-theme="forest"] .category-tab,
[data-theme="purple"] .category-tab,
[data-theme="red"] .category-tab {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .category-tab.active,
[data-theme="blue"] .category-tab.active,
[data-theme="forest"] .category-tab.active,
[data-theme="purple"] .category-tab.active,
[data-theme="red"] .category-tab.active {
    background-color: var(--primary-color);
    color: white;
}

/* Improve contrast for the expand/collapse section buttons */
[data-theme="dark"] .category-header span,
[data-theme="blue"] .category-header span,
[data-theme="forest"] .category-header span,
[data-theme="purple"] .category-header span,
[data-theme="red"] .category-header span {
    color: var(--text-color);
    background-color: var(--input-bg);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

/* Fix colors for Expand All and Collapse All buttons specifically */
#expand-all-btn, #collapse-all-btn {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

#expand-all-btn:hover, #collapse-all-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Improve color for other secondary buttons */
.bookmark-actions button.secondary,
.statement-card-header button.secondary, 
.template-card-header button.secondary {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.bookmark-actions button.secondary:hover,
.statement-card-header button.secondary:hover, 
.template-card-header button.secondary:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Additional fixes for form buttons */
.button-group button.secondary {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.button-group button.secondary:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Fix for category buttons in settings */
.category-button {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.category-button:hover:not(:disabled) {
    background-color: var(--primary-color);
    color: white;
}

/* Ensure consistent styling in appearance settings */
#resetCustomColors, #resetFontSettings, #resetUISettings {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

#resetCustomColors:hover, #resetFontSettings:hover, #resetUISettings:hover {
    background-color: var(--primary-color);
    color: white;
}
.shortrate-container {
    display: flex;
    gap: 20px;
    height: calc(100vh - 150px);
    margin-bottom: 20px;
}

.shortrate-sidebar {
    width: var(--sidebar-width);
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    padding: 15px;
    overflow-y: auto;
    box-shadow: var(--card-shadow);
}

.shortrate-sidebar h3 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.province-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.province-item {
    padding: 12px;
    margin: 6px 0;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-speed) ease;
    border-left: 3px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.province-item:hover {
    background-color: var(--secondary-color);
    transform: translateX(2px);
}

.province-item.active {
    background-image: var(--primary-gradient);
    color: white;
    border-left: 3px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.province-actions {
    display: flex;
    gap: 5px;
}

.province-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 14px;
    color: var(--text-color);
    transition: all var(--transition-speed) ease;
}

.province-action-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

.shortrate-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.calculator-container, .rate-table-container {
    flex: 1;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    padding: 20px;
    overflow-y: auto;
    box-shadow: var(--card-shadow);
}

.calculator-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.no-province-selected {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-color);
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    border: 1px dashed var(--border-color);
}

.calculation-result {
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-top: 20px;
    border: 1px solid var(--border-color);
}

.result-grid {
    display: grid;
    gap: 10px;
}

.result-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.result-row:last-child {
    border-bottom: none;
}

.result-label {
    font-weight: 500;
}

.result-value {
    text-align: right;
    font-weight: 600;
}

.rate-table-wrapper {
    margin-top: 15px;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    padding: 10px;
    overflow-x: auto;
}

.rate-table {
    width: 100%;
    border-collapse: collapse;
}

.rate-table th, .rate-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.rate-table th {
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-weight: 600;
}

.rate-table tbody tr:hover {
    background-color: var(--input-bg);
}

.rate-table-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.rate-row-actions {
    display: flex;
    gap: 5px;
}

.rate-action-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 14px;
    color: var(--text-color);
}

.rate-action-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

.delete-btn {
    background-color: #ffebee;
    color: #d32f2f;
}

.delete-btn:hover {
    background-color: #d32f2f;
    color: white;
}

.helper-text {
    font-size: 0.9rem;
    color: var(--text-color);
    opacity: 0.8;
    margin-top: 5px;
}

.default-rate-options {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* Ensure proper color treatment in dark mode */
[data-theme="dark"] .calculation-result,
[data-theme="dark"] .rate-table-wrapper,
[data-theme="dark"] .no-province-selected,
[data-theme="blue"] .calculation-result,
[data-theme="blue"] .rate-table-wrapper,
[data-theme="blue"] .no-province-selected,
[data-theme="forest"] .calculation-result,
[data-theme="forest"] .rate-table-wrapper,
[data-theme="forest"] .no-province-selected,
[data-theme="purple"] .calculation-result,
[data-theme="purple"] .rate-table-wrapper,
[data-theme="purple"] .no-province-selected,
[data-theme="red"] .calculation-result,
[data-theme="red"] .rate-table-wrapper,
[data-theme="red"] .no-province-selected {
    background-color: var(--background-color);
    color: var(--text-color);
}
.province-form-container {
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    padding: 20px;
    overflow-y: auto;
    box-shadow: var(--card-shadow);
}
    .statements-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
    }
    
    .statements-actions {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }
    
    #statements-container {
        height: calc(100vh - 200px);
        overflow-y: auto;
    }
    
    .statement-card {
        background-color: var(--input-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 16px;
        box-shadow: var(--card-shadow);
        transition: all var(--transition-speed) ease;
        overflow: hidden;
    }
    
    .statement-card-header {
        padding: 12px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        background-color: var(--secondary-color);
        border-bottom: 1px solid var(--border-color);
    }
    
    .statement-title {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 500;
    }
    
    .statement-content-wrapper {
        padding: 0 16px;
        max-height: 1000px;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .statement-content {
        background-color: var(--background-color);
        border: none;
        padding: 15px 0;
        margin: 0;
        white-space: pre-wrap;
    }
    
    .statement-actions {
        display: flex;
        justify-content: space-between;
        padding: 0 16px 16px;
    }
    
    .toggle-icon {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }
    
    /* Formatting toolbar styling */
    .formatting-toolbar {
        display: none;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-color);
    }
    
    .format-button {
        background: none;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 4px 8px;
        margin-right: 5px;
        cursor: pointer;
        font-size: 14px;
    }
    
    .format-button:hover {
        background-color: var(--secondary-color);
    }
    
    .format-button.active {
        background-color: var(--primary-color);
        color: white;
    }
    
    .settings-icon {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 16px;
        color: var(--text-color);
        opacity: 0.7;
        transition: opacity 0.2s ease;
    }
    
    .settings-icon:hover {
        opacity: 1;
    }
    
    /* Make statement content editable when formatting is active */
    .statement-content[contenteditable="true"] {
        border: 1px dashed var(--border-color);
        padding: 14px;
        min-height: 100px;
    }
    
    /* Collapsed state */
    .collapsed .statement-content-wrapper {
        max-height: 0;
    }
    
    .collapsed .statement-actions {
        display: none;
    }
/* More minimal statement cards with reduced borders */
.statement-card {
    background-color: rgba(40, 44, 52, 0.4); /* Dark semi-transparent background */
    border: none; /* Remove border completely */
    border-radius: 4px; /* Smaller radius */
    margin-bottom: 8px; /* Reduced spacing between cards */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Very subtle shadow */
    overflow: hidden;
}

/* Header styling for statement cards */
.statement-card-header {
    padding: 8px 12px; /* Reduced padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: rgba(60, 64, 75, 0.6); /* Slightly lighter than card background */
    border-bottom: none; /* Remove border */
    min-height: 40px; /* Fixed height for consistency */
}

/* Statement title styling */
.statement-title {
    margin: 0;
    font-size: 1rem; /* Slightly smaller font */
    font-weight: 500;
    color: #f0f0f0; /* Light text */
}

/* Aligned gear icon and toggle controls */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between icons */
}

/* Make gear icon more subtle and aligned */
.settings-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: #a0a0a0; /* Lighter gray color */
    padding: 4px;
    font-size: 14px; /* Smaller icon */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    line-height: 1;
}

.settings-icon:hover {
    opacity: 1;
    color: #f0f0f0;
}

/* Statement content with minimal styling */
.statement-content-wrapper {
    border-top: none; /* Remove top border */
}

.statement-content {
    padding: 12px 16px; /* Comfortable padding */
    margin: 0;
    color: #e0e0e0; /* Light gray text */
    font-size: 0.95rem; /* Slightly smaller text */
    line-height: 1.5;
}

/* Copy button styling */
.statement-actions {
    padding: 0 16px 12px; /* Reduced bottom padding */
}

.statement-actions button.copy {
    font-size: 0.85rem; /* Smaller text on button */
    padding: 6px 12px; /* Smaller button */
    background-color: rgba(76, 175, 80, 0.3); /* More subtle green */
    border: 1px solid rgba(76, 175, 80, 0.4);
    transition: background-color 0.2s ease;
}

.statement-actions button.copy:hover {
    background-color: rgba(76, 175, 80, 0.5); /* Slightly brighter on hover */
}

/* Expand/Collapse buttons at the top */
#expand-all-statements-btn, #collapse-all-statements-btn {
    font-size: 0.85rem; /* Smaller text */
    padding: 4px 10px; /* Smaller buttons */
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #a0a0a0;
}

#expand-all-statements-btn:hover, #collapse-all-statements-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f0f0f0;
}

/* Statements header */
.statements-header {
    margin-bottom: 12px;
}

.statements-actions h3 {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0;
}

/* Improve the formatting toolbar appearance */
.formatting-toolbar {
    padding: 6px 16px;
    background-color: rgba(50, 54, 65, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.format-button {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #d0d0d0;
    border-radius: 3px;
    padding: 3px 7px;
    margin-right: 4px;
    font-size: 12px;
}

.format-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f0f0f0;
}
.clipboard-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s ease, color 0.2s ease;
    line-height: 1;
    color: #4caf50; /* Green color for the clipboard icon */
}

.clipboard-icon:hover {
    opacity: 1;
    color: #5fd665; /* Brighter green on hover */
}

/* Hide the original copy button */
.statement-actions {
    display: none !important;
}
/* Target the bookmark category headers */
.bookmark-category > .category-header,
.category-header {
    background-color: transparent !important; /* Remove the background completely */
    background-image: none !important; /* Remove any gradient backgrounds */
    box-shadow: none !important; /* Remove any shadows */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Add a subtle separator line instead */
    padding: 8px 12px !important; /* Keep padding reasonable */
}

/* Style the category names */
.category-header h3 {
    margin: 0 !important;
    color: #e0e0e0 !important; /* Light text color */
    font-size: 1rem !important;
    font-weight: 500 !important;
}

/* Remove any hover effects that might add backgrounds */
.category-header:hover {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important; /* Prevent any transform animations */
}

/* If there's a specific element with the dark background, this should target it directly */
[data-category] {
    background-color: transparent !important;
}

/* Target the specific elements shown in your screenshot */
.bookmark-category > div:first-child,
div[class*="category"] > div:first-child {
    background-color: transparent !important;
    background-image: none !important;
}
/* Adjusting the statement card headers */
.statement-card-header {
    background-color: rgba(0, 0, 0, 0.15) !important; /* Subtle background that works in all themes */
    border-bottom: 1px solid var(--border-color) !important;
}

/* Make the statement title use the theme's text color */
.statement-title {
    color: var(--text-color) !important; /* Use the theme's text color */
    font-weight: 600 !important; /* Make it slightly bolder for better visibility */
}

/* Adjust the gear and clipboard icons to match theme */
.settings-icon, .clipboard-icon, .toggle-icon {
    color: var(--text-color) !important; 
    opacity: 0.7 !important;
}

.settings-icon:hover, .clipboard-icon:hover {
    opacity: 1 !important;
}

/* Ensure content background is appropriate for the theme */
.statement-content {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

/* Fix for specific themes */
[data-theme="light"] .statement-card-header,
[data-theme="sepia"] .statement-card-header {
    background-color: rgba(0, 0, 0, 0.08) !important; /* Lighter background for light themes */
}

[data-theme="light"] .statement-title,
[data-theme="sepia"] .statement-title {
    color: #333333 !important; /* Darker text for light themes */
}

/* Also fix category headers in the bookmarks tab */
.category-header {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--text-color) !important;
}

.category-header h3 {
    color: var(--text-color) !important;
}

/* General fix for all themes */
.bookmark-category[data-category],
.category-header h3,
.category-bookmarks,
[data-category] * {
    color: var(--text-color) !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Authentication UI Styles */
#user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background-color: var(--input-bg);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

.user-info-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-color);
}

.user-email {
    font-size: 0.75rem;
    color: var(--text-color);
    opacity: 0.7;
}

#auth-button {
    padding: 8px 16px;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Profile Dropdown Styles */
.profile-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.profile-trigger {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-image,
.profile-image-header {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    transition: border-color 0.2s ease;
}

.profile-trigger:hover .profile-image {
    border-color: var(--primary-color);
}

.profile-fallback,
.profile-fallback-header {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    border: 2px solid var(--border-color);
}

.profile-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 280px;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    max-height: 0px;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 0;
    z-index: 1000;
}

.profile-menu.open-menu {
    max-height: 400px;
    opacity: 1;
}

.profile-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: var(--input-bg);
}

.profile-image-header {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
}

.profile-fallback-header {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    border: 2px solid var(--border-color);
}

.profile-menu-user-info {
    flex: 1;
    min-width: 0;
}

.profile-menu-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-menu-email {
    font-size: 0.85rem;
    color: var(--text-color);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-menu-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 8px 0;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color 0.15s ease;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.profile-menu-item:hover {
    background-color: var(--input-bg);
    border-left-color: var(--primary-color);
}

.profile-menu-icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.profile-menu-text {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
}

.profile-menu-chevron {
    font-size: 1.2rem;
    color: var(--text-color);
    opacity: 0.5;
    flex-shrink: 0;
}

.profile-menu-item-logout {
    color: #e74c3c;
}

.profile-menu-item-logout:hover {
    background-color: rgba(231, 76, 60, 0.1);
    border-left-color: #e74c3c;
}

.profile-menu-item-logout .profile-menu-text {
    color: #e74c3c;
}

/* Responsive adjustments for auth UI */
@media (max-width: 768px) {
    header {
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    
    header h1 {
        font-size: 1.3rem;
    }
    
    #user-info {
        order: 3;
        width: 100%;
        margin-top: 10px;
    }
    
    #auth-button {
        order: 2;
    }
    
    .profile-menu {
        right: 0;
        left: auto;
        min-width: 260px;
    }
    
    /* Ensure proper spacing and prevent overlap */
    .container {
        padding: 10px;
    }
    
    /* Ensure hamburger menu is visible in header on mobile */
    header .mobile-menu-toggle {
        display: flex;
    }
    
    /* Adjust header spacing on mobile */
    header {
        margin-bottom: 15px;
    }
}

/* Privacy & Terms Modal */
.privacy-terms-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.privacy-terms-modal-content {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.privacy-terms-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--input-bg);
}

.privacy-terms-modal-header h2 {
    margin: 0;
    color: var(--text-color);
    font-size: 1.5rem;
}

.privacy-terms-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-color);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease;
}

.privacy-terms-modal-close:hover {
    background-color: var(--border-color);
}

.privacy-terms-modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--input-bg);
}

.privacy-terms-tab {
    flex: 1;
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.privacy-terms-tab:hover {
    background-color: var(--background-color);
}

.privacy-terms-tab.active {
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--background-color);
}

.privacy-terms-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.privacy-terms-content {
    display: none;
}

.privacy-terms-content.active {
    display: block;
}

.legal-modal-content {
    line-height: 1.8;
    color: var(--text-color);
}

.legal-modal-content .last-updated {
    font-style: italic;
    opacity: 0.7;
    margin-bottom: 24px;
}

.legal-modal-content h2 {
    color: var(--text-color);
    margin-top: 32px;
    margin-bottom: 16px;
    font-size: 1.4rem;
}

.legal-modal-content h3 {
    color: var(--text-color);
    margin-top: 24px;
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.legal-modal-content p {
    margin-bottom: 16px;
}

.legal-modal-content ul {
    margin-bottom: 16px;
    padding-left: 30px;
}

.legal-modal-content li {
    margin-bottom: 8px;
}

.legal-modal-content strong {
    color: var(--text-color);
    font-weight: 600;
}

.legal-modal-content a {
    color: var(--primary-color);
    text-decoration: none;
}

.legal-modal-content a:hover {
    text-decoration: underline;
}

.mobile-collapsible-icon {
    letter-spacing: -2px;
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

@media (max-width: 768px) {
    /* Put hamburger on the left */
    .mobile-menu-toggle.mobile-menu-active {
        left: 12px;
        right: auto;
    }

    header {
        gap: 10px;
    }

    header h1 {
        flex: 1;
        min-width: 0;
        font-size: 1.4rem;
    }

    /* Fix clipped mobile scrolling caused by fixed-height optimizations */
    .container {
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
        padding: 8px;
    }

    .tab-content {
        overflow: visible !important;
    }

    .notes-container,
    .settings-container,
    .shortrate-container {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #statements-container {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .settings-content {
        overflow: visible !important;
        max-height: none !important;
        padding-right: 0 !important;
    }

    /* Mobile dropdown sections to save vertical space */
    .template-sidebar h3,
    .settings-sidebar h3,
    .shortrate-sidebar h3 {
        display: none;
    }

    .mobile-collapsible-toggle {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 12px 14px;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-sm);
        background: var(--secondary-color);
        color: var(--text-color);
        font-weight: 600;
        margin-bottom: 8px;
        cursor: pointer;
    }

    .mobile-collapsible-toggle[aria-expanded="true"] .mobile-collapsible-icon {
        transform: rotate(180deg);
    }

    .mobile-collapsible-panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
        display: block;
    }

    .mobile-collapsible-panel.mobile-open {
        max-height: 70vh;
        overflow-y: auto;
    }

    .template-sidebar,
    .settings-sidebar,
    .shortrate-sidebar {
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Auth gate (requires sign-in to use app) */
body.auth-locked {
    overflow: hidden;
}

body.auth-locked .container {
    pointer-events: none;
    user-select: none;
    filter: blur(3px);
    opacity: 0.25;
}

/* When logged out, don't show tabs/content at all */
body.auth-locked .tab-container,
body.auth-locked #mobile-tab-menu,
body.auth-locked .tab-content {
    display: none !important;
}

.auth-gate {
    position: fixed;
    inset: 0;
    /* IMPORTANT: keep below Clerk's modal so we don't block it */
    z-index: 5000;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    /* Allow Clerk modal to be clickable even when gate is shown */
    pointer-events: none;
}