@import url("/shared/button-tokens.css?v=vendiac-1.06");
.workspace-setup { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: auto; width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 0 8px; color: #fff; font-family: var(--vendiac-font); }
.workspace-setup-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workspace-setup-heading h1 { min-width: 0; margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -.055em; font-weight: 700; }
.workspace-progress-copy { display: flex; justify-content: space-between; gap: 16px; margin: 10px 0 6px; font-size: 12px; font-weight: 600; }
.workspace-progress-copy span:last-child { color: #b5b7c0; font-weight: 500; }
.workspace-progress { height: 9px; overflow: hidden; border-radius: 999px; background: #23252a; }
.workspace-progress-fill { height: 100%; border-radius: inherit; background: #fff; }
.workspace-steps { display: flex; flex-direction: column; flex: 1; min-height: 264px; padding: 0; margin: 10px 0 0; list-style: none; border-top: 1px solid #26272b; }
.workspace-steps li { display: flex; flex: 1; min-height: 44px; }
.workspace-steps li { flex-basis: auto; flex-shrink: 0; }
.workspace-steps li + li { border-top: 1px solid #26272b; }
.workspace-step { display: flex; flex: 1; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 2px 0; border: 0; background: transparent; color: #fff; text-align: left; cursor: pointer; }
.workspace-step:disabled { cursor: default; opacity: 1; }
.workspace-step-number { flex: 0 0 26px; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.workspace-step-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.workspace-step-title { font-size: 14px; line-height: 1.3; font-weight: 600; }
.workspace-step-detail { font-size: 10px; line-height: 1.4; color: #a9abb5; }
.workspace-step-arrow { display: flex; flex: 0 0 38px; align-items: center; justify-content: center; height: 38px; border: 1px solid #007aff; border-radius: 999px; background: #007aff; color: #fff; }
.workspace-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 0; color: #b7bdc7; font-size: 13px; line-height: 1.45; }
.workspace-notice--error { color: #ffb4ae; }
.workspace-notice button,.workspace-link { min-height: 40px; border: 0; background: transparent; color: #fff; text-decoration: underline; cursor: pointer; font-size: 13px; }
.workspace-subscribe { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; padding: 0 22px; border: 1px solid #fff; border-radius: 999px; background: #fff; color: #08080a; font-weight: 700; cursor: pointer; }
.workspace-dialog-backdrop { position: fixed; z-index: 2000; inset: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 20px; background: rgba(0,0,0,.82); }
.workspace-dialog { width: 100%; max-width: 540px; max-height: calc(100dvh - 40px); overflow: auto; padding: 24px; border: 1px solid #33343b; border-radius: 22px; background: #101013; color: #fff; }
.workspace-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.workspace-dialog-heading h2 { margin: 0; font-size: 25px; line-height: 1.2; letter-spacing: -.035em; }
.workspace-dialog-close { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #33343b; border-radius: 50%; background: var(--vendiac-control-bg); color: var(--vendiac-control-ink); font-size: 28px; cursor: pointer; }
.workspace-dialog-body { margin: 14px 0 20px; color: #b5b7c0; font-size: 14px; line-height: 1.5; }
.workspace-form { display: flex; flex-direction: column; gap: 16px; }
.workspace-field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; }
.workspace-field input,.workspace-field textarea,.workspace-field select { width: 100%; min-height: 48px; padding: 12px; resize: vertical; border: 1px solid #3a3b42; border-radius: 10px; background: #080809; color: #fff; font-size: 16px; line-height: 1.5; }
.workspace-primary { min-height: 50px; padding: 10px 18px; border: 1px solid #fff; border-radius: 999px; background: #fff; color: #101013; font-size: 14px; font-weight: 700; cursor: pointer; }
.workspace-primary:disabled { border-color: #4a4b52; background: #292a30; color: #8f919b; cursor: default; }
.workspace-plans { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; }
.workspace-plan { display: flex; align-items: flex-start; gap: 10px; padding: 16px; border: 1px solid #3a3b42; border-radius: 12px; cursor: pointer; }
.workspace-plan:has(input:checked) { border-color: #fff; }
.workspace-plan input,.workspace-goals input { accent-color: #fff; margin-top: 3px; }
.workspace-plan-copy { display: flex; flex: 1; flex-direction: column; gap: 7px; font-size: 12px; line-height: 1.5; color: #b5b7c0; }
.workspace-plan-copy strong { color: #fff; font-size: 17px; }
.workspace-plan-price { color: #fff; font-size: 13px; }
.workspace-goals { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; margin: 0; border: 0; }
.workspace-goals legend { margin-bottom: 12px; font-size: 13px; font-weight: 600; }
.workspace-goals label { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; }
.workspace-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width: 600px) { .workspace-setup { padding-top: 8px; } .workspace-step-title { font-size: 17px; } .workspace-step-detail { font-size: 13px; } }
@media (max-width: 380px) { .workspace-setup-heading { gap: 6px; } .workspace-setup-heading h1 { font-size: 24px; } .workspace-step { gap: 10px; } }
@media (max-width: 599px) {
  .workspace-setup-heading { gap: 6px; }
  .workspace-setup-heading h1 { font-size: 23px; letter-spacing: -.045em; white-space: nowrap; }
}
@media (max-width: 340px) { .workspace-setup-heading { flex-wrap: wrap; } }
.workspace-setup[lang="th"] .workspace-setup-heading { flex-wrap: wrap; }
.workspace-setup[lang="th"] .workspace-setup-heading h1 { letter-spacing: 0; line-height: 1.4; }

/* Business selection and the finished tutorial reuse the native frame and dock. */
.workspace-business-manager { display: flex; flex: 1; flex-direction: column; min-height: 0; width: 100%; max-width: 1360px; align-self: center; padding: 10px max(16px, env(safe-area-inset-left)) 20px; overflow: auto; color: #fff; font-family: var(--vendiac-font); }
.workspace-business-manager button,.workspace-business-hub button,.workspace-tutorial-skip { font-family: inherit; }
.workspace-business-back { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 32px; padding: 0; margin: 0 0 10px -8px; border: 0; background: transparent; color: #fff; cursor: pointer; }
.workspace-business-back svg { transform: rotate(180deg); }
.workspace-business-manager-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.workspace-business-manager-title { min-width: 0; }
.workspace-business-manager-title h1 { margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.18; font-weight: 750; letter-spacing: -.045em; }
.workspace-business-manager-title p { margin: 3px 0 0; color: #acb2bf; font-size: 12px; line-height: 18px; font-weight: 500; }
.workspace-business-add { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: #007aff; color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap; }
.workspace-business-plus { font-size: 23px; line-height: 22px; font-weight: 400; }
.workspace-business-list { display: flex; flex: 0 0 auto; flex-direction: column; gap: 8px; }
.workspace-business-row { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 70px; padding: 11px 14px; border: 0; border-radius: 22px; background: #0f0f11; color: #fff; text-align: left; cursor: pointer; }
.workspace-business-row--current { background: #007aff; }
.workspace-business-initials { display: flex; flex: 0 0 48px; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #020202; color: #b8becb; font-size: 20px; line-height: 25px; font-weight: 700; }
.workspace-business-row--current .workspace-business-initials { color: #fff; }
.workspace-business-row-copy { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.workspace-business-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; line-height: 26px; font-weight: 700; }
.workspace-business-domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a5afc2; font-size: 11px; line-height: 16px; }
.workspace-business-row--current .workspace-business-domain { color: #fff; }
.workspace-business-chevron { display: flex; flex: 0 0 18px; color: #b0b8c7; }
.workspace-business-row--current .workspace-business-chevron { color: #fff; }
.workspace-business-empty { margin: 8px 0; color: #a5a5ad; font-size: 14px; line-height: 20px; }
.workspace-business-manager button:disabled,.workspace-business-hub button:disabled,.workspace-tutorial-skip:disabled { cursor: default; }
.workspace-business-hub { display: flex; flex-direction: column; width: 100%; max-width: 1360px; min-height: 0; height: 100%; margin: 0 auto; overflow: auto; color: #fff; font-family: var(--vendiac-font); }
.workspace-hub-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 26px; }
.workspace-hub-heading h1 { min-width: 0; margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.14; font-weight: 700; letter-spacing: -.045em; }
.workspace-business-actions { display: flex; flex: 0 0 auto; flex-direction: column; gap: 10px; }
.workspace-business-action { display: flex; align-items: center; gap: 20px; width: 100%; min-height: 88px; padding: 14px 4px 14px 0; border: 0; border-radius: 24px; background: #090a0c; color: #fff; text-align: left; cursor: pointer; }
.workspace-business-action-icon { display: flex; flex: 0 0 58px; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #000; color: #fff; }
.workspace-business-action-label { flex: 1; min-width: 0; font-size: 16px; line-height: 23px; font-weight: 650; }
.workspace-business-action-arrow { display: flex; flex: 0 0 42px; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #007aff; color: #fff; }
.workspace-tutorial-footer { display: flex; flex: 0 0 auto; justify-content: flex-end; padding-top: 8px; }
.workspace-tutorial-skip { min-height: 38px; padding: 0 16px; border: 1px solid #2c2e34; border-radius: 999px; background: #111214; color: #fff; cursor: pointer; font-size: 12px; font-weight: 600; }
.workspace-business-manager button:focus-visible,.workspace-business-hub button:focus-visible,.workspace-tutorial-skip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) { .workspace-business-add:not(:disabled):hover { background: #006ee6; } .workspace-business-row:not(:disabled):hover { background: #18181c; } .workspace-business-row--current:not(:disabled):hover { background: #007aff; } .workspace-business-action:not(:disabled):hover { background: #111216; } }
@media (max-width: 599px) {
  .workspace-business-manager { padding-left: 10px; padding-right: 16px; }
  .workspace-business-manager-heading { gap: 8px; margin-left: 6px; }
  .workspace-business-manager-title h1 { font-size: 25px; }
  .workspace-business-add { padding: 0 10px; gap: 6px; font-size: 10.5px; }
  .workspace-business-plus { font-size: 20px; }
  .workspace-business-back { margin-left: 0; }
  .workspace-business-row { gap: 16px; padding-left: 14px; }
  .workspace-business-hub { margin-left: calc(-1 * var(--workspace-content-gutter)); margin-right: calc(-1 * var(--workspace-content-gutter)); width: calc(100% + 2 * var(--workspace-content-gutter)); }
  .workspace-hub-heading { gap: 7px; margin-bottom: 24px; }
  .workspace-hub-heading h1 { font-size: 22px; }
  .workspace-business-action[data-vendiac-business-action="theme"] .workspace-business-action-label { font-size: 13px; letter-spacing: -.035em; }
}
@media (max-width: 380px) {
  .workspace-business-manager-heading { flex-wrap: wrap; }
  .workspace-business-manager-title h1 { font-size: 25px; }
  .workspace-business-row { gap: 10px; }
  .workspace-business-initials { flex-basis: 42px; width: 42px; height: 42px; }
  .workspace-business-action { gap: 12px; }
  .workspace-business-action-label { font-size: 15px; }
  .workspace-hub-heading { flex-wrap: wrap; }
}
.workspace-business-manager[lang="th"] .workspace-business-manager-heading,.workspace-business-hub[lang="th"] .workspace-hub-heading { flex-wrap: wrap; }
.workspace-business-manager[lang="th"] h1,.workspace-business-hub[lang="th"] h1 { letter-spacing: 0; line-height: 1.35; }
@media (max-height: 650px) { .workspace-hub-heading { margin-bottom: 12px; } .workspace-business-action { min-height: 64px; padding-top: 7px; padding-bottom: 7px; } .workspace-business-action-icon { width: 48px; height: 48px; flex-basis: 48px; } .workspace-business-actions { gap: 8px; } }
@media (max-height: 500px) and (min-width: 600px) { .workspace-business-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .workspace-setup *,.workspace-dialog * { animation: none !important; transition: none !important; } }

/* Neutral surfaces are opt-in attributes produced by the native UI controls. */
@media (hover: hover) {
  #root [data-vendiac-control="true"]:not([aria-disabled="true"]):hover,
  #root :is([role="button"], [role="tab"]):not([aria-disabled="true"]):hover > [data-vendiac-control-surface="true"] {
    background-color: var(--vendiac-control-hover) !important;
  }
  .workspace-dialog-close:not(:disabled):hover { background: var(--vendiac-control-hover); }
  .workspace-step:not(:disabled):hover .workspace-step-arrow { background: #007aff; }
}

/* The existing native header and bottom dock bound this frame. Keep all six
   steps visible at normal text size; enlarged text can scroll within the setup
   surface rather than being clipped. Other app pages keep their own layouts. */
#root [data-vendiac-setup="true"] { overflow: auto; overscroll-behavior: contain; }
#root [data-vendiac-setup-list="true"] { min-height: 264px; }
#root [data-vendiac-setup-task] { flex-basis: auto !important; flex-shrink: 0 !important; }
#root [data-vendiac-setup-circle="true"] { width: 38px; height: 38px; flex-shrink: 0; background: #007aff; border-color: #007aff; }
@media (max-height: 650px) and (max-width: 599px) {
  #root [data-vendiac-setup-heading="true"] [role="heading"] { font-size: 26px !important; line-height: 31px !important; }
}
/* Reserve the skip action on small first-run screens by tightening gaps,
   while every native tutorial task keeps its existing 44px target. */
@media (max-height: 600px) and (max-width: 380px) {
  #root [data-vendiac-setup-progress="true"] { margin-top: 4px !important; }
  #root [data-vendiac-setup-progress="true"] + [role="progressbar"] { margin-top: 3px !important; }
  #root [data-vendiac-setup-list="true"] { margin-top: 6px !important; }
  #root [data-vendiac-setup="true"] .workspace-tutorial-footer { padding-top: 4px; }
}
@media (max-width: 340px) {
  #root [data-vendiac-setup-task] [dir="auto"] { font-size: 14px !important; line-height: 20px !important; }
}
@media (max-height: 500px) and (min-width: 600px) {
  #root [data-vendiac-setup-heading="true"] [role="heading"] { font-size: 25px !important; line-height: 30px !important; }
  #root [data-vendiac-setup-progress="true"] { margin-top: 4px !important; }
  #root [data-vendiac-setup-list="true"] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(44px, 1fr)); gap: 0 18px; min-height: 132px; margin-top: 6px !important; }
  #root [data-vendiac-setup-task] { min-height: 44px !important; }
  .workspace-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 132px; gap: 0 18px; }
}
#root :is([role="button"], [role="tab"]):focus-visible,
.workspace-setup button:focus-visible,
.workspace-dialog button:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 3px !important;
  box-shadow: none;
}

/* 1.16: scoped native dock surfaces and the assistant's single rainbow edge.
   Native hit targets, icons, navigation and focus indicators stay intact. */
#root [data-vendiac-dock="true"] [data-vendiac-dock-control],
#root [data-vendiac-dock="true"] [data-vendiac-dock-control]:hover,
#root [data-vendiac-dock="true"] [data-vendiac-dock-icon="true"] {
  background-color: #000000 !important;
  border-color: #000000 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
#root [data-vendiac-dock="true"] [data-vendiac-dock-pill="true"] {
  background-color: #000000 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
/* The native assistant uses a portal outside #root. Only its aura rects
   are affected; message/input/history controls and SVG icons are untouched. */
[data-vendiac-assistant-frame="true"] svg rect:not(:last-of-type) {
  display: none !important;
}
[data-vendiac-assistant-frame="true"] svg rect:last-of-type {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: clamp(44px, 6vmin, 72px);
  ry: clamp(44px, 6vmin, 72px);
  stroke-width: 2px !important;
  opacity: 1 !important;
  filter: none !important;
}
[data-vendiac-assistant-frame="true"] linearGradient stop[stop-color="#09080d"] {
  stop-color: #b85cff;
}
/* The inherited short rail otherwise clips Menu behind Grok in Thai.
   Keep its icons/labels and 46px targets; reclaim only vertical spacing. */
@media (min-width: 600px) and (max-height: 420px) {
  #root [aria-label="Vendiac"]:has(+ div > div > [role="tab"]) {
    height: 44px !important;
  }
  #root [aria-label="Vendiac"] + div > div > :is([role="tab"], [role="button"]) {
    min-height: 46px !important;
  }
}

/* 1.17: retain native navigation and safe page gutters; align the hub's
   typography and controls without stretching it beyond the workspace. */
.workspace-business-hub {
  width: 100%;
  max-width: 1360px;
  min-width: 0;
  margin: 0 auto;
  overflow-x: hidden;
}
.workspace-hub-heading {
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0 22px;
}
.workspace-hub-heading h1 { flex: 1 1 240px; }
.workspace-business-action {
  gap: 16px;
  padding: 14px 12px;
}
.workspace-business-action-icon { flex-basis: 52px; width: 52px; height: 52px; }
.workspace-business-action-label,
.workspace-business-action[data-vendiac-business-action="theme"] .workspace-business-action-label {
  font-size: 16px;
  line-height: 23px;
  letter-spacing: 0;
}
.workspace-business-action-arrow { flex-basis: 44px; width: 44px; height: 44px; }
@media (max-width: 599px) {
  .workspace-business-hub { width: 100%; max-width: 100%; margin: 0; }
  .workspace-hub-heading h1 { font-size: 22px; }
  .workspace-business-action { gap: 12px; min-height: 84px; padding: 12px 10px; }
  .workspace-business-action-icon { flex-basis: 48px; width: 48px; height: 48px; }
  .workspace-business-action-label,
  .workspace-business-action[data-vendiac-business-action="theme"] .workspace-business-action-label {
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0;
  }
}
@media (max-height: 650px) {
  .workspace-hub-heading { margin-bottom: 12px; }
  .workspace-business-action { min-height: 66px; padding-top: 9px; padding-bottom: 9px; }
  .workspace-business-action-icon { flex-basis: 44px; width: 44px; height: 44px; }
}

/* The outer black circles remain visible; the selected state is carried by
   the existing white filled icon instead of a rectangular surface. */
#root [data-vendiac-dock="true"] {
  --vendiac-dock-circle: clamp(48px, 14.5vw, 58px);
}
#root [data-vendiac-dock="true"] > div { min-height: 58px !important; margin-left: 8px !important; margin-right: 8px !important; gap: 8px !important; }
#root [data-vendiac-dock="true"] [data-vendiac-dock-control],
#root [data-vendiac-dock="true"] [data-vendiac-dock-control]:hover {
  width: var(--vendiac-dock-circle) !important;
  height: var(--vendiac-dock-circle) !important;
  border: 1px solid #30343c !important;
  border-radius: 50% !important;
  background-color: #000000 !important;
}
#root [data-vendiac-dock="true"] [data-vendiac-dock-pill="true"] {
  min-height: 58px !important;
  padding: 3px !important;
  border: 1px solid #30343c !important;
}
#root [data-vendiac-dock="true"] [data-vendiac-dock-tab="true"] {
  min-height: 50px !important;
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: 999px !important;
}
#root [data-vendiac-dock="true"] [data-vendiac-dock-icon="true"] {
  width: 48px !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: #000000 !important;
}
#root [data-vendiac-dock="true"] [data-vendiac-dock-icon="true"] svg,
#root [data-vendiac-dock="true"] [data-vendiac-dock-control="search"] svg { width: 26px !important; height: 26px !important; }
#root [data-vendiac-dock="true"] [data-vendiac-dock-control="grok"] svg { width: 34px !important; height: 34px !important; }
#root [data-vendiac-dock="true"] [data-vendiac-dock-tab="true"]:focus-visible { outline: none !important; }
#root [data-vendiac-dock="true"] [data-vendiac-dock-tab="true"]:focus-visible > [data-vendiac-dock-icon="true"] { outline: 2px solid #fff !important; outline-offset: 2px !important; }
@media (max-width: 389px) {
  #root [data-vendiac-dock="true"] { --vendiac-dock-circle: clamp(48px, 14.5vw, 54px); }
  #root [data-vendiac-dock="true"] > div { min-height: 54px !important; gap: 6px !important; }
  #root [data-vendiac-dock="true"] [data-vendiac-dock-pill="true"] { min-height: 54px !important; padding: 3px !important; }
  #root [data-vendiac-dock="true"] [data-vendiac-dock-tab="true"] { min-height: 46px !important; }
  #root [data-vendiac-dock="true"] [data-vendiac-dock-icon="true"] { width: 44px !important; height: 44px !important; }
  #root [data-vendiac-dock="true"] [data-vendiac-dock-icon="true"] svg,
  #root [data-vendiac-dock="true"] [data-vendiac-dock-control="search"] svg { width: 24px !important; height: 24px !important; }
  #root [data-vendiac-dock="true"] [data-vendiac-dock-control="grok"] svg { width: 32px !important; height: 32px !important; }
}
#root [data-vendiac-header="true"] [data-vendiac-header-control],
#root [data-vendiac-header="true"] [data-vendiac-header-control]:hover {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 1px solid #30343c !important;
  border-radius: 50% !important;
  background-color: #000000 !important;
  box-shadow: none !important;
}
#root [data-vendiac-rail="true"] :is([role="tab"], [role="button"]:has(svg[data-vendiac-icon="menu"])),
#root [data-vendiac-rail="true"] :is([role="tab"], [role="button"]:has(svg[data-vendiac-icon="menu"])):hover,
#root [data-vendiac-rail="true"] :is([role="tab"], [role="button"]:has(svg[data-vendiac-icon="menu"])):focus-visible {
  border-color: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
#root [data-vendiac-rail="true"] :is([role="tab"], [role="button"]:has(svg[data-vendiac-icon="menu"])):focus-visible { outline: none !important; }
#root [data-vendiac-rail="true"] :is([role="tab"], [role="button"]:has(svg[data-vendiac-icon="menu"])):focus-visible svg { outline: 2px solid #fff !important; outline-offset: 4px !important; border-radius: 50%; }
/* The labeled rail's existing Grok glyph gets the same visible black circle.
   Keep its caption and the original button; the assistant portal is untouched. */
#root [data-vendiac-rail="true"] > [role="button"]:has(svg[viewBox="50 55 414 400"]),
#root [data-vendiac-rail="true"] > [role="button"]:has(svg[viewBox="50 55 414 400"]):hover {
  border-color: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#root [data-vendiac-rail="true"] > [role="button"]:has(svg[viewBox="50 55 414 400"]) > svg {
  box-sizing: border-box;
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0;
  padding: 7px;
  border: 1px solid #30343c;
  border-radius: 50%;
  background-color: #000000;
}
#root [data-vendiac-rail="true"] > [role="button"]:has(svg[viewBox="50 55 414 400"]):focus-visible { outline: none !important; }
#root [data-vendiac-rail="true"] > [role="button"]:has(svg[viewBox="50 55 414 400"]):focus-visible > svg { outline: 2px solid #fff !important; outline-offset: 3px !important; }
@media (min-width: 600px) and (max-height: 420px) {
  #root [data-vendiac-rail="true"] > [role="button"]:has(svg[viewBox="50 55 414 400"]) { flex-direction: row !important; gap: 4px !important; }
}
/* Pricing cards keep their original recommendation ring, prices and actions. */
#root [data-vendiac-plan-card="true"] { background-color: #000000 !important; }
/* Leave room for the existing outer keyboard focus ring on every Skip target. */
.workspace-tutorial-footer { padding-right: 6px; padding-bottom: 6px; }
.workspace-tutorial-skip { min-height: 44px; height: 44px; }
#root .workspace-tutorial-skip:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px !important; }
/* At narrow phone widths, keep the actual store name instead of squeezing it
   between the business pill and two account controls. Native onLayout keeps
   the store menu anchored to this header's actual height. */
@media (max-width: 340px) {
  #root [data-vendiac-header="true"] { flex-wrap: wrap !important; gap: 2px !important; min-height: 90px !important; }
  #root [data-vendiac-header="true"] > [role="button"] { flex: 0 0 100% !important; max-width: 100% !important; min-height: 44px !important; }
  #root [data-vendiac-header="true"] > div:last-child { width: 100%; min-height: 44px; }
  #root [data-vendiac-header="true"] > div:last-child > [role="button"]:first-child { margin-right: auto; min-height: 44px !important; }
}
/* Reclaim only narrow, short-screen spacing so complete cards and the whole
   Skip target remain inside the native content viewport above the dock. */
@media (max-width: 340px) and (max-height: 600px) {
  .workspace-hub-heading { margin: 4px 0 8px; gap: 4px; }
  #root div:has(> [data-vendiac-setup="true"]) { padding-top: 0 !important; }
  #root [data-vendiac-setup-heading="true"] { gap: 0 !important; }
  #root [data-vendiac-setup-progress="true"] { margin-top: 0 !important; }
  #root [data-vendiac-setup-progress="true"] + [role="progressbar"] { margin-top: 0 !important; height: 2px !important; }
  #root [data-vendiac-setup-list="true"] { margin-top: 0 !important; }
  #root [data-vendiac-setup="true"] .workspace-tutorial-footer { padding-top: 2px; }
  #root [data-vendiac-setup="true"] .workspace-tutorial-skip { min-height: 44px; }
}
/* Only native neutral Back controls opt in. Readable manager arrows, white
   primary actions and existing blue controls retain their own treatments. */
#root [data-vendiac-control="true"]:is([aria-label="Back"], [aria-label="ย้อนกลับ"]),
#root [data-vendiac-control="true"]:is([aria-label="Back"], [aria-label="ย้อนกลับ"]):hover {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 1px solid #30343c !important;
  border-radius: 50% !important;
  background-color: #000000 !important;
  box-shadow: none !important;
}
#root [data-vendiac-control="true"]:is([aria-label="Back"], [aria-label="ย้อนกลับ"]):focus-visible { outline: 2px solid #fff !important; outline-offset: 3px !important; }

/* Desktop uses the available workspace; mobile keeps compact, single-column actions. */
@media (min-width: 1024px) {
  .workspace-business-hub { padding-top: 16px; }
  .workspace-hub-heading { margin-bottom: 28px; }
  .workspace-hub-heading h1 { font-size: clamp(36px, 3.1vw, 46px); line-height: 1.16; }
  .workspace-business-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .workspace-business-action { min-height: 132px; padding: 24px; gap: 20px; border-radius: 28px; }
  .workspace-business-action-icon { flex-basis: 60px; width: 60px; height: 60px; }
  .workspace-business-action-label,
  .workspace-business-action[data-vendiac-business-action="theme"] .workspace-business-action-label { font-size: 20px; line-height: 1.4; }
  .workspace-business-manager { padding: 24px 32px 32px; }
  .workspace-business-manager-title h1 { font-size: 42px; }
  .workspace-business-list { gap: 14px; }
  .workspace-business-row { min-height: 90px; padding: 18px 22px; }
  .workspace-business-add { min-height: 44px; padding: 0 20px; font-size: 14px; }
}
@media (max-width: 599px) {
  .workspace-business-name { font-size: 18px; line-height: 24px; }
  .workspace-business-action { border-radius: 22px; }
}

/* 1.52: manual tutorial access and the unpaid offer coexist. Guidance is never
   a payment state. All header actions remain visible at narrow widths. */
.workspace-tutorial-button {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; background: #fff; color: #08080a;
  font: 650 14px/1.35 var(--vendiac-font, system-ui, sans-serif);
  cursor: pointer; white-space: nowrap;
}
.workspace-tutorial-button:disabled { opacity: .5; cursor: default; }
.workspace-tutorial-button:focus-visible { outline: 2px solid #007aff !important; outline-offset: 3px !important; }
#root [data-vendiac-header-actions="true"] { flex-wrap: wrap; gap: 8px; }
#root [data-vendiac-header-actions="true"] > button { min-height: 44px !important; min-width: 44px; }
#root [data-vendiac-subscription-offer] { flex-shrink: 0; }
@media (max-width: 700px) {
  #root [data-vendiac-header="true"] { flex-wrap: wrap; height: auto !important; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  #root [data-vendiac-header="true"] > :first-child { min-width: 0; max-width: 100%; }
  #root [data-vendiac-header-actions="true"] { width: 100%; justify-content: flex-end; }
  #root [data-vendiac-header-actions="true"] .workspace-tutorial-button { padding: 0 12px; }
}
@media (max-width: 359px) {
  #root [data-vendiac-header-actions="true"] { gap: 6px; justify-content: flex-start; }
  #root [data-vendiac-header-actions="true"] > :nth-child(2) { min-width: 0 !important; max-width: 100% !important; }
}



/* 1.57: full-page Tutorial, readable labels and genuinely black surfaces.
   Size rules target action roles explicitly, never every aria-labelled control. */
#root [data-vendiac-header="true"] { min-width:0; height:auto!important; min-height:64px!important; gap:12px; align-items:center!important; padding-top:6px!important; padding-bottom:6px!important; }
#root [data-vendiac-header-store="true"] { min-width:80px!important; min-height:44px!important; max-width:50%; }
#root [data-vendiac-header-actions="true"] { flex:0 0 auto!important; min-width:0; width:auto; max-width:100%; gap:8px!important; flex-wrap:wrap; justify-content:flex-end; align-items:center; margin:0; }
#root [data-vendiac-header-business="true"],#root .workspace-tutorial-button { flex:0 0 auto!important; width:auto!important; height:auto!important; min-height:44px!important; min-width:max-content!important; max-width:none!important; padding:10px 16px!important; border:0!important; border-radius:999px!important; background:#fff!important; color:#08080a!important; }
#root [data-vendiac-header-business="true"] [dir="auto"] { min-width:max-content!important; max-width:none!important; overflow:visible!important; text-overflow:clip!important; white-space:nowrap!important; font-size:14px!important; line-height:22px!important; font-weight:650!important; color:#08080a!important; }
#root .workspace-tutorial-button { font-size:14px!important; line-height:22px!important; font-weight:650!important; white-space:nowrap!important; }
#root [data-vendiac-header-control] { flex:0 0 44px!important; width:44px!important; min-width:44px!important; height:44px!important; padding:0!important; border-radius:50%!important; background:#000!important; color:#fff!important; border-color:#30343c!important; }
#root [data-vendiac-header-control] [dir="auto"] { color:#fff!important; }
#root [data-vendiac-header-actions] [data-vendiac-control-surface] { background:#000!important; }
#root [data-vendiac-header-business] [data-vendiac-control-surface] { background:#fff!important; }
#root [data-vendiac-dock="true"] [data-vendiac-dock-icon="true"],#root [data-vendiac-dock="true"] [dir="auto"] { color:#fff!important; opacity:1!important; }
[data-vendiac-store-switcher="true"],[data-vendiac-store-switcher="true"] [role="button"],
[data-vendiac-store-switcher="true"] [data-vendiac-control-surface] { background:#000!important; color:#fff!important; }
[data-vendiac-store-switcher="true"] { border:1px solid #292c33!important; border-radius:24px!important; }
[data-vendiac-store-switcher="true"] [dir="auto"] { color:#fff!important; }
[data-vendiac-store-switcher="true"] [role="button"] > div { background-color:transparent!important; }
[data-vendiac-store-switcher="true"] [role="button"]:focus-visible { outline:2px solid #fff; outline-offset:-3px; }
.workspace-business-row,.workspace-business-initials,.workspace-business-row:hover:not(:disabled),.workspace-business-row--current,.workspace-business-row--current:hover:not(:disabled),.workspace-dialog { background:#000; color:#fff; }
.workspace-business-row--current { box-shadow:inset 0 0 0 1px #fff; }
.workspace-business-domain,.workspace-business-row--current .workspace-business-domain,.workspace-business-name,.workspace-business-chevron,.workspace-business-initials { color:#fff; }
.workspace-tutorial-page { display:flex; flex-direction:column; width:100%; max-width:1120px; height:100%; min-height:0; overflow:auto; margin:0 auto; padding:0 2px 8px; background:#000; color:#fff; }
.workspace-tutorial-back { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; min-height:44px; margin:0 0 4px; padding:6px 12px; border:0; border-radius:999px; background:#000; color:#fff; font:600 14px/1.4 var(--vendiac-font,system-ui,sans-serif); cursor:pointer; }
.workspace-tutorial-back span { font-size:26px; line-height:24px; }
.workspace-tutorial-page .workspace-setup { height:auto; flex:1 0 auto; overflow:visible; padding:0; background:#000; color:#fff; }
.workspace-tutorial-page .workspace-setup h1 { color:#fff; font-size:clamp(25px,3.3vw,40px); line-height:1.22; white-space:normal; letter-spacing:-.035em; }
.workspace-tutorial-page:lang(th) .workspace-setup h1 { letter-spacing:0; line-height:1.4; }
.workspace-tutorial-page .workspace-setup-subtitle { margin:8px 0 14px; color:#fff; font-size:14px; line-height:1.55; }
.workspace-tutorial-page .workspace-progress-copy { margin:0 0 8px; color:#fff; font-size:13px; }
.workspace-tutorial-page .workspace-progress-copy span { color:#fff; }
.workspace-tutorial-page .workspace-progress { height:8px; flex-shrink:0; background:#191a1c; }
.workspace-tutorial-page .workspace-steps { display:flex!important; flex-direction:column; min-height:0; flex:1 0 auto; gap:0; margin-top:16px; }
.workspace-tutorial-page .workspace-steps li { flex:1 0 auto; }
.workspace-tutorial-page .workspace-step { min-height:62px; padding:9px 0; gap:12px; background:#000; }
.workspace-tutorial-page .workspace-step-title { color:#fff; font-size:16px; line-height:1.5; font-weight:600; }
.workspace-tutorial-page .workspace-step-state { color:#fff; font-size:12px; flex-shrink:0; }
.workspace-tutorial-page .workspace-step-arrow { width:44px; height:44px; flex-basis:44px; border:0; border-radius:50%; }
.workspace-tutorial-page .workspace-step-number { color:#fff; flex-basis:26px; }
.workspace-tutorial-page .workspace-tutorial-footer { padding-top:8px; }
.workspace-tutorial-page button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
@media(max-width:760px){
 #root [data-vendiac-header="true"] { flex-wrap:wrap!important; gap:8px; }
 #root [data-vendiac-header-store="true"] { flex:1 0 100%!important; max-width:100%; }
 #root [data-vendiac-header-actions="true"] { flex:0 0 100%!important; width:100%; justify-content:flex-end; }
 .workspace-tutorial-page .workspace-step { min-height:56px; padding:6px 0; gap:10px; }
 .workspace-tutorial-page .workspace-step-title { font-size:14px; }
 .workspace-tutorial-page .workspace-setup-subtitle { margin:5px 0 12px; font-size:13px; }
}
@media(max-width:370px){
 #root [data-vendiac-header-actions="true"] { justify-content:flex-start; gap:6px!important; }
 #root [data-vendiac-header-business="true"],#root .workspace-tutorial-button { padding-inline:12px!important; }
 .workspace-tutorial-page .workspace-step-state { display:none; }
}

/* Dynamic business names may wrap; fixed action labels never truncate. */
#root [data-vendiac-header-store="true"] > div:nth-child(2) { max-width:none!important; }
#root [data-vendiac-header-store-name] { overflow:visible!important; white-space:normal!important; text-overflow:clip!important; overflow-wrap:anywhere!important; }
#root [data-vendiac-rail="true"] [dir="auto"] { color:#fff!important; }

#root [data-vendiac-tutorial-page] [data-vendiac-setup-circle="true"] { width:44px!important; height:44px!important; flex:0 0 44px!important; border-radius:50%!important; }

/* A white subscription pill needs dark ink, even inside the white-label rail. */
#root [data-vendiac-rail="true"] [data-vendiac-subscription-offer] [dir="auto"] { color:#08080a!important; }