/* Unicode guide hub and articles */
.unicode-guide-hub-page .guide-hub { margin-top: 12px; padding-top: 30px; }
.unicode-learning-path { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0 36px; counter-reset:unicode-step; }
.unicode-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; }
.unicode-learning-path a::before { counter-increment:unicode-step; content:counter(unicode-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; }
.unicode-learning-path a:hover { border-color:var(--primary-color); text-decoration:none; }
.unicode-topic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.unicode-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; }
.unicode-topic-card:hover { border-color:var(--primary-color); text-decoration:none; transform:translateY(-2px); }
.unicode-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; }
.unicode-topic-card strong { font-size:17px; line-height:1.5; }
.unicode-topic-card span:last-child { color:var(--text-muted); font-size:13px; line-height:1.65; }
.unicode-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; }
.unicode-tool-callout p { margin:5px 0 0; color:var(--text-muted); }
.unicode-tool-callout a { flex:0 0 auto; padding:11px 20px; color:#fff; background:var(--primary-color); border-radius:999px; font-weight:700; }
.unicode-tool-callout a:hover { color:#fff; text-decoration:none; }
.unicode-guide-article .unicode-table-scroll { width:100%; margin:20px 0 32px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.unicode-guide-article .unicode-table { width:100%; min-width:620px; border:1px solid var(--border-color); border-collapse:separate; border-spacing:0; border-radius:8px; background:var(--panel-bg); font-size:14px; }
.unicode-guide-article .unicode-table th,.unicode-guide-article .unicode-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; }
.unicode-guide-article .unicode-table th { background:var(--tool-bg); white-space:nowrap; }
.unicode-guide-article .unicode-table tr>:last-child { border-right:0; }
.unicode-guide-article .unicode-table tbody tr:last-child>* { border-bottom:0; }
.unicode-guide-article .formula-box { margin:20px 0; padding:20px; overflow-x:auto; background:var(--tool-bg); border:1px solid var(--border-color); border-left:5px solid var(--primary-color); border-radius:8px; }
.unicode-guide-article .formula-box code { display:block; min-width:max-content; padding:8px 0; background:transparent; font-size:16px; text-align:center; }
.unicode-guide-article .point-list { margin:20px 0 32px; padding:0; list-style:none; counter-reset:unicode-point; }
.unicode-guide-article .point-list 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; }
.unicode-guide-article .point-list li::before { counter-increment:unicode-point; content:counter(unicode-point); 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; }
.unicode-guide-article .result-box { margin:24px 0; padding:18px 20px; background:rgba(40,167,69,.08); border:1px solid rgba(40,167,69,.35); border-radius:8px; }
.unicode-guide-article .warning-box { margin:24px 0; padding:18px 20px; color:var(--warning-text); background:var(--warning-bg); border:1px solid var(--warning-border); border-radius:8px; }
@media(max-width:760px){.unicode-topic-grid{grid-template-columns:1fr}.unicode-tool-callout{align-items:flex-start;flex-direction:column}}
@media(max-width:480px){.unicode-learning-path{grid-template-columns:1fr}.unicode-guide-article .unicode-table{font-size:13px}}