/* ========== CSS Variables ========== */
    :root {
      --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 50%, #d9e0e8 100%);
      --bg-solid: #F9FAFB;
      --card-bg: #ffffff;
      --card-border: #e2e8f0;
      --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
      --card-shadow-hover: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
      --input-bg: #ffffff;
      --input-border: #e2e8f0;
      --input-text: #1f2937;
      --input-placeholder: #9ca3af;
      --text-primary: #1f2937;
      --text-secondary: #6b7280;
      --text-muted: #9ca3af;
      --accent-bg: #374151;
      --accent-hover: #1f2937;
      --field-bg: #f8fafc;
      --logo-gradient: linear-gradient(135deg, #374151 0%, #4b5563 50%, #374151 100%);
      --toggle-bg: #ffffff;
      --toggle-border: #e2e8f0;
      --toggle-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      --transition-speed: 500ms;
      --sidebar-bg: #ffffff;
      --sidebar-border: #e2e8f0;
      --new-search-bg: #d9e3ce;
      --new-search-hover: #c8d4bc;
      --new-search-text: #3d4f35;
      --new-search-border: #b8c9ac;
      --success-bg: #ecfdf5;
      --success-border: #a7f3d0;
      --success-text: #065f46;
      --error-bg: #fef2f2;
      --error-border: #fecaca;
      --error-text: #991b1b;
    }

    [data-theme="dark"] {
      --bg-gradient: #0a0a0a;
      --bg-solid: #0a0a0a;
      --card-bg: rgba(30, 30, 30, 0.6);
      --card-border: rgba(255, 255, 255, 0.08);
      --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      --card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5);
      --input-bg: rgba(40, 40, 40, 0.5);
      --input-border: rgba(255, 255, 255, 0.1);
      --input-text: #e5e5e5;
      --input-placeholder: #525252;
      --text-primary: #e5e5e5;
      --text-secondary: #a3a3a3;
      --text-muted: #525252;
      --accent-bg: #262626;
      --accent-hover: #404040;
      --field-bg: rgba(40, 40, 40, 0.3);
      --logo-gradient: linear-gradient(135deg, #e5e5e5 0%, #f5f5f5 50%, #d4d4d4 100%);
      --toggle-bg: rgba(30, 30, 30, 0.8);
      --toggle-border: rgba(255, 255, 255, 0.1);
      --toggle-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      --sidebar-bg: rgba(20, 20, 20, 0.95);
      --sidebar-border: rgba(255, 255, 255, 0.08);
      --new-search-bg: rgba(60, 60, 60, 0.5);
      --new-search-hover: rgba(80, 80, 80, 0.6);
      --new-search-text: #d4d4d4;
      --new-search-border: rgba(255, 255, 255, 0.12);
      --success-bg: rgba(20, 80, 60, 0.4);
      --success-border: rgba(50, 150, 100, 0.3);
      --success-text: #6ee7b7;
      --error-bg: rgba(100, 30, 30, 0.4);
      --error-border: rgba(200, 60, 60, 0.3);
      --error-text: #fca5a5;
    }

    /* ========== Base Styles ========== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      min-height: 100vh;
      background: var(--bg-gradient);
      color: var(--text-primary);
      transition: background var(--transition-speed) ease, color var(--transition-speed) ease;
    }

    /* ========== Theme Toggle ========== */
    .theme-toggle {
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 100;
      padding: 0.75rem;
      border-radius: 50%;
      background: var(--toggle-bg);
      border: 1px solid var(--toggle-border);
      box-shadow: var(--toggle-shadow);
      cursor: pointer;
      transition: all 300ms ease;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .theme-toggle:hover {
      transform: scale(1.1);
      box-shadow: var(--card-shadow);
    }

    [data-theme="dark"] .theme-toggle {
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
    }

    .theme-toggle svg {
      width: 1.25rem;
      height: 1.25rem;
      color: var(--text-primary);
    }

    [data-theme="dark"] .theme-toggle svg {
      color: #fbbf24;
    }

    /* ========== New Search Button (Top Left) ========== */
    .new-search-btn-top {
      position: fixed;
      top: 1rem;
      left: 2rem;
      z-index: 100;
      padding: 0.75rem;
      border-radius: 50%;
      background: var(--new-search-bg);
      border: 1px solid var(--new-search-border);
      box-shadow: var(--toggle-shadow);
      cursor: pointer;
      transition: all 300ms ease;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .new-search-btn-top.visible {
      display: flex;
    }

    .new-search-btn-top.sidebar-open {
      left: 420px;
    }

    .new-search-btn-top:hover {
      background: var(--new-search-hover);
      transform: scale(1.1);
      box-shadow: var(--card-shadow);
    }

    .new-search-btn-top svg {
      width: 1.25rem;
      height: 1.25rem;
      color: var(--new-search-text);
    }

    /* ========== Google Sheets Sync Button ========== */
    .sync-btn-top {
      position: fixed; top: 1rem; left: 2rem; z-index: 100;
      display: inline-flex; align-items: center; gap: .5rem;
      min-height: 42px; padding: .65rem .9rem; border-radius: .75rem;
      background: var(--card-bg); color: var(--text-primary);
      border: 1px solid var(--card-border); box-shadow: var(--toggle-shadow);
      cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600;
      backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%);
      transition: transform 280ms cubic-bezier(.22,1,.36,1), box-shadow 280ms ease, background 220ms ease, border-color 220ms ease;
      overflow: hidden;
    }
    .sync-btn-top::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.22) 48%, transparent 70%);
      transform: translateX(-130%); transition: transform 650ms cubic-bezier(.22,1,.36,1);
    }
    .sync-btn-top:hover {
      transform: translateY(-2px); background: var(--field-bg);
      box-shadow: 0 14px 32px -15px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.08) inset;
    }
    .sync-btn-top:hover::before { transform: translateX(130%); }
    .sync-btn-top:active { transform: translateY(0) scale(.985); }
    .sync-btn-top svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; transition: transform 600ms cubic-bezier(.22,1,.36,1); }
    .sync-btn-top.syncing svg { animation: syncIconSpin 1.1s linear infinite; }
    .sync-btn-top:disabled { cursor: wait; opacity: .78; }
    @keyframes syncIconSpin { to { transform: rotate(360deg); } }
    [data-theme="dark"] .sync-btn-top {
      background: rgba(30,30,30,.72);
      box-shadow: 0 10px 30px -12px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
    }
    [data-theme="dark"] .sync-btn-top:hover {
      box-shadow: 0 16px 40px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07) inset;
    }
    .progress-container.indeterminate .progress-fill {
      width: 35% !important; animation: syncProgress 1.35s ease-in-out infinite;
    }
    @keyframes syncProgress {
      0% { transform: translateX(-130%); } 50% { transform: translateX(90%); } 100% { transform: translateX(300%); }
    }

    /* ========== Log Toggle Button ========== */
    .log-toggle-btn {
      position: fixed;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 150;
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      padding: 0.75rem 0.5rem;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-left: none;
      border-radius: 0 0.75rem 0.75rem 0;
      box-shadow: var(--card-shadow);
      cursor: pointer;
      transition: all 300ms ease;
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }

    .log-toggle-btn:hover {
      background: var(--field-bg);
      padding-left: 0.75rem;
    }

    .log-toggle-btn.visible {
      display: flex;
    }

    .log-toggle-btn svg {
      width: 1.25rem;
      height: 1.25rem;
      color: var(--text-primary);
      writing-mode: horizontal-tb;
    }

    .log-toggle-btn span {
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--text-secondary);
    }

    /* ========== Main Container ========== */
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      padding: 1rem;
      padding-bottom: 2rem;
      transition: padding 400ms ease;
    }

    .container.results-shown {
      min-height: auto;
      padding-top: 1.5rem;
    }

    .container.sidebar-open {
      padding-left: 380px;
    }

    @media (max-width: 900px) {
      .container.sidebar-open {
        padding-left: 1rem;
      }
    }

    /* ========== Search Section (Animated) ========== */
    .search-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      width: 100%;
      max-width: 700px;
      transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
      transform-origin: top center;
    }

    .container.results-shown .search-section {
      flex: none;
    }

    /* Скрываем только поле поиска при показе результатов */
    .container.results-shown .search-box {
      opacity: 0;
      transform: translateY(-20px);
      pointer-events: none;
      max-height: 0;
      overflow: hidden;
      margin: 0;
      padding: 0;
      border: none;
    }

    /* ========== Logo ========== */
    .logo {
      text-align: center;
      margin-bottom: 2rem;
    }

    /* Компактный логотип при показе результатов */
    .container.results-shown .logo {
      margin-bottom: 0;
      margin-top: -0.5rem;
      margin-bottom: 1.5rem;
    }

    .logo-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      margin-bottom: 1rem;
      background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
      border-radius: 1.25rem;
      box-shadow: 0 10px 30px -5px rgba(249, 115, 22, 0.4);
      transition: width 0.5s ease, height 0.5s ease, margin 0.5s ease, border-radius 0.5s ease, box-shadow 0.5s ease;
    }

    /* Компактная иконка при показе результатов */
    .container.results-shown .logo-icon {
      width: 54px;
      height: 54px;
      margin-bottom: 0.4rem;
      border-radius: 0.65rem;
      box-shadow: 0 4px 15px -2px rgba(249, 115, 22, 0.35);
    }

    .logo-icon svg {
      width: 48px;
      height: 48px;
      color: #ffffff;
      transition: width 0.5s ease, height 0.5s ease;
    }

    /* Компактная иконка SVG при показе результатов */
    .container.results-shown .logo-icon svg {
      width: 24px;
      height: 24px;
    }

    .logo h1 {
      font-size: 3rem;
      font-weight: 700;
      background: var(--logo-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      cursor: pointer;
      transition: font-size 0.5s ease;
    }

    /* Компактный заголовок при показе результатов */
    .container.results-shown .logo h1 {
      font-size: 1.5rem;
    }

    .logo p {
      margin-top: 0.5rem;
      color: var(--text-secondary);
      font-size: 1rem;
      transition: font-size 0.5s ease, opacity 0.5s ease;
    }

    /* Скрываем описание при показе результатов */
    .container.results-shown .logo p {
      font-size: 0.9rem;
      margin-top: 5px;
    }

    .logo h1:hover {
      opacity: 0.8;
    }

    /* ========== Search Box ========== */
    .search-box {
      position: relative;
      width: 100%;
      background: var(--input-bg);
      border: 1px solid var(--input-border);
      border-radius: 1rem;
      box-shadow: var(--card-shadow);
      transition: all 300ms ease;
    }

    .search-box:hover {
      box-shadow: var(--card-shadow-hover);
    }

    .bulk-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.25rem;
      border-bottom: 1px solid var(--card-border);
      background: var(--field-bg);
      border-radius: 1rem 1rem 0 0;
    }

    .bulk-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .bulk-title svg {
      width: 1.25rem;
      height: 1.25rem;
    }

    .bulk-textarea {
      width: 100%;
      padding: 1rem 1.25rem;
      font-size: 1rem;
      font-family: inherit;
      border: none;
      background: transparent;
      color: var(--input-text);
      resize: vertical;
      min-height: 120px;
      max-height: 300px;
      outline: none;
    }

    .bulk-textarea::placeholder {
      color: var(--input-placeholder);
    }

    .bulk-textarea:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .bulk-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.75rem 1rem;
      background: var(--field-bg);
      border-radius: 0 0 1rem 1rem;
      border-top: 1px solid var(--card-border);
    }

    .domain-counter {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .domain-counter svg {
      width: 1rem;
      height: 1rem;
    }

    .domain-counter strong {
      color: var(--text-primary);
    }

    .search-btn {
      padding: 0.75rem 1.5rem;
      background: var(--accent-bg);
      color: #ffffff;
      border: none;
      border-radius: 0.5rem;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 200ms ease;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .search-btn:hover {
      background: var(--accent-hover);
    }

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

    .search-btn svg {
      width: 1.1rem;
      height: 1.1rem;
    }

    .search-btn .spinner {
      animation: spin 1s linear infinite;
    }

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

    /* ========== Results Filter ========== */
    .results-filter {
      display: none;
      width: 100%;
      max-width: 900px;
      padding: 0 1rem;
      margin-bottom: 1rem;
    }

    .container.results-shown .results-filter {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .filter-buttons {
      display: flex;
      gap: 0.5rem;
      background: var(--field-bg);
      padding: 0.375rem;
      border-radius: 0.75rem;
      border: 1px solid var(--input-border);
    }

    .filter-btn {
      padding: 0.5rem 1rem;
      background: transparent;
      border: none;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 200ms ease;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .filter-btn:hover {
      color: var(--text-primary);
    }

    .filter-btn.active {
      background: var(--card-bg);
      color: var(--text-primary);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .filter-btn svg {
      width: 1rem;
      height: 1rem;
    }

    .filter-count {
      font-size: 0.75rem;
      padding: 0.125rem 0.375rem;
      background: var(--accent-bg);
      color: #ffffff;
      border-radius: 0.25rem;
    }

    .filter-btn.active .filter-count {
      background: var(--accent-hover);
    }

    .filter-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .execution-time {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      background: var(--field-bg);
      border-radius: 0.5rem;
      border: 1px solid var(--input-border);
      font-size: 0.8rem;
      color: var(--text-secondary);
    }

    .execution-time svg {
      width: 0.875rem;
      height: 0.875rem;
    }

    .execution-time strong {
      color: var(--text-primary);
    }

    /* ========== Export Dropdown ========== */
    .filter-export {
      position: relative;
    }

    .filter-export-btn {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: var(--field-bg);
      color: var(--text-primary);
      border: 1px solid var(--input-border);
      border-radius: 0.5rem;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 200ms ease;
    }

    .filter-export-btn:hover {
      background: var(--input-bg);
      border-color: var(--accent-bg);
    }

    .filter-export-btn svg {
      width: 1rem;
      height: 1rem;
    }

    .filter-export .export-menu {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 0.5rem;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 0.5rem;
      box-shadow: var(--card-shadow);
      z-index: 50;
      min-width: 140px;
      overflow: hidden;
    }

    .filter-export:hover .export-menu,
    .filter-export:focus-within .export-menu {
      display: block;
    }

    .export-menu-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      padding: 0.75rem 1rem;
      background: transparent;
      border: none;
      color: var(--text-primary);
      font-size: 0.875rem;
      cursor: pointer;
      transition: background 200ms ease;
      text-align: left;
    }

    .export-menu-item:hover {
      background: var(--field-bg);
    }

    .export-menu-item svg {
      width: 1rem;
      height: 1rem;
      color: var(--text-muted);
    }

    /* ========== Results Container ========== */
    .results-container {
      display: none;
      width: 100%;
      max-width: 900px;
      padding: 0 1rem;
      animation: fadeIn 500ms ease-out;
    }

    .container.results-shown .results-container {
      display: block;
    }

    /* ========== Result Row ========== */
    .result-row {
      display: flex;
      align-items: center;
      padding: 1rem 1.25rem;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 0.75rem;
      margin-bottom: 0.75rem;
      box-shadow: var(--card-shadow);
      transition: all 300ms ease;
      animation: slideInRow 400ms ease-out backwards;
    }

    .result-row:hover {
      transform: translateX(4px);
      box-shadow: var(--card-shadow-hover);
    }

    @keyframes slideInRow {
      from {
        opacity: 0;
        transform: translateX(-30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Status Icon */
    .result-status-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 1rem;
      flex-shrink: 0;
    }

    .result-status-icon.success {
      background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
      border: 2px solid var(--success-border);
    }

    [data-theme="dark"] .result-status-icon.success {
      background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
      border-color: #047857;
    }

    .result-status-icon.success svg {
      color: #10b981;
    }

    .result-status-icon.error {
      background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
      border: 2px solid var(--error-border);
    }

    [data-theme="dark"] .result-status-icon.error {
      background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
      border-color: #b91c1c;
    }

    .result-status-icon.error svg {
      color: #a77f7f;
    }

    .result-status-icon svg {
      width: 1.25rem;
      height: 1.25rem;
    }

    /* Result Content */
    .result-content {
      flex: 1;
      min-width: 0;
    }

    .result-domain {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
    }

    .result-domain svg {
      width: 1rem;
      height: 1rem;
      color: var(--text-muted);
    }

    .result-meta {
      display: flex;
      align-items: center;
      gap: 1rem;
      font-size: 0.85rem;
      color: var(--text-secondary);
    }

    .result-meta-item {
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }

    .result-meta-item svg {
      width: 0.875rem;
      height: 0.875rem;
    }

    .result-date {
      font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    }

    .result-date.empty {
      color: var(--text-muted);
      font-style: italic;
    }

    /* Error Block */
    .result-error {
      display: none;
      margin-top: 0.5rem;
      margin-right: 0.8rem;
      padding: 0.5rem 0.75rem;
      background: var(--error-bg);
      border: 1px solid var(--error-border);
      border-radius: 0.5rem;
      border-left: 3px solid #ef4444;
      font-size: 0.85rem;
      color: var(--error-text);
      align-items: flex-start;
      gap: 0.5rem;
    }

    .result-row.has-error .result-error {
      display: flex;
    }

    .result-error svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
      margin-top: 0.1rem;
    }

    /* Status Badge */
    .result-badge {
      padding: 0.375rem 0.75rem;
      border-radius: 2rem;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-left: auto;
      flex-shrink: 0;
    }

    .result-badge.success {
      background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
      color: #065f46;
      border: 1px solid #a7f3d0;
    }

    [data-theme="dark"] .result-badge.success {
      background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
      color: #a7f3d0;
      border-color: #047857;
    }

    .result-badge.error {
      background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
      color: #991b1b;
      border: 1px solid #fecaca;
    }

    [data-theme="dark"] .result-badge.error {
      background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
      color: #fecaca;
      border-color: #b91c1c;
    }

    /* ========== Empty Results ========== */
    .empty-results {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 3rem;
      text-align: center;
    }

    .empty-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      background: var(--field-bg);
      border-radius: 50%;
      margin-bottom: 1.5rem;
    }

    .empty-icon svg {
      width: 2.5rem;
      height: 2.5rem;
      color: var(--text-muted);
    }

    .empty-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.5rem;
    }

    .empty-text {
      color: var(--text-secondary);
      margin-bottom: 1.5rem;
    }

    /* ========== Log Sidebar ========== */
    .log-sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: 400px;
      height: 100vh;
      background: var(--sidebar-bg);
      border-right: 1px solid var(--sidebar-border);
      box-shadow: 5px 0 25px rgba(0, 0, 0, 0.1);
      z-index: 200;
      transform: translateX(-100%);
      transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
    }

    .log-sidebar.visible {
      transform: translateX(0);
    }

    .log-sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.25rem;
      background: var(--field-bg);
      border-bottom: 1px solid var(--card-border);
    }

    .log-sidebar-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .log-sidebar-title svg {
      width: 1.25rem;
      height: 1.25rem;
    }

    .log-sidebar-close {
      padding: 0.5rem;
      background: transparent;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
      color: var(--text-muted);
      transition: all 200ms ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .log-sidebar-close svg {
      width: 1.25rem;
      height: 1.25rem;
    }

    .log-sidebar-status {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.25rem;
      background: var(--field-bg);
      border-bottom: 1px solid var(--card-border);
      font-size: 0.85rem;
      color: var(--text-secondary);
    }

    .log-sidebar-status .spinner {
      animation: spin 1s linear infinite;
    }

    .log-sidebar-status.completed {
      color: #22c55e;
    }

    .log-sidebar-status.error {
      color: #ef4444;
    }

    /* Progress Bar */
    .progress-container {
      padding: 0.75rem 1.25rem;
      background: var(--card-bg);
      border-bottom: 1px solid var(--card-border);
    }

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

    .progress-label {
      font-size: 0.8rem;
      color: var(--text-secondary);
    }

    .progress-count {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .progress-bar {
      height: 8px;
      background: var(--field-bg);
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }

    .progress-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #f97316 0%, #ea580c 50%, #22c55e 100%);
      border-radius: 4px;
      transition: width 300ms ease-out;
      position: relative;
    }

    .progress-fill::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
      );
      animation: shimmer 1.5s infinite;
    }

    @keyframes shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    .progress-container.completed .progress-fill {
      background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    }

    .progress-container.completed .progress-fill::after {
      display: none;
    }

    .progress-container.error .progress-fill {
      background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
    }

    .progress-stats {
      display: flex;
      justify-content: space-between;
      margin-top: 0.5rem;
      font-size: 0.75rem;
    }

    .progress-stat {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      color: var(--text-muted);
    }

    .progress-stat.success {
      color: #22c55e;
    }

    .progress-stat.error {
      color: #ef4444;
    }

    .progress-stat svg {
      width: 0.875rem;
      height: 0.875rem;
    }

    .log-sidebar-body {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
      font-family: 'SF Mono', Monaco, 'Courier New', monospace;
      font-size: 0.85rem;
    }

    .log-entry {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--card-border);
      opacity: 0;
      animation: logSlideIn 300ms ease-out forwards;
    }

    .log-entry:last-child {
      border-bottom: none;
    }

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

    .log-time {
      color: var(--text-muted);
      font-size: 0.75rem;
      flex-shrink: 0;
      min-width: 60px;
    }

    .log-icon {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
    }

    .log-icon svg {
      width: 1rem;
      height: 1rem;
    }

    .log-icon.success svg {
      color: #22c55e;
    }

    .log-icon.pending svg {
      color: #f59e0b;
      animation: spin 1s linear infinite;
    }

    .log-icon.error svg {
      color: #ef4444;
    }

    .log-icon.info svg {
      color: #3b82f6;
    }

    .log-text {
      color: var(--text-primary);
      flex: 1;
    }

    .log-text .highlight {
      color: var(--accent-bg);
      font-weight: 600;
    }

    [data-theme="dark"] .log-text .highlight {
      color: #60a5fa;
    }

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

    /* ========== Notyf Overrides ========== */
    .notyf {
      font-family: inherit;
    }

    .notyf__toast {
      border-radius: 0.75rem !important;
    }

    .notyf__toast--success {
      background: #22c55e !important;
    }

    .notyf__toast--error {
      background: #ef4444 !important;
    }

    /* ========== Responsive ========== */
    @media (max-width: 640px) {
      .logo h1 {
        font-size: 2rem;
      }

      .results-filter {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
      }

      .execution-time,
      .filter-buttons,
      .filter-export {
        justify-content: center;
      }

      .result-row {
        flex-wrap: wrap;
        padding: 1rem;
      }

      .result-badge {
        margin-left: 0;
        margin-top: 0.75rem;
        width: 100%;
        justify-content: center;
        display: flex;
      }

      .log-sidebar {
        width: 100%;
      }
    }
/* Keep the top-left actions separated. */
.new-search-btn-top.visible { left: 9.5rem; }
.new-search-btn-top.sidebar-open { left: 420px; }
@media (max-width: 640px) {
  .sync-btn-top { left: 1rem; padding: .65rem; width: 42px; justify-content: center; border-radius: 50%; }
  .sync-btn-top span { display: none; }
  .new-search-btn-top.visible { left: 4.5rem; }
}
[data-theme="dark"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 12% 24%,
      rgba(255,255,255,.55) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 78% 18%,
      rgba(255,255,255,.35) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 64% 72%,
      rgba(255,255,255,.40) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 28% 82%,
      rgba(255,255,255,.30) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 91% 56%,
      rgba(255,255,255,.35) 0 1px,
      transparent 2px
    );

  animation: starsTwinkle 5s ease-in-out infinite alternate;
}

@keyframes starsTwinkle {
  0% {
    opacity: .25;
    transform: scale(1);
  }

  50% {
    opacity: .7;
  }

  100% {
    opacity: .35;
    transform: scale(1.015);
  }
}