.guide-main { padding-top: 1.5rem; }
.guide-main > * + * { margin-top: 1.25rem; }
.guide-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1rem; }
.guide-breadcrumb { font-size: .95rem; color: var(--muted); }
.guide-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0; }
.guide-breadcrumb li:not(:last-child)::after { content: ">"; margin-left: .35rem; color: var(--muted); }
.guide-breadcrumb a { color: var(--brand); font-weight: 700; text-decoration: none; }
.guide-breadcrumb a:hover,
.guide-breadcrumb a:focus { text-decoration: underline; }
.guide-hero,
.guide-panel,
.guide-card,
.guide-cta,
.example { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.guide-hero { padding: clamp(1rem, 3vw, 1.35rem); display: flex; flex-direction: column; gap: .75rem; }
.guide-hero h1 { margin: 0; max-width: 980px; font-size: clamp(1.65rem, 4vw, 2.55rem); line-height: 1.08; color: var(--text); letter-spacing: 0; }
.guide-hero p { margin: 0; color: var(--muted); }
.guide-hero h1 i,
.guide-hero p i,
.guide-panel h2 i,
.guide-panel h3 i,
.guide-cta h2 i,
.guide-card h3 i,
.guide-list a i,
.guide-toc a i { color: var(--brand); margin-right: .35rem; }
.guide-search { position: relative; max-width: 760px; margin-top: .35rem; }
.guide-search label { display: block; font-weight: 800; margin-bottom: .35rem; color: var(--text); }
.guide-search-box { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .72rem .85rem; box-shadow: var(--shadow); }
.guide-search-box i { color: var(--brand); flex-shrink: 0; }
.guide-search-box input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; outline: 0; }
.guide-search-box input::placeholder { color: var(--muted); opacity: 1; }
.guide-search-status { min-height: 1.25rem; margin: .35rem 0 0; color: var(--muted); font-size: .92rem; }
.guide-search-results { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin: .25rem 0 0; padding: .4rem; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); max-height: 26rem; overflow: auto; }
.guide-search-results[hidden] { display: none; }
.guide-search-results li + li { border-top: 1px solid var(--border); }
.guide-search-results a { display: block; padding: .7rem .75rem; border-radius: calc(var(--radius) - 6px); color: var(--text); text-decoration: none; }
.guide-search-results a:hover,
.guide-search-results a:focus { background: var(--brand-soft); text-decoration: none; }
.guide-search-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; font-weight: 800; }
.guide-search-result-head span:first-child { display: inline-flex; align-items: flex-start; gap: .4rem; }
.guide-search-result-type { flex-shrink: 0; color: var(--brand); font-size: .82rem; }
.guide-search-results p { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }
.guide-kicker,
.guide-card .count { align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--border); border-radius: 999px; background: var(--brand-soft); color: var(--brand); padding: .25rem .65rem; font-size: .9rem; font-weight: 800; }
.guide-kicker::before { content: "\f29a"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.guide-panel,
.example { padding: 1rem; }
.guide-panel h2,
.example h2,
.guide-cta h2 { margin-top: 0; color: var(--text); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: .85rem; margin-top: .85rem; }
.guide-card { padding: .9rem; background: var(--surface-2, var(--surface)); min-width: 0; }
.guide-card h2,
.guide-card h3 { margin: .45rem 0 .35rem; font-size: 1rem; }
.guide-card p { color: var(--muted); margin: .35rem 0 0; }
.guide-card a,
.guide-list a,
.guide-panel a,
.example a { color: var(--brand); font-weight: 700; text-decoration: none; }
.guide-card a:hover,
.guide-list a:hover,
.guide-panel a:hover,
.example a:hover,
.guide-card a:focus,
.guide-list a:focus,
.guide-panel a:focus,
.example a:focus { text-decoration: underline; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.guide-layout > div { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.guide-toc { position: sticky; top: 1rem; }
.guide-toc ul { margin: 0; padding-left: 1.2rem; }
.guide-list { columns: 2; column-gap: 2rem; }
.guide-list li { break-inside: avoid; margin: .35rem 0; }
.guide-icon-list { list-style: none; padding: 0; margin: .85rem 0 0; display: grid; gap: .65rem; }
.guide-icon-list li { display: flex; align-items: flex-start; gap: .6rem; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 6px); background: var(--surface-2, var(--surface)); }
.guide-icon-list li i { color: var(--brand); margin-top: .2rem; flex-shrink: 0; }
.guide-method-list { display: grid; gap: .65rem; padding-left: 0; margin: .85rem 0 0; list-style: none; counter-reset: guide-step; }
.guide-method-list li { counter-increment: guide-step; display: flex; align-items: flex-start; gap: .6rem; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 6px); background: var(--surface-2, var(--surface)); }
.guide-method-list li::before { content: counter(guide-step); display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 999px; color: #fff; background: var(--brand); font-weight: 800; flex-shrink: 0; }
.guide-method-list li i { color: var(--brand); margin-top: .2rem; flex-shrink: 0; }
.bad-example { border-left: 6px solid var(--critical, #b42318); }
.good-example { border-left: 6px solid var(--success, #157347); }
.guide-main pre {
    max-width: min(100%, 56rem);
    margin: .9rem 0 0;
    padding: 1rem;
    overflow: auto;
    white-space: pre-wrap;
    background: #0f172a;
    color: #e6edf7;
    border: 1px solid #26334a;
    border-radius: .75rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.guide-main code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.guide-main pre code {
    display: block;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow-wrap: normal;
    word-break: normal;
}
.guide-cta { padding: 1rem; border-left: 5px solid var(--brand); display: block; }
.guide-cta p { color: var(--muted); }
.guide-cta a { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--brand); border-radius: var(--radius); background: var(--brand); color: #fff; padding: .62rem .9rem; font-weight: 800; text-decoration: none; }
.guide-cta a::before { content: "\f002"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
@media (max-width: 860px) {
    .guide-layout { grid-template-columns: 1fr; }
    .guide-toc { position: static; }
    .guide-list { columns: 1; }
}