.tv-context-help {
  --help-bg: var(--white, #fff);
  --help-text: var(--gray-900, #25252d);
  --help-muted: var(--gray-600, #666672);
  --help-line: var(--gray-200, #e6e6ec);
  --help-soft: var(--surface-hover, #f5f5f8);
  --help-accent: var(--gray-900, #252525);
  position: fixed; inset: 0 0 0 auto; margin: 0; width: 396px; max-width: 100vw;
  height: 100dvh; max-height: none; box-sizing: border-box; padding: 0;
  border: 0; border-left: 1px solid var(--help-line); z-index: 1000000;
  display: flex; flex-direction: column; background: var(--help-bg); color: var(--help-text);
  font: 13px/1.65 var(--font-ui, 'Segoe UI', sans-serif); text-align: left;
  box-shadow: -12px 0 40px rgb(0 0 0 / 5%);
  animation: tv-help-enter .18s ease-out;
}
.tv-context-help[hidden] { display: none; }
html[data-theme="dark"] .tv-context-help {
  --help-bg: #232323; --help-text: #eeeeee; --help-muted: #b1b1b1;
  --help-line: #393939; --help-soft: #2d2d2d; --help-accent: #eeeeee;
}
.tv-context-help * { box-sizing: border-box; }
.tv-help-toolbar { height: 65px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-bottom: 1px solid var(--help-line); }
.tv-help-label { flex: 1; font-size: 13px; font-weight: 600; }
.tv-help-icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--help-muted); background: none; border: 0; border-radius: 6px; cursor: pointer; font: 22px/1 sans-serif; }
.tv-help-icon:hover { color: var(--help-text); background: var(--help-soft); }
.tv-help-content { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 28px 28px 32px; }
.tv-help-eyebrow { color: var(--help-accent); font-size: 11px; font-weight: 600; margin: 0 0 10px; }
.tv-context-help h2 { font-size: 23px; font-weight: 600; line-height: 1.3; letter-spacing: -.5px; margin: 0 0 13px; }
.tv-context-help h2:focus { outline: none; }
.tv-help-summary { margin: 0 0 27px; color: var(--help-muted); }
.tv-context-help h3 { font-size: 12px; font-weight: 650; margin: 0 0 18px; }
.tv-help-steps { list-style: none; padding: 0; margin: 0 0 24px; counter-reset: help-step; }
.tv-help-steps li { position: relative; padding: 0 0 19px 35px; counter-increment: help-step; }
.tv-help-steps li:last-child { padding-bottom: 0; }
.tv-help-steps li::before { content: counter(help-step); position: absolute; left: 0; top: 0; width: 23px; height: 23px; display: grid; place-items: center; font-size: 11px; border: 1px solid var(--help-line); border-radius: 50%; color: var(--help-muted); }
.tv-help-steps strong { font-size: 12px; font-weight: 600; }
.tv-help-steps p { margin: 4px 0 0; color: var(--help-muted); font-size: 12px; }
.tv-help-tip { padding: 15px 16px; border-radius: 8px; background: var(--help-soft); margin: 0 0 24px; font-size: 12px; }
.tv-help-tip strong { font-weight: 600; }
.tv-help-tip p { color: var(--help-muted); margin: 4px 0 0; }
.tv-help-guide { display: flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid var(--help-line); border-radius: 7px; color: var(--help-text); font-size: 12px; font-weight: 600; text-decoration: none; }
.tv-help-guide:hover { background: var(--help-soft); }
.tv-context-help h3.tv-help-related-title { margin-top: 30px; margin-bottom: 8px; }
.tv-help-related button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; text-align: left; padding: 11px 0; border: 0; border-bottom: 1px solid var(--help-line); font: inherit; font-size: 12px; color: var(--help-muted); background: none; cursor: pointer; }
.tv-help-related button:hover { color: var(--help-accent); }
.tv-help-related span { font-size: 17px; }
.tv-help-footer { border-top: 1px solid var(--help-line); flex-shrink: 0; padding: 17px 28px max(17px, env(safe-area-inset-bottom)); }
.tv-help-browse { color: var(--help-muted); font-size: 11px; text-decoration: none; }
.tv-help-browse:hover { color: var(--help-accent); }
.tv-context-help :is(button,a):focus-visible { outline: 2px solid var(--help-accent); outline-offset: 3px; }
@keyframes tv-help-enter { from { transform: translateX(20px); opacity: .6; } to { transform: none; opacity: 1; } }
@media(max-width:700px) { .tv-context-help { width: 100%; border: 0; } .tv-help-icon { width: 44px; height: 44px; } .tv-help-guide, .tv-help-related button { min-height: 44px; } }
@media(prefers-reduced-motion:reduce) { .tv-context-help { animation: none; } }