.vyom-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.vyom-badge { font-size: .68rem; font-weight: 700; letter-spacing: .02em; padding: .15rem .55rem; border-radius: .9rem;
  background: var(--md-default-fg-color--lightest); color: var(--md-default-fg-color--light); }
.vyom-badge--role { background: #4f46e5; color: #fff; }
.vyom-badge--soon { background: #d97706; color: #fff; }
.vyom-badge--draft { background: #dc2626; color: #fff; }
.vyom-help { margin-top: 3rem; padding: 1rem 1.2rem; border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 4px solid #4f46e5; border-radius: .3rem; font-size: .8rem; }
.md-content img { border: 1px solid var(--md-default-fg-color--lightest); border-radius: .3rem; }


/* ---- Embed mode: the guide inside the console's Help side panel ---- */
html.vyom-embed .md-header,
html.vyom-embed .md-tabs,
html.vyom-embed .md-sidebar,
html.vyom-embed .md-footer,
html.vyom-embed .md-top,
html.vyom-embed .md-source-file { display: none !important; }
html.vyom-embed .md-main__inner { margin: 0; }
html.vyom-embed .md-content { margin: 0; max-width: none; }
html.vyom-embed .md-content__inner { margin: 0 .9rem 1.5rem; padding-top: .6rem; }
html.vyom-embed .md-typeset { font-size: .74rem; }
html.vyom-embed .md-typeset table:not([class]) { display: block; overflow-x: auto; }
html.vyom-embed .vyom-help { margin-top: 1.5rem; }
/* The section a contextual "?" link points at is highlighted, so the reader lands on it, not just near it. */
.md-typeset :target { scroll-margin-top: 1rem; }
html.vyom-embed .md-typeset :is(h1,h2,h3,h4):target { background: rgba(79,70,229,.14); border-radius: .25rem; padding: .1rem .4rem; }

/* ---- Header: same look as the console's header (dark navy, thin border, wordmark logo) ---- */
.md-header { background-color: #020617; color: #fff; border-bottom: 1px solid #1e293b; box-shadow: none; }
.md-header[data-md-state="shadow"] { box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.md-header__button.md-logo { padding: .25rem .4rem; margin-left: .1rem; }
.md-header__button.md-logo img { height: 1.9rem; width: auto; border: 0; border-radius: 0; }
/* The logo already spells VYOM, so the title beside it reads just "User Guide". */
.md-header__title .md-header__topic:first-child .md-ellipsis { visibility: hidden; position: relative; }
.md-header__title .md-header__topic:first-child .md-ellipsis::after {
  content: "User Guide"; visibility: visible; position: absolute; left: 0; top: 0; color: #cbd5e1; font-weight: 600; }
.md-search__form { background-color: #0f172a; }
.md-search__form:hover { background-color: #1e293b; }
.md-tabs { background-color: #020617; }

/* Help panel: click-to-enlarge screenshots */
html.vyom-embed .vyom-zoomable { cursor: zoom-in; }
.vyom-zoom { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(2,6,23,.92); align-items: center; justify-content: center; padding: .75rem; cursor: zoom-out; }
.vyom-zoom.is-open { display: flex; }
.vyom-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .25rem; }