@layer base {
  .container {
    max-width: 48rem;
    margin: 0 auto;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-family-base);
  }

  .header {
    margin-bottom: var(--spacing-6);
    text-align: center;
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    font-family: var(--font-family-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: var(--spacing-2);
  }

  .description {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    margin: 0;
  }

  .searchSection {
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-4);
    background-color: var(--muted);
    border-radius: var(--radius);
  }

  .inputGroup {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
  }

  .inputWrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .searchIcon {
    position: absolute;
    left: var(--spacing-3);
    color: var(--muted-foreground);
    pointer-events: none;
    z-index: 1;
  }

  .searchInput {
    padding-left: calc(var(--spacing-3) * 2 + 18px);
  }

  .buttonGroup {
    display: flex;
    gap: var(--spacing-2);
    justify-content: flex-end;
  }

  .testSection {
    margin-bottom: var(--spacing-6);
  }

  .sectionTitle {
    font-family: var(--font-family-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: var(--spacing-3);
  }

  .testButtons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
  }

  .testButton {
    font-size: 0.875rem;
    border: 1px solid var(--border);
  }

  .loadingSection {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background-color: var(--info);
    color: var(--info-foreground);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-4);
    font-weight: 500;
  }

  .errorSection {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background-color: var(--error);
    color: var(--error-foreground);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-4);
  }

  .errorSection h4 {
    margin: 0 0 var(--spacing-1) 0;
    font-weight: 600;
  }

  .errorSection p {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.9;
  }

  .resultsSection {
    margin-bottom: var(--spacing-6);
  }

  .resultsHeader {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    color: var(--success);
  }

  .resultsHeader h3 {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: 1.125rem;
    font-weight: 600;
  }

  .resultsList {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
  }

  .resultItem {
    padding: var(--spacing-4);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: box-shadow var(--animation-duration-fast) ease;
  }

  .resultItem:hover {
    box-shadow: var(--shadow-md);
  }

  .resultMain {
    margin-bottom: var(--spacing-3);
  }

  .resultName {
    margin: 0 0 var(--spacing-1) 0;
    font-family: var(--font-family-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
  }

  .resultAddress {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.4;
  }

  .resultDetails {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    font-size: 0.75rem;
    font-family: var(--font-family-monospace);
  }

  .coordinates {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
  }

  .coordLabel {
    color: var(--muted-foreground);
    font-weight: 600;
  }

  .coordValue {
    color: var(--primary);
    font-weight: 500;
  }

  .placeId,
  .types {
    display: flex;
    gap: var(--spacing-2);
    align-items: flex-start;
  }

  .placeIdLabel,
  .typesLabel {
    color: var(--muted-foreground);
    font-weight: 600;
    min-width: 4rem;
  }

  .placeIdValue,
  .typesValue {
    color: var(--foreground);
    word-break: break-all;
  }

  .statusSection {
    padding: var(--spacing-4);
    background-color: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
  }

  .statusGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--spacing-3);
  }

  .statusItem {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
  }

  .statusLabel {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .statusValue {
    font-size: 0.875rem;
    color: var(--foreground);
    font-family: var(--font-family-monospace);
  }

  /* Mobile responsive design */
  @media (max-width: 768px) {
    .container {
      padding: var(--spacing-4);
      margin: var(--spacing-4);
    }

    .inputGroup {
      gap: var(--spacing-2);
    }

    .buttonGroup {
      justify-content: stretch;
    }

    .buttonGroup > * {
      flex: 1;
    }

    .testButtons {
      justify-content: center;
    }

    .resultDetails {
      font-size: 0.7rem;
    }

    .coordinates {
      flex-wrap: wrap;
      gap: var(--spacing-2);
    }

    .statusGrid {
      grid-template-columns: 1fr;
    }
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .container {
      border-width: 2px;
    }

    .resultItem {
      border-width: 2px;
    }

    .title,
    .sectionTitle,
    .resultName {
      font-weight: 700;
    }
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .resultItem {
      transition: none;
    }
  }

  /* Dark mode adjustments */
  :global(.dark) .container {
    background-color: var(--card);
    border-color: var(--border);
  }

  :global(.dark) .searchSection {
    background-color: var(--muted);
  }

  :global(.dark) .resultItem {
    background-color: var(--surface);
    border-color: var(--border);
  }

  :global(.dark) .statusSection {
    background-color: var(--surface);
    border-color: var(--border);
  }
}