:root{--smb-acc:#2563eb;--smb-line:rgba(127,127,127,.28);--smb-soft:rgba(127,127,127,.08);--smb-r:12px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
[id^="smb-h"],.entry-content h2[id],.entry-content h3[id]{scroll-margin-top:84px}

.smb-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:99999;pointer-events:none}
.smb-progress i{display:block;height:100%;width:0;background:var(--smb-acc);transition:width .1s linear}

.smb-top{margin-block-end:1.5rem}
.smb-meta{font-size:.9em;opacity:.75;margin-block-end:1rem;display:flex;gap:.5rem;flex-wrap:wrap}
.smb-tldr,.smb-toc{background:var(--smb-soft);border:1px solid var(--smb-line);border-radius:var(--smb-r);padding:1rem 1.25rem;margin-block-end:1rem}
.smb-tldr{border-inline-start:4px solid var(--smb-acc)}
.smb-tldr ul{margin:.5rem 0 0;padding-inline-start:1.2rem}
.smb-tldr li{margin-block:.35rem}
.smb-toc ol,.smb-panel ol{list-style:none;margin:.5rem 0 0;padding:0}
.smb-toc li,.smb-panel li{margin:.3rem 0}
.smb-l3{padding-inline-start:1.2rem;font-size:.95em}
.smb-toc a,.smb-panel a{text-decoration:none;color:inherit;opacity:.85;border-inline-start:2px solid transparent;padding-inline-start:.5rem;display:inline-block}
.smb-toc a:hover,.smb-panel a:hover{opacity:1}
.smb-toc a.on,.smb-panel a.on{color:var(--smb-acc);border-inline-start-color:var(--smb-acc);opacity:1;font-weight:600}

.smb-fab{position:fixed;inset-block-end:20px;inset-inline-start:20px;width:46px;height:46px;border-radius:50%;border:0;background:var(--smb-acc);color:#fff;font-size:20px;cursor:pointer;z-index:99998;box-shadow:0 4px 14px rgba(0,0,0,.25);display:none}
.smb-fab.show{display:block}
.smb-panel{position:fixed;inset-block-end:76px;inset-inline-start:20px;max-width:min(88vw,340px);max-height:60vh;overflow:auto;background:Canvas;color:CanvasText;border:1px solid var(--smb-line);border-radius:var(--smb-r);padding:1rem;z-index:99998;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.smb-panel[hidden]{display:none}

.smb-faq{margin-block:2rem}
.smb-faq details{border:1px solid var(--smb-line);border-radius:var(--smb-r);margin-block:.5rem;background:var(--smb-soft)}
.smb-faq summary{cursor:pointer;padding:.85rem 1rem;font-weight:600;list-style-position:inside}
.smb-faq details>div{padding:0 1rem 1rem}
.smb-faq details[open] summary{color:var(--smb-acc)}

.smb-related{margin-block:2.5rem}
.smb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.smb-card{display:flex;flex-direction:column;gap:.4rem;text-decoration:none;color:inherit;border:1px solid var(--smb-line);border-radius:var(--smb-r);overflow:hidden;background:var(--smb-soft);position:relative;transition:transform .15s,box-shadow .15s}
.smb-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.smb-thumb img{display:block;width:100%;height:130px;object-fit:cover}
.smb-ct{padding:.4rem .85rem 0;font-weight:600;line-height:1.5}
.smb-cm{padding:0 .85rem .85rem;font-size:.82em;opacity:.65}
.smb-card.smb-read{opacity:.6}
.smb-badge{position:absolute;inset-block-start:8px;inset-inline-start:8px;background:rgba(0,0,0,.65);color:#fff;font-size:.72em;padding:2px 8px;border-radius:99px}

.smb-toast{position:fixed;inset-inline:16px;inset-block-end:18px;margin-inline:auto;max-width:460px;display:flex;align-items:center;gap:.6rem;background:#111827;color:#fff;padding:.7rem 1rem;border-radius:var(--smb-r);z-index:100000;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.smb-toast span{flex:1}
.smb-toast button{border:0;border-radius:8px;padding:.35rem .8rem;cursor:pointer;background:var(--smb-acc);color:#fff}
.smb-toast .smb-x{background:transparent;font-size:18px;padding:0 .3rem}

.smb-tip{position:absolute;z-index:100000;display:flex;gap:2px;background:#111827;border-radius:10px;padding:4px;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.smb-tip[hidden]{display:none}
.smb-tip button,.smb-tip a{background:transparent;border:0;color:#fff;padding:.35rem .7rem;cursor:pointer;font-size:.85rem;text-decoration:none;border-radius:6px}
.smb-tip button:hover,.smb-tip a:hover{background:rgba(255,255,255,.15)}

.smb-pre{position:relative}
.smb-copy{position:absolute;inset-block-start:6px;inset-inline-end:6px;font-size:.75rem;border:0;border-radius:6px;padding:.2rem .6rem;background:rgba(127,127,127,.35);color:inherit;cursor:pointer;opacity:0;transition:opacity .15s}
.smb-pre:hover .smb-copy,.smb-copy:focus{opacity:1}

.smb-suggest{position:absolute;z-index:100000;background:Canvas;color:CanvasText;border:1px solid var(--smb-line);border-radius:var(--smb-r);box-shadow:0 12px 30px rgba(0,0,0,.2);overflow:hidden}
.smb-suggest[hidden]{display:none}
.smb-suggest a{display:flex;justify-content:space-between;gap:.6rem;padding:.65rem .9rem;text-decoration:none;color:inherit;border-block-end:1px solid var(--smb-line)}
.smb-suggest a:last-child{border:0}
.smb-suggest a:hover,.smb-suggest a.on{background:var(--smb-soft)}
.smb-suggest small{opacity:.6;white-space:nowrap}
.smb-none{padding:.8rem 1rem;opacity:.7}
