/* VantoShops Developer Portal unified shell — V10.8.14 */
:root{
  --portal-max:1760px;
  --portal-gutter:40px;
  --portal-header-h:64px;
  --portal-bg:#ffffff;
  --portal-surface:#ffffff;
  --portal-soft:#f7f7f8;
  --portal-soft2:#f1f2f4;
  --portal-line:#e1e3e6;
  --portal-line2:#cdd1d6;
  --portal-text:#202223;
  --portal-muted:#61656b;
  --portal-subtle:#858b93;
  --portal-brand:#005bd3;
  --portal-brand2:#0045a8;
  --portal-shadow:0 10px 28px rgba(25,28,33,.08);
  /* Legacy view variable aliases so Home / Health / Explorer inherit one palette. */
  --bg:var(--portal-bg);--surface:var(--portal-surface);--card:var(--portal-surface);--soft:var(--portal-soft);--soft2:var(--portal-soft2);--line:var(--portal-line);--line2:var(--portal-line2);--text:var(--portal-text);--muted:var(--portal-muted);--subtle:var(--portal-subtle);--brand:var(--portal-brand);--brand2:var(--portal-brand2);--blue:var(--portal-brand);--blue2:var(--portal-brand2);
}
html[data-theme="dark"]{
  --portal-bg:#111315;
  --portal-surface:#17191c;
  --portal-soft:#1d2024;
  --portal-soft2:#24282d;
  --portal-line:#2d3137;
  --portal-line2:#41464e;
  --portal-text:#f2f3f4;
  --portal-muted:#b5b9bf;
  --portal-subtle:#858b93;
  --portal-brand:#8ab4ff;
  --portal-brand2:#abc8ff;
  --portal-shadow:0 14px 38px rgba(0,0,0,.28);
  --bg:var(--portal-bg);--surface:var(--portal-surface);--card:var(--portal-surface);--soft:var(--portal-soft);--soft2:var(--portal-soft2);--line:var(--portal-line);--line2:var(--portal-line2);--text:var(--portal-text);--muted:var(--portal-muted);--subtle:var(--portal-subtle);--brand:var(--portal-brand);--brand2:var(--portal-brand2);--blue:var(--portal-brand);--blue2:var(--portal-brand2);
}
/* Keep every public developer page on the same content rail. */
.shell,.wrap,.vs-shell{width:min(var(--portal-max),calc(100% - var(--portal-gutter)))!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
/* Unified developer header */
.vs-topbar{position:sticky;top:0;z-index:120;background:color-mix(in srgb,var(--portal-bg) 94%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--portal-line);color:var(--portal-text)}
.vs-topin{height:var(--portal-header-h);display:flex;align-items:center;gap:24px}
.vs-brand{display:flex;align-items:center;gap:11px;flex:none;text-decoration:none;color:inherit}
.vs-brand img{width:132px;height:auto;display:block;object-fit:contain}
/* Render exactly one logo element. Dark mode recolors the same asset. */
html[data-theme="dark"] .vs-brand img,html[data-theme="dark"] .footer-brand img,html[data-theme="dark"] .logo img{filter:brightness(0) invert(1)}
.vs-brand-divider{width:1px;height:20px;background:var(--portal-line)}
.vs-brand-label{font-weight:760;font-size:13px;letter-spacing:-.01em}
.vs-nav{display:flex;align-items:center;gap:2px}
.vs-nav a{padding:8px 9px;border-radius:8px;color:var(--portal-muted);font-weight:650;font-size:13px;text-decoration:none}
.vs-nav a:hover,.vs-nav a.active{background:var(--portal-soft);color:var(--portal-text)}
.vs-actions{margin-left:auto;display:flex;align-items:center;gap:7px}
.vs-search{height:36px;width:236px;border:1px solid var(--portal-line);border-radius:8px;background:var(--portal-soft);display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--portal-muted);cursor:pointer;text-align:left;text-decoration:none;font:inherit}
.vs-search:hover{background:var(--portal-surface);border-color:var(--portal-line2)}
.vs-search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-search kbd{margin-left:auto;background:var(--portal-surface);border:1px solid var(--portal-line);border-radius:5px;padding:1px 6px;font-size:10px;color:var(--portal-subtle)}
.vs-icon-btn{width:36px;height:36px;border:0;background:transparent;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--portal-muted);font:inherit}
.vs-icon-btn:hover{background:var(--portal-soft);color:var(--portal-text)}
.vs-primary-link{height:36px;padding:0 12px;border-radius:8px;background:var(--portal-text);color:var(--portal-bg)!important;display:inline-flex;align-items:center;gap:7px;font-weight:750;font-size:12px;text-decoration:none;border:1px solid var(--portal-text)}
.vs-primary-link:hover{opacity:.88}
.vs-logout{height:36px;padding:0 11px;border:1px solid var(--portal-line);border-radius:8px;background:var(--portal-surface);color:var(--portal-muted);font:inherit;font-weight:650;cursor:pointer}
.vs-logout:hover{background:var(--portal-soft);color:var(--portal-text)}
.vs-mobile-btn{display:none}
.vs-mobile-menu{display:none;border-top:1px solid var(--portal-line);background:var(--portal-bg)}
.vs-mobile-menu.open{display:block}
.vs-mobile-menu .vs-shell{padding:12px 0 16px;display:grid;gap:3px}
.vs-mobile-menu a{padding:10px;border-radius:8px;color:var(--portal-muted);font-weight:650;text-decoration:none}
.vs-mobile-menu a:hover{background:var(--portal-soft);color:var(--portal-text)}
/* Make legacy page components inherit the shared visual tokens. */
body{background-color:var(--portal-bg)!important;color:var(--portal-text)!important}.stat,.toolbar,.route,.panel,.empty,.status-card,.meta-card,.service,.info{background:var(--portal-surface)!important;border-color:var(--portal-line)!important}.control,.field input,.field textarea,.field select{border-color:var(--portal-line2)!important}.route-head:hover{background:var(--portal-soft)!important}
@media(max-width:1080px){.vs-nav{display:none}.vs-search{width:180px}.vs-mobile-btn{display:grid}}
@media(max-width:720px){:root{--portal-gutter:28px}.vs-topin{height:58px;gap:12px}.vs-brand img{width:118px}.vs-brand-divider,.vs-brand-label{display:none}.vs-search{width:36px;padding:0;justify-content:center}.vs-search span,.vs-search kbd{display:none}.vs-primary-link{display:none}}
@media(max-width:430px){:root{--portal-gutter:22px}}