/* ========================================================================== 
   FREE USE TOOL — JWT DECODER & INSPECTOR
   Premium developer workspace. Scoped to .fut-jwt to avoid site collisions.
   ========================================================================== */

.fut-jwt {
  --jwt-ink: #0f172a;
  --jwt-muted: #64748b;
  --jwt-soft: #f8fbff;
  --jwt-border: #dbe7f2;
  --jwt-border-strong: #bfd3e4;
  --jwt-blue: #0284c7;
  --jwt-blue-deep: #075985;
  --jwt-blue-soft: #e0f2fe;
  --jwt-green: #059669;
  --jwt-green-soft: #ecfdf5;
  --jwt-red: #dc2626;
  --jwt-red-soft: #fef2f2;
  --jwt-amber: #d97706;
  --jwt-amber-soft: #fffbeb;
  width: 100%;
  color: var(--jwt-ink);
}

.fut-jwt-shell {
  position: relative;
  z-index: 1;
}

.fut-jwt-tool-header {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.fut-jwt-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--jwt-blue-deep);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.fut-jwt-tool-header h2,
.fut-jwt-result-head h3,
.fut-jwt-security h3 {
  margin: 7px 0 7px;
  letter-spacing: -.035em;
}

.fut-jwt-tool-header h2 { font-size: clamp(1.45rem, 2.5vw, 2rem); }
.fut-jwt-tool-header p {
  max-width: 720px;
  margin: 0;
  color: var(--jwt-muted);
  line-height: 1.65;
}

.fut-jwt-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.fut-jwt-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid var(--jwt-border);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: #475569;
  font-size: .72rem;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(15,23,42,.04);
}

.fut-jwt-trust b { color: var(--jwt-green); }

.fut-jwt-editor-card,
.fut-jwt-results {
  border: 1px solid var(--jwt-border);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 60px rgba(15,23,42,.08), 0 6px 22px rgba(14,165,233,.05);
  overflow: hidden;
}

.fut-jwt-editor-card { padding: 18px; }

.fut-jwt-editor-topbar,
.fut-jwt-field-label,
.fut-jwt-top-actions,
.fut-jwt-main-actions,
.fut-jwt-result-head,
.fut-jwt-panel-heading,
.fut-jwt-security-heading,
.fut-jwt-raw-head {
  display: flex;
  align-items: center;
}

.fut-jwt-editor-topbar { justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fut-jwt-field-label { justify-content: space-between; width: 100%; gap: 12px; }
.fut-jwt-field-label label { font-size: .78rem; font-weight: 900; }
.fut-jwt-field-label span { color: #94a3b8; font-size: .72rem; }
.fut-jwt-top-actions { gap: 7px; }

.fut-jwt-editor {
  display: block;
  width: 100%;
  min-height: 250px;
  resize: vertical;
  padding: 19px 20px;
  border: 1px solid #cbd9e6;
  border-radius: 16px;
  outline: none;
  background: #0b1220;
  color: #dbeafe;
  font: 500 .9rem/1.75 var(--fut-mono, "SFMono-Regular", Consolas, monospace);
  letter-spacing: .005em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), inset 0 12px 40px rgba(2,8,23,.20);
  transition: border-color .18s ease, box-shadow .22s ease;
}

.fut-jwt-editor::placeholder { color: #64748b; }
.fut-jwt-editor:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(14,165,233,.13), inset 0 0 0 1px rgba(255,255,255,.03);
}

.fut-jwt-editor-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 3px 13px;
  color: #94a3b8;
  font-size: .69rem;
}
.fut-jwt-editor-footer > span:first-child { margin-right: auto; }
.fut-jwt-editor-footer kbd {
  padding: 2px 6px;
  border: 1px solid #dbe3ec;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #f8fafc;
  color: #475569;
  font: 700 .66rem var(--fut-font, Inter, sans-serif);
}

.fut-jwt-main-actions { gap: 9px; }
.fut-jwt-btn {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  font: 800 .76rem/1 var(--fut-font, Inter, sans-serif);
  transition: transform .16s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.fut-jwt-btn:hover { transform: translateY(-1px); }
.fut-jwt-btn:focus-visible,
.fut-jwt-tabs button:focus-visible { outline: 3px solid rgba(14,165,233,.2); outline-offset: 2px; }
.fut-jwt-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #0369a1);
  box-shadow: 0 10px 22px rgba(2,132,199,.20);
}
.fut-jwt-btn-primary:hover { box-shadow: 0 14px 28px rgba(2,132,199,.28); }
.fut-jwt-btn-secondary { color: #075985; border-color: #bae6fd; background: #f0f9ff; }
.fut-jwt-btn-ghost { color: #475569; border-color: #dbe4ed; background: #fff; }
.fut-jwt-btn-icon { margin-right: 5px; font-size: 1rem; }

.fut-jwt-alert {
  margin: 13px 0 0;
  padding: 11px 14px;
  border: 1px solid #bae6fd;
  border-radius: 12px;
  color: #075985;
  background: #f0f9ff;
  font-size: .76rem;
  font-weight: 750;
}
.fut-jwt-alert.is-success { border-color: #a7f3d0; color: #047857; background: #ecfdf5; }
.fut-jwt-alert.is-warning { border-color: #fde68a; color: #92400e; background: #fffbeb; }
.fut-jwt-alert.is-danger { border-color: #fecaca; color: #b91c1c; background: #fef2f2; }

.fut-jwt-results { margin-top: 18px; }
.fut-jwt-result-head { justify-content: space-between; gap: 20px; padding: 23px 23px 18px; }
.fut-jwt-result-head h3 { font-size: 1.35rem; }
.fut-jwt-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 900;
}
.fut-jwt-status.is-success { color: #047857; background: #ecfdf5; }
.fut-jwt-status.is-danger { color: #b91c1c; background: #fef2f2; }
.fut-jwt-status.is-warning { color: #92400e; background: #fffbeb; }
.fut-jwt-status.is-neutral { color: #475569; background: #f1f5f9; }

.fut-jwt-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 23px 20px;
}
.fut-jwt-metric {
  min-width: 0;
  padding: 15px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #f8fbff);
}
.fut-jwt-metric span,
.fut-jwt-metric small { display: block; color: #64748b; }
.fut-jwt-metric span { font-size: .66rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.fut-jwt-metric strong { display: block; margin: 7px 0 4px; overflow: hidden; text-overflow: ellipsis; font: 850 1.1rem var(--fut-mono, Consolas, monospace); }
.fut-jwt-metric small { font-size: .64rem; }

.fut-jwt-tabs {
  display: flex;
  gap: 3px;
  padding: 0 18px;
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #dbe7f2;
  background: #f8fbff;
  overflow-x: auto;
}
.fut-jwt-tabs button {
  position: relative;
  flex: 0 0 auto;
  padding: 14px 13px;
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font: 800 .72rem var(--fut-font, Inter, sans-serif);
}
.fut-jwt-tabs button::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  content: "";
  transform: scaleX(0);
  background: #0284c7;
  transition: transform .2s ease;
}
.fut-jwt-tabs button.is-active { color: #075985; }
.fut-jwt-tabs button.is-active::after { transform: scaleX(1); }

.fut-jwt-tab-panel { padding: 22px 23px 24px; }
.fut-jwt-panel-heading { justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.fut-jwt-panel-heading > div { display: flex; align-items: center; gap: 9px; }
.fut-jwt-panel-heading h4 { margin: 0; font-size: 1rem; }
.fut-jwt-panel-heading .fut-jwt-kicker { min-width: 24px; justify-content: center; }
.fut-jwt-panel-note { color: #94a3b8; font-size: .68rem; }

.fut-jwt-code {
  max-height: 500px;
  overflow: auto;
  margin: 0;
  padding: 18px;
  border: 1px solid #1e293b;
  border-radius: 15px;
  background: #0b1220;
  color: #dbeafe;
  font: 500 .8rem/1.75 var(--fut-mono, Consolas, monospace);
  white-space: pre-wrap;
  word-break: break-word;
}

.fut-jwt-claims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 13px;
}
.fut-jwt-claim-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #fff;
}
.fut-jwt-claim-key { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.fut-jwt-claim-key strong { font: 850 .78rem var(--fut-mono, Consolas, monospace); }
.fut-jwt-claim-key span { color: #94a3b8; font-size: .61rem; font-weight: 800; text-align: right; }
.fut-jwt-claim-value { margin: 9px 0 5px; overflow-wrap: anywhere; color: #0f172a; font: 750 .78rem/1.45 var(--fut-mono, Consolas, monospace); }
.fut-jwt-claim-card small { color: #94a3b8; font-size: .62rem; }
.fut-jwt-empty { padding: 20px; border: 1px dashed #cbd5e1; border-radius: 14px; color: #64748b; background: #f8fafc; font-size: .78rem; }

.fut-jwt-timeline-status { display: flex; justify-content: space-between; gap: 15px; padding: 13px 15px; border-radius: 13px; background: #f8fafc; }
.fut-jwt-timeline-status strong { font-size: .76rem; }
.fut-jwt-timeline-status span { color: #64748b; font-size: .7rem; }
.fut-jwt-timeline-status.success { border: 1px solid #a7f3d0; background: #ecfdf5; color: #047857; }
.fut-jwt-timeline-status.danger { border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; }
.fut-jwt-timeline-status.warning { border: 1px solid #fde68a; background: #fffbeb; color: #92400e; }
.fut-jwt-timeline-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; margin: 42px 0 14px; }
.fut-jwt-timeline-track::before { position: absolute; top: 7px; right: 7%; left: 7%; height: 2px; content: ""; background: #dbe7f2; }
.fut-jwt-timeline-point { position: relative; z-index: 1; text-align: center; }
.fut-jwt-timeline-dot { display: block; width: 16px; height: 16px; margin: 0 auto 10px; border: 4px solid #e0f2fe; border-radius: 50%; background: #0284c7; }
.fut-jwt-timeline-point.is-now .fut-jwt-timeline-dot { border-color: #d1fae5; background: #059669; }
.fut-jwt-timeline-point strong { display: block; font-size: .68rem; }
.fut-jwt-timeline-point time { display: block; margin-top: 4px; color: #64748b; font-size: .61rem; line-height: 1.4; }

.fut-jwt-segments { display: grid; gap: 10px; }
.fut-jwt-raw-card { padding: 14px; border: 1px solid #e2e8f0; border-radius: 13px; background: #f8fafc; }
.fut-jwt-raw-head { gap: 9px; margin-bottom: 8px; }
.fut-jwt-raw-head span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; color: #075985; background: #e0f2fe; font-size: .62rem; font-weight: 900; }
.fut-jwt-raw-head strong { font-size: .75rem; }
.fut-jwt-raw-head small { margin-left: auto; color: #94a3b8; font-size: .62rem; }
.fut-jwt-raw-card code { display: block; max-height: 100px; overflow: auto; color: #475569; font: 600 .7rem/1.5 var(--fut-mono, Consolas, monospace); word-break: break-all; }

.fut-jwt-security { margin: 0 23px 23px; padding: 20px; border: 1px solid #dbe7f2; border-radius: 18px; background: linear-gradient(145deg, #f8fbff, #fff); }
.fut-jwt-security-heading { align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.fut-jwt-security-icon { display: grid; flex: 0 0 30px; height: 30px; place-items: center; border-radius: 10px; color: #075985; background: #e0f2fe; font-weight: 950; }
.fut-jwt-security h3 { font-size: 1rem; }
.fut-jwt-security-list { display: grid; gap: 8px; }
.fut-jwt-security-item { display: grid; grid-template-columns: 8px 1fr; gap: 10px; padding: 11px 0; }
.fut-jwt-security-item + .fut-jwt-security-item { border-top: 1px solid #e8eef4; }
.fut-jwt-security-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #94a3b8; }
.fut-jwt-security-item.success .fut-jwt-security-dot { background: #059669; }
.fut-jwt-security-item.warning .fut-jwt-security-dot { background: #d97706; }
.fut-jwt-security-item.danger .fut-jwt-security-dot { background: #dc2626; }
.fut-jwt-security-item.info .fut-jwt-security-dot { background: #0284c7; }
.fut-jwt-security-item strong { display: block; font-size: .74rem; }
.fut-jwt-security-item p { margin: 3px 0 0; color: #64748b; font-size: .68rem; line-height: 1.55; }

.fut-jwt-privacy-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 16px 18px; border: 1px solid #bae6fd; border-radius: 17px; background: linear-gradient(135deg, #f0f9ff, #fff); }
.fut-jwt-privacy-icon { display: grid; flex: 0 0 30px; height: 30px; place-items: center; border-radius: 9px; color: #0369a1; background: #e0f2fe; font-weight: 900; }
.fut-jwt-privacy-note strong { display: block; font-size: .76rem; }
.fut-jwt-privacy-note p { margin: 4px 0 0; color: #64748b; font-size: .68rem; line-height: 1.6; }

@media (max-width: 850px) {
  .fut-jwt-tool-header { flex-direction: column; }
  .fut-jwt-trust { justify-content: flex-start; }
  .fut-jwt-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .fut-jwt-claims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .fut-jwt-editor-card { padding: 13px; }
  .fut-jwt-editor { min-height: 220px; padding: 15px; font-size: .76rem; }
  .fut-jwt-editor-topbar { align-items: flex-start; }
  .fut-jwt-top-actions { flex-wrap: wrap; justify-content: flex-end; }
  .fut-jwt-editor-footer > span:first-child { width: 100%; }
  .fut-jwt-main-actions .fut-jwt-btn { flex: 1; }
  .fut-jwt-result-head,
  .fut-jwt-panel-heading { align-items: flex-start; }
  .fut-jwt-result-head { padding: 19px 16px 15px; }
  .fut-jwt-overview-grid { padding: 0 16px 16px; grid-template-columns: repeat(2, 1fr); }
  .fut-jwt-tabs { padding: 0 9px; }
  .fut-jwt-tab-panel { padding: 18px 16px; }
  .fut-jwt-claims { grid-template-columns: 1fr; }
  .fut-jwt-timeline-track { grid-template-columns: 1fr; gap: 16px; margin: 22px 0; }
  .fut-jwt-timeline-track::before { top: 7px; bottom: 7px; left: calc(50% - 1px); width: 2px; height: auto; right: auto; }
  .fut-jwt-timeline-point { display: grid; grid-template-columns: 1fr 16px 1fr; align-items: center; gap: 8px; text-align: left; }
  .fut-jwt-timeline-dot { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .fut-jwt-timeline-point strong { grid-column: 1; grid-row: 1; text-align: right; }
  .fut-jwt-timeline-point time { grid-column: 3; grid-row: 1; margin: 0; }
  .fut-jwt-security { margin: 0 16px 16px; padding: 16px; }
  .fut-jwt-privacy-note { padding: 14px; }
}


/* ==========================================================================
   FINAL DARK THEME FIX
   This block intentionally has high specificity so generic tool.css/base.css
   cannot turn JWT result surfaces white or wash out their text.
   ========================================================================== */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-shell {
  --jwt-ink: #f1f7ff !important;
  --jwt-muted: #9fb1c8 !important;
  --jwt-soft: #0f1b2e !important;
  --jwt-border: #263a55 !important;
  --jwt-border-strong: #3b5573 !important;
  --jwt-blue: #38bdf8 !important;
  --jwt-blue-deep: #7dd3fc !important;
  --jwt-blue-soft: rgba(56, 189, 248, 0.12) !important;
  --jwt-green: #34d399 !important;
  --jwt-green-soft: rgba(52, 211, 153, 0.12) !important;
  --jwt-red: #fb7185 !important;
  --jwt-red-soft: rgba(251, 113, 133, 0.12) !important;
  --jwt-amber: #fbbf24 !important;
  --jwt-amber-soft: rgba(251, 191, 36, 0.12) !important;
  color: #f1f7ff !important;
}

/* Main JWT surfaces — NEVER white in dark mode */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-editor-card,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-results {
  background: #0d1728 !important;
  border-color: #263a55 !important;
  color: #f1f7ff !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.32),
    0 8px 30px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

/* Editor */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-editor {
  background: #070d18 !important;
  border-color: #29405e !important;
  color: #dff1ff !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-editor::placeholder {
  color: #61748d !important;
}

/* All important headings */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt h1,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt h2,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt h3,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt h4,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt strong,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt label {
  color: #f1f7ff !important;
}

/* Supporting text */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt p,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-editor-footer,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-panel-note {
  color: #9fb1c8 !important;
}

/* Trust badges */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-trust span {
  background: #17243a !important;
  border-color: #354b68 !important;
  color: #c8d6e6 !important;
}

/* Metrics */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-metric {
  background: #142238 !important;
  border-color: #2c405d !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-metric span,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-metric small {
  color: #8ea2ba !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-metric strong {
  color: #e4f2ff !important;
}

/* Tabs */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-tabs {
  background: #101b2d !important;
  border-top-color: #23364f !important;
  border-bottom-color: #2b405b !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-tabs button {
  color: #879bb4 !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-tabs button:hover,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-tabs button.is-active {
  color: #7dd3fc !important;
}

/* Code blocks */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-code {
  background: #070d18 !important;
  border-color: #243852 !important;
  color: #d9edff !important;
}

/* Claims */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-claim-card,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-raw-card {
  background: #142238 !important;
  border-color: #2b405d !important;
  color: #dcecff !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-claim-value,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-claim-key strong,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-raw-card code {
  color: #d9edff !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-claim-key span,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-claim-card small,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-raw-head small {
  color: #8296ae !important;
}

/* Security panel */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-security {
  background: #122035 !important;
  border-color: #2b405d !important;
  color: #e6f2ff !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-security-item + .fut-jwt-security-item {
  border-top-color: #263951 !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-security-item p {
  color: #91a5bd !important;
}

/* Privacy panel */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-privacy-note {
  background: #102238 !important;
  border-color: #285477 !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-privacy-note p {
  color: #92a8c0 !important;
}

/* Status colors */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-status.is-success {
  color: #6ee7b7 !important;
  background: rgba(16, 185, 129, 0.14) !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-status.is-danger {
  color: #fda4af !important;
  background: rgba(244, 63, 94, 0.14) !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt .fut-jwt-status.is-warning {
  color: #fcd34d !important;
  background: rgba(245, 158, 11, 0.14) !important;
}


/* ==========================================================================
   FREE USE TOOL — JWT EDUCATIONAL GUIDE
   Professional reading experience for the SEO/education content.
   Scoped to .fut-jwt-seo-content to avoid affecting the decoder UI.
   ========================================================================== */

.fut-jwt-seo-content {
  --guide-ink: #0f172a;
  --guide-heading: #0b1f3a;
  --guide-muted: #5b6b7f;
  --guide-border: #dbe5ef;
  --guide-border-soft: #e8eef5;
  --guide-surface: #ffffff;
  --guide-surface-soft: #f7faff;
  --guide-blue: #0284c7;
  --guide-blue-deep: #075985;
  --guide-blue-soft: #e8f6ff;
  --guide-green: #059669;
  --guide-green-soft: #ecfdf5;
  --guide-amber: #b45309;
  --guide-amber-soft: #fff8e8;

  width: min(1120px, calc(100% - 40px));
  margin: 64px auto 80px;
  color: var(--guide-ink);
  font-size: 1rem;
  line-height: 1.82;
  letter-spacing: -0.005em;
}

/* Guide introduction */

.fut-jwt-seo-intro {
  position: relative;
  margin: 0 0 52px;
  padding: clamp(28px, 4vw, 46px);
  overflow: hidden;
  border: 1px solid #cfe6f5;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(14,165,233,.13), transparent 30%),
    linear-gradient(135deg, #f8fcff 0%, #ffffff 58%, #f3faff 100%);
  box-shadow:
    0 24px 60px rgba(15, 23, 42, .07),
    0 4px 18px rgba(14, 165, 233, .05);
}

.fut-jwt-seo-intro::after {
  position: absolute;
  right: -70px;
  bottom: -95px;
  width: 220px;
  height: 220px;
  content: "";
  border: 1px solid rgba(2,132,199,.10);
  border-radius: 50%;
  box-shadow:
    0 0 0 24px rgba(2,132,199,.035),
    0 0 0 48px rgba(2,132,199,.025);
  pointer-events: none;
}

.fut-jwt-seo-intro .fut-jwt-kicker {
  margin-bottom: 8px;
  color: var(--guide-blue-deep);
}

.fut-jwt-seo-intro h2 {
  max-width: 850px;
  margin: 0 0 15px;
  color: var(--guide-heading);
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  line-height: 1.15;
  letter-spacing: -.045em;
}

.fut-jwt-seo-intro p {
  max-width: 850px;
  margin: 0;
  color: var(--guide-muted);
  font-size: 1rem;
  line-height: 1.8;
}

/* Main guide sections */

.fut-jwt-seo-content > section:not(.fut-jwt-faq):not(.fut-jwt-related):not(.fut-jwt-final-cta) {
  position: relative;
  margin: 0 0 42px;
  padding: 0 0 42px;
  border-bottom: 1px solid var(--guide-border-soft);
}

.fut-jwt-seo-content > section:not(.fut-jwt-faq):not(.fut-jwt-related):not(.fut-jwt-final-cta) h2 {
  position: relative;
  margin: 0 0 15px;
  padding-left: 18px;
  color: var(--guide-heading);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.28;
  letter-spacing: -.035em;
}

.fut-jwt-seo-content > section:not(.fut-jwt-faq):not(.fut-jwt-related):not(.fut-jwt-final-cta) h2::before {
  position: absolute;
  top: .22em;
  bottom: .22em;
  left: 0;
  width: 4px;
  content: "";
  border-radius: 99px;
  background: linear-gradient(180deg, #38bdf8, #0369a1);
}

.fut-jwt-seo-content h3 {
  margin: 27px 0 8px;
  color: #17324d;
  font-size: 1.08rem;
  line-height: 1.4;
  letter-spacing: -.018em;
}

.fut-jwt-seo-content p {
  max-width: 900px;
  margin: 0 0 16px;
  color: var(--guide-muted);
}

.fut-jwt-seo-content p:last-child {
  margin-bottom: 0;
}

.fut-jwt-seo-content strong {
  color: #1e3a56;
  font-weight: 800;
}

.fut-jwt-seo-content code {
  display: inline-block;
  padding: .08em .38em;
  border: 1px solid #d7e5f0;
  border-radius: 6px;
  background: #f2f7fb;
  color: #075985;
  font: 700 .88em/1.4 var(--fut-mono, "SFMono-Regular", Consolas, monospace);
}

/* Lists */

.fut-jwt-seo-content ul,
.fut-jwt-seo-content ol {
  max-width: 900px;
  margin: 18px 0 20px;
  padding: 18px 22px 18px 44px;
  border: 1px solid var(--guide-border);
  border-radius: 16px;
  background: var(--guide-surface-soft);
}

.fut-jwt-seo-content li {
  margin: 8px 0;
  padding-left: 4px;
  color: #52667b;
}

.fut-jwt-seo-content ul li::marker {
  color: var(--guide-blue);
}

.fut-jwt-seo-content ol li::marker {
  color: var(--guide-blue-deep);
  font-weight: 900;
}

/* Make important learning sections easier to scan */



/* FAQ */

/* =========================================================
   JWT GUIDE — PROFESSIONAL FAQ
   ========================================================= */

.fut-jwt-faq {
  margin: 64px 0 56px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fut-jwt-faq > h2 {
  margin: 0 0 28px;
  color: var(--guide-heading);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.045em;
}

.fut-jwt-faq > h2::after {
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 14px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #38bdf8,
    #0369a1
  );
}


/* Individual FAQ cards */

.fut-jwt-faq article {
  position: relative;

  margin: 0 0 12px;
  padding: 0 !important;

  border: 1px solid #263852 !important;
  border-radius: 16px;

  background: #111a2c;

  overflow: hidden;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}


/* Remove divider from the old design */

.fut-jwt-faq article:last-child {
  margin-bottom: 0;
  border-bottom: 1px solid #263852 !important;
}


/* Question */

.fut-jwt-faq article h3 {
  display: flex;
  align-items: center;

  min-height: 64px;

  margin: 0 !important;
  padding: 18px 52px 18px 20px;

  color: #e8f0fa;

  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.45;

  cursor: pointer;

  transition:
    color 180ms ease,
    background 180ms ease;
}


/* Blue indicator */

.fut-jwt-faq article h3::before {
  flex: 0 0 auto;

  width: 7px;
  height: 7px;

  margin: 0 12px 0 0;

  content: "";

  border-radius: 50%;

  background: #38bdf8;

  box-shadow:
    0 0 0 4px rgba(56, 189, 248, 0.10);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}


/* Answer */

.fut-jwt-faq article p {
  margin: 0 !important;
  padding: 0 20px 20px 39px !important;

  color: #9cafc4;

  font-size: 0.9rem;
  line-height: 1.75;
}


/* Hover */

.fut-jwt-faq article:hover {
  transform: translateY(-2px);

  border-color: #31506f !important;

  background: #141f33;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.18);
}

.fut-jwt-faq article:hover h3 {
  color: #f5f9ff;
}

.fut-jwt-faq article:hover h3::before {
  transform: scale(1.15);

  box-shadow:
    0 0 0 5px rgba(56, 189, 248, 0.13);
}


/* =========================================================
   FAQ — DARK MODE
   ========================================================= */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-faq article {
  border-color: #263852 !important;
  background: #111a2c;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-faq article:hover {
  border-color: #31506f !important;
  background: #142039;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-faq article h3 {
  color: #e8f0fa;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-faq article p {
  color: #9cafc4 !important;
}

/* Related topic section */

.fut-jwt-related {
  margin: 44px 0 !important;
  padding: 28px 30px 30px !important;
  border: 1px solid var(--guide-border) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .04) !important;
}

.fut-jwt-related h2 {
  margin: 0 0 12px;
  color: var(--guide-heading);
  font-size: 1.55rem;
  line-height: 1.25;
}

.fut-jwt-related p {
  max-width: 900px;
  margin: 0 0 22px;
  color: var(--guide-muted);
}

.fut-jwt-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.fut-jwt-topic-grid span {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 8px 11px;
  border: 1px solid #dce8f2;
  border-radius: 10px;
  background: #f8fbfe;
  color: #38536d;
  font-size: .74rem;
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.fut-jwt-topic-grid span:hover {
  transform: translateY(-2px);
  border-color: #a8d9f3;
  background: #eef9ff;
  box-shadow: 0 8px 20px rgba(2,132,199,.08);
}

/* Final CTA */

.fut-jwt-final-cta {
  position: relative;
  margin: 46px 0 0 !important;
  padding: clamp(26px, 4vw, 38px) !important;
  overflow: hidden;
  border: 1px solid #0b75ad !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(125,211,252,.20), transparent 32%),
    linear-gradient(135deg, #0b3150, #075985 58%, #0369a1) !important;
  color: #ffffff !important;
  box-shadow:
    0 22px 50px rgba(3,105,161,.18) !important;
}

.fut-jwt-final-cta::before {
  position: absolute;
  top: -90px;
  right: -50px;
  width: 210px;
  height: 210px;
  content: "";
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.035);
}

.fut-jwt-final-cta h2 {
  position: relative;
  margin: 0 0 10px;
  color: #ffffff !important;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.25;
  letter-spacing: -.03em;
}

.fut-jwt-final-cta p {
  position: relative;
  max-width: 850px;
  margin: 0;
  color: #d9efff !important;
  font-size: .95rem;
  line-height: 1.75;
}

.fut-jwt-final-cta strong {
  color: #ffffff !important;
}

/* Reading rhythm */

.fut-jwt-seo-content section + section {
  scroll-margin-top: 90px;
}

.fut-jwt-seo-content a {
  color: var(--guide-blue-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.fut-jwt-seo-content a:hover {
  color: #0369a1;
}

/* Dark mode */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-seo-content {
  --guide-ink: #e7f1fb;
  --guide-heading: #f4f9ff;
  --guide-muted: #9cafc4;
  --guide-border: #293d58;
  --guide-border-soft: #22344d;
  --guide-surface: #101d30;
  --guide-surface-soft: #132238;
  --guide-blue: #38bdf8;
  --guide-blue-deep: #7dd3fc;
  --guide-blue-soft: rgba(56,189,248,.12);
  --guide-green: #34d399;
  --guide-green-soft: rgba(52,211,153,.12);
  --guide-amber: #fbbf24;
  --guide-amber-soft: rgba(251,191,36,.12);
  color: #e7f1fb !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-seo-intro {
  border-color: #294662 !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(56,189,248,.12), transparent 30%),
    linear-gradient(145deg, #102137, #0e1a2b 62%, #102238) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-seo-intro h2,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-seo-content h2,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-seo-content h3,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-seo-content strong {
  color: #f1f7ff !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-seo-content p,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-seo-content li,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.theme-dark,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-faq article p {
  color: #9cafc4 !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-seo-content > section:not(.fut-jwt-faq):not(.fut-jwt-related):not(.fut-jwt-final-cta) {
  border-bottom-color: #22344d !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.theme-dark,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-seo-content > section:nth-of-type(3),
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body[data-theme="dark"],
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-seo-content > section:nth-of-type(6),
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-seo-content > section:nth-of-type(9),
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.theme-dark,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-related,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-faq {
  border-color: #293d58 !important;
  background: linear-gradient(145deg, #101d30, #0e1a2b) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.20) !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body[data-theme="dark"],
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-seo-content code {
  border-color: #2e4965 !important;
  background: #132238 !important;
  color: #8ddcff !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-seo-content ul,
:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-seo-content ol {
  border-color: #293d58 !important;
  background: #132238 !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-faq article {
  border-bottom-color: #22344d !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-topic-grid span {
  border-color: #2a425d !important;
  background: #132238 !important;
  color: #bcd0e4 !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  html.dark,
  body.dark,
  html.dark-mode,
  body.dark-mode,
  html.theme-dark,
  body.theme-dark,
  .dark,
  [data-theme="dark"]
) .fut-jwt-topic-grid span:hover {
  border-color: #3c6a8d !important;
  background: #172b43 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.20);
}

/* Tablet */

@media (max-width: 900px) {
  .fut-jwt-seo-content {
    width: min(100% - 32px, 820px);
    margin-top: 50px;
    margin-bottom: 64px;
  }

  .fut-jwt-topic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile */

@media (max-width: 640px) {
  .fut-jwt-seo-content {
    width: min(100% - 24px, 100%);
    margin-top: 38px;
    margin-bottom: 48px;
    font-size: .94rem;
    line-height: 1.72;
  }

  .fut-jwt-seo-intro {
    margin-bottom: 34px;
    padding: 24px 20px;
    border-radius: 18px;
  }

  .fut-jwt-seo-intro h2 {
    font-size: 1.55rem;
  }

  .fut-jwt-seo-content > section:not(.fut-jwt-faq):not(.fut-jwt-related):not(.fut-jwt-final-cta) {
    margin-bottom: 32px;
    padding-bottom: 32px;
  }

  .fut-jwt-seo-content > section:not(.fut-jwt-faq):not(.fut-jwt-related):not(.fut-jwt-final-cta) h2 {
    padding-left: 14px;
    font-size: 1.3rem;
  }

  .fut-jwt-seo-content h3 {
    font-size: 1rem;
  }

  .fut-jwt-seo-content ul,
  .fut-jwt-seo-content ol {
    padding: 15px 16px 15px 34px;
    border-radius: 13px;
  }

  .fut-jwt-seo-content > section:nth-of-type(3),
  .fut-jwt-seo-content > section:nth-of-type(6),
  .fut-jwt-seo-content > section:nth-of-type(9) {
    padding: 22px 18px 23px;
    border-radius: 16px;
  }

  .fut-jwt-faq,
  .fut-jwt-related {
    margin-top: 34px !important;
    padding: 22px 18px !important;
    border-radius: 17px !important;
  }

  .fut-jwt-faq article {
    padding: 18px 0;
  }

  .fut-jwt-faq article p {
    padding-left: 0;
  }

  .fut-jwt-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .fut-jwt-topic-grid span {
    min-height: 40px;
    padding: 8px 7px;
    font-size: .68rem;
  }

  .fut-jwt-final-cta {
    margin-top: 34px !important;
    padding: 24px 20px !important;
    border-radius: 17px !important;
  }
}

@media (max-width: 390px) {
  .fut-jwt-topic-grid {
    grid-template-columns: 1fr;
  }

  .fut-jwt-seo-intro h2 {
    font-size: 1.4rem;
  }
}