:root { --authority-ink: #10233d; --authority-muted: #53647a; --authority-accent: #0f766e; --authority-border: #d8e1ea; --authority-soft: #f3f7fa; }
.authority-page { margin: 0; color: var(--authority-ink); background: var(--authority-soft); font-family: "Manrope", "Hind", Arial, sans-serif; }
.authority-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.authority-hero { padding: 28px 0 64px; color: #fff; background: linear-gradient(140deg, #071523, #15456f 62%, #0f766e); }
.authority-hero h1 { max-width: 900px; margin: 22px 0 16px; color: #fff; font-size: clamp(2.35rem, 6vw, 4.8rem); line-height: 1.02; }
.authority-hero p { max-width: 780px; color: #dce8f4; font-size: 1.16rem; line-height: 1.65; }
.authority-kicker { display: inline-block; color: #54e0d1; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.authority-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 38px; padding: 0; list-style: none; }
.authority-breadcrumb li:not(:last-child)::after { margin-left: 8px; content: "/"; color: #93a9bd; }
.authority-breadcrumb a { color: #dce8f4; }
.authority-main { padding: 56px 0 80px; }
.authority-main section { margin-bottom: 56px; }
.authority-main h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.authority-main p, .authority-main li { line-height: 1.7; }
.authority-intro { max-width: 850px; font-size: 1.1rem; }
.authority-card-grid, .resource-grid, .recommendation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.authority-card, .resource-card, .recommendation-card, .authority-callout { padding: 26px; border: 1px solid var(--authority-border); border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(16,35,61,.06); }
.authority-card h3, .resource-card h2, .resource-card h3, .recommendation-card h3 { margin-top: 0; }
.authority-card ul, .resource-card ul { padding-left: 1.25rem; }
.authority-label { color: var(--authority-accent); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.roadmap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 24px; padding: 0; list-style: none; counter-reset: phase; }
.roadmap li { position: relative; padding: 20px 15px; border: 1px solid #bcd1d8; border-radius: 12px; background: #fff; font-weight: 800; text-align: center; counter-increment: phase; }
.roadmap li::before { display: block; margin-bottom: 7px; color: var(--authority-accent); content: "0" counter(phase); font-size: .78rem; letter-spacing: .08em; }
.roadmap li:not(:last-child)::after { position: absolute; z-index: 2; top: 50%; right: -13px; content: "›"; color: var(--authority-accent); font-size: 1.5rem; transform: translateY(-50%); }
.resource-meta { color: var(--authority-muted); }
.preview { max-height: 230px; padding: 16px; overflow: auto; border-radius: 10px; background: #10233d; color: #eef7f6; font: .88rem/1.55 Consolas, monospace; white-space: pre-wrap; }
.authority-button { display: inline-block; margin-top: 12px; padding: 11px 16px; border-radius: 8px; color: #fff; background: var(--authority-accent); font-weight: 800; text-decoration: none; }
.authority-button:hover, .authority-button:focus { background: #0b5f59; color: #fff; }
.authority-link-list { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 0; list-style: none; }
.selector-form fieldset { margin: 0 0 22px; padding: 20px; border: 1px solid var(--authority-border); border-radius: 12px; }
.selector-form legend { padding: 0 6px; font-weight: 800; }
.selector-form label { display: block; margin: 10px 0; line-height: 1.5; }
.selector-form select { width: 100%; min-height: 48px; padding: 10px; border: 1px solid #aab8c6; border-radius: 8px; background: #fff; font: inherit; }
.selector-form input { margin-right: 8px; }
.recommendation-grid { margin-top: 22px; }
.recommendation-card { padding: 20px; box-shadow: none; }
.recommendation-card p:last-child { color: var(--authority-muted); }
.version-badge { display: inline-block; margin-right: 8px; padding: 5px 9px; border-radius: 999px; background: #dff4ef; color: #0b5f59; font-weight: 800; }
@media (max-width: 800px) {
  .roadmap { grid-template-columns: 1fr; }
  .roadmap li:not(:last-child)::after { top: auto; right: 50%; bottom: -20px; transform: rotate(90deg) translateY(-50%); }
  .authority-card-grid, .resource-grid, .recommendation-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .authority-shell { width: min(100% - 24px, 1120px); }
  .authority-card, .resource-card, .authority-callout { padding: 20px; }
  .authority-hero h1 { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }