/* Base64 guide hub and articles */
.base64-guide-hub-page .guide-hub { margin-top: 12px; padding-top: 30px; }
.base64-learning-path { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0 36px; counter-reset:base64-step; }
.base64-learning-path a { position:relative; display:flex; min-height:86px; align-items:center; padding:18px 16px 18px 48px; color:var(--text-color); background:var(--tool-bg); border:1px solid var(--border-color); border-radius:8px; }
.base64-learning-path a::before { counter-increment:base64-step; content:counter(base64-step); position:absolute; left:15px; display:grid; width:24px; height:24px; place-items:center; color:#fff; background:var(--primary-color); border-radius:50%; font-size:12px; font-weight:700; }
.base64-learning-path a:hover { border-color:var(--primary-color); text-decoration:none; }
.base64-topic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.base64-topic-card { display:flex; flex-direction:column; gap:8px; padding:22px; color:var(--text-color); background:var(--panel-bg); border:1px solid var(--border-color); border-radius:9px; transition:border-color .2s,transform .2s; }
.base64-topic-card:hover { border-color:var(--primary-color); text-decoration:none; transform:translateY(-2px); }
.base64-topic-card .topic-label { align-self:flex-start; padding:3px 8px; color:var(--primary-color); background:rgba(0,86,179,.08); border-radius:999px; font-size:11px; font-weight:700; }
.base64-topic-card strong { font-size:17px; line-height:1.5; }
.base64-topic-card span:last-child { color:var(--text-muted); font-size:13px; line-height:1.65; }
.base64-tool-callout { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:42px 0; padding:24px; background:linear-gradient(135deg,rgba(0,86,179,.08),rgba(0,86,179,.02)); border:1px solid rgba(0,86,179,.24); border-radius:9px; }
.base64-tool-callout p { margin:5px 0 0; color:var(--text-muted); }
.base64-tool-callout a { flex:0 0 auto; padding:11px 20px; color:#fff; background:var(--primary-color); border-radius:999px; font-weight:700; }
.base64-tool-callout a:hover { color:#fff; text-decoration:none; }
.base64-guide-article .base64-table-scroll { width:100%; margin:20px 0 32px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.base64-guide-article .base64-table { width:100%; min-width:560px; border:1px solid var(--border-color); border-collapse:separate; border-spacing:0; border-radius:8px; background:var(--panel-bg); font-size:14px; }
.base64-guide-article .base64-table th,.base64-guide-article .base64-table td { padding:11px 13px; border-right:1px solid var(--border-color); border-bottom:1px solid var(--border-color); text-align:left; vertical-align:middle; }
.base64-guide-article .base64-table th { background:var(--tool-bg); white-space:nowrap; }
.base64-guide-article .base64-table tr > :last-child { border-right:0; }
.base64-guide-article .base64-table tbody tr:last-child > * { border-bottom:0; }
.base64-guide-article .process-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:20px 0 32px; counter-reset:flow-step; }
.base64-guide-article .process-flow div { position:relative; padding:42px 12px 15px; text-align:center; background:var(--tool-bg); border:1px solid var(--border-color); border-radius:8px; font-size:14px; }
.base64-guide-article .process-flow div::before { counter-increment:flow-step; content:counter(flow-step); position:absolute; top:12px; left:50%; translate:-50% 0; display:grid; width:22px; height:22px; place-items:center; color:#fff; background:var(--primary-color); border-radius:50%; font-size:11px; font-weight:700; }
.base64-guide-article .calculation-steps { margin:20px 0 32px; padding:0; list-style:none; counter-reset:calc-step; }
.base64-guide-article .calculation-steps li { position:relative; margin:0 0 12px; padding:16px 18px 16px 54px; background:var(--tool-bg); border:1px solid var(--border-color); border-radius:8px; }
.base64-guide-article .calculation-steps li::before { counter-increment:calc-step; content:counter(calc-step); position:absolute; top:15px; left:16px; display:grid; width:25px; height:25px; place-items:center; color:#fff; background:var(--primary-color); border-radius:50%; font-size:12px; font-weight:700; }
.base64-guide-article .result-box,.base64-guide-article .warning-box { margin:24px 0; padding:18px 20px; border-radius:8px; }
.base64-guide-article .result-box { background:rgba(40,167,69,.08); border:1px solid rgba(40,167,69,.35); }
.base64-guide-article .warning-box { color:var(--warning-text); background:var(--warning-bg); border:1px solid var(--warning-border); }
@media (max-width:760px){.base64-topic-grid{grid-template-columns:1fr}.base64-tool-callout{align-items:flex-start;flex-direction:column}.base64-guide-article .process-flow{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.base64-learning-path,.base64-guide-article .process-flow{grid-template-columns:1fr}.base64-guide-article .base64-table{font-size:13px}}