/* ============================================================
   blog_detail.css — MagicTradeBot Blog Post Page
   Matches every CSS class referenced in BlogDetail.cshtml
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --bg:        #0d0f14;
  --bg2:       #12151c;
  --bg3:       #181c26;
  --border:    #232840;
  --border2:   #2c3352;
  --text:      #c8cfe0;
  --text2:     #7a85a3;
  --text3:     #4a5270;
  --head:      #e8edf8;
  --b1:        #3d6cff;
  --b2:        #2a4dd6;
  --b3:        #8ab4ff;
  --b4:        #5d8fff;
  --green:     #2dbd7e;
  --green-bg:  #0b2a1e;
  --green-bd:  #1a5040;
  --amber:     #e8a830;
  --amber-bg:  #241a06;
  --amber-bd:  #503a10;
  --cyan:      #38c8d8;
  --cyan-bg:   #061a1f;
  --cyan-bd:   #104050;
  --red:       #e05060;
  --red-bg:    #200a10;
  --red-bd:    #4a1520;
  --purple:    #a070f8;
  --code-bg:   #0a0c12;
  --code-bd:   #1e2438;
  --radius:    6px;
  --radius-lg: 10px;
}

/* ── Page layout ────────────────────────────────────────────── */
.page-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 32px 100px;
}

/* Two-column grid: article + sidebar */
.post-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 40px;
  align-items: start;   /* REQUIRED for position:sticky to work in grid */
}

@media (max-width: 960px) {
  .post-layout {
    grid-template-columns: 1fr;
  }
  .blog-sidebar {
    display: none;
  }
}

/* Not-found state spans both columns */
.art-not-found {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 80px 32px;
  color: var(--text2);
  font-size: 16px;
  text-align: center;
}

.art-not-found i {
  font-size: 48px;
  color: var(--text3);
}

/* ── Article header ─────────────────────────────────────────── */
.article-head {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

/* Breadcrumb */
.bc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--text3);
  margin-bottom: 18px;
}

.bc a {
  color: var(--text2);
  text-decoration: none;
  transition: color .15s;
}

.bc a:hover { color: var(--b4); }

.bc-sep {
  color: var(--text3);
  margin: 0 2px;
}

.bc span:last-child {
  color: var(--text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 340px;
}

/* Meta row: category + date */
.art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.art-cat,
.art-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text2);
}

.art-cat i  { color: var(--b1); }
.art-date i { color: var(--text3); }

/* H1 */
.art-h1 {
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 700;
  color: var(--head);
  line-height: 1.22;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}

/* Lead text below title */
.art-lead {
  font-size: 15.5px;
  color: var(--text2);
  line-height: 1.7;
  font-weight: 300;
}

/* ── Cover image ────────────────────────────────────────────── */
.art-cover {
  margin-bottom: 32px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.art-cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
}

/* ── Article body ───────────────────────────────────────────── */
.art-body {
  color: var(--text);
  font-size: 15px;
  line-height: 1.78;
}

.art-body h2 {
  font-size: 21px;
  font-weight: 700;
  color: var(--head);
  letter-spacing: -.02em;
  margin: 48px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 24px;
}

.art-body h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--head);
  margin: 28px 0 10px;
  letter-spacing: -.01em;
  scroll-margin-top: 24px;
}

.art-body h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  margin: 20px 0 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: 'IBM Plex Mono', monospace;
}

.art-body p  { margin-bottom: 16px; }
.art-body strong { color: var(--head); font-weight: 600; }
.art-body em     { color: var(--text2); font-style: italic; }
.art-body a  { color: var(--b4); text-decoration: none; }
.art-body a:hover { text-decoration: underline; }

.art-body ul,
.art-body ol {
  padding-left: 22px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Inline code */
.art-body code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--b3);
  background: rgba(61,108,255,.1);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Code blocks */
.art-body pre {
  background: var(--code-bg);
  border: 1px solid var(--code-bd);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  overflow-x: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: #aabcd8;
  margin: 18px 0;
}

.art-body pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Blockquote / section-lead */
.art-body blockquote,
.art-body .section-lead {
  border-left: 3px solid var(--b1);
  padding: 8px 0 8px 18px;
  margin: 0 0 20px;
  color: var(--text2);
  font-size: 14.5px;
  font-style: italic;
}

/* Tables */
.art-body .table-wrap {
  overflow-x: auto;
  margin: 20px 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.art-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.art-body thead tr { background: var(--bg3); }

.art-body thead th {
  padding: 10px 16px;
  text-align: left;
  color: var(--text2);
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.art-body tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}

.art-body tbody tr:last-child { border-bottom: none; }
.art-body tbody tr:hover { background: var(--bg3); }

.art-body td {
  padding: 10px 16px;
  color: var(--text);
  vertical-align: top;
}

/* Callouts (used in article body content) */
.art-body .callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid;
  margin: 22px 0;
  font-size: 14px;
  line-height: 1.65;
}

.art-body .callout > i { margin-top: 2px; flex-shrink: 0; font-size: 15px; }
.art-body .callout .c-body { flex: 1; }

.art-body .c-tip    { background: var(--green-bg); border-color: var(--green-bd); color: #68d8a8; }
.art-body .c-tip > i { color: var(--green); }
.art-body .c-info   { background: var(--cyan-bg);  border-color: var(--cyan-bd);  color: #6cc8d8; }
.art-body .c-info > i { color: var(--cyan); }
.art-body .c-warn   { background: var(--amber-bg); border-color: var(--amber-bd); color: #c89838; }
.art-body .c-warn > i { color: var(--amber); }
.art-body .c-danger { background: var(--red-bg);   border-color: var(--red-bd);   color: #d07080; }
.art-body .c-danger > i { color: var(--red); }

/* Change lists (used inside article body) */
.art-body .change-section { margin: 14px 0 22px; }

.art-body .change-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.art-body .change-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  transition: background .12s;
}

.art-body .change-item:last-child { border-bottom: none; }
.art-body .change-item:hover { background: var(--bg3); }
.art-body .change-item > span:last-child { color: var(--text); flex: 1; line-height: 1.6; }

.change-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

.cb-new  { background: rgba(45,189,126,.15); color: var(--green); border: 1px solid rgba(45,189,126,.3); }
.cb-imp  { background: rgba(61,108,255,.15); color: var(--b3);    border: 1px solid rgba(61,108,255,.3); }
.cb-perf { background: rgba(56,200,216,.15); color: var(--cyan);  border: 1px solid rgba(56,200,216,.3); }
.cb-fix  { background: rgba(224,80,96,.15);  color: var(--red);   border: 1px solid rgba(224,80,96,.3);  }
.cb-arch { background: rgba(160,112,248,.15);color: var(--purple);border: 1px solid rgba(160,112,248,.3);}

/* Feature grid (2-col cards inside article) */
.art-body .feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0;
}

@media (max-width: 600px) {
  .art-body .feature-grid { grid-template-columns: 1fr; }
}

.art-body .feature-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  transition: border-color .15s;
}

.art-body .feature-card:hover { border-color: var(--border2); }
.art-body .feature-card .fc-icon  { font-size: 18px; margin-bottom: 8px; display: block; }
.art-body .feature-card .fc-title { font-size: 13px; font-weight: 600; color: var(--head); margin-bottom: 6px; }
.art-body .feature-card .fc-desc  { font-size: 13px; color: var(--text2); line-height: 1.6; }

/* Numbered step list */
.art-body .step-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.art-body .step-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.art-body .step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: var(--b1);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 1px;
}

.art-body .step-text { font-size: 14px; color: var(--text); line-height: 1.65; }

/* ASCII/code diagram */
.art-body .diagram {
  background: var(--code-bg);
  border: 1px solid var(--code-bd);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  overflow-x: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
  color: #6888b0;
  margin: 18px 0;
}

/* Code block with header bar */
.art-body .code-block {
  background: var(--code-bg);
  border: 1px solid var(--code-bd);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 18px 0;
}

.art-body .code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: var(--bg3);
  border-bottom: 1px solid var(--code-bd);
}

.art-body .code-lang {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--text3);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.art-body .code-block pre {
  border: none;
  border-radius: 0;
  margin: 0;
}

/* Horizontal rule */
.art-body hr,
.art-body .divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 38px 0;
}

/* Badges (exchange status etc.) */
.badge-new {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  background: rgba(45,189,126,.15);
  color: var(--green);
  border: 1px solid rgba(45,189,126,.3);
  padding: 1px 7px;
  border-radius: 4px;
  margin-right: 4px;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-orig {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  background: rgba(61,108,255,.12);
  color: var(--b3);
  border: 1px solid rgba(61,108,255,.2);
  padding: 1px 7px;
  border-radius: 4px;
  margin-right: 4px;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Article footer ─────────────────────────────────────────── */
.art-footer {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

/* Nav button — back to blog */
.art-nav { margin-bottom: 28px; }

.art-nav-btn {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}

.art-nav-btn:hover {
  border-color: var(--b1);
  background: rgba(61,108,255,.06);
}

.nav-dir {
  font-size: 11.5px;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--head);
}

/* Share row */
.art-share { margin-top: 24px; }

.art-share-label {
  font-size: 12.5px;
  color: var(--text3);
  display: block;
  margin-bottom: 10px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}

.share-btn:hover {
  border-color: var(--b1);
  color: var(--b3);
  background: rgba(61,108,255,.08);
}

/* ── Shared card component ──────────────────────────────────── */
.sb-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
}

.sb-card-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
  font-family: 'IBM Plex Mono', monospace;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.sb-card-title i { color: var(--b1); font-size: 12px; }

/* Tag / category pill */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  display: inline-block;
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 20px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  text-decoration: none;
  transition: border-color .12s, color .12s;
}

.tag:hover {
  border-color: var(--b1);
  color: var(--b3);
}

.tag-active {
  border-color: var(--b1);
  color: var(--b3);
  background: rgba(61,108,255,.1);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.blog-sidebar {
  position: sticky;
  top: 24px;          /* distance from viewport top while scrolling */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* TOC list (populated by JS) */
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.toc-list li { }

/* Indent h3 items */
.toc-list li.toc-sub .toc-link {
  padding-left: 20px;
  font-size: 12px;
  color: var(--text3);
}

.toc-link {
  display: block;
  font-size: 12.5px;
  color: var(--text2);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 5px;
  line-height: 1.45;
  transition: background .12s, color .12s;
}

.toc-link:hover,
.toc-link.active {
  background: rgba(61,108,255,.1);
  color: var(--b3);
}

/* Sidebar CTA card */
.sb-cta { border-color: var(--border2); }

.sb-cta-text {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 14px;
}

.btn-sb-dl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--b1);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background .15s;
}

.btn-sb-dl:hover { background: var(--b2); color: #fff; }