/* ==========================================================================
   FREE USE TOOL — BLOG DETAIL PAGE
   COMPLETE PROFESSIONAL / HD / 3D EDITORIAL STYLING
   ========================================================================== */

:root {
  --fut-detail-bg: #f2f6fb;
  --fut-detail-surface: #ffffff;
  --fut-detail-surface-soft: #f8fafc;
  --fut-detail-surface-tint: #eef4ff;

  --fut-detail-text: #172033;
  --fut-detail-text-soft: #475467;
  --fut-detail-muted: #667085;
  --fut-detail-faint: #98a2b3;

  --fut-detail-primary: #2563eb;
  --fut-detail-primary-strong: #1d4ed8;
  --fut-detail-primary-light: #60a5fa;
  --fut-detail-primary-soft: rgba(37,99,235,.10);

  --fut-detail-border: rgba(15,23,42,.085);
  --fut-detail-border-strong: rgba(15,23,42,.15);

  --fut-detail-shadow-xs: 0 5px 15px rgba(15,23,42,.035);
  --fut-detail-shadow-sm: 0 12px 31px rgba(15,23,42,.065);
  --fut-detail-shadow-md: 0 21px 52px rgba(15,23,42,.09);
  --fut-detail-shadow-lg:
    0 36px 92px rgba(15,23,42,.13),
    0 12px 32px rgba(37,99,235,.05);

  --fut-detail-radius-sm: 10px;
  --fut-detail-radius-md: 14px;
  --fut-detail-radius-lg: 19px;
  --fut-detail-radius-xl: 25px;

  --fut-detail-ease: cubic-bezier(.22,1,.36,1);
}

html[data-theme="dark"],
html.fut-dark {
  --fut-detail-bg: #070b14;
  --fut-detail-surface: #0f1727;
  --fut-detail-surface-soft: #111c2f;
  --fut-detail-surface-tint: rgba(96,165,250,.09);

  --fut-detail-text: #eef2f7;
  --fut-detail-text-soft: #c5cfdb;
  --fut-detail-muted: #a7b3c5;
  --fut-detail-faint: #75849a;

  --fut-detail-primary: #60a5fa;
  --fut-detail-primary-strong: #3b82f6;
  --fut-detail-primary-light: #93c5fd;
  --fut-detail-primary-soft: rgba(96,165,250,.13);

  --fut-detail-border: rgba(148,163,184,.12);
  --fut-detail-border-strong: rgba(148,163,184,.19);

  --fut-detail-shadow-xs: 0 6px 18px rgba(0,0,0,.15);
  --fut-detail-shadow-sm: 0 14px 34px rgba(0,0,0,.22);
  --fut-detail-shadow-md: 0 24px 56px rgba(0,0,0,.29);
  --fut-detail-shadow-lg:
    0 39px 102px rgba(0,0,0,.44),
    0 12px 32px rgba(37,99,235,.055);
}


/* ==========================================================================
   PAGE SURFACE
   ========================================================================== */

.fut-blog-detail-page {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  overflow: hidden;
  color: var(--fut-detail-text);
  background:
    radial-gradient(40rem 34rem at 88% -5%, rgba(96,165,250,.08), transparent 70%),
    radial-gradient(34rem 30rem at -4% 78%, rgba(37,99,235,.05), transparent 70%),
    var(--fut-detail-bg);
}

.fut-blog-detail-page > article {
  position: relative;
}


/* ==========================================================================
   HEADER / ALIGNMENT AXIS
   ========================================================================== */

.fut-blog-detail-page .fut-article-header {
  width: min(1180px, calc(100% - 44px));
  margin-inline: auto;
  padding: 27px 0 23px;
}

.fut-blog-detail-page .fut-article-header > .fut-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.fut-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 22px;
  color: var(--fut-detail-muted);
  font-size: .67rem;
  font-weight: 750;
}

.fut-breadcrumbs a {
  color: var(--fut-detail-primary-strong);
}

.fut-breadcrumbs span {
  color: var(--fut-detail-faint);
}

.fut-blog-detail-page .fut-blog-category {
  width: max-content;
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(37,99,235,.14);
  border-radius: 999px;
  color: var(--fut-detail-primary-strong);
  background: var(--fut-detail-primary-soft);
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fut-blog-detail-page .fut-article-header h1 {
  max-width: 1060px;
  margin: 12px 0 15px;
  color: var(--fut-detail-text);
  font-size: clamp(2.8rem, 5.7vw, 5.45rem);
  font-weight: 900;
  line-height: .975;
  letter-spacing: -.065em;
  text-align: left;
  text-wrap: balance;
}

.fut-blog-detail-page .fut-article-excerpt {
  max-width: 860px;
  margin: 0 0 16px;
  color: var(--fut-detail-muted);
  font-size: 1rem;
  line-height: 1.78;
  text-align: left;
}

.fut-blog-detail-page .fut-article-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px 12px;
  color: var(--fut-detail-muted);
  font-size: .66rem;
  text-align: left;
}

.fut-blog-detail-page .fut-article-meta span + span::before,
.fut-blog-detail-page .fut-article-meta time + span::before,
.fut-blog-detail-page .fut-article-meta span + time::before {
  content: "•";
  margin-right: 8px;
  color: var(--fut-detail-primary-light);
}


/* ==========================================================================
   FEATURED MEDIA
   ========================================================================== */

.fut-blog-detail-page .fut-article-featured-image {
  position: relative;
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto 31px;
  overflow: hidden;
  border: 1px solid var(--fut-detail-border);
  border-radius: var(--fut-detail-radius-xl);
  background: var(--fut-detail-surface-soft);
  box-shadow: var(--fut-detail-shadow-lg);
}

.fut-blog-detail-page .fut-article-featured-image > .fut-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.fut-blog-detail-page .fut-article-featured-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 720px;
  display: block;
  object-fit: cover;
}

.fut-blog-detail-page .fut-article-featured-image figcaption {
  padding: 10px 17px 13px;
  color: var(--fut-detail-muted);
  background: var(--fut-detail-surface);
  font-size: .63rem;
  line-height: 1.5;
  text-align: left;
}


/* ==========================================================================
   ARTICLE / SIDEBAR GRID
   ========================================================================== */

.fut-blog-detail-page .fut-article-layout {
  width: min(1160px, calc(100% - 44px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 28px;
  align-items: start;
}

.fut-blog-detail-page .fut-article-main {
  min-width: 0;
  overflow: visible;
  padding: clamp(34px, 4vw, 56px);
  border: 1px solid var(--fut-detail-border);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(249,251,254,.95)
    );
  box-shadow:
    0 22px 55px rgba(15,23,42,.075),
    0 8px 24px rgba(37,99,235,.035),
    inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

.fut-blog-detail-page .fut-article-sidebar {
  min-width: 0;
  position: sticky;
  top: calc(var(--fut-header-height) + 19px);
  display: grid;
  gap: 13px;
}


/* ==========================================================================
   EDITOR OUTPUT / CONTENT ALIGNMENT
   ========================================================================== */

.fut-blog-detail-page .fut-article-content {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 2px 4px 8px;
  color: var(--fut-detail-text-soft);
  font-size: 1.035rem;
  line-height: 1.92;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: normal;
}

.fut-blog-detail-page .fut-article-content > :first-child {
  margin-top: 0 !important;
}

.fut-blog-detail-page .fut-article-content h1,
.fut-blog-detail-page .fut-article-content h2,
.fut-blog-detail-page .fut-article-content h3,
.fut-blog-detail-page .fut-article-content h4,
.fut-blog-detail-page .fut-article-content h5,
.fut-blog-detail-page .fut-article-content h6 {
  color: var(--fut-detail-text);
  text-align: left;
}

.fut-blog-detail-page .fut-article-content h2 {
  margin: 2.2em 0 .65em;
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  font-weight: 860;
  line-height: 1.19;
  letter-spacing: -.038em;
}

.fut-blog-detail-page .fut-article-content h3 {
  margin: 1.75em 0 .55em;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 830;
  line-height: 1.28;
  letter-spacing: -.025em;
}

.fut-blog-detail-page .fut-article-content p {
  margin: 0 0 1.08em;
  text-align: left;
}

.fut-blog-detail-page .fut-article-content ul,
.fut-blog-detail-page .fut-article-content ol {
  margin: 1.05em 0 1.2em;
  padding-left: 1.35em;
  text-align: left;
}

.fut-blog-detail-page .fut-article-content li {
  margin: .42em 0;
}

.fut-blog-detail-page .fut-article-content > div,
.fut-blog-detail-page .fut-article-content > section {
  max-width: 100%;
}

.fut-blog-detail-page .fut-article-content [align="left"] {
  text-align: left;
}

.fut-blog-detail-page .fut-article-content [align="center"] {
  text-align: center;
}

.fut-blog-detail-page .fut-article-content [align="right"] {
  text-align: right;
}

.fut-blog-detail-page .fut-article-content [style*="text-align: left"],
.fut-blog-detail-page .fut-article-content [style*="text-align:left"] {
  text-align: left !important;
}

.fut-blog-detail-page .fut-article-content [style*="text-align: center"],
.fut-blog-detail-page .fut-article-content [style*="text-align:center"] {
  text-align: center;
}

.fut-blog-detail-page .fut-article-content [style*="text-align: right"],
.fut-blog-detail-page .fut-article-content [style*="text-align:right"] {
  text-align: right;
}


/* ==========================================================================
   TABLES
   ========================================================================== */

.fut-blog-detail-page .fut-article-content table {
  width: 100%;
  max-width: 100%;
  margin: 1.65em 0;
  border: 1px solid var(--fut-detail-border-strong);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  background: var(--fut-detail-surface);
  overflow: hidden;
  box-shadow: var(--fut-detail-shadow-sm);
}

.fut-blog-detail-page .fut-article-content caption {
  padding: 9px 12px;
  color: var(--fut-detail-muted);
  font-size: .69rem;
  text-align: left;
}

.fut-blog-detail-page .fut-article-content th,
.fut-blog-detail-page .fut-article-content td {
  padding: 11px 12px;
  border-right: 1px solid var(--fut-detail-border);
  border-bottom: 1px solid var(--fut-detail-border);
  color: var(--fut-detail-text-soft);
  font-size: .77rem;
  line-height: 1.55;
  text-align: left;
  vertical-align: top;
}

.fut-blog-detail-page .fut-article-content thead th,
.fut-blog-detail-page .fut-article-content tbody th {
  color: var(--fut-detail-text);
  background:
    linear-gradient(
      135deg,
      var(--fut-detail-surface-tint),
      var(--fut-detail-surface-soft)
    );
  font-weight: 820;
}

.fut-blog-detail-page .fut-article-content tr > :last-child {
  border-right: 0;
}

.fut-blog-detail-page .fut-article-content tbody tr:last-child > td,
.fut-blog-detail-page .fut-article-content tbody tr:last-child > th,
.fut-blog-detail-page .fut-article-content tfoot tr:last-child > td,
.fut-blog-detail-page .fut-article-content tfoot tr:last-child > th {
  border-bottom: 0;
}

.fut-blog-detail-page .fut-article-content tbody tr:nth-child(even) {
  background: rgba(96,165,250,.025);
}

.fut-blog-detail-page .fut-article-content tbody tr:hover {
  background: var(--fut-detail-surface-soft);
}


/* ==========================================================================
   SIDEBAR — ABOUT THIS ARTICLE
   ========================================================================== */

.fut-sidebar-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--fut-detail-border);
  border-radius: var(--fut-detail-radius-lg);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(247,249,252,.90)
    );
  box-shadow: var(--fut-detail-shadow-sm);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
}

html[data-theme="dark"] .fut-sidebar-card,
html.fut-dark .fut-sidebar-card {
  background:
    linear-gradient(
      145deg,
      rgba(18,27,45,.95),
      rgba(10,16,28,.90)
    );
}

.fut-sidebar-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  content: "";
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(96,165,250,.42),
      transparent
    );
}

.fut-article-info-card {
  padding: 19px;
}

.fut-sidebar-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--fut-detail-primary-strong);
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.25;
  text-transform: uppercase;
}

.fut-article-info-card > strong,
.fut-recent-sidebar-heading > div > strong {
  display: block;
  color: var(--fut-detail-text);
  font-size: .91rem;
  font-weight: 840;
  letter-spacing: -.02em;
}

.fut-article-info-card > p {
  margin: 8px 0 13px;
  color: var(--fut-detail-muted);
  font-size: .68rem;
  line-height: 1.65;
}

.fut-article-info-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 11px 0;
  border-top: 1px solid var(--fut-detail-border);
  border-bottom: 1px solid var(--fut-detail-border);
}

.fut-article-info-meta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 9px;
}

.fut-article-info-meta span {
  color: var(--fut-detail-muted);
  font-size: .58rem;
  font-weight: 720;
}

.fut-article-info-meta strong {
  color: var(--fut-detail-text);
  font-size: .64rem;
  font-weight: 840;
  text-align: right;
}

.fut-sidebar-link {
  display: inline-flex;
  margin-top: 12px;
  color: var(--fut-detail-primary-strong);
  font-size: .64rem;
  font-weight: 850;
}


/* ==========================================================================
   SIDEBAR — RECENT 10
   ========================================================================== */

.fut-recent-sidebar-card {
  padding: 17px;
}

.fut-recent-sidebar-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.fut-recent-sidebar-heading > a {
  color: var(--fut-detail-primary-strong);
  font-size: .60rem;
  font-weight: 850;
}

.fut-recent-sidebar {
  display: grid;
  gap: 0;
}

.fut-recent-sidebar-item {
  display: grid;
  grid-template-columns: 20px 48px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 0;
  border-top: 1px solid var(--fut-detail-border);
}

.fut-recent-sidebar-item:first-child {
  border-top: 0;
  padding-top: 2px;
}

.fut-recent-sidebar-index {
  color: var(--fut-detail-primary-strong);
  font-size: .53rem;
  font-weight: 900;
  text-align: center;
}

.fut-recent-sidebar-media {
  display: block;
}

.fut-recent-sidebar-thumb {
  width: 48px;
  height: 34px;
  display: block;
  object-fit: cover;
  border-radius: 7px;
  background: var(--fut-detail-surface-tint);
}

.fut-recent-sidebar-thumb-empty {
  border: 1px dashed var(--fut-detail-border-strong);
}

.fut-recent-sidebar-copy {
  min-width: 0;
}

.fut-recent-sidebar-copy > a {
  display: block;
  overflow: hidden;
  color: var(--fut-detail-text);
  font-size: .61rem;
  font-weight: 790;
  line-height: 1.34;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fut-recent-sidebar-copy > a:hover {
  color: var(--fut-detail-primary-strong);
}

.fut-recent-sidebar-copy small {
  display: block;
  margin-top: 2px;
  color: var(--fut-detail-muted);
  font-size: .50rem;
  line-height: 1.35;
}


/* ==========================================================================
   COMMENTS
   ========================================================================== */

.fut-comments {
  width: 100%;
  max-width: 790px;
  margin: 43px auto 0;
}

.fut-comments h2 {
  margin: 0 0 17px;
  color: var(--fut-detail-text);
  font-size: 1.5rem;
  font-weight: 850;
  letter-spacing: -.035em;
  text-align: left;
}

.fut-comment-form,
.fut-comment {
  border: 1px solid var(--fut-detail-border);
  border-radius: 16px;
  background: var(--fut-detail-surface);
  box-shadow: var(--fut-detail-shadow-sm);
}

.fut-comment-form {
  padding: 18px;
  margin-bottom: 20px;
}

.fut-comment-form label {
  display: block;
  margin-bottom: 7px;
  color: var(--fut-detail-text);
  font-size: .70rem;
  font-weight: 800;
}

.fut-comment-form textarea,
.fut-comment textarea {
  width: 100%;
  min-height: 110px;
  padding: 11px 12px;
  border: 1px solid var(--fut-detail-border-strong);
  border-radius: 11px;
  outline: 0;
  color: var(--fut-detail-text);
  background: var(--fut-detail-surface);
  resize: vertical;
}

.fut-comment-list {
  display: grid;
  gap: 11px;
}

.fut-comment {
  padding: 16px;
}

.fut-comment > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.fut-comment > header strong {
  color: var(--fut-detail-text);
  font-size: .70rem;
  font-weight: 800;
}

.fut-comment > header time {
  color: var(--fut-detail-muted);
  font-size: .58rem;
}

.fut-comment > p {
  margin: 0;
  color: var(--fut-detail-text-soft);
  font-size: .71rem;
  line-height: 1.62;
}

.fut-comment-replies {
  display: grid;
  gap: 9px;
  margin-top: 13px;
  margin-left: 28px;
  padding-left: 13px;
  border-left: 2px solid rgba(96,165,250,.18);
}

.fut-comment-reply {
  padding: 12px;
  background: var(--fut-detail-surface-soft);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1040px) {
  .fut-blog-detail-page .fut-article-layout {
    width: min(900px, calc(100% - 36px));
    grid-template-columns: 1fr;
  }

  .fut-blog-detail-page .fut-article-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .fut-blog-detail-page .fut-article-content,
  .fut-comments {
    max-width: 820px;
  }
}

@media (max-width: 760px) {
  .fut-blog-detail-page .fut-article-header,
  .fut-blog-detail-page .fut-article-featured-image,
  .fut-blog-detail-page .fut-article-layout {
    width: calc(100% - 28px);
  }

  .fut-blog-detail-page .fut-article-header {
    padding-top: 21px;
  }

  .fut-blog-detail-page .fut-article-header h1 {
    font-size: clamp(2.15rem, 10.5vw, 3.65rem);
    line-height: 1;
  }

  .fut-blog-detail-page .fut-article-excerpt {
    font-size: .90rem;
  }

  .fut-blog-detail-page .fut-article-content {
    font-size: .94rem;
    line-height: 1.82;
  }

  .fut-blog-detail-page .fut-article-featured-image {
    border-radius: 18px;
  }

  .fut-blog-detail-page .fut-article-sidebar {
    grid-template-columns: 1fr;
  }

  .fut-blog-detail-page .fut-article-content table {
    display: block;
    width: max-content;
    min-width: 100%;
    max-width: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 500px) {
  .fut-blog-detail-page .fut-article-header,
  .fut-blog-detail-page .fut-article-featured-image,
  .fut-blog-detail-page .fut-article-layout {
    width: calc(100% - 20px);
  }

  .fut-blog-detail-page .fut-article-header h1 {
    font-size: clamp(2rem, 10.8vw, 3rem);
  }

  .fut-blog-detail-page .fut-article-content {
    font-size: .91rem;
  }

  .fut-blog-detail-page .fut-article-content th,
  .fut-blog-detail-page .fut-article-content td {
    min-width: 120px;
    padding: 9px 10px;
    font-size: .72rem;
  }

  .fut-comment-replies {
    margin-left: 9px;
    padding-left: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fut-blog-detail-page *,
  .fut-blog-detail-page *::before,
  .fut-blog-detail-page *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   FUT BLOG DETAIL — DARK MODE FINAL PROFESSIONAL OVERRIDE
   --------------------------------------------------------------------------
   This layer intentionally comes LAST so the public article page mirrors the
   rich-editor hierarchy while remaining highly readable in dark mode.

   Visual hierarchy:
   - Page: deep navy / black
   - Article surface: near-black
   - Body text: bright soft-white
   - Strong/bold: pure white
   - Headings: light blue
   - Links: cyan/light blue
   - Tables: black surface + readable white cells
   - Like/comments: high-contrast interactive controls
   ========================================================================== */

html.fut-dark .fut-blog-detail-page,
html[data-theme="dark"] .fut-blog-detail-page {
  --fut-detail-bg: #060a12;
  --fut-detail-surface: #0b111b;
  --fut-detail-surface-soft: #101925;
  --fut-detail-surface-tint: rgba(86, 185, 238, .10);

  --fut-detail-text: #f4f8fc;
  --fut-detail-text-soft: #dbe7f1;
  --fut-detail-muted: #afc0cf;
  --fut-detail-faint: #8295a7;

  --fut-detail-primary: #55c7f4;
  --fut-detail-primary-strong: #75d8ff;
  --fut-detail-primary-light: #a5e7ff;
  --fut-detail-primary-soft: rgba(85,199,244,.13);

  --fut-detail-border: rgba(141, 194, 224, .16);
  --fut-detail-border-strong: rgba(141, 194, 224, .27);

  --fut-detail-shadow-xs: 0 6px 18px rgba(0,0,0,.16);
  --fut-detail-shadow-sm: 0 15px 35px rgba(0,0,0,.25);
  --fut-detail-shadow-md: 0 26px 62px rgba(0,0,0,.33);
  --fut-detail-shadow-lg:
    0 40px 105px rgba(0,0,0,.46),
    0 14px 34px rgba(50,160,214,.06);
}


/* --------------------------------------------------------------------------
   DARK PAGE + ARTICLE SURFACE
   -------------------------------------------------------------------------- */

html.fut-dark .fut-blog-detail-page,
html[data-theme="dark"] .fut-blog-detail-page {
  color: var(--fut-detail-text) !important;
  background:
    radial-gradient(
      44rem 38rem at 86% -8%,
      rgba(63, 154, 207, .11),
      transparent 70%
    ),
    radial-gradient(
      38rem 34rem at -7% 78%,
      rgba(37, 99, 161, .08),
      transparent 72%
    ),
    #060a12 !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-main,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-main {
  color: var(--fut-detail-text) !important;
  background:
    linear-gradient(
      145deg,
      #0b111b 0%,
      #0a1018 58%,
      #080d15 100%
    ) !important;
  border-color: rgba(141,194,224,.16) !important;
  box-shadow:
    0 28px 72px rgba(0,0,0,.34),
    0 8px 28px rgba(36,123,166,.05),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-main::before,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-main::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  content: "";
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(117,216,255,.38),
      transparent
    );
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   ARTICLE BODY — READABILITY FIRST
   -------------------------------------------------------------------------- */

html.fut-dark .fut-blog-detail-page .fut-article-content,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content {
  color: #dbe7f1 !important;
  font-weight: 420;
  text-shadow: none !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-content p,
html.fut-dark .fut-blog-detail-page .fut-article-content li,
html.fut-dark .fut-blog-detail-page .fut-article-content td,
html.fut-dark .fut-blog-detail-page .fut-article-content dd,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content p,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content li,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content td,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content dd {
  color: #dbe7f1 !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-content strong,
html.fut-dark .fut-blog-detail-page .fut-article-content b,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content strong,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content b {
  color: #ffffff !important;
  font-weight: 800;
}


/* --------------------------------------------------------------------------
   DARK HEADINGS — LIGHT BLUE / CLEAR HIERARCHY
   -------------------------------------------------------------------------- */

html.fut-dark .fut-blog-detail-page .fut-article-content h1,
html.fut-dark .fut-blog-detail-page .fut-article-content h2,
html.fut-dark .fut-blog-detail-page .fut-article-content h3,
html.fut-dark .fut-blog-detail-page .fut-article-content h4,
html.fut-dark .fut-blog-detail-page .fut-article-content h5,
html.fut-dark .fut-blog-detail-page .fut-article-content h6,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content h1,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content h2,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content h3,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content h4,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content h5,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content h6 {
  color: #8fddff !important;
  font-weight: 860;
  text-shadow: 0 2px 18px rgba(85,199,244,.08);
}

html.fut-dark .fut-blog-detail-page .fut-article-content h2,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content h2 {
  margin-top: 2.35em;
  margin-bottom: .72em;
}

html.fut-dark .fut-blog-detail-page .fut-article-content h3,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content h3 {
  margin-top: 1.95em;
  margin-bottom: .62em;
}


/* --------------------------------------------------------------------------
   LINKS
   -------------------------------------------------------------------------- */

html.fut-dark .fut-blog-detail-page .fut-article-content a,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content a {
  color: #73d8ff !important;
  font-weight: 700;
  text-decoration-color: rgba(115,216,255,.58);
  text-underline-offset: 3px;
}

html.fut-dark .fut-blog-detail-page .fut-article-content a:hover,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content a:hover {
  color: #b3ecff !important;
  text-decoration-color: #b3ecff;
}


/* --------------------------------------------------------------------------
   LISTS / BULLETS
   -------------------------------------------------------------------------- */

html.fut-dark .fut-blog-detail-page .fut-article-content li::marker,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content li::marker {
  color: #69d4fb;
}

html.fut-dark .fut-blog-detail-page .fut-article-content ul,
html.fut-dark .fut-blog-detail-page .fut-article-content ol,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content ul,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content ol {
  color: #dbe7f1 !important;
}


/* --------------------------------------------------------------------------
   BLOCKQUOTES
   -------------------------------------------------------------------------- */

html.fut-dark .fut-blog-detail-page .fut-article-content blockquote,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content blockquote {
  border-color: rgba(85,199,244,.32) !important;
  border-left-color: #55c7f4 !important;
  color: #dbe7f1 !important;
  background:
    linear-gradient(
      135deg,
      rgba(38,93,126,.22),
      rgba(10,17,28,.86)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 28px rgba(0,0,0,.18) !important;
}


/* --------------------------------------------------------------------------
   TABLES — BLACK SURFACE + WHITE CELLS + BLUE HEADERS
   -------------------------------------------------------------------------- */

html.fut-dark .fut-blog-detail-page .fut-article-content table,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content table {
  border: 1px solid #2b465c !important;
  background: #080d15 !important;
  color: #eaf4fb !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-content caption,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content caption {
  color: #9fb6c8 !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-content thead th,
html.fut-dark .fut-blog-detail-page .fut-article-content tbody th,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content thead th,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content tbody th {
  color: #b6ebff !important;
  background:
    linear-gradient(
      145deg,
      #11283b,
      #0d1d2d
    ) !important;
  border-color: #2b465c !important;
  font-weight: 850;
}

html.fut-dark .fut-blog-detail-page .fut-article-content th,
html.fut-dark .fut-blog-detail-page .fut-article-content td,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content th,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content td {
  color: #e6f0f7 !important;
  border-right-color: #263d50 !important;
  border-bottom-color: #263d50 !important;
  background: #0a1018 !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-content tbody tr:nth-child(even),
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content tbody tr:nth-child(even) {
  background: #0d141e !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-content tbody tr:hover,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content tbody tr:hover {
  background: #101b28 !important;
}


/* --------------------------------------------------------------------------
   CODE
   -------------------------------------------------------------------------- */

html.fut-dark .fut-blog-detail-page .fut-article-content code,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content code {
  color: #8fddff !important;
  background: #0b1722 !important;
  border-color: #24465f !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-content pre,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-content pre {
  color: #edf7ff !important;
  background:
    linear-gradient(
      145deg,
      #03070d,
      #09111b
    ) !important;
  border: 1px solid #1d3549 !important;
}


/* --------------------------------------------------------------------------
   ARTICLE FOOTER / LIKE
   -------------------------------------------------------------------------- */

html.fut-dark .fut-blog-detail-page .fut-article-actions,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-actions {
  border-top-color: #1d3346 !important;
  border-bottom-color: #1d3346 !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-actions form,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-actions form {
  margin: 0;
}

html.fut-dark .fut-blog-detail-page .fut-article-actions button,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-actions button,
html.fut-dark .fut-blog-detail-page .fut-article-actions > a,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-actions > a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid rgba(85,199,244,.28) !important;
  border-radius: 10px;
  color: #dff7ff !important;
  background:
    linear-gradient(
      135deg,
      rgba(31,92,126,.72),
      rgba(15,39,58,.92)
    ) !important;
  box-shadow:
    0 9px 22px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06);
  font-size: .68rem;
  font-weight: 820;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    transform .2s var(--fut-detail-ease),
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

html.fut-dark .fut-blog-detail-page .fut-article-actions button:hover,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-actions button:hover,
html.fut-dark .fut-blog-detail-page .fut-article-actions > a:hover,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-actions > a:hover {
  transform: translateY(-2px);
  border-color: #69d4fb !important;
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      #1f6f96,
      #15435f
    ) !important;
  box-shadow:
    0 14px 29px rgba(21,111,150,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}


/* --------------------------------------------------------------------------
   TAGS
   -------------------------------------------------------------------------- */

html.fut-dark .fut-blog-detail-page .fut-article-tags > span,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-tags > span {
  color: #9eb3c3 !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-tags a,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-tags a {
  color: #78dafc !important;
  background: rgba(52,137,179,.12) !important;
  border-color: rgba(85,199,244,.20) !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-tags a:hover,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-tags a:hover {
  color: #ffffff !important;
  background: rgba(52,137,179,.22) !important;
  border-color: rgba(105,212,251,.34) !important;
}


/* --------------------------------------------------------------------------
   COMMENTS — HIGH-CONTRAST, EASY TO READ
   -------------------------------------------------------------------------- */

html.fut-dark .fut-blog-detail-page .fut-comments,
html[data-theme="dark"] .fut-blog-detail-page .fut-comments {
  color: #dbe7f1 !important;
}

html.fut-dark .fut-blog-detail-page .fut-comments h2,
html[data-theme="dark"] .fut-blog-detail-page .fut-comments h2 {
  color: #8fddff !important;
  font-size: 1.62rem;
}

html.fut-dark .fut-blog-detail-page .fut-comment-form,
html.fut-dark .fut-blog-detail-page .fut-comment,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment-form,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment {
  border-color: #203a4e !important;
  background:
    linear-gradient(
      145deg,
      #0b131e,
      #091019
    ) !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

html.fut-dark .fut-blog-detail-page .fut-comment-form label,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment-form label {
  color: #dceaf4 !important;
}

html.fut-dark .fut-blog-detail-page .fut-comment-form textarea,
html.fut-dark .fut-blog-detail-page .fut-comment textarea,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment-form textarea,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment textarea {
  color: #f0f7fb !important;
  background: #070d15 !important;
  border-color: #2a465a !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.18) !important;
}

html.fut-dark .fut-blog-detail-page .fut-comment-form textarea::placeholder,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment-form textarea::placeholder {
  color: #708698 !important;
}

html.fut-dark .fut-blog-detail-page .fut-comment-form textarea:focus,
html.fut-dark .fut-blog-detail-page .fut-comment textarea:focus,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment-form textarea:focus,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment textarea:focus {
  border-color: #4bbce8 !important;
  box-shadow: 0 0 0 4px rgba(75,188,232,.10) !important;
}

html.fut-dark .fut-blog-detail-page .fut-comment > header,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment > header {
  border-bottom: 1px solid #1d3345;
  padding-bottom: 9px;
}

html.fut-dark .fut-blog-detail-page .fut-comment > header strong,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment > header strong {
  color: #ffffff !important;
}

html.fut-dark .fut-blog-detail-page .fut-comment > header time,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment > header time {
  color: #8ea5b7 !important;
}

html.fut-dark .fut-blog-detail-page .fut-comment > p,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment > p {
  color: #d0e0eb !important;
}

html.fut-dark .fut-blog-detail-page .fut-comment > form button,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment > form button {
  color: #e8f8ff !important;
  background: #102638 !important;
  border: 1px solid #2b536b !important;
  border-radius: 9px;
  min-height: 35px;
  padding: 7px 11px;
  font-size: .63rem;
  font-weight: 820;
  cursor: pointer;
}

html.fut-dark .fut-blog-detail-page .fut-comment > form button:hover,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment > form button:hover {
  background: #15415b !important;
  border-color: #58c9f1 !important;
  color: #ffffff !important;
}

html.fut-dark .fut-blog-detail-page .fut-comment-replies,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment-replies {
  border-left-color: rgba(85,199,244,.28) !important;
}

html.fut-dark .fut-blog-detail-page .fut-comment-reply,
html[data-theme="dark"] .fut-blog-detail-page .fut-comment-reply {
  background: #0b1621 !important;
  border-color: #1f3b4e !important;
}


/* --------------------------------------------------------------------------
   SIGN-IN NOTICE
   -------------------------------------------------------------------------- */

html.fut-dark .fut-blog-detail-page .fut-login-notice,
html[data-theme="dark"] .fut-blog-detail-page .fut-login-notice {
  color: #dcebf5 !important;
  background:
    linear-gradient(
      135deg,
      rgba(29,83,111,.22),
      rgba(10,19,30,.84)
    ) !important;
  border-color: rgba(85,199,244,.22) !important;
}

html.fut-dark .fut-blog-detail-page .fut-login-notice p,
html[data-theme="dark"] .fut-blog-detail-page .fut-login-notice p {
  color: #d2e2ed !important;
}

html.fut-dark .fut-blog-detail-page .fut-login-notice a,
html[data-theme="dark"] .fut-blog-detail-page .fut-login-notice a {
  color: #79dcff !important;
}


/* --------------------------------------------------------------------------
   SIDEBAR DARK CONTRAST
   -------------------------------------------------------------------------- */

html.fut-dark .fut-blog-detail-page .fut-sidebar-card,
html[data-theme="dark"] .fut-blog-detail-page .fut-sidebar-card {
  border-color: #1f394c !important;
  background:
    linear-gradient(
      145deg,
      #0d1722,
      #09111a
    ) !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

html.fut-dark .fut-blog-detail-page .fut-sidebar-card > strong,
html.fut-dark .fut-blog-detail-page .fut-sidebar-card p,
html[data-theme="dark"] .fut-blog-detail-page .fut-sidebar-card > strong,
html[data-theme="dark"] .fut-blog-detail-page .fut-sidebar-card p {
  color: #dce9f2 !important;
}

html.fut-dark .fut-blog-detail-page .fut-sidebar-kicker,
html[data-theme="dark"] .fut-blog-detail-page .fut-sidebar-kicker {
  color: #75d8ff !important;
}

html.fut-dark .fut-blog-detail-page .fut-sidebar-link,
html[data-theme="dark"] .fut-blog-detail-page .fut-sidebar-link {
  color: #75d8ff !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-info-meta,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-info-meta {
  border-top-color: #20394c !important;
  border-bottom-color: #20394c !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-info-meta span,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-info-meta span {
  color: #8fa8b9 !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-info-meta strong,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-info-meta strong {
  color: #edf7fc !important;
}

html.fut-dark .fut-blog-detail-page .fut-recent-sidebar-item,
html[data-theme="dark"] .fut-blog-detail-page .fut-recent-sidebar-item {
  border-top-color: #1d3345 !important;
}

html.fut-dark .fut-blog-detail-page .fut-recent-sidebar-copy > a,
html[data-theme="dark"] .fut-blog-detail-page .fut-recent-sidebar-copy > a {
  color: #e8f3f8 !important;
}

html.fut-dark .fut-blog-detail-page .fut-recent-sidebar-copy > a:hover,
html[data-theme="dark"] .fut-blog-detail-page .fut-recent-sidebar-copy > a:hover {
  color: #79dcff !important;
}

html.fut-dark .fut-blog-detail-page .fut-recent-sidebar-copy small,
html[data-theme="dark"] .fut-blog-detail-page .fut-recent-sidebar-copy small {
  color: #849bad !important;
}

html.fut-dark .fut-blog-detail-page .fut-recent-sidebar-index,
html[data-theme="dark"] .fut-blog-detail-page .fut-recent-sidebar-index {
  color: #72d8ff !important;
}


/* --------------------------------------------------------------------------
   FEATURE IMAGE / CAPTION IN DARK MODE
   -------------------------------------------------------------------------- */

html.fut-dark .fut-blog-detail-page .fut-article-featured-image,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-featured-image {
  border-color: #1c3447 !important;
  background: #080f17 !important;
  box-shadow:
    0 32px 75px rgba(0,0,0,.34),
    0 10px 30px rgba(47,145,189,.05) !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-featured-image figcaption,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-featured-image figcaption {
  color: #8fa7b8 !important;
  background: #0b131d !important;
}


/* --------------------------------------------------------------------------
   TOP ARTICLE HEADER IN DARK MODE
   -------------------------------------------------------------------------- */

html.fut-dark .fut-blog-detail-page .fut-blog-category,
html[data-theme="dark"] .fut-blog-detail-page .fut-blog-category {
  color: #86ddff !important;
  border-color: rgba(99,208,250,.20) !important;
  background: rgba(70,157,196,.12) !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-header h1,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-header h1 {
  color: #f4f8fc !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-excerpt,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-excerpt {
  color: #adbecc !important;
}

html.fut-dark .fut-blog-detail-page .fut-article-meta,
html[data-theme="dark"] .fut-blog-detail-page .fut-article-meta {
  color: #8ea5b5 !important;
}

html.fut-dark .fut-breadcrumbs,
html[data-theme="dark"] .fut-breadcrumbs {
  color: #8298aa !important;
}

html.fut-dark .fut-breadcrumbs a,
html[data-theme="dark"] .fut-breadcrumbs a {
  color: #72d7ff !important;
}


/* --------------------------------------------------------------------------
   MOBILE — KEEP THE SAME CONTRAST SYSTEM
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  html.fut-dark .fut-blog-detail-page .fut-article-main,
  html[data-theme="dark"] .fut-blog-detail-page .fut-article-main {
    padding: 23px 18px !important;
    border-radius: 19px !important;
  }

  html.fut-dark .fut-blog-detail-page .fut-article-content,
  html[data-theme="dark"] .fut-blog-detail-page .fut-article-content {
    font-size: .95rem;
    line-height: 1.86;
  }

  html.fut-dark .fut-blog-detail-page .fut-article-content table,
  html[data-theme="dark"] .fut-blog-detail-page .fut-article-content table {
    min-width: 620px;
  }
}

@media (max-width: 500px) {
  html.fut-dark .fut-blog-detail-page .fut-article-main,
  html[data-theme="dark"] .fut-blog-detail-page .fut-article-main {
    padding: 19px 14px !important;
    border-radius: 16px !important;
  }
}


/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.fut-dark .fut-blog-detail-page *,
  html.fut-dark .fut-blog-detail-page *::before,
  html.fut-dark .fut-blog-detail-page *::after,
  html[data-theme="dark"] .fut-blog-detail-page *,
  html[data-theme="dark"] .fut-blog-detail-page *::before,
  html[data-theme="dark"] .fut-blog-detail-page *::after {
    transition: none !important;
    animation: none !important;
  }
}