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

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      line-height: 1.6;
      color: #333;
    }

    header {
      background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
      color: white;
      padding: 1rem 0;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    nav {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 2rem;
    }

    .logo {
      font-size: 1.5rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .nav-links {
      display: flex;
      gap: 2rem;
      list-style: none;
      align-items: center;
    }

    .nav-links a {
      color: white;
      text-decoration: none;
      transition: opacity 0.3s;
    }

    .nav-links a:hover {
      opacity: 0.8;
    }

    .btn-login, .btn-signout {
      background: white;
      color: #1e40af;
      padding: 0.5rem 1.5rem;
      border-radius: 6px;
      text-decoration: none;
      font-weight: 600;
      transition: transform 0.3s;
      border: none;
      cursor: pointer;
      font-size: 1rem;
    }

    .btn-login:hover, .btn-signout:hover {
      transform: translateY(-2px);
    }

    .btn-signout {
      background: #ef4444;
      color: white;
    }

    .btn-settings {
      background: transparent;
      border: 2px solid rgba(255,255,255,0.5);
      color: white;
      padding: 0.4rem 0.6rem;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.3s;
    }

    .btn-settings:hover {
      background: rgba(255,255,255,0.2);
      border-color: white;
    }

    .btn-text-link {
      background: transparent;
      border: none;
      color: white;
      font-weight: 600;
      cursor: pointer;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      border-radius: 6px;
      transition: background 0.3s;
    }

    .btn-text-link:hover {
      background: rgba(255,255,255,0.1);
    }

    .btn-add-vehicle {
      background: #10b981;
      color: white;
      padding: 0.5rem 1.5rem;
      border-radius: 6px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      transition: transform 0.3s;
    }

    .btn-add-vehicle:hover {
      transform: translateY(-2px);
      background: #059669;
    }

    .btn-my-vehicles {
      background: #6366f1;
      color: white;
      padding: 0.5rem 1.5rem;
      border-radius: 6px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      transition: transform 0.3s;
    }

    .btn-my-vehicles:hover {
      transform: translateY(-2px);
      background: #4f46e5;
    }

    .btn-admin {
      background: #f59e0b;
      color: white;
      padding: 0.5rem 1.5rem;
      border-radius: 6px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      transition: transform 0.3s;
    }

    .btn-admin:hover {
      transform: translateY(-2px);
      background: #d97706;
    }

    .admin-panel {
      max-width: 1400px;
      margin: 2rem auto;
      padding: 0 2rem;
    }

    .admin-header {
      margin-bottom: 2rem;
      padding-bottom: 1rem;
      border-bottom: 2px solid #e5e7eb;
    }

    .admin-header h1 {
      color: #1e40af;
      font-size: 2rem;
      margin-bottom: 1rem;
    }

    .admin-tabs {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
    }

    .admin-tab {
      padding: 0.75rem 1.5rem;
      border: 2px solid #e5e7eb;
      background: white;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      color: #666;
    }

    .admin-tab:hover {
      background: #f3f4f6;
      border-color: #d1d5db;
    }

    .admin-tab.active {
      background: #1e40af;
      color: white;
      border-color: #1e40af;
    }

    .admin-tab-content {
      display: none;
    }

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

    .admin-stats {
      display: flex !important;
      flex-direction: row !important;
      gap: 1.5rem;
      flex-wrap: wrap;
      justify-content: center;
      padding: 1rem 0;
      align-items: flex-start;
    }

    .admin-stat {
      display: inline-block;
      text-align: center;
      min-width: 100px;
      flex: 0 0 auto;
    }

    .admin-stat-number {
      font-size: 2rem;
      font-weight: 700;
      color: #1e40af;
      line-height: 1;
    }

    .admin-stat-label {
      font-size: 0.75rem;
      color: #666;
      text-transform: uppercase;
    }

    .admin-filters {
      display: flex;
      gap: 1rem;
      margin-bottom: 2rem;
      padding: 1rem;
      background: #f8fafc;
      border-radius: 8px;
    }

    .admin-filter-btn {
      padding: 0.5rem 1rem;
      border: 2px solid #e5e7eb;
      background: white;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.2s;
    }

    .admin-filter-btn.active {
      background: #1e40af;
      color: white;
      border-color: #1e40af;
    }

    .admin-records-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .admin-record-card {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 1.5rem;
      display: grid;
      grid-template-columns: 1fr 1fr 300px;
      gap: 1.5rem;
      align-items: start;
      transition: box-shadow 0.2s;
    }

    .admin-record-card:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .admin-record-card.pending {
      border-left: 4px solid #f59e0b;
    }

    .admin-record-card.approved {
      border-left: 4px solid #10b981;
    }

    .admin-record-card.rejected {
      border-left: 4px solid #ef4444;
    }

    .admin-record-info h3 {
      color: #1e40af;
      margin-bottom: 0.5rem;
    }

    .admin-record-detail {
      font-size: 0.875rem;
      color: #666;
      margin-bottom: 0.25rem;
    }

    .admin-record-detail strong {
      color: #333;
    }

    .admin-record-document {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .admin-document-preview {
      width: 100%;
      max-height: 200px;
      object-fit: contain;
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      cursor: pointer;
    }

    .admin-record-actions {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .btn-approve, .btn-reject, .btn-view-doc {
      padding: 0.75rem;
      border: none;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 0.875rem;
    }

    .btn-approve {
      background: #10b981;
      color: white;
    }

    .btn-approve:hover {
      background: #059669;
    }

    .btn-reject {
      background: #ef4444;
      color: white;
    }

    .btn-reject:hover {
      background: #dc2626;
    }

    /* User Management Table Styles */
    .users-table-container {
      background: white;
      border-radius: 12px;
      overflow-x: auto;
      overflow-y: auto;
      max-height: 600px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .users-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 800px;
    }

    .users-table thead {
      background: #f8fafc;
      border-bottom: 2px solid #e5e7eb;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .users-table th {
      padding: 1rem;
      text-align: left;
      font-weight: 600;
      color: #1e40af;
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .users-table td {
      padding: 1rem;
      border-bottom: 1px solid #e5e7eb;
      color: #334155;
    }

    .users-table tbody tr:hover {
      background: #f8fafc;
    }

    .users-table tbody tr:last-child td {
      border-bottom: none;
    }

    .user-email {
      font-weight: 500;
      color: #1e40af;
    }

    .user-date {
      color: #64748b;
      font-size: 0.875rem;
    }

    .status-badge {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      border-radius: 12px;
      font-size: 0.75rem;
      font-weight: 600;
      text-align: center;
      min-width: 70px;
    }

    .status-badge.approved {
      background: #d1fae5;
      color: #065f46;
    }

    .status-badge.pending {
      background: #fef3c7;
      color: #92400e;
    }

    .status-badge.rejected {
      background: #fecaca;
      color: #991b1b;
    }

    .status-badge.none {
      background: #e5e7eb;
      color: #64748b;
    }

    /* FAQ Styles */
    .faq-sections {
      max-height: 70vh;
      overflow-y: auto;
      padding-right: 1rem;
    }

    .faq-section {
      margin-bottom: 2rem;
    }

    .faq-section h3 {
      font-size: 1.25rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid #e5e7eb;
    }

    .faq-item {
      background: #f8fafc;
      padding: 1.5rem;
      border-radius: 8px;
      margin-bottom: 1rem;
      border-left: 4px solid #1e40af;
    }

    .faq-item h4 {
      color: #333;
      font-size: 1.1rem;
      margin-bottom: 0.75rem;
    }

    .faq-item p {
      color: #666;
      line-height: 1.6;
      margin-bottom: 0.5rem;
    }

    .faq-item ul, .faq-item ol {
      color: #666;
      margin-left: 1.5rem;
      margin-top: 0.5rem;
    }

    .faq-item li {
      margin-bottom: 0.5rem;
    }

    .btn-view-doc {
      background: #3b82f6;
      color: white;
    }

    .btn-view-doc:hover {
      background: #2563eb;
    }

    .verification-status {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
    }

    .verification-status.pending {
      background: #fef3c7;
      color: #92400e;
    }

    .verification-status.verified,
    .verification-status.approved {
      background: #d1fae5;
      color: #065f46;
    }

    .verification-status.unverified {
      background: #e5e7eb;
      color: #374151;
    }

    .verification-status.rejected {
      background: #fecaca;
      color: #991b1b;
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid white;
    }

    .user-name {
      font-weight: 500;
    }

    .hero {
      background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(30, 64, 175, 0.9) 100%), 
                  url('/images/hero-desktop-1920x700.jpg') center center / cover no-repeat;
      color: white;
      padding: 4rem 2rem;
      text-align: center;
      position: relative;
    }
    
    /* Mobile hero background */
    @media (max-width: 768px) {
      .hero {
        background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(30, 64, 175, 0.9) 100%), 
                    url('/images/hero-mobile-768x400.jpg') center center / cover no-repeat;
      }
    }

    .hero h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      font-weight: 700;
    }

    .hero p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
      opacity: 0.9;
    }

    .search-box {
      max-width: 600px;
      margin: 0 auto;
      display: flex;
      gap: 1rem;
      background: white;
      padding: 0.5rem;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .search-box input {
      flex: 1;
      padding: 0.75rem;
      border: none;
      font-size: 1rem;
      outline: none;
    }

    .btn-search {
      background: #1e40af;
      color: white;
      padding: 0.75rem 2rem;
      border: none;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.3s;
    }

    .btn-search:hover {
      background: #1e3a8a;
    }

    .features {
      max-width: 1200px;
      margin: 4rem auto;
      padding: 0 2rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
    }

    .feature-card {
      background: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      transition: transform 0.3s;
    }

    .feature-card:hover {
      transform: translateY(-5px);
    }

    .feature-card h3 {
      color: #1e40af;
      margin-bottom: 1rem;
      font-size: 1.3rem;
    }

    .feature-icon {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .how-it-works {
      background: #f8fafc;
      padding: 4rem 2rem;
      text-align: center;
    }

    .how-it-works h2 {
      font-size: 2rem;
      color: #1e40af;
      margin-bottom: 3rem;
    }

    .steps {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
    }

    .step {
      background: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .step-number {
      background: #1e40af;
      color: white;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      font-weight: 700;
      font-size: 1.2rem;
    }

    .step h3 {
      margin-bottom: 0.5rem;
      color: #1e40af;
    }

    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      justify-content: center;
      align-items: center;
      z-index: 2000;
      overflow-y: auto;
      padding: 2rem 0;
    }

    .modal.active {
      display: flex;
    }

    /* Custom Alert Modal */
    #customAlertModal .modal-content {
      animation: modalSlideIn 0.2s ease-out;
    }
    
    @keyframes modalSlideIn {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .btn-secondary {
      background: #e5e7eb;
      color: #374151;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.2s;
    }
    
    .btn-secondary:hover {
      background: #d1d5db;
    }

    .modal-content {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      max-width: 400px;
      width: 90%;
      text-align: center;
      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
      margin: auto;
      max-height: 90vh;
      overflow-y: auto;
    }

    .modal-content h2 {
      color: #1e40af;
      margin-bottom: 1rem;
    }

    .modal-content p {
      margin-bottom: 2rem;
      color: #666;
    }

    .btn-google {
      background: white;
      color: #333;
      padding: 0.75rem 2rem;
      border: 2px solid #ddd;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin: 0 auto;
      transition: all 0.3s;
    }

    .btn-google:hover {
      border-color: #1e40af;
      background: #f8fafc;
    }

    .btn-close {
      margin-top: 1rem;
      background: none;
      border: none;
      color: #666;
      cursor: pointer;
      text-decoration: underline;
    }

    .form-section {
      margin-bottom: 2rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid #e5e7eb;
    }

    .form-section:last-of-type {
      border-bottom: none;
    }

    .form-section h3 {
      color: #1e40af;
      margin-bottom: 1rem;
      font-size: 1.1rem;
    }

    .form-group {
      margin-bottom: 1rem;
      text-align: left;
    }

    .form-group label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 600;
      color: #333;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%;
      padding: 0.75rem;
      border: 2px solid #e5e7eb;
      border-radius: 6px;
      font-size: 1rem;
      font-family: inherit;
      transition: border-color 0.3s;
    }

    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      outline: none;
      border-color: #1e40af;
    }

    .form-group textarea {
      resize: vertical;
      min-height: 100px;
    }

    .form-group small {
      display: block;
      margin-top: 0.25rem;
      color: #666;
      font-size: 0.875rem;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .form-actions {
      display: flex;
      gap: 1rem;
      justify-content: flex-end;
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid #e5e7eb;
    }

    .btn-submit {
      background: #1e40af;
      color: white;
      padding: 0.75rem 2rem;
      border: none;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      font-size: 1rem;
      transition: background 0.3s;
    }

    .btn-submit:hover {
      background: #1e3a8a;
    }

    .btn-submit:disabled {
      background: #9ca3af;
      cursor: not-allowed;
    }

    .btn-decode-vin {
      margin-top: 0.5rem;
      background: #3b82f6;
      color: white;
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 4px;
      font-weight: 600;
      cursor: pointer;
      font-size: 0.875rem;
      transition: background 0.3s;
    }

    .btn-decode-vin:hover {
      background: #2563eb;
    }

    .btn-decode-vin:disabled {
      background: #9ca3af;
      cursor: not-allowed;
    }

    .vin-decoded {
      background: #f0fdf4 !important;
      border-color: #10b981 !important;
    }

    .vin-error {
      background: #fef2f2 !important;
      border-color: #ef4444 !important;
    }

    .checkbox-group {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 0.75rem;
      margin-top: 0.5rem;
    }

    .checkbox-label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      padding: 0.5rem;
      border-radius: 4px;
      transition: background 0.2s;
    }

    .checkbox-label:hover {
      background: #f9fafb;
    }

    .checkbox-label input[type="checkbox"] {
      width: auto;
      cursor: pointer;
    }

    .checkbox-label span {
      font-weight: normal;
      color: #333;
    }

    .hidden {
      display: none !important;
    }

    /* Vehicle Results Styles */
    .vehicle-results {
      max-width: 1200px;
      margin: 3rem auto;
      padding: 0 2rem;
      display: none;
    }

    .vehicle-results.active {
      display: block;
    }

    .back-button {
      background: #6b7280;
      color: white;
      padding: 0.5rem 1.5rem;
      border: none;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      margin-bottom: 2rem;
      font-size: 1rem;
      transition: background 0.3s;
    }

    .back-button:hover {
      background: #4b5563;
    }

    .search-results-header {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      margin-bottom: 2rem;
      text-align: center;
    }

    .search-results-header h1 {
      color: #1e40af;
      margin-bottom: 0.5rem;
      font-size: 2rem;
    }

    .search-results-header p {
      color: #666;
      font-size: 1.125rem;
    }

    /* Compact Table View for Search Results */
    .vehicle-list {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      border: 2px solid #e5e7eb;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .search-table-header {
      background: #f8fafc;
      padding: 1rem 1.5rem;
      border-bottom: 2px solid #e5e7eb;
      display: grid;
      grid-template-columns: 2.5fr 80px 80px 100px 90px 80px 120px;
      gap: 0.75rem;
      font-weight: 700;
      color: #475569;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      align-items: center;
    }

    .vehicle-list-item {
      padding: 1.25rem 1.5rem;
      border-bottom: 1px solid #e5e7eb;
      display: grid;
      grid-template-columns: 2.5fr 80px 80px 100px 90px 80px 120px;
      gap: 0.75rem;
      align-items: center;
      transition: background 0.2s;
      cursor: pointer;
    }

    .vehicle-list-item:hover {
      background: #f8fafc;
    }

    .vehicle-list-item:last-child {
      border-bottom: none;
    }

    .vehicle-list-header {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .vehicle-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.75rem;
      flex-shrink: 0;
      position: relative;
    }

    .vehicle-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
    }

    .vehicle-info h3 {
      font-size: 1rem;
      font-weight: 700;
      color: #1e293b;
      margin: 0 0 0.35rem 0;
      line-height: 1.2;
    }

    .vehicle-info p {
      font-size: 0.8rem;
      color: #64748b;
      margin: 0;
      line-height: 1.3;
    }

    .table-stat {
      text-align: center;
      font-size: 1.5rem;
      font-weight: 700;
      color: #1e40af;
    }

    .table-stat-small {
      text-align: center;
      font-size: 0.9rem;
      font-weight: 600;
      color: #64748b;
    }

    .table-helpful {
      text-align: center;
      color: #10b981;
      font-weight: 600;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
    }

    .table-rating {
      text-align: center;
      font-size: 0.85rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.125rem;
    }

    .table-rating-stars {
      font-size: 0.8rem;
      letter-spacing: -1px;
    }

    .table-rating-num {
      font-size: 0.75rem;
      color: #64748b;
      font-weight: 600;
    }

    .table-comments {
      text-align: center;
      color: #6366f1;
      font-weight: 600;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
    }

    .table-action {
      text-align: center;
    }

    .view-history-btn {
      background: #1e40af;
      color: white;
      border: none;
      padding: 0.6rem 1rem;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      font-size: 0.85rem;
      transition: all 0.2s;
      width: 100%;
    }

    .view-history-btn:hover {
      background: #1e3a8a;
      transform: translateY(-1px);
    }

    /* Mobile responsive for table view */
    @media (max-width: 1024px) {
      .search-table-header,
      .vehicle-list-item {
        grid-template-columns: 1fr;
        gap: 0.75rem;
      }

      .search-table-header {
        display: none; /* Hide header on mobile */
      }

      .vehicle-list-item {
        padding: 1.5rem;
      }

      .vehicle-list-header {
        grid-column: 1;
        margin-bottom: 1rem;
      }

      .table-stat,
      .table-stat-small,
      .table-helpful,
      .table-rating,
      .table-comments {
        text-align: left;
        justify-content: flex-start;
      }

      .table-stat::before,
      .table-stat-small::before,
      .table-helpful::before,
      .table-rating::before,
      .table-comments::before {
        content: attr(data-label);
        font-weight: 600;
        color: #475569;
        font-size: 0.75rem;
        text-transform: uppercase;
        display: block;
        margin-bottom: 0.25rem;
      }

      .table-action {
        text-align: left;
        margin-top: 0.5rem;
      }

      .view-history-btn {
        width: 100%;
      }
    }

    .vehicle-header {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      margin-bottom: 2rem;
    }

    .vehicle-title {
      font-size: 2rem;
      color: #1e40af;
      margin-bottom: 0.5rem;
    }

    .vehicle-subtitle {
      color: #666;
      font-size: 1.1rem;
      margin-bottom: 1.5rem;
    }

    .vehicle-details {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.5rem;
      padding-top: 1.5rem;
      border-top: 2px solid #e5e7eb;
    }

    .detail-item {
      display: flex;
      flex-direction: column;
    }

    .detail-label {
      font-size: 0.875rem;
      color: #666;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 0.25rem;
    }

    .detail-value {
      font-size: 1.1rem;
      color: #333;
      font-weight: 500;
    }

    .title-badge {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      border-radius: 4px;
      font-weight: 600;
      font-size: 0.875rem;
    }

    .title-clean {
      background: #d1fae5;
      color: #065f46;
    }

    .title-rebuilt, .title-salvage {
      background: #fed7aa;
      color: #92400e;
    }

    .title-lemon, .title-flood {
      background: #fecaca;
      color: #991b1b;
    }

    .ownership-timeline {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .timeline-header {
      font-size: 1.5rem;
      color: #1e40af;
      margin-bottom: 2rem;
      padding-bottom: 1rem;
      border-bottom: 2px solid #e5e7eb;
    }

    .ownership-record {
      position: relative;
      padding-left: 2.5rem;
      padding-bottom: 2rem;
      border-left: 3px solid #e5e7eb;
    }

    .ownership-record:last-child {
      border-left-color: transparent;
      padding-bottom: 0;
    }

    .timeline-dot {
      position: absolute;
      left: -0.65rem;
      top: 0.25rem;
      width: 1.25rem;
      height: 1.25rem;
      background: #1e40af;
      border: 3px solid white;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .ownership-dates {
      font-weight: 600;
      color: #1e40af;
      margin-bottom: 0.5rem;
      font-size: 1.1rem;
    }

    .ownership-location {
      color: #666;
      font-size: 0.9rem;
      margin-bottom: 1rem;
    }

    .ownership-story {
      background: #f9fafb;
      padding: 1rem;
      border-radius: 6px;
      margin-bottom: 1rem;
      line-height: 1.6;
      color: #333;
    }

    .ownership-mileage {
      display: flex;
      gap: 2rem;
      margin-bottom: 1rem;
      font-size: 0.9rem;
    }

    .mileage-item {
      color: #666;
    }

    .mileage-item strong {
      color: #333;
    }

    .issue-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 1rem;
    }

    .issue-badge {
      background: #fef2f2;
      color: #991b1b;
      padding: 0.25rem 0.75rem;
      border-radius: 4px;
      font-size: 0.875rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .no-results {
      text-align: center;
      padding: 4rem 2rem;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .no-results h2 {
      color: #1e40af;
      margin-bottom: 1rem;
    }

    .no-results p {
      color: #666;
      font-size: 1.1rem;
    }

    .loading-spinner {
      text-align: center;
      padding: 4rem 2rem;
    }

    .spinner {
      border: 4px solid #f3f3f3;
      border-top: 4px solid #1e40af;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
      margin: 0 auto 1rem;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .my-vehicles-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 0.75rem;
      max-height: 500px;
      overflow-y: auto;
      padding: 0.5rem;
    }

    .my-vehicle-card {
      background: #f8fafc;
      padding: 0.75rem;
      border-radius: 6px;
      border: 1px solid #e5e7eb;
      transition: transform 0.2s, box-shadow 0.2s;
      width: 100%;
      max-width: 200px;
      min-height: 240px;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .my-vehicle-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .my-vehicle-title {
      font-size: 0.9rem;
      color: #1e40af;
      font-weight: 600;
      line-height: 1.2;
      margin-bottom: 0.3rem;
    }

    .my-vehicle-vin {
      font-size: 0.65rem;
      color: #666;
      font-family: monospace;
      margin-bottom: 0.3rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .my-vehicle-dates {
      font-size: 0.65rem;
      color: #666;
      margin-bottom: 0.5rem;
    }

    .my-vehicle-info {
      font-size: 0.65rem;
      color: #666;
      line-height: 1.3;
      flex: 1;
    }

    .my-vehicle-info-item {
      margin-bottom: 0.2rem;
    }

    .my-vehicle-actions {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.5rem;
      padding-top: 0.5rem;
      border-top: 1px solid #e5e7eb;
    }

    .btn-edit-vehicle, .btn-delete-vehicle, .btn-resubmit-vehicle {
      flex: 1;
      padding: 0.4rem 0.3rem;
      border: none;
      border-radius: 4px;
      font-size: 0.65rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-edit-vehicle {
      background: #3b82f6;
      color: white;
    }

    .btn-edit-vehicle:hover {
      background: #2563eb;
    }

    .btn-delete-vehicle {
      background: #ef4444;
      color: white;
    }

    .btn-delete-vehicle:hover {
      background: #dc2626;
    }

    .btn-resubmit-vehicle {
      background: #f59e0b;
      color: white;
    }

    .btn-resubmit-vehicle:hover {
      background: #d97706;
    }

    .my-vehicle-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 0.75rem;
    }

    .my-vehicle-details {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 0.5rem;
      margin-top: 0.75rem;
      padding-top: 0.75rem;
      border-top: 1px solid #e5e7eb;
    }

    .my-vehicle-detail {
      font-size: 0.8rem;
    }

    .my-vehicle-detail strong {
      display: block;
      color: #1e40af;
      margin-bottom: 0.25rem;
      font-size: 0.75rem;
    }

    .my-vehicles-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
    }

    .my-vehicles-table th {
      background: #1e40af;
      color: white;
      padding: 0.75rem;
      text-align: left;
      font-weight: 600;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .my-vehicles-table td {
      padding: 0.75rem;
      border-bottom: 1px solid #e5e7eb;
      vertical-align: top;
    }

    .my-vehicles-table tr:hover {
      background: #f8fafc;
    }

    .my-vehicles-table .vehicle-name {
      font-weight: 600;
      color: #1e40af;
      white-space: nowrap;
    }

    .my-vehicles-table .vin-cell {
      font-family: monospace;
      font-size: 0.85rem;
      color: #666;
    }

    .my-vehicles-table .dates-cell {
      font-size: 0.85rem;
      color: #666;
      white-space: nowrap;
    }

    .my-vehicles-table .story-cell {
      max-width: 300px;
      font-size: 0.85rem;
      color: #666;
      line-height: 1.4;
    }

    .loading {
      text-align: center;
      padding: 2rem;
      color: #666;
      font-size: 1.1rem;
    }

    .no-vehicles {
      text-align: center;
      padding: 2rem;
      color: #666;
    }

    .no-vehicles p {
      margin-bottom: 1rem;
    }

    /* ========== IMAGE UPLOAD STYLES ========== */
    .btn-add-images {
      background: #10b981;
      color: white;
      padding: 0.75rem 1.5rem;
      border: 2px dashed #10b981;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.2s;
      width: 100%;
    }

    .btn-add-images:hover {
      background: #059669;
      border-color: #059669;
      transform: translateY(-2px);
    }

    .btn-add-images:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .image-preview-item {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      aspect-ratio: 1;
      background: #f3f4f6;
      border: 2px solid #e5e7eb;
    }

    .image-preview-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .image-preview-remove {
      position: absolute;
      top: 4px;
      right: 4px;
      background: #ef4444;
      color: white;
      border: none;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .image-preview-remove:hover {
      background: #dc2626;
      transform: scale(1.15);
    }

    .vehicle-images {
      margin: 1.5rem 0;
      padding: 1rem;
      background: #f9fafb;
      border-radius: 8px;
      border: 1px solid #e5e7eb;
    }

    .vehicle-images-title {
      font-weight: 600;
      color: #1e40af;
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1rem;
    }

    .image-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 0.75rem;
    }

    .gallery-image {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      aspect-ratio: 4/3;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      border: 2px solid #e5e7eb;
      background: white;
    }

    .gallery-image:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      border-color: #3b82f6;
    }

    .gallery-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .image-lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.95);
      z-index: 10000;
      justify-content: center;
      align-items: center;
      padding: 2rem;
      animation: fadeIn 0.2s;
    }

    .image-lightbox.active {
      display: flex;
    }

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

    .lightbox-content {
      max-width: 90vw;
      max-height: 90vh;
      position: relative;
    }

    .lightbox-content img {
      max-width: 100%;
      max-height: 90vh;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    }

    .lightbox-close {
      position: absolute;
      top: -50px;
      right: 0;
      background: white;
      color: black;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      cursor: pointer;
      font-size: 28px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }

    .lightbox-close:hover {
      background: #f3f4f6;
      transform: rotate(90deg);
    }

    .lightbox-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.95);
      color: black;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      cursor: pointer;
      font-size: 28px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }

    .lightbox-nav:hover {
      background: white;
      transform: translateY(-50%) scale(1.1);
    }

    .lightbox-prev {
      left: 20px;
    }

    .lightbox-next {
      right: 20px;
    }

    @media (max-width: 768px) {
      .image-gallery {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.5rem;
      }
      
      .lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 24px;
      }
      
      .lightbox-prev { left: 10px; }
      .lightbox-next { right: 10px; }
    }

    /* Badge System Styles */
    .badge {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0.75rem;
      margin: 0.25rem;
      background: white;
      border: 3px solid;
      border-radius: 12px;
      min-width: 100px;
      height: 100px;
      text-align: center;
      transition: all 0.3s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      font-weight: 700;
      font-size: 0.7rem;
      line-height: 1.2;
      color: #1e293b;
    }
    
    .badge:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }
    
    .badge-icon { 
      font-size: 2.25rem;
      margin-bottom: 0.35rem;
      display: block;
    }
    
    /* Unique colors for each badge */
    .badge[data-badge="alpha"],
    .badge:has(.badge-icon:first-child):nth-child(1) { border-color: #dc2626; } /* Red - Alpha */
    .badge[data-badge="founders-circle"] { border-color: #f59e0b; } /* Amber - Founder's Circle */
    .badge[data-badge="early-contributor"] { border-color: #eab308; } /* Yellow - Early Contributor */
    .badge[data-badge="first-story"] { border-color: #3b82f6; } /* Blue - First Story */
    .badge[data-badge="storyteller"] { border-color: #06b6d4; } /* Cyan - Storyteller */
    .badge[data-badge="historian"] { border-color: #8b5cf6; } /* Purple - Historian */
    .badge[data-badge="vehicle-expert"] { border-color: #0284c7; } /* Sky Blue - Vehicle Expert */
    .badge[data-badge="helpful"] { border-color: #f97316; } /* Orange - Helpful */
    .badge[data-badge="trusted-voice"] { border-color: #84cc16; } /* Lime - Trusted Voice */
    .badge[data-badge="community-champion"] { border-color: #10b981; } /* Emerald - Community Champion */
    .badge[data-badge="verified"] { border-color: #14b8a6; } /* Teal - Verified */
    .badge[data-badge="popular-vehicle"] { border-color: #ec4899; } /* Pink - Popular Vehicle */
    .badge[data-badge="conversationalist"] { border-color: #6366f1; } /* Indigo - Conversationalist */
    .badge[data-badge="connector"] { border-color: #a855f7; } /* Violet - Connector */
    .badge[data-badge="photographer"] { border-color: #64748b; } /* Slate - Photographer */
    
    /* Compact inline badge style for showing on submissions and leaderboard */
    /* Icon-only display with colored border - hover to see badge name */
    .badge-inline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      padding: 0;
      background: white;
      border: 2px solid;
      border-radius: 50%;
      font-size: 0.75rem;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0.15rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      cursor: help;
      transition: transform 0.15s ease;
    }
    
    .badge-inline:hover {
      transform: scale(1.15);
    }
    
    .badge-inline .badge-icon {
      font-size: 1rem;
      margin: 0;
    }
    
    /* Apply same unique colors to inline badges */
    .badge-inline[data-badge="alpha"] { border-color: #dc2626; }
    .badge-inline[data-badge="founders-circle"] { border-color: #f59e0b; }
    .badge-inline[data-badge="early-contributor"] { border-color: #eab308; }
    .badge-inline[data-badge="first-story"] { border-color: #3b82f6; }
    .badge-inline[data-badge="storyteller"] { border-color: #06b6d4; }
    .badge-inline[data-badge="historian"] { border-color: #8b5cf6; }
    .badge-inline[data-badge="vehicle-expert"] { border-color: #0284c7; }
    .badge-inline[data-badge="helpful"] { border-color: #f97316; }
    .badge-inline[data-badge="trusted-voice"] { border-color: #84cc16; }
    .badge-inline[data-badge="community-champion"] { border-color: #10b981; }
    .badge-inline[data-badge="verified"] { border-color: #14b8a6; }
    .badge-inline[data-badge="popular-vehicle"] { border-color: #ec4899; }
    .badge-inline[data-badge="conversationalist"] { border-color: #6366f1; }
    .badge-inline[data-badge="connector"] { border-color: #a855f7; }
    .badge-inline[data-badge="photographer"] { border-color: #64748b; }
    
    .user-badges-inline {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      flex-wrap: wrap;
      margin-left: 0.5rem;
    }
    .user-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
    .badge-progress { 
      background: #f3f4f6; 
      padding: 1rem; 
      border-radius: 8px; 
      margin: 0.5rem 0; 
    }
    .badge-progress-bar {
      background: #e5e7eb;
      height: 8px;
      border-radius: 4px;
      overflow: hidden;
      margin: 0.5rem 0;
    }
    .badge-progress-fill {
      background: linear-gradient(90deg, #3b82f6, #1e40af);
      height: 100%;
      transition: width 0.3s;
    }
    .badge-earned { opacity: 1; }
    .badge-locked { opacity: 0.5; filter: grayscale(1); }

    /* Leaderboard Styles */
    .leaderboard {
      max-width: 1200px;
      margin: 4rem auto;
      padding: 0 2rem;
      background: white;
    }
    .leaderboard h2 {
      color: #1e40af;
      font-size: 2rem;
      margin-bottom: 2rem;
      text-align: center;
    }
    .leaderboard-tabs {
      display: flex;
      gap: 1rem;
      margin-bottom: 2rem;
      border-bottom: 2px solid #e5e7eb;
      justify-content: center;
    }
    .leaderboard-tab {
      padding: 1rem 2rem;
      background: none;
      border: none;
      color: #64748b;
      font-weight: 600;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      transition: all 0.3s;
    }
    .leaderboard-tab.active {
      color: #1e40af;
      border-bottom-color: #1e40af;
    }
    .leaderboard-list {
      display: none;
    }
    .leaderboard-list.active {
      display: block;
    }
    .leaderboard-item {
      display: flex;
      align-items: center;
      padding: 1rem;
      border-radius: 8px;
      margin-bottom: 0.5rem;
      background: #f8fafc;
      transition: transform 0.2s;
    }
    .leaderboard-item:hover {
      transform: translateX(5px);
      background: #f1f5f9;
    }
    .leaderboard-rank {
      font-size: 1.5rem;
      font-weight: 700;
      color: #64748b;
      width: 60px;
      text-align: center;
    }
    .leaderboard-rank.top-1 { color: #fbbf24; }
    .leaderboard-rank.top-2 { color: #94a3b8; }
    .leaderboard-rank.top-3 { color: #fb923c; }
    .leaderboard-user {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .leaderboard-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 2px solid #e5e7eb;
    }
    .leaderboard-name {
      font-weight: 600;
      color: #1e40af;
    }
    .leaderboard-badges {
      display: flex;
      gap: 0.25rem;
      font-size: 1.25rem;
    }
    .leaderboard-stat {
      font-size: 1.25rem;
      font-weight: 700;
      color: #1e40af;
      width: 80px;
      text-align: right;
    }
    
    /* City Autocomplete Styles */
    .city-autocomplete-container {
      position: relative;
    }
    
    .city-autocomplete-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid #e5e7eb;
      border-top: none;
      border-radius: 0 0 6px 6px;
      max-height: 200px;
      overflow-y: auto;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      z-index: 1000;
      display: none;
    }
    
    .city-autocomplete-dropdown.active {
      display: block;
    }
    
    .city-autocomplete-item {
      padding: 0.75rem 1rem;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f3f4f6;
    }
    
    .city-autocomplete-item:last-child {
      border-bottom: none;
    }
    
    .city-autocomplete-item:hover {
      background: #f3f4f6;
    }
    
    .city-name {
      font-weight: 600;
      color: #1f2937;
    }
    
    .state-name {
      color: #6b7280;
      font-size: 0.875rem;
    }
    
    .city-autocomplete-no-results {
      padding: 1rem;
      text-align: center;
      color: #6b7280;
      font-style: italic;
    }

/* Additional styles */
/* Messaging System Styles */
.message-tab {
  padding: 0.75rem 1.5rem;
  border: none;
  background: transparent;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  color: #666;
}

.message-tab:hover {
  color: #1e40af;
  background: #f3f4f6;
}

.message-tab.active {
  color: #1e40af;
  border-bottom-color: #1e40af;
}

.message-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  gap: 1rem;
  align-items: start;
}

.message-item:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.message-item.unread {
  background: #eff6ff;
  border-color: #3b82f6;
  font-weight: 600;
}

.message-icon {
  font-size: 2rem;
  opacity: 0.7;
}

.message-content {
  flex: 1;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 0.5rem;
}

.message-from {
  font-weight: 600;
  color: #1e40af;
}

.message-date {
  color: #666;
  font-size: 0.875rem;
}

.message-subject {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #1e293b;
}

.message-preview {
  color: #64748b;
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.message-vehicle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #f3f4f6;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.875rem;
  color: #1e293b;
  margin-top: 0.5rem;
}

.message-badge {
  background: #ef4444;
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 0.5rem;
}

.no-messages {
  text-align: center;
  padding: 3rem;
  color: #666;
}

.no-messages h3 {
  color: #1e40af;
  margin-bottom: 0.5rem;
}

.contact-owner-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-owner-btn:hover {
  background: #2563eb;
  transform: translateY(-2px);
}

.helpful-vote-btn {
  background: #f3f4f6;
  color: #4b5563;
  border: 2px solid #e5e7eb;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
}

.helpful-vote-btn:hover:not(:disabled) {
  background: #e5e7eb;
  border-color: #d1d5db;
  transform: translateY(-2px);
}

.helpful-vote-btn.voted {
  background: #10b981;
  color: white;
  border-color: #10b981;
}

.helpful-vote-btn.voted:hover {
  background: #059669;
  border-color: #059669;
}

.helpful-vote-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.helpful-count {
  font-size: 0.85rem;
  color: #6b7280;
  margin-left: 0.5rem;
}

.thread-message {
  background: #f9fafb;
  border-left: 4px solid #3b82f6;
  padding: 1.25rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.thread-message.reply {
  background: #eff6ff;
  border-left-color: #10b981;
  margin-left: 2rem;
}

/* ========================================
   STAR RATING SYSTEM
   ======================================== */

/* Star Rating Input (Interactive) */
.star-rating-input {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0;
}

.star-rating-input .star {
  font-size: 2rem;
  color: #d1d5db;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
  user-select: none;
}

.star-rating-input .star:hover {
  transform: scale(1.15);
}

.star-rating-input .star.selected {
  color: #fbbf24;
}

/* Star Rating Display (Read-only) */
.star-rating-display {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  margin: 0.5rem 0;
}

.star-rating-display .star {
  font-size: 1.25rem;
  line-height: 1;
}

.star-rating-display .star.filled {
  color: #fbbf24;
}

.star-rating-display .star.empty {
  color: #d1d5db;
}

.star-rating-display .rating-number {
  margin-left: 0.5rem;
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 500;
}

/* Owner Rating in Stories */
.owner-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
  padding: 0.5rem 0.75rem;
  background: #fefce8;
  border-radius: 6px;
  border: 1px solid #fde047;
}

.owner-rating-label {
  font-size: 0.85rem;
  color: #854d0e;
  font-weight: 500;
}

/* Average Rating Display */
.average-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.average-rating-stars {
  display: inline-flex;
  gap: 0.1rem;
}

.average-rating-stars .star {
  font-size: 1.1rem;
  line-height: 1;
}

.average-rating-stars .star.filled {
  color: #fbbf24;
}

.average-rating-stars .star.half {
  color: #fbbf24;
  opacity: 0.6;
}

.average-rating-stars .star.empty {
  color: #d1d5db;
}

.average-rating-text {
  font-size: 0.85rem;
  color: #64748b;
}

/* Vehicle Card Rating Badge */
.vehicle-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #fef3c7;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #92400e;
  font-weight: 500;
}

.vehicle-rating-badge .star {
  color: #f59e0b;
}

/* ========================================
   COMMENTS SYSTEM
   ======================================== */

.comments-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.comments-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1e40af;
}

.comments-loading {
  color: #64748b;
  font-style: italic;
  padding: 1rem 0;
}

.no-comments {
  color: #64748b;
  font-style: italic;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.sign-in-prompt {
  color: #64748b;
  font-size: 0.875rem;
  text-align: center;
  padding: 0.75rem;
  background: #f3f4f6;
  border-radius: 6px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.comment-item {
  background: #f9fafb;
  border-radius: 8px;
  padding: 0.875rem;
  border: 1px solid #e5e7eb;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.comment-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1e40af);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
}

.comment-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.comment-author {
  font-weight: 600;
  color: #1e293b;
  font-size: 0.9rem;
}

.comment-date {
  font-size: 0.75rem;
  color: #64748b;
}

.edited-tag {
  color: #94a3b8;
  font-style: italic;
}

.comment-actions {
  display: flex;
  gap: 0.25rem;
}

.comment-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  font-size: 0.875rem;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
}

.comment-action-btn:hover {
  opacity: 1;
  background: #e5e7eb;
}

.comment-body {
  margin-left: 40px;
}

.comment-text {
  color: #374151;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Comment Form */
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.comment-input,
.comment-edit-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.comment-input:focus,
.comment-edit-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.comment-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-char-count {
  font-size: 0.75rem;
  color: #94a3b8;
}

.comment-submit-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.comment-submit-btn:hover {
  background: #2563eb;
}

.comment-submit-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

/* Edit mode */
.comment-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.comment-save-btn,
.comment-cancel-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.comment-save-btn {
  background: #10b981;
  color: white;
}

.comment-save-btn:hover {
  background: #059669;
}

.comment-cancel-btn {
  background: #e5e7eb;
  color: #374151;
}

.comment-cancel-btn:hover {
  background: #d1d5db;
}

/* ========================================
   VEHICLE LOCATION MAP SECTION
   ======================================== */

.vehicle-map-section {
  padding: 3rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.vehicle-map-section h2 {
  font-size: 1.75rem;
  color: #1e40af;
  margin-bottom: 0.5rem;
}

.map-subtitle {
  color: #64748b;
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

.map-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 1.5rem;
}

.map-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.map-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #1e40af;
}

.map-stat-label {
  font-size: 0.875rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#vehicleLocationMap {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.map-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.legend-title {
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: #64748b;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .vehicle-map-section {
    padding: 2rem 1rem;
  }
  
  .vehicle-map-section h2 {
    font-size: 1.5rem;
  }
  
  .map-stats {
    gap: 2rem;
  }
  
  .map-stat-value {
    font-size: 1.5rem;
  }
  
  #vehicleLocationMap {
    height: 300px !important;
  }
  
  .map-legend {
    gap: 0.5rem;
  }
  
  .legend-title {
    width: 100%;
    margin-bottom: 0.25rem;
  }
}