/* ============================================================
   VelinStyle Documentation — Layout & Theme
   ============================================================ */

/* ---------- CSS custom properties (light) ---------- */
:root {
  --doc-sidebar-w: 16rem;
  --doc-toc-w: 14rem;
  --doc-header-h: 3.5rem;
  --doc-header-stack: calc(var(--doc-header-h) + env(safe-area-inset-top, 0px));
  --doc-sidebar-bg: #f8f9fa;
  --doc-body-bg: #fff;
  --doc-toc-bg: #fff;
  --doc-border: #dee2e6;
  --doc-text: #212529;
  --doc-text-muted: #6c757d;
  --doc-link: #0d6efd;
  --doc-link-hover: #0a58ca;
  --doc-active-bg: rgba(13, 110, 253, .1);
  --doc-active-color: #0d6efd;
  --doc-code-bg: #f5f6f8;
  --doc-code-border: #e2e5e9;
  --doc-header-bg: rgba(255, 255, 255, .95);
  --doc-search-bg: #f0f1f3;
  --doc-search-border: #ced4da;
  --doc-preview-bg: #fff;
  --doc-preview-border: #dee2e6;
  --doc-copy-bg: rgba(0, 0, 0, .05);
  --doc-copy-hover-bg: rgba(0, 0, 0, .1);
  --doc-breadcrumb-sep: "›";
}

/* ---------- Dark mode ---------- */
[data-velin-theme="dark"],
[data-velin-theme="dark"] {
  --doc-sidebar-bg: #1a1d21;
  --doc-body-bg: #121416;
  --doc-toc-bg: #121416;
  --doc-border: #2c3034;
  --doc-text: #dee2e6;
  --doc-text-muted: #8b929a;
  --doc-link: #6ea8fe;
  --doc-link-hover: #9ec5fe;
  --doc-active-bg: rgba(110, 168, 254, .12);
  --doc-active-color: #6ea8fe;
  --doc-code-bg: #1e2125;
  --doc-code-border: #2c3034;
  --doc-header-bg: rgba(26, 29, 33, .96);
  --doc-search-bg: #2b3035;
  --doc-search-border: #495057;
  --doc-preview-bg: #1e2125;
  --doc-preview-border: #2c3034;
  --doc-copy-bg: rgba(255, 255, 255, .06);
  --doc-copy-hover-bg: rgba(255, 255, 255, .12);
}

/* ---------- Base resets ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--doc-header-stack) + 1rem);
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--doc-text);
  background: var(--doc-body-bg);
}

a { color: var(--doc-link); text-decoration: none; }
a:hover { color: var(--doc-link-hover); }

/* ============================================================
   HEADER
   ============================================================ */
.velin-doc-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1030;
  box-sizing: border-box;
  height: var(--doc-header-stack);
  min-width: 0;
  padding-block-start: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px));
  background: var(--doc-header-bg);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--doc-border);
}

.velin-doc-header__brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--doc-text);
  white-space: nowrap;
}

.velin-doc-header__brand img {
  flex-shrink: 0;
  height: 1.75rem;
  width: auto;
}

.velin-doc-header__version {
  font-size: .7rem;
  font-weight: 600;
  padding: .15em .45em;
  border-radius: .25rem;
  background: var(--doc-active-bg);
  color: var(--doc-active-color);
  vertical-align: middle;
}

.velin-doc-header__search {
  flex: 1;
  min-width: 0;
  max-width: 26rem;
  margin-inline-start: auto;
}

.velin-doc-header__search input {
  width: 100%;
  padding: .35rem .75rem;
  font-size: .8125rem;
  border: 1px solid var(--doc-search-border);
  border-radius: .375rem;
  background: var(--doc-search-bg);
  color: var(--doc-text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.velin-doc-header__search input:focus {
  border-color: var(--doc-active-color);
  box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .25);
}

.velin-doc-header__search {
  position: relative;
}

.velin-doc-search-results {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + .25rem);
  z-index: 1040;
  max-height: 18rem;
  overflow-y: auto;
  background: var(--doc-body-bg);
  border: 1px solid var(--doc-border);
  border-radius: .375rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
}

.velin-doc-search-results__item {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .5rem .75rem;
  color: var(--doc-text);
  border-block-end: 1px solid var(--doc-border);
}

.velin-doc-search-results__item:last-child {
  border-block-end: none;
}

.velin-doc-search-results__item:hover,
.velin-doc-search-results__item:focus {
  background: var(--doc-active-bg);
  color: var(--doc-active-color);
}

.velin-doc-search-results__title {
  font-weight: 600;
  font-size: .8125rem;
}

.velin-doc-search-results__meta {
  font-size: .75rem;
  color: var(--doc-text-muted);
}

.velin-doc-header__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.velin-doc-header__actions button,
.velin-doc-header__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  width: auto;
  height: auto;
  border: none;
  border-radius: .375rem;
  background: transparent;
  color: var(--doc-text-muted);
  cursor: pointer;
  font-size: 1.125rem;
  transition: background .15s, color .15s;
}

.velin-doc-header__actions button:hover,
.velin-doc-header__actions a:hover {
  background: var(--doc-active-bg);
  color: var(--doc-text);
}

/* Hamburger (tablet/narrow — min 44×44px touch target) */
.velin-doc-hamburger {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  color: var(--doc-text);
  font-size: 1.25rem;
  cursor: pointer;
}

/* ============================================================
   3-COLUMN LAYOUT
   ============================================================ */
.velin-doc-wrapper {
  display: grid;
  grid-template-columns: var(--doc-sidebar-w) minmax(0, 1fr) var(--doc-toc-w);
  min-height: 100vh;
  padding-block-start: var(--doc-header-stack);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.velin-doc-sidebar {
  position: sticky;
  top: var(--doc-header-stack);
  height: calc(100vh - var(--doc-header-stack));
  overflow-y: auto;
  padding: 1rem 0;
  background: var(--doc-sidebar-bg);
  border-inline-end: 1px solid var(--doc-border);
  scrollbar-width: thin;
  scrollbar-color: var(--doc-border) transparent;
}

.velin-doc-sidebar::-webkit-scrollbar { width: 4px; }
.velin-doc-sidebar::-webkit-scrollbar-thumb { background: var(--doc-border); border-radius: 2px; }

/* Pinned shortcuts — sit at the top of the sidebar, scroll with it, capped height. */
.velin-doc-sidebar__pinned {
  max-height: clamp(8rem, 38vh, 22rem);
  overflow-y: auto;
  padding-block-end: .5rem;
  margin-block-end: .5rem;
  background: var(--doc-sidebar-bg);
  border-block-end: 1px solid var(--doc-border);
  scrollbar-width: thin;
  scrollbar-color: var(--doc-border) transparent;
}

.velin-doc-sidebar__pinned::-webkit-scrollbar { width: 4px; }
.velin-doc-sidebar__pinned::-webkit-scrollbar-thumb { background: var(--doc-border); border-radius: 2px; }

.velin-doc-sidebar__pinned-label {
  margin: 0;
  padding: .25rem 1rem .125rem;
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--doc-text-muted);
}

.velin-doc-sidebar__pinned-label--sub {
  padding-block-start: .5rem;
}

/* Category */
.velin-doc-sidebar__category {
  margin-block-end: .25rem;
}

.velin-doc-sidebar__category-header {
  display: flex;
  align-items: center;
  gap: .375rem;
  width: 100%;
  padding: .375rem 1rem;
  border: none;
  background: transparent;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--doc-text-muted);
  cursor: pointer;
  user-select: none;
  transition: color .15s;
  text-align: start;
}

.velin-doc-sidebar__category-header > span:not(.chevron) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.velin-doc-sidebar__category-header .chevron {
  display: inline-block;
  flex-shrink: 0;
  margin-inline-start: auto;
  font-size: .625rem;
  transition: transform .2s;
}

.velin-doc-sidebar__category-header:hover {
  color: var(--doc-text);
}

.velin-doc-sidebar__cat-icon {
  flex-shrink: 0;
  opacity: .85;
}

.velin-doc-sidebar__category.collapsed .chevron {
  transform: rotate(-90deg);
}

.velin-doc-sidebar__category.collapsed .velin-doc-sidebar__links {
  display: none;
}

/* Links list */
.velin-doc-sidebar__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.velin-doc-sidebar__links a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 1rem .3rem 1.25rem;
  font-size: .8125rem;
  color: var(--doc-text-muted);
  border-inline-start: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
  text-decoration: none;
}

.velin-doc-sidebar__icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  opacity: .75;
}

.velin-doc-sidebar__links a:hover .velin-doc-sidebar__icon,
.velin-doc-sidebar__links a.active .velin-doc-sidebar__icon {
  opacity: 1;
}

.velin-doc-sidebar__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.velin-doc-sidebar__links--prominent a {
  padding-block: .4rem;
  font-weight: 500;
}

.velin-doc-sidebar__links--prominent a.active {
  font-weight: 600;
}

.velin-doc-sidebar__links a:hover {
  color: var(--doc-text);
  background: var(--doc-active-bg);
}

.velin-doc-sidebar__links a.active {
  color: var(--doc-active-color);
  font-weight: 600;
  border-inline-start-color: var(--doc-active-color);
  background: var(--doc-active-bg);
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.velin-doc-main {
  min-width: 0;
  padding: 2rem 2.5rem 4rem;
  max-width: 52rem;
  width: 100%;
  margin: 0 auto;
}

.velin-doc-main h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-block: 0 .5rem;
  line-height: 1.25;
}

.velin-doc-main h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-block: 2rem .75rem;
  padding-block-end: .375rem;
  border-block-end: 1px solid var(--doc-border);
}

.velin-doc-main h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-block: 1.5rem .5rem;
}

.velin-doc-main p { margin-block: 0 1rem; }

.velin-doc-main > .lead {
  font-size: 1.125rem;
  color: var(--doc-text-muted);
  margin-block-end: 1.5rem;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.velin-doc-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: .8125rem;
}

.velin-doc-breadcrumb li + li::before {
  content: var(--doc-breadcrumb-sep);
  padding-inline: .4rem;
  color: var(--doc-text-muted);
}

.velin-doc-breadcrumb a { color: var(--doc-text-muted); }
.velin-doc-breadcrumb a:hover { color: var(--doc-link); }

.velin-doc-breadcrumb li:last-child {
  color: var(--doc-text);
  font-weight: 500;
}

/* ============================================================
   CODE EXAMPLE CONTAINER  (Tabbed: HTML | Preview)
   ============================================================ */
.velin-doc-example {
  min-width: 0;
  border: 1px solid var(--doc-code-border);
  border-radius: .5rem;
  margin-block: 1.25rem;
  overflow: hidden;
}

.velin-doc-example__tabs {
  display: flex;
  border-block-end: 1px solid var(--doc-code-border);
  background: var(--doc-code-bg);
}

.velin-doc-example__tab {
  padding: .4rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--doc-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  border-block-end: 2px solid transparent;
  transition: color .15s, border-color .15s;
}

.velin-doc-example__tab:hover { color: var(--doc-text); }

.velin-doc-example__tab.active {
  color: var(--doc-active-color);
  border-block-end-color: var(--doc-active-color);
}

.velin-doc-example__panel {
  display: none;
}

.velin-doc-example__panel.active {
  display: block;
}

/* Preview pane */
.velin-doc-example__preview {
  padding: 1.5rem;
  background: var(--doc-preview-bg);
  border-block-end: 1px solid var(--doc-preview-border);
}

/* Code pane */
.velin-doc-example__code {
  position: relative;
}

.velin-doc-example__code pre {
  margin: 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  background: var(--doc-code-bg);
  font-size: .8125rem;
  line-height: 1.55;
  tab-size: 2;
}

.velin-doc-example__code code {
  font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
}

/* Copy button */
.velin-doc-copy-btn {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .5rem;
  font-size: .7rem;
  font-weight: 600;
  border: none;
  border-radius: .25rem;
  background: var(--doc-copy-bg);
  color: var(--doc-text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.velin-doc-copy-btn:hover {
  background: var(--doc-copy-hover-bg);
  color: var(--doc-text);
}

.velin-doc-copy-btn.copied {
  color: #198754;
}

/* Standalone code blocks (outside example) */
.velin-doc-main pre:not(.velin-doc-example__code pre) {
  position: relative;
  padding: 1rem 1.25rem;
  margin-block: 1rem;
  border-radius: .5rem;
  border: 1px solid var(--doc-code-border);
  background: var(--doc-code-bg);
  overflow-x: auto;
  font-size: .8125rem;
  line-height: 1.55;
}

.velin-doc-main code:not(pre code) {
  padding: .15em .35em;
  font-size: 87.5%;
  border-radius: .25rem;
  background: var(--doc-code-bg);
  color: #d63384;
  font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
}

[data-velin-theme="dark"] .velin-doc-main code:not(pre code),
[data-velin-theme="dark"] .velin-doc-main code:not(pre code) {
  color: #e685b5;
}

/* ============================================================
   PRISM.JS TOKEN COLORS  (One Light / One Dark inspired)
   ============================================================ */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { color: #6a737d; font-style: italic; }

.token.punctuation { color: #999; }
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol { color: #005cc5; }

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin { color: #22863a; }

.token.operator,
.token.entity,
.token.url { color: #d73a49; }

.token.atrule,
.token.attr-value,
.token.keyword { color: #d73a49; }

.token.function,
.token.class-name { color: #6f42c1; }

.token.regex,
.token.important,
.token.variable { color: #e36209; }

[data-velin-theme="dark"] code[class*="language-"],
[data-velin-theme="dark"] pre[class*="language-"] {
  color: #e2e8f0;
  background: #1e1e2e;
}

[data-velin-theme="dark"] .token.comment,
[data-velin-theme="dark"] .token.prolog,
[data-velin-theme="dark"] .token.doctype,
[data-velin-theme="dark"] .token.cdata { color: #6272a4; }

[data-velin-theme="dark"] .token.punctuation { color: #a0aec0; }

[data-velin-theme="dark"] .token.property,
[data-velin-theme="dark"] .token.tag,
[data-velin-theme="dark"] .token.boolean,
[data-velin-theme="dark"] .token.number,
[data-velin-theme="dark"] .token.constant,
[data-velin-theme="dark"] .token.symbol { color: #bd93f9; }

[data-velin-theme="dark"] .token.selector,
[data-velin-theme="dark"] .token.attr-name,
[data-velin-theme="dark"] .token.string,
[data-velin-theme="dark"] .token.char,
[data-velin-theme="dark"] .token.builtin { color: #50fa7b; }

[data-velin-theme="dark"] .token.operator,
[data-velin-theme="dark"] .token.entity,
[data-velin-theme="dark"] .token.url { color: #ff79c6; }

[data-velin-theme="dark"] .token.atrule,
[data-velin-theme="dark"] .token.attr-value,
[data-velin-theme="dark"] .token.keyword { color: #8be9fd; }

[data-velin-theme="dark"] .token.function,
[data-velin-theme="dark"] .token.class-name { color: #f1fa8c; }

[data-velin-theme="dark"] .token.regex,
[data-velin-theme="dark"] .token.important,
[data-velin-theme="dark"] .token.variable { color: #ffb86c; }

/* ============================================================
   RIGHT TOC  — "On this page"
   ============================================================ */
.velin-doc-toc {
  position: sticky;
  top: var(--doc-header-stack);
  height: calc(100vh - var(--doc-header-stack));
  overflow-y: auto;
  padding: 1.5rem 1rem 2rem .75rem;
  font-size: .8rem;
  border-inline-start: 1px solid var(--doc-border);
  scrollbar-width: thin;
  scrollbar-color: var(--doc-border) transparent;
}

.velin-doc-toc::-webkit-scrollbar { width: 4px; }
.velin-doc-toc::-webkit-scrollbar-thumb { background: var(--doc-border); border-radius: 2px; }

.velin-doc-toc__title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--doc-text-muted);
  margin-block-end: .75rem;
}

.velin-doc-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.velin-doc-toc__list a {
  display: block;
  padding: .2rem 0 .2rem .75rem;
  color: var(--doc-text-muted);
  border-inline-start: 2px solid transparent;
  transition: color .15s, border-color .15s;
}

.velin-doc-toc__list a:hover {
  color: var(--doc-text);
}

.velin-doc-toc__list a.active {
  color: var(--doc-active-color);
  border-inline-start-color: var(--doc-active-color);
  font-weight: 600;
}

.velin-doc-toc__list .toc-h3 {
  padding-inline-start: 1.5rem;
  font-size: .75rem;
}

/* ============================================================
   PREV / NEXT NAVIGATION
   ============================================================ */
.velin-doc-prevnext {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 3rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--doc-border);
}

.velin-doc-prevnext a {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .75rem 1rem;
  border: 1px solid var(--doc-border);
  border-radius: .5rem;
  color: var(--doc-text);
  transition: border-color .15s, box-shadow .15s;
  min-width: 0;
  max-width: 50%;
}

.velin-doc-prevnext a:hover {
  border-color: var(--doc-active-color);
  box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .15);
}

.velin-doc-prevnext__label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--doc-text-muted);
}

.velin-doc-prevnext__title {
  font-weight: 600;
  color: var(--doc-active-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.velin-doc-prevnext .next { margin-inline-start: auto; text-align: end; }

/* ============================================================
   CALLOUT / TIP BOXES
   ============================================================ */
.velin-doc-callout {
  padding: 1rem 1.25rem;
  margin-block: 1rem;
  border-radius: .5rem;
  border-inline-start: 4px solid var(--doc-active-color);
  background: var(--doc-active-bg);
  font-size: .875rem;
}

.velin-doc-callout strong { display: block; margin-block-end: .25rem; }

/* ============================================================
   TABLE  (property tables)
   ============================================================ */
.velin-doc-main table {
  width: 100%;
  margin-block: 1rem;
  border-collapse: collapse;
  font-size: .8125rem;
}

.velin-doc-main th,
.velin-doc-main td {
  padding: .5rem .75rem;
  border: 1px solid var(--doc-border);
  text-align: start;
}

.velin-doc-main th {
  background: var(--doc-code-bg);
  font-weight: 600;
}

/* ============================================================
   RESPONSIVE  — Mobile / Tablet
   ============================================================ */
@media (max-width: 991.98px) {
  .velin-doc-toc { display: none; }

  .velin-doc-hamburger { display: inline-flex; }

  .velin-doc-header__search { max-width: 14rem; }

  .velin-doc-wrapper {
    grid-template-columns: 1fr;
  }

  .velin-doc-sidebar {
    position: fixed;
    inset-block-start: var(--doc-header-stack);
    inset-inline-start: 0;
    z-index: 1020;
    width: 18rem;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: none;
  }

  .velin-doc-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .15);
  }

  [dir="rtl"] .velin-doc-sidebar {
    transform: translateX(100%);
  }

  [dir="rtl"] .velin-doc-sidebar.open {
    transform: translateX(0);
    box-shadow: -4px 0 24px rgba(0, 0, 0, .15);
  }
}

@media (max-width: 767.98px) {
  .velin-doc-header__search { max-width: 10rem; }

  .velin-doc-main {
    padding: 1.25rem 1rem 3rem;
  }

  .velin-doc-prevnext {
    flex-direction: column;
  }

  .velin-doc-prevnext a { max-width: 100%; }
}

/* Overlay behind sidebar on mobile */
.velin-doc-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1019;
  background: rgba(0, 0, 0, .4);
}

.velin-doc-overlay.show { display: block; }

/* ============================================================
   UTILITY — skip-link for a11y
   ============================================================ */
.velin-doc-skip {
  position: absolute;
  top: -999px;
  left: .5rem;
  z-index: 9999;
  padding: .5rem 1rem;
  background: var(--doc-active-color);
  color: #fff;
  border-radius: .25rem;
  font-weight: 600;
}

.velin-doc-skip:focus {
  top: .5rem;
}

/* ============================================================
   THEME PICKER — floating widget
   ============================================================ */
.velin-theme-picker {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}

.velin-theme-picker__toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  background: var(--doc-active-color, #0d6efd);
  color: #fff;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  font-size: .8125rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: transform .15s ease, box-shadow .15s ease;
}

.velin-theme-picker__toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}

.velin-theme-picker__panel {
  display: none;
  background: var(--doc-body-bg, #fff);
  border: 1px solid var(--doc-border, #dee2e6);
  border-radius: .75rem;
  padding: .75rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  max-width: 20rem;
  width: max-content;
}

.velin-theme-picker__panel.open {
  display: block;
}

.velin-theme-picker__panel p {
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--doc-text-muted, #6c757d);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.velin-theme-picker__grid {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.velin-theme-picker__btn {
  padding: .3rem .65rem;
  border: 1px solid var(--doc-border, #dee2e6);
  border-radius: 1rem;
  background: var(--doc-code-bg, #f5f6f8);
  color: var(--doc-text, #212529);
  font-size: .75rem;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}

.velin-theme-picker__btn:hover {
  border-color: var(--doc-active-color, #0d6efd);
  color: var(--doc-active-color, #0d6efd);
}

.velin-theme-picker__btn.active {
  background: var(--doc-active-color, #0d6efd);
  color: #fff;
  border-color: var(--doc-active-color, #0d6efd);
}