/* v3.9 Pro UI */




:root {




  --pro-border: rgba(148, 163, 184, .24);




  --pro-shadow: 0 22px 70px rgba(15, 23, 42, .10);




  --pro-shadow-hover: 0 30px 90px rgba(15, 23, 42, .16);




  --pro-muted: #64748b;




  --pro-text: #0f172a;




  --pro-soft: rgba(255,255,255,.72);




}









.frontend-body {




  background:




    radial-gradient(circle at top left, color-mix(in srgb, var(--primary-color) 12%, transparent), transparent 34rem),




    radial-gradient(circle at top right, rgba(59, 130, 246, .12), transparent 30rem),




    var(--frontend-bg) !important;




}









.pro-header {




  box-shadow: 0 1px 0 rgba(15,23,42,.04);




}









.pro-header-inner {




  gap: 14px !important;




}









.header-mini-search {




  flex: 1;




  max-width: 420px;




  display: flex;




  align-items: center;




  gap: 8px;




  background: rgba(255,255,255,.72);




  border: 1px solid var(--pro-border);




  border-radius: 999px;




  padding: 6px;




  box-shadow: 0 8px 28px rgba(15,23,42,.06);




}









.header-mini-search input {




  border: 0 !important;




  background: transparent !important;




  margin: 0 !important;




  padding: 8px 12px !important;




  outline: none;




  min-width: 0;




}









.header-mini-search button {




  margin: 0 !important;




  padding: 8px 13px !important;




  border-radius: 999px !important;




  font-size: 14px;




}









.theme-toggle {




  background: rgba(255,255,255,.72) !important;




  color: #0f172a !important;




  border: 1px solid var(--pro-border) !important;




  border-radius: 999px !important;




  padding: 8px 11px !important;




  margin: 0 0 0 4px !important;




}









.hero-badge {




  display: inline-flex;




  align-items: center;




  justify-content: center;




  gap: 8px;




  background: color-mix(in srgb, var(--primary-color) 8%, white);




  color: color-mix(in srgb, var(--primary-color) 75%, #111827);




  border: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent);




  padding: 9px 14px;




  border-radius: 999px;




  font-size: 14px;




  font-weight: 700;




  margin-bottom: 18px;




}









.pro-hero-card,




.pro-search-panel,




.pro-results-card {




  background: rgba(255,255,255,.78) !important;




  backdrop-filter: blur(18px);




  border: 1px solid var(--pro-border) !important;




}









.pro-search-box {




  position: relative;




  background: #fff;




  border: 1px solid rgba(148,163,184,.28);




  border-radius: 24px;




  padding: 8px;




  box-shadow: 0 16px 50px rgba(15,23,42,.10);




  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;




}









.pro-search-box:focus-within {




  transform: translateY(-1px);




  box-shadow: 0 24px 70px rgba(15,23,42,.15);




  border-color: color-mix(in srgb, var(--primary-color) 42%, #d1d5db);




}









.pro-search-box .search-icon {




  display: flex;




  align-items: center;




  justify-content: center;




  width: 46px;




  font-size: 26px;




  color: var(--pro-muted);




  flex: 0 0 46px;




}









.pro-search-box input {




  border: 0 !important;




  background: transparent !important;




  outline: none;




}









.pro-search-box button {




  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-color) 22%, transparent);




}









.pro-results-layout {




  display: grid;




  gap: 18px;




}









.pro-results-card {




  padding: 18px !important;




}









.pro-results-meta {




  background: #f8fafc;




  border: 1px solid #e5e7eb;




  padding: 14px 16px;




  border-radius: 18px;




}









.pro-results-meta span {




  color: var(--pro-muted);




}









.result-card {




  background: #fff;




  border: 1px solid #e5e7eb;




  border-radius: 22px;




  padding: 20px !important;




  margin: 14px 0;




  box-shadow: 0 12px 35px rgba(15,23,42,.06);




  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;




}









.result-card:hover {




  transform: translateY(-2px);




  box-shadow: var(--pro-shadow-hover);




  border-color: color-mix(in srgb, var(--primary-color) 28%, #e5e7eb);




}









.result-card-top {




  display: flex;




  align-items: center;




  gap: 12px;




  margin-bottom: 12px;




}









.result-favicon {




  width: 36px;




  height: 36px;




  border-radius: 10px;




  border: 1px solid #e5e7eb;




  background: #fff;




  padding: 4px;




}









.result-domain {




  font-weight: 800;




  color: var(--pro-text);




  font-size: 14px;




}









.result-card .result-url {




  margin: 2px 0 0 !important;




  color: #16a34a;




  font-size: 12px;




}









.result-card .result-title {




  font-size: 22px !important;




  line-height: 1.3;




  margin: 10px 0 !important;




}









.result-card .result-title a {




  color: #1d4ed8;




}









.result-card .result-snippet {




  font-size: 15px;




  color: #475569;




}









.result-footer {




  display: flex;




  justify-content: space-between;




  gap: 12px;




  margin-top: 16px;




  padding-top: 14px;




  border-top: 1px solid #f1f5f9;




  color: var(--pro-muted);




  font-size: 13px;




  flex-wrap: wrap;




}









.empty-state {




  text-align: center;




  padding: 54px 20px;




}









.empty-icon {




  width: 62px;




  height: 62px;




  margin: 0 auto 14px;




  border-radius: 999px;




  display: grid;




  place-items: center;




  background: #f1f5f9;




  font-size: 32px;




  color: #64748b;




}









.empty-state h2 {




  margin: 0 0 8px;




}









.empty-state p {




  color: var(--pro-muted);




}









/* Dark mode */




.theme-dark,




.theme-auto.theme-runtime-dark {




  --frontend-bg: #020617 !important;




  --frontend-card-bg: #0f172a !important;




  --pro-border: rgba(148, 163, 184, .22);




  --pro-muted: #94a3b8;




  --pro-text: #e5e7eb;




}









.theme-dark.frontend-body,




.theme-auto.theme-runtime-dark.frontend-body {




  color: #e5e7eb;




  background:




    radial-gradient(circle at top left, color-mix(in srgb, var(--primary-color) 24%, transparent), transparent 34rem),




    radial-gradient(circle at top right, rgba(59, 130, 246, .16), transparent 30rem),




    #020617 !important;




}









.theme-dark .site-header,




.theme-auto.theme-runtime-dark .site-header {




  background: rgba(2,6,23,.78);




  border-bottom-color: rgba(148,163,184,.16);




}









.theme-dark .site-brand,




.theme-dark .site-nav a,




.theme-auto.theme-runtime-dark .site-brand,




.theme-auto.theme-runtime-dark .site-nav a {




  color: #e5e7eb;




}









.theme-dark .site-nav a:hover,




.theme-auto.theme-runtime-dark .site-nav a:hover {




  background: rgba(148,163,184,.12);




}









.theme-dark .header-mini-search,




.theme-dark .pro-search-box,




.theme-auto.theme-runtime-dark .header-mini-search,




.theme-auto.theme-runtime-dark .pro-search-box {




  background: rgba(15,23,42,.82);




  border-color: rgba(148,163,184,.20);




}









.theme-dark input,




.theme-auto.theme-runtime-dark input {




  color: #e5e7eb;




}









.theme-dark input::placeholder,




.theme-auto.theme-runtime-dark input::placeholder {




  color: #94a3b8;




}









.theme-dark .theme-toggle,




.theme-auto.theme-runtime-dark .theme-toggle {




  background: rgba(15,23,42,.82) !important;




  color: #e5e7eb !important;




}









.theme-dark .pro-hero-card,




.theme-dark .pro-search-panel,




.theme-dark .pro-results-card,




.theme-dark .popular-widget,




.theme-auto.theme-runtime-dark .pro-hero-card,




.theme-auto.theme-runtime-dark .pro-search-panel,




.theme-auto.theme-runtime-dark .pro-results-card,




.theme-auto.theme-runtime-dark .popular-widget {




  background: rgba(15,23,42,.78) !important;




  border-color: rgba(148,163,184,.20) !important;




}









.theme-dark .search-title,




.theme-dark .popular-widget h2,




.theme-auto.theme-runtime-dark .search-title,




.theme-auto.theme-runtime-dark .popular-widget h2 {




  color: #f8fafc;




}









.theme-dark .search-subtitle,




.theme-auto.theme-runtime-dark .search-subtitle {




  color: #94a3b8;




}









.theme-dark .popular-tags a,




.theme-auto.theme-runtime-dark .popular-tags a {




  background: rgba(15,23,42,.92);




  border-color: rgba(148,163,184,.20);




  color: #cbd5e1;




}









.theme-dark .pro-results-meta,




.theme-dark .result-card,




.theme-auto.theme-runtime-dark .pro-results-meta,




.theme-auto.theme-runtime-dark .result-card {




  background: rgba(2,6,23,.72);




  border-color: rgba(148,163,184,.18);




}









.theme-dark .result-domain,




.theme-auto.theme-runtime-dark .result-domain {




  color: #e5e7eb;




}









.theme-dark .result-card .result-title a,




.theme-auto.theme-runtime-dark .result-card .result-title a {




  color: #93c5fd;




}









.theme-dark .result-card .result-snippet,




.theme-auto.theme-runtime-dark .result-card .result-snippet {




  color: #cbd5e1;




}









.theme-dark .result-footer,




.theme-auto.theme-runtime-dark .result-footer {




  border-top-color: rgba(148,163,184,.16);




}









@media (max-width:900px) {




  .header-mini-search {




    order: 3;




    width: 100%;




    max-width: 100%;




  }




}









@media (max-width:600px) {




  .hero-badge {




    font-size: 12px;




    padding: 8px 11px;




  }









  .pro-search-box {




    border-radius: 18px;




    padding: 7px;




  }









  .pro-search-box .search-icon {




    display: none;




  }









  .result-card {




    border-radius: 18px;




    padding: 16px !important;




  }









  .result-card .result-title {




    font-size: 18px !important;




  }









  .header-mini-search {




    display: none;




  }




}