:root {
    --guide-navy: #00194a;
    --guide-blue: #0878f9;
    --guide-ink: #16233b;
    --guide-muted: #60708a;
    --guide-border: #dbe3ef;
    --guide-surface: #ffffff;
    --guide-bg: #f4f7fb;
    --guide-shell: 1440px;
}

html { scroll-behavior: smooth; }
.guide-body { min-width: 320px; margin: 0; color: var(--guide-ink); background: var(--guide-bg); font-family: var(--app-font-sans, "Segoe UI", Arial, sans-serif); }
.guide-shell { width: min(calc(100% - 3rem), var(--guide-shell)); margin-inline: auto; }
.guide-header { position: sticky; top: 0; z-index: 1050; background: var(--guide-navy); box-shadow: 0 3px 16px rgba(0, 25, 74, .2); }
.guide-header-inner { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 1rem; }
.guide-brand { display: flex; min-width: 0; align-items: center; gap: 1rem; color: #fff; text-decoration: none; }
.guide-brand img { width: auto; height: 44px; filter: brightness(0) invert(1); }
.guide-brand span { padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.35); font-family: var(--app-heading-font, Georgia, serif); font-size: .9rem; font-weight: 800; line-height: 1.15; }
.guide-header-actions { display: flex; align-items: center; gap: .55rem; }
.guide-header-link { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .85rem; border: 1px solid rgba(255,255,255,.35); border-radius: 7px; color: #fff; font-weight: 750; text-decoration: none; }
.guide-header-link:hover, .guide-header-link:focus-visible { color: #fff; background: rgba(255,255,255,.12); }
.guide-header-link-primary { border-color: var(--guide-blue); background: var(--guide-blue); }

.guide-hero { overflow: hidden; color: #fff; background: radial-gradient(circle at 80% 15%, rgba(36,128,255,.38), transparent 30%), linear-gradient(135deg, #00194a, #063b83); }
.guide-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; min-height: 260px; padding-block: 3.2rem; }
.guide-kicker { display: block; margin-bottom: .7rem; color: #8ec4ff; font-size: .75rem; font-weight: 850; letter-spacing: .12em; }
.guide-hero h1 { margin: 0; font-family: var(--app-heading-font, Georgia, serif); font-size: clamp(2.2rem, 5vw, 3.9rem); font-weight: 850; line-height: 1; }
.guide-hero p { max-width: 760px; margin: 1rem 0 0; color: rgba(255,255,255,.82); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.7; }
.guide-hero-card { display: flex; min-width: 245px; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); }
.guide-hero-card-icon { width: 48px; height: 48px; flex: 0 0 48px; padding: 12px; border-radius: 12px; color: var(--guide-navy); background: #fff; }
.guide-hero-card div { display: grid; gap: .15rem; }
.guide-hero-card strong { font-size: 1.15rem; }
.guide-hero-card span { color: rgba(255,255,255,.75); font-size: .78rem; }

.guide-toolbar { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(280px, 1fr) auto auto; align-items: center; gap: 1rem; margin-top: -28px; padding: 1rem; border: 1px solid var(--guide-border); border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(0,25,74,.1); }
.guide-search { position: relative; display: flex; min-width: 0; align-items: center; }
.guide-search > i { position: absolute; left: 1rem; color: #71819a; font-size: 1.25rem; }
.guide-search input { width: 100%; min-height: 48px; padding: .7rem 4.8rem .7rem 2.9rem; border: 1px solid #cbd6e5; border-radius: 9px; color: var(--guide-ink); outline: none; }
.guide-search input:focus { border-color: var(--guide-blue); box-shadow: 0 0 0 3px rgba(8,120,249,.12); }
.guide-search kbd { position: absolute; right: .75rem; padding: .25rem .45rem; border: 1px solid #d8e0eb; border-bottom-width: 2px; border-radius: 5px; color: #5d6b80; background: #f6f8fb; font-family: inherit; font-size: .65rem; }
.guide-role-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.guide-role-filters button { display: inline-flex; min-height: 40px; align-items: center; gap: .35rem; padding: .5rem .7rem; border: 1px solid #cad6e6; border-radius: 7px; color: #354761; background: #fff; font-weight: 750; }
.guide-role-filters button:hover, .guide-role-filters button:focus-visible { border-color: var(--guide-blue); color: var(--guide-blue); }
.guide-role-filters button.is-active { border-color: var(--guide-navy); color: #fff; background: var(--guide-navy); }
.guide-result-count { margin: 0; color: var(--guide-muted); font-size: .76rem; white-space: nowrap; }
.guide-result-count strong { color: var(--guide-navy); font-size: 1rem; }

.guide-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: start; gap: 1.5rem; padding-block: 2rem 4rem; }
.guide-toc-sticky { position: sticky; top: 96px; max-height: calc(100vh - 116px); overflow: auto; padding: 1rem; border: 1px solid var(--guide-border); border-radius: 12px; background: #fff; scrollbar-width: thin; }
.guide-toc-sticky > strong { display: block; margin-bottom: .7rem; color: var(--guide-navy); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.guide-toc nav { display: grid; gap: .18rem; }
.guide-toc a { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: center; padding: .47rem .45rem; border-left: 2px solid transparent; border-radius: 5px; color: #51627a; font-size: .75rem; line-height: 1.3; text-decoration: none; }
.guide-toc a span { color: #8a98ab; font-size: .65rem; font-weight: 850; }
.guide-toc a:hover, .guide-toc a:focus-visible, .guide-toc a.is-active { border-left-color: var(--guide-blue); color: var(--guide-blue); background: #edf5ff; }
.guide-toc a.is-active span { color: var(--guide-blue); }

.guide-content { display: grid; min-width: 0; gap: 1.25rem; }
.guide-topic { scroll-margin-top: 96px; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--guide-border); border-radius: 14px; background: var(--guide-surface); box-shadow: 0 7px 22px rgba(0,25,74,.045); }
.guide-topic[hidden] { display: none; }
.guide-topic > header { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e5eaf2; }
.guide-topic-number { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 12px; color: var(--guide-blue); background: #eaf4ff; font-weight: 900; }
.guide-topic header div { min-width: 0; }
.guide-topic header small { color: var(--guide-blue); font-size: .65rem; font-weight: 850; letter-spacing: .08em; }
.guide-topic h2 { margin: .12rem 0 0; color: var(--guide-navy); font-family: var(--app-heading-font, Georgia, serif); font-size: clamp(1.25rem, 3vw, 1.65rem); font-weight: 850; }
.guide-topic > p { margin: 1.1rem 0 0; color: #465975; font-size: .9rem; line-height: 1.75; }
.guide-topic code { padding: .12rem .32rem; border-radius: 4px; color: #004eaa; background: #edf5ff; }
.guide-topic a { color: #006bdc; }

.guide-steps, .guide-checklist { display: grid; gap: .65rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.guide-steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: start; gap: .7rem; padding: .75rem; border: 1px solid #e1e8f2; border-radius: 9px; background: #f9fbfe; color: #475a74; font-size: .84rem; line-height: 1.55; }
.guide-steps li::before { content: none; }
.guide-steps b { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: #fff; background: var(--guide-blue); }
.guide-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-checklist li { position: relative; padding: .7rem .8rem .7rem 2.2rem; border: 1px solid #e2e8f1; border-radius: 8px; color: #495b74; background: #fbfcfe; font-size: .83rem; line-height: 1.5; }
.guide-checklist li::before { position: absolute; top: .75rem; left: .75rem; display: grid; width: 1.05rem; height: 1.05rem; place-items: center; border-radius: 50%; content: "✓"; color: #fff; background: #17865b; font-size: .65rem; font-weight: 900; }

.guide-note { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem; margin-top: 1.1rem; padding: .9rem 1rem; border: 1px solid #bdd7f5; border-left: 4px solid #1976dc; border-radius: 9px; color: #244f83; background: #eff6ff; }
.guide-note > i { font-size: 1.25rem; }
.guide-note div { display: grid; gap: .18rem; }
.guide-note strong { color: inherit; font-size: .82rem; }
.guide-note span { color: inherit; font-size: .79rem; line-height: 1.55; opacity: .92; }
.guide-note.is-warning { border-color: #ead493; border-left-color: #d59b00; color: #715400; background: #fff9e7; }
.guide-note.is-success { border-color: #a8d9c1; border-left-color: #168254; color: #146440; background: #edf9f3; }
.guide-note.is-danger { border-color: #edb7bd; border-left-color: #cc3343; color: #842833; background: #fff1f2; }

.guide-figure { margin: 1.25rem 0 0; overflow: hidden; border: 1px solid #d9e2ee; border-radius: 10px; background: #eef2f7; }
.guide-figure a { display: block; overflow: auto; }
.guide-figure img { display: block; width: 100%; height: auto; transition: transform .2s ease; }
.guide-figure a:hover img { transform: scale(1.004); }
.guide-figure figcaption { padding: .7rem .85rem; border-top: 1px solid #d9e2ee; color: #65738a; background: #fff; font-size: .72rem; }
.guide-figure.is-document img { max-height: 760px; object-fit: contain; object-position: top; background: #e5eaf1; }

.guide-score-table { margin-top: 1.1rem; overflow-x: auto; border: 1px solid #d9e2ee; border-radius: 9px; }
.guide-score-table table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .8rem; }
.guide-score-table th, .guide-score-table td { padding: .68rem .8rem; border-bottom: 1px solid #e4e9f1; text-align: left; }
.guide-score-table th { color: #5c6d84; background: #f2f6fb; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.guide-score-table tbody tr:last-child td { border-bottom: 0; }
.guide-score-table td:last-child { color: var(--guide-navy); font-weight: 800; white-space: nowrap; }

.guide-empty { padding: 4rem 1.5rem; border: 1px dashed #bcc9da; border-radius: 14px; color: var(--guide-muted); background: #fff; text-align: center; }
.guide-empty > i { color: #7c91ad; font-size: 2.5rem; }
.guide-empty h2 { margin: .7rem 0 .25rem; color: var(--guide-navy); }
.guide-empty p { margin: 0; }
.guide-empty button { margin-top: 1rem; padding: .6rem .9rem; border: 0; border-radius: 7px; color: #fff; background: var(--guide-navy); font-weight: 750; }

.guide-back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: var(--guide-blue); box-shadow: 0 8px 24px rgba(0,59,130,.28); font-size: 1.4rem; }
.guide-back-to-top[hidden] { display: none; }
.guide-footer { border-top: 1px solid var(--guide-border); background: #fff; }
.guide-footer-inner { display: flex; min-height: 92px; align-items: center; gap: 1rem; }
.guide-footer img { width: auto; height: 34px; }
.guide-footer div > div { display: grid; gap: .1rem; padding-left: 1rem; border-left: 1px solid #dbe2ec; }
.guide-footer strong { color: var(--guide-navy); font-size: .78rem; }
.guide-footer span { color: var(--guide-muted); font-size: .68rem; }

@media (max-width: 1100px) {
    .guide-toolbar { grid-template-columns: minmax(260px, 1fr) auto; }
    .guide-result-count { grid-column: 1 / -1; }
    .guide-layout { grid-template-columns: 230px minmax(0, 1fr); }
}

@media (max-width: 820px) {
    .guide-shell { width: min(calc(100% - 2rem), var(--guide-shell)); }
    .guide-hero-grid { grid-template-columns: 1fr; min-height: auto; }
    .guide-hero-card { width: fit-content; }
    .guide-toolbar { grid-template-columns: 1fr; }
    .guide-role-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .15rem; }
    .guide-role-filters button { flex: 0 0 auto; }
    .guide-result-count { grid-column: auto; }
    .guide-layout { grid-template-columns: 1fr; }
    .guide-toc-sticky { position: static; max-height: none; }
    .guide-toc nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .guide-shell { width: min(calc(100% - 1.25rem), var(--guide-shell)); }
    .guide-header-inner { min-height: 62px; }
    .guide-brand img { height: 34px; }
    .guide-brand span { display: none; }
    .guide-header-link { min-height: 36px; padding: 0 .6rem; font-size: .68rem; }
    .guide-header-link i { display: none; }
    .guide-hero-grid { padding-block: 2.3rem 3.5rem; }
    .guide-hero-card { min-width: 0; width: 100%; }
    .guide-toolbar { margin-top: -24px; }
    .guide-search kbd { display: none; }
    .guide-search input { padding-right: .8rem; }
    .guide-role-filters { overflow: visible; flex-wrap: wrap; }
    .guide-toc nav { grid-template-columns: 1fr; }
    .guide-checklist { grid-template-columns: 1fr; }
    .guide-topic { padding: 1rem; border-radius: 10px; }
    .guide-topic > header { align-items: flex-start; }
    .guide-topic-number { width: 40px; height: 40px; flex-basis: 40px; }
    .guide-steps li { grid-template-columns: 1.75rem minmax(0, 1fr); }
    .guide-steps b { width: 1.75rem; height: 1.75rem; }
    .guide-footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; }
    .guide-footer div > div { padding-left: 0; border-left: 0; }
}

@media print {
    .guide-header, .guide-toolbar, .guide-toc, .guide-back-to-top, .guide-footer { display: none !important; }
    .guide-body { background: #fff; }
    .guide-hero { color: #000; background: #fff; }
    .guide-hero-grid { min-height: 0; padding: 1rem 0; }
    .guide-hero p, .guide-kicker { color: #333; }
    .guide-hero-card { display: none; }
    .guide-layout { display: block; padding: 0; }
    .guide-topic { break-inside: avoid; margin-bottom: 1rem; box-shadow: none; }
    .guide-topic[hidden] { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .guide-figure img { transition: none; }
}