.help-page { min-height: 100vh; }
.help-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: end; padding: 78px 5vw 54px; border-bottom: 1px solid rgba(68, 220, 230, .18); background: linear-gradient(120deg, rgba(22, 189, 199, .09), transparent 48%), #03161c; }
.help-hero h1 { max-width: 760px; margin: 0 0 18px; color: #f4fdff; font-size: clamp(46px, 6vw, 88px); line-height: .95; letter-spacing: 0; }
.help-hero p { max-width: 680px; margin: 0; color: #a9c4ca; font-size: 19px; line-height: 1.65; }
.guide-search { display: grid; gap: 10px; color: #7fb1ba; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.guide-search input { width: 100%; min-height: 58px; border: 1px solid #20515b; border-radius: 6px; padding: 0 18px; background: #071f27; color: white; font: inherit; font-size: 16px; outline: none; }
.guide-search input:focus { border-color: #2dd3d0; box-shadow: 0 0 0 3px rgba(45, 211, 208, .12); }
.help-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 44px; max-width: 1320px; margin: 0 auto; padding: 48px 30px 90px; }
.help-sidebar { position: sticky; top: 24px; align-self: start; display: grid; gap: 4px; padding: 20px 0; border-right: 1px solid #183a43; }
.help-sidebar strong { margin: 0 18px 12px; color: #f5feff; }
.help-sidebar a { padding: 11px 18px; border-left: 3px solid transparent; color: #8eb0b7; font-size: 14px; text-decoration: none; }
.help-sidebar a:hover, .help-sidebar a.is-active { border-color: #26cec8; color: white; background: rgba(38, 206, 200, .07); }
.guide-content { min-width: 0; display: grid; gap: 24px; }
.guide-section { scroll-margin-top: 24px; padding: 34px; border: 1px solid #17424b; border-radius: 8px; background: #061b22; box-shadow: 0 18px 50px rgba(0, 0, 0, .16); }
.guide-section[hidden] { display: none; }
.section-heading { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 26px; }
.section-heading > span { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border: 1px solid #2abdbb; color: #4ce3dc; font-weight: 900; }
.section-heading h2 { margin: 0 0 8px; color: #f4fdff; font-size: clamp(25px, 3vw, 38px); letter-spacing: 0; }
.section-heading p, .guide-copy { margin: 0; color: #95b7be; line-height: 1.65; }
.steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: guide-step; }
.steps li { counter-increment: guide-step; display: grid; grid-template-columns: 34px 180px 1fr auto; gap: 16px; align-items: center; min-height: 72px; border-top: 1px solid #14343c; }
.steps li::before { content: counter(guide-step); color: #31d5cf; font-weight: 900; }
.steps b, .flow-grid b, .command-table b, .directory b { color: #f1fbfd; }
.steps span, .flow-grid p, .command-table span { color: #8daeb5; line-height: 1.5; }
.steps a { color: #39d7d2; font-weight: 800; }
.command { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; margin-top: 14px; border: 1px solid #20515b; border-radius: 5px; padding: 10px 10px 10px 14px; background: #031219; }
.command code { overflow: auto; color: #9af4ef; font-family: Consolas, monospace; white-space: nowrap; }
.command button { min-width: 58px; border: 0; border-radius: 4px; padding: 9px 12px; background: #123a43; color: #dffcff; font-weight: 800; cursor: pointer; }
.command button:hover { background: #1b6970; }
.command button.copied { background: #14968f; }
.command-large { margin: 0 0 24px; padding: 16px; }
.note, .fallback { margin-top: 24px; border-left: 4px solid #ff9d3d; padding: 16px 18px; background: rgba(255, 157, 61, .08); color: #bad0d5; }
.note b, .fallback b { display: block; margin-bottom: 4px; color: #ffd19d; }
.flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.flow-grid article { padding: 20px; border: 1px solid #17424b; background: #08232b; }
.preserve-strip { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0; color: #9bc0c7; }
.preserve-strip b { color: white; margin-right: 6px; }
.preserve-strip span { border: 1px solid #1b5058; padding: 7px 10px; font-size: 13px; }
details { border-top: 1px solid #17404a; padding: 16px 0; color: #93b4ba; }
summary { color: #e9fbfc; font-weight: 800; cursor: pointer; }
details p { line-height: 1.6; }
.hub-map { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 22px; }
.hub-map span { min-height: 72px; display: grid; place-items: center; border: 1px solid #1c4b55; background: #09242c; color: #dffbfc; font-size: 14px; font-weight: 800; text-align: center; }
.fallback { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; }
.fallback .command { grid-column: 1 / -1; width: min(650px, 100%); }
.command-table { display: grid; }
.command-table article { display: grid; grid-template-columns: 1fr 240px; gap: 24px; align-items: center; min-height: 84px; border-top: 1px solid #163740; }
.command-table article div { display: grid; gap: 5px; }
.command-table code { justify-self: end; color: #78e8e2; font-family: Consolas, monospace; }
.directory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.directory article { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; min-height: 130px; padding: 18px; border: 1px solid #18434d; background: #082129; }
.directory b { width: 100%; margin-bottom: 8px; }
.directory code { padding: 6px 8px; background: #03151b; color: #79e6e0; font-size: 12px; }
.empty-search { display: grid; gap: 8px; padding: 50px; border: 1px dashed #28606a; text-align: center; color: #8caeb5; }
.empty-search strong { color: white; font-size: 22px; }
@media (max-width: 900px) {
  .help-hero { grid-template-columns: 1fr; padding-top: 54px; }
  .help-layout { grid-template-columns: 1fr; padding-inline: 18px; }
  .help-sidebar { position: static; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid #183a43; }
  .help-sidebar strong { display: none; }
  .help-sidebar a { flex: 0 0 auto; border-left: 0; border-bottom: 3px solid transparent; }
  .flow-grid, .directory { grid-template-columns: 1fr; }
  .hub-map { grid-template-columns: repeat(2, 1fr); }
  .steps li { grid-template-columns: 28px 1fr; padding: 16px 0; }
  .steps li span, .steps li a, .steps li .command { grid-column: 2; }
}
@media (max-width: 620px) {
  .guide-section { padding: 24px 18px; }
  .help-hero { padding-inline: 20px; }
  .command-table article { grid-template-columns: 1fr; padding: 16px 0; gap: 10px; }
  .command-table code { justify-self: start; }
  .hub-map { grid-template-columns: 1fr 1fr; }
}