:root {
          --dm-primary: #3b82f6;
          --dm-success: #10b981;
          --dm-warning: #f59e0b;
          --dm-danger: #ef4444;
      }

      body {
          background: var(--dm-slate-50);
          min-height: 100vh;
          display: flex;
          flex-direction: column;
      }

      main {
          flex: 1;
      }

      footer {
          margin-top: auto;
      }

      .search-form {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 1.5rem;
          margin-bottom: 1rem;
      }

      .search-input-group {
          position: relative;
          width: 420px;
      }

      .search-input-group .search-icon {
          display: none;
      }

      .search-input {
          width: 100%;
          padding: 1rem 1.5rem;
          background: #FFD900;
          border: 5px solid #000000;
          border-radius: 8px;
          font-size: 2.5rem;
          font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
          font-weight: 900;
          text-transform: uppercase;
          letter-spacing: 0.15em;
          text-align: center;
          color: #000000;
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .search-input::placeholder {
          color: #333333;
          font-weight: 900;
          opacity: 0.5;
      }

      .search-input:focus {
          outline: none;
          border-color: #000000;
          box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3), 0 6px 12px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .search-btn {
          padding: 1rem 3rem;
          background: var(--dm-primary);
          color: white;
          border: none;
          border-radius: 8px;
          font-size: 1.125rem;
          font-weight: 700;
          cursor: pointer;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
      }

      .search-btn:hover:not(:disabled) {
          background: #2563eb;
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
      }

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

      .search-hint {
          font-size: 0.875rem;
          color: #6b7280;
          margin: 0;
      }

      /* Search card container - centers and constrains width */
      .search-card-container {
          max-width: 600px;
          margin: 0 auto;
      }

      @media (max-width: 768px) {
          .search-card-container {
              max-width: 100%;
          }
      }

      /* Tabs container - centered and wider than search card */
      .tabs-container {
          max-width: 800px;
          margin: 0 auto 1.5rem;
      }

      /* Pill-style tabs */
      .tabs-pills {
          display: flex;
          gap: 0.5rem;
          padding: 0.5rem;
          background-color: var(--dm-gray-100);
          border-radius: var(--dm-radius-lg);
      }

      .tab-pill {
          flex: 1;
          padding: 0.75rem 1.5rem;
          background: transparent;
          border: none;
          border-radius: var(--dm-radius-md);
          color: var(--dm-text-secondary);
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
      }

      .tab-pill:hover:not(.active) {
          background-color: var(--dm-surface-raised);
          color: var(--dm-primary);
      }

      .tab-pill.active {
          background-color: var(--dm-white);
          color: var(--dm-primary);
          box-shadow: var(--dm-shadow-sm);
      }

      @media (max-width: 768px) {
          .tabs-container {
              max-width: 100%;
          }

          .tabs-pills {
              flex-direction: column;
          }
      }

      .tab-content {
          display: none;
          max-width: 720px;
          margin: 0 auto;
      }

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

      @media (max-width: 768px) {
          .tab-content {
              max-width: 100%;
          }
      }

      .vehicle-card {
          background: white;
          border-radius: 12px;
          padding: 2rem;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      }

      .vehicle-header {
          display: flex;
          justify-content: space-between;
          align-items: start;
          margin-bottom: 1.5rem;
          padding-bottom: 1.5rem;
          border-bottom: 2px solid #e5e7eb;
      }

      .vehicle-reg {
          font-size: 2rem;
          font-weight: 700;
          color: #1f2937;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
      }

      .vehicle-make-model {
          font-size: 1.25rem;
          color: #4b5563;
          margin-top: 0.25rem;
      }

      .status-badges {
          display: flex;
          gap: 0.5rem;
      }

      .status-badge {
          padding: 0.5rem 1rem;
          border-radius: 6px;
          font-size: 0.875rem;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 0.5rem;
      }

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

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

      .status-badge.danger {
          background: #fee2e2;
          color: #991b1b;
      }

      .vehicle-details {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 1.5rem;
      }

      .detail-item {
          padding: 1rem;
          background: #f9fafb;
          border-radius: 8px;
      }

      .detail-label {
          font-size: 0.75rem;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          color: #6b7280;
          font-weight: 600;
          margin-bottom: 0.25rem;
      }

      .detail-value {
          font-size: 1.125rem;
          color: #1f2937;
          font-weight: 600;
      }

      .history-list {
          display: grid;
          gap: 1rem;
      }

      .history-item {
          background: #f9fafb;
          padding: 1.5rem;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s;
          border: 2px solid transparent;
      }

      .history-item:hover {
          background: #f3f4f6;
          border-color: var(--dm-primary);
          transform: translateX(4px);
      }

      .history-item-reg {
          font-size: 1.25rem;
          font-weight: 700;
          color: #1f2937;
          margin-bottom: 0.25rem;
      }

      .history-item-make {
          color: #6b7280;
          margin-bottom: 0.5rem;
      }

      .history-item-date {
          font-size: 0.875rem;
          color: #9ca3af;
      }

      .empty-state {
          text-align: center;
          padding: 3rem 2rem;
          color: #6b7280;
      }

      .empty-state-icon {
          font-size: 3rem;
          margin-bottom: 1rem;
          opacity: 0.3;
      }

      .loading {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 3rem;
      }

      .spinner {
          border: 4px solid #f3f4f6;
          border-top: 4px solid var(--dm-primary);
          border-radius: 50%;
          width: 40px;
          height: 40px;
          animation: spin 1s linear infinite;
      }

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

      .alert {
          padding: 1rem 1.25rem;
          border-radius: 8px;
          margin-bottom: 1rem;
          display: flex;
          align-items: center;
          gap: 0.75rem;
      }

      .alert-error {
          background: #fee2e2;
          color: #991b1b;
          border: 1px solid #fecaca;
      }

      .alert-info {
          background: #dbeafe;
          color: #1e40af;
          border: 1px solid #bfdbfe;
      }

      /* Garage Search - Clean modern design */
      .garage-search-wrapper {
          margin-bottom: 1.5rem;
      }

      .garage-search-input-wrapper {
          position: relative;
          width: 100%;
      }

      .garage-search-icon {
          position: absolute;
          left: 1rem;
          top: 50%;
          transform: translateY(-50%);
          color: #9ca3af;
          pointer-events: none;
      }

      .garage-search-input {
          width: 100%;
          padding: 0.75rem 1rem 0.75rem 3rem;
          border: 2px solid #e5e7eb;
          border-radius: 8px;
          font-size: 0.875rem;
          transition: all 0.2s;
          background: #f9fafb;
      }

      .garage-search-input:focus {
          outline: none;
          border-color: var(--dm-primary);
          background: white;
          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
      }

      .garage-search-count {
          margin-top: 0.5rem;
          font-size: 0.75rem;
          color: #6b7280;
          font-weight: 500;
      }

      /* Garage List */
      .garage-list {
          display: grid;
          gap: 1rem;
      }

      .garage-vehicle-item {
          background: #f9fafb;
          padding: 1.5rem;
          border-radius: 8px;
          border: 2px solid transparent;
          transition: all 0.2s;
          cursor: pointer;
      }

      .garage-vehicle-item:hover {
          background: white;
          border-color: var(--dm-primary);
          transform: translateX(4px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      }

      .garage-vehicle-header {
          display: flex;
          justify-content: space-between;
          align-items: start;
          margin-bottom: 1rem;
          padding-bottom: 1rem;
          border-bottom: 1px solid #e5e7eb;
      }

      .garage-vehicle-title {
          flex: 1;
      }

      .garage-vehicle-reg {
          font-size: 1.5rem;
          font-weight: 700;
          color: #1f2937;
          margin-bottom: 0.25rem;
      }

      .garage-vehicle-make {
          font-size: 1rem;
          color: #6b7280;
          font-weight: 500;
      }

      .garage-remove-btn {
          background: #fee2e2;
          color: #991b1b;
          border: none;
          padding: 0.5rem 1rem;
          border-radius: 6px;
          font-size: 0.875rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          gap: 0.375rem;
          white-space: nowrap;
          position: relative;
          z-index: 10;
      }

      .garage-remove-btn:hover {
          background: #fecaca;
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
      }

      .garage-vehicle-details {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
          gap: 0.75rem;
          margin-bottom: 1rem;
      }

      .garage-detail-item {
          background: white;
          padding: 0.75rem;
          border-radius: 6px;
          border: 1px solid #e5e7eb;
      }

      .garage-detail-label {
          font-size: 0.625rem;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          color: #9ca3af;
          font-weight: 700;
          margin-bottom: 0.25rem;
      }

      .garage-detail-value {
          font-size: 0.875rem;
          color: #1f2937;
          font-weight: 600;
      }

      .garage-vehicle-badges {
          display: flex;
          gap: 0.5rem;
          flex-wrap: wrap;
      }

      .garage-badge {
          padding: 0.375rem 0.75rem;
          border-radius: 6px;
          font-size: 0.75rem;
          font-weight: 600;
          display: inline-flex;
          align-items: center;
          gap: 0.375rem;
          line-height: 1.2;
      }

      .garage-badge.success {
          background: #d1fae5;
          color: #065f46;
      }

      .garage-badge.warning {
          background: #fef3c7;
          color: #92400e;
      }

      .garage-badge.danger {
          background: #fee2e2;
          color: #991b1b;
      }

      .garage-badge.info {
          background: #dbeafe;
          color: #1e40af;
      }

      .garage-badge-detail {
          display: block;
          font-size: 0.625rem;
          opacity: 0.8;
          margin-top: 0.125rem;
      }

      @media (max-width: 768px) {
          .garage-vehicle-header {
              flex-direction: column;
              gap: 0.75rem;
          }

          .garage-remove-btn {
              width: 100%;
              justify-content: center;
          }

          .garage-vehicle-details {
              grid-template-columns: repeat(2, 1fr);
          }
      }

      /* Results Tab - Save/Remove Buttons */
      .save-vehicle-btn,
      .remove-vehicle-btn {
          border: none;
          padding: 0.75rem 1.5rem;
          border-radius: 8px;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s;
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          position: relative;
          z-index: 10;
      }

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

      .save-vehicle-btn:hover {
          background: #059669;
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
      }

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

      .remove-vehicle-btn:hover {
          background: #dc2626;
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
      }

      /* Authentication Styles */
      #authSection {
          max-width: 480px;
          margin: 0 auto;
      }

      .auth-card {
          background: white;
          border-radius: 12px;
          padding: 2.5rem;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      }

      .auth-header {
          text-align: center;
          margin-bottom: 2rem;
      }

      .auth-header h2 {
          margin: 0 0 0.5rem;
          color: #1f2937;
      }

      .auth-header p {
          color: #6b7280;
          margin: 0;
      }

      .auth-tabs {
          display: flex;
          gap: 0.5rem;
          margin-bottom: 2rem;
          border-bottom: 2px solid #e5e7eb;
      }

      .auth-tab {
          flex: 1;
          padding: 0.75rem;
          background: none;
          border: none;
          border-bottom: 3px solid transparent;
          color: #6b7280;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s;
      }

      .auth-tab:hover {
          color: var(--dm-primary);
      }

      .auth-tab.active {
          color: var(--dm-primary);
          border-bottom-color: var(--dm-primary);
      }

      .auth-form {
          display: none;
      }

      .auth-form.active {
          display: block;
      }

      .form-group {
          margin-bottom: 1.5rem;
      }

      .form-label {
          display: block;
          font-weight: 600;
          color: #374151;
          margin-bottom: 0.5rem;
          font-size: 0.875rem;
      }

      .form-input {
          width: 100%;
          padding: 0.75rem 1rem;
          border: 2px solid #e5e7eb;
          border-radius: 8px;
          font-size: 1rem;
          transition: all 0.2s;
      }

      .form-input:focus {
          outline: none;
          border-color: var(--dm-primary);
          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
      }

      .form-btn {
          width: 100%;
          padding: 0.875rem;
          background: var(--dm-primary);
          color: white;
          border: none;
          border-radius: 8px;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s;
      }

      .form-btn:hover:not(:disabled) {
          background: #2563eb;
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
      }

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

      #appSection {
          display: none;
      }

      @media (max-width: 768px) {
          .search-input-group {
              width: 100%;
              max-width: 100%;
          }

          .search-input {
              font-size: 1.75rem;
              padding: 0.875rem 1rem;
              letter-spacing: 0.12em;
          }

          .search-btn {
              width: 100%;
              max-width: 100%;
              justify-content: center;
          }

          .vehicle-header {
              flex-direction: column;
              gap: 1rem;
          }

          .vehicle-reg {
              font-size: 1.5rem;
          }

          .vehicle-details {
              grid-template-columns: 1fr;
          }

          .auth-card {
              padding: 1.5rem;
          }
      }

      /* Spinner animation */
      @keyframes spin {
          from {
              transform: rotate(0deg);
          }
          to {
              transform: rotate(360deg);
          }
      }

      .spinning {
          display: inline-block;
          animation: spin 1s linear infinite;
      }

      /* Disabled button state */
      button:disabled {
          opacity: 0.7;
          cursor: not-allowed;
      }

      /* Not Found State */
      .not-found-container {
          text-align: center;
          padding: 3rem 2rem;
          max-width: 500px;
          margin: 0 auto;
      }

      .not-found-icon {
          opacity: 0.8;
      }

      .not-found-container .alert-info {
          background: #eff6ff;
          border-color: #3b82f6;
      }