:root {
  --primary: #0f172a;
  --primary-hover: #020617;
  --accent: #2563eb;
  --accent-warm: #2563eb;
  --dark: #0b1220;
  --text: #334155;
  --text-muted: #64748b;
  --bg-body: #e2e8f0;
  --bg-card: #ffffff;
  --bg-soft: #f7fbff;
  --line: #e2e8f0;
  --radius: 12px;
  --container-width: 1280px;
  --header-height: 76px;
  --shadow: 0 14px 40px -20px rgba(11, 18, 32, 0.35);
  --font-main: 'Poppins', sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--text);
  background: var(--bg-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px 30px;
}

main.max-w-5xl {
  max-width: 1000px;
  margin-top: 22px;
}

main .mb-8 > .bg-gradient-to-r {
  background: transparent !important;
  color: var(--primary) !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 14px !important;
}

main .mb-8 > .bg-gradient-to-r h1 {
  color: var(--primary) !important;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  margin-bottom: 4px !important;
}

main .mb-8 > .bg-gradient-to-r p {
  color: var(--text-muted) !important;
}

main > .grid.bg-white.rounded-2xl.shadow-lg.p-8.mb-10 {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 4px 10px -6px rgba(0,0,0,0.16);
}

main > .grid.bg-white.rounded-2xl.shadow-lg.p-8.mb-10::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: #2563eb;
  border-radius: 10px 10px 0 0;
}

h1, h2, h3, h4 { margin-top: 0; color: var(--dark); }
a { text-decoration: none; color: inherit; }
.hidden { display: none !important; }

.logo img {
    width: 50px;
    height: 50px;
    filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(230deg) saturate(300%);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  min-height: var(--header-height);
  backdrop-filter: blur(12px);
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px -20px rgba(11, 18, 32, 0.6);
}

.header-container {
  max-width: var(--container-width);
  margin: 0 auto;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  padding: 12px 20px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--primary);
  white-space: nowrap;
}
.logo i {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  background: var(--primary);
  box-shadow: 0 10px 20px -10px rgba(15, 23, 42, 0.35);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.nav-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--dark);
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.header-nav a {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid transparent;
  background: transparent;
  border-radius: 999px;
  padding: 8px 12px;
  transition: .2s ease;
}
.header-nav a:hover {
  color: var(--primary);
  border-color: #d5e2ef;
  background: #f8fafc;
}

@media (max-width: 920px) {
  .logo { font-size: 26px; }
  .nav-toggle { display: inline-flex; }
  .header-container { flex-wrap: wrap; }
  .header-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
  }
  .header-nav.is-open { display: flex; }
  .header-nav a {
    border-radius: 12px;
    padding: 10px 12px;
    border-color: var(--line);
    background: #f9fbfd;
  }
}

.home-hero { display: none; }
.home-hero-inner {
  border-radius: 24px;
  padding: 40px 34px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #eff9ff;
  box-shadow: var(--shadow);
}
.home-kicker {
  margin: 0 0 8px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .88;
}
.home-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 2.8vw, 2.9rem);
  line-height: 1.2;
  color: #fff;
}
.home-intro {
  margin: 0;
  color: rgba(239, 249, 255, 0.92);
  max-width: 60ch;
}

.tools-section { margin-top: 24px; }
.section-title-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 18px;
}
.section-title-row h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  white-space: nowrap;
}
.section-line {
  display: block;
  height: 1px;
  flex: 1;
  background: #cbd5e1;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.tool-card {
  position: relative;
  display: block;
  border: 1px solid #d7e1ec;
  border-radius: 16px;
  background: #fff;
  padding: 22px;
  min-height: 260px;
  box-shadow: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -24px rgba(11,18,32,.45);
  border-color: #c2d1e2;
}
.tool-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.tool-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1.1rem;
  background: #e8eef7;
  box-shadow: none;
}
.tool-meta { display: flex; flex-direction: column; }
.tool-meta strong { color: var(--dark); font-size: 1.04rem; line-height: 1.25; }
.tool-meta small { color: var(--text-muted); font-size: .82rem; }
.tool-card p { margin: 0 0 14px; color: var(--text); }
.tool-cta {
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.features-band {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.features-band article {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}
.features-band i {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #cfd8e3;
  color: var(--primary);
  margin-bottom: 8px;
}
.features-band h3 { margin: 0 0 4px; font-size: 1rem; }
.features-band p { margin: 0; color: var(--text-muted); font-size: .92rem; }

.page-header { text-align: center; margin: 28px 15px; }
.page-title { font-size: 32px; font-weight: 800; margin-bottom: 6px; }
.page-subtitle { color: var(--text-muted); font-size: 15px; }
.icon-box {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  background: var(--primary);
  color: white;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card,
.converter-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 24px;
}

.converter-table,
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.converter-table th,
th {
  text-align: left;
  padding: 13px 14px;
  background: #f4f8fc;
  color: var(--text-muted);
  font-weight: 700;
  border-bottom: 1px solid #e5edf5;
}
.converter-table td,
td {
  padding: 11px 14px;
  border-bottom: 1px solid #edf2f7;
  color: var(--text);
}
tbody tr:hover { background: #f8fbff; }
.converter-table tr.highlight td,
.converter-table .highlight {
  color: var(--primary);
  font-weight: 700;
}

.site-footer {
  margin-top: 50px;
  background: var(--primary);
  border-top: 4px solid #1e293b;
  color: #d6e3ee;
  padding: 56px 0 22px;
}
.footer-grid {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 30px;
}
.footer-col h4 { margin: 0 0 14px; color: #f4f9ff; }
.footer-links a {
  display: block;
  color: #b7cadb;
  margin-bottom: 8px;
  font-size: 14px;
}
.footer-links a:hover { color: #fff; }
.copyright {
  margin-top: 28px;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 14px;
  text-align: center;
  color: #9eb2c5;
  font-size: 13px;
}

/* Utility compatibility classes used across templates */
.block { display: block; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.grid { display: grid; gap: 16px; }
.grid-cols-1 { grid-template-columns: 1fr; }

.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }

.mx-auto { margin-left: auto; margin-right: auto; }
.mx-2 { margin-left: 8px; margin-right: 8px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-10 { margin-top: 40px; }
.mt-12 { margin-top: 48px; }
.mt-16 { margin-top: 64px; }
.mt-20 { margin-top: 80px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }
.mb-12 { margin-bottom: 48px; }
.ml-2 { margin-left: 8px; }
.mr-2 { margin-right: 8px; }

.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.pl-6 { padding-left: 24px; }
.pl-10 { padding-left: 40px; }
.pl-12 { padding-left: 48px; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.leading-relaxed { line-height: 1.7; }
.leading-tight { line-height: 1.25; }

.text-white { color: #fff; }
.text-transparent { color: transparent; }
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
.text-slate-100 { color: #e6eff8; }
.text-slate-200 { color: #d0deec; }
.text-slate-300 { color: #475569; }
.text-slate-400 { color: #64748b; }
.text-slate-500, .text-gray-500 { color: #64748b; }
.text-slate-600, .text-gray-600 { color: #3b556b; }
.text-slate-700 { color: #274158; }
.text-slate-800, .text-gray-800 { color: var(--dark); }
.text-blue-500, .text-blue-600 { color: #2563eb; }
.text-emerald-500, .text-emerald-600, .text-green-600 { color: #2563eb; }
.text-orange-500, .text-orange-600 { color: #2563eb; }
.text-purple-500, .text-purple-600 { color: #2563eb; }
.text-pink-500, .text-pink-600 { color: #2563eb; }
.text-rose-500, .text-rose-600 { color: #2563eb; }
.text-cyan-500, .text-cyan-600 { color: #2563eb; }

.bg-white { background-color: #fff; }
.bg-slate-50 { background-color: #f4f8fc; }
.bg-slate-100 { background-color: #eaf1f8; }
.bg-green-600 { background-color: #0f172a; }

.bg-gradient-to-r { background-image: linear-gradient(90deg, var(--grad-from, #0f172a), var(--grad-to, #2563eb)); }
.bg-gradient-to-br { background-image: linear-gradient(135deg, var(--grad-from, #0f172a), var(--grad-to, #2563eb)); }
.from-blue-100, .from-blue-500, .from-blue-600,
.from-cyan-100, .from-cyan-500, .from-cyan-600,
.from-emerald-100, .from-emerald-500, .from-emerald-600,
.from-orange-100, .from-orange-500,
.from-pink-100, .from-pink-500, .from-pink-600,
.from-purple-100, .from-purple-500, .from-purple-600,
.from-rose-100, .from-rose-500,
.from-green-200 { --grad-from: #0f172a; }
.to-blue-200, .to-blue-600,
.to-cyan-200, .to-cyan-600,
.to-emerald-200, .to-emerald-600,
.to-orange-200, .to-orange-600,
.to-pink-200, .to-pink-600,
.to-purple-200, .to-purple-600,
.to-rose-200, .to-rose-600,
.to-indigo-600, .to-teal-600,
.to-green-200, .to-green-600 { --grad-to: #2563eb; }

.border { border: 1px solid var(--line); }
.border-b { border-bottom: 1px solid var(--line); }
.border-t { border-top: 1px solid var(--line); }
.border-collapse { border-collapse: collapse; }
.border-slate-200 { border-color: var(--line); }
.border-gray-100 { border-color: #eef3f8; }
.rounded { border-radius: 6px; }
.rounded-lg { border-radius: 10px; }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }
.shadow-lg { box-shadow: var(--shadow); }
.shadow-sm { box-shadow: 0 8px 24px -18px rgba(11,18,32,.4); }

.w-full { width: 100%; }
.w-16 { width: 4rem; }
.w-32 { width: 8rem; }
.h-16 { height: 4rem; }
.h-32 { height: 8rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-h-\[500px\] { max-height: 500px; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.top-0 { top: 0; }
.top-1\/2 { top: 50%; }
.right-0 { right: 0; }
.right-6 { right: 1.5rem; }
.bottom-6 { bottom: 1.5rem; }
.left-3 { left: .75rem; }
.left-4 { left: 1rem; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.list-disc { list-style: disc; }
.opacity-50 { opacity: .5; }
.opacity-60 { opacity: .6; }
.opacity-90 { opacity: .9; }
.cursor-not-allowed { cursor: not-allowed; }

.translate-x-16 { transform: translateX(4rem); }
.-translate-y-16 { transform: translateY(-4rem); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.translate-x-16.-translate-y-16 { transform: translate(4rem, -4rem); }

.transition { transition: all .2s ease; }
.transition-all { transition: all .25s ease; }
.transition-colors { transition: color .2s ease, background-color .2s ease; }
.transition-transform { transition: transform .2s ease; }
.duration-300 { transition-duration: .3s; }

.hover\:underline:hover { text-decoration: underline; }
.hover\:shadow-xl:hover { box-shadow: 0 20px 32px -20px rgba(11,18,32,.45); }
.hover\:-translate-y-1:hover { transform: translateY(-4px); }
.hover\:bg-slate-200:hover { background-color: #dbe7f2; }
.hover\:text-white:hover { color: #fff; }
.hover\:bg-blue-200:hover { background-color: #bfdbfe; }
.hover\:bg-cyan-200:hover { background-color: #a5f3fc; }
.hover\:bg-emerald-200:hover { background-color: #a7f3d0; }
.hover\:bg-orange-200:hover { background-color: #fed7aa; }
.hover\:bg-pink-200:hover { background-color: #fbcfe8; }
.hover\:bg-purple-200:hover { background-color: #e9d5ff; }
.hover\:bg-rose-200:hover { background-color: #fecdd3; }
.hover\:bg-blue-600:hover { background-color: #2563eb; }
.hover\:bg-cyan-600:hover { background-color: #0891b2; }
.hover\:bg-emerald-600:hover { background-color: #0f172a; }
.hover\:bg-orange-600:hover { background-color: #ea580c; }
.hover\:bg-pink-600:hover { background-color: #db2777; }
.hover\:bg-purple-600:hover { background-color: #7c3aed; }
.hover\:bg-rose-600:hover { background-color: #e11d48; }

.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(31, 119, 194, .2); }
.focus\:ring-blue-500:focus { box-shadow: 0 0 0 2px rgba(59,130,246,.35); }
.focus\:ring-cyan-500:focus { box-shadow: 0 0 0 2px rgba(6,182,212,.35); }
.focus\:ring-emerald-500:focus { box-shadow: 0 0 0 2px rgba(16,185,129,.35); }
.focus\:ring-green-500:focus { box-shadow: 0 0 0 2px rgba(15,23,42,.35); }
.focus\:ring-orange-500:focus { box-shadow: 0 0 0 2px rgba(249,115,22,.35); }
.focus\:ring-pink-500:focus { box-shadow: 0 0 0 2px rgba(236,72,153,.35); }
.focus\:ring-purple-500:focus { box-shadow: 0 0 0 2px rgba(139,92,246,.35); }
.focus\:ring-rose-500:focus { box-shadow: 0 0 0 2px rgba(244,63,94,.35); }

.group:hover .group-hover\:translate-x-1 { transform: translateX(.25rem); }
.group:hover .group-hover\:text-blue-600 { color: #2563eb; }
.group:hover .group-hover\:text-blue-700 { color: #1d4ed8; }
.group:hover .group-hover\:text-cyan-600 { color: #0891b2; }
.group:hover .group-hover\:text-cyan-700 { color: #0e7490; }
.group:hover .group-hover\:text-emerald-600 { color: #0f172a; }
.group:hover .group-hover\:text-emerald-700 { color: #047857; }
.group:hover .group-hover\:text-orange-600 { color: #ea580c; }
.group:hover .group-hover\:text-orange-700 { color: #c2410c; }
.group:hover .group-hover\:text-pink-600 { color: #db2777; }
.group:hover .group-hover\:text-pink-700 { color: #be185d; }
.group:hover .group-hover\:text-purple-600 { color: #7c3aed; }
.group:hover .group-hover\:text-purple-700 { color: #6d28d9; }
.group:hover .group-hover\:text-rose-600 { color: #e11d48; }
.group:hover .group-hover\:text-rose-700 { color: #be123c; }

.card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -24px rgba(11,18,32,.5); }
.search-box { width: 100%; }
.copy-btn { cursor: pointer; border: 1px solid var(--line); }
.related-link { display: block; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }

.scrollbar-thin { scrollbar-width: thin; }
.scrollbar-thumb-slate-300::-webkit-scrollbar-thumb { background: #cbd5e1; }
.scrollbar-track-slate-100::-webkit-scrollbar-track { background: #f1f5f9; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sm\:text-2xl { font-size: 1.5rem; }
  .sm\:text-3xl { font-size: 1.875rem; }
  .sm\:text-4xl { font-size: 2.25rem; }
  .sm\:text-5xl { font-size: 3rem; }
  .sm\:text-lg { font-size: 1.125rem; }
  .sm\:p-8 { padding: 2rem; }
  .sm\:p-10 { padding: 2.5rem; }
  .sm\:py-12 { padding-top: 3rem; padding-bottom: 3rem; }
  .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .sm\:flex-row { flex-direction: row; }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:text-4xl { font-size: 2.25rem; }
  .md\:text-5xl { font-size: 3rem; }
  .md\:w-80 { width: 20rem; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

@media print {
  .site-header, .site-footer, .nav-toggle, #navToggle, #siteNav { display: none !important; }
}

/* Shared ad placement (sample-style) */
.top-ad-wrap {
  background: #cfd8e3;
  border-bottom: 1px solid #cbd5e1;
  padding: 8px 0;
  text-align: center;
}
.ad-leaderboard {
  width: 728px;
  height: 90px;
  margin: 0 auto;
  background: #fff;
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}
.side-ads {
  position: fixed;
  inset: 150px 0 auto 0;
  z-index: 5;
  pointer-events: none;
  display: none;
  justify-content: space-between;
  padding: 0 8px;
}
.ad-skyscraper {
  width: 160px;
  height: 600px;
  background: #fff;
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  color: #64748b;
  font-size: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.in-feed-ad {
  width: 100%;
  min-height: 250px;
  margin: 0 0 20px 0;
  background: #f8fafc;
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #64748b;
  position: relative;
}
.in-feed-ad span {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 11px;
  padding: 2px 8px;
  background: #e2e8f0;
  border-radius: 4px;
}
.in-feed-ad i { font-size: 30px; opacity: .7; }
.in-feed-ad strong { font-size: 14px; letter-spacing: .02em; }
@media (min-width: 1400px) {
  .side-ads { display: flex; }
}
@media (max-width: 728px) {
  .ad-leaderboard {
    width: 320px;
    height: 50px;
    font-size: 11px;
  }
}