/* ============================================================
   VIZAG MAP — accounts (auth + dashboards)
   Uses the same tokens as the map. Redeclared here so the
   shortcodes also look right on a non-companion theme.
   ============================================================ */
:root{
  --s:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s8:64px; --s10:80px;
  --r1:8px; --r2:16px; --r3:24px;
  --ink:#0A2540; --ink2:#14304B;
  --teal:#12B5B0; --teal-d:#0E9B96;
  --coral:#FF6B4A; --coral-d:#E8471F;
  --purple:#7C5CFF; --amber:#F4A72B;
  --sand:#F3EFE6; --paper:#FBFAF7; --white:#fff;
  --line:#E6E2D8; --slate:#5A6B7A; --slate2:#8A98A5;
  --shadow-s:0 8px 24px -12px rgba(10,37,64,.22);
  --shadow-m:0 16px 48px -16px rgba(10,37,64,.28);
  --shadow-l:0 40px 90px -40px rgba(10,37,64,.5);
}

.vsm-auth *,.vsm-dash *{box-sizing:border-box}

/* The `hidden` attribute has to win.
 *
 * The browser's own [hidden]{display:none} is a user-agent rule, and *any*
 * author rule with a display beats it. So every `display:flex` below was
 * quietly re-showing elements the JavaScript had just hidden: the dashboard
 * spinner stayed on screen for good once the page had loaded, and the "or"
 * divider and Google button showed on the user tab where they don't belong.
 * Two spot fixes for this already existed further down; this replaces them
 * with one rule that covers everything, including markup added later. */
.vsm-auth [hidden],.vsm-auth[hidden],
.vsm-dash [hidden],.vsm-dash[hidden],
.vsm-ob [hidden],.vsm-ob[hidden],
.vsm-dom [hidden],.vsm-dom[hidden]{display:none !important}
.vsm-acc-redirect{font-family:'Inter',system-ui,sans-serif;padding:var(--s6) var(--s3);text-align:center;color:var(--slate)}
.vsm-acc-redirect a{color:var(--teal-d);font-weight:600}

/* ==========================================================
   SHARED FIELDS

   The base input styling, used by the dashboard and the god-mode
   editor, which keep the product's teal treatment.

   This sits *above* the auth section deliberately. `.vsm-f input`
   sets the `padding` shorthand, and the sign-in screen overrides
   only `padding-left` to make room for a field icon — that override
   has to come later in the file, because a shorthand and a longhand
   in the wrong order is the kind of cascade bug that shows up as
   text sitting on top of an icon and nothing else.
   ========================================================== */
.vsm-f{margin-bottom:var(--s2)}
.vsm-f>label{display:block;font-size:12px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.vsm-f input,.vsm-f select,.vsm-f textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r1);background:var(--white);color:var(--ink);
  height:46px;padding:0 14px;font-size:14.5px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s
}
.vsm-f textarea{height:auto;padding:12px 14px;resize:vertical;line-height:1.55}
.vsm-f input:focus,.vsm-f select:focus,.vsm-f textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(18,181,176,.14)}
.vsm-f input::placeholder,.vsm-f textarea::placeholder{color:var(--slate2)}
.vsm-f__hint{font-size:11.5px;color:var(--slate2);margin-top:6px}
.vsm-f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
@media(max-width:520px){.vsm-f2{grid-template-columns:1fr}}

/* consent / opt-in checkbox (also used by onboarding) */
.vsm-check{display:flex;gap:10px;align-items:flex-start;margin:var(--s2) 0 var(--s);
  font-size:12.5px;line-height:1.5;color:var(--slate);cursor:pointer}
.vsm-check input{margin:2px 0 0;width:16px;height:16px;flex:0 0 16px;accent-color:var(--teal)}

@keyframes vsm-spin{to{transform:rotate(360deg)}}

/* ==========================================================
   AUTH — split screen

   Layout note: the markup puts the form first and the brand panel
   second, because on a phone the brand panel is not shown at all and
   someone opening this page came to sign in. Desktop restores the
   designed left/right split with grid-template-areas rather than by
   reordering the HTML, so the source stays in priority order.

   This section runs on its own blue palette. The rest of the product
   is teal and navy; the sign-in screen is the one place that isn't,
   so the tokens are scoped to .vsm-auth and nothing else moves.
   ========================================================== */
.vsm-auth{
  --ab:#1868E8;          /* primary blue */
  --ab-d:#0B4CC0;        /* gradient end / hover */
  --ab-ink:#0F2C50;      /* headings */
  --ab-body:#5A6E88;     /* body copy */
  --ab-line:#E2E9F3;     /* field borders */
  --ab-tint:#EAF2FE;     /* icon chips, active tab */
  --ab-panel:#E9F1FE;    /* brand column */

  font-family:'Inter',system-ui,sans-serif;
  color:var(--ab-ink);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-areas:"brand panel" "trust trust";
  align-items:stretch;
  /* The companion theme publishes its header height as --head; the fallback
     covers a non-companion theme, where 72px is only a reasonable guess. */
  min-height:calc(100vh - var(--head, 72px));
  min-height:calc(100dvh - var(--head, 72px));
  background:linear-gradient(90deg,var(--ab-panel) 0 52.5%,#FBFCFF 52.5% 100%);
}

/* ---------- brand column ---------- */
.vsm-auth__brand{
  grid-area:brand;position:relative;overflow:hidden;
  display:flex;align-items:center;
  padding:var(--s8) var(--s6);
}
.vsm-auth__art{position:absolute;inset:0;z-index:0}
.vsm-auth__art svg{width:100%;height:100%;display:block}
.vsm-auth__brand-inner{position:relative;z-index:1;max-width:520px}

.vsm-auth__headline{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-weight:800;font-size:clamp(30px,3.1vw,44px);line-height:1.16;letter-spacing:-.03em;
  color:var(--ab-ink);margin:0 0 var(--s3)
}
.vsm-auth__headline em{font-style:normal;color:var(--ab)}
.vsm-auth__sub{font-size:16px;line-height:1.65;color:var(--ab-body);margin:0 0 var(--s5);max-width:400px}

.vsm-auth__points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.vsm-auth__points li{
  display:flex;align-items:center;gap:var(--s2);
  font-size:15.5px;font-weight:500;color:var(--ab-ink)
}
.vsm-auth__pt-ic{
  flex:0 0 46px;width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;background:#fff;
  box-shadow:0 4px 14px -8px rgba(15,44,80,.35)
}
.vsm-auth__pt-ic svg{width:21px;height:21px}
.vsm-auth__pt-ic[data-tone="blue"]  {background:#E4EFFE;color:#1868E8}
.vsm-auth__pt-ic[data-tone="coral"] {background:#FFEAE4;color:#F0603A}
.vsm-auth__pt-ic[data-tone="purple"]{background:#EDE9FE;color:#7C5CFF}

/* ---------- form column ---------- */
.vsm-auth__panel{
  grid-area:panel;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--s6) var(--s4)
}
.vsm-auth__card{
  display:flex;flex-direction:column;
  width:100%;max-width:470px;
  background:#fff;border:1px solid #EEF2F8;border-radius:20px;
  padding:var(--s5) var(--s4) var(--s4);
  box-shadow:0 24px 60px -30px rgba(15,44,80,.28)
}

/* Card order.
   Desktop follows the design: the account-type tabs cap the card. On a phone
   the logo and greeting come first so the screen introduces itself before it
   asks for anything — flipped with `order`, not with a second block of HTML. */
.vsm-auth__mlogo {order:1}
.vsm-auth__roles {order:2}
.vsm-auth__head  {order:3}
.vsm-auth__msg   {order:4}
#vsmAuthForm     {order:5}
.vsm-auth__sent  {order:6}
.vsm-auth__or    {order:7}
.vsm-auth__google{order:8}
.vsm-auth__switch{order:9}

.vsm-auth__mlogo{display:none;text-align:center;margin-bottom:var(--s3);
  font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:26px;
  letter-spacing:-.03em;color:var(--ab-ink);text-decoration:none}
.vsm-auth__mlogo span{color:var(--ab)}
.vsm-auth__mlogo img{max-height:44px;width:auto;display:inline-block}

/* account-type tabs */
.vsm-auth__roles{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  background:#F4F7FC;border-radius:12px;padding:5px;margin-bottom:var(--s4)
}
.vsm-role{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:600;color:#7C8CA4;
  transition:color .18s
}
.vsm-role svg{width:18px;height:18px}
.vsm-role.is-on{color:var(--ab)}
.vsm-role__glider{
  position:absolute;z-index:0;top:5px;left:5px;
  width:calc(50% - 5px);height:calc(100% - 10px);
  background:#fff;border-radius:9px;
  box-shadow:0 2px 8px -3px rgba(15,44,80,.28);
  border-bottom:2px solid var(--ab);
  transition:transform .24s cubic-bezier(.22,.9,.3,1)
}
.vsm-auth__roles[data-role="company"] .vsm-role__glider{transform:translateX(100%)}

.vsm-auth__head{margin-bottom:var(--s3)}
.vsm-auth__head h2{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-weight:800;font-size:29px;letter-spacing:-.03em;margin:0;color:var(--ab-ink)
}
.vsm-auth__head p{margin:7px 0 0;font-size:15px;color:var(--ab-body);line-height:1.5}

.vsm-auth__msg{border-radius:10px;padding:11px 14px;font-size:13.5px;margin-bottom:var(--s2);line-height:1.5}
.vsm-auth__msg.err{background:#FEECE7;color:#C93B14}
.vsm-auth__msg.ok{background:#E6F6EF;color:#0B7A52}

/* fields — scoped, so the dashboard and god mode keep their own look */
.vsm-auth .vsm-f{margin-bottom:var(--s3)}
.vsm-auth .vsm-f>label{font-size:14px;font-weight:600;color:var(--ab-ink);margin-bottom:8px}
.vsm-auth .vsm-f input{
  height:54px;border:1.5px solid var(--ab-line);border-radius:11px;
  font-size:15px;color:var(--ab-ink);
  transition:border-color .16s,box-shadow .16s
}
.vsm-auth .vsm-f input::placeholder{color:#9BA9BC}
.vsm-auth .vsm-f input:focus{border-color:var(--ab);box-shadow:0 0 0 4px rgba(24,104,232,.13)}
.vsm-auth .vsm-f__hint{font-size:12.5px;color:#8494AA;margin-top:7px}

/* a field with a leading icon.

   Scoped with .vsm-auth on purpose. The shared `.vsm-f input` block sits
   further down this file and sets the padding shorthand; at equal specificity
   the later rule wins, so an unscoped `.vsm-fi input` would have had its
   padding-left silently reset and the text would run under the icon. */
.vsm-fi{position:relative}
.vsm-fi__ic{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:#93A4BA;pointer-events:none;transition:color .16s
}
.vsm-auth .vsm-fi input{padding-left:46px}
.vsm-fi:focus-within .vsm-fi__ic{color:var(--ab)}

.vsm-auth .vsm-pass input{padding-right:48px}
.vsm-pass__toggle{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:grid;place-items:center;
  border:0;background:transparent;color:#93A4BA;cursor:pointer;border-radius:9px
}
.vsm-pass__toggle:hover{color:var(--ab-ink);background:#F2F6FC}
.vsm-pass__toggle svg{width:19px;height:19px}
.vsm-pass.is-on .vsm-pass__toggle{color:var(--ab)}

.vsm-auth__forgot{margin:-6px 0 var(--s3);text-align:right}
.vsm-auth__forgot button{
  border:0;background:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ab)
}
.vsm-auth__forgot button:hover{text-decoration:underline}

.vsm-auth__submit{
  width:100%;height:56px;border:0;border-radius:11px;cursor:pointer;
  background:linear-gradient(180deg,var(--ab) 0%,var(--ab-d) 100%);
  color:#fff;font-family:inherit;font-weight:700;font-size:16px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;
  box-shadow:0 10px 24px -12px rgba(11,76,192,.75);
  transition:transform .12s,box-shadow .18s,filter .18s
}
.vsm-auth__submit:hover{filter:brightness(1.06);box-shadow:0 14px 30px -12px rgba(11,76,192,.85)}
.vsm-auth__submit:active{transform:translateY(1px)}
.vsm-auth__submit:disabled{opacity:.75;cursor:default;box-shadow:none}
.vsm-auth__arrow{width:20px;height:20px;transition:transform .18s}
.vsm-auth__submit:hover .vsm-auth__arrow{transform:translateX(3px)}
.is-busy > .vsm-auth__arrow{display:none}

/* The spinner is driven by a class on the button, never by [hidden].
   `hidden` is an HTMLElement property — SVG elements don't implement it, so
   `svg.hidden = false` silently sets a JS expando and the attribute never
   moves. That left the button spinning from the moment the page loaded. */
.vsm-auth__spin{width:20px;height:20px;display:none;animation:vsm-spin .8s linear infinite}
.is-busy > .vsm-auth__spin{display:block}
.is-busy > .vsm-auth__label{opacity:.7}
@media (prefers-reduced-motion:reduce){
  .vsm-auth__spin{animation-duration:2s}
  .vsm-role__glider,.vsm-auth__submit,.vsm-auth__arrow{transition:none}
}

.vsm-auth .vsm-check{margin:0 0 var(--s3);font-size:13px;color:var(--ab-body)}
.vsm-auth .vsm-check input{accent-color:var(--ab)}

.vsm-auth__or{
  display:flex;align-items:center;gap:var(--s2);
  margin:var(--s3) 0;color:#8494AA;font-size:13px
}
.vsm-auth__or::before,.vsm-auth__or::after{content:"";flex:1;height:1px;background:var(--ab-line)}
.vsm-auth__google{display:flex;justify-content:center;min-height:44px}

.vsm-auth__switch{
  text-align:center;margin:var(--s3) 0 0;font-size:14.5px;color:var(--ab-body);
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap
}
.vsm-auth__switch button{
  border:0;background:none;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;
  color:var(--ab);font-family:inherit;font-weight:700;font-size:14.5px
}
.vsm-auth__switch button::after{
  content:"";width:6px;height:6px;border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);margin-left:2px;transition:transform .16s
}
.vsm-auth__switch button:hover{text-decoration:underline}

/* "check your inbox" panel */
.vsm-auth__sent{text-align:center;padding:var(--s2) 0}
.vsm-auth__sent-art{
  width:58px;height:58px;border-radius:50%;margin:0 auto var(--s2);
  display:grid;place-items:center;background:var(--ab-tint);color:var(--ab)
}
.vsm-auth__sent-art svg{width:26px;height:26px}
.vsm-auth__sent h3{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-weight:700;font-size:21px;margin:0 0 8px;color:var(--ab-ink)
}
.vsm-auth__sent p{margin:0 0 var(--s2);font-size:14.5px;color:var(--ab-body);line-height:1.6}
.vsm-auth__sent-hint{font-size:13px;color:#8494AA}
.vsm-auth__sent-hint button{
  border:0;background:none;padding:0;cursor:pointer;
  color:var(--ab);font-family:inherit;font-weight:600;font-size:13px
}
.vsm-auth__sent-hint button:hover{text-decoration:underline}

/* skyline — phone only */
.vsm-auth__city{display:none}

.vsm-auth__foot{margin-top:var(--s3);font-size:14px}
.vsm-auth__foot a{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ab);text-decoration:none;font-weight:600
}
.vsm-auth__foot a svg{width:17px;height:17px}
.vsm-auth__foot a:hover{color:var(--ab-d)}

/* ---------- trust bar ---------- */
.vsm-auth__trust{
  grid-area:trust;
  display:grid;grid-template-columns:repeat(4,1fr);
  margin:0 var(--s4) var(--s4);padding:var(--s2) var(--s3);
  background:#fff;border-radius:18px;
  box-shadow:0 18px 44px -28px rgba(15,44,80,.4)
}
.vsm-auth__trust-i{display:flex;align-items:center;gap:14px;padding:10px var(--s2)}
.vsm-auth__trust-i + .vsm-auth__trust-i{border-left:1px solid #EEF2F8}
.vsm-auth__trust-ic{
  flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--ab-tint);color:var(--ab)
}
.vsm-auth__trust-ic svg{width:19px;height:19px}
.vsm-auth__trust-tx b{display:block;font-size:14px;font-weight:700;color:var(--ab-ink);line-height:1.3}
.vsm-auth__trust-tx span{display:block;font-size:12.5px;color:#8494AA;margin-top:2px}

@media(max-width:1080px){
  .vsm-auth__brand{padding:var(--s6) var(--s4)}
  .vsm-auth__trust-tx span{display:none}
}

/* ==========================================================
   AUTH — phone

   Single column, and the brand panel and trust bar are dropped
   entirely rather than stacked under the form. Both were below the
   fold and neither helps someone who is already on the sign-in page;
   keeping them only meant scrolling past a headline to reach the
   email field.
   ========================================================== */
@media(max-width:900px){
  .vsm-auth{
    grid-template-columns:1fr;
    grid-template-areas:"panel";
    background:#fff;
    min-height:calc(100vh - var(--head, 72px));
    min-height:calc(100dvh - var(--head, 72px))
  }
  .vsm-auth__brand,.vsm-auth__trust{display:none}

  .vsm-auth__panel{
    justify-content:flex-start;
    padding:var(--s5) var(--s3) 0;
    position:relative;overflow:hidden;min-height:inherit
  }
  .vsm-auth__card{
    max-width:460px;border:0;box-shadow:none;background:none;
    padding:0;z-index:1
  }

  /* Greeting first, tabs under it — the mobile design's order. */
  .vsm-auth__mlogo{display:block;order:1}
  .vsm-auth__head {order:2;text-align:center;margin-bottom:var(--s3)}
  .vsm-auth__roles{order:3;margin-bottom:var(--s4)}
  .vsm-auth__head h2{font-size:32px}
  .vsm-auth__head p{font-size:16px}

  .vsm-auth__city{
    display:block;order:0;
    position:absolute;left:0;right:0;bottom:0;height:150px;
    pointer-events:none;z-index:0
  }
  .vsm-auth__city svg{width:100%;height:100%;display:block}

  /* Pushed to the bottom of the column rather than trailing the form, so it
     sits on the skyline the way the design has it on a tall screen. */
  .vsm-auth__foot{position:relative;z-index:1;margin:var(--s8) 0 var(--s3);
    margin-top:auto;padding-top:var(--s8);text-align:center}
}

@media(max-width:420px){
  .vsm-auth__panel{padding:var(--s4) var(--s2) 0}
  .vsm-auth__head h2{font-size:28px}
  .vsm-auth .vsm-f input{height:52px}
}

/* ==========================================================
   DASHBOARD
   ========================================================== */
.vsm-dash{font-family:'Inter',system-ui,sans-serif;color:var(--ink);
  max-width:1080px;margin:0 auto;padding:var(--s6) var(--s3) var(--s10)}
.vsm-dash__loading{display:flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:40vh;color:var(--slate);font-size:14px}
.vsm-spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--teal);animation:vsm-spin .8s linear infinite}

/* ---------- tabs: Your profile / Your companies ---------- */
.vsm-tabs{display:flex;gap:var(--s);border-bottom:1px solid var(--line);margin-bottom:var(--s5)}
.vsm-tab{position:relative;appearance:none;background:none;border:0;cursor:pointer;
  font-family:'Inter',system-ui,sans-serif;font-size:14.5px;font-weight:600;color:var(--slate);
  padding:var(--s2) var(--s2) calc(var(--s2) - 2px);display:inline-flex;align-items:center;gap:8px;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}
.vsm-tab:hover{color:var(--ink)}
.vsm-tab.is-active{color:var(--ink);border-bottom-color:var(--teal)}
.vsm-tab__count{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;line-height:1;
  background:var(--line);color:var(--slate);border-radius:20px;padding:4px 7px}
.vsm-tab.is-active .vsm-tab__count{background:rgba(18,181,176,.18);color:var(--teal-d)}
@media(max-width:520px){ .vsm-tab{font-size:13.5px;padding-left:var(--s);padding-right:var(--s)} }

.vsm-dash__top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);
  margin-bottom:var(--s5);flex-wrap:wrap}
.vsm-dash__eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--teal-d);font-weight:700;margin-bottom:6px}
.vsm-dash__hi{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:34px;letter-spacing:-.025em;margin:0}
.vsm-dash__topbtns{display:flex;align-items:center;gap:var(--s2)}

.vsm-dash__cols{display:grid;grid-template-columns:1fr 300px;gap:var(--s4);align-items:start}
@media(max-width:820px){.vsm-dash__cols{grid-template-columns:1fr}}
.vsm-dash__main{display:flex;flex-direction:column;gap:var(--s3)}
.vsm-dash__side{display:flex;flex-direction:column;gap:var(--s2);position:sticky;top:var(--s3)}
.vsm-dash__tip{font-size:12px;color:var(--slate2);line-height:1.5;margin:4px 0 0}

.vsm-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3);box-shadow:var(--shadow-s)}
.vsm-panel__title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:17px;letter-spacing:-.01em;margin:0 0 var(--s2)}
.vsm-panel .vsm-f:last-child{margin-bottom:0}

/* open-to-work switch */
.vsm-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.vsm-switch input{position:absolute;opacity:0;pointer-events:none}
.vsm-switch__track{width:44px;height:26px;border-radius:20px;background:var(--line);position:relative;transition:background .2s;flex:0 0 44px}
.vsm-switch__track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.vsm-switch input:checked + .vsm-switch__track{background:var(--teal)}
.vsm-switch input:checked + .vsm-switch__track::after{transform:translateX(18px)}
.vsm-switch__label{font-size:13px;font-weight:600;color:var(--ink)}

/* skills chips */
.vsm-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border:1.5px solid var(--line);border-radius:var(--r1);
  padding:8px;min-height:46px;background:var(--white);transition:border-color .15s,box-shadow .15s}
.vsm-chips:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(18,181,176,.14)}
.vsm-chips input{flex:1;min-width:120px;border:0;outline:0;height:28px;font-size:14px;font-family:inherit;background:transparent;color:var(--ink)}
.vsm-chip{display:inline-flex;align-items:center;gap:6px;background:var(--sand);color:var(--ink);border-radius:20px;
  padding:5px 10px;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s}
.vsm-chip:hover{background:rgba(255,107,74,.14);color:var(--coral-d)}
.vsm-chip::after{content:"✕";font-size:10px;opacity:.6}

/* completeness ring */
.vsm-meter{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.vsm-meter__ring{--p:0;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px;
  background:conic-gradient(var(--teal) calc(var(--p)*1%), var(--sand) 0);transition:background .6s ease}
.vsm-meter__ring span{width:104px;height:104px;border-radius:50%;background:var(--white);display:grid;place-items:center;
  font-family:'Space Mono',monospace;font-weight:700;font-size:26px;color:var(--ink)}
.vsm-meter__label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--slate2);font-weight:700}
.vsm-meter__hint{font-size:12px;color:var(--slate);line-height:1.5}

/* banners + empty */
.vsm-banner{border-radius:var(--r2);padding:var(--s2) var(--s3);font-size:13.5px;line-height:1.5;margin-bottom:var(--s3)}
.vsm-banner--warn{background:rgba(244,167,43,.14);color:#8a5a00;border:1px solid rgba(244,167,43,.4)}
.vsm-empty{text-align:center;padding:var(--s8) var(--s3);background:var(--white);border:1px dashed var(--line);border-radius:var(--r2)}
.vsm-empty__art{font-size:40px;margin-bottom:var(--s2)}
.vsm-empty h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:20px;margin:0 0 var(--s)}
.vsm-empty p{color:var(--slate);font-size:14px;max-width:440px;margin:0 auto var(--s3);line-height:1.6}
.vsm-empty__btns{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap}
.vsm-empty__btns .vsm-btn{background:var(--white)}
.vsm-empty__btns .vsm-btn--primary{background:var(--ink);color:#fff}

/* company cards */
.vsm-co{background:var(--white);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow-s);margin-bottom:var(--s3);overflow:hidden}
.vsm-co__head{display:flex;align-items:center;gap:var(--s2);padding:var(--s3);cursor:pointer}
.vsm-co__logo{width:var(--s6);height:var(--s6);flex:0 0 var(--s6);border-radius:var(--r1);display:grid;place-items:center;
  color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:18px;
  background-size:contain;background-position:center;background-repeat:no-repeat;overflow:hidden}
.vsm-co__logo[style*="background-image"]{background-color:#fff;border:1px solid var(--line)}
.vsm-co__main{flex:1;min-width:0}
.vsm-co__name{font-weight:700;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.vsm-co__meta{font-size:12.5px;color:var(--slate);margin-top:3px}
.vsm-co__status{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:20px}
.vsm-co__status.publish{background:rgba(18,181,176,.16);color:var(--teal-d)}
.vsm-co__status.pending{background:rgba(244,167,43,.18);color:#8a5a00}
.vsm-co__status.draft{background:rgba(90,107,122,.14);color:var(--slate)}
.vsm-co__chev{color:var(--slate2);transition:transform .25s}
.vsm-co.is-open .vsm-co__chev{transform:rotate(180deg)}
.vsm-co__body{display:none;padding:0 var(--s3) var(--s3);border-top:1px solid var(--line)}
.vsm-co.is-open .vsm-co__body{display:block}
.vsm-co__body .vsm-f{margin-top:var(--s2)}

/* role editor inside company card */
.vsm-roles-ed{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.vsm-role-row{display:grid;grid-template-columns:1fr 130px 120px 40px;gap:8px}
@media(max-width:600px){.vsm-role-row{grid-template-columns:1fr 1fr 40px}.vsm-role-row select:nth-child(3){grid-column:1/3}}
.vsm-role-row input,.vsm-role-row select{height:42px;border:1.5px solid var(--line);border-radius:var(--r1);padding:0 10px;font-size:13.5px;font-family:inherit;color:var(--ink);background:#fff;outline:none}
.vsm-role-row input:focus,.vsm-role-row select:focus{border-color:var(--teal)}
.vsm-role-row button{border:1.5px solid var(--line);background:#fff;border-radius:var(--r1);cursor:pointer;color:var(--coral-d);font-weight:700}
.vsm-addrole{align-self:flex-start;background:none;border:1.5px dashed var(--line);color:var(--slate);border-radius:var(--r1);
  height:40px;padding:0 var(--s2);cursor:pointer;font-weight:600;font-size:12.5px;font-family:inherit;margin-top:8px}
.vsm-addrole:hover{border-color:var(--teal);color:var(--teal-d)}
.vsm-co__actions{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s3)}
.vsm-co__view{font-size:12.5px;color:var(--slate);text-decoration:none;font-weight:600}
.vsm-co__view:hover{color:var(--ink)}

/* buttons */
.vsm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 var(--s3);
  border:1.5px solid var(--line);background:var(--white);color:var(--ink);border-radius:var(--r1);
  font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;transition:transform .12s,background .16s,border-color .16s,box-shadow .16s}
.vsm-btn:hover{border-color:var(--teal);transform:translateY(-1px)}
.vsm-btn:active{transform:translateY(0)}
.vsm-btn--primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.vsm-btn--primary:hover{background:#0d2f52;border-color:#0d2f52;box-shadow:var(--shadow-s)}
.vsm-btn--teal{background:var(--teal);color:var(--ink);border-color:var(--teal)}
.vsm-btn--teal:hover{background:#19CFC9;border-color:#19CFC9}
.vsm-btn--block{width:100%}
.vsm-btn--sm{height:38px;padding:0 var(--s2);font-size:13px}
.vsm-btn:disabled{opacity:.6;cursor:default;transform:none}

/* dashboard toast */
.vsm-dash-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(160%);
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--r2);font-size:14px;font-weight:600;
  box-shadow:var(--shadow-l);z-index:9999;display:flex;align-items:center;gap:10px;transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.vsm-dash-toast.show{transform:translateX(-50%) translateY(0)}
.vsm-dash-toast .tick{width:20px;height:20px;border-radius:50%;background:var(--teal);color:var(--ink);display:grid;place-items:center;font-size:12px;font-weight:800}

/* ============================================================
   COVER + PHOTO (user profile header)
   ============================================================ */
.vsm-cover{position:relative;isolation:isolate;border-radius:var(--r3);overflow:hidden;
  min-height:200px;display:flex;align-items:flex-end;margin-bottom:var(--s3);
  background:linear-gradient(135deg,var(--teal) 0%,var(--ink) 92%)}
.vsm-cover__img{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;
  background-repeat:no-repeat;opacity:0;transition:opacity .3s ease}
.vsm-cover__img.has-img{opacity:1}
.vsm-cover__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,37,64,.10) 0%,rgba(10,37,64,.42) 55%,rgba(10,37,64,.82) 100%)}
.vsm-cover__tools{position:absolute;top:var(--s2);right:var(--s2);z-index:2;display:flex;gap:var(--s);flex-wrap:wrap;justify-content:flex-end}
.vsm-cover__id{position:relative;padding:var(--s3);display:flex;align-items:flex-end;gap:var(--s2);width:100%}
.vsm-cover__text{min-width:0;padding-bottom:4px}
.vsm-cover__name{font-family:'Bricolage Grotesque';font-weight:700;font-size:26px;letter-spacing:-.02em;
  color:#fff;margin:0 0 4px;text-shadow:0 2px 12px rgba(10,37,64,.4);overflow-wrap:anywhere}
.vsm-cover__sub{font-size:13px;color:rgba(255,255,255,.88);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.vsm-avatar{width:var(--s10);height:var(--s10);flex:0 0 var(--s10);border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-family:'Bricolage Grotesque';font-weight:700;font-size:26px;color:#fff;
  background:var(--ink2);border:3px solid #fff;box-shadow:0 10px 28px -12px rgba(10,37,64,.7);
  background-size:cover;background-position:center;position:relative;overflow:hidden}
.vsm-avatar.has-img span{display:none}
.vsm-avatar::after{content:"Change";position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(10,37,64,.6);color:#fff;font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:600;
  opacity:0;transition:opacity .18s ease}
.vsm-avatar:hover::after,.vsm-avatar:focus-visible::after{opacity:1}

/* Small translucent button used on top of any image */
.vsm-imgbtn{border:1px solid rgba(255,255,255,.34);background:rgba(10,37,64,.5);backdrop-filter:blur(6px);
  color:#fff;font-family:inherit;font-size:12px;font-weight:600;height:var(--s4);padding:0 12px;
  border-radius:var(--r1);cursor:pointer;transition:background .18s ease,border-color .18s ease;white-space:nowrap}
.vsm-imgbtn:hover{background:rgba(10,37,64,.74);border-color:rgba(255,255,255,.6)}
.vsm-imgbtn.is-danger{color:#FFD9CE}
.vsm-imgbtn.is-danger:hover{background:var(--coral-d);border-color:var(--coral-d);color:#fff}

@media(max-width:600px){
  .vsm-cover__id{flex-direction:column;align-items:flex-start;gap:var(--s)}
  .vsm-cover__name{font-size:21px}
  .vsm-avatar{width:var(--s8);height:var(--s8);flex-basis:var(--s8);font-size:21px}
}

/* ============================================================
   COMPANY BRAND IMAGES (banner + logo, inside a listing card)
   ============================================================ */
.vsm-media{margin-bottom:var(--s3)}
.vsm-media__banner{position:relative;border-radius:var(--r2);overflow:hidden;height:180px;
  background:var(--sand);background-size:cover;background-position:center;background-repeat:no-repeat;
  border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center}
.vsm-media__banner[style*="background-image"]{border-style:solid}
.vsm-media__empty{text-align:center;padding:var(--s2);color:var(--slate);pointer-events:none;max-width:340px}
.vsm-media__empty b{display:block;font-size:14px;color:var(--ink);margin-bottom:4px}
.vsm-media__empty span{font-size:12px;line-height:1.5;display:block}
.vsm-media__tools{position:absolute;top:var(--s);right:var(--s);display:flex;gap:6px;z-index:2}
.vsm-media__logo{position:absolute;left:var(--s2);bottom:var(--s2);width:var(--s8);height:var(--s8);
  border-radius:var(--r2);background:#fff;border:2px solid #fff;box-shadow:0 8px 24px -10px rgba(10,37,64,.6);
  background-size:contain;background-position:center;background-repeat:no-repeat;
  display:grid;place-items:center;font-family:'Bricolage Grotesque';font-weight:700;font-size:20px;
  color:var(--ink);overflow:hidden}
.vsm-media__row{display:flex;align-items:center;gap:var(--s);margin-top:var(--s2);flex-wrap:wrap}
/* On the pale card background these buttons need the dark treatment */
.vsm-media__row .vsm-imgbtn{background:var(--ink);border-color:var(--ink)}
.vsm-media__row .vsm-imgbtn:hover{background:var(--ink2)}
.vsm-media__row .vsm-imgbtn.is-danger{background:none;border-color:var(--line);color:var(--coral-d)}
.vsm-media__row .vsm-imgbtn.is-danger:hover{background:var(--coral-d);color:#fff;border-color:var(--coral-d)}
.vsm-media__hint{font-size:11.5px;color:var(--slate2);margin-left:auto}
@media(max-width:600px){
  .vsm-media__banner{height:140px}
  .vsm-media__hint{margin-left:0;flex:1 1 100%}
}

/* ============================================================
   LOCATION PICKER (live map inside the edit form)
   ============================================================ */
.vsm-loc{border:1.5px solid var(--line);border-radius:var(--r2);overflow:hidden;background:#fff}
.vsm-loc__search{display:flex;gap:var(--s);padding:var(--s);border-bottom:1px solid var(--line)}
.vsm-loc__q{flex:1;min-width:0;height:var(--s5);border:1.5px solid var(--line);border-radius:var(--r1);
  padding:0 12px;font-size:13.5px;font-family:inherit;color:var(--ink);outline:none}
.vsm-loc__q:focus{border-color:var(--teal)}
.vsm-loc__find,.vsm-loc__geo{height:var(--s5);border:none;border-radius:var(--r1);background:var(--ink);color:#fff;
  font-family:inherit;font-weight:600;font-size:13px;padding:0 var(--s2);cursor:pointer;flex:0 0 auto}
.vsm-loc__find:hover,.vsm-loc__geo:hover{background:var(--ink2)}
.vsm-loc__geo{width:var(--s5);padding:0;font-size:16px;line-height:1}
.vsm-loc__map{height:300px;background:#E9E6DD}
.vsm-loc__map .leaflet-container{height:100%;font-family:'Inter',system-ui,sans-serif}
.vsm-loc__bar{display:flex;align-items:center;gap:var(--s2);padding:var(--s) var(--s2);border-top:1px solid var(--line);
  background:var(--paper);flex-wrap:wrap}
.vsm-loc__coords{font-family:'Space Mono',ui-monospace,monospace;font-size:12px;color:var(--ink);font-weight:700}
.vsm-loc__msg{font-size:12px;color:var(--slate2);margin-left:auto;text-align:right}
.vsm-loc__msg.ok{color:var(--teal-d)}
.vsm-loc__msg.err{color:var(--coral-d);font-weight:600}
@media(max-width:600px){
  .vsm-loc__map{height:240px}
  .vsm-loc__msg{margin-left:0;flex:1 1 100%;text-align:left}
}

/* The draggable pin */
.vsm-pin{width:22px;height:22px;border-radius:50%;background:var(--teal);border:3px solid #fff;
  box-shadow:0 4px 14px -4px rgba(10,37,64,.7);cursor:grab;margin:2px}
.vsm-pin:active{cursor:grabbing}
.leaflet-marker-draggable .vsm-pin{cursor:grab}

/* Tighter dashboard header when a cover sits above it */
.vsm-dash__top--tight{margin-top:calc(var(--s2) * -1)}
.vsm-dash__lede{margin:6px 0 0;font-size:13.5px;color:var(--slate)}

/* Uploaded logo on the sign-in page brand panel */
.vsm-auth__logo.has-logo{display:inline-block}
.vsm-auth__logo .vsm-logo-img,.vsm-verify__logo .vsm-logo-img,.vsm-logo-img{
  display:block;width:auto;height:auto;
  max-height:var(--logo-h,48px);max-width:min(260px,68vw);object-fit:contain}
@media(max-width:860px){
  .vsm-auth__logo .vsm-logo-img,.vsm-verify__logo .vsm-logo-img,.vsm-logo-img{
    max-height:var(--logo-h-m,38px)}
}

/* ---------- "check your inbox" panel + forgot link ---------- */
.vsm-auth__forgot{margin:calc(var(--s2) * -1 + 4px) 0 var(--s2);text-align:right}
.vsm-auth__forgot button{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--slate);text-decoration:underline;text-underline-offset:2px}
.vsm-auth__forgot button:hover{color:var(--teal-d)}

.vsm-auth__sent{text-align:center;padding:var(--s3) 0 var(--s2)}
.vsm-auth__sent-art{width:56px;height:56px;margin:0 auto var(--s2);border-radius:50%;
  display:grid;place-items:center;font-size:24px;
  background:rgba(18,181,176,.14);color:var(--teal-d)}
.vsm-auth__sent h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:20px;
  letter-spacing:-.01em;margin:0 0 var(--s)}
.vsm-auth__sent p{color:var(--slate);font-size:14px;line-height:1.6;margin:0 auto var(--s2);max-width:340px}
.vsm-auth__sent-hint{font-size:12.5px;color:var(--slate2)}
.vsm-auth__sent-hint button{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:inherit;font-weight:600;color:var(--teal-d);text-decoration:underline;text-underline-offset:2px}
.vsm-auth__sent-hint button:disabled{opacity:.6;cursor:default}

/* =========================================================================
   Email confirmation page (includes/verify.php)
   Rendered standalone, so it carries its own page-level styling.
   ========================================================================= */
.vsm-verify-body{margin:0;background:var(--sand,#faf8f5);font-family:'Inter',system-ui,sans-serif;color:var(--ink,#0f2a44)}
.vsm-verify{min-height:100vh;display:grid;place-items:center;padding:var(--s4,32px) var(--s2,16px)}
.vsm-verify__card{width:100%;max-width:460px;background:#fff;border:1px solid var(--line,#e6e1da);
  border-radius:var(--r2,18px);padding:40px 36px;text-align:center;box-shadow:var(--shadow-s,0 2px 10px rgba(15,42,68,.06))}
.vsm-verify__logo{display:inline-block;margin-bottom:var(--s3,24px);font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink,#0f2a44);text-decoration:none}
.vsm-verify__logo span{color:var(--teal,#12b5b0)}
.vsm-verify__logo img{display:block;max-height:36px;width:auto}
.vsm-verify__art{width:56px;height:56px;margin:0 auto var(--s3,24px);border-radius:50%;
  display:grid;place-items:center;font-size:24px;line-height:1;
  background:rgba(18,181,176,.12);color:var(--teal-d,#0d8c88)}
.vsm-verify__art.is-dead{background:rgba(240,110,90,.12);color:#c9503a;font-weight:800}
.vsm-verify h1{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:25px;font-weight:800;
  letter-spacing:-.02em;margin:0 0 10px}
.vsm-verify p{margin:0 0 var(--s3,24px);font-size:14.5px;line-height:1.6;color:var(--slate,#5b6b7c)}
.vsm-verify__btn{display:inline-flex;align-items:center;justify-content:center;width:100%;height:48px;
  border:0;border-radius:var(--r1,12px);background:var(--ink,#0f2a44);color:#fff;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:15px;text-decoration:none;
  transition:background .18s,transform .12s}
.vsm-verify__btn:hover{background:#0d2f52}
.vsm-verify__btn:active{transform:translateY(1px)}
.vsm-verify__foot{margin:var(--s3,24px) 0 0;font-size:12.5px;color:var(--slate2,#8b98a5)}
.vsm-verify__foot a{color:var(--slate,#5b6b7c)}
@media(max-width:520px){.vsm-verify__card{padding:32px 22px}}

/* =========================================================================
   Onboarding (templates/onboarding.php)
   ========================================================================= */
.vsm-noscroll{overflow:hidden}
.vsm-ob{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:var(--s2,16px)}
/* WHY THE CARD IS NEVER SIZED IN vh:
   Chrome on Android reports 100vh as the viewport with the URL bar collapsed,
   which is taller than what you can actually see. The card was 100vh inside a
   fixed overlay, so it overflowed the bottom of the screen and took the footer
   with it — the Continue and Skip buttons were rendered, just underneath the
   browser chrome where no thumb could reach them.
   position:fixed + inset:0 above already sizes this overlay to exactly the
   viewport fixed elements are laid out against, so the card just takes 100%
   of it and no viewport unit is involved anywhere. */
.vsm-ob[hidden]{display:none}
.vsm-ob__backdrop{position:absolute;inset:0;background:rgba(15,42,68,.55);backdrop-filter:blur(3px)}
.vsm-ob__card{position:relative;width:100%;max-width:560px;max-height:92vh;display:flex;flex-direction:column;
  background:#fff;border-radius:var(--r2,18px);overflow:hidden;box-shadow:0 24px 60px rgba(15,42,68,.28);
  animation:vsm-ob-in .22s cubic-bezier(.2,.7,.3,1)}
@keyframes vsm-ob-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.vsm-ob__card{animation:none}}

.vsm-ob__bar{height:3px;background:var(--line,#e6e1da);flex:0 0 auto}
.vsm-ob__bar span{display:block;height:100%;width:33%;background:var(--teal,#12b5b0);transition:width .3s ease}

.vsm-ob__head{padding:26px 30px 4px;flex:0 0 auto}
.vsm-ob__step{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate2,#8b98a5);margin-bottom:8px}
.vsm-ob__head h2{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:23px;font-weight:800;
  letter-spacing:-.02em;margin:0 0 6px;color:var(--ink,#0f2a44)}
.vsm-ob__head p{margin:0;font-size:14px;color:var(--slate,#5b6b7c);line-height:1.55}

.vsm-ob__body{padding:20px 30px;overflow-y:auto;flex:1 1 auto;min-height:0;-webkit-overflow-scrolling:touch}
.vsm-ob__panel[hidden]{display:none}
.vsm-ob__q{border:0;padding:0;margin:0 0 var(--s3,24px)}
.vsm-ob__q legend{padding:0;font-size:14px;font-weight:700;color:var(--ink,#0f2a44);margin-bottom:4px}
.vsm-ob__help{margin:0 0 10px;font-size:12px;color:var(--slate2,#8b98a5)}
.vsm-ob__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.vsm-obchip{appearance:none;border:1.5px solid var(--line,#e6e1da);background:#fff;color:var(--slate,#5b6b7c);
  font-family:inherit;font-size:13.5px;font-weight:600;padding:9px 14px;border-radius:999px;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
.vsm-obchip:hover{border-color:var(--teal,#12b5b0);color:var(--ink,#0f2a44)}
.vsm-obchip.is-on{background:var(--ink,#0f2a44);border-color:var(--ink,#0f2a44);color:#fff}
.vsm-obchip:focus-visible{outline:2px solid var(--teal,#12b5b0);outline-offset:2px}

.vsm-ob__consent h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:18px;font-weight:800;
  margin:0 0 8px;color:var(--ink,#0f2a44)}
.vsm-ob__consent p{margin:0 0 var(--s2,16px);font-size:13.5px;line-height:1.6;color:var(--slate,#5b6b7c)}
.vsm-ob__consent .vsm-check{padding:14px;border:1.5px solid var(--line,#e6e1da);border-radius:var(--r1,12px);
  font-size:13.5px;color:var(--ink,#0f2a44)}
.vsm-ob__consent .vsm-check:hover{border-color:var(--teal,#12b5b0)}
.vsm-ob__fine{font-size:11.5px !important;color:var(--slate2,#8b98a5) !important;margin-top:12px !important}

.vsm-ob__msg{margin:0 30px;padding:10px 12px;border-radius:10px;font-size:13px}
.vsm-ob__msg[hidden]{display:none}
.vsm-ob__msg.err{background:rgba(240,110,90,.1);color:#a8412c}
.vsm-ob__msg.ok{background:rgba(18,181,176,.12);color:var(--teal-d,#0d8c88)}

.vsm-ob__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2,16px);
  padding:18px 30px;border-top:1px solid var(--line,#e6e1da);flex:0 0 auto;
  position:sticky;bottom:0;background:#fff;z-index:2}
.vsm-ob__nav{display:flex;gap:10px;align-items:center}
.vsm-ob__skip{border:0;background:none;color:var(--slate2,#8b98a5);font-family:inherit;font-size:13px;cursor:pointer;padding:0}
.vsm-ob__skip:hover{color:var(--slate,#5b6b7c);text-decoration:underline}
.vsm-ob__back{border:1.5px solid var(--line,#e6e1da);background:#fff;color:var(--slate,#5b6b7c);
  font-family:inherit;font-size:14px;font-weight:600;padding:0 18px;height:42px;border-radius:var(--r1,12px);cursor:pointer}
.vsm-ob__back:hover{border-color:var(--slate2,#8b98a5);color:var(--ink,#0f2a44)}
.vsm-ob__next{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;
  background:var(--ink,#0f2a44);color:#fff;font-family:inherit;font-size:14.5px;font-weight:700;
  padding:0 24px;height:42px;border-radius:var(--r1,12px);cursor:pointer;transition:background .18s}
.vsm-ob__next:hover{background:#0d2f52}
.vsm-ob__next:disabled{opacity:.7;cursor:default}
@media(max-width:560px){
  .vsm-ob{padding:0}
  /* 100% of the fixed parent, which is already pinned to the visible viewport
     above — never 100vh, which overshoots on mobile. */
  .vsm-ob__card{max-width:none;height:100%;max-height:100%;border-radius:0}
  .vsm-ob__head,.vsm-ob__body,.vsm-ob__foot{padding-left:20px;padding-right:20px}
  .vsm-ob__msg{margin-left:20px;margin-right:20px}
  /* Thumb-sized targets, and clear of the home indicator. */
  .vsm-ob__foot{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .vsm-ob__next,.vsm-ob__back{height:48px}
  .vsm-ob__skip{padding:12px 0}
}

/* =========================================================================
   Domain verification (templates/domain.php)
   ========================================================================= */
/* The panel is printed after .vsm-dash closes, so it carries the same
   container width itself rather than stretching edge to edge. */
.vsm-dash-extra{max-width:1080px;margin:calc(-1 * var(--s6,48px)) auto 0;padding:0 var(--s3,24px) var(--s10,80px)}
.vsm-panel__lede{margin:0;font-size:13px;line-height:1.55;color:var(--slate,#5b6b7c)}
.vsm-dom .vsm-panel__title{margin-bottom:4px}
.vsm-dom__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2,16px);margin-bottom:var(--s2,16px)}
.vsm-dom__badge{flex:0 0 auto;background:rgba(18,181,176,.14);color:var(--teal-d,#0d8c88);
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.vsm-dom__badge[hidden]{display:none}

.vsm-dom__msg{margin-bottom:var(--s2,16px);padding:10px 12px;border-radius:10px;font-size:13px}
.vsm-dom__msg[hidden]{display:none}
.vsm-dom__msg.err{background:rgba(240,110,90,.1);color:#a8412c}
.vsm-dom__msg.ok{background:rgba(18,181,176,.12);color:var(--teal-d,#0d8c88)}

.vsm-dom__done{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r1,12px);
  background:rgba(18,181,176,.07);border:1.5px solid rgba(18,181,176,.25)}
.vsm-dom__done[hidden]{display:none}
.vsm-dom__done-icon{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--teal,#12b5b0);color:#fff;font-weight:800;font-size:16px}
.vsm-dom__done>div{flex:1 1 auto;min-width:0}
.vsm-dom__done strong{display:block;font-size:15px;color:var(--ink,#0f2a44);word-break:break-all}
.vsm-dom__done p{margin:2px 0 0;font-size:12.5px;color:var(--slate,#5b6b7c)}

.vsm-dom__start[hidden],.vsm-dom__prove[hidden],.vsm-dom__method[hidden]{display:none}
.vsm-dom__row{display:flex;gap:8px}
.vsm-dom__row input{flex:1 1 auto;min-width:0}
.vsm-dom__for{font-size:13.5px;color:var(--slate,#5b6b7c);margin:0 0 var(--s2,16px)}
.vsm-dom__for strong{color:var(--ink,#0f2a44);word-break:break-all}
.vsm-linkbtn{border:0;background:none;padding:0;color:var(--teal-d,#0d8c88);font-family:inherit;
  font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:underline}

.vsm-dom__tabs{display:flex;gap:6px;background:var(--sand,#faf8f5);padding:4px;border-radius:var(--r1,12px);margin-bottom:var(--s2,16px)}
.vsm-dom__tab{flex:1 1 0;border:0;background:none;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--slate,#5b6b7c);padding:9px 8px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s}
.vsm-dom__tab.is-on{background:#fff;color:var(--ink,#0f2a44);box-shadow:0 1px 3px rgba(15,42,68,.1)}

.vsm-dom__method p{font-size:13.5px;line-height:1.6;color:var(--slate,#5b6b7c);margin:0 0 var(--s2,16px)}
.vsm-dom__kv{display:grid;grid-template-columns:110px 1fr;gap:8px 14px;margin:0 0 var(--s2,16px);align-items:center}
.vsm-dom__kv dt{font-size:12px;font-weight:700;color:var(--slate2,#8b98a5)}
.vsm-dom__kv dd{margin:0;display:flex;align-items:center;gap:8px;min-width:0}
.vsm-dom__kv code{flex:1 1 auto;min-width:0;background:var(--sand,#faf8f5);border:1px solid var(--line,#e6e1da);
  border-radius:8px;padding:8px 10px;font-family:'Space Mono',monospace;font-size:12px;
  color:var(--ink,#0f2a44);overflow-wrap:anywhere}
.vsm-copy{flex:0 0 auto;border:1.5px solid var(--line,#e6e1da);background:#fff;color:var(--slate,#5b6b7c);
  font-family:inherit;font-size:11.5px;font-weight:700;padding:6px 10px;border-radius:8px;cursor:pointer}
.vsm-copy:hover{border-color:var(--teal,#12b5b0);color:var(--teal-d,#0d8c88)}
.vsm-dom__note{font-size:12px !important;color:var(--slate2,#8b98a5) !important}
.vsm-dom__note[hidden]{display:none}
.vsm-dom__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:var(--s2,16px);padding-top:var(--s2,16px);border-top:1px solid var(--line,#e6e1da)}
.vsm-dom__hint{font-size:12px;color:var(--slate2,#8b98a5)}

.vsm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;
  background:var(--ink,#0f2a44);color:#fff;font-family:inherit;font-size:14px;font-weight:700;
  height:46px;padding:0 20px;border-radius:var(--r1,12px);cursor:pointer;transition:background .18s}
.vsm-btn:hover{background:#0d2f52}
.vsm-btn:disabled{opacity:.7;cursor:default}
.vsm-btn--ghost{background:#fff;color:var(--slate,#5b6b7c);border:1.5px solid var(--line,#e6e1da)}
.vsm-btn--ghost:hover{background:var(--sand,#faf8f5);color:var(--ink,#0f2a44);border-color:var(--slate2,#8b98a5)}
@media(max-width:520px){
  .vsm-dom__kv{grid-template-columns:1fr;gap:4px 0}
  .vsm-dom__kv dt{margin-top:8px}
  .vsm-dom__row{flex-direction:column}
}