:root {
           --primary: #A0485E;
           --primary-light: #c05870;
           --accent: #ff6b35;
           --bg: #fafaf8;
           --bg-secondary: #f0f0ed;
           --text: #1a1a1a;
           --text-secondary: #5a5a5a;
           --border: #d4d4d0;
           --shadow: rgba(160, 72, 94, 0.08);
           --error: #dc2626;
           --success: #059669;
       }

       [data-theme="dark"] {
           --primary: #c05870;
           --primary-light: #d07080;
           --accent: #ff8c61;
           --bg: #1a1a1a;
           --bg-secondary: #2a2a2a;
           --text: #e5e5e5;
           --text-secondary: #a0a0a0;
           --border: #3a3a3a;
           --shadow: rgba(0, 0, 0, 0.3);
       }

       /* Dark mode specific overrides */
       [data-theme="dark"] .sidebar-footer {
           background: var(--bg-secondary);
       }

       [data-theme="dark"] .sidebar-footer-header {
           background: var(--bg-secondary);
           color: var(--text);
       }

       [data-theme="dark"] .sidebar-footer-header:hover {
           background: var(--bg);
       }

       [data-theme="dark"] .menu-item {
           color: var(--text);
       }

       [data-theme="dark"] .menu-item:hover {
           background: var(--bg);
       }

       [data-theme="dark"] .month-item {
           background: var(--bg-secondary);
           color: var(--text);
       }

       [data-theme="dark"] .month-item:hover {
           background: var(--bg);
       }

       [data-theme="dark"] .month-item.active {
           background: var(--bg);
       }

       [data-theme="dark"] .route-card {
           background: var(--bg-secondary);
           color: var(--text);
       }

       [data-theme="dark"] .route-card:hover {
           background: var(--bg);
       }

       [data-theme="dark"] .modal-content {
           background: var(--bg-secondary);
           color: var(--text);
       }

       [data-theme="dark"] .modal-header {
           border-bottom-color: var(--border);
       }

       [data-theme="dark"] .modal-footer {
           border-top-color: var(--border);
       }

       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       body {
           font-family: 'Libre Franklin', sans-serif;
           background: linear-gradient(135deg, var(--bg) 0%, var(--bg-secondary) 100%);
           color: var(--text);
           overflow-x: hidden;
           transition: background-color 0.3s ease, color 0.3s ease;
       }

       .app-container {
           display: flex;
           height: 100vh;
           position: relative;
       }

       /* Sidebar */
       .sidebar {
           width: 320px;
           background: linear-gradient(180deg, var(--bg) 0%, var(--bg-secondary) 100%);
           border-right: 1px solid var(--border);
           display: flex;
           flex-direction: column;
           box-shadow: 2px 0 12px var(--shadow);
           z-index: 100;
           transition: transform 0.3s ease, background 0.3s ease;
       }

       .sidebar-header {
           padding: 24px 20px;
           border-bottom: 2px solid var(--primary);
           background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
           color: white;
       }

       .app-title {
           font-size: 14px;
           font-weight: 300;
           letter-spacing: 2px;
           text-transform: uppercase;
           opacity: 0.9;
           margin-bottom: 8px;
       }

       .profile-selector {
           display: flex;
           align-items: center;
           gap: 12px;
           margin-top: 12px;
           padding: 12px;
           background: rgba(255, 255, 255, 0.1);
           border-radius: 8px;
           cursor: pointer;
           transition: background 0.2s;
       }

       .profile-selector:hover {
           background: rgba(255, 255, 255, 0.15);
       }

       .profile-icon {
           width: 40px;
           height: 40px;
           background: var(--accent);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-weight: 600;
           font-size: 18px;
       }

       .profile-name {
           flex: 1;
           font-weight: 500;
           font-size: 15px;
       }

       .create-profile-btn {
           padding: 12px;
           background: rgba(255, 255, 255, 0.15);
           border: 2px dashed rgba(255, 255, 255, 0.4);
           border-radius: 8px;
           color: white;
           font-weight: 500;
           cursor: pointer;
           transition: all 0.2s;
           text-align: center;
           margin-top: 12px;
       }

       .create-profile-btn:hover {
           background: rgba(255, 255, 255, 0.2);
           border-color: rgba(255, 255, 255, 0.6);
       }

       .sidebar-content {
           flex: 1;
           overflow-y: auto;
           padding: 16px;
       }

       .sidebar-footer {
           padding: 0;
           border-top: 1px solid var(--border);
           background: var(--bg);
       }

       .sidebar-footer-header {
           padding: 16px;
           cursor: pointer;
           display: flex;
           justify-content: space-between;
           align-items: center;
           font-weight: 600;
           background: var(--bg);
           transition: background 0.2s;
       }

       .sidebar-footer-header:hover {
           background: var(--bg-secondary);
       }

       .footer-toggle-icon {
           transition: transform 0.3s ease;
           font-size: 12px;
       }

       .sidebar-footer.collapsed .footer-toggle-icon {
           transform: rotate(-90deg);
       }

       .sidebar-footer-content {
           max-height: 500px;
           overflow: hidden;
           transition: max-height 0.3s ease, opacity 0.3s ease;
           opacity: 1;
           padding: 0 16px 16px 16px;
       }

       .sidebar-footer.collapsed .sidebar-footer-content {
           max-height: 0;
           opacity: 0;
           padding: 0 16px;
       }

       .menu-item {
           padding: 12px 16px;
           margin-bottom: 8px;
           border-radius: 8px;
           cursor: pointer;
           display: flex;
           align-items: center;
           gap: 12px;
           transition: all 0.2s;
           font-weight: 500;
           font-size: 14px;
       }

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

       .menu-item.active {
           background: var(--primary);
           color: white;
       }

       .year-item {
           background: white;
           border: 1px solid var(--border);
           border-radius: 8px;
           padding: 12px 16px;
           margin-bottom: 12px;
           cursor: pointer;
           transition: all 0.2s;
           position: relative;
       }

       .year-item:hover {
           border-color: var(--primary);
           box-shadow: 0 2px 8px var(--shadow);
       }

       .year-item.active {
           border-color: var(--primary);
           background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
           color: white;
       }

       .year-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           font-weight: 600;
           font-size: 16px;
       }

       .month-list {
           margin-top: 12px;
           padding-left: 8px;
           max-height: 0;
           overflow: hidden;
           transition: max-height 0.3s ease;
       }

       .year-item.active .month-list {
           max-height: 800px;
       }

       .month-item {
           padding: 8px 12px;
           margin: 4px 0;
           background: rgba(255, 255, 255, 0.9);
           border-radius: 6px;
           cursor: pointer;
           transition: all 0.2s;
           font-size: 14px;
           font-weight: 500;
           color: var(--text);
           display: flex;
           justify-content: space-between;
           align-items: center;
       }

       .month-item:hover {
           background: white;
           transform: translateX(4px);
       }

       .month-item.active {
           background: white;
           box-shadow: 0 2px 4px var(--shadow);
       }

       .month-actions {
           display: flex;
           gap: 4px;
       }

       /* Main Content */
       .main-content {
           flex: 1;
           overflow: hidden;
       }

       .content-header {
           margin-bottom: 32px;
           padding-bottom: 20px;
           border-bottom: 2px solid var(--border);
       }

       .content-title {
           font-size: 32px;
           font-weight: 700;
           color: var(--primary);
           margin-bottom: 8px;
       }

       .content-subtitle {
           color: var(--text-secondary);
           font-size: 16px;
       }

       .fuel-price-display {
           color: var(--primary);
           font-weight: 600;
           font-family: 'IBM Plex Mono', monospace;
           margin-top: 4px;
       }

       /* Buttons */
       .btn {
           padding: 12px 24px;
           border: none;
           border-radius: 8px;
           font-weight: 600;
           font-size: 14px;
           cursor: pointer;
           transition: all 0.2s;
           font-family: 'Libre Franklin', sans-serif;
       }

       .btn-primary {
           background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
           color: white;
       }

       .btn-primary:hover {
           background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
           transform: translateY(-2px);
           box-shadow: 0 4px 12px var(--shadow);
       }

       .btn-secondary {
           background: var(--bg-secondary);
           color: var(--text);
           border: 1px solid var(--border);
       }

       .btn-secondary:hover {
           background: white;
       }

       .btn-danger {
           background: var(--error);
           color: white;
       }

       .btn-danger:hover {
           background: #b91c1c;
       }

       .btn-success {
           background: var(--success);
           color: white;
       }

       .btn-small {
           padding: 6px 12px;
           font-size: 12px;
       }

       /* Forms */
       .form-group {
           margin-bottom: 20px;
       }

       .form-label {
           display: block;
           margin-bottom: 8px;
           font-weight: 600;
           font-size: 14px;
           color: var(--text-secondary);
           display: flex;
           align-items: center;
           gap: 8px;
       }

       .tooltip-icon {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           width: 18px;
           height: 18px;
           background: var(--primary);
           color: white;
           border-radius: 50%;
           font-size: 12px;
           font-weight: 600;
           cursor: help;
           position: relative;
       }

       .tooltip-icon:hover::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 100%;
           left: 50%;
           transform: translateX(-50%);
           margin-bottom: 8px;
           padding: 8px 12px;
           background: var(--text);
           color: white;
           border-radius: 6px;
           font-size: 12px;
           font-weight: 400;
           white-space: nowrap;
           z-index: 1000;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
           max-width: 250px;
           white-space: normal;
       }

       .form-input, .form-select {
           width: 100%;
           padding: 12px 16px;
           border: 1px solid var(--border);
           border-radius: 8px;
           font-family: 'Libre Franklin', sans-serif;
           font-size: 14px;
           transition: all 0.2s;
           background: white;
       }

       .form-input:disabled, .form-select:disabled {
           background: var(--bg-secondary);
           color: var(--text-secondary);
           cursor: not-allowed;
       }

       .form-input:focus, .form-select:focus {
           outline: none;
           border-color: var(--primary);
           box-shadow: 0 0 0 3px rgba(160, 72, 94, 0.1);
       }

       .form-input.mono {
           font-family: 'IBM Plex Mono', monospace;
       }

       .input-with-button {
           display: flex;
           gap: 8px;
           align-items: flex-start;
       }

       .input-with-button .form-input,
       .input-with-button .form-select {
           flex: 1;
       }

       .reset-btn {
           padding: 12px 16px;
           background: var(--bg-secondary);
           border: 1px solid var(--border);
           border-radius: 8px;
           cursor: pointer;
           transition: all 0.2s;
           font-size: 14px;
       }

       .reset-btn:hover {
           background: white;
       }

       /* Routes Table */
       .routes-container {
           background: white;
           border-radius: 12px;
           box-shadow: 0 2px 12px var(--shadow);
           padding: 24px;
           margin-bottom: 24px;
       }

       .route-card {
           background: white;
           border: 1px solid var(--border);
           border-radius: 12px;
           padding: 24px;
           margin-bottom: 16px;
           transition: all 0.2s;
       }

       .route-card:hover {
           box-shadow: 0 4px 16px var(--shadow);
       }

       .route-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-bottom: 20px;
           padding-bottom: 16px;
           border-bottom: 2px solid var(--bg-secondary);
       }

       .route-number {
           font-size: 20px;
           font-weight: 700;
           color: var(--primary);
       }

       .route-fields {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
           gap: 20px;
       }

       .calculation-field {
           background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg) 100%);
           padding: 16px;
           border-radius: 8px;
           border-left: 4px solid var(--accent);
       }

       .calculation-value {
           font-family: 'IBM Plex Mono', monospace;
           font-size: 20px;
           font-weight: 600;
           color: var(--primary);
           margin-top: 8px;
       }

       .totals-section {
           background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
           color: white;
           padding: 24px;
           border-radius: 12px;
           margin-top: 24px;
       }

       .totals-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
           gap: 20px;
           margin-top: 16px;
       }

       .total-item {
           text-align: center;
       }

       .total-label {
           font-size: 14px;
           opacity: 0.9;
           margin-bottom: 8px;
       }

       .total-value {
           font-family: 'IBM Plex Mono', monospace;
           font-size: 28px;
           font-weight: 700;
       }

       /* Modal */
       .modal {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: rgba(0, 0, 0, 0.5);
           backdrop-filter: blur(4px);
           z-index: 1000;
           align-items: center;
           justify-content: center;
           padding: 20px;
       }

       .modal.active {
           display: flex;
       }

       .modal-content {
           background: white;
           border-radius: 16px;
           max-width: 600px;
           width: 100%;
           max-height: 90vh;
           overflow-y: auto;
           box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
           animation: modalSlideIn 0.3s ease;
       }

       .modal-content.wide {
           max-width: 800px;
       }

       @keyframes modalSlideIn {
           from {
               opacity: 0;
               transform: translateY(-20px);
           }
           to {
               opacity: 1;
               transform: translateY(0);
           }
       }

       .modal-header {
           padding: 24px;
           border-bottom: 2px solid var(--border);
           display: flex;
           justify-content: space-between;
           align-items: center;
       }

       .modal-title {
           font-size: 24px;
           font-weight: 700;
           color: var(--primary);
       }

       .modal-close {
           background: none;
           border: none;
           font-size: 24px;
           cursor: pointer;
           color: var(--text-secondary);
           width: 32px;
           height: 32px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 50%;
           transition: all 0.2s;
       }

       .modal-close:hover {
           background: var(--bg-secondary);
           color: var(--text);
       }

       .modal-body {
           padding: 24px;
       }

       .modal-footer {
           padding: 24px;
           border-top: 1px solid var(--border);
           display: flex;
           gap: 12px;
           justify-content: flex-end;
       }

       /* Toggle Switch */
       .toggle-container {
           display: flex;
           align-items: center;
           gap: 12px;
       }

       .toggle-switch {
           position: relative;
           width: 50px;
           height: 26px;
           background: var(--border);
           border-radius: 13px;
           cursor: pointer;
           transition: background 0.3s;
       }

       .toggle-switch.active {
           background: var(--success);
       }

       .toggle-slider {
           position: absolute;
           top: 3px;
           left: 3px;
           width: 20px;
           height: 20px;
           background: white;
           border-radius: 50%;
           transition: transform 0.3s;
           box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
       }

       .toggle-switch.active .toggle-slider {
           transform: translateX(24px);
       }

       .action-buttons {
           display: flex;
           gap: 12px;
           margin-top: 24px;
       }

       /* Welcome Screen */
       .welcome-screen {
           display: flex;
           align-items: center;
           justify-content: center;
           height: 100%;
           text-align: center;
           padding: 40px;
       }

       .welcome-content {
           max-width: 500px;
       }

       .welcome-icon {
           width: 80px;
           height: 80px;
           background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           margin: 0 auto 24px;
           font-size: 36px;
       }

       .welcome-title {
           font-size: 32px;
           font-weight: 700;
           color: var(--primary);
           margin-bottom: 16px;
       }

       .welcome-text {
           color: var(--text-secondary);
           margin-bottom: 32px;
           line-height: 1.6;
       }

       /* Responsive */
       .mobile-menu-toggle {
           display: none;
           position: fixed;
           top: 20px;
           left: 20px;
           z-index: 101;
           width: 48px;
           height: 48px;
           background: #F6CACA;
           color: var(--text);
           border: none;
           border-radius: 50%;
           box-shadow: 0 4px 12px var(--shadow);
           cursor: pointer;
           align-items: center;
           justify-content: center;
           font-size: 20px;
       }

       @media (max-width: 768px) {
           .sidebar {
               position: fixed;
               top: 0;
               left: 0;
               height: 100vh;
               transform: translateX(-100%);
           }

           .sidebar.mobile-open {
               transform: translateX(0);
           }

           .mobile-menu-toggle {
               display: flex;
           }

           #mainContent {
               padding: 80px 20px 20px;
           }

           .route-fields {
               grid-template-columns: 1fr;
           }

           .content-title {
               font-size: 24px;
           }
       }

       .empty-state {
           text-align: center;
           padding: 60px 20px;
           color: var(--text-secondary);
       }

       .empty-icon {
           font-size: 48px;
           margin-bottom: 16px;
           opacity: 0.5;
       }

       .icon-btn {
           background: none;
           border: none;
           cursor: pointer;
           padding: 4px 8px;
           border-radius: 4px;
           transition: all 0.2s;
           font-size: 18px;
       }

       .icon-btn:hover {
           background: var(--bg-secondary);
       }

       .checkbox-container {
           display: flex;
           align-items: center;
           gap: 8px;
           cursor: pointer;
       }

       .checkbox {
           width: 20px;
           height: 20px;
           border: 2px solid var(--border);
           border-radius: 4px;
           cursor: pointer;
       }

       .hidden {
           display: none !important;
       }

       .help-section {
           margin-bottom: 24px;
       }

       .help-section h3 {
           color: var(--primary);
           font-size: 18px;
           margin-bottom: 12px;
       }

       .help-section p {
           line-height: 1.6;
           margin-bottom: 8px;
       }

       .help-section ul {
           margin-left: 20px;
           line-height: 1.8;
       }

       .settings-section {
           margin-bottom: 32px;
           padding-bottom: 32px;
           border-bottom: 1px solid var(--border);
       }

       .settings-section:last-child {
           border-bottom: none;
       }

       .settings-section h3 {
           color: var(--primary);
           font-size: 18px;
           margin-bottom: 16px;
       }

       .disabled-years-notice {
           background: var(--bg-secondary);
           padding: 16px;
           border-radius: 8px;
           border-left: 4px solid var(--primary);
           margin-bottom: 16px;
           font-size: 14px;
           color: var(--text-secondary);
       }

       /* Rearrange buttons */
       .rearrange-btns {
           display: flex;
           gap: 4px;
       }

       .rearrange-btn {
           padding: 4px 8px;
           background: var(--bg-secondary);
           border: 1px solid var(--border);
           border-radius: 4px;
           cursor: pointer;
           font-size: 16px;
           transition: all 0.2s;
           font-family: 'Libre Franklin', sans-serif;
           color: var(--text);
       }

       .rearrange-btn:hover:not(:disabled) {
           background: var(--primary);
           color: white;
           border-color: var(--primary);
       }

       .rearrange-btn:disabled {
           opacity: 0.3;
           cursor: not-allowed;
       }

       /* Floating button */
       .floating-new-route {
           position: fixed;
           bottom: 32px;
           right: 32px;
           z-index: 50;
           opacity: 0;
           visibility: hidden;
           transition: opacity 0.3s ease, visibility 0.3s ease;
       }

       .floating-new-route.visible {
           opacity: 1;
           visibility: visible;
       }

       /* Analytics */
       .analytics-filters {
           display: flex;
           gap: 16px;
           margin-bottom: 24px;
           flex-wrap: wrap;
       }

       .analytics-filter-group {
           flex: 1;
           min-width: 200px;
       }

       .charts-grid {
           display: grid;
           grid-template-columns: repeat(2, 1fr);
           gap: 24px;
           margin-bottom: 24px;
       }

       .chart-container {
           background: var(--bg);
           padding: 24px;
           border-radius: 12px;
           border: 1px solid var(--border);
           box-shadow: 0 2px 8px var(--shadow);
       }

       .chart-title {
           font-size: 18px;
           font-weight: 600;
           margin-bottom: 16px;
           color: var(--text);
       }

       .chart-canvas {
           position: relative;
           height: 300px;
       }

       @media (max-width: 968px) {
           .charts-grid {
               grid-template-columns: 1fr;
           }
       }

       /* Theme toggle */
       .theme-toggle {
           display: flex;
           gap: 4px;
           padding: 4px;
           background: var(--bg-secondary);
           border-radius: 8px;
           border: 1px solid var(--border);
       }

       .theme-option {
           flex: 1;
           padding: 8px 12px;
           background: transparent;
           border: none;
           border-radius: 6px;
           cursor: pointer;
           font-size: 12px;
           font-weight: 600;
           color: var(--text);
           transition: all 0.2s;
           font-family: 'Libre Franklin', sans-serif;
       }

       .theme-option.active {
           background: var(--primary);
           color: white;
       }

       .theme-option:hover:not(.active) {
           background: var(--bg);
       }

       /* Toast notifications */
       .toast-container {
           position: fixed;
           top: 20px;
           right: 20px;
           z-index: 2000;
           display: flex;
           flex-direction: column;
           gap: 8px;
           pointer-events: none;
       }

       .toast {
           padding: 14px 20px;
           border-radius: 10px;
           font-size: 14px;
           font-weight: 500;
           color: white;
           box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
           pointer-events: auto;
           animation: toastSlideIn 0.3s ease, toastFadeOut 0.3s ease 4.7s forwards;
           max-width: 380px;
           line-height: 1.5;
           font-family: 'Libre Franklin', sans-serif;
       }

       .toast-success { background: var(--success); }
       .toast-info { background: var(--primary); }
       .toast-error { background: var(--error); }

       .toast-detail {
           font-size: 12px;
           opacity: 0.9;
           margin-top: 4px;
       }

       @keyframes toastSlideIn {
           from { opacity: 0; transform: translateX(40px); }
           to { opacity: 1; transform: translateX(0); }
       }

       @keyframes toastFadeOut {
           from { opacity: 1; }
           to { opacity: 0; }
       }

       /* Sync banner */
       .sync-banner {
           display: flex;
           align-items: center;
           gap: 12px;
           padding: 12px 20px;
           margin-bottom: 24px;
           background: var(--bg-secondary);
           border: 1px solid var(--border);
           border-left: 4px solid var(--primary);
           border-radius: 8px;
           font-size: 14px;
           color: var(--text);
       }

       .sync-banner-text {
           flex: 1;
       }

       .sync-banner .btn {
           padding: 8px 16px;
           font-size: 13px;
           white-space: nowrap;
       }

       .sync-banner-connected {
           border-left-color: var(--success);
       }

       .sync-status-dot {
           width: 8px;
           height: 8px;
           border-radius: 50%;
           display: inline-block;
           margin-right: 6px;
       }

       .sync-status-dot.active { background: var(--success); }
       .sync-status-dot.inactive { background: var(--text-secondary); }

/* ===== v4 additions ===== */

/* Dialog modals (alert/confirm/prompt replacements) */
.dialog-modal {
 max-width: 480px;
}

/* Address search results (Nominatim) */
.search-results {
 margin-top: 8px;
}

.search-result-item {
 padding: 10px 12px;
 border: 1px solid var(--border);
 border-radius: 8px;
 margin-bottom: 6px;
 font-size: 13px;
 background: var(--bg);
 color: var(--text);
 line-height: 1.4;
}

.search-result-item.selectable {
 cursor: pointer;
 transition: all 0.15s;
}

.search-result-item.selectable:hover {
 border-color: var(--primary);
 background: var(--bg-secondary);
}

.location-coords-badge {
 margin-left: 6px;
 font-size: 13px;
 cursor: help;
}

/* Sync banner: last-synced time */
.sync-last {
 font-size: 12px;
 color: var(--text-secondary);
 margin-left: 8px;
}

/* Google Maps links styled as icon buttons */
a.icon-btn {
 text-decoration: none;
 display: inline-flex;
 align-items: center;
}

/* ===== Auth screen (Firebase mode) ===== */

.auth-screen {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, var(--bg) 0%, var(--bg-secondary) 100%);
 z-index: 2000;
 padding: 20px;
}

.auth-card {
 background: white;
 border-radius: 16px;
 padding: 48px;
 max-width: 520px;
 width: 100%;
 box-shadow: 0 20px 60px var(--shadow);
 text-align: center;
 animation: modalSlideIn 0.3s ease;
}

[data-theme="dark"] .auth-card {
 background: var(--bg-secondary);
}

.auth-logo {
 width: 80px;
 height: 80px;
 background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 24px;
 font-size: 36px;
}

.auth-title {
 font-size: 28px;
 font-weight: 700;
 color: var(--primary);
 margin-bottom: 8px;
}

.auth-subtitle {
 color: var(--text-secondary);
 margin-bottom: 32px;
 line-height: 1.6;
}

.google-sign-in-btn {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 padding: 14px 32px;
 background: white;
 border: 2px solid var(--border);
 border-radius: 8px;
 font-size: 16px;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.2s;
 font-family: 'Libre Franklin', sans-serif;
 color: var(--text);
}

[data-theme="dark"] .google-sign-in-btn {
 background: var(--bg);
}

.google-sign-in-btn:hover {
 border-color: var(--primary);
 box-shadow: 0 4px 12px var(--shadow);
 transform: translateY(-2px);
}

/* Workspace list (auth screen) */
.workspace-list {
 margin: 24px 0;
 text-align: left;
}

.workspace-card {
 padding: 16px 20px;
 border: 1px solid var(--border);
 border-radius: 12px;
 margin-bottom: 12px;
 cursor: pointer;
 transition: all 0.2s;
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: var(--bg);
}

.workspace-card:hover {
 border-color: var(--primary);
 box-shadow: 0 4px 12px var(--shadow);
 transform: translateY(-1px);
}

.workspace-card-name {
 font-weight: 600;
 font-size: 16px;
 margin-bottom: 4px;
}

.workspace-card-info {
 font-size: 13px;
 color: var(--text-secondary);
}

/* Workspace badge (sidebar header) */
.workspace-badge {
 padding: 8px 12px;
 background: rgba(255, 255, 255, 0.1);
 border-radius: 6px;
 font-size: 12px;
 margin-top: 8px;
 display: flex;
 align-items: center;
 gap: 6px;
 cursor: pointer;
 transition: background 0.2s;
}

.workspace-badge:hover {
 background: rgba(255, 255, 255, 0.18);
}

.workspace-badge-dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: #4ade80;
 flex-shrink: 0;
}

/* Member list (workspace settings) */
.member-item {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 10px 12px;
 border: 1px solid var(--border);
 border-radius: 8px;
 margin-bottom: 8px;
 font-size: 14px;
}

.member-badge {
 font-size: 11px;
 padding: 2px 8px;
 background: var(--primary);
 color: white;
 border-radius: 4px;
 font-weight: 600;
}

/* Toast action button */
.toast-action {
 display: block;
 margin-top: 8px;
 padding: 4px 14px;
 background: rgba(255, 255, 255, 0.25);
 border: 1px solid rgba(255, 255, 255, 0.4);
 border-radius: 6px;
 color: white;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
 transition: background 0.2s;
 font-family: 'Libre Franklin', sans-serif;
}

.toast-action:hover {
 background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 768px) {
 .auth-card {
  padding: 32px 24px;
 }
}