/* template: google-map */
:root {
      --tool-bg: #ffffff;
      --tool-bg-alt: #ffffff;
      --tool-surface: #ffffff;
      --tool-soft: rgba(0, 0, 0, 0.04);
      --tool-soft-strong: rgba(0, 0, 0, 0.08);
      --tool-border: rgba(0, 0, 0, 0.08);
      --tool-border-strong: rgba(0, 0, 0, 0.2);
      --tool-muted: rgba(0, 0, 0, 0.65);
      --tool-shadow: 0 25px 55px rgba(0, 0, 0, 0.08);
      --tool-radius-lg: 28px;
      --tool-radius-md: 18px;
      --tool-radius-sm: 12px;
      --panel: #ffffff;
      --panel-border: rgba(0, 0, 0, 0.08);
      --app-primary: #000000;
      --app-primary-strong: #000000;
      --app-text: #000000;
      --app-text-muted: rgba(0, 0, 0, 0.6);
    }

    * {
      box-sizing: border-box;
    }

    body.app-body {
      margin: 0;
      font-family: var(--font-body, 'Geist', 'Inter', 'Segoe UI', sans-serif);
      background: var(--tool-bg);
      color: var(--app-text, #000000);
      min-height: 100vh;
      overflow-x: hidden;
    }

    .tool-layout {
      min-height: 100vh;
      background: var(--tool-bg);
      padding: 0 0 40px;
    }

        .tool-chrome{margin-top:-12px; position:relative;}

    aside.sidebar {
      background: var(--panel);
      border-right: 1px solid var(--panel-border);
      padding: 32px 24px 40px;
      display: flex;
      flex-direction: column;
      gap: 32px;
      box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.04);
      position: fixed;
      top: 0;
      left: 0;
      width: 270px;
      height: 100vh;
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .brand-copy {
      line-height: 1.3;
    }

    .brand-copy strong {
      display: block;
      font-size: 1.1rem;
    }

    .brand-copy span {
      font-size: 0.85rem;
      color: var(--app-text-muted);
    }

    .nav-label {
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--app-text-muted);
      margin-bottom: 12px;
    }

    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    nav li a {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 12px;
      color: var(--app-text);
      font-weight: 500;
    }

    nav li a:hover,
    nav li.active a {
      background: rgba(0, 0, 0, 0.08);
      color: var(--app-primary-strong);
    }

    .nav-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.08);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .nav-icon svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
    }
    main.main-content {
      padding: 24px clamp(24px, 4vw, 60px) 48px;
    }

    .tool-hero {
      background: var(--tool-surface);
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-lg);
      padding: clamp(24px, 4vw, 36px);
      box-shadow: var(--tool-shadow);
      display: flex;
      flex-wrap: wrap;
      gap: 32px;
      align-items: flex-start;
      position: relative;
      overflow: hidden;
    }

    .tool-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: transparent;
      pointer-events: none;
    }

    .hero-details,
    .hero-side {
      position: relative;
      z-index: 1;
      flex: 1 1 320px;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.4rem 0.95rem;
      border-radius: 999px;
      background: var(--tool-soft);
      color: var(--primary-strong, #000000);
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .tool-hero h1 {
      margin: 1rem 0 0.35rem;
      font-size: clamp(2rem, 1.4rem + 1.5vw, 2.8rem);
      line-height: 1.1;
    }

    .tool-hero p {
      margin: 0;
      color: var(--tool-muted);
      max-width: 620px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 1.4rem;
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 14px;
    }

    .stat-card {
      background: var(--tool-bg-alt);
      border-radius: var(--tool-radius-sm);
      padding: 14px 18px;
      border: 1px solid var(--tool-border);
      font-weight: 600;
      color: var(--app-text);
    }

    .extension-banner {
      margin: 28px auto 0;
      background: var(--tool-surface);
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-md);
      padding: 20px 24px;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      box-shadow: var(--tool-shadow);
    }

    .extension-banner-content {
      flex: 1 1 280px;
      color: var(--tool-muted);
      font-weight: 500;
    }

    .extension-banner-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .btn-download-ext,
    .btn-install-guide {
      border-radius: 999px;
      padding: 10px 20px;
      font-weight: 600;
      border: 1px solid var(--tool-border);
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }

    .btn-download-ext {
      background: #ffffff;
      color: #000000;
      border-color: rgba(0, 0, 0, 0.85);
      box-shadow: none;
    }

    .btn-install-guide {
      background: #ffffff;
      color: #000000;
    }

    section {
      padding: clamp(32px, 4vw, 60px) 0;
    }

    .bg-light {
      background: transparent !important;
    }

    .builder-card,
    .card-slim {
      max-width: 1240px;
      margin: 0 auto;
      border-radius: var(--tool-radius-lg);
      border: 1px solid var(--tool-border);
      background: var(--tool-surface);
      box-shadow: var(--tool-shadow);
      overflow: hidden;
    }

    .builder-header,
    .card-slim .card-header {
      padding: clamp(20px, 3vw, 32px);
      background: var(--tool-surface);
      border-bottom: 1px solid var(--tool-border);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }

    .builder-title {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      font-size: 1.4rem;
      margin: 0;
      color: var(--primary-strong, #000000);
    }

    .builder-sub {
      margin-top: 6px;
      color: var(--tool-muted);
      max-width: 640px;
    }

    .builder-body,
    .card-slim .card-body {
      padding: clamp(24px, 4vw, 36px);
      background: var(--tool-surface);
    }

    .builder-body form {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .build-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
      gap: clamp(24px, 3vw, 40px);
    }

    @media (max-width: 991px) {
      .build-layout {
        grid-template-columns: 1fr;
      }
    }

    .builder-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 18px;
      align-items: stretch;
    }

    .mono {
      font-family: var(--font-mono, 'Geist Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace);
    }

    @media (min-width: 992px) {
      .builder-grid {
        grid-template-columns: 1.3fr 1fr 1fr 1.4fr;
      }
    }

    .builder-grid {
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-sm);
      padding: 0.85rem 1rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      background: #ffffff;
      height: 100%;
    }

    .skip-field {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: flex-start;
      margin: 18px 0 12px;
    }

    .form-label {
      font-size: 0.8rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--primary-strong, #000000);
      font-weight: 600;
      margin: 0;
      display: block;
    }

    .form-control-lg,
    .choices__inner {
      border-radius: 14px !important;
      min-height: 50px !important;
      padding: 10px 14px !important;
      border: 1px solid var(--tool-border) !important;
      background: var(--tool-surface);
      color: var(--text, #000000);
      font-size: 1rem;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .form-control-lg::placeholder {
      color: rgba(0, 0, 0, 0.35);
    }

    .form-control-lg:focus,
    .choices.is-focused .choices__inner {
      border-color: var(--tool-border-strong) !important;
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
    }

    .skip-field .skip-input {
      width: 140px;
    }

    .choices__list--multiple .choices__item {
      border-radius: 999px !important;
      padding: 6px 10px !important;
      background: var(--tool-soft-strong) !important;
      border: none !important;
      color: var(--primary-strong, #000000) !important;
      font-weight: 600;
    }

    .mode-toggle {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .mode-options {
      display: flex;
      border: 1px solid var(--tool-border);
      border-radius: 999px;
      padding: 4px;
      background: #fff;
      gap: 4px;
    }

    .mode-radio {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .mode-options label {
      flex: 1;
      border-radius: 999px;
      padding: 0.55rem 1rem;
      font-weight: 600;
      text-align: center;
      cursor: pointer;
      color: var(--tool-muted);
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
    }

    #modeBuilder:checked + label,
    #modeManual:checked + label {
      background: var(--primary-strong, #000000);
      color: #ffffff;
      box-shadow: 0 10px 18px rgba(0, 0, 0, 0.15);
    }

    .mode-options label:hover {
      background: rgba(0, 0, 0, 0.06);
      color: var(--primary-strong, #000000);
    }

    .mode-helpers {
      font-size: 0.88rem;
      color: var(--tool-muted);
    }

    .mode-helper {
      display: none;
      margin: 0;
    }

    #modeBuilder:checked ~ .mode-helpers .mode-helper-builder,
    #modeManual:checked ~ .mode-helpers .mode-helper-manual {
      display: block;
    }

    .form-group-title {
      font-size: 0.9rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--tool-muted);
      margin-bottom: 0.5rem;
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .location-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
    }

    .city-quick-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
      font-size: 0.78rem;
      color: var(--tool-muted);
    }

    .city-quick-actions button {
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
      border: 1px solid var(--tool-border);
      background: transparent;
      font-size: 0.76rem;
      font-weight: 600;
    }

    .field.field-state {
      background: transparent !important;
      border: none !important;
      padding: 0;
      box-shadow: none !important;
    }

    .field.field-state select {
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-sm);
      padding: 0.65rem 0.75rem;
      background: #fff;
    }

    .skip-helper {
      font-size: 0.85rem;
      color: var(--tool-muted);
      margin-top: 0.35rem;
    }

    .action-toolbar {
      margin-top: 20px;
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-sm);
      padding: 1rem;
      background: #ffffff;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.35rem 0.9rem;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.05);
      font-weight: 600;
      color: var(--primary-strong, #000000);
    }

    .status-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #19a974;
      display: inline-block;
    }

    .actions-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }

    .actions-group .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }

    .queue-panel {
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-md);
      background: #ffffff;
      padding: clamp(18px, 2vw, 24px);
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .queue-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.8rem;
    }

    .queue-title {
      margin: 0;
      font-size: 1.1rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .queue-count {
      background: rgba(0, 0, 0, 0.07);
      border-radius: 999px;
      padding: 0.15rem 0.75rem;
      font-size: 0.85rem;
      font-weight: 600;
    }

    .queue-table-wrapper {
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: var(--tool-radius-sm);
      overflow: hidden;
      background: #fafafa;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .queue-table-wrapper table {
      margin-bottom: 0;
    }

    .queue-empty-message {
      padding: 1rem;
      text-align: center;
      color: var(--tool-muted);
      font-size: 0.95rem;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      display: none;
    }

    #keywordQueueTable tbody:empty + .queue-empty-message {
      display: block;
    }

    .status-tag {
      border-radius: 999px;
      padding: 0.2rem 0.6rem;
      font-size: 0.78rem;
      font-weight: 600;
      background: rgba(0, 0, 0, 0.08);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-transform: capitalize;
    }

    .choices__list--dropdown,
    .choices__list[role="listbox"] {
      border-radius: var(--tool-radius-sm);
      border: 1px solid var(--tool-border);
      background: var(--tool-surface);
      box-shadow: var(--tool-shadow);
      color: inherit;
      z-index: 40;
    }

    .hint {
      font-size: 0.85rem;
      color: var(--tool-muted);
      margin-top: 0.25rem;
    }

    #countryHint,
    #stateHint,
    #cityHint,
    #citiesCount {
      color: var(--tool-muted);
      font-weight: 500;
    }

    .city-actions {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 6px;
    }

    .city-actions .btn-sm {
      border-radius: 999px;
      border: 1px solid var(--tool-border);
      background: transparent;
      color: var(--tool-muted);
      font-weight: 600;
      padding: 4px 10px;
      font-size: 0.78rem;
    }

    .city-actions .btn-sm i {
      font-size: 0.75rem;
    }

    .mode-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .mode-title {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--tool-muted);
    }

    .mode-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.3rem 0.85rem;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.06);
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--primary-strong, #000000);
    }

    .mode-pill i {
      font-size: 0.75rem;
    }

    .mode-helper {
      display: none;
      margin: 0;
    }

    .mode-helper.is-active {
      display: block;
    }

    .location-wrapper {
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-sm);
      padding: 1.25rem;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .skip-block {
      margin-top: 1rem;
    }

    .skip-block input {
      max-width: 280px;
    }

    .action-panel {
      margin-top: 1.5rem;
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-sm);
      padding: 1rem 1.25rem;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .status-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.35rem 0.9rem;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.05);
      font-weight: 600;
      color: var(--primary-strong, #000000);
      font-size: 0.9rem;
    }

    .status-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #19a974;
      display: inline-block;
    }

    .actions-group .btn {
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }

    .actions-group .btn i {
      font-size: 0.85rem;
    }

    .action-summary {
      font-size: 0.85rem;
      color: var(--tool-muted);
    }

    .progress-strip {
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: var(--tool-radius-sm);
      padding: 0.75rem 1rem;
      background: #fafafa;
    }

    .queue-panel {
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-md);
      background: #ffffff;
      padding: clamp(20px, 3vw, 28px);
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .queue-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .queue-title {
      margin: 0;
      font-size: 1.1rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .queue-title i {
      font-size: 1rem;
    }

    .queue-subtitle {
      margin: 0;
      font-size: 0.85rem;
      color: var(--tool-muted);
    }

    .queue-count {
      display: inline-flex;
      align-items: center;
      padding: 0.15rem 0.65rem;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.06);
      font-size: 0.85rem;
      font-weight: 600;
    }

    .queue-table-wrapper table thead th {
      background: rgba(0, 0, 0, 0.03);
      font-weight: 600;
      font-size: 0.85rem;
      text-transform: uppercase;
    }

    .queue-empty-message {
      padding: 1.5rem;
      text-align: center;
      color: var(--tool-muted);
      font-size: 0.95rem;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      display: none;
    }

    .queue-empty-message i {
      display: block;
      margin-bottom: 0.4rem;
      font-size: 1.3rem;
    }

    .btn {
      border-radius: 999px;
      border: 1px solid rgba(0, 0, 0, 0.85);
      font-weight: 600;
      padding: 10px 18px;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
      background: #ffffff;
      color: #000000;
      box-shadow: none;
    }

    .btn i {
      font-size: 0.95rem;
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }

    .btn:hover {
      transform: translateY(-1px);
      background: #f5f5f5;
      color: #000000;
    }

    .btn-outline-light,
    .btn-outline-secondary,
    .btn-outline-danger,
    .btn-success,
    .btn-info,
    .btn-dark,
    .btn-primary {
      background: #ffffff;
      color: #000000;
      border-color: rgba(0, 0, 0, 0.85);
      box-shadow: none;
    }

    .action-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 20px;
    }

    #progress-container {
      display: none;
    }

    #progressBar {
      width: 100%;
      height: 14px;
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid var(--tool-border);
    }

    progress::-webkit-progress-bar {
      background: #ffffff;
      border-radius: 999px;
    }

    progress::-webkit-progress-value {
      background: #000000;
      border-radius: 999px;
    }

    #profileProgress,
    #profileProgress .small {
      color: var(--tool-muted);
    }

    #keywordStatusLabel {
      color: var(--primary-strong, #000000);
      font-weight: 600;
    }

    .status-panel {
      background: var(--tool-surface);
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-md);
      padding: 20px 24px;
      box-shadow: var(--tool-shadow);
      margin-top: 20px;
      color: var(--tool-muted);
    }

    .card-slim .card-body {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .filters-wrap {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .filter-row {
      display: grid;
      gap: 12px;
      grid-template-columns: 1.1fr 2fr 0.9fr auto;
      border: 1px dashed var(--tool-border);
      border-radius: var(--tool-radius-sm);
      padding: 16px;
      background: var(--tool-bg-alt);
    }

    .filter-row .btn-remove {
      justify-self: end;
    }

    @media (max-width: 1024px) {
      .tool-layout {
        padding-left: 220px;
      }
      aside.sidebar {
        width: 220px;
      }
    }

    @media (max-width: 820px) {
      .tool-layout {
        padding-left: 0;
      }
      aside.sidebar {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        border-right: none;
        border-bottom: 1px solid var(--panel-border);
      }
      .sidebar nav ul {
        flex-direction: row;
        flex-wrap: wrap;
      }
      main.main-content {
        padding: 32px 20px;
      }
      .filter-row {
        grid-template-columns: 1fr;
      }
    }

    .filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.4rem 0.9rem;
      border-radius: 999px;
      background: var(--tool-soft);
      color: var(--primary-strong, #000000);
      font-weight: 600;
    }

    .results-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: flex-end;
      margin-bottom: 24px;
    }

    .table-responsive {
      border-radius: var(--tool-radius-lg);
      border: 1px solid var(--tool-border);
      box-shadow: var(--tool-shadow);
      background: var(--tool-surface);
    }

    .wide-table {
      min-width: 1400px;
    }

    thead.table-dark th {
      background: var(--tool-bg-alt) !important;
      color: var(--tool-muted) !important;
      border-bottom: 1px solid var(--tool-border) !important;
    }

    .cta-panel {
      background: #ffffff;
      border-radius: var(--tool-radius-lg);
      padding: clamp(32px, 4vw, 48px);
      color: #000000;
      text-align: center;
      box-shadow: var(--tool-shadow);
    }

    .cta-panel .btn-outline-light {
      border-color: rgba(0, 0, 0, 0.85);
      color: #000000;
    }

    .cta-panel .btn-outline-light:hover {
      background: #f5f5f5;
      box-shadow: none;
    }

    footer.footer {
      padding: 40px 0;
      background: transparent;
      color: var(--tool-muted);
    }

    footer .nav-link {
      color: var(--tool-muted);
      font-weight: 600;
    }

    .mode-badge {
      padding: 0.35rem 0.8rem;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 110px;
    }

    .btn-outline-primary {
      border-color: rgba(0, 0, 0, 0.85);
      color: var(--app-text);
      background: #ffffff;
      transition: all 0.18s ease;
    }

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active,
    .btn-check:checked + .btn-outline-primary,
    .btn-check:active + .btn-outline-primary {
      color: var(--app-text);
      background: #f5f5f5;
      border-color: rgba(0, 0, 0, 0.85);
      box-shadow: none;
    }

    #manualCount {
      padding: 0.35rem 0.85rem;
      border-radius: 999px;
      min-width: 120px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1px solid var(--tool-border);
    }
  
    /* Footer styles */
    .site-footer {
      margin-top: 120px;
      padding: 90px 0 0;
      background: var(--bg-2);
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      position: relative;
      overflow: hidden;
    }

    .site-footer::before {
      content: '';
      position: absolute;
      inset: 0;
      background: transparent;
      pointer-events: none;
    }

    .footer-shell {
      position: relative;
      display: grid;
      grid-template-columns: minmax(220px, 0.9fr) minmax(480px, 2.1fr);
      gap: 2.5rem;
      z-index: 1;
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .footer-brand-mark {
      align-items: center;
      gap: 14px;
    }

    .footer-brand p {
      margin: 0;
      color: var(--text-muted);
    }

    .footer-columns {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1.25rem;
    }

    @media (min-width: 1100px) {
      .footer-columns {
        grid-template-columns: repeat(5, minmax(120px, 1fr));
      }
    }

    .footer-column {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .footer-heading {
      font-size: 0.78rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 0.4rem;
    }

    .footer-column a {
      color: var(--text);
      font-weight: 500;
      font-size: 0.95rem;
      opacity: 0.8;
      transition: opacity 0.2s ease;
    }

    .footer-column a:hover,
    .footer-column a:focus-visible,
    .footer-contact a:hover,
    .footer-contact a:focus-visible,
    .footer-social a:hover,
    .footer-social a:focus-visible {
      opacity: 1;
      color: var(--primary-strong);
    }

    .footer-bottom {
      margin-top: 60px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      position: relative;
      z-index: 1;
    }

    .footer-bottom-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 24px 0 40px;
      color: var(--text-muted);
    }

    .footer-bottom-inner p {
      margin: 0;
    }

    .footer-legal-links,
    .footer-social {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      font-weight: 500;
    }

    .footer-legal-links a,
    .footer-social a {
      color: inherit;
      opacity: 0.9;
    }

    @media (max-width: 960px) {
      .footer-shell {
        grid-template-columns: 1fr;
      }
    }

/* template: email-finder */
:root {
      --tool-bg: var(--bg, #fdfbff);
      --tool-bg-alt: var(--bg-2, #f4f5ff);
      --tool-surface: #ffffff;
      --tool-soft: rgba(90, 84, 255, 0.08);
      --tool-soft-strong: rgba(90, 84, 255, 0.15);
      --tool-border: rgba(32, 44, 96, 0.12);
      --tool-border-strong: rgba(90, 84, 255, 0.3);
      --tool-muted: rgba(16, 20, 55, 0.65);
      --tool-shadow: 0 30px 60px rgba(18, 24, 66, 0.12);
      --tool-radius-lg: 28px;
      --tool-radius-md: 18px;
      --tool-radius-sm: 12px;
      --panel: #ffffff;
      --panel-border: rgba(16, 20, 55, 0.08);
      --app-primary: var(--primary, #5a54ff);
      --app-primary-strong: var(--primary-strong, #2f2a93);
      --app-text: var(--text, #101437);
      --app-text-muted: var(--text-muted, rgba(16, 20, 55, 0.65));
    }

    * {
      box-sizing: border-box;
    }

    body.app-body {
      margin: 0;
      font-family: var(--font-body, 'Geist', 'Inter', 'Segoe UI', sans-serif);
      background:
        radial-gradient(circle at 12% 15%, rgba(90, 84, 255, 0.18), transparent 45%),
        radial-gradient(circle at 82% -5%, rgba(30, 200, 255, 0.18), transparent 48%),
        var(--tool-bg);
      color: var(--text, #101437);
      min-height: 100vh;
      overflow-x: hidden;
    }

    .tool-layout {
      min-height: 100vh;
      background: var(--tool-bg);
      padding: 0 0 40px;
    }

        .tool-chrome{margin-top:-12px; position:relative;}

    aside.sidebar {
      background: var(--panel);
      border-right: 1px solid var(--panel-border);
      padding: 32px 24px 40px;
      display: flex;
      flex-direction: column;
      gap: 32px;
      box-shadow: inset -1px 0 0 rgba(16, 20, 55, 0.04);
      position: fixed;
      top: 0;
      left: 0;
      width: 270px;
      height: 100vh;
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .brand-copy {
      line-height: 1.3;
    }

    .brand-copy strong {
      display: block;
      font-size: 1.1rem;
    }

    .brand-copy span {
      font-size: 0.85rem;
      color: var(--app-text-muted);
    }

    .nav-label {
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--app-text-muted);
      margin-bottom: 12px;
    }

    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    nav li a {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 12px;
      color: var(--app-text);
      font-weight: 500;
    }

    nav li a:hover,
    nav li.active a {
      background: rgba(90, 84, 255, 0.1);
      color: var(--app-primary-strong);
    }

    .nav-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: rgba(90, 84, 255, 0.12);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .nav-icon svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
    }
    main.main-content {
      padding: 24px clamp(24px, 4vw, 60px) 48px;
    }

    .tool-hero {
      background: var(--tool-surface);
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-lg);
      padding: clamp(24px, 4vw, 36px);
      box-shadow: var(--tool-shadow);
      display: flex;
      flex-wrap: wrap;
      gap: 32px;
      align-items: flex-start;
      position: relative;
      overflow: hidden;
    }

    .tool-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 85% 15%, rgba(30, 200, 255, 0.12), transparent 45%);
      pointer-events: none;
    }

    .hero-details,
    .hero-side {
      position: relative;
      z-index: 1;
      flex: 1 1 320px;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.4rem 0.95rem;
      border-radius: 999px;
      background: var(--tool-soft);
      color: var(--primary-strong, #2f2a93);
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .tool-hero h1 {
      margin: 1rem 0 0.35rem;
      font-size: clamp(2rem, 1.4rem + 1.5vw, 2.8rem);
      line-height: 1.1;
    }

    .tool-hero p {
      margin: 0;
      color: var(--tool-muted);
      max-width: 620px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 1.4rem;
    }

    .action-btn {
      border-radius: 999px;
      border: 1px solid transparent;
      padding: 0.75rem 1.4rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      text-decoration: none;
    }

    .action-btn.primary {
      background: linear-gradient(135deg, var(--primary, #5a54ff), var(--accent, #1ec8ff));
      color: #fff;
      box-shadow: 0 20px 35px rgba(90, 84, 255, 0.25);
    }

    .action-btn.outline {
      background: transparent;
      border-color: var(--tool-border);
      color: var(--app-text);
    }

    .action-btn.soft {
      background: var(--tool-soft);
      color: var(--app-primary-strong);
    }

    .action-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 22px 38px rgba(90, 84, 255, 0.18);
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 14px;
    }

    .stat-card {
      background: var(--tool-bg-alt);
      border-radius: var(--tool-radius-sm);
      padding: 14px 18px;
      border: 1px solid rgba(32, 44, 96, 0.08);
      font-weight: 600;
      color: var(--primary-strong, #2f2a93);
    }

    .extension-banner {
      margin: 28px auto 0;
      background: var(--tool-surface);
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-md);
      padding: 20px 24px;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      box-shadow: var(--tool-shadow);
    }

    .extension-banner-content {
      flex: 1 1 280px;
      color: var(--tool-muted);
      font-weight: 500;
    }

    .extension-banner-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .btn-download-ext,
    .btn-install-guide {
      border-radius: 999px;
      padding: 10px 20px;
      font-weight: 600;
      border: 1px solid var(--tool-border);
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }

    .btn-download-ext {
      background: linear-gradient(135deg, var(--primary, #5a54ff), var(--accent, #1ec8ff));
      color: #fff;
      border-color: transparent;
      box-shadow: 0 16px 30px rgba(90, 84, 255, 0.25);
    }

    .btn-install-guide {
      background: var(--tool-soft);
      color: var(--primary-strong, #2f2a93);
    }

    section {
      padding: clamp(32px, 4vw, 60px) 0;
    }

    .ingest-card {
      max-width: 1240px;
      margin: 0 auto;
      border-radius: var(--tool-radius-lg);
      border: 1px solid var(--tool-border);
      background: var(--tool-surface);
      box-shadow: var(--tool-shadow);
      overflow: hidden;
    }

    .ingest-header {
      padding: 26px 32px;
      background: linear-gradient(135deg, rgba(90, 84, 255, 0.1), rgba(30, 200, 255, 0.18));
      border-bottom: 1px solid var(--tool-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 18px;
    }

    .ingest-header h3 {
      margin: 0;
      font-size: 1.4rem;
    }

    .ingest-header p {
      margin: 6px 0 0;
      color: var(--tool-muted);
    }

    .header-pill {
      border-radius: 999px;
      padding: 0.4rem 1rem;
      border: 1px solid rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(6px);
      color: #fff;
      font-weight: 600;
    }

    .ingest-body {
      padding: clamp(22px, 3vw, 32px);
      background: var(--tool-surface);
    }

    .form-label {
      font-size: 0.8rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--primary-strong, #2f2a93);
      font-weight: 600;
      margin-bottom: 0.35rem;
    }

    textarea#domainsInput {
      width: 100%;
      min-height: 240px;
      border-radius: var(--tool-radius-sm);
      border: 1px solid var(--tool-border);
      background: linear-gradient(135deg, rgba(90, 84, 255, 0.06), rgba(255, 255, 255, 0.9));
      padding: 1.2rem;
      font-size: 1rem;
      line-height: 1.55;
      color: var(--app-text);
      resize: vertical;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    textarea#domainsInput:focus {
      outline: none;
      border-color: var(--tool-border-strong);
      box-shadow: 0 0 0 3px rgba(90, 84, 255, 0.12);
    }

    .action-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 1.2rem;
    }

    #progress-container {
      display: none;
      margin-top: 1.6rem;
      border-radius: var(--tool-radius-sm);
      border: 1px solid var(--tool-border);
      padding: 1rem 1.2rem;
      background: var(--tool-bg-alt);
    }

    #progress-container small {
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--tool-muted);
      font-weight: 600;
    }

    progress#progressBar {
      width: 100%;
      height: 12px;
      border-radius: 999px;
      overflow: hidden;
      appearance: none;
      background: rgba(148, 163, 184, 0.16);
    }

    progress#progressBar::-webkit-progress-bar {
      background: rgba(148, 163, 184, 0.16);
    }

    progress#progressBar::-webkit-progress-value {
      background: linear-gradient(135deg, rgba(90, 84, 255, 0.9), rgba(30, 200, 255, 0.9));
    }

    .insight-stack {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .insight-card {
      border-radius: var(--tool-radius-sm);
      border: 1px solid var(--tool-border);
      padding: 1.5rem;
      background: linear-gradient(145deg, rgba(90, 84, 255, 0.08), rgba(255, 255, 255, 0.9));
      box-shadow: var(--tool-shadow);
    }

    .insight-card h4 {
      margin-bottom: 0.65rem;
      font-weight: 600;
    }

    .insight-card p {
      color: var(--tool-muted);
      margin-bottom: 0.5rem;
    }

    .results-section {
      padding-top: 10px;
    }

    .results-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 1.2rem;
    }

    .results-card .results-header {
      align-items: flex-start;
    }

    .results-header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .results-header p {
      margin: 0.25rem 0 0;
      color: var(--tool-muted);
    }

    .results-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }

    .results-toolbar .btn-scrape {
      padding: 0.55rem 1.1rem;
    }

    .results-empty-row td {
      padding: 0;
      border-bottom: none;
    }

    .result-table .empty-state {
      width: 100%;
      min-height: 220px;
      padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 5vw, 3rem);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 0.4rem;
    }

    .result-table .empty-state i {
      font-size: 2rem;
      color: var(--app-primary);
      margin-bottom: 0.2rem;
    }

    @media (max-width: 768px) {
      .results-header-actions {
        width: 100%;
        justify-content: flex-start;
      }
    }

    .results-btn {
      border-radius: 999px;
      border: 1px solid var(--tool-border);
      padding: 0.65rem 1.2rem;
      font-weight: 600;
      background: #fff;
      color: var(--app-text);
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      cursor: pointer;
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .results-btn.soft {
      background: var(--tool-soft);
      color: var(--app-primary-strong);
      border-color: transparent;
    }

    .results-btn:hover {
      box-shadow: 0 15px 28px rgba(20, 20, 60, 0.12);
    }

    .result-table-wrapper {
      border-radius: var(--tool-radius-lg);
      border: 1px solid var(--tool-border);
      box-shadow: var(--tool-shadow);
      background: var(--tool-surface);
    }

    table.result-table {
      margin: 0;
    }

    .result-table thead th {
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 0.78rem;
      color: var(--tool-muted);
      background: var(--tool-bg-alt);
      border-bottom: 1px solid var(--tool-border);
      white-space: nowrap;
    }

    .result-table th,
    .result-table td {
      vertical-align: middle;
      font-size: 0.95rem;
      color: var(--app-text);
    }

    .result-table tbody tr:hover {
      background: rgba(90, 84, 255, 0.08);
    }

    .info-slab {
      max-width: 1240px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 18px;
    }

    .info-card {
      border-radius: var(--tool-radius-md);
      border: 1px solid var(--tool-border);
      padding: 1.8rem;
      background: var(--tool-surface);
      box-shadow: var(--tool-shadow);
    }

    .info-card h4 {
      margin-bottom: 0.6rem;
    }

    .info-card p {
      color: var(--tool-muted);
      margin-bottom: 0.5rem;
    }

    .cta-panel {
      background: linear-gradient(135deg, var(--primary, #5a54ff), var(--accent, #1ec8ff));
      border-radius: var(--tool-radius-lg);
      padding: clamp(32px, 4vw, 48px);
      color: #fff;
      text-align: center;
      box-shadow: 0 35px 60px rgba(15, 23, 42, 0.25);
    }

    .cta-panel .action-btn {
      border-color: rgba(255, 255, 255, 0.8);
      color: #fff;
    }

    footer.footer {
      padding: 40px 0;
      background: transparent;
      color: var(--tool-muted);
    }

    footer .nav-link {
      color: var(--tool-muted);
      font-weight: 600;
    }

    @media (max-width: 991px) {
      .tool-layout {
        padding-left: 0;
      }

      aside.sidebar {
        position: relative;
        width: 100%;
        height: auto;
        flex-direction: column;
      }
    }
  
    /* Footer styles */
    .site-footer {
      margin-top: 120px;
      padding: 90px 0 0;
      background: var(--bg-2);
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      position: relative;
      overflow: hidden;
    }

    .site-footer::before {
      content: '';
      position: absolute;
      inset: 0;
      background: transparent;
      pointer-events: none;
    }

    .footer-shell {
      position: relative;
      display: grid;
      grid-template-columns: minmax(220px, 0.9fr) minmax(480px, 2.1fr);
      gap: 2.5rem;
      z-index: 1;
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .footer-brand-mark {
      align-items: center;
      gap: 14px;
    }

    .footer-brand p {
      margin: 0;
      color: var(--text-muted);
    }

    .footer-columns {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1.25rem;
    }

    @media (min-width: 1100px) {
      .footer-columns {
        grid-template-columns: repeat(5, minmax(120px, 1fr));
      }
    }

    .footer-column {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .footer-heading {
      font-size: 0.78rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 0.4rem;
    }

    .footer-column a {
      color: var(--text);
      font-weight: 500;
      font-size: 0.95rem;
      opacity: 0.8;
      transition: opacity 0.2s ease;
    }

    .footer-column a:hover,
    .footer-column a:focus-visible,
    .footer-contact a:hover,
    .footer-contact a:focus-visible,
    .footer-social a:hover,
    .footer-social a:focus-visible {
      opacity: 1;
      color: var(--primary-strong);
    }

    .footer-bottom {
      margin-top: 60px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      position: relative;
      z-index: 1;
    }

    .footer-bottom-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 24px 0 40px;
      color: var(--text-muted);
    }

    .footer-bottom-inner p {
      margin: 0;
    }

    .footer-legal-links,
    .footer-social {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      font-weight: 500;
    }

    .footer-legal-links a,
    .footer-social a {
      color: inherit;
      opacity: 0.9;
    }

    @media (max-width: 960px) {
      .footer-shell {
        grid-template-columns: 1fr;
      }
    }

/* template: email-sender */
:root {
      --tool-bg: var(--bg, #fdfbff);
      --tool-bg-alt: var(--bg-2, #f6f9ff);
      --tool-surface: #ffffff;
      --tool-soft: rgba(90, 84, 255, 0.08);
      --tool-muted: rgba(16, 20, 55, 0.65);
      --tool-border: rgba(32, 44, 96, 0.12);
      --tool-border-strong: rgba(90, 84, 255, 0.3);
      --tool-shadow: 0 30px 60px rgba(18, 24, 66, 0.12);
      --tool-radius-lg: 28px;
      --tool-radius-md: 18px;
      --tool-radius-sm: 12px;
      --panel: #ffffff;
      --panel-border: rgba(16, 20, 55, 0.08);
      --app-primary: var(--primary, #5a54ff);
      --app-primary-strong: var(--primary-strong, #2f2a93);
      --app-text: var(--text, #101437);
      --app-text-muted: var(--text-muted, rgba(16, 20, 55, 0.65));
    }

    * {
      box-sizing: border-box;
    }

    body.app-body {
      margin: 0;
      font-family: var(--font-body, 'Geist', 'Inter', 'Segoe UI', sans-serif);
      background:
        radial-gradient(circle at 12% 15%, rgba(90, 84, 255, 0.18), transparent 45%),
        radial-gradient(circle at 82% -5%, rgba(30, 200, 255, 0.18), transparent 48%),
        var(--tool-bg);
      color: var(--text, #101437);
      min-height: 100vh;
      overflow-x: hidden;
    }

    .tool-layout {
      min-height: 100vh;
      background: var(--tool-bg);
      padding: 0 0 40px;
    }

        .tool-chrome{margin-top:-12px; position:relative;}

    aside.sidebar {
      background: var(--panel);
      border-right: 1px solid var(--panel-border);
      padding: 32px 24px 40px;
      display: flex;
      flex-direction: column;
      gap: 32px;
      box-shadow: inset -1px 0 0 rgba(16, 20, 55, 0.04);
      position: fixed;
      top: 0;
      left: 0;
      width: 270px;
      height: 100vh;
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .brand-copy {
      line-height: 1.3;
    }

    .brand-copy strong {
      display: block;
      font-size: 1.1rem;
    }

    .brand-copy span {
      font-size: 0.85rem;
      color: var(--app-text-muted);
    }

    .nav-label {
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--app-text-muted);
      margin-bottom: 12px;
    }

    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    nav li a {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 12px;
      color: var(--app-text);
      font-weight: 500;
    }

    nav li a:hover,
    nav li.active a {
      background: rgba(90, 84, 255, 0.1);
      color: var(--app-primary-strong);
    }

    .nav-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: rgba(90, 84, 255, 0.12);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .nav-icon svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
    }
    main.main-content {
      padding: 24px clamp(24px, 4vw, 60px) 48px;
    }

    .tool-hero {
      background: var(--tool-surface);
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-lg);
      padding: clamp(24px, 4vw, 36px);
      box-shadow: var(--tool-shadow);
      display: flex;
      flex-wrap: wrap;
      gap: 32px;
      align-items: flex-start;
      position: relative;
      overflow: hidden;
    }

    .tool-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 85% 15%, rgba(30, 200, 255, 0.12), transparent 45%);
      pointer-events: none;
    }

    .hero-details,
    .hero-side {
      position: relative;
      z-index: 1;
      flex: 1 1 320px;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.4rem 0.95rem;
      border-radius: 999px;
      background: var(--tool-soft);
      color: var(--primary-strong, #2f2a93);
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .tool-hero h1 {
      margin: 1rem 0 0.35rem;
      font-size: clamp(2rem, 1.4rem + 1.5vw, 2.8rem);
      line-height: 1.1;
    }

    .tool-hero p {
      margin: 0;
      color: var(--tool-muted);
      max-width: 640px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 1.4rem;
    }

    .action-btn {
      border-radius: 999px;
      border: 1px solid transparent;
      padding: 0.75rem 1.4rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      text-decoration: none;
    }

    .action-btn.primary {
      background: linear-gradient(135deg, var(--primary, #5a54ff), var(--accent, #1ec8ff));
      color: #fff;
      box-shadow: 0 20px 35px rgba(90, 84, 255, 0.25);
    }

    .action-btn.outline {
      background: transparent;
      border-color: var(--tool-border);
      color: var(--app-text);
    }

    .action-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 22px 38px rgba(90, 84, 255, 0.18);
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 14px;
    }

    .stat-card {
      background: var(--tool-bg-alt);
      border-radius: var(--tool-radius-sm);
      padding: 14px 18px;
      border: 1px solid rgba(32, 44, 96, 0.08);
      font-weight: 600;
      color: var(--primary-strong, #2f2a93);
    }

    .extension-banner {
      margin: 28px auto 0;
      background: var(--tool-surface);
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-md);
      padding: 20px 24px;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      box-shadow: var(--tool-shadow);
    }

    .extension-banner-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .btn-download-ext,
    .btn-install-guide {
      border-radius: 999px;
      padding: 10px 20px;
      font-weight: 600;
      border: 1px solid var(--tool-border);
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }

    .btn-download-ext {
      background: linear-gradient(135deg, var(--primary, #5a54ff), var(--accent, #1ec8ff));
      color: #fff;
      border-color: transparent;
    }

    .btn-install-guide {
      background: var(--tool-soft);
      color: var(--primary-strong, #2f2a93);
    }

    section {
      padding: clamp(32px, 4vw, 60px) 0;
    }

    .playbook-card {
      border-radius: var(--tool-radius-md);
      border: 1px solid var(--tool-border);
      padding: clamp(18px, 2vw, 26px);
      background: var(--tool-surface);
      box-shadow: var(--tool-shadow);
    }

    .playbook-card h4 {
      margin-bottom: 0.65rem;
    }

    .playbook-card p {
      color: var(--tool-muted);
      margin-bottom: 0.3rem;
    }

    .playbook-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 18px;
    }

    .campaign-card,
    .monitor-card {
      max-width: 1240px;
      margin: 0 auto;
      border-radius: var(--tool-radius-lg);
      border: 1px solid var(--tool-border);
      background: var(--tool-surface);
      box-shadow: var(--tool-shadow);
      overflow: hidden;
    }

    .card-header-gradient {
      padding: 26px 32px;
      background: transparent;
      border-bottom: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 18px;
    }

    .card-body-soft {
      padding: clamp(22px, 3vw, 32px);
      background: var(--tool-surface);
    }

    .form-label {
      font-size: 0.8rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--primary-strong, #2f2a93);
      font-weight: 600;
      margin-bottom: 0.35rem;
    }

    textarea.form-control,
    input.form-control {
      border-radius: var(--tool-radius-sm);
      border: 1px solid var(--tool-border);
      background: linear-gradient(135deg, rgba(90, 84, 255, 0.04), rgba(255, 255, 255, 0.9));
      padding: 1rem 1.1rem;
      font-size: 1rem;
      color: var(--app-text);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    textarea.form-control:focus,
    input.form-control:focus {
      border-color: var(--tool-border-strong);
      box-shadow: 0 0 0 3px rgba(90, 84, 255, 0.12);
    }

    .recipient-upload-group {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .recipient-upload-btn {
      padding: 0.55rem 1.2rem;
      border-radius: 999px;
      border: 1px solid var(--tool-border);
      background: rgba(90, 84, 255, 0.08);
      color: var(--app-primary-strong);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
    }

    .recipient-upload-hint {
      font-size: 0.85rem;
      color: var(--tool-muted);
      margin-top: 0.35rem;
    }

    .variable-panel {
      margin-top: 1rem;
      padding: 1rem 1.2rem;
      border-radius: var(--tool-radius-md);
      background: rgba(90, 84, 255, 0.05);
      border: 1px dashed rgba(90, 84, 255, 0.35);
    }

    .variable-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
      padding: 1.5rem 2rem;
      background: #ffffff;
      border: 1px solid var(--border-soft);
      border-radius: 18px;
    }

    .variable-description,
    .variable-note {
      margin: 0.35rem 0 0;
      font-size: 0.9rem;
      color: var(--tool-muted);
    }

    .variable-token-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 0.6rem;
      margin-top: 0.6rem;
    }

    .variable-token {
      border: 1px solid rgba(90, 84, 255, 0.25);
      border-radius: var(--tool-radius-sm);
      padding: 0.55rem 0.75rem;
      background: rgba(255, 255, 255, 0.85);
      color: var(--app-text);
      text-align: left;
      cursor: pointer;
      transition: border 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .variable-token strong { display: block; font-size: 0.95rem; }
    .variable-token span { font-size: 0.8rem; color: var(--tool-muted); }

    .variable-token:hover,
    .variable-token:focus-visible {
      border-color: rgba(34, 211, 238, 0.6);
      background: rgba(34, 211, 238, 0.12);
      transform: translateY(-1px);
    }

    .action-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 1.4rem;
    }

    .btn-main {
      border-radius: 999px;
      border: 1px solid transparent;
      padding: 0.85rem 1.6rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .btn-main.primary {
      background: linear-gradient(135deg, rgba(90, 84, 255, 0.95), rgba(30, 200, 255, 0.95));
      color: #fff;
      box-shadow: 0 18px 32px rgba(90, 84, 255, 0.25);
    }

    .btn-main.outline {
      border-color: var(--tool-border);
      background: transparent;
      color: var(--app-text);
    }

    .btn-main.soft {
      background: var(--tool-soft);
      color: var(--app-primary-strong);
    }

    .btn-main:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 32px rgba(90, 84, 255, 0.18);
    }

    .monitor-card .status-items {
      display: grid;
      gap: 1.4rem;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .status-item {
      padding: 1.2rem 1.4rem;
      border-radius: var(--tool-radius-md);
      background: rgba(90, 84, 255, 0.05);
      border: 1px solid var(--tool-border);
    }

    .status-item .label {
      color: var(--tool-muted);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .status-item .value {
      font-size: 1.6rem;
      font-weight: 600;
      color: var(--app-text);
    }

    .log-area {
      margin-top: 1.8rem;
      padding: 1.4rem;
      border-radius: var(--tool-radius-md);
      border: 1px solid var(--tool-border);
      background: rgba(8, 12, 28, 0.85);
      max-height: 320px;
      overflow-y: auto;
      font-family: var(--font-mono, 'Geist Mono', 'SFMono-Regular', Menlo, Consolas, monospace);
      font-size: 0.88rem;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.8);
    }

    footer.footer {
      padding: 40px 0;
      background: transparent;
      color: var(--tool-muted);
    }

    footer .nav-link {
      color: var(--tool-muted);
      font-weight: 600;
    }

    @media (max-width: 991px) {
      .tool-layout {
        padding-left: 0;
      }

      aside.sidebar {
        position: relative;
        width: 100%;
        height: auto;
      }
    }
  
    /* Footer styles */
    .site-footer {
      margin-top: 120px;
      padding: 90px 0 0;
      background: var(--bg-2);
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      position: relative;
      overflow: hidden;
    }

    .site-footer::before {
      content: '';
      position: absolute;
      inset: 0;
      background: transparent;
      pointer-events: none;
    }

    .footer-shell {
      position: relative;
      display: grid;
      grid-template-columns: minmax(220px, 0.9fr) minmax(480px, 2.1fr);
      gap: 2.5rem;
      z-index: 1;
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .footer-brand-mark {
      align-items: center;
      gap: 14px;
    }

    .footer-brand p {
      margin: 0;
      color: var(--text-muted);
    }

    .footer-columns {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1.25rem;
    }

    @media (min-width: 1100px) {
      .footer-columns {
        grid-template-columns: repeat(5, minmax(120px, 1fr));
      }
    }

    .footer-column {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .footer-heading {
      font-size: 0.78rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 0.4rem;
    }

    .footer-column a {
      color: var(--text);
      font-weight: 500;
      font-size: 0.95rem;
      opacity: 0.8;
      transition: opacity 0.2s ease;
    }

    .footer-column a:hover,
    .footer-column a:focus-visible,
    .footer-contact a:hover,
    .footer-contact a:focus-visible,
    .footer-social a:hover,
    .footer-social a:focus-visible {
      opacity: 1;
      color: var(--primary-strong);
    }

    .footer-bottom {
      margin-top: 60px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      position: relative;
      z-index: 1;
    }

    .footer-bottom-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 24px 0 40px;
      color: var(--text-muted);
    }

    .footer-bottom-inner p {
      margin: 0;
    }

    .footer-legal-links,
    .footer-social {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      font-weight: 500;
    }

    .footer-legal-links a,
    .footer-social a {
      color: inherit;
      opacity: 0.9;
    }

    @media (max-width: 960px) {
      .footer-shell {
        grid-template-columns: 1fr;
      }
    }

/* template: social-links */
:root {
      --tool-bg: var(--bg, #fdfbff);
      --tool-bg-alt: var(--bg-2, #f6f9ff);
      --tool-surface: #ffffff;
      --tool-soft: rgba(90, 84, 255, 0.08);
      --tool-muted: rgba(16, 20, 55, 0.65);
      --tool-border: rgba(32, 44, 96, 0.12);
      --tool-border-strong: rgba(90, 84, 255, 0.3);
      --tool-shadow: 0 30px 60px rgba(18, 24, 66, 0.12);
      --tool-radius-lg: 28px;
      --tool-radius-md: 18px;
      --tool-radius-sm: 12px;
      --panel: #ffffff;
      --panel-border: rgba(16, 20, 55, 0.08);
      --app-primary: var(--primary, #5a54ff);
      --app-primary-strong: var(--primary-strong, #2f2a93);
      --app-text: var(--text, #101437);
      --app-text-muted: var(--text-muted, rgba(16, 20, 55, 0.65));
    }

    * {
      box-sizing: border-box;
    }

    body.app-body {
      margin: 0;
      font-family: var(--font-body, 'Geist', 'Inter', 'Segoe UI', sans-serif);
      background:
        radial-gradient(circle at 12% 15%, rgba(90, 84, 255, 0.18), transparent 45%),
        radial-gradient(circle at 82% -5%, rgba(30, 200, 255, 0.18), transparent 48%),
        var(--tool-bg);
      color: var(--text, #101437);
      min-height: 100vh;
      overflow-x: hidden;
    }

    .tool-layout {
      min-height: 100vh;
      background: var(--tool-bg);
      padding: 0 0 40px;
    }

        .tool-chrome{margin-top:-12px; position:relative;}

    aside.sidebar {
      background: var(--panel);
      border-right: 1px solid var(--panel-border);
      padding: 32px 24px 40px;
      display: flex;
      flex-direction: column;
      gap: 32px;
      box-shadow: inset -1px 0 0 rgba(16, 20, 55, 0.04);
      position: fixed;
      top: 0;
      left: 0;
      width: 270px;
      height: 100vh;
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .brand-copy {
      line-height: 1.3;
    }

    .brand-copy strong {
      display: block;
      font-size: 1.1rem;
    }

    .brand-copy span {
      font-size: 0.85rem;
      color: var(--app-text-muted);
    }

    .nav-label {
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--app-text-muted);
      margin-bottom: 12px;
    }

    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    nav li a {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 12px;
      color: var(--app-text);
      font-weight: 500;
    }

    nav li a:hover,
    nav li.active a {
      background: rgba(90, 84, 255, 0.1);
      color: var(--app-primary-strong);
    }

    .nav-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: rgba(90, 84, 255, 0.12);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .nav-icon svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
    }
    main.main-content {
      flex: 1;
      padding: 24px clamp(24px, 4vw, 60px) 48px;
    }

    .tool-hero {
      background: var(--tool-surface);
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-lg);
      padding: clamp(24px, 4vw, 36px);
      box-shadow: var(--tool-shadow);
      display: flex;
      flex-wrap: wrap;
      gap: 32px;
      align-items: flex-start;
      position: relative;
      overflow: hidden;
    }

    .tool-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 85% 15%, rgba(30, 200, 255, 0.12), transparent 45%);
      pointer-events: none;
    }

    .hero-details,
    .hero-side {
      position: relative;
      z-index: 1;
      flex: 1 1 320px;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.4rem 0.95rem;
      border-radius: 999px;
      background: var(--tool-soft);
      color: var(--primary-strong, #2f2a93);
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .tool-hero h1 {
      margin: 1rem 0 0.35rem;
      font-size: clamp(2rem, 1.4rem + 1.5vw, 2.8rem);
      line-height: 1.1;
    }

    .tool-hero p {
      margin: 0;
      color: var(--tool-muted);
      max-width: 640px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 1.4rem;
    }

    .action-btn {
      border-radius: 999px;
      border: 1px solid transparent;
      padding: 0.75rem 1.4rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      text-decoration: none;
    }

    .action-btn.primary {
      background: linear-gradient(135deg, var(--primary, #5a54ff), var(--accent, #1ec8ff));
      color: #fff;
      box-shadow: 0 20px 35px rgba(90, 84, 255, 0.25);
    }

    .action-btn.outline {
      background: transparent;
      border-color: var(--tool-border);
      color: var(--app-text);
    }

    .action-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 22px 38px rgba(90, 84, 255, 0.18);
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 14px;
    }

    .stat-card {
      background: var(--tool-bg-alt);
      border-radius: var(--tool-radius-sm);
      padding: 14px 18px;
      border: 1px solid rgba(32, 44, 96, 0.08);
      font-weight: 600;
      color: var(--primary-strong, #2f2a93);
    }

    .extension-banner {
      margin: 28px auto 0;
      background: var(--tool-surface);
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-md);
      padding: 20px 24px;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      box-shadow: var(--tool-shadow);
    }

    .extension-banner-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .btn-download-ext,
    .btn-install-guide {
      border-radius: 999px;
      padding: 10px 20px;
      font-weight: 600;
      border: 1px solid var(--tool-border);
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }

    .btn-download-ext {
      background: linear-gradient(135deg, var(--primary, #5a54ff), var(--accent, #1ec8ff));
      color: #fff;
      border-color: transparent;
    }

    .btn-install-guide {
      background: var(--tool-soft);
      color: var(--primary-strong, #2f2a93);
    }

    section { padding: clamp(32px, 4vw, 60px) 0; }

    .playbook-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 18px;
    }

    .playbook-card {
      border-radius: var(--tool-radius-md);
      border: 1px solid var(--tool-border);
      padding: clamp(18px, 2vw, 26px);
      background: var(--tool-surface);
      box-shadow: var(--tool-shadow);
    }

    .playbook-card h4 { margin-bottom: 0.6rem; }
    .playbook-card p { color: var(--tool-muted); margin-bottom: 0.3rem; }

    .extract-card,
    .results-card {
      max-width: 1240px;
      margin: 0 auto;
      border-radius: var(--tool-radius-lg);
      border: 1px solid var(--tool-border);
      background: var(--tool-surface);
      box-shadow: var(--tool-shadow);
      overflow: hidden;
    }

    .card-header-gradient {
      padding: 26px 32px;
      background: linear-gradient(135deg, rgba(90, 84, 255, 0.1), rgba(30, 200, 255, 0.18));
      border-bottom: 1px solid var(--tool-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 18px;
    }

    .card-body-soft {
      padding: clamp(22px, 3vw, 32px);
      background: var(--tool-surface);
    }

    .form-label {
      font-size: 0.8rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--primary-strong, #2f2a93);
      font-weight: 600;
      margin-bottom: 0.35rem;
    }

    textarea#domainsInput {
      width: 100%;
      min-height: 220px;
      border-radius: var(--tool-radius-sm);
      border: 1px solid var(--tool-border);
      background: linear-gradient(135deg, rgba(90, 84, 255, 0.04), rgba(255, 255, 255, 0.9));
      padding: 1.1rem 1.2rem;
      font-size: 1rem;
      line-height: 1.55;
      color: var(--app-text);
      resize: vertical;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    textarea#domainsInput:focus {
      outline: none;
      border-color: var(--tool-border-strong);
      box-shadow: 0 0 0 3px rgba(90, 84, 255, 0.12);
    }

    .action-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 1.2rem;
    }

    .btn-scrape {
      border-radius: 999px;
      border: 1px solid transparent;
      padding: 0.8rem 1.4rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .btn-primary-glow {
      background: linear-gradient(135deg, rgba(90, 84, 255, 0.95), rgba(30, 200, 255, 0.95));
      color: #fff;
      box-shadow: 0 18px 32px rgba(90, 84, 255, 0.25);
    }

    .btn-outline-light {
      border-color: var(--tool-border);
      background: transparent;
      color: var(--app-text);
    }

    .btn-soft {
      background: var(--tool-soft);
      color: var(--app-primary-strong);
      border-color: transparent;
    }

    .btn-scrape:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 32px rgba(90, 84, 255, 0.18);
    }

    #progress-container {
      display: none;
      margin-top: 1.5rem;
      border-radius: var(--tool-radius-sm);
      border: 1px solid var(--tool-border);
      padding: 1rem 1.2rem;
      background: var(--tool-bg-alt);
    }

    #progress-container small {
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--tool-muted);
      font-weight: 600;
    }

    progress#progressBar {
      width: 100%;
      height: 12px;
      border-radius: 999px;
      overflow: hidden;
      appearance: none;
      background: rgba(148, 163, 184, 0.16);
    }

    progress#progressBar::-webkit-progress-value {
      background: linear-gradient(135deg, rgba(90, 84, 255, 0.9), rgba(30, 200, 255, 0.9));
    }

    .info-card {
      border-radius: var(--tool-radius-md);
      border: 1px solid var(--tool-border);
      padding: 1.6rem;
      background: linear-gradient(145deg, rgba(90, 84, 255, 0.08), rgba(255, 255, 255, 0.9));
      box-shadow: var(--tool-shadow);
      height: 100%;
    }

    .info-card h4 { margin-bottom: 0.75rem; }
    .info-card p { color: var(--tool-muted); margin-bottom: 0.5rem; }

    .results-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 1.2rem;
    }

    .result-table-wrapper {
      border-radius: var(--tool-radius-lg);
      border: 1px solid var(--tool-border);
      box-shadow: var(--tool-shadow);
      background: var(--tool-surface);
    }

    table.result-table {
      margin: 0;
      width: 100%;
      border-collapse: collapse;
    }

    .result-table th,
    .result-table td {
      padding: 0.85rem;
      border-bottom: 1px solid rgba(32, 44, 96, 0.1);
      font-size: 0.95rem;
      color: var(--app-text);
    }

    .result-table thead th {
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 0.78rem;
      color: var(--tool-muted);
      background: var(--tool-bg-alt);
    }

    .result-table tbody tr:hover {
      background: rgba(90, 84, 255, 0.08);
    }

    .info-slab {
      max-width: 1240px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 18px;
    }

    .cta-panel {
      background: linear-gradient(135deg, var(--primary, #5a54ff), var(--accent, #1ec8ff));
      border-radius: var(--tool-radius-lg);
      padding: clamp(32px, 4vw, 48px);
      color: #fff;
      text-align: center;
      box-shadow: 0 35px 60px rgba(15, 23, 42, 0.25);
    }

    .cta-panel .action-btn {
      border-color: rgba(255, 255, 255, 0.8);
      color: #fff;
    }

    footer.footer {
      padding: 40px 0;
      background: transparent;
      color: var(--tool-muted);
    }

    footer .nav-link {
      color: var(--tool-muted);
      font-weight: 600;
    }

    @media (max-width: 991px) {
      .tool-layout { flex-direction: column; }
      aside.sidebar { width: 100%; position: relative; min-height: auto; }
    }
  
    /* Footer styles */
    .site-footer {
      margin-top: 120px;
      padding: 90px 0 0;
      background: var(--bg-2);
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      position: relative;
      overflow: hidden;
    }

    .site-footer::before {
      content: '';
      position: absolute;
      inset: 0;
      background: transparent;
      pointer-events: none;
    }

    .footer-shell {
      position: relative;
      display: grid;
      grid-template-columns: minmax(220px, 0.9fr) minmax(480px, 2.1fr);
      gap: 2.5rem;
      z-index: 1;
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .footer-brand-mark {
      align-items: center;
      gap: 14px;
    }

    .footer-brand p {
      margin: 0;
      color: var(--text-muted);
    }

    .footer-columns {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1.25rem;
    }

    @media (min-width: 1100px) {
      .footer-columns {
        grid-template-columns: repeat(5, minmax(120px, 1fr));
      }
    }

    .footer-column {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .footer-heading {
      font-size: 0.78rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 0.4rem;
    }

    .footer-column a {
      color: var(--text);
      font-weight: 500;
      font-size: 0.95rem;
      opacity: 0.8;
      transition: opacity 0.2s ease;
    }

    .footer-column a:hover,
    .footer-column a:focus-visible,
    .footer-contact a:hover,
    .footer-contact a:focus-visible,
    .footer-social a:hover,
    .footer-social a:focus-visible {
      opacity: 1;
      color: var(--primary-strong);
    }

    .footer-bottom {
      margin-top: 60px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      position: relative;
      z-index: 1;
    }

    .footer-bottom-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 24px 0 40px;
      color: var(--text-muted);
    }

    .footer-bottom-inner p {
      margin: 0;
    }

    .footer-legal-links,
    .footer-social {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      font-weight: 500;
    }

    .footer-legal-links a,
    .footer-social a {
      color: inherit;
      opacity: 0.9;
    }

    @media (max-width: 960px) {
      .footer-shell {
        grid-template-columns: 1fr;
      }
    }

/* template: yellowpages */
:root {
      --tool-bg: var(--bg, #fdfbff);
      --tool-bg-alt: var(--bg-2, #f6f9ff);
      --tool-surface: #ffffff;
      --tool-soft: rgba(90, 84, 255, 0.08);
      --tool-muted: rgba(16, 20, 55, 0.65);
      --tool-border: rgba(32, 44, 96, 0.12);
      --tool-border-strong: rgba(90, 84, 255, 0.3);
      --tool-shadow: 0 30px 60px rgba(18, 24, 66, 0.12);
      --tool-radius-lg: 28px;
      --tool-radius-md: 18px;
      --tool-radius-sm: 12px;
      --panel: #ffffff;
      --panel-border: rgba(16, 20, 55, 0.08);
      --app-primary: var(--primary, #5a54ff);
      --app-primary-strong: var(--primary-strong, #2f2a93);
      --app-text: var(--text, #101437);
      --app-text-muted: var(--text-muted, rgba(16, 20, 55, 0.65));
    }

    * { box-sizing: border-box; }

    body.app-body {
      margin: 0;
      font-family: var(--font-body, 'Geist', 'Inter', 'Segoe UI', sans-serif);
      background:
        radial-gradient(circle at 12% 15%, rgba(90, 84, 255, 0.18), transparent 45%),
        radial-gradient(circle at 82% -5%, rgba(30, 200, 255, 0.18), transparent 48%),
        var(--tool-bg);
      color: var(--text, #101437);
      min-height: 100vh;
      overflow-x: hidden;
    }

    .tool-layout {
      min-height: 100vh;
      background: var(--tool-bg);
      padding: 0 0 40px;
    }

        .tool-chrome{margin-top:-12px; position:relative;}

    aside.sidebar {
      background: var(--panel);
      border-right: 1px solid var(--panel-border);
      padding: 32px 24px 40px;
      display: flex;
      flex-direction: column;
      gap: 32px;
      box-shadow: inset -1px 0 0 rgba(16, 20, 55, 0.04);
      position: fixed;
      top: 0;
      left: 0;
      width: 270px;
      height: 100vh;
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .brand-copy {
      line-height: 1.3;
    }

    .brand-copy strong {
      display: block;
      font-size: 1.1rem;
    }

    .brand-copy span {
      font-size: 0.85rem;
      color: var(--app-text-muted);
    }

    .nav-label {
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--app-text-muted);
      margin-bottom: 12px;
    }

    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    nav li a {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 12px;
      color: var(--app-text);
      font-weight: 500;
    }

    nav li a:hover,
    nav li.active a {
      background: rgba(90, 84, 255, 0.1);
      color: var(--app-primary-strong);
    }

    .nav-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: rgba(90, 84, 255, 0.12);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .nav-icon svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
    }
    main.main-content { flex: 1; padding: 24px clamp(24px, 4vw, 60px) 48px; }

    .tool-hero {
      background: var(--tool-surface);
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-lg);
      padding: clamp(24px, 4vw, 36px);
      box-shadow: var(--tool-shadow);
      display: flex;
      flex-wrap: wrap;
      gap: 32px;
      align-items: flex-start;
      position: relative;
      overflow: hidden;
    }

    .tool-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 85% 15%, rgba(30, 200, 255, 0.12), transparent 45%);
      pointer-events: none;
    }

    .hero-details, .hero-side { position: relative; z-index: 1; flex: 1 1 320px; }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.4rem 0.95rem;
      border-radius: 999px;
      background: var(--tool-soft);
      color: var(--primary-strong, #2f2a93);
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .tool-hero h1 { margin: 1rem 0 0.35rem; font-size: clamp(2rem, 1.4rem + 1.5vw, 2.8rem); line-height: 1.1; }
    .tool-hero p { margin: 0; color: var(--tool-muted); max-width: 640px; }

    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4rem; }

    .action-btn {
      border-radius: 999px;
      border: 1px solid transparent;
      padding: 0.75rem 1.4rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      text-decoration: none;
    }

    .action-btn.primary {
      background: linear-gradient(135deg, var(--primary, #5a54ff), var(--accent, #1ec8ff));
      color: #fff;
      box-shadow: 0 20px 35px rgba(90, 84, 255, 0.25);
    }

    .action-btn.outline {
      background: transparent;
      border-color: var(--tool-border);
      color: var(--app-text);
    }

    .action-btn.soft {
      background: var(--tool-soft);
      color: var(--app-primary-strong);
      border-color: var(--tool-border);
    }

    .action-btn:hover { transform: translateY(-1px); box-shadow: 0 22px 38px rgba(90, 84, 255, 0.18); }

    .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }

    .stat-card {
      background: var(--tool-bg-alt);
      border-radius: var(--tool-radius-sm);
      padding: 14px 18px;
      border: 1px solid rgba(32, 44, 96, 0.08);
      font-weight: 600;
      color: var(--primary-strong, #2f2a93);
    }

    .extension-banner {
      margin: 28px auto 0;
      background: var(--tool-surface);
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-md);
      padding: 20px 24px;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      box-shadow: var(--tool-shadow);
    }

    .extension-banner-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
    .btn-download-ext, .btn-install-guide {
      border-radius: 999px;
      padding: 10px 20px;
      font-weight: 600;
      border: 1px solid var(--tool-border);
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }
    .btn-download-ext { background: linear-gradient(135deg, var(--primary, #5a54ff), var(--accent, #1ec8ff)); color: #fff; border-color: transparent; }
    .btn-install-guide { background: var(--tool-soft); color: var(--primary-strong, #2f2a93); }

    .extension-banner-content { 
      color: var(--tool-muted); 
      text-align: left;
    }

    section { padding: clamp(32px, 4vw, 60px) 0; }

    .playbook-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }

    .playbook-card {
      border-radius: var(--tool-radius-md);
      border: 1px solid var(--tool-border);
      padding: clamp(18px, 2vw, 26px);
      background: var(--tool-surface);
      box-shadow: var(--tool-shadow);
    }
    .playbook-card h4 { margin-bottom: 0.6rem; }
    .playbook-card p { color: var(--tool-muted); margin-bottom: 0.3rem; }

    .info-slab {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 28px;
    }

    .instructions-card, .results-card {
      max-width: 1240px;
      margin: 0 auto;
      border-radius: var(--tool-radius-lg);
      border: 1px solid var(--tool-border);
      background: var(--tool-surface);
      box-shadow: var(--tool-shadow);
      overflow: hidden;
    }

    .card-header-gradient {
      padding: 26px 32px;
      background: linear-gradient(135deg, rgba(90, 84, 255, 0.1), rgba(30, 200, 255, 0.18));
      border-bottom: 1px solid var(--tool-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 18px;
    }

    .card-body-soft { padding: clamp(22px, 3vw, 32px); background: var(--tool-surface); }

    .steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
    .steps-list li { display: flex; gap: 0.75rem; color: var(--tool-muted); line-height: 1.6; }
    .step-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--tool-soft);
      color: var(--primary-strong, #2f2a93);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      flex-shrink: 0;
    }

    #progressContainer {
      display: none;
      max-width: 1240px;
      margin: 0 auto;
      border-radius: var(--tool-radius-md);
      border: 1px solid var(--tool-border);
      padding: 1.1rem 1.4rem;
      background: var(--tool-bg-alt);
      box-shadow: var(--tool-shadow);
    }
    .progress-label { font-weight: 600; letter-spacing: 0.08em; color: var(--tool-muted); }
    progress {
      width: 100%;
      height: 12px;
      border-radius: 999px;
      overflow: hidden;
      appearance: none;
      background: rgba(148, 163, 184, 0.18);
    }
    progress::-webkit-progress-value { background: linear-gradient(135deg, rgba(90, 84, 255, 0.9), rgba(30, 200, 255, 0.9)); }

    .results-header {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: space-between;
      margin-bottom: 1.2rem;
    }

    .result-table-wrapper { border-radius: var(--tool-radius-lg); border: 1px solid var(--tool-border); box-shadow: var(--tool-shadow); }
    table.table { margin: 0; }

    .empty-state {
      text-align: center;
      padding: 2.4rem 1rem;
      color: var(--tool-muted);
    }
    .empty-state i { font-size: 2rem; margin-bottom: 0.6rem; color: var(--tool-soft); }

    footer.footer { padding: 40px 0; background: transparent; color: var(--tool-muted); }
    footer .nav-link { color: var(--tool-muted); font-weight: 600; }

    @media (max-width: 991px) {
      .tool-layout { flex-direction: column; }
      aside.sidebar { width: 100%; position: relative; min-height: auto; }
    }
  
    /* Footer styles */
    .site-footer {
      margin-top: 120px;
      padding: 90px 0 0;
      background: var(--bg-2);
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      position: relative;
      overflow: hidden;
    }

    .site-footer::before {
      content: '';
      position: absolute;
      inset: 0;
      background: transparent;
      pointer-events: none;
    }

    .footer-shell {
      position: relative;
      display: grid;
      grid-template-columns: minmax(220px, 0.9fr) minmax(480px, 2.1fr);
      gap: 2.5rem;
      z-index: 1;
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .footer-brand-mark {
      align-items: center;
      gap: 14px;
    }

    .footer-brand p {
      margin: 0;
      color: var(--text-muted);
    }

    .footer-columns {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1.25rem;
    }

    @media (min-width: 1100px) {
      .footer-columns {
        grid-template-columns: repeat(5, minmax(120px, 1fr));
      }
    }

    .footer-column {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .footer-heading {
      font-size: 0.78rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 0.4rem;
    }

    .footer-column a {
      color: var(--text);
      font-weight: 500;
      font-size: 0.95rem;
      opacity: 0.8;
      transition: opacity 0.2s ease;
    }

    .footer-column a:hover,
    .footer-column a:focus-visible,
    .footer-contact a:hover,
    .footer-contact a:focus-visible,
    .footer-social a:hover,
    .footer-social a:focus-visible {
      opacity: 1;
      color: var(--primary-strong);
    }

    .footer-bottom {
      margin-top: 60px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      position: relative;
      z-index: 1;
    }

    .footer-bottom-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 24px 0 40px;
      color: var(--text-muted);
    }

    .footer-bottom-inner p {
      margin: 0;
    }

    .footer-legal-links,
    .footer-social {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      font-weight: 500;
    }

    .footer-legal-links a,
    .footer-social a {
      color: inherit;
      opacity: 0.9;
    }

    @media (max-width: 960px) {
      .footer-shell {
        grid-template-columns: 1fr;
      }
    }

/* template: yelp */
:root {
      --tool-bg: var(--bg, #fdfbff);
      --tool-bg-alt: var(--bg-2, #f6f9ff);
      --tool-surface: #ffffff;
      --tool-soft: rgba(90, 84, 255, 0.08);
      --tool-muted: rgba(16, 20, 55, 0.65);
      --tool-border: rgba(32, 44, 96, 0.12);
      --tool-border-strong: rgba(90, 84, 255, 0.3);
      --tool-shadow: 0 30px 60px rgba(18, 24, 66, 0.12);
      --tool-radius-lg: 28px;
      --tool-radius-md: 18px;
      --tool-radius-sm: 12px;
      --panel: #ffffff;
      --panel-border: rgba(16, 20, 55, 0.08);
      --app-primary: var(--primary, #5a54ff);
      --app-primary-strong: var(--primary-strong, #2f2a93);
      --app-text: var(--text, #101437);
      --app-text-muted: var(--text-muted, rgba(16, 20, 55, 0.65));
    }

    * { box-sizing: border-box; }

    body.app-body {
      margin: 0;
      font-family: var(--font-body, 'Geist', 'Inter', 'Segoe UI', sans-serif);
      background:
        radial-gradient(circle at 12% 15%, rgba(90, 84, 255, 0.18), transparent 45%),
        radial-gradient(circle at 82% -5%, rgba(30, 200, 255, 0.18), transparent 48%),
        var(--tool-bg);
      color: var(--text, #101437);
      min-height: 100vh;
      overflow-x: hidden;
    }

    .tool-layout {
      min-height: 100vh;
      background: var(--tool-bg);
      padding: 0 0 40px;
    }

        .tool-chrome{margin-top:-12px; position:relative;}

    aside.sidebar {
      background: var(--panel);
      border-right: 1px solid var(--panel-border);
      padding: 32px 24px 40px;
      display: flex;
      flex-direction: column;
      gap: 32px;
      box-shadow: inset -1px 0 0 rgba(16, 20, 55, 0.04);
      position: fixed;
      top: 0;
      left: 0;
      width: 270px;
      height: 100vh;
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .brand-copy {
      line-height: 1.3;
    }

    .brand-copy strong {
      display: block;
      font-size: 1.1rem;
    }

    .brand-copy span {
      font-size: 0.85rem;
      color: var(--app-text-muted);
    }

    .nav-label {
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--app-text-muted);
      margin-bottom: 12px;
    }

    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    nav li a {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 12px;
      color: var(--app-text);
      font-weight: 500;
    }

    nav li a:hover,
    nav li.active a {
      background: rgba(90, 84, 255, 0.1);
      color: var(--app-primary-strong);
    }

    .nav-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: rgba(90, 84, 255, 0.12);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .nav-icon svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
    }
    main.main-content { flex: 1; padding: 24px clamp(24px, 4vw, 60px) 48px; }

    .tool-hero {
      background: var(--tool-surface);
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-lg);
      padding: clamp(24px, 4vw, 36px);
      box-shadow: var(--tool-shadow);
      display: flex;
      flex-wrap: wrap;
      gap: 32px;
      align-items: flex-start;
      position: relative;
      overflow: hidden;
    }

    .tool-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 85% 15%, rgba(30, 200, 255, 0.12), transparent 45%);
      pointer-events: none;
    }

    .hero-details, .hero-side { position: relative; z-index: 1; flex: 1 1 320px; }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.4rem 0.95rem;
      border-radius: 999px;
      background: var(--tool-soft);
      color: var(--primary-strong, #2f2a93);
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .tool-hero h1 { margin: 1rem 0 0.35rem; font-size: clamp(2rem, 1.4rem + 1.5vw, 2.8rem); line-height: 1.1; }
    .tool-hero p { margin: 0; color: var(--tool-muted); max-width: 640px; }

    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4rem; }

    .action-btn {
      border-radius: 999px;
      border: 1px solid transparent;
      padding: 0.75rem 1.4rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      text-decoration: none;
    }

    .action-btn.primary {
      background: linear-gradient(135deg, var(--primary, #5a54ff), var(--accent, #1ec8ff));
      color: #fff;
      box-shadow: 0 20px 35px rgba(90, 84, 255, 0.25);
    }

    .action-btn.outline { background: transparent; border-color: var(--tool-border); color: var(--app-text); }
    .action-btn.soft { background: var(--tool-soft); color: var(--app-primary-strong); border-color: transparent; }
    .action-btn:hover { transform: translateY(-1px); box-shadow: 0 22px 38px rgba(90, 84, 255, 0.18); }

    .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
    .stat-card { background: var(--tool-bg-alt); border-radius: var(--tool-radius-sm); padding: 14px 18px; border: 1px solid rgba(32, 44, 96, 0.08); font-weight: 600; color: var(--primary-strong, #2f2a93); }

    .extension-banner {
      margin: 28px auto 0;
      background: var(--tool-surface);
      border: 1px solid var(--tool-border);
      border-radius: var(--tool-radius-md);
      padding: 20px 24px;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      box-shadow: var(--tool-shadow);
    }
    .extension-banner-content { flex: 1; color: var(--tool-muted); font-weight: 500; }
    .extension-banner-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
    .btn-download-ext, .btn-install-guide {
      border-radius: 999px;
      padding: 10px 20px;
      font-weight: 600;
      border: 1px solid var(--tool-border);
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }
    .btn-download-ext { background: linear-gradient(135deg, var(--primary, #5a54ff), var(--accent, #1ec8ff)); color: #fff; border-color: transparent; }
    .btn-install-guide { background: var(--tool-soft); color: var(--primary-strong, #2f2a93); }

    section { padding: clamp(32px, 4vw, 60px) 0; }

    .playbook-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
    .playbook-card { border-radius: var(--tool-radius-md); border: 1px solid var(--tool-border); padding: clamp(18px, 2vw, 26px); background: var(--tool-surface); box-shadow: var(--tool-shadow); }
    .playbook-card h4 { margin-bottom: 0.6rem; }
    .playbook-card p { color: var(--tool-muted); margin-bottom: 0.3rem; }

    .instructions-card, .results-card { max-width: 1240px; margin: 0 auto; border-radius: var(--tool-radius-lg); border: 1px solid var(--tool-border); background: var(--tool-surface); box-shadow: var(--tool-shadow); overflow: hidden; }
    .card-header-gradient { padding: 26px 32px; background: linear-gradient(135deg, rgba(90, 84, 255, 0.1), rgba(30, 200, 255, 0.18)); border-bottom: 1px solid var(--tool-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
    .card-body-soft { padding: clamp(22px, 3vw, 32px); background: var(--tool-surface); }

    .steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
    .steps-list li { display: flex; gap: 0.75rem; color: var(--tool-muted); line-height: 1.6; }
    .step-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--tool-soft); color: var(--app-primary-strong); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
    .empty-state {
      text-align: center;
      padding: 2.4rem 1rem;
      color: var(--tool-muted);
    }
    .empty-state i { font-size: 2rem; margin-bottom: 0.6rem; color: var(--tool-soft); }

    #progressContainer { display: none; max-width: 1240px; margin: 0 auto; border-radius: var(--tool-radius-md); border: 1px solid var(--tool-border); padding: 1.1rem 1.4rem; background: var(--tool-bg-alt); box-shadow: var(--tool-shadow); }
    .progress-label { font-weight: 600; letter-spacing: 0.08em; color: var(--tool-muted); }
    progress { width: 100%; height: 12px; border-radius: 999px; overflow: hidden; appearance: none; background: rgba(148, 163, 184, 0.18); }
    progress::-webkit-progress-value { background: linear-gradient(135deg, rgba(90, 84, 255, 0.9), rgba(30, 200, 255, 0.9)); }

    .results-header { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; margin-bottom: 1.2rem; }
    .result-table-wrapper { border-radius: var(--tool-radius-lg); border: 1px solid var(--tool-border); box-shadow: var(--tool-shadow); background: var(--tool-surface); }
    .table thead th { background: var(--tool-bg-alt); color: var(--tool-muted); border-bottom: 1px solid var(--tool-border); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; }

    .info-slab { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }

    .cta-panel { background: linear-gradient(135deg, var(--primary, #5a54ff), var(--accent, #1ec8ff)); border-radius: var(--tool-radius-lg); padding: clamp(32px, 4vw, 48px); color: #fff; text-align: center; box-shadow: 0 35px 60px rgba(15, 23, 42, 0.25); }

        footer.footer { padding: 40px 0; background: transparent; color: var(--tool-muted); }
    footer .nav-link { color: var(--tool-muted); font-weight: 600; }

    @media (max-width: 991px) {
      .tool-layout { flex-direction: column; }
      aside.sidebar { width: 100%; position: relative; min-height: auto; }
    }
  
    /* Footer styles */
    .site-footer {
      margin-top: 120px;
      padding: 90px 0 0;
      background: var(--bg-2);
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      position: relative;
      overflow: hidden;
    }

    .site-footer::before {
      content: '';
      position: absolute;
      inset: 0;
      background: transparent;
      pointer-events: none;
    }

    .footer-shell {
      position: relative;
      display: grid;
      grid-template-columns: minmax(220px, 0.9fr) minmax(480px, 2.1fr);
      gap: 2.5rem;
      z-index: 1;
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .footer-brand-mark {
      align-items: center;
      gap: 14px;
    }

    .footer-brand p {
      margin: 0;
      color: var(--text-muted);
    }

    .footer-columns {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1.25rem;
    }

    @media (min-width: 1100px) {
      .footer-columns {
        grid-template-columns: repeat(5, minmax(120px, 1fr));
      }
    }

    .footer-column {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .footer-heading {
      font-size: 0.78rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 0.4rem;
    }

    .footer-column a {
      color: var(--text);
      font-weight: 500;
      font-size: 0.95rem;
      opacity: 0.8;
      transition: opacity 0.2s ease;
    }

    .footer-column a:hover,
    .footer-column a:focus-visible,
    .footer-contact a:hover,
    .footer-contact a:focus-visible,
    .footer-social a:hover,
    .footer-social a:focus-visible {
      opacity: 1;
      color: var(--primary-strong);
    }

    .footer-bottom {
      margin-top: 60px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      position: relative;
      z-index: 1;
    }

    .footer-bottom-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 24px 0 40px;
      color: var(--text-muted);
    }

    .footer-bottom-inner p {
      margin: 0;
    }

    .footer-legal-links,
    .footer-social {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      font-weight: 500;
    }

    .footer-legal-links a,
    .footer-social a {
      color: inherit;
      opacity: 0.9;
    }

    @media (max-width: 960px) {
      .footer-shell {
        grid-template-columns: 1fr;
      }
    }

/* app-dashboard */
:root{
      --bg-body:#ffffff;--bg-sidebar:#ffffff;--bg-card:#ffffff;
      --primary:#000000;--primary-soft:#f2f2f2;--text-main:#000000;--text-muted:rgba(0,0,0,.55);
      --border-soft:#e5e5e5;--radius-xl:18px;--shadow-soft:0 8px 24px rgba(0,0,0,.08);
      --font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro",sans-serif;
      --sidebar-wide:260px; --sidebar-narrow:72px;
      --content-max:1140px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      overflow-x:hidden;
      font-family:var(--font-family);
      background:var(--bg-body);
      color:var(--text-main)
    }
    .app-layout{display:flex;min-height:100vh;background:var(--bg-body);overflow:hidden}

    #sidebar{
      width:var(--sidebar-wide);
      background:var(--bg-sidebar);
      position:fixed;left:0;top:0;bottom:0;
      padding:16px 12px;
      border-right:1px solid var(--border-soft);
      display:flex;flex-direction:column;z-index:1030;
      transition:width .25s ease, transform .3s ease;
      overflow-y:auto;
    }
    #sidebar::-webkit-scrollbar{width:0;height:0}
    #sidebar{scrollbar-width:none;-ms-overflow-style:none}
    #sidebar.narrow{width:var(--sidebar-narrow)}
    @media (max-width: 991.98px){
      #sidebar{transform:translateX(-100%);}  
      #sidebar.mobile-open{transform:translateX(0);}  
    }

    .brand{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:12px}
    .brand-emblem{
      width:44px;
      height:44px;
      border-radius:50%;
      background:#000;
      color:#fff;
      font-weight:700;
      font-size:0.95rem;
      letter-spacing:0.08em;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
      transition:transform .25s ease;
    }
    .brand-wordmark{display:flex;flex-direction:column;line-height:1.1}
    .brand-wordmark strong{font-size:1.1rem;color:#000}
    .brand-wordmark span{font-size:0.8rem;color:var(--text-muted);letter-spacing:0.08em;text-transform:uppercase}
    #sidebar.narrow .brand-wordmark{display:none}

    .home-toggle{
      display:flex;align-items:center;gap:10px;
      padding:10px 12px;margin:6px 0;border-radius:14px;
      color:var(--text-main);text-decoration:none;cursor:pointer;
      background:#fff;border:1px solid var(--border-soft);
    }
    .home-toggle:hover{border-color:#000}
    .home-toggle i{width:24px;text-align:center}
    .home-toggle .label{font-size:14px}
    #sidebar.narrow .home-toggle{justify-content:center}
    #sidebar.narrow .home-toggle .label{display:none}

    .nav-list{list-style:none;padding:8px 0 0;margin:0;display:flex;flex-direction:column;gap:4px}
    .nav-list a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;color:var(--text-muted);text-decoration:none;font-size:14px;transition:all .18s ease;white-space:nowrap}
    .nav-list a i{width:24px;text-align:center;font-size:16px}
    .nav-list a:hover{background:var(--primary-soft);color:var(--primary)}
    .nav-list a.active{background:#000;color:#fff}
    #sidebar.narrow .nav-list a span{display:none}

    #content{
      margin-left:var(--sidebar-narrow);
      width:calc(100% - var(--sidebar-narrow));
      flex:1;
      display:flex;
      flex-direction:column;
      min-height:100vh;
      transition:margin-left .25s ease,width .25s ease;
      background:var(--bg-body);
      max-width:100%;
      overflow:visible;
    }
    #content.expanded{
      margin-left:var(--sidebar-wide);
      width:calc(100% - var(--sidebar-wide));
    }
    #content.hiddenShift{
      margin-left:0;
      width:100%;
    }
    @media (max-width: 991.98px){
      #content,#content.expanded{
        margin-left:0 !important;
        width:100% !important;
      }
    }

    #app-header{height:78px;padding:0 16px 0 28px;background:#fff;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-soft);position:sticky;top:0;z-index:1020;flex-wrap:wrap;gap:8px}

    .app-note-banner{
      margin:18px 28px 12px;
      padding:18px 24px;
      border-radius:24px;
      border:1px solid rgba(15,23,42,.12);
      background:linear-gradient(135deg,#ffffff 0%,#f4f6ff 100%);
      box-shadow:0 18px 34px rgba(15,23,42,.08);
      display:flex;
      align-items:center;
      gap:18px;
      color:var(--text-main);
      flex-wrap:nowrap;
    }
    .app-note-icon-ring{
      width:48px;
      height:48px;
      border-radius:16px;
      background:#000;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:1.2rem;
      box-shadow:0 10px 22px rgba(0,0,0,.2);
      flex-shrink:0;
    }
    .app-note-text{
      margin:0;
      font-size:1rem;
      font-weight:500;
      color:var(--text-main);
      white-space:nowrap;
    }
    .app-note-text strong{color:#000}
    .app-note-actions{
      display:flex;
      align-items:center;
      gap:.75rem;
      margin-left:auto;
    }
    .app-note-actions .btn{
      border-radius:999px;
      padding:0.35rem 1.2rem;
      font-weight:600;
    }
    .app-note-link{
      font-weight:600;
      color:#1a4fff;
      text-decoration:none;
      border-bottom:1px solid transparent;
      transition:border-color .2s ease;
    }
    .app-note-link:hover{border-color:currentColor}
    .content-wrap{padding:22px 28px 28px}

    #tools .tool-card{background:var(--bg-card);border-radius:var(--radius-xl);padding:16px 14px;border:1px solid var(--border-soft);transition:.18s;height:100%}
    #tools .tool-card:hover{transform:translateY(-3px)}
    #tools .tool-card i{font-size:24px;color:#000}
    #tools .tool-card .btn{font-size:12px;padding:6px 14px;border-radius:10px}

    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger,
    .btn-dark,
    .btn-info{
      background:#fff;
      color:#000;
      border:1px solid #000;
      transition:background .15s,color .15s;
    }
    .btn:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-success:hover,
    .btn-danger:hover,
    .btn-dark:hover,
    .btn-info:hover{
      background:#000;
      color:#fff;
    }

    .dashboard-card{background:var(--bg-card);border-radius:var(--radius-xl);padding:14px;border:1px solid var(--border-soft)}
    .dashboard-card i{font-size:22px;color:#000}
    .demo-label{background:#000;color:#fff;padding:.2rem .5rem;border-radius:8px;font-size:.8rem;margin-left:.5rem}

    .extension-banner-wrapper{
      background:#fff;
      padding:8px;
      color:#000;
      border:1px solid var(--border-soft);
      margin:8px 16px 16px;
      border-radius:12px;
      display:flex;
      justify-content:center;
    }
    .extension-banner{
      overflow:hidden;
      white-space:nowrap;
      width:100%;
      max-width:900px;
    }
    .tool-host .extension-banner,
    .bw-panel .extension-banner{
      display:flex !important;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:.6rem;
      border:1px solid var(--border-soft) !important;
      border-radius:10px !important;
      padding:10px 14px !important;
      background:#fff !important;
      color:#000 !important;
      width:100%;
      max-width:900px;
      margin:0 auto 1rem !important;
      white-space:normal !important;
    }
   .extension-banner .marquee{display:inline-block;animation:marquee 40s linear infinite}
    .tool-host .extension-banner-buttons,
    .bw-panel .extension-banner-buttons{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      justify-content:center;
    }
    .tool-host .extension-banner-buttons .btn,
    .bw-panel .extension-banner-buttons .btn{
      border:1px solid #000 !important;
      background:#fff !important;
      color:#000 !important;
    }
    @keyframes marquee{0%{transform:translateX(-100%)}50%{transform:translateX(100%)}100%{transform:translateX(-100%)}
    }

    .max-wrap{max-width:var(--content-max);margin:0 auto;padding:0 15px}

    #sidebarBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1025;display:none}
    #sidebarBackdrop.show{display:block}

    @media (max-width:768px){
      .content-wrap{padding:18px 16px 24px}
      .app-note-banner{margin:12px 16px 10px;flex-wrap:wrap;padding:16px 18px}
      .app-note-text{white-space:normal}
      .app-note-actions{width:100%;justify-content:flex-start;margin-left:0}
      .extension-banner-wrapper{margin:8px 16px 16px}
      .tool-host,
      .bw-panel{margin:20px 12px;padding:16px}
      .bw-table table{min-width:600px}
    }

    .tool-page-heading{text-align:center;padding:2rem 1rem 1.5rem}
    .tool-page-heading h2{font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:700;margin:0 0 .35rem;color:var(--text-main)}
    .tool-page-heading p{margin:0;color:var(--text-muted);font-size:.98rem}

    .tool-host{
      border:none;
      border-radius:0;
      padding: clamp(8px,1.5vw,16px) 10px;
      margin:0 auto;
      width:calc(100% - 20px);
      max-width:none;
      background:transparent;
      overflow:visible;
    }
    .tool-host *{box-sizing:border-box;max-width:100%;}
    .tool-host img,
    .tool-host video,
    .tool-host canvas{max-width:100%;height:auto}
    .tool-loader{text-align:center;color:var(--text-muted);font-size:.95rem;padding:2rem 0;}
    .tool-host .tool-layout{padding-left:0!important}
    .tool-host aside.sidebar,
    .tool-host [data-sidebar]{display:none!important}
    .tool-host .container,
    .tool-host main,
    .tool-host .main-content,
    .tool-host .tool-layout{max-width:100%!important;width:100%!important}
    .tool-host textarea,
    .tool-host input,
    .tool-host select,
    #ace-gmaps-scraper #keyword,
    #social-links-extractor-section #socialDomainsInput,
    #ace-decision-makers-section #domainsInput,
    #captcha-free-email-finder-section #captchaDomainsInput,
    #email-finder-section #efDomainsInput{
      width:100%!important;
      max-width:100%!important;
    }
    .tool-host .table-responsive,
    .tool-host .table-wrap{overflow-x:auto}
    .tool-host section + section{margin-top:clamp(24px,4vw,48px);}

    /* Google Map results panel */
    .results-panel{
      padding:clamp(24px,3vw,48px) 20px;
      background:#fff;
      border:1px solid var(--border-soft);
      border-radius:20px;
      box-shadow:0 12px 30px rgba(0,0,0,0.06);
      margin:clamp(24px,4vw,40px) auto;
    }
    .results-panel .table-responsive{
      padding:clamp(16px,2vw,32px) 0;
    }

    .bw-panel{
      background:#fff;
      border:1px solid var(--border-soft);
      border-radius:24px;
      padding:clamp(16px,4vw,48px) 0;
      margin:clamp(20px,3vw,32px) auto;
      width:calc(100% - clamp(24px,4vw,64px));
      max-width:1180px;
    }
    .bw-panel textarea,
    .bw-panel input,
    .bw-panel select{background:#fff;color:#000;border:1px solid #000}

    .bw-table{overflow-x:auto}
    .bw-table table{border:1px solid #000;width:100%;min-width:720px}
    .bw-table th,
    .bw-table td{border:1px solid #000;padding:.75rem;text-align:center;background:#fff;color:#000}

    .alert{background:#fff;border:1px solid #000;color:#000}

    progress{
      width:100%;
      height:20px;
      border:1px solid #000;
      background:#fff;
    }
    progress::-webkit-progress-bar{background:#fff}
    progress::-webkit-progress-value{background:#000}
    progress::-moz-progress-bar{background:#000}