/* ─── article-style.css — shared by all technical articles ─── */
:root {
  --bg:#0a0c0f; --bg2:#0f1217; --bg3:#141820;
  --surface:#1a1f2a; --border:#1e2535; --border-bright:#2a3548;
  --text:#e8eaf0; --text-muted:#6b7a99; --text-dim:#3d4a63;
  --accent:#00d4ff; --accent2:#ff6b35; --accent3:#7fff6b; --accent4:#c792ea; --accent5:#ffcb6b;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-weight: 300; line-height: 1.7; }
body::before {
  content: ''; position: fixed; inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
                    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px; opacity: 0.3; pointer-events: none; z-index: 0;
}

nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; height: 64px; background: rgba(10,12,15,0.9); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
.nav-logo { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--accent); letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; }
.nav-back { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--text-muted); text-decoration: none; letter-spacing: 0.08em; transition: color 0.2s; }
.nav-back:hover { color: var(--accent); }

.article-wrap { max-width: 860px; margin: 0 auto; padding: 100px 48px 80px; position: relative; z-index: 1; }
.article-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
.meta-tag { font-family: 'Space Mono', monospace; font-size: 10px; padding: 4px 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.mt-blue   { color: var(--accent);  background: rgba(0,212,255,0.08);  border: 1px solid rgba(0,212,255,0.2); }
.mt-red    { color: var(--accent2); background: rgba(255,107,53,0.08); border: 1px solid rgba(255,107,53,0.2); }
.mt-green  { color: var(--accent3); background: rgba(127,255,107,0.08); border: 1px solid rgba(127,255,107,0.2); }
.mt-purple { color: var(--accent4); background: rgba(199,146,234,0.08); border: 1px solid rgba(199,146,234,0.2); }
.mt-yellow { color: var(--accent5); background: rgba(255,203,107,0.08); border: 1px solid rgba(255,203,107,0.2); }
.meta-info { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--text-dim); letter-spacing: 0.08em; }

h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 6vw, 72px); letter-spacing: 0.04em; line-height: 1; color: var(--text); margin-bottom: 16px; }
h1 em.blue   { color: var(--accent);  font-style: normal; }
h1 em.red    { color: var(--accent2); font-style: normal; }
h1 em.green  { color: var(--accent3); font-style: normal; }
h1 em.purple { color: var(--accent4); font-style: normal; }
h1 em.yellow { color: var(--accent5); font-style: normal; }

.subtitle { font-size: 17px; color: var(--text-muted); max-width: 600px; line-height: 1.8; margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--border); }
h2 { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 0.05em; color: var(--text); margin: 48px 0 20px; display: flex; align-items: center; gap: 12px; }
h2::before { content: ''; width: 3px; height: 28px; flex-shrink: 0; }
h2.h-blue::before   { background: var(--accent); }
h2.h-red::before    { background: var(--accent2); }
h2.h-green::before  { background: var(--accent3); }
h2.h-purple::before { background: var(--accent4); }
h2.h-yellow::before { background: var(--accent5); }
h3 { font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin: 28px 0 12px; color: var(--accent); }

p { font-size: 15px; color: var(--text-muted); line-height: 1.9; margin-bottom: 16px; }
p strong { color: var(--text); font-weight: 500; }
p code, li code { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--accent); background: var(--bg3); padding: 1px 6px; }

.code-block { background: var(--bg3); border: 1px solid var(--border); padding: 24px 28px; margin: 24px 0; overflow-x: auto; position: relative; }
.code-block.cb-blue   { border-left: 2px solid var(--accent); }
.code-block.cb-red    { border-left: 2px solid var(--accent2); }
.code-block.cb-green  { border-left: 2px solid var(--accent3); }
.code-block.cb-purple { border-left: 2px solid var(--accent4); }
.code-block.cb-yellow { border-left: 2px solid var(--accent5); }
.code-label { position: absolute; top: 0; right: 0; font-family: 'Space Mono', monospace; font-size: 9px; color: var(--text-dim); background: var(--border); padding: 3px 10px; letter-spacing: 0.1em; text-transform: uppercase; }
pre { font-family: 'Space Mono', monospace; font-size: 12px; line-height: 1.8; color: var(--text-muted); }
.kw { color: #c792ea; } .cm { color: var(--text-dim); font-style: italic; } .num { color: var(--accent2); }
.fn { color: var(--accent); } .str { color: var(--accent3); } .def { color: #ffcb6b; }

.diagram { background: var(--surface); border: 1px solid var(--border-bright); padding: 32px; margin: 28px 0; position: relative; overflow: hidden; }
.diagram::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; opacity: 0.5; }
.diagram.d-blue::before   { background: linear-gradient(90deg, transparent, var(--accent),  transparent); }
.diagram.d-red::before    { background: linear-gradient(90deg, transparent, var(--accent2), transparent); }
.diagram.d-green::before  { background: linear-gradient(90deg, transparent, var(--accent3), transparent); }
.diagram.d-purple::before { background: linear-gradient(90deg, transparent, var(--accent4), transparent); }
.diagram.d-yellow::before { background: linear-gradient(90deg, transparent, var(--accent5), transparent); }
.diagram-title { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 20px; color: var(--accent); }

.callout { border-left: 2px solid var(--accent3); padding: 16px 20px; background: rgba(127,255,107,0.04); margin: 24px 0; }
.callout-label { font-family: 'Space Mono', monospace; font-size: 9px; color: var(--accent3); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 6px; }
.callout p { color: var(--text-muted); font-size: 14px; margin: 0; }

.warn { border-left: 2px solid var(--accent2); padding: 16px 20px; background: rgba(255,107,53,0.04); margin: 24px 0; }
.warn-label { font-family: 'Space Mono', monospace; font-size: 9px; color: var(--accent2); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 6px; }
.warn p { color: var(--text-muted); font-size: 14px; margin: 0; }

.concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.concept-card { background: var(--surface); border: 1px solid var(--border); padding: 20px; position: relative; overflow: hidden; }
.concept-card::after { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: var(--accent); }
.concept-card:nth-child(2)::after { background: var(--accent2); }
.concept-card:nth-child(3)::after { background: var(--accent3); }
.concept-card:nth-child(4)::after { background: var(--accent4); }
.concept-label { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.concept-val { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.concept-val code { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--accent); background: var(--bg3); padding: 1px 5px; }

/* TABLES */
.t-data { width: 100%; border-collapse: collapse; font-family: 'Space Mono', monospace; font-size: 11px; margin: 16px 0; }
.t-data th { background: var(--bg3); color: var(--text-dim); padding: 10px 14px; text-align: left; border: 1px solid var(--border); letter-spacing: 0.08em; text-transform: uppercase; font-size: 9px; }
.t-data td { padding: 10px 14px; border: 1px solid var(--border); color: var(--text-muted); }
.t-data tr:nth-child(even) td { background: rgba(255,255,255,0.01); }
.t-data td.acc { color: var(--accent); }
.t-data td.acc2 { color: var(--accent2); }
.t-data td.acc3 { color: var(--accent3); }
.t-data td.acc4 { color: var(--accent4); }
.t-data td.acc5 { color: var(--accent5); }
.t-data td.dim { color: var(--text-dim); }

/* FOOTER */
.page-footer { max-width: 860px; margin: 0 auto; padding: 32px 48px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; font-family: 'Space Mono', monospace; }
.page-footer .pf-left { font-size: 11px; color: var(--text-dim); }
.page-footer .pf-nav { display: flex; gap: 24px; }
.page-footer .pf-nav a { font-size: 10px; color: var(--text-dim); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s; }
.page-footer .pf-nav a:hover { color: var(--accent); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-bright); }

/* ── LANGUAGE SWITCHER (injected by article-lang.js) ── */
.art-lang-switcher { display: flex; gap: 4px; align-items: center; }
.art-lang-btn { font-family: 'Space Mono', monospace; font-size: 10px; padding: 4px 8px; background: transparent; border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; letter-spacing: 0.08em; transition: all 0.2s; }
.art-lang-btn:hover { border-color: var(--accent); color: var(--accent); }
.art-lang-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(0,212,255,0.08); }

@media (max-width: 640px) {
  .article-wrap { padding: 88px 20px 48px; }
  .concept-grid { grid-template-columns: 1fr; }
  nav { padding: 0 20px; }
  .page-footer { padding: 20px; }
}