:root {
  --app-ink: #111;
  --app-muted: #6d6d6d;
  --app-line: #bfbfbf;
  --app-stage: #dedede;
  --appbar-height: 62px;
  --tabs-height: 52px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--app-ink);
  background: var(--app-stage);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--app-stage); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.appbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--appbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 22px;
  color: #fff;
  background: #0b0b0b;
  border-bottom: 1px solid #323232;
}

.app-identity { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.app-mark { width: 34px; height: 34px; display: grid; place-items: center; }
.app-mark img { width: 25px; height: 25px; display: block; filter: invert(1); }
.app-identity > span:last-child { display: grid; gap: 2px; }
.app-identity strong { font-size: 14px; letter-spacing: .12em; }
.app-identity small { color: #9a9a9a; font-size: 10px; }

.app-controls { display: flex; align-items: center; gap: 10px; }
.control-group { display: flex; overflow: hidden; border: 1px solid #515151; border-radius: 7px; }
.control-group button { min-height: 34px; padding: 0 12px; color: #aaa; background: transparent; border: 0; cursor: pointer; font-size: 12px; }
.control-group button + button { border-left: 1px solid #515151; }
.control-group button.active { color: #111; background: #fff; }
.control-group button:focus-visible, .tab:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

.tabs-wrap {
  position: sticky;
  top: var(--appbar-height);
  z-index: 40;
  height: var(--tabs-height);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #fafafa;
  border-bottom: 1px solid #c9c9c9;
}
.tabs { width: 100%; display: flex; gap: 6px; overflow-x: auto; padding: 8px 18px; scrollbar-width: thin; }
.tab { flex: 0 0 auto; height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #c7c7c7; border-radius: 999px; background: #fff; color: #444; cursor: pointer; white-space: nowrap; font-size: 12px; }
.tab span { color: #888; font-size: 10px; font-variant-numeric: tabular-nums; }
.tab.active { color: #fff; background: #111; border-color: #111; }
.tab.active span { color: #aaa; }

.workspace { padding: 22px 28px 46px; }
.workspace-head { max-width: 1180px; margin: 0 auto 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.workspace-head h1 { margin: 0; font-size: 19px; letter-spacing: -.015em; }
.workspace-head p { margin: 5px 0 0; color: #5d5d5d; font-size: 12px; }
.mode-status { flex: 0 0 auto; padding: 5px 8px; color: #555; background: rgba(255, 255, 255, .55); border: 1px solid #c5c5c5; border-radius: 5px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }

.sequence { max-width: 1180px; min-height: 30px; margin: 0 auto 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sequence-chip { padding: 5px 8px; background: rgba(255,255,255,.58); border: 1px solid #c8c8c8; border-radius: 5px; color: #555; font-size: 10px; }
.sequence-arrow { color: #777; font-size: 10px; }

.stage {
  min-height: calc(100vh - 220px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  padding: 18px;
  background-color: #d6d6d6;
  background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px solid #c3c3c3;
  border-radius: 13px;
}
.canvas { position: relative; flex: 0 0 auto; min-height: 760px; overflow: hidden; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.13); transition: width .18s ease, opacity .11s ease, transform .11s ease, filter .11s ease; }
.canvas.desktop { width: 1180px; }
.canvas.mobile { width: 390px; }
.canvas.mode-wireframe .ui-only { display: none !important; }
.canvas.mode-ui .wf-only { display: none !important; }
.canvas.brand-reference .brand-page { display: block; }
.canvas.view-transition-out { opacity: .22; filter: blur(.6px); transform: scale(.996); }
.canvas.view-transition-in { animation: scenario-in .3s ease-out both; }
.canvas.view-transition-in::after { content: ""; position: absolute; z-index: 30; inset: 0; pointer-events: none; background: linear-gradient(108deg, transparent 22%, rgba(255,255,255,.34) 47%, transparent 68%); transform: translateX(-115%); animation: scenario-sheen .38s ease-out both; }

@keyframes scenario-in {
  from { opacity: .35; transform: translateY(7px) scale(.998); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes scenario-sheen {
  from { transform: translateX(-115%); }
  to { transform: translateX(115%); }
}

@media (prefers-reduced-motion: reduce) {
  .canvas { transition: none; }
  .canvas.view-transition-in { animation: none; }
  .canvas.view-transition-in::after { display: none; }
}

/* Scenario pages open as a site review, not as a dashboard review. */
html.profile-preview { scroll-behavior: auto; }
body.profile-preview { --appbar-height: 44px; --tabs-height: 34px; }
body.profile-preview .appbar { min-height: var(--appbar-height); padding: 5px 14px; }
body.profile-preview .app-mark { width: 26px; height: 26px; font-size: 12px; }
body.profile-preview .app-mark img { width: 21px; height: 21px; }
body.profile-preview .app-identity { gap: 8px; }
body.profile-preview .app-identity small { display: none; }
body.profile-preview .app-identity strong { font-size: 11px; }
body.profile-preview .app-controls { gap: 6px; }
body.profile-preview .control-group button { min-height: 26px; padding-inline: 8px; font-size: 10px; }
body.profile-preview .preview-hide-header { min-height: 26px; padding-inline: 8px; font-size: 10px; }
body.profile-preview .tabs { gap: 4px; padding: 4px 10px; }
body.profile-preview .tab { height: 26px; gap: 5px; padding-inline: 8px; font-size: 10px; }
body.profile-preview .tab span { font-size: 9px; }
body.profile-preview .workspace { padding-top: 8px; }
body.profile-preview .stage { min-height: calc(100vh - var(--appbar-height) - var(--tabs-height) - 16px); }
/* The payment is reviewed as its own, full-height screen rather than a card in the preview canvas. */
body.payment-preview .workspace { padding: 0; }
body.payment-preview .appbar,
body.payment-preview .tabs-wrap,
body.payment-preview .workspace-head,
body.payment-preview .sequence { display: none !important; }
body.payment-preview .stage { height: 100vh; min-height: 0; padding: 0; border: 0; border-radius: 0; }
body.payment-preview .canvas { height: 100%; min-height: 0; }
body.payment-preview .shop-prsim-trigger { display: none !important; }

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }

@media (max-width: 900px) {
  .workspace { padding: 16px 10px 34px; }
  .stage { padding: 8px; }
  .canvas.desktop { width: 980px; }
  .workspace-head, .sequence { padding-inline: 4px; }
}

@media (max-width: 620px) {
  .appbar { padding-inline: 11px; }
  .app-identity small { display: none; }
  .app-mark { width: 30px; height: 30px; }
  .control-group button { min-height: 32px; padding-inline: 8px; font-size: 10px; }
  .viewport-control { display: none; }
  .tabs { padding-inline: 10px; }
  .workspace-head { align-items: flex-start; }
  .mode-status { display: none; }
}

/* Preview is the public-facing home. The discreet brand link restores the original PRSIM chrome. */
.preview-hide-header, .language-toggle {
  min-height: 34px;
  display: block;
  padding: 0 12px;
  color: #aaa;
  background: transparent;
  border: 1px solid #515151;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
}
.preview-hide-header:disabled { opacity: .42; cursor: not-allowed; }
.language-toggle { min-width: 42px; color: #fff; font-weight: 750; letter-spacing: .06em; }
.language-toggle:hover, .language-toggle:focus-visible { border-color: #aaa; outline: 0; }
body.profile-preview .language-toggle { min-height: 26px; min-width: 34px; padding-inline: 8px; font-size: 10px; }
body.preview-home .appbar,
body.preview-home .tabs-wrap,
body.preview-home .workspace-head,
body.preview-home .sequence { display: none; }
body.preview-home.preview-chrome-visible .appbar,
body.preview-home.preview-chrome-visible .tabs-wrap { display: flex; }
body.preview-home .workspace { padding: 0; }
body.preview-home.preview-chrome-visible .workspace { padding-top: 8px; }
body.preview-home .stage {
  min-height: 100vh;
  padding: 0;
  overflow-x: auto;
  background: #efefed;
  background-image: none;
  border: 0;
  border-radius: 0;
}
body.preview-home .canvas { min-height: 100vh; box-shadow: none; }
body.preview-home .canvas.desktop { width: min(1180px, 100vw); }
body.preview-home.preview-chrome-visible .stage { min-height: calc(100vh - var(--appbar-height) - var(--tabs-height)); }

.shop-brand-lockup { display: grid; align-content: center; justify-items: start; gap: 4px; }
.shop-prsim-trigger { display: none; }
body.preview-home .shop-prsim-trigger {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: #73736d;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: 650 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.shop-prsim-trigger:hover, .shop-prsim-trigger:focus-visible { color: #111; }

@media (max-width: 620px) {
  body.preview-home .canvas.mobile { width: 100vw; }
}