html {
      scroll-behavior: smooth;
    }

    * {
      font-family: 'Inter', sans-serif;
    }

    .headline-font {
      font-family: 'Space Grotesk', sans-serif;
    }

    .logo-card {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .logo-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    }

    .logo-card:hover .ai-overlay {
      opacity: 1;
    }

    .logo-download-btn {
      background: rgba(255, 255, 255, 0.95);
      color: #6b21a8;
      border: 1px solid rgba(255, 255, 255, 0.8);
    }

    .logo-download-btn:hover {
      background: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 8px 24px -10px rgba(255, 255, 255, 0.85);
    }

    .logo-card:hover .logo-content {
      filter: brightness(0.95);
    }

    .award-badge {
      background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
      box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4);
    }

    .search-glow:focus {
      box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.2);
    }

    .cta-button {
      background: linear-gradient(135deg, #7c3aed 0%, #6b21a8 100%);
      transition: all 0.3s ease;
    }

    .cta-button:hover {
      background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
      transform: translateY(-2px);
      box-shadow: 0 10px 30px -5px rgba(107, 33, 168, 0.4);
    }

    .ai-glow {
      background: linear-gradient(90deg, #06b6d4, #8b5cf6, #06b6d4);
      background-size: 200% 100%;
      animation: shimmer 3s ease-in-out infinite;
    }

    @keyframes shimmer {

      0%,
      100% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }
    }

    .micro-text {
      font-size: 9px;
      letter-spacing: 0.1em;
    }

    .theme-toggle {
      border: 1px solid #5a4a3f;
      color: #e8e0d8;
      background: #2a1d16;
      transition: all 0.2s ease;
    }

    .theme-toggle:hover {
      border-color: #8a7a6f;
      color: #ffffff;
    }

    html.dark-mode body {
      background: #121212;
      color: #e5e7eb;
    }

    html.dark-mode header {
      background: #1a1a1a;
      border-bottom: 1px solid #2a2a2a;
    }

    html.dark-mode .search-glow {
      background: #111827;
      border-color: #374151;
      color: #e5e7eb;
    }

    html.dark-mode .search-glow::placeholder {
      color: #9ca3af;
    }

    html.dark-mode .bg-\[\#f8f6f3\],
    html.dark-mode section.py-16,
    html.dark-mode footer {
      background: #18181b !important;
      border-color: #2a2a2a !important;
    }

    html.dark-mode section.py-20 .bg-white\/70 {
      background: rgba(10, 10, 10, 0.55) !important;
    }

    html.dark-mode .text-\[\#1a1a1a\],
    html.dark-mode .text-\[\#3f2a1f\],
    html.dark-mode .text-\[\#374151\],
    html.dark-mode .text-\[\#6b7280\],
    html.dark-mode .text-\[\#6b21a8\] {
      color: #e5e7eb !important;
    }

    html.dark-mode .logo-card,
    html.dark-mode .logo-card.bg-white {
      background: #27272a !important;
      border: 1px solid #3f3f46;
    }

    html.dark-mode .logo-card .text-\[\#1a1a1a\] {
      color: #e5e7eb !important;
    }

    html.dark-mode .logo-card svg text,
    html.dark-mode .logo-card svg circle,
    html.dark-mode .logo-card svg rect,
    html.dark-mode .logo-card svg path,
    html.dark-mode .logo-card svg polygon,
    html.dark-mode .logo-card svg ellipse {
      stroke: #e5e7eb;
      fill: #e5e7eb;
    }

    html.dark-mode .logo-card .ai-overlay svg {
      stroke: currentColor;
      fill: none;
    }

    html.dark-mode .logo-card .ai-overlay {
      background: linear-gradient(to top, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.15)) !important;
    }

    html.dark-mode .logo-download-btn {
      background: rgba(39, 39, 42, 0.95) !important;
      color: #e5e7eb !important;
      border-color: #52525b !important;
      box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .55);
    }

    html.dark-mode .logo-download-btn:hover {
      background: #3f3f46 !important;
      color: #ffffff !important;
      border-color: #71717a !important;
      box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .75);
    }

    html.dark-mode .text-\[\#a89080\],
    html.dark-mode .text-\[\#9ca3af\] {
      color: #9ca3af !important;
    }

body {
      box-sizing: border-box;
    }

    /* Smooth theme transitions across all visible surfaces */
    body,
    body * {
      transition: background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
    }

    /* Light mode modal surfaces */
    #logoAssetsPanel,
    #filePreviewPanel {
      background: #ffffff;
      color: #111827;
      border: 1px solid #e5e7eb;
    }

    #logoAssetsPanelHeader,
    #filePreviewPanelHeader {
      background: #ffffff;
      border-bottom-color: #e5e7eb;
    }

    /* Studio panel gets a brighter purple in light mode */
    #logoStudioPanel {
      background: radial-gradient(120% 120% at 0% 0%, #4f3aa8 0%, #2e2566 56%, #171b3e 100%) !important;
      border-color: rgba(196, 181, 253, .35) !important;
    }

    #logoStudioPanelHeader {
      background: rgba(31, 27, 71, .85) !important;
      border-bottom-color: rgba(196, 181, 253, .28) !important;
    }

    /* Theme-aware pagination controls rendered by JS */
    #browsePagination button {
      background: #ffffff;
      color: #1f2937;
      border-color: #d6d3d1;
    }

    #browsePagination button:hover:not(:disabled) {
      background: #f8fafc;
    }

    /* Dark mode comprehensive overrides */
    html.dark-mode #heroSection .bg-white\/70 {
      background: rgba(10, 10, 10, 0.58) !important;
    }

    html.dark-mode #logoAssetsPanel,
    html.dark-mode #filePreviewPanel {
      background: #18181b !important;
      color: #e5e7eb !important;
      border-color: #3f3f46 !important;
    }

    html.dark-mode #logoAssetsPanelHeader,
    html.dark-mode #filePreviewPanelHeader {
      background: #18181b !important;
      border-bottom-color: #3f3f46 !important;
    }

    html.dark-mode #logoAssetsTitle,
    html.dark-mode #filePreviewTitle {
      color: #f3f4f6 !important;
    }

    html.dark-mode #logoAssetsContent,
    html.dark-mode #filePreviewContent {
      color: #d1d5db !important;
    }

    html.dark-mode #logoAssetsContent .text-gray-900,
    html.dark-mode #filePreviewContent .text-gray-900 {
      color: #f3f4f6 !important;
    }

    html.dark-mode #logoAssetsContent .text-gray-800,
    html.dark-mode #filePreviewContent .text-gray-800,
    html.dark-mode #logoAssetsContent .text-gray-700,
    html.dark-mode #filePreviewContent .text-gray-700 {
      color: #e5e7eb !important;
    }

    html.dark-mode #logoAssetsContent .text-gray-600,
    html.dark-mode #filePreviewContent .text-gray-600,
    html.dark-mode #logoAssetsContent .text-gray-500,
    html.dark-mode #filePreviewContent .text-gray-500 {
      color: #9ca3af !important;
    }

    html.dark-mode #logoAssetsContent .bg-white,
    html.dark-mode #filePreviewContent .bg-white {
      background: #27272a !important;
      border-color: #3f3f46 !important;
    }

    html.dark-mode #logoAssetsContent .border-gray-200,
    html.dark-mode #filePreviewContent .border-gray-200,
    html.dark-mode #logoAssetsContent .border-gray-300,
    html.dark-mode #filePreviewContent .border-gray-300 {
      border-color: #3f3f46 !important;
    }

    .asset-summary-card {
      background: #fafafa;
    }

    .asset-variant-card {
      overflow: hidden;
    }

    .asset-variant-card summary {
      transition: background-color .2s ease;
    }

    .asset-variant-card summary:hover {
      background: #f3f4f6;
    }

    .asset-file-row {
      transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .asset-file-row:hover {
      transform: translateY(-1px);
      border-color: #c4b5fd;
      box-shadow: 0 8px 20px -14px rgba(76, 29, 149, 0.45);
    }

    .asset-open-btn,
    .asset-download-btn {
      transition: all .2s ease;
    }

    html.dark-mode #browsePagination button {
      background: #27272a !important;
      color: #e5e7eb !important;
      border-color: #3f3f46 !important;
    }

    html.dark-mode #browsePagination button:hover:not(:disabled) {
      background: #3f3f46 !important;
    }

    html.dark-mode .asset-summary-card,
    html.dark-mode .asset-variant-card {
      background: #1f1f23 !important;
      border-color: #3f3f46 !important;
    }

    html.dark-mode .asset-variant-card summary:hover {
      background: #27272a !important;
    }

    html.dark-mode .asset-file-row {
      background: #27272a !important;
      border-color: #3f3f46 !important;
    }

    html.dark-mode .asset-file-row:hover {
      border-color: #6366f1 !important;
      box-shadow: 0 8px 20px -14px rgba(99, 102, 241, .45);
    }

    html.dark-mode .asset-open-btn {
      color: #e5e7eb !important;
      border-color: #52525b !important;
      background: #18181b !important;
    }

    html.dark-mode .asset-open-btn:hover {
      background: #3f3f46 !important;
      border-color: #71717a !important;
    }

    html.dark-mode #logoStudioPanel {
      background: radial-gradient(120% 120% at 0% 0%, #261f57 0%, #17133b 56%, #0d132b 100%) !important;
      border-color: rgba(139, 92, 246, .35) !important;
    }

    html.dark-mode #logoStudioPanelHeader {
      background: rgba(15, 16, 42, .9) !important;
      border-bottom-color: rgba(139, 92, 246, .3) !important;
    }

    html.dark-mode #logoStudioResult .text-gray-900,
    html.dark-mode #logoStudioResult .text-gray-800 {
      color: #f3f4f6 !important;
    }

    html.dark-mode #logoStudioResult .text-gray-600,
    html.dark-mode #logoStudioResult .text-gray-500 {
      color: #cbd5e1 !important;
    }

    /* Responsive refinements */
    @media (max-width: 1024px) {
      .logo-card:hover {
        transform: translateY(-4px) scale(1.01);
      }
    }

    @media (max-width: 768px) {
      .hero-bg-brands {
        opacity: .55;
      }

      .logo-download-btn {
        width: 76% !important;
      }

      #logoAssetsContent details summary,
      #logoAssetsContent .asset-file-row {
        gap: .5rem;
      }

      #logoAssetsContent .asset-file-row .truncate {
        max-width: 50vw;
      }

      #logoAssetsContent .asset-file-row .shrink-0 {
        gap: .375rem !important;
      }
    }

    @media (max-width: 640px) {
      .logo-card:hover {
        transform: none;
        box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.22);
      }

      /* Reduce logo grid card visual height by ~20% on small screens */
      .logo-card .logo-content {
        aspect-ratio: 1.25 / 1 !important;
        padding: .75rem !important;
      }

      .logo-card .logo-content img,
      .logo-card .logo-content svg {
        max-width: 64px !important;
      }

      .logo-download-btn {
        width: 82% !important;
        font-size: 10px;
        padding: .35rem .5rem;
      }

      #logoAssetsContent .asset-summary-card {
        flex-direction: column;
        align-items: stretch;
      }

      #logoAssetsContent #downloadAllZipBtn {
        width: 100%;
      }

      #logoAssetsContent details summary {
        padding: .65rem .8rem !important;
      }

      #logoAssetsContent .asset-file-row {
        flex-direction: column;
        align-items: stretch;
      }

      #logoAssetsContent .asset-file-row .truncate {
        max-width: 100%;
      }

      #logoAssetsContent .asset-file-row .shrink-0 {
        width: 100%;
      }

      #logoAssetsContent .asset-open-btn,
      #logoAssetsContent .asset-download-btn {
        width: 25vw !important;
        min-width: 78px;
        max-width: 120px;
        flex: 0 0 auto;
      }

      #logoAssetsContent .asset-file-row .shrink-0 {
        justify-content: flex-end;
      }
    }