/* WorkBlock 2.4 — unified visual system
   One token system, one responsive layout, no legacy style layers. */

/* --------------------------------------------------------------------------
   1. Design tokens and themes
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --bg: #f4f7fb;
  --canvas: #f7f9fc;
  --panel: rgba(255, 255, 255, .96);
  --panel-solid: #ffffff;
  --panel2: #edf2f8;
  --panel3: #e4ebf5;
  --surface: var(--panel);
  --surface-raised: #ffffff;
  --surface-soft: rgba(237, 243, 250, .88);
  --surface-hover: #e7eef8;
  --input-bg: #f7f9fc;
  --overlay: rgba(31, 48, 75, .40);

  --text: #11243d;
  --text-soft: #334a67;
  --muted: #687b93;
  --faint: #8a99ab;
  --border: rgba(65, 91, 126, .14);
  --border-strong: rgba(65, 91, 126, .23);

  --accent: #2867e8;
  --accent2: #5a98ff;
  --accent3: #9bc2ff;
  --accent-ink: #ffffff;
  --accent-soft: rgba(40, 103, 232, .09);
  --accent-soft-strong: rgba(40, 103, 232, .15);
  --accent-border: rgba(40, 103, 232, .28);
  --accent-glow: rgba(40, 103, 232, .20);

  --blue: #4b8cff;
  --violet: #9b79ff;
  --success: #3dd996;
  --warning: #ffc45e;
  --danger: #ff6378;
  --info: #5ca9ff;

  --sidebar-width: 286px;
  --sidebar-compact-width: 84px;
  --topbar-height: 74px;
  --content-max: 1760px;
  --dock-height: 70px;

  --radius-xs: 9px;
  --radius-sm: 13px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;

  --shadow-xs: 0 4px 14px rgba(0, 0, 0, .10);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, .14);
  --shadow-md: 0 22px 60px rgba(0, 0, 0, .22);
  --shadow-lg: 0 38px 110px rgba(0, 0, 0, .34);
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, .055);

  --aurora-a: rgba(48, 112, 239, .12);
  --aurora-b: rgba(101, 166, 255, .10);
  --aurora-c: rgba(61, 210, 207, .05);
  --sidebar-bg: rgba(247, 249, 253, .97);
  --topbar-bg: rgba(255, 255, 255, .90);
  --glass-blur: 24px;

  --ease: cubic-bezier(.2, .82, .2, 1);
  --ease-bounce: cubic-bezier(.2, 1.35, .35, 1);
  --duration-fast: 150ms;
  --duration: 230ms;
  --duration-slow: 600ms;

  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

:root[data-theme="orange-dark"] {
  color-scheme: dark;
}

:root[data-theme="blue-white"] {
  color-scheme: light;
  --bg: #f4f7fb;
  --canvas: #f7f9fc;
  --panel: rgba(255, 255, 255, .94);
  --panel-solid: #ffffff;
  --panel2: #edf2f8;
  --panel3: #e4ebf5;
  --surface: var(--panel);
  --surface-raised: #ffffff;
  --surface-soft: rgba(237, 243, 250, .86);
  --surface-hover: #e7eef8;
  --input-bg: #f7f9fc;
  --overlay: rgba(31, 48, 75, .40);
  --text: #11243d;
  --text-soft: #334a67;
  --muted: #687b93;
  --faint: #8a99ab;
  --border: rgba(65, 91, 126, .14);
  --border-strong: rgba(65, 91, 126, .23);
  --accent: #2867e8;
  --accent2: #5a98ff;
  --accent3: #9bc2ff;
  --accent-ink: #ffffff;
  --accent-soft: rgba(40, 103, 232, .09);
  --accent-soft-strong: rgba(40, 103, 232, .15);
  --accent-border: rgba(40, 103, 232, .28);
  --accent-glow: rgba(40, 103, 232, .20);
  --sidebar-bg: rgba(247, 249, 253, .95);
  --topbar-bg: rgba(244, 247, 251, .79);
  --shadow-xs: 0 4px 14px rgba(34, 61, 96, .06);
  --shadow-sm: 0 10px 30px rgba(34, 61, 96, .08);
  --shadow-md: 0 24px 64px rgba(34, 61, 96, .12);
  --shadow-lg: 0 40px 110px rgba(34, 61, 96, .18);
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, .9);
  --aurora-a: rgba(48, 112, 239, .15);
  --aurora-b: rgba(101, 166, 255, .12);
  --aurora-c: rgba(61, 210, 207, .07);
}

:root[data-theme="blue-sky"] {
  color-scheme: light;
  --bg: #eaf6ff;
  --canvas: #f2faff;
  --panel: rgba(255, 255, 255, .91);
  --panel-solid: #ffffff;
  --panel2: #e3f3ff;
  --panel3: #d7edfb;
  --surface: var(--panel);
  --surface-raised: #ffffff;
  --surface-soft: rgba(221, 241, 254, .83);
  --surface-hover: #d9effd;
  --input-bg: rgba(247, 252, 255, .92);
  --overlay: rgba(11, 55, 82, .38);
  --text: #0e3149;
  --text-soft: #31576e;
  --muted: #638398;
  --faint: #86a0b0;
  --border: rgba(42, 126, 171, .16);
  --border-strong: rgba(42, 126, 171, .27);
  --accent: #0786cf;
  --accent2: #35b9f2;
  --accent3: #8ddcff;
  --accent-ink: #ffffff;
  --accent-soft: rgba(7, 134, 207, .10);
  --accent-soft-strong: rgba(7, 134, 207, .16);
  --accent-border: rgba(7, 134, 207, .28);
  --accent-glow: rgba(7, 134, 207, .22);
  --sidebar-bg: rgba(238, 249, 255, .95);
  --topbar-bg: rgba(234, 246, 255, .79);
  --shadow-xs: 0 4px 14px rgba(18, 102, 148, .06);
  --shadow-sm: 0 12px 34px rgba(18, 102, 148, .09);
  --shadow-md: 0 26px 68px rgba(18, 102, 148, .13);
  --shadow-lg: 0 44px 120px rgba(18, 102, 148, .18);
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, .92);
  --aurora-a: rgba(27, 163, 232, .16);
  --aurora-b: rgba(76, 205, 255, .15);
  --aurora-c: rgba(73, 116, 245, .07);
}

/* --------------------------------------------------------------------------
   2. Reset, typography and background identity
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
html, body, #app { margin: 0; min-width: 0; min-height: 100%; }
body {
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(80rem 52rem at -12% -18%, var(--aurora-a), transparent 58%),
    radial-gradient(60rem 42rem at 108% -8%, var(--aurora-b), transparent 58%),
    radial-gradient(54rem 38rem at 55% 115%, var(--aurora-c), transparent 62%),
    var(--bg);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: -18vh -18vw;
  pointer-events: none;
  z-index: -1;
  opacity: .56;
  background:
    radial-gradient(circle at 22% 28%, var(--aurora-a), transparent 22%),
    radial-gradient(circle at 78% 18%, var(--aurora-b), transparent 22%),
    radial-gradient(circle at 54% 78%, var(--aurora-c), transparent 24%);
  filter: blur(48px);
  animation: wbAurora 18s ease-in-out infinite alternate;
}
@keyframes wbAurora {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  100% { transform: translate3d(1.5%, 1.2%, 0) scale(1.035); }
}
[v-cloak] { display: none !important; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
img, video { max-width: 100%; }
::selection { color: var(--text); background: var(--accent-soft-strong); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 26%, transparent); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 42%, transparent); border: 3px solid transparent; background-clip: padding-box; }

h1, h2, h3, h4, p { overflow-wrap: anywhere; }
h1, h2, h3, h4 { color: var(--text); }
h1 { letter-spacing: -.055em; }
h2 { letter-spacing: -.035em; }
.app { min-height: 100dvh; position: relative; isolation: isolate; }
.muted { color: var(--muted) !important; }
.tiny { font-size: 12px; }
.link { color: var(--accent); font-weight: 800; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
code, .code, .api-path { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.code {
  display: block;
  white-space: pre-wrap;
  overflow: auto;
  max-height: 440px;
  min-height: 84px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--text) 86%, var(--info));
  background: color-mix(in srgb, var(--input-bg) 90%, #07101f 10%);
  font-size: 12px;
  line-height: 1.55;
}
.code-large { min-height: 310px; }
.api-path { color: var(--accent); font-size: .92em; word-break: break-all; }

/* --------------------------------------------------------------------------
   3. Motion and focus
   -------------------------------------------------------------------------- */
@keyframes wbEnter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes wbPulse { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes wbShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes wbSpin { to { transform: rotate(360deg); } }
.content > template, .content > section, .content > div:not(.progress) { animation: wbEnter var(--duration) var(--ease); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   4. Controls
   -------------------------------------------------------------------------- */
.btn,
.icon-button,
.close,
.nav-item,
.topbar-user,
.command-search,
.sidebar-pwa,
.sidebar-user,
.landing-brand,
.landing-nav a,
.mobile-dock button {
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--duration-fast) var(--ease), border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast), opacity var(--duration-fast);
}
.btn {
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text);
  background: var(--surface-soft);
  box-shadow: var(--inner-highlight);
  font-weight: 790;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--accent-border); background: var(--surface-hover); box-shadow: var(--shadow-xs); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: linear-gradient(135deg, var(--accent3) -25%, var(--accent2) 38%, var(--accent) 105%);
  box-shadow: 0 10px 28px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.primary:hover:not(:disabled) { box-shadow: 0 14px 36px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.42); filter: saturate(1.05); }
.btn.soft { color: var(--text); background: var(--accent-soft); border-color: var(--accent-border); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-soft); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-soft); border-color: var(--border); }
.btn.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 34%, var(--border)); }
.btn.small { min-height: 34px; padding: 7px 10px; border-radius: 10px; font-size: 12px; }
.btn.xl { min-height: 52px; padding: 14px 22px; border-radius: 16px; font-size: 15px; }
.btn.full { width: 100%; }
.icon-button, .close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 13px;
  display: inline-grid;
  place-items: center;
  color: var(--text-soft);
  background: var(--surface-soft);
  box-shadow: var(--inner-highlight);
  cursor: pointer;
}
.icon-button:hover, .close:hover { color: var(--text); border-color: var(--accent-border); background: var(--accent-soft); transform: translateY(-1px); }
.icon-button.active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.compact-actions { gap: 6px; }

.input, input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), textarea, select {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--text);
  background: var(--input-bg);
  box-shadow: var(--inner-highlight);
  outline: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}
textarea { min-height: 116px; resize: vertical; line-height: 1.5; }
.input:hover, input:hover, textarea:hover, select:hover { border-color: color-mix(in srgb, var(--border-strong) 65%, var(--accent) 35%); }
.input:focus, input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface-raised); }
input[type="color"] { width: 100%; min-height: 44px; padding: 5px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--input-bg); }
.field { min-width: 0; display: grid; align-content: start; gap: 7px; margin: 12px 0; }
.field > label { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .015em; }
.field > small { line-height: 1.45; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.checkbox { display: flex; align-items: flex-start; gap: 9px; min-height: 34px; color: var(--text-soft); line-height: 1.42; }
.checkbox input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; accent-color: var(--accent); }
.editor-tabs, .chip-row, .label-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   5. App shell and navigation
   -------------------------------------------------------------------------- */
.layout {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}
.sidebar {
  position: sticky;
  inset-block-start: 0;
  height: 100dvh;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: calc(12px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));
  border-right: 1px solid var(--border);
  background: var(--sidebar-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  overflow: hidden;
}
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--accent-soft), transparent 20%, transparent 78%, color-mix(in srgb, var(--accent) 5%, transparent));
}
.sidebar-head { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 5px 12px; }
.brand, .brand-button, .landing-brand { display: flex; align-items: center; gap: 11px; }
.brand-button, .landing-brand { padding: 0; border: 0; color: var(--text); background: transparent; cursor: pointer; text-align: left; }
.brand-mark {
  position: relative;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--accent-ink);
  background: linear-gradient(145deg, var(--accent3), var(--accent2) 42%, var(--accent));
  box-shadow: 0 12px 32px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.42);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: -.08em;
  overflow: hidden;
}
.brand-mark::after { content: ""; position: absolute; inset: -45% -80%; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.46), transparent 65%); transform: rotate(15deg); animation: wbLogoSweep 6s ease-in-out infinite; }
@keyframes wbLogoSweep { 0%, 62% { translate: -60% 0; opacity: 0; } 72% { opacity: 1; } 90%, 100% { translate: 70% 0; opacity: 0; } }
.brand-copy { min-width: 0; display: grid; }
.brand-copy strong { font-size: 16px; line-height: 1.1; letter-spacing: -.035em; }
.brand-copy small { margin-top: 3px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.sidebar-collapse { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); color: var(--muted); cursor: pointer; }

.workspace-switcher-stack { display: grid; gap: 7px; padding: 9px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface-soft); box-shadow: var(--inner-highlight); }
.company-switch-row, .profile-switch-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.workspace-avatar, .profile-mode-icon {
  width: 35px; height: 35px; flex: 0 0 35px; display: grid; place-items: center;
  border: 1px solid var(--accent-border); border-radius: 11px; color: var(--accent); background: var(--accent-soft); font-weight: 900;
}
.workspace-select-wrap { flex: 1; min-width: 0; display: grid; }
.workspace-select-wrap > span { color: var(--faint); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .095em; }
.workspace-select-wrap select { min-height: 25px; padding: 0 20px 0 0; border: 0; background: transparent; box-shadow: none; font-size: 12px; font-weight: 850; white-space: nowrap; text-overflow: ellipsis; }

.sidebar-nav { min-height: 0; flex: 1; overflow-y: auto; overflow-x: hidden; padding: 9px 0 12px; overscroll-behavior: contain; }
.nav-section { padding: 2px 3px; }
.nav-group { margin: 15px 9px 7px; color: var(--faint); font-size: 9px; font-weight: 950; text-transform: uppercase; letter-spacing: .105em; }
.nav-item {
  width: 100%; min-height: 43px; margin: 2px 0; padding: 8px 9px;
  border: 1px solid transparent; border-radius: 13px;
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); background: transparent; text-align: left; cursor: pointer;
}
.nav-item:hover { color: var(--text); border-color: var(--border); background: var(--surface-soft); transform: translateX(2px); }
.nav-item.active { color: var(--text); border-color: var(--accent-border); background: linear-gradient(100deg, var(--accent-soft-strong), var(--accent-soft) 52%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.nav-icon { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 9px; color: var(--text-soft); background: color-mix(in srgb, var(--surface-soft) 78%, transparent); font-size: 15px; }
.nav-item.active .nav-icon { color: var(--accent); background: var(--accent-soft); }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 740; }
.nav-meta { min-width: 22px; height: 21px; margin-left: auto; padding: 0 6px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface-soft); font-size: 9px; font-weight: 900; }
.nav-meta.attention { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 34%, var(--border)); background: color-mix(in srgb, var(--warning) 10%, var(--surface)); }
.sidebar-footer { display: grid; gap: 5px; padding-top: 9px; border-top: 1px solid var(--border); }
.sidebar-pwa, .sidebar-user { width: 100%; min-height: 48px; padding: 7px; border: 1px solid transparent; border-radius: 13px; display: flex; align-items: center; gap: 9px; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.sidebar-pwa:hover, .sidebar-user:hover { border-color: var(--border); background: var(--surface-soft); }
.sidebar-pwa .nav-label, .sidebar-user .nav-label { display: grid; }
.sidebar-pwa b, .sidebar-user b { font-size: 11px; }
.sidebar-pwa small, .sidebar-user small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.status-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning) 10%, transparent); }
.status-dot.online, .live-dot { background: var(--success); box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 10%, transparent); }

.layout.sidebar-compact { grid-template-columns: var(--sidebar-compact-width) minmax(0, 1fr); }
.sidebar-compact .brand-copy,
.sidebar-compact .workspace-switcher,
.sidebar-compact .nav-group,
.sidebar-compact .nav-label,
.sidebar-compact .nav-meta { display: none; }
.sidebar-compact .sidebar-head { justify-content: center; }
.sidebar-compact .sidebar-collapse { position: absolute; right: -14px; top: calc(21px + var(--safe-top)); z-index: 2; }
.sidebar-compact .nav-item { justify-content: center; }
.sidebar-compact .nav-icon { width: 35px; height: 35px; flex-basis: 35px; }
.sidebar-compact .sidebar-pwa, .sidebar-compact .sidebar-user { justify-content: center; }
.workspace-sidebar-hidden { grid-template-columns: minmax(0, 1fr); }
.workspace-sidebar-hidden .sidebar { display: none; }
.workspace-topbar-hidden .topbar { display: none; }
.workspace-fullscreen .content { max-width: none; padding: 0; }

.main { min-width: 0; min-height: 100dvh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  min-height: calc(var(--topbar-height) + var(--safe-top));
  padding: calc(10px + var(--safe-top)) max(20px, var(--safe-right)) 10px max(20px, var(--safe-left));
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(240px, 440px) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.18);
}
.topbar-context { min-width: 0; display: flex; align-items: center; gap: 10px; }
.breadcrumbs { display: flex; gap: 7px; color: var(--faint); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumbs b { color: var(--border-strong); }
.topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 900; letter-spacing: -.032em; }
.command-search { min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 13px; display: flex; align-items: center; gap: 9px; color: var(--muted); background: var(--surface-soft); box-shadow: var(--inner-highlight); cursor: pointer; }
.command-search:hover { color: var(--text); border-color: var(--accent-border); background: var(--surface-hover); }
.command-search span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.command-search kbd { margin-left: auto; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; color: var(--faint); background: var(--panel); font-size: 9px; }
.topbar-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.appearance-control { display: flex; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); }
.appearance-control button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; cursor: pointer; }
.appearance-control button.active { background: var(--surface-raised); box-shadow: var(--shadow-xs); }
.theme-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: linear-gradient(145deg, #ffad5c, #ff7617); }
.theme-swatch.blue { background: linear-gradient(145deg, #ffffff 0 38%, #2d6fe8 38%); border-color: rgba(40,103,232,.25); }
.theme-swatch.sky { background: linear-gradient(145deg, #dff5ff 0 40%, #22aeea 40%); border-color: rgba(7,134,207,.25); }
.topbar-user { max-width: 220px; height: 43px; padding: 5px 8px 5px 5px; border: 1px solid var(--border); border-radius: 14px; display: flex; align-items: center; gap: 8px; color: var(--text); background: var(--surface-soft); cursor: pointer; }
.topbar-user:hover { border-color: var(--accent-border); background: var(--surface-hover); }
.topbar-user > span:last-child { min-width: 0; display: grid; text-align: left; }
.topbar-user b, .topbar-user small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-user b { font-size: 11px; }
.topbar-user small { color: var(--muted); font-size: 9px; }
.avatar { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px; color: var(--accent-ink); background: linear-gradient(145deg, var(--accent3), var(--accent)); box-shadow: 0 7px 18px var(--accent-glow); font-weight: 950; font-size: 11px; }
.notification-button { position: relative; }
.notification-dot { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border: 2px solid var(--panel-solid); border-radius: 999px; color: white; background: var(--danger); font-size: 8px; font-weight: 900; }
.version-chip { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; gap: 7px; color: var(--muted); background: var(--surface-soft); cursor: pointer; font-size: 10px; }
.version-chip:hover, .version-chip.attention { color: var(--text); border-color: var(--accent-border); background: var(--accent-soft); }
.version-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 10%, transparent); }
.version-chip.attention .version-chip-dot { background: var(--warning); animation: wbPulse 1.8s infinite; }
.version-chip b { color: var(--accent); }
.mobile-menu { display: none; }
.mobile-dock { display: none; }

.content { width: 100%; max-width: var(--content-max); margin-inline: auto; padding: 28px 30px calc(60px + var(--safe-bottom)); }
.density-compact .content { padding-top: 20px; }
.density-compact .card, .density-compact .surface { padding: 14px; }

/* --------------------------------------------------------------------------
   6. Universal block/card system
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 15px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card,
.surface,
.runtime-widget,
.workspace-profile-card,
.microservice-card,
.feature-card,
.project-card,
.approval-card,
.notification-card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 96%, var(--accent) 4%), var(--panel));
  box-shadow: var(--shadow-xs), var(--inner-highlight);
  overflow: hidden;
}
.card::before,
.surface::before,
.workspace-profile-card::before,
.microservice-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
  opacity: .45;
}
.card, .surface { padding: 18px; }
.card:hover, .workspace-profile-card:hover, .microservice-card:hover, .project-card-modern:hover { border-color: color-mix(in srgb, var(--border) 50%, var(--accent) 50%); box-shadow: var(--shadow-sm), var(--inner-highlight); }
.card h2, .card h3, .surface h2, .surface h3 { margin-top: 0; }
.card p:last-child, .surface p:last-child { margin-bottom: 0; }
.card.compact, .surface.compact { padding: 14px; }
.card.stat { min-height: 124px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; background: radial-gradient(circle at 100% 0, var(--accent-soft), transparent 44%), var(--panel); }
.stat .value { font-size: clamp(27px, 3vw, 36px); line-height: 1; font-weight: 950; letter-spacing: -.055em; }
.stat .label { color: var(--muted); font-size: 11px; font-weight: 780; }
.empty, .empty-state { color: var(--muted); text-align: center; }
.empty { min-height: 150px; padding: 44px 20px; display: grid; place-items: center; border-style: dashed; }
.empty-state { min-height: 130px; padding: 24px; display: flex; align-items: center; justify-content: center; gap: 13px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-soft); }
.empty-state > span { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 13px; color: var(--accent); background: var(--accent-soft); font-size: 19px; }
.empty-state b { display: block; color: var(--text); }
.empty-state p { margin: 4px 0 0; font-size: 12px; }
.empty-state.compact { min-height: 100px; justify-content: flex-start; text-align: left; }
.empty-state.mini { min-height: 90px; padding: 15px; justify-content: flex-start; text-align: left; }

.page-head { margin: 0 0 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.page-head > div:first-child { min-width: 0; }
.page-head h1 { margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.02; letter-spacing: -.058em; }
.page-head h2 { margin: 0; font-size: 23px; }
.page-head p { max-width: 780px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.page-head.redesigned { padding: 4px 0 3px; }
.section-head { margin: 0 0 15px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.section-head.spaced { margin-top: 30px; }
.section-head.compact { align-items: center; }
.section-head h2 { margin: 5px 0 2px; font-size: clamp(20px, 2.5vw, 30px); line-height: 1.08; }
.section-head p { max-width: 660px; margin: 0; color: var(--muted); font-size: 12px; }
.section-kicker, .eyebrow, .landing-label { color: var(--accent); font-size: 9px; font-weight: 950; text-transform: uppercase; letter-spacing: .115em; }
.count-bubble { min-width: 36px; height: 36px; padding: 0 11px; display: grid; place-items: center; border: 1px solid var(--accent-border); border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-weight: 950; }

.badge, .status-pill, .plan-chip, .priority-pill, .mode-chip, .success-chip, .alert-chip {
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-soft);
  background: var(--surface-soft);
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
}
.badge.success, .status-pill.active, .success-chip { color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); background: color-mix(in srgb, var(--success) 9%, var(--surface)); }
.badge.warning, .warning-panel, .alert-chip { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); background: color-mix(in srgb, var(--warning) 9%, var(--surface)); }
.badge.danger, .danger-text { color: var(--danger) !important; }
.badge.danger { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.success, .error, .warning-panel { padding: 12px; border-radius: 12px; }
.success { color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border)); background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.error { color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.warning-panel { border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border)); }

.list-item {
  min-width: 0;
  min-height: 56px;
  margin-top: 8px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface-soft);
  box-shadow: var(--inner-highlight);
}
.list-item:hover { border-color: var(--accent-border); background: var(--surface-hover); }
.list-item > div { min-width: 0; }
.list-item b { color: var(--text); }
.list-item .muted { margin-top: 3px; font-size: 11px; }

.table-wrap { width: 100%; overflow: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-xs); }
.table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.table th, .table td { padding: 12px 13px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.table th { position: sticky; top: 0; z-index: 2; color: var(--faint); background: color-mix(in srgb, var(--panel2) 91%, transparent); backdrop-filter: blur(14px); font-size: 9px; font-weight: 950; text-transform: uppercase; letter-spacing: .095em; }
.table td { color: var(--text-soft); font-size: 12px; }
.table tbody tr { transition: background var(--duration-fast); }
.table tbody tr:hover td { background: var(--surface-soft); }
.table tr:last-child td { border-bottom: 0; }

.progress { height: 8px; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface-soft); }
.progress > span, .inline-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent)); background-size: 200% 100%; animation: wbShimmer 4s linear infinite; }
.usage-row { display: grid; grid-template-columns: minmax(120px, 170px) 1fr auto; align-items: center; gap: 12px; margin: 11px 0; }
.usage-compact { display: grid; gap: 7px; margin: 13px 0; }
.usage-compact > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }
.usage-compact b { color: var(--text-soft); }

/* --------------------------------------------------------------------------
   7. Auth, public pages and landing
   -------------------------------------------------------------------------- */
.auth-shell {
  min-height: 100dvh;
  padding: calc(30px + var(--safe-top)) max(24px, var(--safe-right)) calc(30px + var(--safe-bottom)) max(24px, var(--safe-left));
  display: grid;
  grid-template-columns: minmax(340px, 520px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(34px, 7vw, 100px);
  background:
    radial-gradient(circle at 78% 25%, var(--aurora-a), transparent 32%),
    radial-gradient(circle at 50% 100%, var(--aurora-c), transparent 34%);
}
.auth-card { width: 100%; max-width: 520px; padding: clamp(24px, 4vw, 36px); border: 1px solid var(--border-strong); border-radius: 28px; background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(28px); box-shadow: var(--shadow-lg), var(--inner-highlight); }
.auth-card .brand { margin-bottom: 24px; }
.auth-card h2 { margin: 0 0 16px; font-size: clamp(25px, 4vw, 34px); }
.auth-tabs { margin-bottom: 18px; padding: 4px; border: 1px solid var(--border); border-radius: 13px; display: flex; gap: 4px; background: var(--surface-soft); }
.auth-tabs button { flex: 1; min-height: 38px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-weight: 800; cursor: pointer; }
.auth-tabs button.active { color: var(--text); background: var(--surface-raised); box-shadow: var(--shadow-xs); }
.auth-hero { max-width: 760px; }
.auth-hero h1 { margin: 17px 0; font-size: clamp(48px, 7vw, 92px); line-height: .93; letter-spacing: -.075em; }
.auth-hero p { max-width: 680px; color: var(--muted); font-size: clamp(16px, 2vw, 20px); line-height: 1.65; }
.legal-checks { display: grid; gap: 7px; }
.public-form { width: min(920px, calc(100% - 28px)); margin: calc(22px + var(--safe-top)) auto calc(42px + var(--safe-bottom)); }
.public-form > .brand { margin-bottom: 18px; }
.public-form .card { padding: clamp(20px, 4vw, 34px); }
.article-content { color: var(--text-soft); line-height: 1.72; }

.landing-shell { min-height: 100dvh; overflow: clip; }
.landing-header {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: calc(76px + var(--safe-top));
  padding: calc(10px + var(--safe-top)) max(24px, calc((100vw - 1280px) / 2), var(--safe-right)) 10px max(24px, calc((100vw - 1280px) / 2), var(--safe-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg);
  backdrop-filter: blur(26px) saturate(1.18);
}
.landing-brand > span:last-child { display: grid; }
.landing-brand b { font-size: 17px; letter-spacing: -.035em; }
.landing-brand small { margin-top: 2px; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .09em; }
.landing-nav { display: flex; align-items: center; gap: 25px; }
.landing-nav a, .landing-footer a { color: var(--muted); font-size: 12px; font-weight: 760; text-decoration: none; }
.landing-nav a:hover, .landing-footer a:hover { color: var(--text); }
.landing-actions { display: flex; gap: 8px; }
.landing-hero { width: min(1400px, 100%); min-height: 720px; margin: auto; padding: clamp(64px, 8vw, 108px) 38px 74px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr); align-items: center; gap: clamp(44px, 6vw, 84px); }
.landing-kicker { width: fit-content; min-height: 32px; padding: 7px 11px; border: 1px solid var(--accent-border); border-radius: 999px; display: inline-flex; align-items: center; gap: 9px; color: var(--text-soft); background: var(--accent-soft); font-size: 11px; font-weight: 800; }
.landing-kicker span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.landing-hero h1 { max-width: 790px; margin: 22px 0; font-size: clamp(49px, 5.7vw, 86px); line-height: .96; letter-spacing: -.074em; }
.landing-hero h1 em { color: var(--accent); font-style: normal; background: linear-gradient(120deg, var(--accent), var(--accent2), var(--accent)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wbShimmer 7s linear infinite; }
.landing-hero-copy > p { max-width: 680px; color: var(--muted); font-size: 17px; line-height: 1.68; }
.landing-hero-actions { margin: 28px 0 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.landing-trust { display: flex; gap: 10px 20px; flex-wrap: wrap; color: var(--text-soft); font-size: 11px; }
.landing-trust.vertical { display: grid; margin: 22px 0; }
.landing-product-frame { position: relative; border: 1px solid var(--border-strong); border-radius: 27px; background: var(--panel); box-shadow: 0 55px 130px rgba(0,0,0,.28), 0 0 0 8px color-mix(in srgb, var(--panel) 40%, transparent), var(--inner-highlight); overflow: hidden; transform: perspective(1300px) rotateY(-2deg) rotateX(1deg); }
.landing-product-frame::before { content: ""; position: absolute; inset: -40% -20% auto 40%; height: 75%; pointer-events: none; background: radial-gradient(circle, var(--accent-soft-strong), transparent 68%); }
.product-window-bar { height: 47px; padding: 0 15px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 7px; background: var(--surface-soft); }
.product-window-bar > span { width: 9px; height: 9px; border-radius: 50%; background: #fb7185; }
.product-window-bar > span:nth-child(2) { background: #fbbf24; }
.product-window-bar > span:nth-child(3) { background: #34d399; }
.product-window-bar b { margin: auto; color: var(--faint); font: 650 9px ui-monospace, monospace; }
.product-window-body { min-height: 430px; display: grid; grid-template-columns: 58px minmax(0, 1fr); }
.product-mini-sidebar { padding: 14px 10px; border-right: 1px solid var(--border); display: grid; align-content: start; gap: 12px; background: color-mix(in srgb, var(--panel2) 55%, transparent); }
.product-logo { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--accent-ink); background: linear-gradient(145deg, var(--accent3), var(--accent)); font-size: 10px; font-weight: 950; }
.product-mini-sidebar i { width: 35px; height: 32px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); }
.product-mini-sidebar i.active { border-color: var(--accent-border); background: var(--accent-soft); }
.product-preview-main { min-width: 0; padding: 19px; }
.product-preview-head, .preview-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-preview-head div { display: grid; gap: 2px; }
.product-preview-head small, .product-preview-head span, .preview-card-head span { color: var(--muted); font-size: 9px; }
.product-metrics { margin: 17px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.product-metrics article, .preview-focus, .preview-modules { padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.product-metrics span { color: var(--muted); font-size: 8px; }
.product-metrics b { display: block; margin: 7px 0; font-size: 22px; }
.product-metrics small { color: var(--success); font-size: 8px; }
.product-board-preview { display: grid; grid-template-columns: 1.2fr .8fr; gap: 9px; }
.preview-task { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 9px; }
.preview-task:last-child { border: 0; }
.preview-task > i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.preview-task > i.blue { background: var(--blue); }
.preview-task > i.green { background: var(--success); }
.preview-task span { min-width: 0; display: grid; }
.preview-task b { font-size: 10px; }
.preview-task small { color: var(--muted); font-size: 8px; }
.preview-module-grid { margin-top: 11px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.preview-module-grid span { aspect-ratio: 1.1; padding: 8px; border: 1px solid var(--border); border-radius: 11px; display: grid; place-items: center; color: var(--accent); background: var(--panel); font-size: 17px; }
.preview-module-grid small { display: block; color: var(--muted); font-size: 8px; }
.landing-section { width: min(1280px, 100%); margin: auto; padding: 90px 34px; }
.landing-section-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.landing-section-head.left { margin-left: 0; text-align: left; }
.landing-section-head h2 { margin: 13px 0; font-size: clamp(35px, 4.3vw, 58px); line-height: 1.02; letter-spacing: -.064em; }
.landing-section-head p { color: var(--muted); font-size: 16px; line-height: 1.65; }
.feature-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.feature-card { min-height: 250px; padding: 23px; display: flex; flex-direction: column; background: radial-gradient(circle at 100% 0, var(--accent-soft), transparent 46%), var(--panel); }
.feature-card:hover { transform: translateY(-4px); border-color: var(--accent-border); box-shadow: var(--shadow-md); }
.feature-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--accent-border); border-radius: 15px; color: var(--accent); background: var(--accent-soft); font-size: 21px; }
.feature-card h3 { margin: 22px 0 8px; font-size: 20px; }
.feature-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.feature-mini-layout { margin-top: auto; padding-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.feature-mini-layout span { min-height: 28px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); }
.scenario-section { display: grid; gap: 13px; }
.scenario-grid, .landing-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.scenario-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scenario-top { min-height: 200px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); box-shadow: var(--shadow-xs); }
.scenario-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--accent); background: var(--accent-soft); font-size: 20px; }
.scenario-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.landing-price { position: relative; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-sm); }
.landing-price h3 { margin: 14px 0 7px; font-size: 22px; }
.landing-price .plan-price { font-size: 31px; font-weight: 950; }
.landing-price ul { padding-left: 18px; color: var(--muted); line-height: 1.75; }
.landing-cta { width: min(1220px, calc(100% - 40px)); margin: 50px auto 90px; padding: clamp(32px, 6vw, 70px); border: 1px solid var(--accent-border); border-radius: 34px; display: flex; align-items: center; justify-content: space-between; gap: 26px; background: radial-gradient(circle at 85% 20%, var(--accent-soft-strong), transparent 42%), linear-gradient(145deg, var(--panel), var(--panel2)); box-shadow: var(--shadow-lg); }
.landing-footer { padding: 28px max(24px, calc((100vw - 1280px)/2)) calc(28px + var(--safe-bottom)); border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 20px; color: var(--muted); }

/* --------------------------------------------------------------------------
   8. Dashboard and workspace cards
   -------------------------------------------------------------------------- */
.workspace-hero { min-height: 245px; padding: clamp(25px, 4vw, 40px); border: 1px solid var(--accent-border); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: space-between; gap: 30px; background: radial-gradient(circle at 88% 5%, var(--accent-soft-strong), transparent 38%), linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--panel2) 70%, var(--panel))); box-shadow: var(--shadow-md), var(--inner-highlight); overflow: hidden; }
.workspace-hero h1 { margin: 13px 0 10px; font-size: clamp(35px, 5vw, 58px); line-height: 1; }
.workspace-hero p { max-width: 710px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.hero-actions { margin-top: 24px; display: flex; gap: 9px; flex-wrap: wrap; }
.workspace-hero-aside { min-width: 250px; padding: 15px; border: 1px solid var(--border); border-radius: 18px; display: flex; align-items: center; gap: 13px; background: color-mix(in srgb, var(--surface-soft) 84%, transparent); backdrop-filter: blur(16px); }
.hero-company-mark { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; border-radius: 16px; color: var(--accent-ink); background: linear-gradient(145deg, var(--accent3), var(--accent)); font-weight: 950; }
.workspace-hero-aside > div:last-child { display: grid; }
.workspace-hero-aside span, .workspace-hero-aside small { color: var(--muted); font-size: 9px; }
.workspace-hero-aside b { margin: 3px 0; font-size: 14px; }
.metric-grid { margin: 16px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.metric-card { min-height: 132px; padding: 15px; border: 1px solid var(--border); border-radius: var(--radius-md); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; background: var(--panel); box-shadow: var(--shadow-xs), var(--inner-highlight); }
.metric-card.accent { border-color: var(--accent-border); background: radial-gradient(circle at 100% 0, var(--accent-soft-strong), transparent 60%), var(--panel); }
.metric-card.metric-alert { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.metric-card > button { width: 31px; height: 31px; border: 0; border-radius: 10px; color: var(--accent); background: var(--accent-soft); cursor: pointer; }
.metric-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: var(--accent); background: var(--accent-soft); font-size: 19px; font-weight: 900; }
.metric-icon.blue { color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--surface)); }
.metric-icon.red { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.metric-icon.violet { color: var(--violet); background: color-mix(in srgb, var(--violet) 10%, var(--surface)); }
.metric-card span { color: var(--muted); font-size: 10px; font-weight: 800; }
.metric-card strong { display: block; margin: 5px 0 2px; font-size: 28px; line-height: 1; letter-spacing: -.05em; }
.metric-card small { color: var(--faint); font-size: 9px; }
.dashboard-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, .7fr); align-items: start; gap: 15px; }
.dashboard-main-column, .dashboard-side-column { display: grid; gap: 15px; }
.focus-list, .project-strip { display: grid; gap: 8px; }
.focus-task { width: 100%; min-height: 66px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 13px; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 11px; color: var(--text); background: var(--surface-soft); text-align: left; cursor: pointer; }
.focus-task:hover { border-color: var(--accent-border); background: var(--surface-hover); transform: translateX(2px); }
.focus-task.overdue { border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); }
.task-check-ring { width: 20px; height: 20px; border: 2px solid var(--border-strong); border-radius: 7px; }
.focus-task-main { min-width: 0; display: grid; gap: 2px; }
.focus-task-main > small { color: var(--faint); font-size: 8px; font-weight: 850; }
.focus-task-main > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.focus-task-main > span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
.focus-task-main em { margin-left: 5px; font-style: normal; }
.focus-status { padding: 5px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--panel); font-size: 8px; white-space: nowrap; }
.row-arrow { color: var(--faint); font-size: 20px; }
.priority-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.priority-dot.high, .priority-dot.highest { background: var(--danger); }
.priority-dot.medium { background: var(--warning); }
.priority-dot.low { background: var(--success); }
.project-mini-card { width: 100%; min-height: 64px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 13px; display: grid; grid-template-columns: 4px minmax(0,1fr) auto; align-items: stretch; gap: 11px; color: var(--text); background: var(--surface-soft); text-align: left; cursor: pointer; }
.project-mini-card:hover { border-color: var(--accent-border); background: var(--surface-hover); }
.project-color { width: 4px; border-radius: 999px; }
.project-mini-main { min-width: 0; align-self: center; display: grid; }
.project-mini-main small { color: var(--accent); font-size: 8px; font-weight: 900; }
.project-mini-main b, .project-mini-main em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-mini-main b { font-size: 12px; }
.project-mini-main em { margin-top: 2px; color: var(--muted); font-size: 9px; font-style: normal; }
.decision-row { width: 100%; min-height: 60px; padding: 9px; border: 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.decision-row:hover { background: var(--surface-soft); }
.decision-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--violet); background: color-mix(in srgb, var(--violet) 10%, var(--surface)); }
.decision-row > span:nth-child(2) { min-width: 0; display: grid; }
.decision-row b, .decision-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decision-row b { font-size: 11px; }
.decision-row small { color: var(--muted); font-size: 8px; }
.pwa-card { min-height: 260px; padding: 20px; border: 1px solid var(--accent-border); border-radius: var(--radius-lg); background: radial-gradient(circle at 80% 0, var(--accent-soft-strong), transparent 55%), linear-gradient(145deg, var(--panel), var(--panel2)); box-shadow: var(--shadow-md); }
.pwa-card-icon { width: 56px; height: 56px; margin-bottom: 18px; display: grid; place-items: center; border-radius: 17px; color: var(--accent-ink); background: linear-gradient(145deg, var(--accent3), var(--accent)); box-shadow: 0 13px 30px var(--accent-glow); font-weight: 950; }
.pwa-card h3 { margin: 11px 0 6px; font-size: 21px; }
.pwa-card p { color: var(--muted); line-height: 1.55; }

/* --------------------------------------------------------------------------
   9. Projects and tasks
   -------------------------------------------------------------------------- */
.view-toolbar, .board-toolbar-modern { margin: 0 0 15px; padding: 10px; border: 1px solid var(--border); border-radius: 16px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; background: var(--panel); box-shadow: var(--shadow-xs), var(--inner-highlight); }
.search-field { min-width: 220px; flex: 1; display: flex; align-items: center; gap: 9px; padding: 0 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--input-bg); }
.search-field > span { color: var(--muted); }
.search-field input { min-height: 40px !important; padding-inline: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.toolbar-select { width: auto; min-width: 150px; }
.view-switch, .view-tabs, .segmented { padding: 3px; border: 1px solid var(--border); border-radius: 12px; display: flex; gap: 3px; background: var(--surface-soft); }
.view-switch button, .view-tabs button, .segmented button { min-height: 34px; padding: 7px 10px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.view-switch button.active, .view-tabs button.active, .segmented button.active { color: var(--text); background: var(--surface-raised); box-shadow: var(--shadow-xs); }
.project-grid-modern { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.project-card-modern { min-height: 255px; padding: 18px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--project-accent, var(--accent)) 12%, transparent), transparent 45%), var(--panel); box-shadow: var(--shadow-xs), var(--inner-highlight); cursor: pointer; }
.project-card-modern:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--project-accent, var(--accent)) 38%, var(--border)); box-shadow: var(--shadow-md); }
.project-card-top, .project-card-footer, .project-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.project-logo { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 14px; color: white; background: var(--project-accent, var(--accent)); font-weight: 950; }
.project-card-modern h2 { margin: 18px 0 6px; font-size: 21px; }
.project-card-modern p { margin: 0; color: var(--muted); line-height: 1.5; }
.project-progress { margin-top: auto; padding-top: 18px; }
.project-progress > div:first-child { margin-bottom: 7px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }
.project-card-footer { margin-top: 15px; color: var(--muted); font-size: 9px; }
.project-list-modern { display: grid; gap: 8px; }
.project-list-head, .project-list-row { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(120px, .7fr) minmax(160px, .8fr) 120px 40px; align-items: center; gap: 10px; }
.project-list-head { padding: 0 12px; color: var(--faint); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.project-list-row { min-height: 66px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); cursor: pointer; }
.project-list-row:hover { border-color: var(--accent-border); background: var(--surface-hover); }
.project-list-name { min-width: 0; display: flex; align-items: center; gap: 10px; }
.project-list-name > span { width: 4px; height: 38px; border-radius: 999px; }
.project-list-name > div { min-width: 0; display: grid; }
.project-list-name b, .project-list-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-list-name small { color: var(--muted); font-size: 9px; }

.project-header-modern { margin-bottom: 15px; padding: 21px; border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: radial-gradient(circle at 100% 0, var(--accent-soft), transparent 50%), var(--panel); box-shadow: var(--shadow-sm); }
.project-heading { min-width: 0; display: flex; align-items: center; gap: 14px; }
.project-heading h1 { margin: 2px 0; font-size: clamp(28px, 4vw, 43px); }
.project-heading p { margin: 3px 0 0; color: var(--muted); }
.project-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.board-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-counter { min-height: 34px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); background: var(--surface-soft); font-size: 10px; }
.bulk-bar { margin: 10px 0; padding: 10px; border: 1px solid var(--accent-border); border-radius: 13px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; background: var(--accent-soft); }
.kanban-modern { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 340px); gap: 12px; overflow-x: auto; padding: 2px 2px 16px; scroll-snap-type: x proximity; }
.kanban-column { min-height: 520px; padding: 11px; border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-soft) 72%, transparent); scroll-snap-align: start; }
.task-group-head, .kanban-column > header { min-height: 43px; padding: 3px 3px 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kanban-dropzone { min-height: 450px; }
.task-card-modern { position: relative; margin: 8px 0; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-xs), var(--inner-highlight); cursor: pointer; }
.task-card-modern:hover { transform: translateY(-2px); border-color: var(--accent-border); box-shadow: var(--shadow-sm); }
.task-card-modern.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.task-card-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task-card-modern h3 { margin: 10px 0 8px; font-size: 13px; line-height: 1.35; }
.task-card-meta, .task-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 9px; }
.priority-beacon { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.priority-beacon.high, .priority-beacon.highest { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 9%, transparent); }
.priority-beacon.medium { background: var(--warning); }
.priority-beacon.low { background: var(--success); }
.due-label { margin-left: auto; color: var(--faint); }
.task-list-modern { display: grid; gap: 8px; }
.task-group { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-soft); }
.task-row-modern { min-height: 60px; margin-top: 7px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 13px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; background: var(--panel); cursor: pointer; }
.task-row-modern:hover { border-color: var(--accent-border); background: var(--surface-hover); }
.task-row-title { min-width: 0; display: grid; }
.task-row-title b, .task-row-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row-title small { color: var(--muted); font-size: 9px; }
.task-table-modern { width: 100%; }
.timeline-modern { position: relative; display: grid; gap: 10px; }
.timeline-rail { position: absolute; left: 104px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.timeline-item { display: grid; grid-template-columns: 90px 20px minmax(0, 1fr); gap: 7px; align-items: start; }
.timeline-date { padding-top: 14px; color: var(--muted); font-size: 9px; text-align: right; }
.timeline-dot { width: 12px; height: 12px; margin: 15px auto 0; border: 3px solid var(--panel); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent-border); z-index: 1; }
.timeline-task-card { padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: var(--panel); }
.add-task-inline { width: 100%; min-height: 42px; border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--muted); background: transparent; cursor: pointer; }
.add-task-inline:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); }

/* --------------------------------------------------------------------------
   10. Workspaces, micro-services and runtime
   -------------------------------------------------------------------------- */
.workspace-builder-hero { margin-bottom: 18px; padding: clamp(25px, 4vw, 38px); border: 1px solid var(--accent-border); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: space-between; gap: 28px; background: radial-gradient(circle at 85% 10%, var(--accent-soft-strong), transparent 42%), linear-gradient(145deg, var(--panel), var(--panel2)); box-shadow: var(--shadow-md); }
.workspace-builder-hero h1 { margin: 11px 0 8px; font-size: clamp(33px, 5vw, 55px); }
.workspace-builder-hero p { max-width: 720px; color: var(--muted); }
.workspace-template-grid, .workspace-profile-grid, .microservice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.workspace-template-card, .workspace-profile-card, .microservice-card { min-height: 220px; padding: 18px; display: flex; flex-direction: column; cursor: pointer; }
.workspace-template-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-xs); }
.workspace-template-card:hover, .workspace-profile-card:hover, .microservice-card:hover { transform: translateY(-3px); }
.workspace-template-top, .profile-card-head, .microservice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.workspace-template-icon, .profile-large-icon, .microservice-accent { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; color: var(--accent); background: var(--accent-soft); font-size: 22px; }
.workspace-template-card h3, .workspace-profile-card h3, .microservice-card h3 { margin: 18px 0 7px; font-size: 20px; }
.workspace-template-card p, .workspace-profile-card p, .microservice-card p { color: var(--muted); line-height: 1.5; }
.template-meta, .profile-flags, .profile-stats { margin-top: auto; display: flex; gap: 7px; flex-wrap: wrap; }
.template-layout-preview { margin-top: 16px; min-height: 66px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; display: grid; grid-template-columns: 22% 1fr; gap: 6px; background: var(--surface-soft); }
.template-layout-preview > span, .template-layout-preview > div > span { border-radius: 7px; background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.template-layout-preview > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.profile-actions, .service-actions { margin-top: 14px; display: flex; gap: 7px; flex-wrap: wrap; }
.mode-chip { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); }
.layout-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.layout-choice-grid label { min-height: 115px; padding: 13px; border: 1px solid var(--border); border-radius: 14px; display: grid; align-content: center; gap: 5px; background: var(--surface-soft); cursor: pointer; }
.layout-choice-grid label.active { border-color: var(--accent-border); background: var(--accent-soft); }
.layout-choice-grid input { display: none; }
.layout-choice-grid span { color: var(--accent); font-size: 23px; }
.layout-choice-grid small { color: var(--muted); }
.builder-modal-intro { margin-bottom: 16px; padding: 14px; border: 1px solid var(--accent-border); border-radius: 15px; display: flex; align-items: center; gap: 13px; background: var(--accent-soft); }
.builder-modal-intro h3 { margin: 0; }
.builder-modal-intro p { margin: 4px 0 0; color: var(--muted); }
.builder-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.builder-json-grid { align-items: start; }

.microservice-runtime, .runtime-widget { grid-column: span var(--widget-span, 1); }
.runtime-grid { display: grid; grid-template-columns: repeat(var(--runtime-columns, 4), minmax(0, 1fr)); gap: 14px; }
.runtime-widget { min-height: 170px; padding: 17px; }
.runtime-widget-head, .runtime-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.runtime-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.runtime-metrics > div { min-height: 92px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.runtime-metrics span { color: var(--muted); font-size: 9px; }
.runtime-metrics b { display: block; margin-top: 8px; font-size: 23px; }
.runtime-action-grid, .service-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.runtime-action-grid button, .service-action-grid button { min-height: 74px; padding: 11px; border: 1px solid var(--border); border-radius: 13px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 2px 9px; color: var(--text); background: var(--surface-soft); text-align: left; cursor: pointer; }
.runtime-action-grid button:hover, .service-action-grid button:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.runtime-action-grid button > span, .service-action-grid button > span { grid-row: 1 / 3; align-self: center; color: var(--accent); font-size: 19px; }
.runtime-action-grid small, .service-action-grid small { color: var(--muted); }
.service-runtime-blocks { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.service-runtime-block { min-height: 65px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; display: grid; background: var(--surface-soft); }
.service-runtime-block small { color: var(--muted); }
.microservice-title { min-width: 0; display: flex; gap: 10px; }
.microservice-title > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 12px; color: white; }
.microservice-title > div { min-width: 0; }
.microservice-title h2 { margin: 2px 0 0; font-size: 16px; }
.microservice-title small { color: var(--muted); font-size: 8px; text-transform: uppercase; }

.service-runtime-shell { min-height: calc(100dvh - var(--topbar-height) - var(--safe-top)); padding: clamp(18px, 3vw, 36px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: radial-gradient(circle at 100% 0, var(--accent-soft), transparent 38%), var(--panel); }
.service-runtime-header { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.runtime-identity { min-width: 0; display: flex; align-items: center; gap: 13px; }
.runtime-icon { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; border-radius: 16px; color: white; background: var(--accent); font-size: 22px; }
.service-runtime-grid { display: grid; grid-template-columns: repeat(var(--service-columns, 4), minmax(0, 1fr)); gap: 13px; }
.service-runtime-card { grid-column: span var(--block-span, 1); min-height: 150px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-soft); }
.service-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.service-card-head h3 { margin: 0; }
.service-hero { min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 80% 10%, var(--accent-soft-strong), transparent 55%), var(--surface-soft); }
.service-data-cards, .service-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.service-data-list, .runtime-card-list { display: grid; gap: 7px; }
.service-data-list > div, .runtime-card-list > div { padding: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.service-inline-form { display: grid; gap: 8px; }
.service-chat-block, .service-call-block { min-height: 210px; }

/* --------------------------------------------------------------------------
   11. Studio
   -------------------------------------------------------------------------- */
.studio-shell { min-height: calc(100dvh - 2px); margin: -28px -30px calc(-60px - var(--safe-bottom)); background: var(--canvas); }
.studio-toolbar { position: sticky; top: 0; z-index: 55; min-height: calc(68px + var(--safe-top)); padding: calc(9px + var(--safe-top)) 12px 9px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; align-items: center; gap: 12px; background: var(--topbar-bg); backdrop-filter: blur(26px); }
.studio-toolbar-left, .studio-toolbar-actions, .studio-device-switch, .studio-mobile-tools { display: flex; align-items: center; gap: 7px; }
.studio-toolbar-left { min-width: 0; }
.studio-toolbar-left > div { min-width: 0; display: grid; }
.studio-toolbar-left small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.studio-logo { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; color: var(--accent-ink); background: linear-gradient(145deg, var(--accent3), var(--accent)); }
.studio-title-input { min-height: 27px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-weight: 900; }
.unsaved-dot { padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border)); border-radius: 999px; color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, var(--surface)); font-size: 8px; white-space: nowrap; }
.studio-device-switch { padding: 3px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); }
.studio-device-switch button { width: 34px; height: 32px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; }
.studio-device-switch button.active { color: var(--accent); background: var(--surface-raised); box-shadow: var(--shadow-xs); }
.studio-mobile-tools { display: none; }
.studio-layout { min-height: calc(100dvh - 68px - var(--safe-top)); display: grid; grid-template-columns: 280px minmax(0, 1fr) 310px; }
.studio-palette, .studio-inspector { min-height: 0; padding: 13px; overflow-y: auto; background: var(--panel); }
.studio-palette { border-right: 1px solid var(--border); }
.studio-inspector { border-left: 1px solid var(--border); }
.studio-panel-head { margin: 2px 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.studio-panel-head > div { display: grid; }
.studio-panel-head span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.studio-panel-head b { font-size: 12px; }
.studio-panel-head.compact { margin-top: 15px; }
.studio-ai-card { padding: 13px; border: 1px solid var(--accent-border); border-radius: 16px; background: radial-gradient(circle at 100% 0, var(--accent-soft-strong), transparent 56%), var(--surface-soft); }
.ai-orb { width: 38px; height: 38px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 12px; color: var(--accent-ink); background: linear-gradient(145deg, var(--accent3), var(--accent)); font-weight: 950; }
.studio-ai-card p { margin: 5px 0 10px; color: var(--muted); font-size: 10px; }
.studio-ai-card textarea { min-height: 92px; font-size: 11px; }
.component-palette-grid { margin-top: 11px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.component-palette-grid button { min-height: 86px; padding: 9px; border: 1px solid var(--border); border-radius: 12px; display: grid; align-content: start; gap: 3px; color: var(--text); background: var(--surface-soft); text-align: left; cursor: grab; }
.component-palette-grid button:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.component-palette-grid button > span { color: var(--accent); font-size: 18px; }
.component-palette-grid button b { font-size: 10px; }
.component-palette-grid button small { color: var(--muted); font-size: 8px; line-height: 1.3; }
.studio-subsection { margin-top: 15px; }
.source-chip { margin-top: 6px; padding: 7px; border: 1px solid var(--border); border-radius: 10px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 6px; background: var(--surface-soft); }
.source-chip span { color: var(--accent); font-size: 8px; }
.source-chip input { min-height: 30px !important; padding: 5px 7px !important; }
.source-chip button { border: 0; color: var(--muted); background: transparent; }
.studio-mini-empty { padding: 12px; border: 1px dashed var(--border); border-radius: 11px; color: var(--muted); font-size: 9px; text-align: center; }
.studio-stage-wrap { min-width: 0; padding: 28px; overflow: auto; background: radial-gradient(circle at 50% -5%, var(--accent-soft), transparent 30%), var(--canvas); }
.studio-stage { width: min(1180px, 100%); min-height: 720px; margin: auto; padding: 22px; border: 1px solid var(--border-strong); border-radius: 24px; background: var(--panel-solid); box-shadow: var(--shadow-lg); transition: width var(--duration), border-radius var(--duration); }
.device-tablet .studio-stage { width: 820px; max-width: 100%; }
.device-phone .studio-stage { width: 390px; max-width: 100%; border-radius: 34px; }
.studio-screen-header { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.studio-screen-header h1 { margin: 7px 0 4px; font-size: 30px; }
.studio-screen-header p { margin: 0; color: var(--muted); }
.studio-screen-brand { display: grid; justify-items: end; gap: 5px; }
.studio-screen-brand span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; color: white; background: var(--studio-accent, var(--accent)); }
.studio-screen-brand small { color: var(--muted); font-size: 8px; }
.studio-empty-canvas { min-height: 520px; border: 2px dashed var(--border); border-radius: 20px; display: grid; place-items: center; align-content: center; color: var(--muted); text-align: center; }
.studio-empty-canvas > span { font-size: 42px; color: var(--accent); }
.studio-empty-canvas h3 { margin: 10px 0 4px; }
.studio-empty-canvas p { max-width: 390px; margin: 0; }
.studio-canvas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.studio-block { position: relative; grid-column: span var(--block-span, 1); min-height: 145px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-soft); cursor: pointer; }
.studio-block:hover { border-color: var(--accent-border); }
.studio-block.selected { outline: 2px solid var(--studio-accent, var(--accent)); outline-offset: 1px; }
.studio-block-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.studio-block-tools { position: absolute; top: 7px; right: 7px; display: flex; gap: 4px; opacity: 0; }
.studio-block:hover .studio-block-tools, .studio-block.selected .studio-block-tools { opacity: 1; }
.studio-block-tools button { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--panel); }
.preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.preview-metrics > div { padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.preview-data, .preview-form, .preview-chat, .preview-call, .preview-text, .preview-action-grid { margin-top: 12px; }
.studio-inspector .field { margin: 9px 0; }
.studio-inspector textarea { min-height: 90px; }
.action-editor, .inspector-action { margin-top: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.preview .studio-palette, .preview .studio-inspector { display: none; }
.preview .studio-layout { grid-template-columns: 1fr; }
.preview .studio-stage-wrap { padding: 32px; }

/* --------------------------------------------------------------------------
   12. Chats and calls
   -------------------------------------------------------------------------- */
.communications-shell { min-height: calc(100dvh - var(--topbar-height) - var(--safe-top) - 70px); display: grid; grid-template-columns: 300px minmax(0, 1fr) 270px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-md); overflow: hidden; }
.chat-rooms-panel, .chat-conversation, .chat-details { min-width: 0; min-height: 0; }
.chat-rooms-panel { border-right: 1px solid var(--border); display: flex; flex-direction: column; background: color-mix(in srgb, var(--surface-soft) 55%, transparent); }
.chat-panel-head { min-height: 68px; padding: 13px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-panel-head h2 { margin: 0; font-size: 17px; }
.chat-search { padding: 10px; border-bottom: 1px solid var(--border); }
.chat-room-list { min-height: 0; flex: 1; overflow-y: auto; padding: 7px; }
.chat-room-list > button { width: 100%; min-height: 61px; margin: 3px 0; padding: 8px; border: 1px solid transparent; border-radius: 13px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.chat-room-list > button:hover, .chat-room-list > button.active { border-color: var(--border); background: var(--surface-soft); }
.chat-room-list > button.active { border-color: var(--accent-border); background: var(--accent-soft); }
.chat-room-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 13px; color: var(--accent); background: var(--accent-soft); }
.chat-room-list > button > span:nth-child(2) { min-width: 0; display: grid; }
.chat-room-list b, .chat-room-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-room-list b { font-size: 11px; }
.chat-room-list small { color: var(--muted); font-size: 8px; }
.count-bubble, .toolbar-counter { white-space: nowrap; }
.chat-conversation { display: flex; flex-direction: column; }
.chat-conversation-head { min-height: 68px; padding: 11px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-conversation-head h2, .chat-conversation-head p { margin: 0; }
.chat-conversation-head p { margin-top: 2px; color: var(--muted); font-size: 9px; }
.chat-head-actions { display: flex; align-items: center; gap: 6px; }
.chat-message-scroll { min-height: 0; flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: radial-gradient(circle at 55% -10%, var(--accent-soft), transparent 28%); }
.chat-message { align-self: flex-start; max-width: min(74%, 760px); padding: 10px 12px; border: 1px solid var(--border); border-radius: 15px 15px 15px 5px; background: var(--surface-soft); box-shadow: var(--shadow-xs); }
.chat-message.mine { align-self: flex-end; border-color: var(--accent-border); border-radius: 15px 15px 5px 15px; background: var(--accent-soft); }
.chat-message > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.chat-message strong { font-size: 9px; }
.chat-message time { color: var(--faint); font-size: 8px; }
.chat-message p { margin: 5px 0 0; white-space: pre-wrap; color: var(--text-soft); font-size: 12px; line-height: 1.5; }
.chat-composer { position: relative; padding: 11px; border-top: 1px solid var(--border); display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 7px; background: var(--panel); }
.chat-composer textarea { min-height: 45px; max-height: 160px; }
.typing-indicator { position: absolute; bottom: 100%; left: 13px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--panel); font-size: 8px; }
.chat-details { border-left: 1px solid var(--border); padding: 14px; overflow-y: auto; background: color-mix(in srgb, var(--surface-soft) 55%, transparent); }
.chat-detail-identity { display: grid; justify-items: center; text-align: center; }
.chat-detail-identity .chat-room-icon { width: 58px; height: 58px; font-size: 24px; }
.chat-detail-section { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border); }
.chat-detail-section h3 { font-size: 11px; }
.chat-no-room, .chat-empty { min-height: 300px; display: grid; place-items: center; align-content: center; color: var(--muted); text-align: center; }
.chat-no-room > span, .chat-empty > span { color: var(--accent); font-size: 36px; }
.chat-history-item, .call-history-item { padding: 9px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); }

.incoming-call-card { position: fixed; z-index: 230; right: max(18px, var(--safe-right)); bottom: calc(18px + var(--safe-bottom)); width: min(430px, calc(100vw - 28px)); padding: 14px; border: 1px solid var(--accent-border); border-radius: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; background: var(--panel-solid); box-shadow: var(--shadow-lg); }
.incoming-call-pulse { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--accent-ink); background: linear-gradient(145deg, var(--accent3), var(--accent)); animation: wbPulse 1.5s infinite; }
.incoming-call-card small, .incoming-call-card p { color: var(--muted); }
.incoming-call-card h3, .incoming-call-card p { margin: 2px 0; }
.incoming-call-card > div:last-child { display: grid; gap: 6px; }
.call-overlay { position: fixed; inset: 0; z-index: 240; padding: calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left)); display: grid; place-items: center; background: rgba(2, 5, 9, .82); backdrop-filter: blur(24px); }
.call-window { width: min(960px, 100%); min-height: min(680px, calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom))); border: 1px solid var(--border-strong); border-radius: 28px; display: flex; flex-direction: column; background: #080c13; color: #f7f9fc; box-shadow: 0 50px 150px rgba(0,0,0,.55); overflow: hidden; }
.call-window > header { min-height: 76px; padding: 14px 17px; border-bottom: 1px solid rgba(255,255,255,.10); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.call-window > header > div { display: grid; }
.call-window h2 { margin: 2px 0 0; color: #f7f9fc; }
.call-window small, .call-window > header > span { color: #8f9bad; }
.call-stage { min-height: 0; flex: 1; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(255,118,23,.14), transparent 42%), #070a10; overflow: hidden; }
.call-stage video { width: 100%; height: 100%; object-fit: cover; }
.call-avatar-large { width: 128px; height: 128px; display: grid; place-items: center; border-radius: 38px; color: var(--accent-ink); background: linear-gradient(145deg, var(--accent3), var(--accent)); box-shadow: 0 24px 80px var(--accent-glow); font-size: 38px; font-weight: 950; }
.call-remote-media { position: absolute; inset: 15px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; pointer-events: none; }
.call-waiting { position: absolute; bottom: 28px; display: flex; align-items: center; gap: 9px; color: #9ba8ba; }
.call-waiting span { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: wbPulse 1.3s infinite; }
.call-window > footer { min-height: 86px; padding: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #0c111a; }
.call-window > footer button { min-width: 48px; height: 48px; padding: 0 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; color: #f7f9fc; background: rgba(255,255,255,.07); cursor: pointer; }
.call-window > footer button.active { color: var(--warning); background: rgba(255,196,94,.13); }
.call-window > footer .end-call { color: white; background: var(--danger); border-color: transparent; transform: rotate(135deg); }

/* --------------------------------------------------------------------------
   13. Forms, docs, billing, analytics, admin and utility products
   -------------------------------------------------------------------------- */
.plan { min-height: 280px; display: flex; flex-direction: column; }
.plan.current { border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-md); }
.plan-price { margin: 10px 0; font-size: 31px; line-height: 1; font-weight: 950; letter-spacing: -.05em; }
.plan ul { padding-left: 18px; color: var(--muted); line-height: 1.7; }
.plan .btn { margin-top: auto; }
.file-drop { min-height: 130px; padding: 24px; border: 2px dashed var(--border-strong); border-radius: 17px; display: grid; place-items: center; color: var(--muted); background: var(--surface-soft); }
.file-drop:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.permission-grid, .permission-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.permission-option { min-height: 42px; padding: 8px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); }
.role-choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.role-choice { padding: 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.role-color { width: 11px; height: 11px; border-radius: 50%; }
.approval-card { padding: 16px; }
.approval-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--violet); }
.rating-row { display: flex; gap: 7px; }
.rating-button { min-width: 44px; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.markdown-editor { min-height: 360px; font-family: ui-monospace, monospace; line-height: 1.6; }
.knowledge-article { line-height: 1.72; }
.comment-list { display: grid; gap: 8px; }
.comment { padding: 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.comment p { margin: 6px 0; white-space: pre-wrap; }
.comment small { color: var(--muted); }
.search-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.search-results { display: grid; gap: 8px; }
.search-result { min-height: 66px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 13px; display: grid; grid-template-columns: 100px minmax(0,1fr) auto; gap: 10px; align-items: center; background: var(--panel); cursor: pointer; }
.search-result:hover { border-color: var(--accent-border); background: var(--surface-hover); }
.bar-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 46px; align-items: center; gap: 10px; }
.white-label-preview { min-height: 440px; padding: 25px; display: grid; place-items: center; background: var(--preview-bg, var(--bg)); }
.preview-window { width: min(430px, 100%); padding: 25px; border: 1px solid var(--border); border-radius: 22px; background: var(--panel); box-shadow: var(--shadow-lg); }
.brand-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 12px; }

/* --------------------------------------------------------------------------
   14. Release center, notifications and PWA updates
   -------------------------------------------------------------------------- */
.release-hero { min-height: 310px; padding: clamp(27px, 5vw, 52px); border: 1px solid var(--border); border-radius: var(--radius-xl); display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(210px, 280px); align-items: center; gap: clamp(22px, 4vw, 46px); background: radial-gradient(circle at 88% 0, var(--accent-soft-strong), transparent 42%), linear-gradient(145deg, var(--panel), var(--panel2)); box-shadow: var(--shadow-md); }
.release-hero.available { border-color: var(--accent-border); }
.release-orb { position: relative; width: 94px; height: 94px; display: grid; place-items: center; border-radius: 30px; color: var(--accent-ink); background: linear-gradient(145deg, var(--accent3), var(--accent)); box-shadow: 0 25px 70px var(--accent-glow); font-size: 25px; font-weight: 950; }
.release-orb i { position: absolute; inset: -10px; border: 1px solid var(--accent-border); border-radius: 36px; animation: wbPulse 2.2s infinite; }
.release-hero-copy h1 { margin: 10px 0; font-size: clamp(34px, 5vw, 58px); }
.release-hero-copy p { max-width: 720px; color: var(--muted); line-height: 1.6; }
.release-actions { margin: 20px 0 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.release-version-card { padding: 17px; border: 1px solid var(--border); border-radius: 18px; display: grid; gap: 7px; background: var(--surface-soft); }
.release-version-card small { color: var(--muted); }
.release-version-card strong { font-size: 24px; }
.release-version-card > div { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.release-version-card i { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.release-version-card i.online { background: var(--success); }
.release-history-section { margin-top: 28px; }
.release-timeline { position: relative; display: grid; gap: 13px; }
.release-timeline > article { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
.release-timeline-marker { position: relative; display: grid; justify-items: center; }
.release-timeline-marker span { width: 12px; height: 12px; margin-top: 22px; border: 3px solid var(--panel); border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 1px var(--border); z-index: 1; }
.release-timeline-marker i { position: absolute; top: 35px; bottom: -20px; width: 1px; background: var(--border); }
.release-timeline > article.current .release-timeline-marker span { background: var(--accent); }
.release-card { padding: 18px; border: 1px solid var(--border); border-radius: 17px; background: var(--panel); box-shadow: var(--shadow-xs); }
.release-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.release-card header > div { display: flex; gap: 7px; flex-wrap: wrap; }
.release-card time { color: var(--muted); font-size: 9px; }
.release-number { color: var(--accent); font-weight: 950; }
.release-card h3 { margin: 14px 0 7px; }
.release-card p, .release-card ul { color: var(--muted); }
.app-update-notice { position: fixed; z-index: 210; left: calc(var(--sidebar-width) + 20px); right: max(20px, var(--safe-right)); bottom: calc(20px + var(--safe-bottom)); min-height: 76px; padding: 11px 12px; border: 1px solid var(--accent-border); border-radius: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 11px; background: var(--panel-solid); box-shadow: var(--shadow-lg); }
.sidebar-compact .app-update-notice { left: calc(var(--sidebar-compact-width) + 20px); }
.app-update-notice.installed { border-color: color-mix(in srgb, var(--success) 30%, var(--border)); }
.update-notice-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; color: var(--accent); background: var(--accent-soft); font-size: 20px; }
.app-update-notice > div { min-width: 0; display: grid; }
.app-update-notice small, .app-update-notice p { color: var(--muted); }
.app-update-notice p { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.notification-list { display: grid; gap: 8px; }
.notification-card { padding: 13px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.notification-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.notification-card p { margin: 3px 0 0; color: var(--muted); }

/* --------------------------------------------------------------------------
   15. Modals, overlays, toasts
   -------------------------------------------------------------------------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 180; padding: calc(18px + var(--safe-top)) calc(18px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(18px + var(--safe-left)); display: grid; place-items: center; background: var(--overlay); backdrop-filter: blur(18px) saturate(.9); }
.modal { width: min(720px, 100%); max-height: min(88dvh, 920px); overflow-y: auto; padding: 19px; border: 1px solid var(--border-strong); border-radius: 23px; background: var(--panel-solid); box-shadow: var(--shadow-lg), var(--inner-highlight); animation: wbEnter var(--duration) var(--ease); }
.modal.wide { width: min(1120px, 100%); }
.modal-head { position: sticky; top: -19px; z-index: 3; margin: -19px -19px 15px; padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; background: color-mix(in srgb, var(--panel-solid) 90%, transparent); backdrop-filter: blur(18px); }
.modal-head h2 { margin: 0; font-size: 20px; }
.modal-actions { position: sticky; bottom: -19px; margin: 15px -19px -19px; padding: 12px 16px calc(12px + var(--safe-bottom)); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: color-mix(in srgb, var(--panel-solid) 92%, transparent); backdrop-filter: blur(18px); }
.toast-stack { position: fixed; z-index: 260; right: max(16px, var(--safe-right)); bottom: calc(16px + var(--safe-bottom)); width: min(390px, calc(100vw - 28px)); display: grid; gap: 8px; }
.toast { padding: 12px 14px; border: 1px solid var(--border-strong); border-left: 4px solid var(--accent); border-radius: 13px; color: var(--text); background: var(--panel-solid); box-shadow: var(--shadow-md); animation: wbEnter var(--duration) var(--ease); }
.mobile-backdrop { display: none; }

/* --------------------------------------------------------------------------
   16. Responsive desktop/tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1360px) {
  :root { --sidebar-width: 266px; }
  .topbar { grid-template-columns: minmax(180px, auto) minmax(220px, 360px) auto; }
  .content { padding-inline: 22px; }
  .project-grid-modern, .workspace-template-grid, .workspace-profile-grid, .microservice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .communications-shell { grid-template-columns: 280px minmax(0, 1fr); }
  .chat-details { display: none; }
}

@media (max-width: 1120px) {
  .grid.cols-4, .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3, .feature-card-grid, .landing-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-layout { grid-template-columns: minmax(0, 1fr); }
  .dashboard-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pwa-card { min-height: auto; }
  .landing-hero { grid-template-columns: 1fr; min-height: auto; }
  .landing-product-frame { width: min(880px, 100%); margin: auto; transform: none; }
  .topbar { grid-template-columns: minmax(180px, 1fr) minmax(220px, 330px) auto; }
  .topbar-user > span:last-child, .version-chip > span { display: none; }
  .studio-layout { grid-template-columns: 240px minmax(0, 1fr) 280px; }
  .permission-grid, .permission-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   17. Mobile app shell and iOS safe-area
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
  :root { --topbar-height: 64px; }
  body { padding: 0; }
  .layout, .layout.sidebar-compact { display: block; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(322px, 88vw);
    height: 100dvh;
    transform: translateX(-105%);
    transition: transform var(--duration) var(--ease);
    box-shadow: var(--shadow-lg);
    z-index: 100;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-compact .brand-copy, .sidebar-compact .workspace-switcher, .sidebar-compact .nav-group, .sidebar-compact .nav-label, .sidebar-compact .nav-meta { display: initial; }
  .sidebar-compact .brand-copy, .sidebar-compact .workspace-select-wrap, .sidebar-compact .sidebar-pwa .nav-label, .sidebar-compact .sidebar-user .nav-label { display: grid; }
  .sidebar-compact .nav-item, .sidebar-compact .sidebar-pwa, .sidebar-compact .sidebar-user { justify-content: flex-start; }
  .sidebar-compact .sidebar-collapse { position: static; }
  .mobile-backdrop { position: fixed; inset: 0; z-index: 90; display: block; background: rgba(2,5,9,.58); backdrop-filter: blur(4px); }
  .topbar {
    min-height: calc(var(--topbar-height) + var(--safe-top));
    padding: calc(8px + var(--safe-top)) max(11px, var(--safe-right)) 8px max(11px, var(--safe-left));
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .topbar-context { min-width: 0; }
  .mobile-menu { display: inline-grid; }
  .breadcrumbs { display: none; }
  .topbar-title { font-size: 15px; }
  .command-search { display: none; }
  .topbar-actions { gap: 5px; }
  .appearance-control, .topbar-actions > .icon-button:nth-of-type(1), .version-chip { display: none; }
  .topbar-user { width: 40px; height: 40px; padding: 3px; border-radius: 13px; }
  .topbar-user > span:last-child { display: none; }
  .topbar-user .avatar { width: 32px; height: 32px; }
  .content { padding: 16px max(12px, var(--safe-right)) calc(var(--dock-height) + 24px + var(--safe-bottom)) max(12px, var(--safe-left)); }
  .mobile-dock {
    position: fixed;
    z-index: 80;
    left: max(9px, var(--safe-left));
    right: max(9px, var(--safe-right));
    bottom: max(8px, var(--safe-bottom));
    min-height: var(--dock-height);
    padding: 6px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 21px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    background: color-mix(in srgb, var(--panel-solid) 88%, transparent);
    backdrop-filter: blur(24px) saturate(1.2);
    box-shadow: var(--shadow-lg), var(--inner-highlight);
  }
  .mobile-dock button { position: relative; min-width: 0; height: 55px; padding: 4px; border: 0; border-radius: 14px; display: grid; justify-items: center; align-content: center; gap: 3px; color: var(--muted); background: transparent; cursor: pointer; }
  .mobile-dock button > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 10px; font-size: 17px; }
  .mobile-dock button small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; font-weight: 800; }
  .mobile-dock button.active { color: var(--accent); background: var(--accent-soft); }
  .mobile-dock button.active > span { background: var(--accent-soft); }
  .mobile-dock-create { transform: translateY(-12px); }
  .mobile-dock .mobile-dock-create > span { width: 46px; height: 46px; border-radius: 15px; color: var(--accent-ink); background: linear-gradient(145deg, var(--accent3), var(--accent)); box-shadow: 0 12px 28px var(--accent-glow); font-size: 26px; }
  .mobile-dock button > i { position: absolute; top: 3px; right: 18%; min-width: 16px; height: 16px; padding: 0 3px; display: grid; place-items: center; border: 2px solid var(--panel-solid); border-radius: 999px; color: white; background: var(--danger); font-size: 7px; font-style: normal; }
  .page-head, .workspace-hero, .workspace-builder-hero, .project-header-modern, .landing-cta, .service-runtime-header { align-items: stretch; flex-direction: column; }
  .page-head { gap: 14px; }
  .page-head .actions, .project-header-actions { width: 100%; }
  .page-head .actions .btn, .project-header-actions .btn { flex: 1 1 auto; }
  .workspace-hero, .workspace-builder-hero { padding: 23px; border-radius: 24px; }
  .workspace-hero-aside { min-width: 0; width: 100%; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .feature-card-grid, .landing-plans, .workspace-template-grid, .workspace-profile-grid, .microservice-grid, .project-grid-modern, .permission-grid, .permission-selector, .role-choice-row { grid-template-columns: 1fr 1fr; }
  .dashboard-side-column { grid-template-columns: 1fr; }
  .view-toolbar, .board-toolbar-modern { align-items: stretch; }
  .search-field { flex-basis: 100%; }
  .project-list-head { display: none; }
  .project-list-row { grid-template-columns: minmax(0,1fr) auto; }
  .project-list-row > *:not(.project-list-name):not(.row-arrow) { display: none; }
  .kanban-modern { grid-auto-columns: minmax(280px, 82vw); }
  .form-row, .builder-checks, .layout-choice-grid { grid-template-columns: 1fr; }
  .runtime-grid, .service-runtime-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-shell { margin: -16px max(-12px, calc(-1 * var(--safe-right))) calc(-1 * (var(--dock-height) + 24px + var(--safe-bottom))) max(-12px, calc(-1 * var(--safe-left))); }
  .studio-toolbar { grid-template-columns: minmax(0,1fr) auto; }
  .studio-toolbar-actions { display: none; }
  .studio-device-switch { display: none; }
  .studio-mobile-tools { display: flex; }
  .studio-layout { display: block; }
  .studio-stage-wrap { min-height: calc(100dvh - var(--topbar-height) - var(--safe-top)); padding: 14px; }
  .studio-stage { min-height: calc(100dvh - 110px); padding: 14px; }
  .studio-palette, .studio-inspector { position: fixed; z-index: 130; top: calc(var(--topbar-height) + var(--safe-top)); bottom: calc(var(--dock-height) + 16px + var(--safe-bottom)); width: min(340px, 90vw); display: block; transform: translateX(-110%); transition: transform var(--duration) var(--ease); box-shadow: var(--shadow-lg); }
  .studio-palette { left: 0; border-right: 1px solid var(--border); }
  .studio-inspector { right: 0; left: auto; transform: translateX(110%); border-left: 1px solid var(--border); }
  .studio-palette.mobile-open, .studio-inspector.mobile-open { transform: translateX(0); }
  .studio-canvas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-block { grid-column: span 2; }
  .communications-shell { min-height: calc(100dvh - var(--topbar-height) - var(--safe-top) - var(--dock-height) - 40px); grid-template-columns: 260px minmax(0, 1fr); }
  .chat-details { display: none; }
  .release-hero { grid-template-columns: auto minmax(0, 1fr); }
  .release-version-card { grid-column: 1 / -1; }
  .app-update-notice { left: max(10px, var(--safe-left)); right: max(10px, var(--safe-right)); bottom: calc(var(--dock-height) + 15px + var(--safe-bottom)); grid-template-columns: auto minmax(0,1fr) auto; }
  .app-update-notice .btn.ghost { display: none; }
}

@media (max-width: 700px) {
  .page-head h1 { font-size: 32px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .feature-card-grid, .landing-plans, .workspace-template-grid, .workspace-profile-grid, .microservice-grid, .project-grid-modern, .permission-grid, .permission-selector, .role-choice-row { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { min-height: 116px; grid-template-columns: auto 1fr; }
  .metric-card > button { display: none; }
  .metric-card strong { font-size: 24px; }
  .landing-header { gap: 10px; }
  .landing-nav { display: none; }
  .landing-actions .btn.ghost { display: none; }
  .landing-brand small { display: none; }
  .landing-hero { padding: 50px 18px 54px; gap: 34px; }
  .landing-hero h1 { font-size: clamp(43px, 13vw, 62px); }
  .landing-hero-copy > p { font-size: 15px; }
  .landing-product-frame { border-radius: 20px; }
  .product-window-body { grid-template-columns: 45px minmax(0,1fr); }
  .product-mini-sidebar { padding-inline: 5px; }
  .product-logo, .product-mini-sidebar i { width: 32px; }
  .product-preview-main { padding: 12px; }
  .product-metrics { grid-template-columns: repeat(2, 1fr); }
  .product-metrics article:last-child { display: none; }
  .product-board-preview { grid-template-columns: 1fr; }
  .preview-modules { display: none; }
  .landing-section { padding: 65px 17px; }
  .scenario-grid { grid-template-columns: 1fr 1fr; }
  .landing-cta { width: calc(100% - 28px); padding: 27px; border-radius: 25px; }
  .landing-footer { flex-direction: column; }
  .auth-shell { display: block; padding-inline: 14px; }
  .auth-card { margin: 0 auto; border-radius: 23px; }
  .auth-hero { display: none; }
  .workspace-hero h1 { font-size: 38px; }
  .focus-task { grid-template-columns: auto minmax(0,1fr) auto; }
  .focus-status { display: none; }
  .runtime-grid, .service-runtime-grid { grid-template-columns: 1fr; }
  .runtime-widget, .microservice-runtime, .service-runtime-card { grid-column: 1 !important; }
  .communications-shell { display: block; min-height: auto; }
  .chat-rooms-panel { min-height: calc(100dvh - var(--topbar-height) - var(--safe-top) - var(--dock-height) - 35px); border-right: 0; }
  .chat-conversation { min-height: calc(100dvh - var(--topbar-height) - var(--safe-top) - var(--dock-height) - 35px); }
  .communications-shell:has(.chat-conversation:not(.chat-no-room)) .chat-rooms-panel { display: none; }
  .chat-conversation-head { padding-inline: 9px; }
  .chat-message-scroll { padding: 12px 9px; }
  .chat-message { max-width: 88%; }
  .chat-composer { padding: 8px; grid-template-columns: minmax(0,1fr) auto; }
  .chat-composer > :first-child:not(textarea) { display: none; }
  .incoming-call-card { grid-template-columns: auto minmax(0,1fr); }
  .incoming-call-card > div:last-child { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .call-overlay { padding: 0; }
  .call-window { min-height: 100dvh; border: 0; border-radius: 0; }
  .call-window > header { padding-top: calc(14px + var(--safe-top)); }
  .call-window > footer { padding-bottom: calc(14px + var(--safe-bottom)); }
  .release-hero { grid-template-columns: 1fr; text-align: center; }
  .release-orb { margin: auto; }
  .release-actions { justify-content: center; }
  .release-timeline > article { grid-template-columns: 20px minmax(0,1fr); }
  .release-card header { align-items: flex-start; flex-direction: column; }
  .table-wrap { margin-inline: -2px; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal, .modal.wide, .modal.sheet { width: 100%; max-height: calc(94dvh - var(--safe-top)); padding: 16px; border-radius: 24px 24px 0 0; border-inline: 0; border-bottom: 0; }
  .modal-head { top: -16px; margin: -16px -16px 14px; padding: 14px 15px; }
  .modal-actions { bottom: -16px; margin: 14px -16px -16px; }
  .app-update-notice { grid-template-columns: auto minmax(0,1fr); }
  .app-update-notice > .btn { grid-column: 1 / -1; width: 100%; }
  .app-update-notice p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

@media (max-width: 430px) {
  .content { padding-inline: max(10px, var(--safe-left)); }
  .topbar { padding-inline: max(8px, var(--safe-left)); }
  .topbar-actions > .notification-button:first-of-type { display: none; }
  .page-head h1 { font-size: 29px; }
  .btn { padding-inline: 12px; }
  .workspace-hero, .workspace-builder-hero { padding: 20px; }
  .metric-grid { gap: 9px; }
  .metric-card { padding: 11px; gap: 9px; }
  .metric-icon { width: 36px; height: 36px; border-radius: 12px; }
  .metric-card small { display: none; }
  .scenario-grid { grid-template-columns: 1fr; }
  .landing-actions .btn { min-height: 38px; padding-inline: 11px; }
  .landing-brand .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .landing-hero h1 { font-size: 42px; }
  .landing-product-frame { margin-inline: -6px; }
  .product-window-bar b { display: none; }
  .product-metrics b { font-size: 18px; }
  .mobile-dock { left: max(6px, var(--safe-left)); right: max(6px, var(--safe-right)); padding-inline: 5px; }
  .mobile-dock button small { font-size: 7px; }
  .studio-canvas-grid { grid-template-columns: 1fr; }
  .studio-block { grid-column: 1 !important; }
  .studio-screen-header { flex-direction: column; }
  .studio-screen-brand { justify-items: start; }
}

/* Standalone PWA and window controls overlay */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }
  .landing-header, .topbar, .studio-toolbar { -webkit-user-select: none; user-select: none; }
}
@media (display-mode: window-controls-overlay) {
  .topbar, .landing-header, .studio-toolbar { padding-top: max(calc(10px + var(--safe-top)), env(titlebar-area-height, 0px)); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body::before { display: none; }
}
@media (prefers-contrast: more) {
  :root { --border: rgba(160, 178, 204, .34); --border-strong: rgba(178, 195, 220, .52); }
  .card, .surface, .btn, input, select, textarea { box-shadow: none; }
}

/* --------------------------------------------------------------------------
   18. Product-specific component finishing
   -------------------------------------------------------------------------- */
.avatar-stack { display: flex; align-items: center; padding-left: 8px; }
.avatar-stack .avatar { margin-left: -8px; border: 2px solid var(--panel-solid); }
.component-type-badge { padding: 4px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--panel); font-size: 8px; font-weight: 850; }
.microservice-empty { min-height: 250px; padding: 25px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); display: grid; place-items: center; align-content: center; color: var(--muted); background: var(--surface-soft); text-align: center; }
.microservice-empty > span { color: var(--accent); font-size: 38px; }
.service-blocks-preview { display: flex; gap: 5px; flex-wrap: wrap; }
.service-blocks-preview span { padding: 5px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface-soft); font-size: 8px; }
.service-header-actions, .runtime-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.service-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; }
.service-metrics > div { padding: 13px; border: 1px solid var(--border); border-radius: 13px; display: grid; background: var(--surface-soft); }
.service-metrics span { color: var(--muted); font-size: 9px; }
.service-metrics b { margin: 6px 0; font-size: 26px; }
.service-metrics small { color: var(--success); font-size: 8px; }
.service-text-block p, .runtime-note { color: var(--muted); line-height: 1.65; }
.runtime-project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.runtime-status-bars { display: grid; gap: 8px; }
.runtime-status-bars > div { display: grid; grid-template-columns: 100px minmax(0,1fr) auto; align-items: center; gap: 8px; }
.mini-action { min-height: 34px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; color: var(--text-soft); background: var(--surface-soft); }
.open-link { color: var(--accent); text-decoration: none; }
.selection-check { width: 19px; height: 19px; border: 2px solid var(--border-strong); border-radius: 7px; display: grid; place-items: center; color: var(--accent-ink); background: transparent; }
.selected .selection-check { border-color: var(--accent); background: var(--accent); }
.project-key { color: var(--accent); font-weight: 950; font-size: 10px; letter-spacing: .04em; }
.project-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 10%, transparent); }
.pulse-progress { position: relative; overflow: hidden; }
.pulse-progress::after { content: ""; position: absolute; inset: 0; translate: -100% 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation: wbShimmer 2.6s linear infinite; }
.search-input { font-size: 16px; }
.form-progress { height: 8px; margin: 18px 0; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface-soft); }
.form-progress-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width var(--duration); }
.form-page-heading { margin: 18px 0 22px; }
.form-page-heading h2 { margin: 9px 0 4px; }
.form-navigation { margin-top: 22px; display: flex; justify-content: flex-end; gap: 8px; }
.product-options { display: grid; gap: 8px; }
.product-option { padding: 11px; border: 1px solid var(--border); border-radius: 13px; display: flex; align-items: center; gap: 9px; background: var(--surface-soft); cursor: pointer; }
.product-option:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.product-option span { flex: 1; display: flex; justify-content: space-between; gap: 12px; }
.product-option small { color: var(--accent); font-weight: 850; }
.order-total { margin-top: 18px; padding: 15px; border: 1px solid var(--accent-border); border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--accent-soft); }
.order-total b { color: var(--accent); font-size: 23px; }
.pwa-landing { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px, .8fr); align-items: center; gap: clamp(36px, 7vw, 80px); }
.pwa-landing h2 { margin: 13px 0; font-size: clamp(36px, 4vw, 58px); line-height: 1.03; letter-spacing: -.06em; }
.pwa-landing p { color: var(--muted); font-size: 16px; line-height: 1.65; }
.device-composition { height: 480px; position: relative; }
.device { position: absolute; border: 7px solid #252d39; background: #070b12; box-shadow: 0 35px 80px rgba(0,0,0,.32); }
.device.desktop { inset: 30px 15px 75px 0; border-radius: 18px; }
.device.phone { width: 180px; height: 365px; right: 0; bottom: 0; border-radius: 32px; z-index: 2; }
.device-screen { height: 100%; padding: 17px; border-radius: 11px; display: grid; align-content: start; gap: 11px; color: #fff; background: linear-gradient(145deg, #0d1522, #151f2d); }
.device.phone .device-screen { padding: 13px; border-radius: 23px; }
.device-screen > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #281307; background: linear-gradient(145deg, #ffd29b, #ff7617); font-size: 9px; font-weight: 950; }
.device-screen > div { height: 60px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.04); }
.timeline-task { min-width: 0; }
.form-navigation .btn { min-width: 120px; }
.plan-summary, .decision-panel, .focus-panel { min-width: 0; }
.workspace-hero-copy { min-width: 0; }
.service-header-actions { justify-content: flex-end; }
.service-fullscreen { max-width: none; }
.service-touch .service-action-grid button { min-height: 145px; font-size: 15px; }

@media (max-width: 920px) {
  .studio-block { grid-column: span 2; }
  .pwa-landing { grid-template-columns: 1fr; }
  .device-composition { width: min(560px, 100%); margin: auto; }
}
@media (max-width: 430px) {
  .studio-block { grid-column: 1; }
  .device-composition { height: 390px; }
  .device.desktop { inset: 15px 10px 75px 0; }
  .device.phone { width: 145px; height: 290px; }
}

/* --------------------------------------------------------------------------
   19. WorkBlock 2.5 — component foundation
   Stable geometry, SVG iconography and card-first micro-service experience.
   -------------------------------------------------------------------------- */

/* Vector icon system ------------------------------------------------------- */
.wb-icon {
  width: 1.25em;
  height: 1.25em;
  min-width: 1.25em;
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.wb-icon-logo {
  fill: currentColor;
  stroke: none;
}

/* Stable control contract ------------------------------------------------- */
.btn {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  gap: 9px;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
  overflow-wrap: normal;
}
.btn > span { min-width: 0; }
.btn .wb-icon { flex: 0 0 auto; font-size: 16px; }
.btn.small { min-height: 36px; padding: 8px 11px; border-radius: 11px; font-size: 12px; }
.btn.xl { min-height: 54px; padding: 14px 22px; border-radius: 18px; font-size: 15px; }
.btn.primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(110deg, transparent 15%, rgba(255,255,255,.34) 45%, transparent 75%);
  translate: -100% 0;
  transition: opacity .18s ease;
}
.btn.primary:hover::after { opacity: 1; animation: wbButtonSweep .72s var(--ease); }
@keyframes wbButtonSweep { to { translate: 100% 0; } }

.icon-button,
.close,
.sidebar-collapse {
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  font-size: 18px;
}
.icon-button .wb-icon,
.close .wb-icon,
.sidebar-collapse .wb-icon { width: 19px; height: 19px; }

/* Icon-bearing surfaces --------------------------------------------------- */
.brand-mark,
.product-logo,
.studio-logo,
.workspace-template-icon,
.profile-large-icon,
.microservice-icon,
.profile-mode-icon,
.nav-icon,
.metric-icon,
.feature-icon,
.scenario-icon,
.service-hero-icon,
.service-call-icon,
.service-action-icon,
.runtime-action-icon,
.chat-room-icon,
.palette-icon,
.inspector-action-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 15px;
}
.brand-mark .wb-icon { width: 25px; height: 25px; }
.nav-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  transition: color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast);
}
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  color: var(--accent);
  background: var(--accent-soft);
  transform: scale(1.04);
}
.sidebar-user-arrow { margin-left: auto; color: var(--faint); }
.command-search-icon { display: inline-grid; place-items: center; color: var(--accent); }

/* App shell normalization ------------------------------------------------- */
.topbar {
  min-height: calc(72px + var(--safe-top));
  padding: calc(10px + var(--safe-top)) clamp(16px, 2vw, 28px) 10px;
  gap: 18px;
}
.topbar-context { min-width: 210px; }
.topbar-title { font-size: 17px; line-height: 1.2; }
.command-search {
  width: min(520px, 42vw);
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 14px;
}
.topbar-actions { flex: 0 0 auto; gap: 7px; }
.version-chip { min-height: 38px; }
.content {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding: clamp(20px, 2.4vw, 34px);
  padding-bottom: calc(clamp(36px, 5vw, 70px) + var(--safe-bottom));
}
.page-head {
  min-height: 128px;
  padding: clamp(20px, 2.5vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  align-items: center;
  background:
    radial-gradient(circle at 92% 12%, var(--view-soft, var(--accent-soft)), transparent 38%),
    linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--panel2) 76%, var(--panel)));
  box-shadow: var(--shadow-sm), var(--inner-highlight);
  overflow: hidden;
}
.page-head h1 { font-size: clamp(28px, 3vw, 44px); }
.page-head > .actions,
.page-head > button { flex: 0 0 auto; }
.section-head { align-items: center; }
.section-head h2 { font-size: clamp(21px, 2.4vw, 29px); }

/* Universal cards --------------------------------------------------------- */
.card,
.surface,
.runtime-widget,
.workspace-profile-card,
.microservice-card,
.project-card,
.approval-card,
.notification-card {
  border-radius: 20px;
  box-shadow: var(--shadow-xs), var(--inner-highlight);
}
.card,
.surface { padding: clamp(16px, 2vw, 22px); }
.grid { align-items: stretch; }
.grid > .card,
.grid > .surface { height: 100%; }
.empty-state > span,
.microservice-empty > span {
  color: var(--accent);
  background: var(--accent-soft);
}
.badge,
.status-pill,
.plan-chip,
.priority-pill,
.mode-chip,
.success-chip,
.alert-chip {
  min-height: 26px;
  padding: 5px 9px;
  font-size: 10px;
}

/* Workspace templates and ready configurations --------------------------- */
.workspace-template-grid,
.workspace-profile-grid,
.microservice-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 18px;
}
.workspace-template-card,
.workspace-profile-card,
.microservice-card {
  min-height: 310px;
  padding: 20px;
  border-radius: 22px;
  cursor: default;
  overflow: hidden;
}
.workspace-template-card,
.workspace-profile-card {
  background:
    radial-gradient(circle at 100% 0, var(--accent-soft), transparent 42%),
    linear-gradient(150deg, var(--panel), color-mix(in srgb, var(--panel2) 75%, var(--panel)));
}
.workspace-template-card:hover,
.workspace-profile-card:hover,
.microservice-card:hover {
  transform: translateY(-2px);
}
.workspace-template-top,
.profile-card-head,
.microservice-head {
  align-items: center;
}
.workspace-template-icon,
.profile-large-icon,
.microservice-icon {
  width: 52px;
  height: 52px;
  border: 1px solid var(--accent-border);
  border-radius: 17px;
  color: var(--accent);
  background: linear-gradient(145deg, var(--accent-soft-strong), var(--accent-soft));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.workspace-template-card h3,
.workspace-profile-card h3,
.microservice-card h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
}
.workspace-template-card > p,
.workspace-profile-card > p,
.microservice-card > p {
  min-height: 48px;
  margin: 15px 0;
  font-size: 13px;
  line-height: 1.55;
}
.profile-card-head > div,
.microservice-head > div { min-width: 0; flex: 1; }
.profile-card-head h3,
.microservice-head h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-stats {
  width: 100%;
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.profile-stats > span {
  min-width: 0;
  min-height: 67px;
  padding: 11px 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  place-items: center;
  align-content: center;
  background: var(--surface-soft);
  text-align: center;
}
.profile-stats b { font-size: 20px; line-height: 1; }
.profile-stats small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.profile-flags { min-height: 30px; margin-top: 13px; }
.profile-flags span,
.service-blocks-preview span {
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 10px;
}
.profile-actions {
  width: 100%;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.profile-actions .btn { width: 100%; }
.profile-actions .btn:nth-child(n+3) { min-height: 34px; }

/* Micro-service catalogue cards ------------------------------------------ */
.microservice-card {
  --micro-accent: var(--accent);
  isolation: isolate;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--micro-accent) 15%, transparent), transparent 36%),
    linear-gradient(150deg, var(--panel), color-mix(in srgb, var(--panel2) 72%, var(--panel)));
}
.microservice-accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  height: auto;
  border-radius: 0;
  opacity: .9;
}
.microservice-head {
  padding-left: 4px;
}
.microservice-icon {
  color: white;
  border-color: color-mix(in srgb, var(--micro-accent) 48%, var(--border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--micro-accent) 72%, white 12%), var(--micro-accent));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--micro-accent) 22%, transparent);
}
.microservice-head small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.service-blocks-preview {
  min-height: 62px;
  margin: 0 0 15px;
  align-content: start;
}
.microservice-empty {
  min-height: 310px;
  border-radius: 22px;
  cursor: pointer;
}
.microservice-empty:hover { border-color: var(--accent-border); background: var(--accent-soft); }

/* Micro-service runtime window ------------------------------------------- */
.service-runtime-shell {
  min-height: calc(100dvh - var(--topbar-height) - var(--safe-top) - 28px);
  padding: clamp(18px, 2.4vw, 32px);
  border-radius: 26px;
  background:
    radial-gradient(60rem 30rem at 92% -8%, color-mix(in srgb, var(--service-accent) 18%, transparent), transparent 54%),
    linear-gradient(155deg, var(--panel), color-mix(in srgb, var(--panel2) 70%, var(--panel)));
  box-shadow: var(--shadow-md), var(--inner-highlight);
}
.service-runtime-header {
  min-height: 116px;
  margin-bottom: 18px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
}
.service-runtime-header h1 { margin: 6px 0; font-size: clamp(28px, 4vw, 46px); }
.service-runtime-header p { max-width: 780px; margin: 0; color: var(--muted); }
.service-runtime-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.service-runtime-card {
  grid-column: span var(--service-span, var(--block-span, 1));
  min-height: 190px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(150deg, var(--surface-raised), var(--surface-soft));
  box-shadow: var(--shadow-xs), var(--inner-highlight);
  overflow: hidden;
}
.service-runtime-card:hover { border-color: color-mix(in srgb, var(--service-accent) 32%, var(--border)); }
.service-hero {
  min-height: 220px;
  padding: 22px;
  border-radius: 18px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--service-accent) 20%, transparent), transparent 46%),
    var(--surface-soft);
}
.service-hero-icon,
.service-call-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: white;
  background: linear-gradient(145deg, color-mix(in srgb, var(--service-accent) 70%, white 12%), var(--service-accent));
  box-shadow: 0 18px 44px color-mix(in srgb, var(--service-accent) 25%, transparent);
}
.service-hero h2 { margin: 4px 0 7px; font-size: clamp(24px, 3vw, 38px); }
.service-hero p { margin: 0; color: var(--muted); }
.service-action-grid,
.runtime-action-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.service-action-grid button,
.runtime-action-grid button,
.service-action-tile,
.runtime-action-tile {
  min-height: 108px;
  padding: 14px;
  border-radius: 16px;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 5px 11px;
  overflow: hidden;
}
.service-action-icon,
.runtime-action-icon {
  width: 42px;
  height: 42px;
  grid-row: 1 / 3;
  border: 1px solid var(--accent-border);
  border-radius: 13px;
  color: var(--service-accent, var(--accent));
  background: var(--accent-soft);
}
.service-action-grid b,
.runtime-action-grid b { min-width: 0; font-size: 13px; line-height: 1.25; }
.service-action-grid small,
.runtime-action-grid small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.service-data-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.service-data-cards > button {
  min-height: 94px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: var(--text);
  background: var(--surface-soft);
  text-align: left;
  cursor: pointer;
}
.service-data-cards > button:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.service-data-cards > button > i { width: 5px; height: 60%; min-height: 42px; border-radius: 999px; }
.service-data-cards > button > span { min-width: 0; display: grid; }
.service-data-cards small { color: var(--muted); font-size: 10px; }
.service-data-cards b { margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-data-cards em { color: var(--muted); font-size: 11px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-data-list > button,
.runtime-card-list > button,
.service-chat-block > button:not(.btn) {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--text);
  background: var(--surface-soft);
  text-align: left;
  cursor: pointer;
}
.service-data-list > button:hover,
.runtime-card-list > button:hover,
.service-chat-block > button:not(.btn):hover { border-color: var(--accent-border); background: var(--accent-soft); }
.service-call-block {
  min-height: 220px;
  padding: 20px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  background: radial-gradient(circle at 82% 15%, var(--accent-soft-strong), transparent 45%), var(--surface-soft);
}
.service-call-block h2 { margin: 0 0 6px; }
.service-call-block p { margin: 0; color: var(--muted); }
.service-call-block > div:last-child { display: grid; gap: 8px; }

/* WorkBlock Studio -------------------------------------------------------- */
.studio-shell {
  margin: calc(-1 * clamp(20px, 2.4vw, 34px));
  margin-bottom: calc(-1 * (clamp(36px, 5vw, 70px) + var(--safe-bottom)));
  min-height: calc(100dvh - var(--topbar-height) - var(--safe-top));
  background: var(--canvas);
}
.studio-toolbar {
  grid-template-columns: minmax(260px, 1fr) auto auto;
  min-height: calc(72px + var(--safe-top));
  padding: calc(10px + var(--safe-top)) 14px 10px;
}
.studio-logo { color: var(--accent-ink); }
.studio-layout {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr) 320px;
  min-height: calc(100dvh - 72px - var(--safe-top));
}
.studio-palette,
.studio-inspector {
  min-width: 0;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}
.studio-palette { border-right: 1px solid var(--border); }
.studio-inspector { border-left: 1px solid var(--border); }
.studio-panel-head {
  min-height: 64px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.component-palette-grid {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.component-palette-grid button {
  min-width: 0;
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 7px;
  color: var(--text);
  background: var(--surface-soft);
  text-align: left;
  cursor: grab;
}
.component-palette-grid button:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.palette-icon {
  width: 38px;
  height: 38px;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  color: var(--accent);
  background: var(--accent-soft);
}
.component-palette-grid button b { font-size: 12px; }
.component-palette-grid button small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.studio-ai-card {
  margin: 12px;
  padding: 14px;
  border: 1px solid var(--accent-border);
  border-radius: 18px;
  background: radial-gradient(circle at 100% 0, var(--accent-soft-strong), transparent 48%), var(--surface-soft);
}
.ai-orb {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  background: linear-gradient(145deg, var(--accent3), var(--accent));
  font-weight: 900;
}
.studio-stage-wrap {
  min-width: 0;
  padding: clamp(16px, 2.3vw, 30px);
  overflow: auto;
  background:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px),
    var(--canvas);
  background-size: 24px 24px;
}
.studio-stage {
  width: min(100%, 1260px);
  min-height: 720px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  background: var(--panel-solid);
  box-shadow: var(--shadow-lg);
}
.studio-canvas-grid { gap: 12px; }
.studio-block {
  min-height: 180px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(150deg, var(--surface-raised), var(--surface-soft));
  box-shadow: var(--shadow-xs), var(--inner-highlight);
}
.studio-block.selected {
  outline: 3px solid color-mix(in srgb, var(--studio-accent, var(--accent)) 45%, transparent);
  outline-offset: 2px;
}
.studio-block-label {
  min-height: 30px;
  justify-content: flex-start;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
}
.studio-block-label span { color: var(--accent); }
.studio-block-tools {
  top: 10px;
  right: 10px;
  opacity: 1;
  transform: translateY(-4px);
  pointer-events: none;
}
.studio-block:hover .studio-block-tools,
.studio-block.selected .studio-block-tools { transform: none; pointer-events: auto; }
.studio-block-tools button { cursor: pointer; }
.inspector-action {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.inspector-action-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--accent);
  background: var(--accent-soft);
}

/* Modals and visual windows ---------------------------------------------- */
.modal-backdrop {
  padding: calc(22px + var(--safe-top)) calc(22px + var(--safe-right)) calc(22px + var(--safe-bottom)) calc(22px + var(--safe-left));
}
.modal {
  width: min(760px, 100%);
  max-height: min(880px, calc(100dvh - 44px - var(--safe-top) - var(--safe-bottom)));
  border-radius: 24px;
  overflow: hidden;
}
.modal.wide { width: min(1120px, 100%); }
.modal > header {
  min-height: 72px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel2) 58%, var(--panel));
}
.modal > header h2 { margin: 0; font-size: 20px; }
.modal > .modal-body,
.modal > div:last-child { padding: 18px; }
.builder-modal-intro {
  min-height: 82px;
  padding: 14px 16px;
  border-radius: 17px;
}
.layout-choice-grid label {
  min-height: 132px;
  border-radius: 17px;
}
.layout-choice-grid label span {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
}

/* Landing visual window and vector identity ------------------------------ */
.landing-product-frame {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 48px 130px rgba(0,0,0,.30), var(--inner-highlight);
}
.product-window-bar { min-height: 48px; }
.product-window-body { min-height: 510px; }
.product-logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--accent-ink);
  background: linear-gradient(145deg, var(--accent3), var(--accent));
}
.preview-module-grid span {
  min-height: 86px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
}
.feature-icon,
.scenario-icon {
  width: 52px;
  height: 52px;
  border-radius: 17px;
}

/* Themes: component-level differences ------------------------------------ */
:root[data-theme="orange-dark"] .microservice-card,
:root[data-theme="orange-dark"] .workspace-profile-card,
:root[data-theme="orange-dark"] .service-runtime-card {
  box-shadow: 0 15px 42px rgba(0,0,0,.22), var(--inner-highlight);
}
:root[data-theme="blue-white"] .card,
:root[data-theme="blue-white"] .surface,
:root[data-theme="blue-white"] .workspace-profile-card,
:root[data-theme="blue-white"] .microservice-card,
:root[data-theme="blue-white"] .service-runtime-card {
  background: linear-gradient(155deg, #fff, #f7faff);
}
:root[data-theme="blue-sky"] .card,
:root[data-theme="blue-sky"] .surface,
:root[data-theme="blue-sky"] .workspace-profile-card,
:root[data-theme="blue-sky"] .microservice-card,
:root[data-theme="blue-sky"] .service-runtime-card {
  background: linear-gradient(155deg, rgba(255,255,255,.96), rgba(236,248,255,.95));
}

/* Responsive reconstruction ---------------------------------------------- */
@media (max-width: 1280px) {
  .studio-layout { grid-template-columns: 260px minmax(0, 1fr) 286px; }
  .service-runtime-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1120px) {
  .command-search { width: min(390px, 36vw); }
  .workspace-template-grid,
  .workspace-profile-grid,
  .microservice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-layout { grid-template-columns: 244px minmax(0, 1fr); }
  .studio-inspector {
    position: fixed;
    top: calc(72px + var(--safe-top));
    right: 0;
    bottom: 0;
    z-index: 90;
    width: min(360px, 92vw);
    translate: 100% 0;
    transition: translate var(--duration) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .studio-inspector.mobile-open { translate: 0; }
  .studio-mobile-tools { display: flex; }
}
@media (max-width: 920px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .command-search { display: none; }
  .page-head { min-height: 0; align-items: flex-start; }
  .service-runtime-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-runtime-card { grid-column: span min(var(--service-span, 1), 2); }
  .service-call-block { grid-template-columns: auto minmax(0, 1fr); }
  .service-call-block > div:last-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .studio-layout { grid-template-columns: 1fr; }
  .studio-palette {
    position: fixed;
    top: calc(72px + var(--safe-top));
    left: 0;
    bottom: 0;
    z-index: 90;
    width: min(330px, 92vw);
    translate: -100% 0;
    transition: translate var(--duration) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .studio-palette.mobile-open { translate: 0; }
}
@media (max-width: 700px) {
  .content {
    padding: 14px;
    padding-bottom: calc(var(--dock-height) + 34px + var(--safe-bottom));
  }
  .page-head {
    padding: 18px;
    border-radius: 20px;
    flex-direction: column;
    gap: 16px;
  }
  .page-head > .actions,
  .page-head > button { width: 100%; }
  .page-head > .actions .btn,
  .page-head > button { flex: 1; }
  .workspace-template-grid,
  .workspace-profile-grid,
  .microservice-grid { grid-template-columns: 1fr; }
  .workspace-template-card,
  .workspace-profile-card,
  .microservice-card { min-height: 0; }
  .profile-actions { grid-template-columns: 1fr 1fr; }
  .service-runtime-shell { padding: 12px; border-radius: 20px; }
  .service-runtime-header { padding: 16px; align-items: flex-start; flex-direction: column; }
  .service-header-actions { width: 100%; }
  .service-header-actions .btn { flex: 1; }
  .service-runtime-grid { grid-template-columns: 1fr; }
  .service-runtime-card { grid-column: 1 !important; min-height: 0; }
  .service-action-grid,
  .runtime-action-grid,
  .service-data-cards { grid-template-columns: 1fr 1fr; }
  .service-action-grid button,
  .runtime-action-grid button { min-height: 102px; }
  .service-hero { min-height: 180px; padding: 18px; }
  .service-call-block { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .service-call-block > div:last-child { width: 100%; grid-template-columns: 1fr; }
  .studio-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .studio-device-switch { display: none; }
  .studio-toolbar-actions .btn.ghost,
  .studio-toolbar-actions .btn.soft { display: none; }
  .studio-stage-wrap { padding: 12px; }
  .studio-stage { min-height: 620px; padding: 12px; border-radius: 18px; }
  .studio-canvas-grid { grid-template-columns: 1fr !important; }
  .studio-block { grid-column: 1 !important; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal,
  .modal.wide {
    width: 100%;
    max-height: calc(94dvh - var(--safe-top));
    border-radius: 24px 24px 0 0;
    border-bottom: 0;
  }
  .modal > div:last-child { padding-bottom: calc(18px + var(--safe-bottom)); }
}
@media (max-width: 430px) {
  .btn { min-height: 46px; }
  .profile-actions { grid-template-columns: 1fr; }
  .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-action-grid,
  .runtime-action-grid,
  .service-data-cards { grid-template-columns: 1fr; }
  .service-action-grid button,
  .runtime-action-grid button { min-height: 86px; }
  .service-hero { align-items: flex-start; flex-direction: column; }
  .component-palette-grid { grid-template-columns: 1fr 1fr; }
  .component-palette-grid button { min-height: 102px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn.primary:hover::after { animation: none; }
  .workspace-template-card:hover,
  .workspace-profile-card:hover,
  .microservice-card:hover,
  .component-palette-grid button:hover { transform: none; }
}

/* ========================================================================== 
   WorkBlock 2.6 — Landing & Onboarding
   Public product layer with AI configurator, presets and role-based previews.
   ========================================================================== */
.wb-landing {
  --lp-bg: #080b12;
  --lp-bg-2: #0d1320;
  --lp-panel: rgba(17, 23, 34, .88);
  --lp-panel-solid: #121927;
  --lp-panel-2: #1a2434;
  --lp-text: #f7f9fc;
  --lp-soft: #c7d0dd;
  --lp-muted: #8d9aae;
  --lp-border: rgba(174, 190, 215, .15);
  --lp-border-strong: rgba(174, 190, 215, .25);
  --lp-accent: #ff7617;
  --lp-accent-2: #8c6cff;
  --lp-accent-3: #32b7ff;
  --lp-accent-soft: rgba(255, 118, 23, .14);
  --lp-shadow: 0 30px 100px rgba(0, 0, 0, .28);
  min-height: 100dvh;
  color: var(--lp-text);
  background:
    radial-gradient(circle at 12% 4%, rgba(255, 118, 23, .11), transparent 28%),
    radial-gradient(circle at 86% 8%, rgba(91, 108, 255, .10), transparent 31%),
    linear-gradient(180deg, var(--lp-bg), var(--lp-bg-2) 52%, var(--lp-bg));
  overflow: clip;
  isolation: isolate;
}
.wb-landing-demo-blue-white {
  --lp-bg: #f5f8fc;
  --lp-bg-2: #eef3f9;
  --lp-panel: rgba(255,255,255,.88);
  --lp-panel-solid: #fff;
  --lp-panel-2: #eaf0f8;
  --lp-text: #10233d;
  --lp-soft: #334b69;
  --lp-muted: #6a7d95;
  --lp-border: rgba(55,83,119,.13);
  --lp-border-strong: rgba(55,83,119,.23);
  --lp-accent: #2867e8;
  --lp-accent-2: #8059e8;
  --lp-accent-3: #1ca9da;
  --lp-accent-soft: rgba(40,103,232,.10);
  --lp-shadow: 0 30px 100px rgba(40,67,102,.13);
  background: radial-gradient(circle at 12% 4%, rgba(40,103,232,.12), transparent 28%), radial-gradient(circle at 86% 8%, rgba(85,188,237,.11), transparent 31%), linear-gradient(180deg,var(--lp-bg),var(--lp-bg-2) 52%,var(--lp-bg));
}
.wb-landing-demo-blue-sky {
  --lp-bg: #eaf7ff;
  --lp-bg-2: #def1fd;
  --lp-panel: rgba(255,255,255,.86);
  --lp-panel-solid: #fff;
  --lp-panel-2: #dff2fe;
  --lp-text: #0d3049;
  --lp-soft: #31576f;
  --lp-muted: #64869a;
  --lp-border: rgba(20,113,164,.14);
  --lp-border-strong: rgba(20,113,164,.24);
  --lp-accent: #0786cf;
  --lp-accent-2: #4c76ee;
  --lp-accent-3: #22bfcb;
  --lp-accent-soft: rgba(7,134,207,.11);
  --lp-shadow: 0 30px 100px rgba(18,105,151,.14);
  background: radial-gradient(circle at 12% 4%, rgba(7,134,207,.14), transparent 28%), radial-gradient(circle at 86% 8%, rgba(34,191,203,.12), transparent 31%), linear-gradient(180deg,var(--lp-bg),var(--lp-bg-2) 52%,var(--lp-bg));
}
.wb-landing *, .wb-landing *::before, .wb-landing *::after { box-sizing: border-box; }
.wb-landing button, .wb-landing textarea { font: inherit; }
.wb-landing .btn { --accent: var(--lp-accent); --accent2: color-mix(in srgb, var(--lp-accent) 72%, white); --accent-ink: #fff; --accent-soft: var(--lp-accent-soft); --accent-border: color-mix(in srgb, var(--lp-accent) 34%, transparent); --panel2: var(--lp-panel-2); --text: var(--lp-text); --text-soft: var(--lp-soft); --border: var(--lp-border); }
.wb-landing-header {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: calc(76px + var(--safe-top));
  padding: calc(10px + var(--safe-top)) max(22px, calc((100vw - 1420px)/2)) 10px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  color: var(--lp-text);
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--lp-bg) 76%, transparent);
  backdrop-filter: blur(24px) saturate(150%);
  transition: border-color .2s ease, background .2s ease;
}
.wb-landing-header::after { content:""; position:absolute; inset:auto 0 -1px; height:1px; background:linear-gradient(90deg,transparent,var(--lp-border-strong),transparent); }
.wb-landing-brand { min-width: 0; padding: 0; border: 0; display: inline-flex; align-items: center; gap: 11px; color: inherit; background: none; cursor: pointer; text-align: left; }
.wb-landing-brand-mark { width: 43px; height: 43px; flex: 0 0 43px; display:grid; place-items:center; border-radius: 14px; color:#fff; background: linear-gradient(145deg,var(--lp-accent),var(--lp-accent-2)); box-shadow: 0 12px 30px color-mix(in srgb,var(--lp-accent) 30%,transparent), inset 0 1px 0 rgba(255,255,255,.3); }
.wb-landing-brand > span:last-child { display:grid; line-height:1.12; }
.wb-landing-brand b { font-size: 16px; letter-spacing:-.02em; }
.wb-landing-brand small { margin-top:4px; color:var(--lp-muted); font-size:10px; font-weight:700; }
.wb-landing-nav { display:flex; align-items:center; justify-content:center; gap:clamp(14px,2.3vw,31px); }
.wb-landing-nav a, .wb-footer-links a { color:var(--lp-muted); font-size:12px; font-weight:760; text-decoration:none; transition:color .16s ease; }
.wb-landing-nav a:hover, .wb-footer-links a:hover { color:var(--lp-text); }
.wb-landing-header-actions { display:flex; align-items:center; gap:8px; }
.wb-landing-menu-toggle { display:none; width:42px; height:42px; border:1px solid var(--lp-border); border-radius:13px; place-items:center; color:var(--lp-text); background:var(--lp-panel); }

.wb-landing-hero {
  position: relative;
  width: min(1420px, 100%);
  min-height: 760px;
  margin: 0 auto;
  padding: clamp(70px, 8vw, 118px) 34px 88px;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(500px,1.05fr);
  align-items:center;
  gap:clamp(46px,7vw,96px);
}
.wb-hero-aurora { position:absolute; z-index:-1; border-radius:50%; filter:blur(1px); pointer-events:none; opacity:.8; animation:wbLandingDrift 14s ease-in-out infinite alternate; }
.wb-hero-aurora.one { width:460px; height:460px; left:-240px; top:12%; background:radial-gradient(circle,color-mix(in srgb,var(--lp-accent) 17%,transparent),transparent 70%); }
.wb-hero-aurora.two { width:520px; height:520px; right:-220px; top:2%; background:radial-gradient(circle,color-mix(in srgb,var(--lp-accent-2) 14%,transparent),transparent 70%); animation-delay:-7s; }
.wb-landing-hero-copy { position:relative; z-index:2; min-width:0; }
.wb-landing-kicker, .wb-section-label { width:fit-content; min-height:32px; padding:7px 11px; border:1px solid color-mix(in srgb,var(--lp-accent) 29%,var(--lp-border)); border-radius:999px; display:inline-flex; align-items:center; gap:9px; color:var(--lp-soft); background:var(--lp-accent-soft); font-size:11px; font-weight:850; }
.wb-live-dot { width:7px; height:7px; border-radius:50%; background:var(--lp-accent); box-shadow:0 0 0 5px var(--lp-accent-soft); animation:wbLandingPulse 2.4s ease-in-out infinite; }
.wb-landing-hero h1 { max-width:780px; margin:22px 0; color:var(--lp-text); font-size:clamp(48px,5.5vw,82px); line-height:.98; letter-spacing:-.073em; }
.wb-landing-hero h1 em { font-style:normal; color:transparent; background:linear-gradient(112deg,var(--lp-accent),var(--lp-accent-2) 52%,var(--lp-accent-3)); background-size:180% 100%; -webkit-background-clip:text; background-clip:text; animation:wbLandingGradient 9s linear infinite; }
.wb-landing-hero-copy > p { max-width:700px; margin:0; color:var(--lp-muted); font-size:17px; line-height:1.7; }
.wb-landing-hero-actions { margin:29px 0 13px; display:flex; flex-wrap:wrap; gap:10px; }
.wb-text-link { padding:5px 0; border:0; display:inline-flex; align-items:center; gap:7px; color:var(--lp-soft); background:none; cursor:pointer; font-size:12px; font-weight:780; }
.wb-text-link:hover { color:var(--lp-accent); }
.wb-landing-proof { margin-top:25px; display:flex; flex-wrap:wrap; gap:10px 18px; color:var(--lp-muted); font-size:11px; font-weight:650; }
.wb-landing-proof span { display:inline-flex; align-items:center; gap:6px; }
.wb-landing-proof .wb-icon { color:var(--lp-accent); }

.wb-ai-demo-card { position:relative; padding:18px; border:1px solid var(--lp-border-strong); border-radius:30px; color:var(--lp-text); background:linear-gradient(145deg,color-mix(in srgb,var(--lp-panel-solid) 94%,transparent),var(--lp-panel)); box-shadow:var(--lp-shadow),inset 0 1px 0 rgba(255,255,255,.08); overflow:hidden; }
.wb-ai-demo-card::before { content:""; position:absolute; width:300px; height:300px; right:-130px; top:-150px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--lp-accent-2) 18%,transparent),transparent 70%); pointer-events:none; }
.wb-ai-demo-head { position:relative; display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.wb-ai-demo-head > div:first-child { min-width:0; display:flex; align-items:center; gap:11px; }
.wb-ai-demo-head > div:first-child > span:last-child { min-width:0; display:grid; }
.wb-ai-demo-head b { font-size:14px; }
.wb-ai-demo-head small { margin-top:3px; color:var(--lp-muted); font-size:9px; }
.wb-ai-orb { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:15px; color:#fff; background:linear-gradient(145deg,var(--lp-accent-2),var(--lp-accent-3)); box-shadow:0 12px 30px color-mix(in srgb,var(--lp-accent-2) 28%,transparent); }
.wb-ai-orb.small { width:36px; height:36px; flex-basis:36px; border-radius:12px; }
.wb-demo-theme-switch { padding:4px; border:1px solid var(--lp-border); border-radius:999px; display:flex; gap:4px; background:color-mix(in srgb,var(--lp-panel-2) 78%,transparent); }
.wb-demo-theme-switch button { width:18px; height:18px; padding:0; border:2px solid transparent; border-radius:50%; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.wb-demo-theme-switch button:nth-child(1) { background:linear-gradient(145deg,#111722,#ff7617); }
.wb-demo-theme-switch button:nth-child(2) { background:linear-gradient(145deg,#fff,#2867e8); }
.wb-demo-theme-switch button:nth-child(3) { background:linear-gradient(145deg,#e7f7ff,#0786cf); }
.wb-demo-theme-switch button.active { border-color:var(--lp-text); transform:scale(1.1); }
.wb-ai-prompt-label { display:block; margin:0 0 8px; color:var(--lp-soft); font-size:10px; font-weight:800; }
.wb-ai-prompt { width:100%; min-height:118px; resize:vertical; padding:15px 16px; border:1px solid var(--lp-border); border-radius:17px; color:var(--lp-text); background:color-mix(in srgb,var(--lp-bg) 68%,transparent); outline:0; font-size:13px; line-height:1.55; transition:border-color .18s ease,box-shadow .18s ease; }
.wb-ai-prompt:focus { border-color:color-mix(in srgb,var(--lp-accent) 55%,transparent); box-shadow:0 0 0 4px var(--lp-accent-soft); }
.wb-ai-quick-prompts { margin:10px 0 13px; display:flex; flex-wrap:wrap; gap:6px; }
.wb-ai-quick-prompts button { min-height:31px; padding:6px 9px; border:1px solid var(--lp-border); border-radius:10px; display:inline-flex; align-items:center; gap:6px; color:var(--lp-soft); background:color-mix(in srgb,var(--lp-panel-2) 66%,transparent); cursor:pointer; font-size:9px; font-weight:760; }
.wb-ai-quick-prompts button:hover { border-color:color-mix(in srgb,var(--lp-accent) 34%,var(--lp-border)); color:var(--lp-text); transform:translateY(-1px); }
.wb-ai-building { min-height:170px; margin-top:13px; padding:18px; border:1px solid var(--lp-border); border-radius:18px; display:grid; align-content:center; gap:9px; background:color-mix(in srgb,var(--lp-panel-2) 55%,transparent); overflow:hidden; }
.wb-ai-building span { height:12px; border-radius:999px; background:linear-gradient(90deg,var(--lp-panel-2),var(--lp-accent-soft),var(--lp-panel-2)); background-size:220% 100%; animation:wbLandingSkeleton 1.2s linear infinite; }
.wb-ai-building span:nth-child(2) { width:76%; }.wb-ai-building span:nth-child(3) { width:53%; }
.wb-ai-building small { margin-top:7px; color:var(--lp-muted); text-align:center; }
.wb-ai-result { margin-top:13px; padding:15px; border:1px solid color-mix(in srgb,var(--lp-accent) 27%,var(--lp-border)); border-radius:19px; background:linear-gradient(145deg,var(--lp-accent-soft),color-mix(in srgb,var(--lp-panel-2) 68%,transparent)); animation:wbLandingReveal .42s var(--ease) both; }
.wb-ai-result-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; }
.wb-preset-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg,var(--lp-accent),var(--lp-accent-2)); }
.wb-ai-result-head > div { min-width:0; display:grid; }.wb-ai-result-head small { color:var(--lp-muted); font-size:8px; }.wb-ai-result-head b { margin-top:3px; font-size:13px; }
.wb-ai-result-group { margin-top:12px; }.wb-ai-result-group > small { display:block; margin-bottom:6px; color:var(--lp-muted); font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.wb-ai-result-group > div { display:flex; flex-wrap:wrap; gap:5px; }.wb-ai-result-group span { padding:5px 7px; border:1px solid var(--lp-border); border-radius:8px; color:var(--lp-soft); background:var(--lp-panel); font-size:8px; font-weight:700; }
.wb-ai-result-automations { margin:12px 0; padding:10px; border-radius:12px; display:flex; align-items:center; gap:9px; background:color-mix(in srgb,var(--lp-panel-solid) 72%,transparent); }.wb-ai-result-automations .wb-icon { color:var(--lp-accent); }.wb-ai-result-automations span { display:grid; }.wb-ai-result-automations b { font-size:10px; }.wb-ai-result-automations small { margin-top:2px; color:var(--lp-muted); font-size:8px; }
.wb-ai-empty-preview { min-height:154px; margin-top:13px; padding:17px; border:1px dashed var(--lp-border-strong); border-radius:18px; display:grid; align-content:center; gap:12px; color:var(--lp-muted); text-align:center; background:color-mix(in srgb,var(--lp-panel-2) 45%,transparent); }
.wb-ai-preview-grid { height:66px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:6px; }.wb-ai-preview-grid span { border-radius:8px; background:linear-gradient(135deg,var(--lp-panel-2),var(--lp-accent-soft)); }.wb-ai-preview-grid span:first-child { grid-row:span 2; }.wb-ai-empty-preview p { max-width:340px; margin:0 auto; font-size:10px; line-height:1.5; }

.wb-landing-section { width:min(1280px,100%); margin:0 auto; padding:96px 32px; }
.wb-section-heading { max-width:790px; margin:0 auto 40px; text-align:center; }.wb-section-heading.left { margin-left:0; text-align:left; }
.wb-section-heading > span, .wb-studio-copy > .wb-section-label { color:var(--lp-accent); font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.wb-section-heading h2, .wb-studio-copy h2, .wb-personal-copy h2 { margin:13px 0; color:var(--lp-text); font-size:clamp(35px,4.3vw,58px); line-height:1.03; letter-spacing:-.06em; }
.wb-section-heading p, .wb-studio-copy > p, .wb-personal-copy > p { color:var(--lp-muted); font-size:16px; line-height:1.68; }

.wb-start-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.wb-start-grid article { position:relative; min-height:300px; padding:25px; border:1px solid var(--lp-border); border-radius:25px; display:flex; flex-direction:column; align-items:flex-start; color:var(--lp-text); background:linear-gradient(145deg,var(--lp-panel),color-mix(in srgb,var(--lp-panel-2) 48%,transparent)); box-shadow:0 14px 44px rgba(0,0,0,.08); overflow:hidden; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.wb-start-grid article:hover { transform:translateY(-5px); border-color:var(--lp-border-strong); box-shadow:var(--lp-shadow); }.wb-start-grid article.featured { border-color:color-mix(in srgb,var(--lp-accent) 37%,var(--lp-border)); background:radial-gradient(circle at 90% 5%,var(--lp-accent-soft),transparent 45%),linear-gradient(145deg,var(--lp-panel),var(--lp-panel-2)); }
.wb-start-number { position:absolute; right:20px; top:17px; color:color-mix(in srgb,var(--lp-muted) 45%,transparent); font-size:30px; font-weight:950; letter-spacing:-.05em; }
.wb-feature-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:16px; color:#fff; background:linear-gradient(145deg,var(--lp-accent),var(--lp-accent-2)); box-shadow:0 12px 28px color-mix(in srgb,var(--lp-accent) 22%,transparent); }.wb-feature-icon.small { width:38px; height:38px; border-radius:12px; }.wb-feature-icon.blue { background:linear-gradient(145deg,#2e73ed,#58a7ff); }.wb-feature-icon.ai { background:linear-gradient(145deg,#8b61f4,#31b7ef); }.wb-feature-icon.violet { background:linear-gradient(145deg,#9a65ec,#d365d5); }.wb-feature-icon.green { background:linear-gradient(145deg,#12a97c,#4ddcaf); }.wb-feature-icon.sky { background:linear-gradient(145deg,#0786cf,#42c8ee); }.wb-feature-icon.orange { background:linear-gradient(145deg,#ff7617,#ffad5d); }
.wb-start-grid h3 { margin:20px 0 8px; font-size:22px; }.wb-start-grid p { margin:0; color:var(--lp-muted); font-size:13px; line-height:1.6; }
.wb-card-link { margin-top:auto; padding:16px 0 0; border:0; display:flex; align-items:center; gap:7px; color:var(--lp-soft); background:none; cursor:pointer; font-weight:800; }.wb-card-link:hover { color:var(--lp-accent); }

.wb-preset-tabs { margin:-10px 0 24px; display:flex; flex-wrap:wrap; gap:7px; }.wb-preset-tabs button { min-height:38px; padding:8px 13px; border:1px solid var(--lp-border); border-radius:999px; color:var(--lp-muted); background:var(--lp-panel); cursor:pointer; font-size:10px; font-weight:800; }.wb-preset-tabs button.active { border-color:color-mix(in srgb,var(--lp-accent) 40%,transparent); color:#fff; background:linear-gradient(135deg,var(--lp-accent),color-mix(in srgb,var(--lp-accent) 65%,var(--lp-accent-2))); box-shadow:0 10px 26px color-mix(in srgb,var(--lp-accent) 21%,transparent); }
.wb-preset-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.wb-preset-card { min-width:0; border:1px solid var(--lp-border); border-radius:25px; display:flex; flex-direction:column; color:var(--lp-text); background:var(--lp-panel); box-shadow:0 12px 40px rgba(0,0,0,.07); overflow:hidden; cursor:pointer; transition:transform .22s var(--ease),border-color .22s ease,box-shadow .22s ease; }.wb-preset-card:hover,.wb-preset-card.selected { transform:translateY(-5px); border-color:color-mix(in srgb,var(--lp-accent) 37%,var(--lp-border)); box-shadow:var(--lp-shadow); }
.wb-preset-card-preview { min-height:178px; padding:15px; border-bottom:1px solid var(--lp-border); background:radial-gradient(circle at 85% 0,var(--lp-accent-soft),transparent 48%),linear-gradient(145deg,var(--lp-panel-2),color-mix(in srgb,var(--lp-panel) 70%,transparent)); }
.wb-preset-preview-bar { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; }.wb-preset-preview-bar small { color:var(--lp-soft); font-size:9px; font-weight:800; }.wb-preset-role-count { color:var(--lp-muted); font-size:8px; }
.wb-preset-preview-layout { height:75px; margin:13px 0 10px; display:grid; grid-template-columns:1.2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:6px; }.wb-preset-preview-layout span { border:1px solid color-mix(in srgb,var(--lp-border) 70%,transparent); border-radius:8px; background:color-mix(in srgb,var(--lp-panel-solid) 76%,transparent); box-shadow:inset 0 1px rgba(255,255,255,.05); }.wb-preset-preview-layout .wide { grid-column:span 2; }.wb-preset-preview-layout .tall { grid-row:span 2; }
.wb-preset-preview-menu { display:flex; gap:5px; overflow:hidden; }.wb-preset-preview-menu i { min-width:max-content; padding:4px 6px; border-radius:6px; color:var(--lp-muted); background:color-mix(in srgb,var(--lp-panel-solid) 72%,transparent); font-size:7px; font-style:normal; font-weight:700; }
.wb-preset-card-body { padding:20px 20px 15px; }.wb-preset-kind { color:var(--lp-accent); font-size:8px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }.wb-preset-card h3 { margin:8px 0; font-size:20px; }.wb-preset-card p { min-height:62px; margin:0; color:var(--lp-muted); font-size:12px; line-height:1.55; }
.wb-preset-tags { margin-top:13px; display:flex; flex-wrap:wrap; gap:5px; }.wb-preset-tags span { padding:5px 7px; border:1px solid var(--lp-border); border-radius:8px; color:var(--lp-soft); background:color-mix(in srgb,var(--lp-panel-2) 55%,transparent); font-size:8px; font-weight:700; }
.wb-preset-card-footer { margin-top:auto; padding:0 14px 14px; display:grid; grid-template-columns:1fr 1fr; gap:7px; }

.wb-ai-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }.wb-ai-steps article { padding:20px; border:1px solid var(--lp-border); border-radius:20px; display:flex; gap:13px; color:var(--lp-text); background:var(--lp-panel); }.wb-ai-steps article > span { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(145deg,var(--lp-accent),var(--lp-accent-2)); font-size:11px; font-weight:900; }.wb-ai-steps b { font-size:13px; }.wb-ai-steps p { margin:7px 0 0; color:var(--lp-muted); font-size:10px; line-height:1.5; }
.wb-ai-flow-card { margin-top:18px; padding:20px; border:1px solid color-mix(in srgb,var(--lp-accent) 25%,var(--lp-border)); border-radius:23px; display:grid; grid-template-columns:minmax(0,1.2fr) auto minmax(0,1fr); align-items:center; gap:22px; background:radial-gradient(circle at 10% 10%,var(--lp-accent-soft),transparent 45%),var(--lp-panel); box-shadow:var(--lp-shadow); }.wb-ai-flow-prompt { display:flex; align-items:center; gap:12px; }.wb-ai-flow-prompt p { margin:0; color:var(--lp-soft); font-size:12px; line-height:1.5; }.wb-ai-flow-output { display:flex; flex-wrap:wrap; gap:7px; }.wb-ai-flow-output span { min-height:38px; padding:8px 10px; border:1px solid var(--lp-border); border-radius:11px; display:inline-flex; align-items:center; gap:7px; color:var(--lp-soft); background:var(--lp-panel-solid); font-size:9px; font-weight:800; }.wb-ai-flow-output .wb-icon { color:var(--lp-accent); }

.wb-studio-section { display:grid; grid-template-columns:minmax(320px,.72fr) minmax(600px,1.28fr); align-items:center; gap:clamp(45px,7vw,90px); }.wb-studio-copy > p { max-width:560px; }.wb-studio-component-chips { margin:22px 0 26px; display:flex; flex-wrap:wrap; gap:6px; }.wb-studio-component-chips span { min-height:34px; padding:7px 9px; border:1px solid var(--lp-border); border-radius:10px; display:inline-flex; align-items:center; gap:6px; color:var(--lp-soft); background:var(--lp-panel); font-size:9px; font-weight:750; }.wb-studio-component-chips .wb-icon { color:var(--lp-accent); }
.wb-studio-mock { height:520px; border:1px solid var(--lp-border-strong); border-radius:25px; display:grid; grid-template-columns:145px 1fr 150px; grid-template-rows:42px 1fr; color:var(--lp-text); background:var(--lp-panel-solid); box-shadow:var(--lp-shadow); overflow:hidden; transform:perspective(1400px) rotateY(-2deg); }.wb-studio-mock-top { grid-column:1/-1; padding:0 12px; border-bottom:1px solid var(--lp-border); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:var(--lp-panel); }.wb-studio-mock-top > span { width:9px;height:9px;border-radius:50%;background:var(--lp-accent);box-shadow:15px 0 var(--lp-accent-2),30px 0 var(--lp-accent-3); }.wb-studio-mock-top b { font-size:9px; }.wb-studio-mock-top > div { justify-self:end; display:flex; gap:4px; }.wb-studio-mock-top i { width:21px;height:16px;border:1px solid var(--lp-border);border-radius:5px; }.wb-studio-mock-top i.active { background:var(--lp-accent-soft); border-color:color-mix(in srgb,var(--lp-accent) 36%,transparent); }
.wb-studio-mock aside { padding:13px 9px; border-right:1px solid var(--lp-border); display:flex; flex-direction:column; gap:6px; background:color-mix(in srgb,var(--lp-panel) 90%,transparent); }.wb-studio-mock aside.inspector { border-right:0; border-left:1px solid var(--lp-border); }.wb-studio-mock aside > small { padding:0 5px 6px; color:var(--lp-muted); font-size:6px; font-weight:900; letter-spacing:.1em; }.wb-studio-mock aside > span { padding:7px; border:1px solid var(--lp-border); border-radius:7px; display:flex; align-items:center; gap:5px; color:var(--lp-soft); background:var(--lp-panel-solid); font-size:7px; font-weight:700; }.wb-studio-mock .inspector label { color:var(--lp-muted); font-size:7px; }.wb-studio-mock .inspector i { height:22px; margin-top:4px; border:1px solid var(--lp-border); border-radius:6px; display:block; background:var(--lp-panel-solid); }
.wb-studio-canvas { padding:18px; overflow:hidden; background:radial-gradient(circle at 80% 0,var(--lp-accent-soft),transparent 38%),var(--lp-bg-2); }.wb-canvas-hero { padding:16px; border:1px solid var(--lp-border); border-radius:13px; background:var(--lp-panel); }.wb-canvas-hero small { color:var(--lp-accent); font-size:6px; font-weight:900; text-transform:uppercase; }.wb-canvas-hero b { display:block; margin:5px 0; font-size:17px; }.wb-canvas-hero p { margin:0; color:var(--lp-muted); font-size:7px; line-height:1.45; }.wb-canvas-grid { margin-top:10px; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.wb-canvas-grid span { min-height:76px; padding:10px; border:1px solid var(--lp-border); border-radius:11px; display:flex; flex-direction:column; justify-content:space-between; color:var(--lp-soft); background:var(--lp-panel); }.wb-canvas-grid .wb-icon { color:var(--lp-accent); }.wb-canvas-grid b { font-size:8px; }

.wb-role-tabs { margin-bottom:13px; display:flex; flex-wrap:wrap; gap:7px; }.wb-role-tabs button { min-height:40px; padding:8px 12px; border:1px solid var(--lp-border); border-radius:12px; display:inline-flex; align-items:center; gap:7px; color:var(--lp-muted); background:var(--lp-panel); cursor:pointer; font-size:10px; font-weight:800; }.wb-role-tabs button.active { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--lp-accent),var(--lp-accent-2)); box-shadow:0 12px 28px color-mix(in srgb,var(--lp-accent) 22%,transparent); }
.wb-role-demo { min-height:510px; border:1px solid var(--lp-border-strong); border-radius:27px; display:grid; grid-template-columns:230px 1fr; color:var(--lp-text); background:var(--lp-panel-solid); box-shadow:var(--lp-shadow); overflow:hidden; }.wb-role-demo > aside { padding:19px 13px; border-right:1px solid var(--lp-border); display:flex; flex-direction:column; background:color-mix(in srgb,var(--lp-bg) 76%,var(--lp-panel)); }.wb-role-demo-brand { display:flex; align-items:center; gap:9px; padding:0 6px 17px; }.wb-role-demo-brand > span { width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(145deg,var(--lp-accent),var(--lp-accent-2)); }.wb-role-demo-brand b { font-size:11px; }.wb-role-demo nav { display:grid; gap:5px; }.wb-role-demo nav span { min-height:39px; padding:9px; border-radius:10px; display:flex; align-items:center; gap:8px; color:var(--lp-muted); font-size:9px; font-weight:760; }.wb-role-demo nav span.active { color:var(--lp-text); background:var(--lp-accent-soft); }.wb-role-demo > aside > small { margin-top:auto; padding:11px 7px 0; color:var(--lp-muted); font-size:7px; }
.wb-role-demo-main { padding:26px; background:radial-gradient(circle at 90% 0,var(--lp-accent-soft),transparent 37%),var(--lp-bg-2); }.wb-role-demo-main header { display:flex; align-items:center; justify-content:space-between; gap:15px; }.wb-role-demo-main header small { color:var(--lp-accent); font-size:8px; font-weight:900; text-transform:uppercase; }.wb-role-demo-main h3 { margin:5px 0 0; font-size:27px; }.wb-role-demo-main header > span { color:var(--lp-muted); font-size:8px; }
.wb-role-metrics { margin:22px 0 15px; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.wb-role-metrics article { padding:16px; border:1px solid var(--lp-border); border-radius:15px; display:grid; background:var(--lp-panel); }.wb-role-metrics span { color:var(--lp-muted); font-size:7px; }.wb-role-metrics b { margin:8px 0 5px; font-size:21px; }.wb-role-metrics small { color:var(--lp-accent); font-size:7px; font-weight:800; }
.wb-role-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }.wb-role-cards article { min-height:115px; padding:14px; border:1px solid var(--lp-border); border-radius:15px; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; align-items:center; gap:3px 10px; background:var(--lp-panel); }.wb-role-cards .wb-feature-icon { grid-row:1/3; }.wb-role-cards b { font-size:11px; }.wb-role-cards small { color:var(--lp-muted); font-size:7px; }.wb-role-cards > article > .wb-icon:last-child { grid-column:3; grid-row:1/3; color:var(--lp-muted); }

.wb-bento-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(210px,auto); gap:13px; }.wb-bento-grid article { padding:24px; border:1px solid var(--lp-border); border-radius:24px; color:var(--lp-text); background:var(--lp-panel); overflow:hidden; }.wb-bento-grid article.large { grid-column:span 2; grid-row:span 2; }.wb-bento-grid article.wide { grid-column:span 2; display:grid; grid-template-columns:auto 1fr; align-items:start; gap:17px; }.wb-bento-grid article.accent { background:radial-gradient(circle at 90% 0,var(--lp-accent-soft),transparent 45%),var(--lp-panel); }.wb-bento-grid h3 { margin:17px 0 8px; font-size:20px; }.wb-bento-grid p { margin:0; color:var(--lp-muted); font-size:12px; line-height:1.55; }.wb-bento-grid .wide h3 { margin:2px 0 7px; }
.wb-bento-kanban { height:190px; margin-top:22px; padding:11px; border:1px solid var(--lp-border); border-radius:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; background:color-mix(in srgb,var(--lp-bg) 58%,transparent); }.wb-bento-kanban > span { padding:7px; border-radius:9px; background:color-mix(in srgb,var(--lp-panel-2) 70%,transparent); }.wb-bento-kanban i { height:37px; margin-bottom:6px; border-radius:7px; display:block; background:var(--lp-panel-solid); box-shadow:0 5px 14px rgba(0,0,0,.08); }.wb-automation-flow { grid-column:1/-1; margin-top:15px; display:flex; align-items:center; gap:7px; }.wb-automation-flow span { padding:7px 9px; border:1px solid var(--lp-border); border-radius:9px; color:var(--lp-soft); font-size:8px; font-weight:800; }.wb-automation-flow i { width:25px; height:1px; background:linear-gradient(90deg,var(--lp-accent),var(--lp-accent-2)); }

.wb-personal-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,.75fr); align-items:center; gap:clamp(50px,9vw,120px); }.wb-personal-copy > p { max-width:660px; }.wb-personal-links { margin-top:24px; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.wb-personal-links button { min-height:70px; padding:12px; border:1px solid var(--lp-border); border-radius:15px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; color:var(--lp-text); background:var(--lp-panel); cursor:pointer; text-align:left; }.wb-personal-links button:hover { border-color:color-mix(in srgb,var(--lp-accent) 33%,var(--lp-border)); transform:translateY(-2px); }.wb-personal-links button > .wb-icon:first-child { color:var(--lp-accent); }.wb-personal-links span { display:grid; }.wb-personal-links b { font-size:10px; }.wb-personal-links small { margin-top:3px; color:var(--lp-muted); font-size:7px; }
.wb-personal-visual { display:grid; place-items:center; }.wb-personal-phone { width:min(340px,100%); min-height:560px; padding:18px; border:7px solid color-mix(in srgb,var(--lp-text) 15%,var(--lp-panel-solid)); border-radius:42px; color:var(--lp-text); background:radial-gradient(circle at 80% 0,var(--lp-accent-soft),transparent 42%),var(--lp-bg-2); box-shadow:var(--lp-shadow); }.wb-personal-phone header { display:flex; align-items:center; gap:10px; }.wb-personal-phone header > span { width:39px;height:39px;display:grid;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(145deg,var(--lp-accent),var(--lp-accent-2));font-weight:950; }.wb-personal-phone header > div { display:grid; }.wb-personal-phone header b { font-size:11px; }.wb-personal-phone header small { color:var(--lp-muted);font-size:7px; }.wb-personal-focus { margin:22px 0 12px; padding:20px; border:1px solid color-mix(in srgb,var(--lp-accent) 28%,var(--lp-border)); border-radius:20px; display:grid; background:linear-gradient(145deg,var(--lp-accent-soft),var(--lp-panel)); }.wb-personal-focus small { color:var(--lp-accent);font-size:7px;font-weight:900; }.wb-personal-focus b { margin:8px 0 15px;font-size:21px; }.wb-personal-focus span { height:7px;border-radius:99px;background:linear-gradient(90deg,var(--lp-accent) 72%,var(--lp-panel-2) 72%); }.wb-personal-card-grid { display:grid;grid-template-columns:1fr 1fr;gap:9px; }.wb-personal-card-grid span { min-height:105px;padding:13px;border:1px solid var(--lp-border);border-radius:17px;display:flex;flex-direction:column;justify-content:space-between;color:var(--lp-soft);background:var(--lp-panel);font-size:9px;font-weight:800; }.wb-personal-card-grid .wb-icon { color:var(--lp-accent); }

.wb-device-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }.wb-device-grid article { padding:20px; border:1px solid var(--lp-border); border-radius:22px; color:var(--lp-text); background:var(--lp-panel); }.wb-device-grid h3 { margin:18px 0 7px; font-size:17px; }.wb-device-grid p { margin:0;color:var(--lp-muted);font-size:10px;line-height:1.5; }.wb-device { height:155px; display:grid; place-items:center; }.wb-device > div { border:5px solid color-mix(in srgb,var(--lp-text) 17%,var(--lp-panel-solid)); padding:8px; background:var(--lp-bg-2); box-shadow:0 15px 35px rgba(0,0,0,.15); }.wb-device > div span { display:block;border-radius:5px;background:linear-gradient(145deg,var(--lp-panel-2),var(--lp-accent-soft)); }.wb-device.desktop > div { width:190px;height:112px;border-radius:10px;display:grid;grid-template-columns:1fr 2fr;gap:5px; }.wb-device.desktop span:first-child { grid-row:span 3; }.wb-device.mobile > div { width:68px;height:132px;border-radius:20px;display:grid;grid-template-rows:1fr 2fr 1fr;gap:5px; }.wb-device.tablet > div { width:150px;height:112px;border-radius:13px;display:grid;grid-template-columns:1fr 1fr;gap:5px; }.wb-device.kiosk > div { width:174px;height:107px;border-radius:9px;display:grid;grid-template-columns:1fr 1fr;gap:7px; }.wb-install-strip { margin-top:16px;padding:15px 17px;border:1px solid var(--lp-border);border-radius:19px;display:flex;align-items:center;gap:13px;color:var(--lp-soft);background:var(--lp-panel); }.wb-install-strip > div { display:flex;align-items:center;gap:8px; }.wb-install-step { width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:#fff;background:linear-gradient(145deg,var(--lp-accent),var(--lp-accent-2));font-size:8px;font-weight:900; }.wb-install-strip b { font-size:9px; }.wb-install-strip > .btn { margin-left:auto; }

.wb-plan-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:11px; }.wb-plan-grid article { padding:21px; border:1px solid var(--lp-border); border-radius:23px; display:flex;flex-direction:column;color:var(--lp-text);background:var(--lp-panel); }.wb-plan-grid article.featured { border-color:color-mix(in srgb,var(--lp-accent) 38%,var(--lp-border));background:radial-gradient(circle at 90% 0,var(--lp-accent-soft),transparent 43%),var(--lp-panel);box-shadow:var(--lp-shadow);transform:translateY(-8px); }.wb-plan-top h3 { margin:13px 0 6px;font-size:20px; }.wb-plan-top p { min-height:47px;margin:0;color:var(--lp-muted);font-size:9px;line-height:1.5; }.wb-plan-price { margin:22px 0 16px;display:grid; }.wb-plan-price b { font-size:24px;letter-spacing:-.04em; }.wb-plan-price small { margin-top:3px;color:var(--lp-muted);font-size:8px; }.wb-plan-grid ul { margin:0 0 20px;padding:0;display:grid;gap:9px;list-style:none; }.wb-plan-grid li { display:flex;align-items:center;gap:7px;color:var(--lp-soft);font-size:9px; }.wb-plan-grid li .wb-icon { color:var(--lp-accent); }.wb-plan-grid .btn { margin-top:auto; }

.wb-faq-list { max-width:900px;margin:auto;display:grid;gap:8px; }.wb-faq-list article { border:1px solid var(--lp-border);border-radius:17px;color:var(--lp-text);background:var(--lp-panel);overflow:hidden; }.wb-faq-list article.open { border-color:color-mix(in srgb,var(--lp-accent) 30%,var(--lp-border)); }.wb-faq-list button { width:100%;min-height:64px;padding:16px 18px;border:0;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--lp-text);background:none;cursor:pointer;text-align:left; }.wb-faq-list button b { font-size:12px; }.wb-faq-list button .wb-icon { color:var(--lp-accent); }.wb-faq-list p { margin:0;padding:0 18px 18px;color:var(--lp-muted);font-size:11px;line-height:1.6;animation:wbLandingReveal .22s ease both; }
.wb-final-cta { width:min(1220px,calc(100% - 40px));margin:50px auto 90px;padding:clamp(34px,6vw,72px);border:1px solid color-mix(in srgb,var(--lp-accent) 34%,var(--lp-border));border-radius:34px;display:flex;align-items:center;justify-content:space-between;gap:30px;color:var(--lp-text);background:radial-gradient(circle at 85% 10%,color-mix(in srgb,var(--lp-accent-2) 14%,transparent),transparent 38%),radial-gradient(circle at 15% 90%,var(--lp-accent-soft),transparent 40%),linear-gradient(145deg,var(--lp-panel),var(--lp-panel-2));box-shadow:var(--lp-shadow); }.wb-final-cta > div:first-child { max-width:780px; }.wb-final-cta > div:last-child { display:flex;flex-wrap:wrap;gap:8px; }.wb-final-cta > div:first-child > span { color:var(--lp-accent);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em; }.wb-final-cta h2 { margin:10px 0;font-size:clamp(32px,4.3vw,55px);line-height:1.04;letter-spacing:-.06em; }.wb-final-cta p { margin:0;color:var(--lp-muted);line-height:1.6; }
.wb-landing-footer { padding:30px max(24px,calc((100vw - 1280px)/2)) calc(30px + var(--safe-bottom));border-top:1px solid var(--lp-border);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;color:var(--lp-muted); }.wb-footer-links { display:flex;justify-content:center;flex-wrap:wrap;gap:14px 24px; }.wb-landing-footer > small { font-size:9px; }

@keyframes wbLandingGradient { to { background-position:180% 0; } }
@keyframes wbLandingPulse { 50% { box-shadow:0 0 0 9px transparent; } }
@keyframes wbLandingDrift { to { transform:translate3d(35px,-22px,0) scale(1.08); } }
@keyframes wbLandingSkeleton { to { background-position:-220% 0; } }
@keyframes wbLandingReveal { from { opacity:0;transform:translateY(7px); } to { opacity:1;transform:none; } }

@media (max-width:1180px) {
  .wb-landing-hero { grid-template-columns:1fr;min-height:auto;padding-top:75px; }
  .wb-landing-hero-copy { max-width:900px; }.wb-ai-demo-card { width:min(760px,100%); }
  .wb-preset-grid { grid-template-columns:repeat(2,1fr); }
  .wb-studio-section { grid-template-columns:1fr; }.wb-studio-copy { max-width:760px; }.wb-studio-mock { width:min(900px,100%);margin:auto;transform:none; }
  .wb-plan-grid { grid-template-columns:repeat(3,1fr); }.wb-plan-grid article.featured { transform:none; }
  .wb-device-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  .wb-landing-header { grid-template-columns:auto auto;justify-content:space-between;padding-inline:18px; }
  .wb-landing-menu-toggle { display:grid; }.wb-landing-nav { position:absolute;left:14px;right:14px;top:calc(68px + var(--safe-top));padding:12px;border:1px solid var(--lp-border-strong);border-radius:18px;display:none;flex-direction:column;align-items:stretch;background:color-mix(in srgb,var(--lp-panel-solid) 96%,transparent);box-shadow:var(--lp-shadow); }.wb-landing-header.open .wb-landing-nav { display:flex; }.wb-landing-nav a { min-height:42px;padding:11px;border-radius:10px; }.wb-landing-header-actions { display:none; }
  .wb-start-grid,.wb-ai-steps { grid-template-columns:1fr 1fr; }.wb-bento-grid { grid-template-columns:1fr 1fr; }.wb-bento-grid article.large,.wb-bento-grid article.wide { grid-column:span 2; }
  .wb-role-demo { grid-template-columns:180px 1fr; }.wb-personal-section { grid-template-columns:1fr; }.wb-personal-visual { order:-1; }
  .wb-ai-flow-card { grid-template-columns:1fr; }.wb-ai-flow-card > .wb-icon { transform:rotate(90deg);justify-self:center; }
  .wb-install-strip { flex-wrap:wrap; }.wb-install-strip > .btn { margin-left:0;width:100%; }
  .wb-landing-footer { grid-template-columns:1fr;text-align:center; }.wb-landing-footer .wb-landing-brand { justify-content:center; }.wb-footer-links { justify-content:center; }
  .wb-final-cta { align-items:flex-start;flex-direction:column; }
}
@media (max-width:680px) {
  .wb-landing-brand small { display:none; }.wb-landing-brand-mark { width:39px;height:39px;flex-basis:39px;border-radius:12px; }
  .wb-landing-hero { padding:50px 17px 60px;gap:35px; }.wb-landing-hero h1 { font-size:clamp(42px,13vw,61px); }.wb-landing-hero-copy > p { font-size:15px; }.wb-landing-hero-actions { display:grid; }.wb-landing-hero-actions .btn { width:100%; }.wb-landing-proof { display:grid;grid-template-columns:1fr 1fr; }
  .wb-ai-demo-card { padding:13px;border-radius:23px; }.wb-ai-demo-head { align-items:flex-start; }.wb-demo-theme-switch { margin-top:3px; }.wb-ai-quick-prompts { flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;scrollbar-width:none; }.wb-ai-quick-prompts::-webkit-scrollbar { display:none; }.wb-ai-quick-prompts button { min-width:max-content; }
  .wb-landing-section { padding:68px 17px; }.wb-section-heading { margin-bottom:28px; }.wb-section-heading h2,.wb-studio-copy h2,.wb-personal-copy h2 { font-size:clamp(34px,10vw,48px); }
  .wb-start-grid,.wb-preset-grid,.wb-ai-steps,.wb-plan-grid,.wb-device-grid { grid-template-columns:1fr; }.wb-start-grid article { min-height:260px; }.wb-preset-tabs { flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px;scrollbar-width:none; }.wb-preset-tabs::-webkit-scrollbar { display:none; }.wb-preset-tabs button { min-width:max-content; }
  .wb-ai-flow-output { display:grid;grid-template-columns:1fr; }.wb-studio-mock { height:430px;grid-template-columns:82px 1fr; }.wb-studio-mock aside.inspector { display:none; }.wb-studio-mock aside { padding:9px 5px; }.wb-studio-mock aside > span { padding:6px 4px;flex-direction:column;text-align:center;font-size:6px; }.wb-studio-canvas { padding:10px; }.wb-canvas-grid { grid-template-columns:1fr 1fr; }.wb-canvas-grid span { min-height:62px; }
  .wb-role-demo { grid-template-columns:1fr;min-height:0; }.wb-role-demo > aside { border-right:0;border-bottom:1px solid var(--lp-border); }.wb-role-demo nav { display:flex;overflow-x:auto; }.wb-role-demo nav span { min-width:max-content; }.wb-role-demo > aside > small { display:none; }.wb-role-demo-main { padding:16px; }.wb-role-metrics { grid-template-columns:1fr; }.wb-role-cards { grid-template-columns:1fr; }
  .wb-bento-grid { grid-template-columns:1fr;grid-auto-rows:auto; }.wb-bento-grid article.large,.wb-bento-grid article.wide { grid-column:auto; }.wb-bento-grid article.wide { grid-template-columns:auto 1fr; }.wb-bento-kanban { height:150px; }.wb-automation-flow { overflow-x:auto; }
  .wb-personal-links { grid-template-columns:1fr; }.wb-personal-phone { min-height:520px; }.wb-install-strip > .wb-icon { display:none; }.wb-install-strip > div { width:100%; }.wb-final-cta { width:calc(100% - 28px);padding:28px;border-radius:25px; }.wb-final-cta > div:last-child,.wb-final-cta .btn { width:100%; }
}
@media (max-width:410px) { .wb-landing-proof { grid-template-columns:1fr; }.wb-ai-result-head { grid-template-columns:auto 1fr; }.wb-ai-result-head .badge { display:none; }.wb-preset-card-footer { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .wb-landing * { animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important; } }
.wb-landing-demo-orange-dark { color-scheme: dark; }

/* WorkBlock 2.6.1 — AI configurator state feedback */
.wb-ai-inline-error {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,#f59e0b 38%,transparent);
  border-radius:12px;
  color:color-mix(in srgb,var(--lp-text) 82%,#f59e0b);
  background:color-mix(in srgb,#f59e0b 9%,var(--lp-panel));
  font-size:12px;
  line-height:1.45;
}
.wb-ai-inline-error .wb-icon { flex:0 0 auto; margin-top:1px; }

/* WorkBlock 2.7 — configurable pricing */
.wb-configurable-pricing{position:relative;isolation:isolate}
.pricing-mode-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:980px;margin:28px auto 24px;padding:7px;border:1px solid color-mix(in srgb,var(--border) 82%,transparent);border-radius:22px;background:color-mix(in srgb,var(--panel) 88%,transparent);box-shadow:var(--shadow-sm)}
.pricing-mode-switch button{min-width:0;display:flex;align-items:center;gap:11px;padding:14px 16px;border:1px solid transparent;border-radius:16px;background:transparent;color:var(--text);text-align:left;transition:.18s ease}
.pricing-mode-switch button:hover{background:var(--surface-hover);transform:translateY(-1px)}
.pricing-mode-switch button.active{border-color:color-mix(in srgb,var(--accent) 42%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--panel)),color-mix(in srgb,var(--accent-2) 11%,var(--panel)));box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 13%,transparent)}
.pricing-mode-switch button>span{display:grid;gap:2px;min-width:0}.pricing-mode-switch b{font-size:14px}.pricing-mode-switch small{color:var(--muted);font-size:12px}
.pricing-mode-switch.compact{margin:18px 0 20px;max-width:none}
.pricing-scenario-strip{display:flex;gap:10px;overflow:auto;padding:4px 2px 16px;scrollbar-width:thin}
.pricing-scenario-strip button{position:relative;display:flex;align-items:center;gap:10px;min-width:250px;max-width:320px;padding:13px;border:1px solid var(--border);border-radius:18px;background:var(--panel);color:var(--text);text-align:left;box-shadow:var(--shadow-xs);transition:.18s ease}
.pricing-scenario-strip button:hover,.pricing-scenario-strip button.active{border-color:color-mix(in srgb,var(--accent) 48%,var(--border));transform:translateY(-2px);box-shadow:var(--shadow-md)}
.pricing-scenario-strip button.active{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,var(--panel)),var(--panel))}
.pricing-scenario-strip button>span:nth-child(2){display:grid;gap:2px;min-width:0}.pricing-scenario-strip b{font-size:14px}.pricing-scenario-strip small{font-size:11px;color:var(--muted);line-height:1.35}.pricing-scenario-strip em{position:absolute;right:10px;top:9px;color:var(--success);font-size:11px;font-style:normal;font-weight:800}
.pricing-scenario-icon,.pricing-detail-icon{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 20%,var(--panel)),color-mix(in srgb,var(--accent-2) 13%,var(--panel)));color:var(--accent)}
.pricing-builder-shell{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,.72fr);gap:18px;align-items:start}
.pricing-builder-main{display:grid;gap:16px}.pricing-builder-main>article,.pricing-quote-card,.pricing-example-card{border:1px solid var(--border);background:linear-gradient(150deg,color-mix(in srgb,var(--panel) 96%,var(--accent) 4%),var(--panel));border-radius:24px;box-shadow:var(--shadow-md)}
.pricing-builder-main>article{padding:22px}.pricing-detail-head{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start}.pricing-detail-head small,.pricing-subhead small,.pricing-quote-head small,.pricing-example-card small{color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.pricing-detail-head h3,.pricing-subhead h3,.pricing-quote-head h3,.pricing-example-card h3{margin:4px 0 5px;font-size:21px}.pricing-detail-head p,.pricing-subhead p,.pricing-example-card p{margin:0;color:var(--muted);line-height:1.55}
.pricing-discount-badge{align-self:start;padding:8px 11px;border-radius:999px;background:color-mix(in srgb,var(--success) 12%,var(--panel));color:var(--success);font-size:11px;font-weight:800;white-space:nowrap}
.pricing-benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:18px}.pricing-benefit-grid>div{display:flex;gap:8px;align-items:flex-start;padding:11px;border-radius:14px;background:var(--surface-soft);font-size:12px;line-height:1.4}.pricing-benefit-grid .wb-icon{color:var(--success);flex:0 0 auto}
.pricing-package-includes{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.pricing-package-includes span{padding:7px 9px;border:1px solid var(--border);border-radius:999px;background:var(--panel);font-size:11px;color:var(--muted)}
.pricing-subhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.pricing-subhead>span{padding:7px 10px;border-radius:999px;background:var(--surface-soft);color:var(--accent);font-weight:800;font-size:11px}
.pricing-module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}.pricing-module-grid button{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:13px;border:1px solid var(--border);border-radius:16px;background:var(--panel);color:var(--text);text-align:left;transition:.16s ease}.pricing-module-grid button:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 36%,var(--border))}.pricing-module-grid button.active{border-color:color-mix(in srgb,var(--accent) 52%,var(--border));background:color-mix(in srgb,var(--accent) 9%,var(--panel))}.pricing-module-grid button>span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--surface-soft);color:var(--accent)}.pricing-module-grid button>div{display:grid;gap:3px;min-width:0}.pricing-module-grid b{font-size:13px}.pricing-module-grid small{font-size:11px;color:var(--muted);line-height:1.35}.pricing-module-grid em{font-size:11px;font-style:normal;font-weight:800;color:var(--accent)}.pricing-module-grid button>i{color:var(--accent);font-style:normal}
.pricing-usage-card{overflow:hidden}.pricing-seat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}.pricing-seat-grid label,.pricing-resource-row label{display:grid;gap:4px;padding:11px;border:1px solid var(--border);border-radius:15px;background:var(--panel)}.pricing-seat-grid span,.pricing-resource-row span{font-size:12px;font-weight:800}.pricing-seat-grid small{font-size:10px;color:var(--muted);min-height:26px}.pricing-seat-grid input,.pricing-resource-row input{width:100%;min-width:0;border:0;border-top:1px solid var(--border);padding:9px 0 0;margin-top:4px;background:transparent;color:var(--text);font:inherit;font-size:17px;font-weight:800;outline:0}.pricing-resource-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:9px;align-items:stretch;margin-top:10px}.pricing-resource-row .btn{height:100%;min-height:62px}
.pricing-quote-card{position:sticky;top:calc(var(--safe-top,0px) + 86px);padding:21px;overflow:hidden}.pricing-quote-card:before{content:"";position:absolute;inset:-40% 35% auto -25%;height:190px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 68%);pointer-events:none}.pricing-quote-card.loading{opacity:.72}.pricing-quote-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.pricing-save{padding:7px 9px;border-radius:999px;background:color-mix(in srgb,var(--success) 13%,var(--panel));color:var(--success);font-size:12px;font-weight:900}.pricing-quote-total{position:relative;display:grid;gap:3px;margin:18px 0;padding:17px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--panel)),color-mix(in srgb,var(--accent-2) 10%,var(--panel)));border:1px solid color-mix(in srgb,var(--accent) 25%,var(--border))}.pricing-quote-total span{font-size:12px;color:var(--muted)}.pricing-quote-total b{font-size:30px;line-height:1.05}.pricing-quote-total small{color:var(--muted);font-size:10px}.pricing-lines{display:grid;gap:8px;max-height:300px;overflow:auto;padding-right:4px}.pricing-lines>div{display:flex;justify-content:space-between;gap:12px;font-size:12px}.pricing-lines span{color:var(--muted)}.pricing-lines small{font-size:10px}.pricing-lines .discount{padding-top:8px;border-top:1px dashed var(--border);color:var(--success)}.pricing-lines .discount b,.pricing-lines .discount span{color:var(--success)}
.pricing-comparison{display:flex;gap:10px;margin-top:15px;padding:12px;border-radius:15px;background:var(--surface-soft);border:1px solid var(--border)}.pricing-comparison>span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--panel);color:var(--accent);flex:0 0 auto}.pricing-comparison b{font-size:12px}.pricing-comparison p{margin:3px 0 0;color:var(--muted);font-size:10px;line-height:1.4}.pricing-comparison.positive{border-color:color-mix(in srgb,var(--success) 28%,var(--border));background:color-mix(in srgb,var(--success) 7%,var(--panel))}.pricing-comparison.positive>span{color:var(--success)}
.pricing-transparency{margin:14px 0;padding:12px;border:1px solid var(--border);border-radius:15px}.pricing-transparency>b{font-size:12px}.pricing-transparency>div{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.pricing-transparency span{padding:5px 7px;border-radius:999px;background:var(--surface-soft);font-size:9px;color:var(--muted)}.pricing-transparency p,.pricing-care-note{display:block;margin:8px 0 0;color:var(--muted);font-size:10px;line-height:1.45}.pricing-care-note{text-align:center;margin-top:10px}
.pricing-example-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:17px;padding:19px 21px}.pricing-example-card>div{display:flex;align-items:flex-start;gap:13px}.pricing-example-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:color-mix(in srgb,var(--accent) 13%,var(--panel));color:var(--accent);flex:0 0 auto}.pricing-example-card h3{font-size:17px}.pricing-example-card p{font-size:12px;max-width:780px}
.billing-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.billing-overview-grid article{display:grid;gap:6px;padding:17px;border:1px solid var(--border);border-radius:20px;background:var(--panel);box-shadow:var(--shadow-sm)}.billing-overview-grid small{color:var(--muted);font-size:11px}.billing-overview-grid strong{font-size:23px}.billing-overview-grid span{font-size:10px;color:var(--muted);line-height:1.4}.billing-balance-card{background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 17%,var(--panel)),var(--panel))!important;border-color:color-mix(in srgb,var(--accent) 30%,var(--border))!important}
.billing-configurator-card{margin-top:16px;padding:20px;border:1px solid var(--border);border-radius:24px;background:var(--panel);box-shadow:var(--shadow-md)}.billing-config-head{display:flex;justify-content:space-between;gap:18px}.billing-config-head small,.billing-budget-card small{color:var(--accent);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:900}.billing-config-head h2,.billing-budget-card h2{margin:4px 0 5px}.billing-config-head p,.billing-budget-card p{margin:0;color:var(--muted);font-size:12px}
.billing-scenario-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0 17px}.billing-scenario-grid button{position:relative;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface-soft);color:var(--text);text-align:left}.billing-scenario-grid button.active{border-color:color-mix(in srgb,var(--accent) 50%,var(--border));background:color-mix(in srgb,var(--accent) 9%,var(--panel))}.billing-scenario-grid button>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--panel);color:var(--accent)}.billing-scenario-grid button>div{display:grid;gap:2px}.billing-scenario-grid b{font-size:12px}.billing-scenario-grid small{font-size:9px;color:var(--muted)}.billing-scenario-grid em{position:absolute;right:8px;top:7px;color:var(--success);font-size:9px;font-style:normal;font-weight:900}
.billing-config-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:15px;align-items:start}.billing-config-options{display:grid;gap:14px}.billing-module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.billing-module-grid button{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:11px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft);color:var(--text);text-align:left}.billing-module-grid button.active{border-color:color-mix(in srgb,var(--accent) 48%,var(--border));background:color-mix(in srgb,var(--accent) 8%,var(--panel))}.billing-module-grid button>span{display:grid;gap:2px}.billing-module-grid b{font-size:11px}.billing-module-grid small{font-size:9px;color:var(--muted)}.billing-seat-settings{padding:15px;border:1px solid var(--border);border-radius:18px;background:var(--surface-soft)}.billing-seat-settings h3{margin:0 0 12px;font-size:15px}
.billing-live-quote{position:sticky;top:calc(var(--safe-top,0px) + 82px);padding:17px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--panel));box-shadow:var(--shadow-sm)}.billing-live-quote>small{color:var(--muted)}.billing-live-quote>strong{display:block;margin:5px 0 8px;font-size:27px}.billing-live-quote>strong em{font-size:11px;font-style:normal;color:var(--muted)}.billing-saving{display:block;padding:7px 9px;border-radius:10px;background:color-mix(in srgb,var(--success) 11%,var(--panel));color:var(--success);font-size:10px;font-weight:800}.billing-live-quote>div{display:grid;gap:6px;margin:13px 0}.billing-live-quote p{display:flex;justify-content:space-between;gap:10px;margin:0;font-size:10px}.billing-live-quote p span{color:var(--muted)}.billing-live-quote p.discount span,.billing-live-quote p.discount b{color:var(--success)}
.billing-budget-card{display:grid;grid-template-columns:minmax(260px,1fr) 180px 230px auto;gap:12px;align-items:end;margin-top:16px;padding:18px;border:1px solid var(--border);border-radius:22px;background:var(--panel);box-shadow:var(--shadow-sm)}.billing-budget-card label{display:grid;gap:6px}.billing-budget-card label>span{font-size:10px;color:var(--muted);font-weight:800}
@media(max-width:1050px){.pricing-builder-shell{grid-template-columns:1fr}.pricing-quote-card,.billing-live-quote{position:relative;top:auto}.billing-config-layout{grid-template-columns:1fr}.billing-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-budget-card{grid-template-columns:1fr 1fr}.billing-budget-card>div{grid-column:1/-1}}
@media(max-width:760px){.pricing-mode-switch{grid-template-columns:1fr;margin-inline:0}.pricing-scenario-strip button{min-width:230px}.pricing-detail-head{grid-template-columns:auto 1fr}.pricing-discount-badge{grid-column:1/-1;justify-self:start}.pricing-benefit-grid,.pricing-seat-grid,.pricing-module-grid,.billing-module-grid,.billing-scenario-grid{grid-template-columns:1fr 1fr}.pricing-resource-row{grid-template-columns:1fr 1fr}.pricing-resource-row .btn{min-height:48px}.pricing-example-card{align-items:flex-start;flex-direction:column}.billing-budget-card{grid-template-columns:1fr}.billing-overview-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.pricing-benefit-grid,.pricing-seat-grid,.pricing-module-grid,.billing-module-grid,.billing-scenario-grid,.billing-overview-grid,.pricing-resource-row{grid-template-columns:1fr}.pricing-builder-main>article,.pricing-quote-card{border-radius:19px;padding:16px}.pricing-detail-head h3,.pricing-subhead h3{font-size:18px}.pricing-quote-total b{font-size:26px}.pricing-example-card>div{display:grid;grid-template-columns:auto 1fr}.pricing-example-card .btn{width:100%}}
.pricing-economics-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}.pricing-economics-summary>div{display:grid;gap:5px;padding:13px;border:1px solid var(--border);border-radius:15px;background:var(--surface-soft)}.pricing-economics-summary small{color:var(--muted);font-size:10px}.pricing-economics-summary b{font-size:16px}@media(max-width:520px){.pricing-economics-summary{grid-template-columns:1fr}}

/* WorkBlock 2.9.1 — safe entitlement state */
.feature-locked-state {
  min-height: min(560px, calc(100vh - 190px));
  display: grid;
  grid-template-columns: auto minmax(0, 680px);
  align-content: center;
  justify-content: center;
  gap: 24px;
  padding: clamp(28px, 6vw, 72px);
  text-align: left;
}
.feature-locked-state h1 { margin: 8px 0 12px; max-width: 680px; }
.feature-locked-state p { max-width: 660px; color: var(--muted); line-height: 1.65; }
.feature-locked-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
@media (max-width: 700px) {
  .feature-locked-state { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .feature-locked-state .actions { justify-content: center; }
}

/* ========================================================================== */
/* WorkBlock 3.0 — Developer Center                                           */
/* ========================================================================== */

html[data-view="api-docs-public"],
html[data-view="api-docs-public"] body {
  min-height: 100%;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34rem),
    var(--bg);
}

.developer-center {
  min-height: 100vh;
  color: var(--text);
  background: transparent;
}

.developer-header {
  position: sticky;
  z-index: 80;
  top: 0;
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(320px, 720px) auto;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding: max(10px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .08);
  backdrop-filter: blur(20px) saturate(145%);
}

.developer-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 11px;
  min-width: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.developer-brand > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: 14px;
  color: white;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #6d5cff));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 28%, transparent);
}

.developer-brand div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.developer-brand b {
  overflow: hidden;
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.developer-brand small,
.developer-header small {
  color: var(--muted);
}

.developer-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.developer-search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent);
}

.developer-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
}

.developer-search kbd {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: var(--surface);
  font-size: 11px;
}

.developer-header-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.developer-header-actions > .btn:nth-child(2) {
  display: none;
}

.developer-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 190px;
  max-width: 1760px;
  margin: 0 auto;
}

.developer-navigation,
.developer-toc {
  position: sticky;
  top: 73px;
  align-self: start;
  height: calc(100vh - 73px);
  overflow: auto;
  scrollbar-width: thin;
}

.developer-navigation {
  padding: 22px 18px max(30px, env(safe-area-inset-bottom));
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.developer-environment-mini {
  display: grid;
  gap: 4px;
  margin-bottom: 22px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.developer-environment-mini small {
  color: var(--muted);
}

.developer-navigation h4,
.developer-toc h4 {
  margin: 22px 9px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.developer-navigation > button,
.developer-toc button {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color .14s ease, background .14s ease, transform .14s ease;
}

.developer-navigation > button:hover,
.developer-navigation > button.active,
.developer-toc button:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}

.developer-navigation > button.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.developer-nav-footer {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.developer-content {
  min-width: 0;
  padding: 46px clamp(22px, 4vw, 72px) 100px;
}

.developer-toc {
  padding: 22px 14px;
  border-left: 1px solid var(--line);
}

.developer-toc button {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 13px;
}

.developer-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  align-items: center;
  gap: clamp(32px, 6vw, 90px);
  min-height: 520px;
  padding: clamp(28px, 5vw, 72px) 0 62px;
}

.developer-kicker,
.developer-section-head > div > span,
.developer-playground-top > div > span,
.developer-openapi > div > span {
  display: inline-flex;
  margin-bottom: 13px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.developer-hero h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(42px, 5.2vw, 78px);
  line-height: .98;
  letter-spacing: -.055em;
}

.developer-hero > div:first-child > p {
  max-width: 760px;
  margin: 25px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.65;
}

.developer-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.developer-general-example {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 52%),
    var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .12);
}

.developer-general-example::after {
  position: absolute;
  right: -36px;
  bottom: -46px;
  width: 140px;
  height: 140px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 50%;
  content: "";
}

.developer-example-head,
.developer-operation-head > div:first-child,
.developer-models article > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.developer-example-head > span,
.developer-model-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}

.developer-example-head div {
  display: grid;
  gap: 2px;
}

.developer-example-head small {
  color: var(--muted);
}

.developer-example-tree {
  display: grid;
  gap: 9px;
  margin: 24px 0;
}

.developer-example-tree span {
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.developer-example-tree i {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.developer-general-example > p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.developer-section {
  scroll-margin-top: 96px;
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.developer-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.developer-section-head h2,
.developer-openapi h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.developer-section-head p,
.developer-openapi p {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.developer-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.developer-steps article {
  display: flex;
  min-height: 158px;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.developer-steps article > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 11px;
  color: white;
  background: var(--accent);
  font-weight: 800;
}

.developer-steps b {
  display: block;
  margin: 6px 0 8px;
}

.developer-steps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.developer-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.developer-method-grid > button {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  min-height: 108px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 17px;
  color: inherit;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.developer-method-grid > button:hover,
.developer-method-grid > button.active {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .09);
}

.developer-method-grid > button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.developer-method-grid small {
  overflow: hidden;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.developer-method-grid em {
  color: var(--muted);
  font-style: normal;
  line-height: 1.35;
}

.http-method {
  display: inline-grid;
  min-width: 58px;
  height: 30px;
  place-items: center;
  padding: 0 9px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
}

.http-method.large {
  width: 76px;
  height: 42px;
  font-size: 13px;
}

.http-method.get { color: #087a49; background: color-mix(in srgb, #22c55e 16%, var(--surface-2)); }
.http-method.post { color: #1769d2; background: color-mix(in srgb, #3b82f6 16%, var(--surface-2)); }
.http-method.patch { color: #b25600; background: color-mix(in srgb, #f59e0b 18%, var(--surface-2)); }
.http-method.put { color: #7046c8; background: color-mix(in srgb, #8b5cf6 16%, var(--surface-2)); }
.http-method.delete { color: #c63232; background: color-mix(in srgb, #ef4444 16%, var(--surface-2)); }

.developer-operation-card {
  border-top: 0;
  margin-top: 42px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .08);
}

.developer-operation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.developer-operation-head h2 {
  margin: 4px 0 6px;
  font-size: clamp(28px, 3.3vw, 45px);
  letter-spacing: -.035em;
}

.developer-operation-head small,
.developer-operation-head code {
  color: var(--muted);
}

.developer-operation-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.developer-operation-meta span {
  display: grid;
  gap: 2px;
  min-width: 94px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 12px;
}

.developer-operation-meta b {
  color: var(--text);
  font-size: 11px;
  text-transform: uppercase;
}

.developer-operation-description {
  max-width: 900px;
  margin: 24px 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.developer-use-cases {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 23%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-2));
}

.developer-use-cases h3,
.developer-field-table h3,
.developer-response-examples h3,
.developer-webhook-messages h3 {
  margin: 0 0 13px;
  font-size: 16px;
}

.developer-use-cases > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.developer-use-cases span {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--muted);
  line-height: 1.45;
}

.developer-use-cases svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--accent);
}

.developer-field-table {
  margin-top: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
}

.developer-field-table > h3 {
  padding: 16px 18px 2px;
}

.developer-field-row {
  display: grid;
  grid-template-columns: minmax(110px, .9fr) minmax(100px, .8fr) 90px minmax(240px, 2fr) minmax(120px, 1fr);
  align-items: start;
  gap: 12px;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
}

.developer-field-row.header {
  color: var(--muted);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.developer-field-row p {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--muted);
}

.developer-field-row p small {
  color: var(--accent);
}

.developer-field-row code,
.developer-request-line code,
.developer-model-field code,
.developer-webhook-events code,
.developer-errors code,
.developer-scopes code,
.developer-models code {
  color: color-mix(in srgb, var(--accent) 84%, var(--text));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

.developer-playground {
  margin-top: 34px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid color-mix(in srgb, var(--accent) 33%, var(--line));
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface-2) 75%, transparent);
}

.developer-playground-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.developer-playground-top h3 {
  margin: 0;
  font-size: 25px;
}

.developer-environment-switch {
  display: flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.developer-environment-switch button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 145px;
  min-height: 44px;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.developer-environment-switch button.active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-2));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}

.developer-environment-switch button span {
  display: grid;
  text-align: left;
}

.developer-environment-switch small {
  color: var(--muted);
  font-size: 10px;
}

.developer-playground-grid {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(380px, 1.1fr);
  gap: 14px;
}

.developer-request-builder,
.developer-response-panel,
.developer-code-example,
.developer-response-examples > div,
.developer-webhook-config,
.developer-webhook-messages {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
}

.developer-request-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 45px;
  margin-bottom: 17px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
}

.developer-request-line code {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.developer-body-editor {
  min-height: 220px;
  resize: vertical;
  line-height: 1.55;
}

.input-action {
  display: flex;
  gap: 7px;
}

.input-action .input {
  min-width: 0;
  flex: 1;
}

.developer-work-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--line));
  border-radius: 12px;
  color: #a86300;
  background: color-mix(in srgb, #f59e0b 9%, var(--surface));
}

.developer-work-warning span {
  display: grid;
  gap: 3px;
}

.developer-response-panel {
  display: flex;
  min-height: 520px;
  flex-direction: column;
}

.developer-response-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.developer-response-head > div {
  display: grid;
  gap: 3px;
}

.developer-response-head span {
  color: var(--muted);
  font-size: 12px;
}

.success-text { color: #18a05d; }
.error-text { color: #d84545; }

.developer-response-code,
.developer-code-example pre,
.developer-response-examples pre,
.developer-webhook-messages pre {
  max-height: 520px;
  flex: 1;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.developer-rate-limit {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.developer-rate-limit > div {
  overflow: hidden;
  height: 7px;
  border-radius: 99px;
  background: var(--surface-2);
}

.developer-rate-limit i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.developer-code-example {
  margin-top: 14px;
  padding: 0;
  overflow: hidden;
}

.developer-code-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.developer-code-tabs button {
  min-height: 32px;
  padding: 5px 10px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  text-transform: capitalize;
}

.developer-code-tabs button.active {
  color: var(--text);
  background: var(--surface);
}

.developer-code-tabs .copy-code {
  margin-left: auto;
}

.developer-code-example pre {
  min-height: 210px;
  padding: 18px;
}

.developer-response-examples {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  margin-top: 14px;
}

.developer-error-line {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.developer-error-line > span {
  font-weight: 900;
}

.developer-error-line p {
  margin: 0;
  color: var(--muted);
}

.developer-webhook-events {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.developer-webhook-events article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.developer-webhook-events article > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-2));
}

.developer-webhook-events article > div {
  display: grid;
  gap: 4px;
}

.developer-webhook-events p,
.developer-models p,
.developer-errors p,
.developer-scopes p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.developer-webhook-events em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.developer-webhook-grid {
  display: grid;
  grid-template-columns: minmax(330px, .8fr) minmax(420px, 1.2fr);
  gap: 14px;
}

.developer-webhook-messages {
  min-height: 520px;
}

.developer-webhook-messages article {
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
}

.developer-webhook-messages article > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
}

.developer-webhook-messages article > div:first-child small {
  margin-left: auto;
  color: var(--muted);
}

.developer-webhook-messages pre {
  max-height: 300px;
  padding: 13px;
  border-radius: 0;
}

.developer-signature {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.developer-models,
.developer-errors,
.developer-scopes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.developer-models article,
.developer-errors article,
.developer-scopes article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
}

.developer-models h3,
.developer-errors h3 {
  margin: 4px 0 7px;
}

.developer-models details {
  margin-top: 15px;
  border-top: 1px solid var(--line);
}

.developer-models summary {
  padding: 13px 0 2px;
  cursor: pointer;
  font-weight: 700;
}

.developer-model-field {
  display: grid;
  grid-template-columns: 120px 100px 1fr auto;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px dashed var(--line);
}

.developer-model-field p {
  margin: 0;
}

.developer-model-field em {
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
}

.developer-errors article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 13px;
}

.developer-errors article > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 15px;
  color: #d33f3f;
  background: color-mix(in srgb, #ef4444 11%, var(--surface-2));
  font-weight: 900;
}

.developer-errors article > div {
  display: grid;
  gap: 5px;
}

.developer-scopes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.developer-scopes article {
  display: grid;
  gap: 7px;
}

.developer-scopes article > span {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  text-transform: uppercase;
}

.developer-scopes .low { color: #087a49; background: color-mix(in srgb, #22c55e 13%, var(--surface-2)); }
.developer-scopes .medium { color: #a86200; background: color-mix(in srgb, #f59e0b 14%, var(--surface-2)); }
.developer-scopes .high { color: #c63232; background: color-mix(in srgb, #ef4444 13%, var(--surface-2)); }

.developer-openapi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 64px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 24px;
  background:
    radial-gradient(circle at 95% 10%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 28rem),
    var(--surface);
}

@media (max-width: 1380px) {
  .developer-layout { grid-template-columns: 260px minmax(0, 1fr); }
  .developer-toc { display: none; }
  .developer-content { padding-inline: clamp(20px, 4vw, 54px); }
}

@media (max-width: 1080px) {
  .developer-header { grid-template-columns: minmax(220px, 270px) 1fr auto; }
  .developer-header-actions > .btn:first-child { display: none; }
  .developer-header-actions > .btn:nth-child(2) { display: inline-flex; }
  .developer-layout { display: block; }
  .developer-navigation {
    position: fixed;
    z-index: 100;
    top: 72px;
    left: 0;
    width: min(330px, 88vw);
    height: calc(100dvh - 72px);
    transform: translateX(-110%);
    box-shadow: 30px 0 70px rgba(0, 0, 0, .25);
    transition: transform .2s ease;
  }
  .developer-navigation.open { transform: translateX(0); }
  .developer-hero { grid-template-columns: 1fr; min-height: auto; }
  .developer-general-example { max-width: 680px; }
  .developer-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .developer-playground-grid,
  .developer-webhook-grid { grid-template-columns: 1fr; }
  .developer-response-panel { min-height: 440px; }
  .developer-scopes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .developer-header {
    grid-template-columns: 1fr auto;
    min-height: 66px;
    padding-inline: max(12px, env(safe-area-inset-left));
  }
  .developer-brand small { display: none; }
  .developer-search { grid-column: 1 / -1; grid-row: 2; margin-bottom: 3px; }
  .developer-search kbd { display: none; }
  .developer-header-actions .btn:not(:nth-child(2)) { display: none; }
  .developer-content { padding: 28px 14px max(80px, env(safe-area-inset-bottom)); }
  .developer-hero { gap: 30px; padding-top: 30px; }
  .developer-hero h1 { font-size: clamp(38px, 12vw, 58px); }
  .developer-hero-actions { display: grid; }
  .developer-steps,
  .developer-method-grid,
  .developer-webhook-events,
  .developer-models,
  .developer-errors,
  .developer-scopes,
  .developer-response-examples { grid-template-columns: 1fr; }
  .developer-section { padding-block: 46px; }
  .developer-section-head,
  .developer-operation-head,
  .developer-playground-top,
  .developer-openapi { align-items: stretch; flex-direction: column; }
  .developer-operation-meta { justify-content: flex-start; }
  .developer-use-cases > div { grid-template-columns: 1fr; }
  .developer-field-table { overflow-x: auto; }
  .developer-field-row { min-width: 810px; }
  .developer-environment-switch { width: 100%; }
  .developer-environment-switch button { min-width: 0; flex: 1; }
  .developer-playground { margin-inline: -4px; padding: 12px; }
  .developer-code-tabs { overflow-x: auto; }
  .developer-code-tabs .copy-code { position: sticky; right: 0; background: var(--surface-2); }
  .developer-model-field { grid-template-columns: 100px 80px 1fr; }
  .developer-model-field em { grid-column: 1 / -1; }
  .developer-openapi .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .developer-navigation,
  .developer-method-grid > button,
  .developer-search { transition: none !important; }
}

.developer-inline-steps { display:grid; gap:9px; margin:16px 0; }
.developer-inline-steps span { display:flex; align-items:center; gap:10px; color:var(--muted); }
.developer-inline-steps i { display:grid; width:27px; height:27px; flex:0 0 27px; place-items:center; border-radius:9px; color:white; background:var(--accent); font-style:normal; font-weight:800; }

/* ========================================================================
   WorkBlock 3.1 — Studio Applications
   Multi-screen applications, categorized components, rules and devices
   ======================================================================== */

.studio-app-shell {
  min-height: calc(100dvh - var(--safe-top, 0px));
  background:
    radial-gradient(circle at 46% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%),
    var(--app-bg);
}

.studio-app-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(18px);
}

.studio-toolbar-left,
.studio-role-preview,
.studio-toolbar-actions,
.studio-device-switch,
.studio-screen-context {
  display: flex;
  align-items: center;
}

.studio-toolbar-left { gap: 10px; min-width: 0; }
.studio-toolbar-left > div { min-width: 0; }
.studio-title-input {
  display: block;
  width: min(320px, 28vw);
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-weight: 800;
}
.studio-screen-context {
  max-width: 240px;
  gap: 6px;
  padding: 7px 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.studio-role-preview { gap: 6px; }
.studio-role-preview select,
.studio-device-switch {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text);
  background: var(--surface-2);
}
.studio-role-preview select { max-width: 145px; padding: 0 30px 0 10px; }
.studio-device-switch { padding: 3px; }
.studio-device-switch button {
  display: grid;
  width: 34px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
}
.studio-device-switch button.active { color: var(--accent); background: var(--accent-soft); }
.studio-toolbar-actions { justify-content: flex-end; gap: 8px; }
.studio-mobile-tools { display: none; }
.unsaved-dot { color: var(--warning); font-size: 12px; font-weight: 800; white-space: nowrap; }

.studio-app-layout {
  display: grid;
  grid-template-columns: 340px minmax(460px, 1fr) 360px;
  min-height: calc(100dvh - 70px - var(--safe-top, 0px));
}

.studio-app-sidebar,
.studio-inspector {
  min-width: 0;
  overflow: hidden;
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface) 97%, var(--app-bg));
}
.studio-app-sidebar { display: grid; grid-template-columns: 68px minmax(0, 1fr); border-right: 1px solid var(--border); }
.studio-section-tabs {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 7px;
  border-right: 1px solid var(--border);
  background: var(--surface-2);
}
.studio-section-tabs button {
  display: grid;
  min-height: 54px;
  padding: 6px 2px;
  place-items: center;
  gap: 4px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
}
.studio-section-tabs button.active { color: var(--accent); background: var(--accent-soft); }
.studio-sidebar-content { min-width: 0; overflow: auto; padding: 14px; }
.studio-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.studio-panel-head > div { display: grid; gap: 2px; }
.studio-panel-head span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.studio-panel-head b { font-size: 16px; }
.studio-app-meta { display: grid; gap: 10px; margin-bottom: 14px; }
.studio-app-meta textarea { min-height: 72px; }

.studio-screen-search,
.studio-palette-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-bottom: 10px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--muted);
  background: var(--surface-2);
}
.studio-screen-search input,
.studio-palette-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; }
.studio-screen-create-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 11px; }
.studio-screen-create-row button {
  min-height: 36px;
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 750;
}
.studio-screen-create-row button:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.studio-screen-list { display: grid; gap: 6px; }
.studio-screen-list > button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 62px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text);
  text-align: left;
  background: transparent;
}
.studio-screen-list > button:hover { background: var(--surface-2); }
.studio-screen-list > button.active { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); background: var(--accent-soft); }
.studio-screen-list > button.archived { opacity: .55; }
.studio-screen-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: var(--accent); background: var(--accent-soft); }
.studio-screen-list button > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.studio-screen-list b,
.studio-screen-list small,
.studio-screen-list em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-screen-list b { font-size: 13px; }
.studio-screen-list b i { margin-right: 4px; color: var(--warning); font-style: normal; }
.studio-screen-list small,
.studio-screen-list em { color: var(--muted); font-size: 10px; font-style: normal; }
.studio-screen-list strong { padding: 4px 6px; border-radius: 7px; color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); font-size: 9px; }
.studio-screen-list strong.allowed { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
.studio-screen-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.studio-ai-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: 14px;
  background: linear-gradient(145deg, var(--accent-soft), transparent);
}
.studio-ai-card .ai-orb { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent))); font-weight: 900; }
.studio-ai-card p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.studio-ai-card textarea,
.studio-ai-card .btn,
.studio-ai-card > small { grid-column: 1 / -1; }
.studio-ai-card textarea { min-height: 92px; }

.studio-category-list { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.studio-category-list::-webkit-scrollbar { display: none; }
.studio-category-list button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 9px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--surface-2); white-space: nowrap; font-size: 11px; font-weight: 700; }
.studio-category-list button.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.studio-category-list em { padding: 2px 5px; border-radius: 999px; background: var(--surface); font-size: 9px; font-style: normal; }
.studio-component-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.studio-component-grid > button {
  display: grid;
  min-height: 108px;
  align-content: start;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  text-align: left;
  background: var(--surface);
}
.studio-component-grid > button:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.studio-component-grid .component-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; color: var(--accent); background: var(--accent-soft); }
.studio-component-grid b { font-size: 12px; }
.studio-component-grid small { color: var(--muted); font-size: 10px; line-height: 1.35; }

.studio-source-list,
.studio-device-list,
.studio-version-list,
.studio-access-rule-list { display: grid; gap: 8px; }
.studio-source-card,
.studio-device-card,
.studio-version-card,
.studio-access-rule {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.studio-source-card,
.studio-device-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.studio-source-card > span,
.studio-device-card > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--accent); background: var(--accent-soft); }
.studio-source-card div,
.studio-device-card div { display: grid; min-width: 0; gap: 2px; }
.studio-source-card small,
.studio-device-card small,
.studio-version-card small { color: var(--muted); font-size: 10px; }
.studio-source-create,
.studio-device-create { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.studio-source-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.studio-source-create-grid button { min-height: 50px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface-2); font-size: 11px; }

.studio-access-summary {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.studio-access-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.studio-access-mode-grid button { min-height: 39px; padding: 0 8px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--surface); font-size: 10px; font-weight: 700; }
.studio-access-mode-grid button.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.studio-access-group { display: grid; gap: 7px; margin-top: 12px; }
.studio-access-group > label { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.studio-access-chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.studio-access-chip-grid button { min-height: 31px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: var(--surface); font-size: 10px; }
.studio-access-chip-grid button.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.studio-access-rule { display: grid; gap: 8px; }
.studio-access-rule-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center; }
.studio-access-rule-head input { min-width: 0; }
.studio-access-rule-head select { min-height: 34px; }
.studio-access-condition { display: grid; grid-template-columns: minmax(110px, 1fr) 110px minmax(80px, 1fr) 32px; gap: 5px; }
.studio-access-condition input,
.studio-access-condition select { min-width: 0; min-height: 34px; }
.studio-access-preview-card { display: grid; gap: 8px; margin-top: 12px; padding: 10px; border-radius: 12px; color: var(--muted); background: var(--surface-2); }
.studio-access-preview-card.allowed { color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--surface)); }
.studio-access-preview-card.denied { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }

.studio-canvas-area { min-width: 0; overflow: auto; background: var(--app-bg); }
.studio-screen-map-strip {
  position: sticky;
  z-index: 6;
  top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 50px;
  padding: 7px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  backdrop-filter: blur(12px);
}
.studio-screen-map-strip button { display: inline-flex; align-items: center; gap: 6px; min-height: 35px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--surface-2); white-space: nowrap; font-size: 11px; font-weight: 700; }
.studio-screen-map-strip button.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.studio-screen-map-strip button.hidden-for-preview { opacity: .42; text-decoration: line-through; }

.studio-canvas.device-desktop { width: min(1180px, calc(100% - 36px)); }
.studio-canvas.device-tablet { width: min(820px, calc(100% - 36px)); }
.studio-canvas.device-phone { width: min(430px, calc(100% - 24px)); }
.studio-canvas.device-terminal { width: min(1024px, calc(100% - 30px)); }
.studio-canvas.device-phone .studio-canvas-grid { --studio-columns: 1 !important; }
.studio-canvas.device-tablet .studio-canvas-grid { --studio-columns: 2 !important; }
.studio-canvas.device-terminal .studio-canvas-grid { --studio-columns: 3 !important; }
.studio-canvas-grid { display: grid; grid-template-columns: repeat(var(--studio-columns, 4), minmax(0, 1fr)); gap: 12px; }
.studio-canvas-block { grid-column: span min(var(--studio-span, 4), var(--studio-columns, 4)); min-width: 0; }
.studio-canvas-block.is-hidden-device { display: none; }
.studio-canvas-block.is-denied-preview { opacity: .38; filter: grayscale(.35); }

.studio-block-mini-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.studio-block-mini-metrics span,
.studio-block-mini-data span,
.studio-block-mini-actions span,
.studio-block-mini-form span { display: grid; gap: 3px; min-height: 48px; padding: 8px; border-radius: 9px; background: var(--surface-2); }
.studio-block-mini-metrics b { font-size: 18px; }
.studio-block-mini-data,
.studio-block-mini-actions,
.studio-block-mini-form { display: grid; gap: 6px; }
.studio-block-mini-data span { grid-template-columns: 10px 1fr auto; align-items: center; }
.studio-block-mini-data i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.studio-block-mini-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio-block-mini-actions span { place-items: center; color: var(--accent); font-weight: 750; }
.studio-block-mini-form span { min-height: 34px; color: var(--muted); border: 1px solid var(--border); background: transparent; }
.studio-block-mini-chart { display: flex; align-items: end; gap: 5px; height: 82px; padding: 8px; border-radius: 10px; background: var(--surface-2); }
.studio-block-mini-chart i { flex: 1; min-width: 4px; border-radius: 5px 5px 2px 2px; background: linear-gradient(to top, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent)); }

.studio-inspector { border-left: 1px solid var(--border); }
.studio-inspector-tabs { display: flex; gap: 4px; padding: 9px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.studio-inspector-tabs button { min-height: 34px; padding: 0 9px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; white-space: nowrap; font-size: 10px; font-weight: 750; }
.studio-inspector-tabs button.active { color: var(--accent); background: var(--accent-soft); }
.studio-inspector-body { height: calc(100dvh - 124px); overflow: auto; padding: 14px; }
.studio-inspector-section { display: grid; gap: 10px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.studio-inspector-section h3 { margin: 0; font-size: 13px; }
.studio-responsive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.studio-responsive-card { display: grid; gap: 6px; padding: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.studio-responsive-card.active { border-color: var(--accent); }

.studio-runtime-screen-nav {
  display: flex;
  gap: 7px;
  margin: 0 0 14px;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.studio-runtime-screen-nav button { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; white-space: nowrap; }
.studio-runtime-screen-nav button.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: var(--accent-soft); }
.studio-runtime-screen-nav small { color: var(--warning); font-size: 9px; }
.service-block-container,
.service-block-grid { border-style: dashed; }

@media (max-width: 1360px) {
  .studio-app-layout { grid-template-columns: 310px minmax(430px, 1fr) 320px; }
  .studio-role-preview select { max-width: 116px; }
  .studio-screen-context { display: none; }
}

@media (max-width: 1120px) {
  .studio-app-toolbar { grid-template-columns: minmax(240px, 1fr) auto auto; }
  .studio-role-preview { display: none; }
  .studio-app-layout { grid-template-columns: 285px minmax(400px, 1fr); }
  .studio-inspector { position: fixed; z-index: 80; top: calc(70px + var(--safe-top, 0px)); right: 0; bottom: 0; width: min(370px, 92vw); transform: translateX(105%); box-shadow: -28px 0 70px rgba(0,0,0,.22); transition: transform .2s ease; }
  .studio-inspector.mobile-open { transform: translateX(0); }
  .studio-mobile-tools { display: flex; gap: 5px; }
}

@media (max-width: 840px) {
  .studio-app-toolbar { position: sticky; z-index: 90; top: 0; grid-template-columns: minmax(0, 1fr) auto auto; padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
  .studio-title-input { width: min(180px, 43vw); }
  .studio-device-switch { display: none; }
  .studio-toolbar-actions .btn.ghost { display: none; }
  .studio-app-layout { display: block; }
  .studio-app-sidebar { position: fixed; z-index: 85; top: calc(70px + var(--safe-top, 0px)); bottom: 0; left: 0; width: min(350px, 94vw); transform: translateX(-105%); box-shadow: 28px 0 70px rgba(0,0,0,.22); transition: transform .2s ease; }
  .studio-app-sidebar.mobile-open { transform: translateX(0); }
  .studio-canvas-area { min-height: calc(100dvh - 70px); }
  .studio-canvas { margin: 16px auto max(80px, env(safe-area-inset-bottom)); }
  .studio-component-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .studio-toolbar-left .studio-logo,
  .studio-toolbar-left > .icon-button,
  .studio-toolbar-left small,
  .unsaved-dot { display: none; }
  .studio-toolbar-actions .btn.soft { display: none; }
  .studio-toolbar-actions .btn.primary { min-width: 44px; padding-inline: 10px; font-size: 0; }
  .studio-toolbar-actions .btn.primary::after { content: '✓'; font-size: 18px; }
  .studio-app-sidebar { grid-template-columns: 58px minmax(0, 1fr); }
  .studio-section-tabs button span { font-size: 9px; }
  .studio-access-condition { grid-template-columns: 1fr 90px; }
  .studio-access-condition input { grid-column: 1 / -1; }
  .studio-screen-map-strip { padding-inline: 8px; }
  .studio-runtime-screen-nav { margin-inline: -3px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-component-grid > button,
  .studio-app-sidebar,
  .studio-inspector { transition: none !important; }
}

/* Studio 3.1 supplemental structures */
.studio-section { display:grid; gap:10px; }
.studio-screens-panel,
.studio-devices-panel,
.studio-versions-panel,
.studio-access-matrix-panel { min-width:0; }
.studio-source-add-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:10px; }
.studio-source-add-grid button { display:flex; align-items:center; justify-content:flex-start; gap:7px; min-height:40px; padding:0 9px; border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--surface-2); font-size:10px; font-weight:700; }
.studio-source-add-grid button:hover { color:var(--accent); border-color:var(--accent); }
.studio-preview-subject { display:grid; gap:9px; padding:11px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }
.studio-access-matrix { min-width:560px; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--surface); font-size:10px; }
.studio-access-matrix-panel { overflow:auto; }
.studio-access-matrix > header,
.studio-access-matrix > div { display:grid; grid-template-columns:minmax(130px,1.4fr) minmax(85px,1fr) 52px minmax(110px,1fr) 70px; gap:8px; align-items:center; min-height:42px; padding:7px 9px; border-bottom:1px solid var(--border); }
.studio-access-matrix > header { position:sticky; top:0; z-index:2; color:var(--muted); background:var(--surface-2); font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.studio-access-matrix > div { cursor:pointer; }
.studio-access-matrix > div:hover { background:var(--accent-soft); }
.studio-access-matrix > div > span:first-child { display:grid; gap:2px; }
.studio-access-matrix small { color:var(--muted); }
.studio-access-matrix .allowed { color:var(--success); font-weight:800; }
.studio-access-matrix .denied { color:var(--danger); font-weight:800; }
.studio-rules-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.studio-access-rule > header { display:grid; grid-template-columns:minmax(0,1fr) 90px 92px 32px; gap:5px; }
.studio-access-rule > header button,
.studio-access-condition button { display:grid; width:32px; height:34px; place-items:center; border:1px solid var(--border); border-radius:8px; color:var(--danger); background:transparent; }
.access-chip-editor { display:grid; gap:7px; margin-top:10px; }
.access-chip-editor > b { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.access-chip-editor label { display:inline-flex; align-items:center; gap:6px; margin:0 6px 6px 0; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); font-size:10px; }
.access-chip-editor input { accent-color:var(--accent); }
.studio-component-preview { position:relative; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:start; gap:10px; min-height:104px; }
.studio-component-preview > div { min-width:0; }
.studio-component-preview h3 { margin:2px 0 3px; font-size:14px; }
.studio-component-preview p { margin:0 0 8px; color:var(--muted); font-size:10px; line-height:1.4; }
.studio-component-icon { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; color:var(--accent); background:var(--accent-soft); }
.component-access-mark { display:grid; width:27px; height:27px; place-items:center; border-radius:8px; color:var(--warning); background:color-mix(in srgb,var(--warning) 12%,transparent); }
.studio-advanced-block.restricted { border-style:dashed; border-color:color-mix(in srgb,var(--warning) 55%,var(--border)); }
.mini-metric-preview { display:grid; grid-template-columns:auto 1fr; gap:5px 8px; align-items:center; }
.mini-metric-preview b { font-size:22px; }
.mini-metric-preview i { height:6px; overflow:hidden; border-radius:999px; background:linear-gradient(90deg,var(--accent) 72%,var(--surface-2) 72%); }
.mini-metric-preview span { grid-column:1/-1; color:var(--success); font-size:9px; }
.mini-data-preview { display:grid; gap:4px; }
.mini-data-preview span { display:grid; grid-template-columns:7px minmax(0,1fr) auto; gap:6px; align-items:center; min-height:28px; padding:4px 7px; border-radius:7px; background:var(--surface-2); font-size:9px; }
.mini-data-preview i { width:7px; height:7px; border-radius:50%; background:var(--accent); }
.mini-data-preview em { color:var(--muted); font-style:normal; }
.mini-action-preview { display:flex; flex-wrap:wrap; gap:5px; }
.mini-action-preview button { min-height:28px; padding:0 8px; border:0; border-radius:7px; color:var(--accent); background:var(--accent-soft); font-size:9px; }
.mini-form-preview { display:grid; gap:4px; }
.mini-form-preview label { color:var(--muted); font-size:9px; }
.mini-form-preview input { min-height:28px; border:1px solid var(--border); border-radius:7px; background:var(--surface-2); }
.mini-form-preview button { justify-self:start; min-height:27px; border:0; border-radius:7px; color:#fff; background:var(--accent); font-size:9px; }
.mini-chart-preview { display:flex; align-items:end; gap:3px; height:54px; }
.mini-chart-preview i { flex:1; min-width:3px; border-radius:3px 3px 1px 1px; background:linear-gradient(to top,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent)); }
.studio-app-inspector { min-width:0; }
.studio-component-chips { display:flex; flex-wrap:wrap; gap:5px; }
.studio-component-chips span { padding:5px 7px; border-radius:7px; color:var(--muted); background:var(--surface-2); font-size:9px; }
.studio-accent { color:var(--accent); }

@media (max-width:840px) {
  .studio-access-matrix { min-width:520px; }
  .studio-source-add-grid { grid-template-columns:1fr; }
}
.studio-app-access-policy { margin-bottom:12px; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.studio-app-access-policy > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:46px; padding:8px 10px; cursor:pointer; list-style:none; }
.studio-app-access-policy > summary::-webkit-details-marker { display:none; }
.studio-app-access-policy > summary span { display:flex; align-items:center; gap:7px; }
.studio-app-access-policy > summary em { color:var(--muted); font-size:9px; font-style:normal; text-align:right; }
.studio-app-access-body { display:grid; gap:8px; max-height:440px; overflow:auto; padding:10px; border-top:1px solid var(--border); background:var(--surface-2); }
.service-navigation-block button.active { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 34%,var(--border)); background:var(--accent-soft); }
.service-generic-input select { min-height:42px; border:1px solid var(--border); border-radius:10px; color:var(--text); background:var(--surface-2); }
.service-integration-block .btn { margin-top:10px; }
.service-layout-placeholder { border:1px dashed var(--border-strong,var(--border)); }
.service-layout-slots { display:grid; grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); gap:7px; margin-top:12px; }
.service-layout-slots i { min-height:44px; border-radius:9px; background:var(--surface-2); }

/* ========================================================================
   WorkBlock Studio 3.2 — Spatial Canvas & Navigation Builder
   ======================================================================== */
.studio-app-layout {
  grid-template-columns: 340px minmax(560px, 1fr) 330px;
}
.studio-app-sidebar,
.studio-app-inspector {
  overscroll-behavior: contain;
}
.studio-sidebar-content {
  min-width: 0;
  overflow-x: hidden;
}
.studio-section-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 10px;
}
.studio-section-tabs button {
  min-width: 0;
  min-height: 48px;
  padding: 7px 5px;
  border-radius: 12px;
}
.studio-section-tabs button span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-category-list {
  padding: 8px 12px 4px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.studio-category-list button {
  min-width: max-content;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 10px;
  white-space: nowrap;
}
.studio-category-list button.active {
  color: var(--accent-ink);
  border-color: var(--accent-border);
  background: var(--accent-soft-strong);
}
.studio-category-list button em {
  color: inherit;
  font-style: normal;
  opacity: .75;
}

.component-palette-grid.categorized {
  padding: 10px 12px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.component-palette-grid.categorized .component-palette-card {
  width: 100%;
  min-width: 0;
  min-height: 78px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  align-items: center;
  align-content: center;
  justify-items: stretch;
  gap: 10px;
  overflow: hidden;
  color: var(--text);
  background: var(--surface-soft);
  text-align: left;
  cursor: grab;
  user-select: none;
  touch-action: manipulation;
}
.component-palette-grid.categorized .component-palette-card:active {
  cursor: grabbing;
}
.component-palette-grid.categorized .component-palette-card:hover,
.component-palette-grid.categorized .component-palette-card:focus-visible {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  transform: translateY(-1px);
  outline: none;
}
.component-palette-grid .palette-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
}
.palette-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.palette-copy b,
.palette-copy small,
.palette-copy em {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}
.palette-copy b {
  color: var(--text);
  font-size: 11px;
  line-height: 1.25;
}
.palette-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.palette-copy em {
  color: var(--accent);
  font-size: 8px;
  font-style: normal;
  line-height: 1.2;
}
.palette-drag {
  width: 24px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--muted);
  opacity: .65;
}
.component-palette-card:hover .palette-drag { color: var(--accent); opacity: 1; }

.studio-canvas-toolbar {
  min-height: 42px;
  margin: 0 0 10px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
}
.studio-canvas-toolbar > div { display: flex; gap: 6px; }
.studio-canvas-toolbar small { color: var(--muted); font-size: 9px; text-transform: capitalize; }
.studio-canvas-toolbar .btn.active { color: var(--accent-ink); border-color: var(--accent-border); background: var(--accent-soft); }

.studio-coordinate-canvas {
  --studio-grid-columns: 12;
  --studio-grid-row-height: 72px;
  --studio-grid-gap: 12px;
  position: relative;
  min-height: calc(var(--studio-grid-rows, 12) * var(--studio-grid-row-height));
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--studio-grid-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--studio-grid-rows, 12), var(--studio-grid-row-height));
  grid-auto-rows: var(--studio-grid-row-height);
  gap: var(--studio-grid-gap);
  align-items: stretch;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px);
  background-size:
    calc((100% - (var(--studio-grid-columns) - 1) * var(--studio-grid-gap)) / var(--studio-grid-columns) + var(--studio-grid-gap)) 100%,
    100% calc(var(--studio-grid-row-height) + var(--studio-grid-gap));
  background-position: 0 0;
  transition: background-color 160ms ease;
}
.studio-coordinate-canvas.grid-hidden { background-image: none; }
.studio-coordinate-canvas.is-dragging {
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
}
.studio-drop-preview {
  z-index: 8;
  min-width: 0;
  min-height: 0;
  border: 2px dashed var(--accent);
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent-soft-strong) 74%, transparent);
  pointer-events: none;
}
.studio-drop-preview span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--panel-solid);
  font-size: 9px;
  font-weight: 850;
}
.studio-coordinate-canvas .studio-block {
  z-index: 2;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 14px;
  overflow: hidden;
  cursor: grab;
}
.studio-coordinate-canvas .studio-block.dragging {
  opacity: .35;
  cursor: grabbing;
}
.studio-coordinate-canvas .studio-block:active { cursor: grabbing; }
.studio-component-preview,
.studio-component-preview > div {
  min-width: 0;
  max-width: 100%;
}
.studio-component-preview h3,
.studio-component-preview p,
.studio-component-preview small {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.studio-component-preview p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.studio-coordinate-canvas .studio-block-tools {
  z-index: 6;
  max-width: calc(100% - 20px);
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
  box-shadow: var(--shadow-sm);
}
.studio-coordinate-canvas .studio-block-tools button,
.studio-coordinate-canvas .studio-block-tools .drag-handle {
  width: 25px;
  height: 25px;
  min-width: 25px;
  display: grid;
  place-items: center;
  font-size: 14px;
}

.studio-position-card {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  background: var(--accent-soft);
}
.studio-position-card > header {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.studio-position-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.studio-position-grid label {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 9px;
}
.studio-position-grid .input { min-width: 0; }
.studio-nudge-grid {
  width: 128px;
  margin: 9px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.studio-nudge-grid button {
  min-height: 29px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel);
}
.studio-nudge-grid button:first-child { grid-column: 2; }
.studio-nudge-grid button:last-child { grid-column: 2; }

.studio-navigation-actions {
  padding: 10px 12px 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, .85fr);
  gap: 7px;
}
.studio-help-text {
  margin: 7px 12px 10px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}
.studio-navigation-list {
  padding: 0 12px 20px;
  display: grid;
  gap: 9px;
}
.studio-navigation-list article {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}
.studio-navigation-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) repeat(3, 29px);
  align-items: center;
  gap: 5px;
}
.studio-navigation-row .drag-handle { color: var(--muted); }
.studio-navigation-row .icon-button { width: 29px; height: 29px; min-width: 29px; }
.navigation-visibility-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.navigation-visibility-grid label {
  min-width: 0;
  padding: 5px 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  background: var(--panel);
  font-size: 9px;
}

.studio-preview-navigation {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.studio-preview-navigation button {
  min-width: 0;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  background: var(--surface-soft);
}
.studio-preview-navigation button.active {
  color: var(--accent-ink);
  border-color: var(--accent-border);
  background: var(--accent-soft);
}
.studio-preview-navigation.placement-sidebar {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.studio-preview-navigation.placement-bottom {
  position: sticky;
  z-index: 10;
  bottom: 0;
  margin-top: 10px;
  justify-content: center;
}
.studio-preview-navigation.placement-tiles button {
  min-width: 130px;
  min-height: 52px;
  justify-content: flex-start;
}

.service-runtime-grid {
  --service-grid-columns: 12;
  display: grid;
  grid-template-columns: repeat(var(--service-grid-columns), minmax(0, 1fr));
  grid-auto-rows: 72px;
  gap: 12px;
}
.service-runtime-card {
  grid-column: var(--rt-desktop-x, 1) / span var(--rt-desktop-w, 4);
  grid-row: var(--rt-desktop-y, auto) / span var(--rt-desktop-h, 3);
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

@media (max-width: 1280px) {
  .studio-app-layout { grid-template-columns: 310px minmax(480px, 1fr) 300px; }
  .service-runtime-grid { --service-grid-columns: 8; grid-auto-rows: 70px; }
  .service-runtime-card {
    grid-column: var(--rt-tablet-x, 1) / span var(--rt-tablet-w, 4);
    grid-row: var(--rt-tablet-y, auto) / span var(--rt-tablet-h, 3);
  }
}
@media (max-width: 980px) {
  .studio-app-layout { grid-template-columns: 270px minmax(0, 1fr); }
  .component-palette-grid.categorized { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .studio-app-layout { grid-template-columns: 1fr; }
  .studio-category-list { padding-inline: 8px; }
  .component-palette-grid.categorized { padding-inline: 8px; }
  .studio-coordinate-canvas {
    min-width: 0;
    grid-template-columns: repeat(var(--studio-grid-columns), minmax(0, 1fr));
  }
  .studio-canvas-toolbar { align-items: flex-start; }
  .studio-canvas-toolbar > div { flex-wrap: wrap; }
  .studio-coordinate-canvas .studio-block-tools { opacity: 1; }
  .service-runtime-grid { --service-grid-columns: 4; grid-auto-rows: 66px; }
  .service-runtime-card {
    grid-column: var(--rt-phone-x, 1) / span var(--rt-phone-w, 4) !important;
    grid-row: var(--rt-phone-y, auto) / span var(--rt-phone-h, 3) !important;
  }
  .studio-navigation-actions { grid-template-columns: 1fr; }
}
.studio-navigation-advanced {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 7px;
}
.studio-navigation-advanced summary {
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.studio-stage.menu-sidebar {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  grid-template-areas:
    "menu header"
    "menu toolbar"
    "menu canvas";
  align-content: start;
  gap: 0 16px;
}
.studio-stage.menu-sidebar > .studio-preview-navigation {
  grid-area: menu;
  margin: 0;
  align-self: stretch;
  align-content: start;
  flex-direction: column;
}
.studio-stage.menu-sidebar > .studio-preview-navigation button {
  width: 100%;
  justify-content: flex-start;
}
.studio-stage.menu-sidebar > .studio-screen-header { grid-area: header; }
.studio-stage.menu-sidebar > .studio-canvas-toolbar { grid-area: toolbar; }
.studio-stage.menu-sidebar > .studio-empty-canvas,
.studio-stage.menu-sidebar > .studio-coordinate-canvas { grid-area: canvas; }
.studio-stage.menu-topbar > .studio-preview-navigation { justify-content: flex-start; }
.studio-stage.menu-bottom > .studio-preview-navigation { order: 20; }
.studio-stage.menu-tiles > .studio-preview-navigation { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.studio-stage.menu-tiles > .studio-preview-navigation button { width: 100%; }
@media (max-width: 700px) {
  .studio-stage.menu-sidebar {
    display: block;
  }
  .studio-stage.menu-sidebar > .studio-preview-navigation {
    margin-bottom: 10px;
    flex-direction: row;
    overflow-x: auto;
  }
  .studio-stage.menu-sidebar > .studio-preview-navigation button { width: auto; min-width: max-content; }
}

/* ==========================================================
   WorkBlock Studio 3.3 — Scenario Studio
   Screens · Interactions · Data and forms · Modules
   ========================================================== */
.scenario-studio-start,
.scenario-studio-shell {
  --scenario-panel: color-mix(in srgb, var(--panel-solid) 96%, transparent);
  min-width: 0;
}
.scenario-studio-start {
  min-height: calc(100vh - 130px);
  padding: clamp(18px, 3vw, 42px);
  border: 1px solid var(--border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    radial-gradient(circle at 88% 0%, color-mix(in srgb, #467dff 16%, transparent), transparent 36%),
    var(--panel);
  overflow: hidden;
}
.scenario-start-head {
  max-width: 880px;
  margin-bottom: 26px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.scenario-start-head h1 { margin: 5px 0 8px; font-size: clamp(28px, 4vw, 52px); line-height: 1.02; }
.scenario-start-head p { max-width: 720px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.scenario-start-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.scenario-start-card {
  min-width: 0;
  min-height: 325px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: color-mix(in srgb, var(--panel-solid) 92%, transparent);
  box-shadow: var(--shadow-sm);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.scenario-start-card:hover { transform: translateY(-3px); border-color: var(--accent-border); box-shadow: var(--shadow-md); }
.scenario-start-icon {
  width: 52px;
  height: 52px;
  border: 1px solid var(--accent-border);
  border-radius: 17px;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.scenario-start-card h2 { margin: 0 0 6px; font-size: 19px; }
.scenario-start-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.scenario-start-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.scenario-start-meta span,
.scenario-module-preview span {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 9px;
  font-weight: 750;
}
.scenario-module-preview { display: flex; flex-wrap: wrap; gap: 5px; }
.scenario-start-card .btn { margin-top: auto; }
.scenario-ai-start {
  max-width: 920px;
  margin: 22px auto 0;
  padding: 20px;
  border: 1px solid var(--accent-border);
  border-radius: 22px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  background: var(--accent-soft);
}
.scenario-ai-start h2 { margin: 0 0 5px; }
.scenario-ai-start p { margin: 0 0 12px; color: var(--muted); }
.scenario-ai-start textarea { min-height: 88px; margin-bottom: 10px; }

.scenario-studio-shell {
  min-height: calc(100vh - 110px);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--panel);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.scenario-studio-toolbar {
  min-height: 72px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(440px, 1.4fr) minmax(350px, 1fr);
  align-items: center;
  gap: 14px;
  background: color-mix(in srgb, var(--panel-solid) 97%, transparent);
}
.scenario-toolbar-context,
.scenario-toolbar-actions,
.scenario-main-tabs { min-width: 0; display: flex; align-items: center; gap: 8px; }
.scenario-toolbar-context > div { min-width: 0; display: grid; }
.scenario-toolbar-context small { color: var(--muted); font-size: 9px; }
.scenario-toolbar-context .studio-title-input { width: min(260px, 100%); height: 28px; padding: 0; border: 0; color: var(--text); background: transparent; font-size: 16px; font-weight: 850; }
.scenario-main-tabs { justify-content: center; }
.scenario-main-tabs button {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.scenario-main-tabs button:hover { color: var(--text); background: var(--surface-soft); }
.scenario-main-tabs button.active { color: var(--accent-ink); border-color: var(--accent-border); background: var(--accent-soft); }
.scenario-toolbar-actions { justify-content: flex-end; }

.scenario-screens-workspace {
  min-height: calc(100vh - 184px);
  display: grid;
  grid-template-columns: 260px minmax(520px, 1fr) 310px;
}
.scenario-screen-rail,
.scenario-element-panel,
.scenario-list-panel,
.scenario-path-panel,
.scenario-form-editor {
  min-width: 0;
  background: var(--scenario-panel);
}
.scenario-screen-rail { border-right: 1px solid var(--border); }
.scenario-element-panel { border-left: 1px solid var(--border); }
.scenario-panel-title {
  min-height: 62px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.scenario-panel-title > div { min-width: 0; display: grid; gap: 2px; }
.scenario-panel-title small { color: var(--muted); font-size: 9px; }
.scenario-panel-title b { overflow-wrap: anywhere; font-size: 13px; }
.scenario-panel-title > span {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-size: 10px;
  font-weight: 850;
}
.scenario-screen-list { padding: 10px; display: grid; gap: 6px; }
.scenario-screen-list > button {
  min-width: 0;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  color: var(--text);
  background: transparent;
  text-align: left;
}
.scenario-screen-list > button:hover { background: var(--surface-soft); }
.scenario-screen-list > button.active { border-color: var(--accent-border); background: var(--accent-soft); }
.scenario-screen-list > button > span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  background: var(--panel);
}
.scenario-screen-list > button > div { min-width: 0; display: grid; gap: 2px; }
.scenario-screen-list b,
.scenario-screen-list small,
.scenario-screen-list em { overflow-wrap: anywhere; }
.scenario-screen-list small { color: var(--muted); font-size: 9px; }
.scenario-screen-list em { color: var(--muted); font-size: 8px; font-style: normal; }
.scenario-screen-list i { padding: 4px 6px; border-radius: 999px; color: var(--accent-ink); background: var(--accent-soft); font-size: 8px; font-style: normal; font-weight: 800; }
.scenario-add-screen { margin: 4px 10px 10px; border: 1px dashed var(--border); border-radius: 13px; }
.scenario-add-screen summary { padding: 10px; display: flex; align-items: center; gap: 7px; color: var(--accent); font-size: 10px; font-weight: 850; cursor: pointer; }
.scenario-add-screen > div { max-height: 280px; padding: 0 7px 7px; display: grid; gap: 5px; overflow: auto; }
.scenario-add-screen button {
  min-width: 0;
  padding: 8px;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--text);
  background: var(--surface-soft);
  text-align: left;
}
.scenario-add-screen button span { min-width: 0; display: grid; }
.scenario-add-screen button small { color: var(--muted); font-size: 8px; line-height: 1.35; overflow-wrap: anywhere; }
.scenario-screen-actions { padding: 0 10px 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.scenario-screen-actions button { min-width: 0; min-height: 34px; padding: 6px; border: 1px solid var(--border); border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--muted); background: var(--surface-soft); font-size: 8px; }
.scenario-menu-summary { margin: 7px 10px 14px; padding: 10px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.scenario-menu-summary header { margin-bottom: 7px; display: flex; justify-content: space-between; gap: 8px; }
.scenario-menu-summary header button { color: var(--accent); font-size: 8px; }
.scenario-menu-summary label { min-width: 0; min-height: 30px; display: grid; grid-template-columns: 16px 20px minmax(0, 1fr); align-items: center; gap: 5px; }
.scenario-menu-summary label input[type="text"],
.scenario-menu-summary label > input:last-child { min-width: 0; border: 0; color: var(--text); background: transparent; font-size: 9px; }

.scenario-screen-stage { min-width: 0; padding: 18px; overflow: auto; background: var(--bg); }
.scenario-screen-header {
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background: var(--panel);
}
.scenario-screen-header > div:first-child { min-width: 0; flex: 1; }
.scenario-screen-header input { width: 100%; max-width: 520px; padding: 3px 0; border: 0; color: var(--text); background: transparent; font-size: 22px; font-weight: 900; }
.scenario-screen-header p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.scenario-screen-header > div:last-child { display: flex; align-items: flex-end; gap: 7px; }
.scenario-screen-header label { display: grid; gap: 4px; color: var(--muted); font-size: 8px; }
.scenario-preview-menu { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.scenario-preview-menu button { min-height: 34px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; gap: 6px; color: var(--muted); background: var(--panel); font-size: 9px; }
.scenario-preview-menu button.active { color: var(--accent-ink); border-color: var(--accent-border); background: var(--accent-soft); }
.scenario-canvas {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.scenario-zone {
  min-width: 0;
  min-height: 135px;
  padding: 10px;
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.scenario-zone:hover,
.scenario-zone.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 42%, var(--panel)); }
.scenario-zone.empty { min-height: 150px; }
.scenario-zone > header { margin-bottom: 9px; display: flex; justify-content: space-between; gap: 8px; }
.scenario-zone > header > div { min-width: 0; display: grid; gap: 2px; }
.scenario-zone > header b { font-size: 10px; }
.scenario-zone > header small { color: var(--muted); font-size: 8px; overflow-wrap: anywhere; }
.scenario-zone > header button { display: flex; align-items: center; gap: 4px; color: var(--accent); font-size: 8px; font-weight: 850; }
.scenario-zone.size-full { grid-column: 1 / -1; }
.scenario-zone.size-wide { grid-column: span 8; }
.scenario-zone.size-side { grid-column: span 4; }
.scenario-zone.size-narrow { grid-column: span 3; }
.scenario-zone.zone-content.size-wide + .scenario-zone.size-side { grid-column: span 4; }
.scenario-zone-elements { min-width: 0; display: grid; gap: 8px; }
.scenario-element {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--panel-solid);
  box-shadow: var(--shadow-xs);
  cursor: grab;
}
.scenario-element:hover,
.scenario-element.selected { border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--accent-soft); }
.scenario-element-head { display: grid; grid-template-columns: 30px minmax(0, 1fr) 24px; align-items: center; gap: 7px; }
.scenario-element-head > span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); }
.scenario-element-head > div { min-width: 0; display: grid; gap: 2px; }
.scenario-element-head b,
.scenario-element-head small { max-width: 100%; overflow-wrap: anywhere; }
.scenario-element-head b { font-size: 10px; }
.scenario-element-head small { color: var(--muted); font-size: 8px; }
.scenario-element-head button { width: 24px; height: 24px; border-radius: 7px; color: var(--muted); }
.scenario-element-preview { min-width: 0; margin-top: 9px; }
.scenario-element-preview > p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.scenario-element-preview > input { width: 100%; min-height: 34px; }
.scenario-demo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; }
.scenario-demo-cards span { min-width: 0; padding: 7px; border: 1px solid var(--border); border-radius: 9px; display: grid; gap: 3px; background: var(--surface-soft); }
.scenario-demo-cards i { height: 30px; border-radius: 6px; background: linear-gradient(135deg, var(--accent-soft), var(--surface-strong)); }
.scenario-demo-cards b { font-size: 8px; overflow-wrap: anywhere; }
.scenario-demo-cards small { color: var(--muted); font-size: 7px; }
.scenario-demo-order,
.scenario-demo-list,
.scenario-demo-comments { display: grid; gap: 5px; }
.scenario-demo-order span,
.scenario-demo-list span { min-width: 0; padding: 6px; border-radius: 8px; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 5px; background: var(--surface-soft); }
.scenario-demo-order span { grid-template-columns: minmax(0, 1fr) auto; }
.scenario-demo-order b,
.scenario-demo-list b { font-size: 8px; }
.scenario-demo-order small,
.scenario-demo-list small { color: var(--muted); font-size: 7px; }
.scenario-demo-order strong { padding-top: 6px; border-top: 1px solid var(--border); text-align: right; font-size: 10px; }
.scenario-demo-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.scenario-demo-calendar b { grid-column: 1 / -1; font-size: 9px; }
.scenario-demo-calendar span { aspect-ratio: 1; border-radius: 5px; display: grid; place-items: center; background: var(--surface-soft); font-size: 7px; }
.scenario-demo-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.scenario-demo-form label { display: grid; gap: 3px; color: var(--muted); font-size: 7px; }
.scenario-demo-form input,
.scenario-demo-form select { min-width: 0; height: 29px; }
.scenario-demo-metric { padding: 8px; border-radius: 10px; display: grid; gap: 2px; background: var(--accent-soft); }
.scenario-demo-metric strong { font-size: 19px; }
.scenario-demo-metric small,
.scenario-demo-metric em { font-size: 8px; font-style: normal; }
.scenario-demo-comments span { padding: 7px; border-radius: 9px; background: var(--surface-soft); font-size: 8px; }
.scenario-zone-empty { min-height: 92px; padding: 10px; border: 1px dashed var(--accent-border); border-radius: 12px; display: grid; place-items: center; align-content: center; gap: 4px; color: var(--accent); background: var(--accent-soft); text-align: center; }
.scenario-zone-empty b { font-size: 9px; }
.scenario-zone-empty small { color: var(--muted); font-size: 8px; }

.scenario-inspector-form,
.scenario-form-editor { padding: 12px; display: grid; align-content: start; gap: 10px; }
.scenario-inspector-form > label,
.scenario-form-editor > label { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 8px; }
.scenario-inspector-form input,
.scenario-inspector-form textarea,
.scenario-inspector-form select,
.scenario-form-editor input,
.scenario-form-editor select { min-width: 0; width: 100%; }
.scenario-inspector-form textarea { min-height: 72px; }
.scenario-inspector-form details { border: 1px solid var(--border); border-radius: 11px; padding: 8px; }
.scenario-inspector-form summary { color: var(--accent); font-size: 9px; font-weight: 850; cursor: pointer; }
.scenario-check-grid { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.scenario-check-grid label { min-width: 0; padding: 5px; border-radius: 7px; display: flex; align-items: center; gap: 4px; color: var(--muted); background: var(--surface-soft); font-size: 8px; overflow-wrap: anywhere; }
.scenario-rule { margin-top: 7px; display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 5px; }
.scenario-catalog { margin: 2px 10px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); overflow: hidden; }
.scenario-catalog > header { min-height: 52px; padding: 9px 10px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.scenario-catalog > header > div { min-width: 0; display: grid; }
.scenario-catalog > header small { color: var(--muted); font-size: 8px; }
.scenario-element-search { margin: 8px; padding: 0 8px; border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; gap: 6px; background: var(--panel); }
.scenario-element-search input { min-width: 0; width: 100%; height: 34px; border: 0; background: transparent; }
.scenario-element-categories { padding: 0 8px 8px; display: flex; gap: 5px; overflow-x: auto; }
.scenario-element-categories button { min-width: max-content; min-height: 28px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--panel); font-size: 8px; }
.scenario-element-categories button.active { color: var(--accent-ink); border-color: var(--accent-border); background: var(--accent-soft); }
.scenario-element-list { max-height: 410px; padding: 0 8px 8px; display: grid; gap: 6px; overflow: auto; }
.scenario-element-list > button { min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 11px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--text); background: var(--panel); text-align: left; }
.scenario-element-list > button:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.scenario-element-list > button > span { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); }
.scenario-element-list > button > div { min-width: 0; display: grid; gap: 2px; }
.scenario-element-list b,
.scenario-element-list small { overflow-wrap: anywhere; white-space: normal; }
.scenario-element-list b { font-size: 9px; }
.scenario-element-list small { color: var(--muted); font-size: 7px; line-height: 1.35; }
.scenario-element-list i { color: var(--accent); font-size: 8px; font-style: normal; font-weight: 850; }

.scenario-section-workspace {
  min-height: calc(100vh - 184px);
  display: grid;
  grid-template-columns: 270px minmax(520px, 1fr) 300px;
}
.scenario-list-panel { border-right: 1px solid var(--border); }
.scenario-path-panel,
.scenario-form-editor { border-left: 1px solid var(--border); }
.scenario-list-panel > button {
  width: calc(100% - 20px);
  min-width: 0;
  margin: 5px 10px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--text);
  background: transparent;
  text-align: left;
}
.scenario-list-panel > button:hover { background: var(--surface-soft); }
.scenario-list-panel > button.active { border-color: var(--accent-border); background: var(--accent-soft); }
.scenario-list-panel > button > span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--accent-ink); background: var(--panel); }
.scenario-list-panel > button > div { min-width: 0; display: grid; }
.scenario-list-panel small { color: var(--muted); font-size: 8px; overflow-wrap: anywhere; }
.scenario-mini-empty { margin: 16px; padding: 18px; border: 1px dashed var(--border); border-radius: 14px; display: grid; justify-items: center; gap: 7px; color: var(--muted); text-align: center; }
.scenario-mini-empty p { margin: 0; font-size: 9px; line-height: 1.45; }
.scenario-interaction-editor,
.scenario-data-editor { min-width: 0; padding: 22px; overflow: auto; }
.scenario-interaction-editor > header,
.scenario-data-editor section > header { margin-bottom: 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.scenario-interaction-editor > header > div,
.scenario-data-editor section > header > div { min-width: 0; flex: 1; }
.scenario-interaction-editor > header input,
.scenario-data-editor section > header input { width: 100%; max-width: 560px; padding: 4px 0; border: 0; color: var(--text); background: transparent; font-size: 22px; font-weight: 900; }
.scenario-interaction-editor > header p,
.scenario-data-editor section > header p { margin: 3px 0 0; color: var(--muted); }
.scenario-trigger-field { max-width: 480px; display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
.scenario-action-flow { max-width: 760px; margin-top: 22px; display: grid; gap: 10px; }
.scenario-action-flow article { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: start; gap: 10px; }
.scenario-action-flow article > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); font-weight: 900; }
.scenario-action-flow article > div { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 13px; display: grid; grid-template-columns: minmax(150px, .8fr) minmax(180px, 1fr); gap: 7px; background: var(--panel); }
.scenario-action-flow article > div select:last-child { grid-column: 1 / -1; }
.scenario-action-flow article > button { width: 34px; height: 34px; color: var(--muted); }
.scenario-add-step { min-height: 40px; padding: 8px; border: 1px dashed var(--accent-border); border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--accent); background: var(--accent-soft); font-size: 9px; font-weight: 850; }
.scenario-screen-path { padding: 12px; display: grid; gap: 6px; }
.scenario-screen-path span { min-width: 0; padding: 9px; border: 1px solid var(--border); border-radius: 11px; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 3px 7px; background: var(--surface-soft); }
.scenario-screen-path i { grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); font-size: 8px; font-style: normal; font-weight: 850; }
.scenario-screen-path b { font-size: 9px; }
.scenario-screen-path small { color: var(--muted); font-size: 8px; overflow-wrap: anywhere; }
.scenario-help-card { margin: 12px; padding: 12px; border: 1px solid var(--accent-border); border-radius: 13px; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; background: var(--accent-soft); }
.scenario-help-card p { margin: 3px 0 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.forms-title { margin-top: 12px; border-top: 1px solid var(--border); }
.scenario-fields-table { min-width: 650px; display: grid; gap: 5px; }
.field-row { min-width: 0; display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(140px, .8fr) 110px 34px; align-items: center; gap: 6px; }
.field-row.head { padding: 0 7px; color: var(--muted); font-size: 8px; }
.field-row:not(.head) { padding: 7px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.field-row label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; }
.scenario-form-fields { padding: 10px; border: 1px solid var(--border); border-radius: 11px; display: grid; gap: 5px; background: var(--surface-soft); }
.scenario-form-fields > b { margin-bottom: 3px; font-size: 9px; }
.scenario-form-fields label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; }

.scenario-modules-workspace { min-height: calc(100vh - 184px); padding: 24px; overflow: auto; }
.scenario-modules-workspace > header { max-width: 1120px; margin: 0 auto 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.scenario-modules-workspace h2 { margin: 5px 0 7px; font-size: 27px; }
.scenario-modules-workspace > header p { max-width: 720px; margin: 0; color: var(--muted); }
.scenario-enabled-count { min-width: 100px; padding: 12px; border: 1px solid var(--accent-border); border-radius: 15px; display: grid; justify-items: center; color: var(--accent-ink); background: var(--accent-soft); }
.scenario-enabled-count b { font-size: 24px; }
.scenario-enabled-count small { font-size: 8px; }
.scenario-module-groups { max-width: 1120px; margin: auto; display: grid; gap: 22px; }
.scenario-module-groups section > h3 { margin: 0 0 10px; font-size: 14px; }
.scenario-module-groups section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scenario-module-groups article { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 16px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; background: var(--panel); }
.scenario-module-groups article.enabled { border-color: var(--accent-border); background: color-mix(in srgb, var(--accent-soft) 45%, var(--panel)); }
.scenario-module-groups article > span { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); }
.scenario-module-groups article > div { min-width: 0; }
.scenario-module-groups h4 { margin: 0 0 4px; font-size: 12px; }
.scenario-module-groups p { margin: 0 0 5px; color: var(--muted); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.scenario-module-groups small { color: var(--muted); font-size: 8px; }
.scenario-advanced-settings { max-width: 1120px; margin: 24px auto 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.scenario-advanced-settings summary { padding: 13px; color: var(--muted); font-size: 9px; font-weight: 850; cursor: pointer; }
.scenario-advanced-settings > div { padding: 0 13px 13px; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.scenario-advanced-settings p { flex: 1 1 440px; margin: 0; color: var(--muted); font-size: 9px; }

.scenario-studio-shell.preview .scenario-element-panel,
.scenario-studio-shell.preview .scenario-screen-rail,
.scenario-studio-shell.preview .scenario-zone > header button,
.scenario-studio-shell.preview .scenario-element-head button,
.scenario-studio-shell.preview .scenario-zone-empty { display: none; }
.scenario-studio-shell.preview .scenario-screens-workspace { grid-template-columns: minmax(0, 1fr); }
.scenario-studio-shell.preview .scenario-screen-stage { padding: 26px max(24px, 7vw); }
.scenario-studio-shell.device-phone .scenario-canvas,
.scenario-canvas.preview-phone { max-width: 420px; margin: auto; grid-template-columns: 1fr; }
.scenario-studio-shell.device-phone .scenario-zone,
.scenario-canvas.preview-phone .scenario-zone { grid-column: 1 / -1 !important; }
.scenario-studio-shell.device-terminal .scenario-element,
.scenario-canvas.preview-terminal .scenario-element { min-height: 92px; }

@media (max-width: 1380px) {
  .scenario-studio-toolbar { grid-template-columns: minmax(220px, .7fr) minmax(380px, 1.3fr) minmax(310px, 1fr); }
  .scenario-screens-workspace { grid-template-columns: 230px minmax(480px, 1fr) 280px; }
  .scenario-section-workspace { grid-template-columns: 240px minmax(480px, 1fr) 270px; }
  .scenario-start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .scenario-studio-toolbar { grid-template-columns: 1fr auto; }
  .scenario-main-tabs { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; }
  .scenario-toolbar-actions { grid-column: 2; grid-row: 1; }
  .scenario-screens-workspace { grid-template-columns: 220px minmax(0, 1fr); }
  .scenario-element-panel { position: fixed; z-index: 120; top: 120px; right: 12px; bottom: 12px; width: min(340px, calc(100vw - 24px)); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: auto; }
  .scenario-section-workspace { grid-template-columns: 230px minmax(0, 1fr); }
  .scenario-path-panel,
  .scenario-form-editor { display: none; }
}
@media (max-width: 760px) {
  .scenario-studio-shell { border-radius: 0; border-inline: 0; }
  .scenario-studio-toolbar { min-height: 0; padding: 8px; display: flex; flex-wrap: wrap; }
  .scenario-toolbar-context { flex: 1 1 210px; }
  .scenario-toolbar-actions { flex: 1 1 100%; overflow-x: auto; justify-content: flex-start; }
  .scenario-main-tabs { order: 3; width: 100%; padding-bottom: 2px; justify-content: flex-start; overflow-x: auto; }
  .scenario-main-tabs button { min-width: max-content; }
  .scenario-screens-workspace,
  .scenario-section-workspace { display: block; }
  .scenario-screen-rail,
  .scenario-list-panel { border: 0; border-bottom: 1px solid var(--border); }
  .scenario-screen-list { grid-auto-flow: column; grid-auto-columns: minmax(190px, 70vw); overflow-x: auto; }
  .scenario-add-screen,
  .scenario-screen-actions,
  .scenario-menu-summary { display: none; }
  .scenario-screen-stage { padding: 10px; }
  .scenario-screen-header { display: grid; }
  .scenario-screen-header > div:last-child { align-items: stretch; flex-wrap: wrap; }
  .scenario-canvas { grid-template-columns: 1fr; }
  .scenario-zone { grid-column: 1 / -1 !important; }
  .scenario-element-panel { top: auto; left: 8px; right: 8px; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; max-height: 72vh; }
  .scenario-interaction-editor,
  .scenario-data-editor { padding: 14px; }
  .scenario-action-flow article > div { grid-template-columns: 1fr; }
  .scenario-fields-table { min-width: 560px; }
  .scenario-module-groups section > div { grid-template-columns: 1fr; }
  .scenario-module-groups article { grid-template-columns: 38px minmax(0, 1fr); }
  .scenario-module-groups article > button { grid-column: 1 / -1; }
  .scenario-start-grid { grid-template-columns: 1fr; }
  .scenario-ai-start { grid-template-columns: 1fr; }
}

/* WorkBlock Studio 4.0 — application map, diagnostics and live data */
.studio-map-workspace{display:grid;grid-template-columns:260px minmax(0,1fr) 300px;min-height:calc(100vh - 74px);background:var(--bg)}
.studio-map-sidebar,.studio-map-inspector{padding:18px;border-right:1px solid var(--line);background:var(--surface);overflow:auto}
.studio-map-inspector{border-right:0;border-left:1px solid var(--line)}
.studio-map-sidebar>p,.studio-map-inspector>p{font-size:13px;line-height:1.5;color:var(--muted);margin:4px 0 16px}
.studio-map-sidebar>button:not(.btn){width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid transparent;border-radius:12px;padding:10px;background:transparent;margin-bottom:5px;color:var(--text)}
.studio-map-sidebar>button:not(.btn):hover,.studio-map-sidebar>button.active{background:var(--soft);border-color:var(--line)}
.studio-map-sidebar>button>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2)}
.studio-map-sidebar>button>div{min-width:0;display:grid;gap:2px;flex:1}.studio-map-sidebar>button b{font-size:13px}.studio-map-sidebar>button small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.studio-map-sidebar>button i{font-style:normal;font-size:10px;color:var(--accent);font-weight:700}
.studio-map-stage{min-width:0;padding:20px;overflow:auto;background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--line) 72%,transparent) 1px,transparent 0);background-size:24px 24px}
.studio-map-stage>header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:0 4px 16px}.studio-map-stage h2{margin:4px 0}.studio-map-stage p{margin:0;color:var(--muted)}
.studio-map-legend{display:flex;gap:14px;align-items:center;font-size:11px;color:var(--muted)}.studio-map-legend span{display:flex;align-items:center;gap:6px}.studio-map-legend i{width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--line)}.studio-map-legend i.start{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface))}.studio-map-legend i.broken{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 16%,var(--surface))}
.studio-map-canvas{position:relative;min-width:1010px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.studio-map-links{position:absolute;inset:0;pointer-events:none;overflow:visible}.studio-map-links line{stroke:color-mix(in srgb,var(--accent) 55%,var(--line));stroke-width:2}.studio-map-links circle{fill:var(--accent)}.studio-map-links g.broken line{stroke:var(--danger);stroke-dasharray:7 6}.studio-map-links g.broken circle{fill:var(--danger)}
.studio-map-node{position:absolute;width:240px;min-height:110px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 12px 35px rgba(0,0,0,.11);cursor:pointer;transition:.18s transform,.18s border-color,.18s box-shadow;overflow:hidden}.studio-map-node:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 48%,var(--line));box-shadow:0 17px 42px rgba(0,0,0,.15)}.studio-map-node.selected{outline:2px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:2px}.studio-map-node.start{border-color:color-mix(in srgb,var(--accent) 70%,var(--line))}
.studio-map-node>header{display:flex;align-items:center;gap:10px;padding:14px}.studio-map-node>header>span{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--accent) 12%,var(--surface-2));color:var(--accent)}.studio-map-node>header>div{min-width:0;display:grid;gap:2px;flex:1}.studio-map-node>header b{font-size:14px}.studio-map-node>header small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}.studio-map-node>header i{font-style:normal;font-size:10px;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);padding:4px 7px;border-radius:99px;font-weight:800}
.studio-map-node>footer{display:flex;align-items:center;gap:9px;padding:9px 12px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.studio-map-node>footer button{margin-left:auto;border:0;background:none;color:var(--accent);font-weight:700;cursor:pointer}
.studio-map-broken{position:relative;margin:10px;display:none}
.studio-health-score{display:grid;gap:4px;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--danger) 10%,var(--surface-2));border:1px solid color-mix(in srgb,var(--danger) 35%,var(--line));margin:8px 0 14px}.studio-health-score.ok{background:color-mix(in srgb,var(--success) 10%,var(--surface-2));border-color:color-mix(in srgb,var(--success) 35%,var(--line))}.studio-health-score strong{font-size:16px}.studio-health-score small{color:var(--muted)}
.studio-diagnostic-list{display:grid;gap:8px}.studio-diagnostic-list article{display:flex;gap:9px;padding:10px;border-radius:11px;background:color-mix(in srgb,var(--danger) 8%,var(--surface-2));border:1px solid color-mix(in srgb,var(--danger) 25%,var(--line))}.studio-diagnostic-list article.warning{background:color-mix(in srgb,var(--warning) 8%,var(--surface-2));border-color:color-mix(in srgb,var(--warning) 25%,var(--line))}.studio-diagnostic-list article>span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--danger);color:white;font-size:11px;font-weight:800}.studio-diagnostic-list article.warning>span{background:var(--warning)}.studio-diagnostic-list article div{display:grid;gap:3px}.studio-diagnostic-list article b{font-size:12px;line-height:1.35}.studio-diagnostic-list article small{font-size:9px;color:var(--muted)}
.studio-diagnostic-button.hasErrors{border-color:color-mix(in srgb,var(--danger) 55%,var(--line));color:var(--danger)}
.studio-diagnostics-drawer{position:fixed;z-index:220;right:16px;top:82px;bottom:16px;width:min(440px,calc(100vw - 32px));display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 25px 80px rgba(0,0,0,.32);overflow:hidden}.studio-diagnostics-drawer>header{display:flex;justify-content:space-between;align-items:flex-start;padding:18px;border-bottom:1px solid var(--line)}.studio-diagnostics-drawer h2{margin:4px 0 0}.studio-diagnostics-body{padding:16px;overflow:auto;flex:1}.studio-diagnostics-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}.studio-diagnostics-summary span{display:grid;gap:2px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}.studio-diagnostics-summary b{font-size:20px}.studio-diagnostics-summary small{color:var(--muted)}.studio-diagnostics-body section{display:grid;gap:8px;margin-top:18px}.studio-diagnostics-body section h3{margin:0 0 4px}.studio-diagnostics-body article{display:flex;gap:10px;padding:11px;border:1px solid color-mix(in srgb,var(--danger) 30%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--danger) 7%,var(--surface))}.studio-diagnostics-body article.warning{border-color:color-mix(in srgb,var(--warning) 30%,var(--line));background:color-mix(in srgb,var(--warning) 7%,var(--surface))}.studio-diagnostics-body article i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--danger);color:#fff;font-weight:800}.studio-diagnostics-body article.warning i{background:var(--warning)}.studio-diagnostics-body article div{display:grid;gap:3px}.studio-diagnostics-body article b{font-size:13px;line-height:1.4}.studio-diagnostics-body article small{font-size:10px;color:var(--muted)}.studio-diagnostics-ok{text-align:center;display:grid;justify-items:center;gap:7px;padding:36px;color:var(--success)}.studio-diagnostics-ok p{margin:0;color:var(--muted)}.studio-diagnostics-drawer>footer{padding:14px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.studio-execution-result{border:1px solid color-mix(in srgb,var(--success) 35%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--success) 6%,var(--surface));padding:11px;margin-bottom:14px}.studio-execution-result>header{display:flex;justify-content:space-between;margin-bottom:8px}.studio-execution-result>header span{font-size:10px;color:var(--muted)}.studio-execution-result>div{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line)}.studio-execution-result>div i{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;font-style:normal;background:var(--success);color:#fff;font-size:10px}.studio-execution-result>div.failed i{background:var(--danger)}.studio-execution-result>div span{display:grid}.studio-execution-result>div b{font-size:11px}.studio-execution-result>div small{font-size:9px;color:var(--muted)}
.studio-records-section{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.studio-records-section>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.studio-records-section h3{margin:3px 0}.studio-records-section p{margin:0;color:var(--muted)}.studio-records-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(280px,1.2fr);gap:14px;margin-top:14px}.studio-record-list,.studio-record-editor{border:1px solid var(--line);border-radius:14px;background:var(--surface-2);padding:8px;max-height:430px;overflow:auto}.studio-record-list>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text);text-align:left;margin-bottom:4px}.studio-record-list>button:hover,.studio-record-list>button.active{background:var(--surface);border-color:var(--line)}.studio-record-list>button span{display:grid;gap:3px;min-width:0}.studio-record-list>button b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.studio-record-list>button small,.studio-record-list>button i{font-size:9px;color:var(--muted);font-style:normal}.studio-record-editor{display:grid;gap:10px;padding:14px}.studio-record-editor label{display:grid;gap:6px;font-size:11px;font-weight:700}.studio-record-editor input:not([type=checkbox]),.studio-record-editor textarea,.studio-record-editor select{width:100%;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);padding:9px}.studio-record-editor textarea{min-height:82px;resize:vertical}
@media(max-width:1200px){.studio-map-workspace{grid-template-columns:230px minmax(0,1fr)}.studio-map-inspector{display:none}.studio-records-layout{grid-template-columns:1fr}}
@media(max-width:820px){.studio-map-workspace{display:block}.studio-map-sidebar{border-right:0;border-bottom:1px solid var(--line);max-height:220px}.studio-map-stage{padding:12px}.studio-map-canvas{min-width:760px}.studio-map-node{width:210px}.studio-map-links{display:none}.studio-diagnostics-drawer{right:8px;top:70px;bottom:8px;width:calc(100vw - 16px)}.studio-records-layout{grid-template-columns:1fr}.scenario-main-tabs button span{display:none}}

/* WorkBlock 4.1 — workspace and application catalog */
.application-hub-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:28px;align-items:stretch;padding:30px;border:1px solid var(--border);border-radius:var(--radius-xl);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 11%,var(--panel)) 0%,var(--panel) 48%,color-mix(in srgb,var(--blue) 7%,var(--panel)) 100%);overflow:hidden;margin-bottom:28px}
.application-hub-hero:after{content:"";position:absolute;width:330px;height:330px;border-radius:50%;right:-120px;top:-160px;background:color-mix(in srgb,var(--accent) 14%,transparent);filter:blur(8px);pointer-events:none}
.application-hub-copy{position:relative;z-index:1;display:grid;align-content:center;justify-items:start}.application-hub-copy h1{max-width:760px;margin:9px 0 12px;font-size:clamp(31px,4vw,52px);line-height:1.02;letter-spacing:-.035em}.application-hub-copy>p{max-width:780px;margin:0;color:var(--text-soft);font-size:15px;line-height:1.65}.application-hub-copy>p b{color:var(--text)}.application-hub-copy .hero-actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.application-hub-summary{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.application-hub-summary article{display:flex;gap:13px;align-items:center;min-height:104px;padding:17px;border:1px solid var(--border);border-radius:var(--radius-md);background:color-mix(in srgb,var(--panel-solid) 82%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}.application-hub-summary article>span{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:var(--accent-soft);color:var(--accent)}.application-hub-summary article>div{display:grid;gap:2px}.application-hub-summary b{font-size:27px;line-height:1}.application-hub-summary small{font-size:11px;color:var(--muted)}
.application-preset-library,.workspace-template-section,.workspace-company-section,.application-company-section{margin-top:30px}.application-preset-library{padding:24px;border:1px solid var(--border);border-radius:var(--radius-xl);background:color-mix(in srgb,var(--panel) 93%,transparent)}
.application-featured-toggle{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid var(--border);border-radius:99px;background:var(--surface-soft);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}.application-featured-toggle input{accent-color:var(--accent)}
.application-preset-toolbar{display:grid;gap:13px;margin:20px 0 12px}.application-search{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px solid var(--border);border-radius:15px;background:var(--input-bg);transition:.18s border-color,.18s box-shadow}.application-search:focus-within{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-soft)}.application-search>svg,.application-search>wb-icon{color:var(--muted)}.application-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font:inherit}.application-search button{border:0;background:transparent;color:var(--muted);font-size:22px;cursor:pointer}
.application-format-tabs,.application-category-chips{display:flex;gap:8px;overflow-x:auto;padding:1px 1px 6px;scrollbar-width:thin}.application-format-tabs button,.application-category-chips button{display:flex;align-items:center;gap:7px;flex:0 0 auto;border:1px solid var(--border);background:var(--surface-soft);color:var(--text-soft);border-radius:12px;padding:9px 11px;font:inherit;font-size:11px;font-weight:750;cursor:pointer;transition:.16s transform,.16s border-color,.16s background}.application-format-tabs button:hover,.application-category-chips button:hover{transform:translateY(-1px);border-color:var(--border-strong)}.application-format-tabs button.active,.application-category-chips button.active{border-color:var(--accent-border);background:var(--accent-soft);color:var(--text)}.application-format-tabs small,.application-category-chips small{min-width:20px;padding:2px 5px;border-radius:99px;background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--muted);font-size:9px;text-align:center}.application-format-tabs button.active small,.application-category-chips button.active small{background:var(--accent-soft-strong);color:var(--accent2)}
.application-catalog-result-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 15px;color:var(--muted);font-size:11px}.application-catalog-result-head b{color:var(--text)}
.application-preset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.application-preset-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:17px;border:1px solid var(--border);border-radius:20px;background:var(--panel-solid);transition:.18s transform,.18s border-color,.18s box-shadow;overflow:hidden}.application-preset-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent2) 75%,var(--blue)));opacity:.22}.application-preset-card:hover{transform:translateY(-3px);border-color:var(--accent-border);box-shadow:0 18px 42px rgba(0,0,0,.17)}.application-preset-card.is-featured:before{opacity:1}.application-preset-head{display:flex;align-items:flex-start;gap:10px;min-height:45px}.application-preset-icon{width:43px;height:43px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;background:var(--accent-soft);color:var(--accent)}.application-preset-badges{display:flex;flex-wrap:wrap;gap:5px;min-width:0;padding-top:2px}.application-preset-badges span,.application-preset-badges em,.application-recommended{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border-radius:99px;font-size:9px;font-style:normal;font-weight:800}.application-preset-badges span{background:var(--surface-soft);color:var(--text-soft)}.application-preset-badges em{background:color-mix(in srgb,var(--blue) 11%,transparent);color:var(--info)}.application-recommended{margin-left:auto;background:var(--accent-soft);color:var(--accent2);white-space:nowrap}.application-preset-card h3{margin:15px 0 7px;font-size:18px;line-height:1.2}.application-preset-card>p{margin:0;color:var(--muted);font-size:12px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;min-height:74px}
.application-preset-composition{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0 10px}.application-preset-composition>span{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:5px;padding:8px;border-radius:11px;background:var(--surface-soft);color:var(--muted)}.application-preset-composition b{color:var(--text);font-size:13px}.application-preset-composition small{grid-column:1/-1;margin-top:3px;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.application-preset-features{display:flex;flex-wrap:wrap;gap:5px;min-height:25px;margin-bottom:14px}.application-preset-features span{padding:4px 7px;border:1px solid var(--border);border-radius:8px;color:var(--text-soft);font-size:9px}.application-preset-card>.btn{margin-top:auto}
.application-catalog-empty,.application-company-empty{grid-column:1/-1;display:grid;justify-items:center;text-align:center;gap:8px;padding:42px;border:1px dashed var(--border-strong);border-radius:20px;background:var(--surface-soft);cursor:pointer}.application-catalog-empty>span,.application-company-empty>span{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:var(--accent-soft);color:var(--accent)}.application-catalog-empty h3,.application-company-empty h3{margin:4px 0 0}.application-catalog-empty p,.application-company-empty p{max-width:520px;margin:0 0 8px;color:var(--muted)}.application-library-footer{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:18px}.application-library-footer small{color:var(--muted)}
.application-company-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.application-company-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:18px;border:1px solid var(--border);border-radius:20px;background:var(--panel);overflow:hidden}.application-company-accent{position:absolute;inset:0 0 auto;height:4px}.application-company-head{display:flex;align-items:center;gap:11px}.application-company-head>span{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;background:var(--surface-soft);color:var(--accent)}.application-company-head>div{min-width:0;flex:1}.application-company-head small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em}.application-company-head h3{margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.application-company-head>.status-pill{font-style:normal;white-space:nowrap}.application-company-card>p{min-height:43px;color:var(--muted);font-size:12px;line-height:1.5}.application-company-meta{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 15px}.application-company-meta span{display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:9px;background:var(--surface-soft);color:var(--text-soft);font-size:9px}.application-company-card .profile-actions{margin-top:auto}
@media(max-width:1380px){.application-preset-grid,.application-company-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.application-hub-hero{grid-template-columns:1fr}.application-hub-summary{grid-template-columns:repeat(4,minmax(0,1fr))}.application-hub-summary article{display:grid;justify-items:center;text-align:center;min-height:112px}.application-hub-summary article>span{width:38px;height:38px}.application-preset-library{padding:18px}}
@media(max-width:720px){.application-hub-hero{padding:21px;border-radius:22px}.application-hub-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.application-hub-summary article{display:flex;justify-items:initial;text-align:left;min-height:88px}.application-preset-library{margin-left:-6px;margin-right:-6px;padding:14px;border-radius:20px}.application-preset-library .section-head.spaced{align-items:flex-start}.application-featured-toggle{margin-top:8px}.application-preset-grid,.application-company-grid{grid-template-columns:1fr}.application-preset-card>p{min-height:auto}.application-format-tabs button,.application-category-chips button{padding:8px 10px}.application-company-card .profile-actions{display:grid;grid-template-columns:1fr 1fr}.application-company-card .profile-actions .btn{justify-content:center}}
.application-preset-details{margin:0 0 14px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft);overflow:hidden}.application-preset-details summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;color:var(--text-soft);font-size:10px;font-weight:800;cursor:pointer;list-style:none}.application-preset-details summary::-webkit-details-marker{display:none}.application-preset-details summary wb-icon{transition:.15s transform}.application-preset-details[open] summary wb-icon{transform:rotate(180deg)}.application-preset-details>div{display:flex;flex-wrap:wrap;gap:5px;padding:0 10px 9px}.application-preset-details>div+div{padding-top:1px}.application-preset-details>div b{width:100%;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.application-preset-details>div span{padding:3px 6px;border-radius:7px;background:var(--panel);color:var(--text-soft);font-size:8px}

/* WorkBlock 4.2 — compact workspaces and applications hub */
.workspace-hub-page{display:grid;gap:18px;max-width:1500px;margin:0 auto}.workspace-hub-header{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:4px 2px 10px}.workspace-hub-header h1{margin:7px 0 7px;font-size:clamp(28px,3vw,42px);letter-spacing:-.035em}.workspace-hub-header p{max-width:720px;margin:0;color:var(--muted);line-height:1.55}.workspace-hub-create{position:relative;flex:0 0 auto}.workspace-hub-create>.btn{min-width:130px;justify-content:center}.workspace-create-popover{position:absolute;z-index:70;right:0;top:calc(100% + 9px);width:min(390px,calc(100vw - 34px));padding:8px;border:1px solid var(--border);border-radius:16px;background:var(--panel-solid);box-shadow:0 24px 70px rgba(0,0,0,.32)}.workspace-create-popover>button{width:100%;display:flex;align-items:center;gap:11px;padding:12px;border:0;border-radius:12px;background:transparent;color:var(--text);text-align:left;cursor:pointer}.workspace-create-popover>button:hover{background:var(--surface-soft)}.workspace-create-popover>button>span{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:var(--accent-soft);color:var(--accent)}.workspace-create-popover>button>div{display:grid;gap:3px;min-width:0;flex:1}.workspace-create-popover b{font-size:13px}.workspace-create-popover small{color:var(--muted);font-size:10px;line-height:1.4}.workspace-hub-tabs{display:flex;gap:6px;padding:5px;border:1px solid var(--border);border-radius:15px;background:var(--surface-soft);width:max-content}.workspace-hub-tabs button{display:flex;align-items:center;gap:8px;padding:10px 14px;border:0;border-radius:11px;background:transparent;color:var(--text-soft);font:inherit;font-weight:750;cursor:pointer}.workspace-hub-tabs button.active{background:var(--panel);color:var(--text);box-shadow:var(--shadow-xs)}.workspace-hub-tabs em{min-width:22px;padding:2px 6px;border-radius:99px;background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--muted);font-size:9px;font-style:normal;text-align:center}.workspace-hub-tabs button.active em{background:var(--accent-soft);color:var(--accent2)}
.workspace-hub-toolbar{display:flex;align-items:center;gap:10px;min-width:0;padding:13px;border:1px solid var(--border);border-radius:17px;background:var(--panel)}.workspace-hub-search{display:flex;align-items:center;gap:8px;min-width:220px;max-width:420px;flex:1;padding:0 11px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft);color:var(--muted)}.workspace-hub-search input{min-width:0;flex:1;padding:10px 0;border:0;outline:0;background:transparent;color:var(--text);font:inherit}.workspace-hub-search button{border:0;background:none;color:var(--muted);cursor:pointer}.workspace-status-filter{display:flex;gap:4px;padding:3px;border-radius:11px;background:var(--surface-soft)}.workspace-status-filter button{display:flex;align-items:center;gap:6px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--text-soft);font:inherit;font-size:10px;font-weight:750;cursor:pointer}.workspace-status-filter button.active{background:var(--panel);color:var(--text);box-shadow:var(--shadow-xs)}.workspace-status-filter small{color:var(--muted)}.workspace-view-switch{display:flex;gap:3px;padding:3px;border-radius:10px;background:var(--surface-soft)}.workspace-view-switch button{width:35px;height:35px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.workspace-view-switch button.active{background:var(--panel);color:var(--accent);box-shadow:var(--shadow-xs)}
.workspace-hub-content{padding:20px;border:1px solid var(--border);border-radius:22px;background:var(--panel)}.workspace-hub-content-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}.workspace-hub-content-head h2{margin:4px 0 0}.workspace-entity-list{display:grid;gap:8px}.workspace-entity-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;padding:13px 14px;border:1px solid var(--border);border-radius:15px;background:var(--panel-solid);transition:.15s border-color,.15s transform,.15s background}.workspace-entity-row:hover{border-color:var(--border-strong);background:color-mix(in srgb,var(--panel-solid) 94%,var(--accent) 6%)}.workspace-entity-row.current{border-color:var(--accent-border)}.workspace-entity-icon{--entity-accent:var(--accent);width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--entity-accent) 13%,var(--surface-soft));color:var(--entity-accent)}.workspace-entity-main{min-width:0}.workspace-entity-title{display:flex;align-items:center;gap:9px}.workspace-entity-title h3{margin:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-entity-title>em:not(.status-pill){padding:3px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent2);font-size:8px;font-style:normal;font-weight:800}.workspace-entity-title>em.current{background:color-mix(in srgb,var(--info) 12%,transparent);color:var(--info)}.workspace-entity-main>p{margin:4px 0 6px;color:var(--muted);font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-entity-meta{display:flex;flex-wrap:wrap;gap:6px;color:var(--text-soft);font-size:9px}.workspace-entity-meta span+span:before{content:'·';margin-right:6px;color:var(--muted)}.workspace-entity-actions{display:flex;align-items:center;gap:7px}.workspace-entity-actions>.btn{min-width:118px;justify-content:center}.workspace-action-menu-wrap{position:relative}.workspace-action-menu{position:absolute;z-index:55;right:0;top:calc(100% + 6px);width:210px;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--panel-solid);box-shadow:0 18px 55px rgba(0,0,0,.3)}.workspace-action-menu button{width:100%;display:flex;align-items:center;gap:9px;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--text);font:inherit;font-size:10px;text-align:left;cursor:pointer}.workspace-action-menu button:hover{background:var(--surface-soft)}.workspace-entity-list.card-view{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.workspace-entity-list.card-view .workspace-entity-row{display:flex;align-items:flex-start;flex-wrap:wrap;min-height:190px;padding:17px}.workspace-entity-list.card-view .workspace-entity-main{flex:1 1 calc(100% - 60px)}.workspace-entity-list.card-view .workspace-entity-main>p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.workspace-entity-list.card-view .workspace-entity-actions{width:100%;margin-top:auto}.workspace-entity-list.card-view .workspace-entity-actions>.btn{flex:1}.workspace-hub-empty{display:grid;justify-items:center;text-align:center;gap:9px;padding:58px 20px;border:1px dashed var(--border-strong);border-radius:17px;background:var(--surface-soft)}.workspace-hub-empty>span{width:62px;height:62px;display:grid;place-items:center;border-radius:18px;background:var(--accent-soft);color:var(--accent)}.workspace-hub-empty h3{margin:3px 0 0}.workspace-hub-empty p{max-width:520px;margin:0 0 7px;color:var(--muted)}.workspace-hub-empty>div{display:flex;gap:8px}
.workspace-catalog-overlay{position:fixed;z-index:260;inset:0;padding:18px;background:rgba(5,8,14,.72);backdrop-filter:blur(8px);display:grid;place-items:center}.workspace-catalog-dialog{width:min(1240px,100%);height:min(820px,100%);display:flex;flex-direction:column;border:1px solid var(--border-strong);border-radius:22px;background:var(--panel-solid);box-shadow:0 35px 120px rgba(0,0,0,.55);overflow:hidden}.workspace-catalog-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px;border-bottom:1px solid var(--border)}.workspace-catalog-dialog>header h2{margin:4px 0}.workspace-catalog-dialog>header p{margin:0;color:var(--muted)}.workspace-catalog-toolbar{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-soft)}.workspace-catalog-toolbar>label{display:flex;align-items:center;gap:8px;min-width:260px;flex:1;padding:0 11px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--muted)}.workspace-catalog-toolbar input{min-width:0;flex:1;padding:9px 0;border:0;outline:0;background:none;color:var(--text)}.workspace-catalog-toolbar label button{border:0;background:none;color:var(--muted);cursor:pointer}.workspace-catalog-toolbar select{max-width:230px;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text)}.workspace-catalog-layout{display:grid;grid-template-columns:210px minmax(330px,1fr) 340px;min-height:0;flex:1}.workspace-catalog-categories{padding:10px;border-right:1px solid var(--border);overflow:auto}.workspace-catalog-categories button{width:100%;display:flex;align-items:center;gap:8px;padding:9px;border:0;border-radius:9px;background:none;color:var(--text-soft);font:inherit;font-size:10px;text-align:left;cursor:pointer}.workspace-catalog-categories button:hover,.workspace-catalog-categories button.active{background:var(--accent-soft);color:var(--text)}.workspace-catalog-categories span{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-catalog-categories small{color:var(--muted)}.workspace-catalog-results{padding:12px;overflow:auto;background:color-mix(in srgb,var(--surface-soft) 55%,transparent)}.workspace-catalog-result-label{display:flex;justify-content:space-between;padding:2px 4px 10px;color:var(--muted);font-size:10px}.workspace-preset-option,.workspace-template-option,.workspace-empty-template{width:100%;display:flex;align-items:flex-start;gap:10px;padding:12px;margin-bottom:7px;border:1px solid var(--border);border-radius:13px;background:var(--panel);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:.15s border-color,.15s background}.workspace-preset-option:hover,.workspace-preset-option.active,.workspace-template-option:hover,.workspace-template-option.active{border-color:var(--accent-border);background:color-mix(in srgb,var(--panel) 94%,var(--accent) 6%)}.workspace-preset-option>span,.workspace-template-option>span,.workspace-empty-template>span{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:var(--accent-soft);color:var(--accent)}.workspace-preset-option>div,.workspace-template-option>div,.workspace-empty-template>div{display:grid;gap:3px;min-width:0;flex:1}.workspace-preset-option small,.workspace-template-option small{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.workspace-preset-option b,.workspace-template-option b,.workspace-empty-template b{font-size:12px}.workspace-preset-option p,.workspace-template-option p{margin:1px 0;color:var(--muted);font-size:9px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.workspace-preset-option em,.workspace-template-option em{color:var(--text-soft);font-size:8px;font-style:normal}.workspace-preset-option>wb-icon,.workspace-template-option>wb-icon{align-self:center;color:var(--muted)}.workspace-catalog-no-result{display:grid;justify-items:center;gap:9px;padding:40px;color:var(--muted)}.workspace-catalog-preview{display:flex;flex-direction:column;min-height:0;padding:20px;border-left:1px solid var(--border);overflow:auto}.workspace-catalog-preview-icon{width:52px;height:52px;display:grid;place-items:center;margin-bottom:14px;border-radius:15px;background:var(--accent-soft);color:var(--accent)}.workspace-catalog-preview>h2{margin:5px 0 8px}.workspace-catalog-preview>p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}.workspace-catalog-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:15px 0}.workspace-catalog-metrics>span{display:grid;gap:2px;padding:10px;border-radius:11px;background:var(--surface-soft)}.workspace-catalog-metrics b{font-size:17px}.workspace-catalog-metrics small{color:var(--muted);font-size:8px}.workspace-catalog-preview>section{display:grid;gap:11px;margin-bottom:17px}.workspace-catalog-preview>section h3{margin:0;font-size:12px}.workspace-catalog-preview>section>div{display:flex;flex-wrap:wrap;gap:5px}.workspace-catalog-preview>section>div>b{width:100%;font-size:8px;color:var(--muted);text-transform:uppercase}.workspace-catalog-preview>section span{padding:4px 6px;border:1px solid var(--border);border-radius:7px;color:var(--text-soft);font-size:8px}.workspace-catalog-preview>.btn{margin-top:auto}.workspace-catalog-preview>.btn+.btn{margin-top:7px}.workspace-template-catalog-layout{display:grid;grid-template-columns:minmax(420px,1fr) 380px;min-height:0;flex:1}.workspace-template-catalog-layout>main{padding:16px;overflow:auto;background:var(--surface-soft)}.workspace-template-catalog-layout>aside{display:flex;flex-direction:column;padding:22px;border-left:1px solid var(--border);overflow:auto}.workspace-template-catalog-layout>aside h2{margin:5px 0}.workspace-template-catalog-layout>aside p{color:var(--muted);line-height:1.55}.workspace-empty-template{align-items:center;border-style:dashed}.template-layout-preview.large{min-height:145px;margin:16px 0}.workspace-template-catalog-layout>aside>.btn{margin-top:auto}.workspace-template-catalog-layout>aside>.btn+.btn{margin-top:7px}
@media(max-width:1180px){.workspace-entity-list.card-view{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-catalog-layout{grid-template-columns:190px minmax(300px,1fr) 310px}.workspace-template-catalog-layout{grid-template-columns:1fr 330px}}
@media(max-width:900px){.workspace-hub-toolbar{flex-wrap:wrap}.workspace-hub-search{max-width:none;flex-basis:100%}.workspace-status-filter{min-width:0;flex:1;overflow:auto}.workspace-catalog-overlay{padding:0}.workspace-catalog-dialog{height:100%;border-radius:0}.workspace-catalog-layout{grid-template-columns:170px minmax(280px,1fr)}.workspace-catalog-preview{display:none}.workspace-template-catalog-layout{grid-template-columns:1fr}.workspace-template-catalog-layout>aside{display:none}}
@media(max-width:700px){.workspace-hub-header{align-items:center}.workspace-hub-header p{display:none}.workspace-hub-header h1{font-size:26px}.workspace-hub-create>.btn{min-width:auto}.workspace-hub-create>.btn span{display:none}.workspace-hub-tabs{width:100%}.workspace-hub-tabs button{flex:1;justify-content:center}.workspace-hub-content{padding:13px;border-radius:18px}.workspace-hub-content-head{align-items:flex-start}.workspace-hub-content-head h2{font-size:19px}.workspace-entity-list.card-view{grid-template-columns:1fr}.workspace-entity-row,.workspace-entity-list.card-view .workspace-entity-row{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:0;padding:13px}.workspace-entity-actions,.workspace-entity-list.card-view .workspace-entity-actions{grid-column:1/-1;width:100%}.workspace-entity-actions>.btn{flex:1}.workspace-entity-main>p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.workspace-status-filter button{white-space:nowrap}.workspace-view-switch{display:none}.workspace-hub-empty{padding:40px 13px}.workspace-hub-empty>div{display:grid;width:100%}.workspace-catalog-dialog>header{padding:15px}.workspace-catalog-dialog>header p{display:none}.workspace-catalog-toolbar{flex-wrap:wrap}.workspace-catalog-toolbar>label{min-width:0;flex-basis:100%}.workspace-catalog-toolbar select{max-width:none;flex:1}.workspace-catalog-layout{display:block}.workspace-catalog-categories{display:flex;gap:4px;padding:8px;border-right:0;border-bottom:1px solid var(--border);overflow-x:auto}.workspace-catalog-categories button{width:auto;flex:0 0 auto;white-space:nowrap}.workspace-catalog-categories button small{display:none}.workspace-catalog-results{height:calc(100vh - 192px)}.workspace-template-catalog-layout>main{height:calc(100vh - 110px)}.workspace-create-popover{position:fixed;left:16px;right:16px;top:auto;bottom:calc(16px + env(safe-area-inset-bottom));width:auto}}

/* WorkBlock 4.3 — applications-only product model */
[hidden]{display:none!important}
.application-hub-page{max-width:1440px;margin:0 auto}
.application-guide-strip{display:flex;align-items:flex-start;gap:13px;margin:0 0 16px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.application-guide-strip>span{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:var(--accent-soft);color:var(--accent)}
.application-guide-strip>div{display:grid;gap:3px}.application-guide-strip b{font-size:12px}.application-guide-strip p{margin:0;color:var(--muted);font-size:10px;line-height:1.5}
.workspace-empty-app-option{border-style:dashed;background:color-mix(in srgb,var(--accent) 4%,var(--panel))}
.application-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.application-settings-grid>section{display:grid;align-content:start;gap:9px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}
.application-settings-grid h3{margin:0;font-size:13px}.application-settings-grid p{margin:0;color:var(--muted);font-size:9px;line-height:1.5}
.application-settings-grid .role-choice-row{gap:5px}.application-settings-grid .role-choice{padding:6px 8px;font-size:9px}
.application-settings-grid select[multiple]{min-height:92px}
.advanced-settings{margin:12px 0;padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}
.advanced-settings summary{cursor:pointer;font-weight:750;font-size:11px;color:var(--text-soft)}
.advanced-settings[open] summary{margin-bottom:12px}
@media(max-width:980px){.application-settings-grid{grid-template-columns:1fr}.application-guide-strip{margin-bottom:12px}}
@media(max-width:700px){.application-guide-strip p{display:none}.application-guide-strip{align-items:center}.workspace-hub-header .workspace-hub-create .btn span{display:inline}.workspace-hub-header{gap:10px}.workspace-hub-header h1{font-size:28px}.workspace-hub-toolbar{position:static}}

/* ==========================================================
   WorkBlock 4.4 — readable Applications hub and Studio UX
   ========================================================== */
.workspace-hub-page,
.workspace-catalog-dialog { font-size: 15px; }
.workspace-hub-header { padding-block: 10px 16px; }
.workspace-hub-header h1 { font-size: clamp(34px, 3.2vw, 48px); line-height: 1.04; }
.workspace-hub-header p { font-size: 15px; line-height: 1.6; }
.workspace-hub-toolbar { padding: 15px; }
.workspace-hub-search input { font-size: 14px; }
.workspace-status-filter button { min-height: 38px; padding-inline: 13px; font-size: 12px; }
.workspace-hub-content { padding: 24px; }
.workspace-hub-content-head h2 { font-size: 24px; }
.workspace-entity-row { min-height: 92px; padding: 16px 17px; }
.workspace-entity-icon { width: 48px; height: 48px; }
.workspace-entity-title h3 { font-size: 17px; }
.workspace-entity-main > p { margin-block: 5px 8px; font-size: 13px; }
.workspace-entity-meta { gap: 7px; font-size: 11px; }
.workspace-action-menu button { min-height: 40px; font-size: 12px; }
.workspace-catalog-dialog > header h2 { font-size: 27px; }
.workspace-catalog-dialog > header p,
.workspace-catalog-preview > p { font-size: 13px; }
.workspace-catalog-toolbar input,
.workspace-catalog-toolbar select { font-size: 13px; }
.workspace-catalog-categories button { min-height: 39px; font-size: 12px; }
.workspace-catalog-result-label { font-size: 12px; }
.workspace-preset-option,
.workspace-empty-app-option { padding: 14px; }
.workspace-preset-option small { font-size: 10px; }
.workspace-preset-option b,
.workspace-empty-app-option b { font-size: 15px; }
.workspace-preset-option p { font-size: 12px; line-height: 1.5; }
.workspace-preset-option em { font-size: 10px; }
.workspace-catalog-preview > h2 { font-size: 25px; }
.workspace-catalog-metrics small,
.workspace-catalog-preview > section > div > b,
.workspace-catalog-preview > section span { font-size: 10px; }
.workspace-catalog-preview > section h3 { font-size: 15px; }

.scenario-studio-start,
.scenario-studio-shell { font-size: 14px; }
.scenario-studio-toolbar { min-height: 80px; padding: 11px 16px; grid-template-columns: minmax(230px,.75fr) minmax(440px,1.1fr) minmax(510px,1fr); }
.scenario-toolbar-context small { font-size: 11px; }
.scenario-toolbar-context .studio-title-input { height: 32px; font-size: 18px; }
.scenario-main-tabs { gap: 5px; padding: 5px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-soft); }
.scenario-main-tabs button { position: relative; min-height: 46px; padding: 9px 15px; border-radius: 11px; font-size: 12px; color: var(--text-soft); }
.scenario-main-tabs button:hover { background: color-mix(in srgb,var(--panel) 70%,transparent); }
.scenario-main-tabs button.active { color: var(--text); border-color: var(--accent-border); background: var(--panel); box-shadow: 0 4px 16px color-mix(in srgb,var(--accent) 12%,transparent), inset 0 -3px 0 var(--accent); }
.scenario-main-tabs button.active .wb-icon { color: var(--accent); }
.scenario-toolbar-actions { gap: 7px; }
.studio-device-switch { min-height: 42px; padding: 4px; border-radius: 13px; }
.studio-device-switch button { width: 36px; min-width: 36px; height: 34px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 9px; transition: width .16s ease, background .16s ease; }
.studio-device-switch button span { display: none; font-size: 11px; font-weight: 750; white-space: nowrap; }
.studio-device-switch button.active { width: auto; min-width: 104px; background: var(--panel); box-shadow: var(--shadow-xs); }
.studio-device-switch button.active span { display: inline; }
.studio-editor-mode { display: flex; gap: 3px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.studio-editor-mode button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 780; cursor: pointer; }
.studio-editor-mode button.active { color: var(--text); background: var(--panel); box-shadow: var(--shadow-xs); }
.studio-workflow-tabs { min-height: 52px; padding: 7px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 6px; background: color-mix(in srgb,var(--panel-solid) 96%,transparent); }
.studio-workflow-tabs button { min-height: 37px; padding: 0 15px; border: 1px solid transparent; border-radius: 10px; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }
.studio-workflow-tabs button.active { border-color: var(--accent-border); color: var(--accent-ink); background: var(--accent-soft); }
.scenario-panel-title { min-height: 68px; padding: 14px 16px; }
.scenario-panel-title small { font-size: 11px; line-height: 1.25; }
.scenario-panel-title b { font-size: 15px; }
.scenario-panel-title > span { min-width: 36px; height: 30px; font-size: 11px; }
.scenario-panel-title.map-title > span { min-width: auto; padding-inline: 10px; }
.scenario-screen-list small { font-size: 11px; }
.scenario-screen-list em,
.scenario-screen-list i { font-size: 10px; }
.scenario-add-screen summary { min-height: 43px; font-size: 12px; }
.scenario-add-screen button b { font-size: 12px; }
.scenario-add-screen button small { font-size: 10px; }
.scenario-screen-actions button,
.scenario-menu-summary header button,
.scenario-menu-summary label > input:last-child { font-size: 10px; }
.scenario-screen-header p { font-size: 12px; line-height: 1.5; }
.scenario-screen-header label { font-size: 10px; }
.scenario-element-head small,
.scenario-zone > header small,
.scenario-element-list small,
.scenario-inspector-form label,
.scenario-list-panel button small { font-size: 11px; }
.scenario-zone > header b,
.scenario-element-head b { font-size: 13px; }
.studio-related-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.studio-related-settings button { min-height: 38px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-soft); background: var(--surface-soft); font-size: 10px; font-weight: 750; cursor: pointer; }
.studio-related-settings button:hover { color: var(--accent-ink); border-color: var(--accent-border); background: var(--accent-soft); }

.studio-map-sidebar > p,
.studio-map-stage p { font-size: 13px; }
.studio-map-sidebar > button b { font-size: 14px; }
.studio-map-sidebar > button small { font-size: 12px; }
.studio-map-stage { cursor: default; user-select: none; }
.studio-map-stage.panning { cursor: grabbing; }
.studio-map-stage.panning * { cursor: grabbing !important; }
.studio-map-canvas { min-width: 1020px; }
.studio-map-node { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.studio-map-node.selected { transform: translateY(-2px); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent), var(--shadow-md); }

/* Device-like preview frames. The frame follows the selected preview target. */
.scenario-canvas { width: 100%; margin-inline: auto; transition: max-width .2s ease, border-radius .2s ease, border-width .2s ease, box-shadow .2s ease; }
.scenario-studio-shell.device-desktop .scenario-canvas { max-width: 1280px; border: 1px solid var(--border); box-shadow: 0 20px 55px color-mix(in srgb,#000 12%,transparent); }
.scenario-studio-shell.device-tablet .scenario-canvas { max-width: 860px; border: 12px solid color-mix(in srgb,var(--text) 86%,#000); border-radius: 28px; box-shadow: 0 26px 70px color-mix(in srgb,#000 28%,transparent); }
.scenario-studio-shell.device-phone .scenario-canvas { max-width: 430px; border: 14px solid color-mix(in srgb,var(--text) 88%,#000); border-block-width: 24px; border-radius: 38px; box-shadow: 0 28px 75px color-mix(in srgb,#000 34%,transparent); }
.scenario-studio-shell.device-terminal .scenario-canvas { max-width: 1120px; border: 16px solid color-mix(in srgb,var(--text) 82%,#000); border-bottom-width: 32px; border-radius: 24px 24px 30px 30px; box-shadow: 0 30px 80px color-mix(in srgb,#000 32%,transparent); }
.scenario-studio-shell.preview .scenario-screen-stage { display: grid; place-items: start center; }

@media (max-width: 1450px) {
  .scenario-studio-toolbar { grid-template-columns: minmax(220px,.7fr) minmax(390px,1fr); }
  .scenario-toolbar-actions { grid-column: 1 / -1; justify-content: center; padding-top: 4px; }
}
@media (max-width: 900px) {
  .scenario-main-tabs button { padding-inline: 12px; font-size: 11px; }
  .studio-editor-mode button { padding-inline: 8px; }
  .studio-device-switch button.active { min-width: 38px; }
  .studio-device-switch button.active span { display: none; }
  .studio-workflow-tabs { justify-content: flex-start; overflow-x: auto; }
  .scenario-studio-shell.device-tablet .scenario-canvas,
  .scenario-studio-shell.device-phone .scenario-canvas,
  .scenario-studio-shell.device-terminal .scenario-canvas { max-width: 100%; border-width: 6px; border-radius: 18px; }
}
@media (max-width: 700px) {
  .workspace-hub-header h1 { font-size: 31px; }
  .workspace-hub-content { padding: 15px; }
  .workspace-entity-title h3 { font-size: 16px; }
  .workspace-entity-main > p { font-size: 12px; }
  .scenario-panel-title small { font-size: 10px; }
  .scenario-panel-title b { font-size: 14px; }
}

/* WorkBlock 4.4 typography pass — align Studio with the rest of the product */
.scenario-main-tabs button { font-size: 13px; font-weight: 800; }
.studio-editor-mode button { font-size: 12px; }
.studio-workflow-tabs button { font-size: 13px; }
.scenario-panel-title small { font-size: 12px; }
.scenario-panel-title b { font-size: 16px; line-height: 1.25; }
.scenario-panel-title > span { font-size: 12px; }
.scenario-screen-list b { font-size: 14px; }
.scenario-screen-list small { font-size: 12px; }
.scenario-add-screen summary { font-size: 13px; }
.scenario-add-screen button b { font-size: 14px; }
.scenario-add-screen button small { font-size: 12px; line-height: 1.45; }
.scenario-screen-actions button,
.scenario-menu-summary header button,
.scenario-menu-summary label > input:last-child { font-size: 12px; }
.scenario-screen-header label,
.scenario-inspector-form label { font-size: 12px; }
.scenario-inspector-form input,
.scenario-inspector-form textarea,
.scenario-inspector-form select { font-size: 13px; }
.scenario-zone > header b,
.scenario-element-head b { font-size: 14px; }
.scenario-element-head small,
.scenario-zone > header small,
.scenario-element-list small,
.scenario-list-panel button small { font-size: 12px; }
.studio-related-settings button { font-size: 12px; }

/* ========================================================================== */
/* WorkBlock 5.0 — simple Application Builder                                 */
/* ========================================================================== */

.view-studio.content {
  padding: 0;
  overflow: hidden;
  min-height: calc(100vh - var(--topbar-height, 72px));
}

.builder-start-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 36px 64px;
}

.builder-start-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 28px;
}

.builder-start-header h1 {
  margin: 4px 0 8px;
  font-size: clamp(30px, 3vw, 44px);
  letter-spacing: -0.035em;
}

.builder-start-header p {
  margin: 0;
  max-width: 720px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

.builder-start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.builder-start-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  min-height: 190px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.builder-start-card > span,
.builder-ai-card > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.builder-start-card h2,
.builder-ai-card h2 {
  margin: 0 0 7px;
  font-size: 21px;
  letter-spacing: -0.02em;
}

.builder-start-card p,
.builder-ai-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.builder-start-card small {
  display: block;
  margin-top: 13px;
  color: var(--muted);
  font-size: 13px;
}

.builder-start-card .btn {
  grid-column: 1 / -1;
  align-self: end;
  justify-self: stretch;
}

.builder-ai-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
}

.builder-ai-card textarea {
  width: 100%;
  min-height: 78px;
  margin-top: 14px;
  resize: vertical;
}

.application-builder {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-height, 72px));
  min-height: 680px;
  background: var(--background);
}

.builder-toolbar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto minmax(360px, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(18px);
}

.builder-toolbar-title,
.builder-toolbar-actions,
.builder-device-switch {
  display: flex;
  align-items: center;
}

.builder-toolbar-title {
  min-width: 0;
  gap: 10px;
}

.builder-toolbar-title > div {
  min-width: 0;
}

.builder-toolbar-title small {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.builder-app-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
}

.builder-title-input {
  width: min(360px, 32vw);
  min-width: 160px;
  padding: 0;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.builder-toolbar-title em {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.builder-toolbar-title em.dirty {
  color: var(--warning, #b7791f);
  background: color-mix(in srgb, var(--warning, #b7791f) 13%, var(--surface));
}

.builder-device-switch {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
}

.builder-device-switch button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.builder-device-switch button:hover,
.builder-device-switch button.active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.builder-toolbar-actions {
  justify-content: flex-end;
  gap: 8px;
}

.builder-toolbar-actions .btn.active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.builder-layout {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr) 348px;
  min-height: 0;
  flex: 1;
}

.application-builder.preview .builder-layout {
  grid-template-columns: minmax(0, 1fr);
}

.builder-screen-sidebar,
.builder-inspector {
  min-width: 0;
  overflow: auto;
  background: var(--surface);
}

.builder-screen-sidebar {
  position: relative;
  border-right: 1px solid var(--border);
  padding: 18px 14px;
}

.builder-inspector {
  border-left: 1px solid var(--border);
  padding: 18px;
}

.builder-sidebar-head,
.builder-inspector-head,
.builder-model-fields > header,
.builder-setting-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.builder-sidebar-head {
  margin: 0 4px 14px;
}

.builder-sidebar-head small,
.builder-inspector-head small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.builder-sidebar-head h2,
.builder-inspector-head h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.builder-screen-list {
  display: grid;
  gap: 5px;
}

.builder-screen-list > button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.builder-screen-list > button:hover {
  background: var(--surface-soft);
}

.builder-screen-list > button.active {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.builder-screen-list > button > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface-soft);
}

.builder-screen-list > button.active > span {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.builder-screen-list b,
.builder-screen-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-screen-list b {
  font-size: 14px;
}

.builder-screen-list small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.builder-screen-list em {
  padding: 4px 6px;
  border-radius: 7px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.builder-add-screen-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 12px;
  padding: 11px;
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.builder-add-screen-button:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.builder-screen-picker {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
}

.builder-screen-picker header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 3px 7px;
}

.builder-screen-picker header button,
.builder-inspector-head > button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
}

.builder-screen-picker > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px;
  border: 0;
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.builder-screen-picker > button:hover {
  box-shadow: var(--shadow-xs);
}

.builder-screen-picker > button > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.builder-screen-picker b,
.builder-screen-picker small {
  display: block;
}

.builder-screen-picker b {
  font-size: 13px;
}

.builder-screen-picker small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.builder-workspace {
  position: relative;
  min-width: 0;
  overflow: auto;
  padding: 28px;
  background:
    radial-gradient(circle at 25% 10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 34%),
    var(--background);
}

.builder-preview-screen-nav {
  position: sticky;
  z-index: 8;
  top: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 18px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  backdrop-filter: blur(14px);
  overflow-x: auto;
}

.builder-preview-screen-nav button {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.builder-preview-screen-nav button.active {
  color: var(--text);
  background: var(--surface-soft);
}

.builder-device-shell {
  position: relative;
  width: min(1180px, 100%);
  min-height: 620px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--text) 22%, var(--border));
  border-radius: 24px;
  background: color-mix(in srgb, var(--text) 88%, #111);
  box-shadow: 0 26px 70px rgba(0,0,0,.22);
  transition: width .22s ease, border-radius .22s ease;
}

.builder-device-shell.device-tablet {
  width: min(860px, 100%);
  border-radius: 30px;
}

.builder-device-shell.device-phone {
  width: min(430px, 100%);
  min-height: 720px;
  border-radius: 38px;
  padding: 12px;
}

.builder-device-shell.device-terminal {
  width: min(1060px, 100%);
  min-height: 680px;
  border-width: 14px 20px 24px;
  border-radius: 18px;
  padding: 0;
}

.builder-device-top,
.builder-device-bottom {
  display: none;
  position: absolute;
  z-index: 5;
  left: 50%;
  transform: translateX(-50%);
}

.device-phone .builder-device-top,
.device-tablet .builder-device-top {
  display: block;
  top: 4px;
  width: 86px;
  height: 18px;
  border-radius: 0 0 12px 12px;
  background: color-mix(in srgb, var(--text) 90%, #111);
}

.device-phone .builder-device-top::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 26px;
  height: 4px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.18);
}

.builder-app-surface {
  display: flex;
  min-height: 600px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface);
}

.device-phone .builder-app-surface {
  min-height: 696px;
  border-radius: 28px;
}

.device-tablet .builder-app-surface {
  border-radius: 21px;
}

.device-terminal .builder-app-surface {
  min-height: 642px;
  border-radius: 3px;
}

.builder-app-navigation {
  display: flex;
  flex: 0 0 190px;
  flex-direction: column;
  gap: 5px;
  padding: 18px 12px;
  border-right: 1px solid var(--border);
  background: var(--surface-soft);
}

.builder-app-navigation button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.builder-app-navigation button.active {
  color: var(--text);
  background: var(--surface);
}

.device-phone .builder-app-navigation {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 17px;
  left: 18px;
  flex: none;
  flex-direction: row;
  justify-content: space-around;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

.device-phone .builder-app-navigation button {
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  font-size: 9px;
}

.builder-screen-surface {
  min-width: 0;
  flex: 1;
  overflow: auto;
  padding: 28px;
}

.device-phone .builder-screen-surface {
  padding: 22px 16px 88px;
}

.builder-screen-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.builder-screen-title span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.builder-screen-title h1 {
  margin: 5px 0 3px;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.035em;
}

.builder-screen-title p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.builder-screen-content {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.builder-zone {
  display: grid;
  grid-column: span 12;
  gap: 12px;
  min-width: 0;
}

.builder-zone.zone-wide {
  grid-column: span 8;
}

.builder-zone.zone-side,
.builder-zone.zone-narrow {
  grid-column: span 4;
}

.device-phone .builder-zone,
.device-tablet .builder-zone.zone-wide,
.device-tablet .builder-zone.zone-side,
.device-tablet .builder-zone.zone-narrow {
  grid-column: span 12;
}

.builder-block {
  position: relative;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.builder-block:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: var(--shadow-sm);
}

.builder-block.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow-sm);
}

.application-builder.preview .builder-block {
  cursor: default;
}

.application-builder.preview .builder-block:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
  transform: none;
}

.builder-block-tools {
  position: absolute;
  z-index: 5;
  top: -11px;
  left: 12px;
  display: none;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding: 4px 5px 4px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
  font-size: 10px;
  font-weight: 800;
}

.builder-block:hover .builder-block-tools,
.builder-block.selected .builder-block-tools {
  display: flex;
}

.builder-block-tools span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-block-tools button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.builder-block-preview {
  min-height: 78px;
  padding: 16px;
}

.builder-hero-preview h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

.builder-hero-preview p {
  margin: 0;
  color: var(--muted);
}

.builder-inline-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 38px;
  border: 1px dashed transparent;
  border-radius: 12px;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.builder-zone.empty .builder-inline-add,
.builder-zone:hover .builder-inline-add {
  color: var(--muted);
  border-color: var(--border);
}

.builder-inline-add:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.builder-inspector-head {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.builder-field {
  display: grid;
  gap: 7px;
  margin-bottom: 15px;
}

.builder-field > span,
.builder-setting-section b {
  font-size: 13px;
  font-weight: 800;
}

.builder-field input,
.builder-field textarea,
.builder-field select,
.builder-setting-section select {
  width: 100%;
}

.builder-field textarea {
  min-height: 82px;
  resize: vertical;
}

.builder-setting-section {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
}

.builder-setting-section header small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.builder-link-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 750;
  cursor: pointer;
}

.builder-details {
  margin: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.builder-details summary {
  padding: 13px 0;
  cursor: pointer;
  font-weight: 750;
}

.builder-details .builder-field {
  padding-bottom: 13px;
}

.builder-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0;
  font-size: 14px;
}

.builder-screen-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}

.builder-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.builder-search input {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.builder-library-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 15px;
}

.builder-library-groups button {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.builder-library-groups button.active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.builder-library-list {
  display: grid;
  gap: 7px;
}

.builder-library-list > button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.builder-library-list > button:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.builder-library-list > button > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.builder-library-list b,
.builder-library-list small {
  display: block;
}

.builder-library-list b {
  font-size: 13px;
}

.builder-library-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.builder-library-list em {
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.builder-model-fields {
  display: grid;
  gap: 9px;
}

.builder-model-fields > header {
  margin-bottom: 4px;
}

.builder-model-fields article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px auto 32px;
  align-items: center;
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.builder-model-fields article input,
.builder-model-fields article select {
  min-width: 0;
  padding: 8px;
  font-size: 12px;
}

.builder-model-fields article label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
}

.builder-model-fields article button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.builder-publish-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.builder-publish-summary span {
  padding: 12px 8px;
  border-radius: 12px;
  background: var(--surface-soft);
  text-align: center;
}

.builder-publish-summary b,
.builder-publish-summary small {
  display: block;
}

.builder-publish-summary b {
  font-size: 20px;
}

.builder-publish-summary small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.builder-issues {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.builder-issues h3 {
  margin: 0 0 4px;
  font-size: 14px;
}

.builder-issues article {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
}

.builder-issues article > i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 13%, var(--surface));
  font-style: normal;
  font-weight: 900;
}

.builder-issues b,
.builder-issues small {
  display: block;
}

.builder-issues b {
  font-size: 12px;
}

.builder-issues small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.builder-issues.warnings article {
  background: color-mix(in srgb, var(--warning, #b7791f) 9%, var(--surface));
}

.builder-ready {
  padding: 28px 18px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--success) 9%, var(--surface));
  text-align: center;
}

.builder-ready .wb-icon {
  color: var(--success);
}

.builder-ready h3 {
  margin: 10px 0 5px;
}

.builder-ready p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .builder-toolbar {
    grid-template-columns: minmax(240px, 1fr) auto;
  }
  .builder-device-switch {
    order: 3;
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: -4px;
  }
  .builder-toolbar-actions {
    grid-column: 2;
    grid-row: 1;
  }
  .builder-layout {
    grid-template-columns: 220px minmax(0, 1fr) 320px;
  }
  .builder-workspace {
    padding: 20px;
  }
}

@media (max-width: 900px) {
  .view-studio.content {
    overflow: auto;
  }
  .application-builder {
    height: auto;
    min-height: calc(100vh - var(--topbar-height, 72px));
  }
  .builder-toolbar {
    position: sticky;
    top: 0;
    grid-template-columns: 1fr auto;
    min-height: auto;
    padding: 10px;
  }
  .builder-toolbar-title em,
  .builder-toolbar-actions .btn span,
  .builder-toolbar-actions .btn.soft:first-child {
    display: none;
  }
  .builder-title-input {
    width: min(230px, 45vw);
    font-size: 16px;
  }
  .builder-device-switch {
    display: none;
  }
  .builder-layout {
    display: block;
  }
  .builder-screen-sidebar,
  .builder-inspector {
    position: fixed;
    z-index: 60;
    top: 0;
    bottom: 0;
    width: min(360px, 92vw);
    box-shadow: var(--shadow-xl);
  }
  .builder-screen-sidebar {
    left: 0;
    transform: translateX(-100%);
  }
  .builder-inspector {
    right: 0;
  }
  .builder-workspace {
    min-height: calc(100vh - 130px);
    padding: 14px;
  }
  .builder-device-shell,
  .builder-device-shell.device-phone,
  .builder-device-shell.device-tablet,
  .builder-device-shell.device-terminal {
    width: 100%;
    min-height: 620px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .builder-app-surface,
  .device-phone .builder-app-surface,
  .device-tablet .builder-app-surface,
  .device-terminal .builder-app-surface {
    min-height: 620px;
    border: 1px solid var(--border);
    border-radius: 18px;
  }
  .builder-start-page {
    padding: 24px 16px 48px;
  }
  .builder-start-grid {
    grid-template-columns: 1fr;
  }
  .builder-ai-card {
    grid-template-columns: auto 1fr;
  }
  .builder-ai-card .btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .builder-toolbar-actions .btn.soft:nth-of-type(2),
  .builder-toolbar-actions .btn.soft:nth-of-type(3) {
    display: none;
  }
  .builder-toolbar-title small,
  .builder-app-icon {
    display: none;
  }
  .builder-title-input {
    width: min(190px, 48vw);
  }
  .builder-screen-surface {
    padding: 20px 14px 82px;
  }
  .builder-app-navigation {
    position: absolute;
    z-index: 4;
    right: 12px;
    bottom: 12px;
    left: 12px;
    flex: none;
    flex-direction: row;
    justify-content: space-around;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow-md);
  }
  .builder-app-navigation button {
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    font-size: 9px;
  }
  .builder-screen-title {
    align-items: center;
  }
  .builder-screen-title .btn {
    font-size: 0;
    width: 38px;
    padding: 0;
  }
}

@media (max-width: 900px) {
  .application-builder:not(.preview) .builder-layout {
    display: flex;
    flex-direction: column;
  }
  .builder-screen-sidebar,
  .builder-inspector {
    position: static;
    width: auto;
    max-width: none;
    transform: none;
    box-shadow: none;
  }
  .builder-screen-sidebar {
    order: 1;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .builder-screen-list {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .builder-screen-list > button {
    flex: 0 0 210px;
  }
  .builder-workspace {
    order: 2;
  }
  .builder-inspector {
    order: 3;
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

/* WorkBlock 5.1 — preset fidelity and clear application navigation */
.builder-app-navigation {
  flex-basis: 220px;
  gap: 6px;
  padding: 16px 12px;
}
.builder-app-navigation > header {
  display: grid;
  gap: 3px;
  margin: 0 4px 8px;
  padding: 0 6px 12px;
  border-bottom: 1px solid var(--border);
}
.builder-app-navigation > header small {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.builder-app-navigation > header b {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.builder-app-navigation button {
  min-height: 44px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 750;
}
.builder-app-navigation button i {
  margin-left: auto;
  color: var(--accent);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}
.builder-app-navigation button.active {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}
.builder-app-navigation.placement-topbar,
.builder-app-navigation.placement-bottom {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  overflow-x: auto;
  border-right: 0;
  border-bottom: 1px solid var(--border);
}
.builder-app-navigation.placement-topbar > header,
.builder-app-navigation.placement-bottom > header { display: none; }
.builder-app-navigation.placement-topbar button,
.builder-app-navigation.placement-bottom button { flex: 0 0 auto; }
.builder-app-navigation.placement-bottom {
  order: 2;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}
.builder-app-surface:has(.builder-app-navigation.placement-topbar),
.builder-app-surface:has(.builder-app-navigation.placement-bottom) { flex-direction: column; }
.device-phone .builder-app-navigation,
.device-phone .builder-app-navigation.placement-sidebar,
.device-phone .builder-app-navigation.placement-topbar,
.device-phone .builder-app-navigation.placement-bottom,
.device-terminal .builder-app-navigation.placement-bottom {
  position: absolute;
  z-index: 8;
  right: 16px;
  bottom: 15px;
  left: 16px;
  display: flex;
  max-width: calc(100% - 32px);
  flex-direction: row;
  justify-content: flex-start;
  overflow-x: auto;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
}
.device-phone .builder-app-navigation > header,
.device-terminal .builder-app-navigation.placement-bottom > header { display: none; }
.device-phone .builder-app-navigation button,
.device-terminal .builder-app-navigation.placement-bottom button {
  min-width: 74px;
  flex: 1 0 74px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 7px 6px;
  text-align: center;
}
.device-phone .builder-app-navigation button i,
.device-terminal .builder-app-navigation.placement-bottom button i { display: none; }
.device-phone .builder-app-navigation button.active,
.device-terminal .builder-app-navigation.placement-bottom button.active { box-shadow: inset 0 -3px 0 var(--accent); }

.scenario-demo-detail { display: grid; gap: 9px; }
.scenario-demo-detail > b { font-size: 16px; }
.scenario-demo-detail > span { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.scenario-demo-detail small { color: var(--muted); }
.scenario-demo-alert { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.scenario-demo-alert div { display: grid; gap: 3px; }
.scenario-demo-alert small { color: var(--muted); }
.scenario-demo-gallery { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.scenario-demo-gallery span { display: grid; min-height: 76px; place-items: center; gap: 4px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.scenario-demo-gallery small { max-width: 100%; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }

.service-runtime-shell { padding: clamp(16px, 2.5vw, 30px); }
.service-runtime-layout {
  display: grid;
  grid-template-columns: minmax(210px, 248px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.service-runtime-layout.menu-topbar,
.service-runtime-layout.menu-bottom { grid-template-columns: 1fr; }
.service-runtime-layout.menu-topbar .service-runtime-menu,
.service-runtime-layout.menu-bottom .service-runtime-menu {
  position: static;
  display: flex;
  max-width: 100%;
  flex-direction: row;
  overflow-x: auto;
}
.service-runtime-layout.menu-bottom .service-runtime-menu { order: 2; }
.service-runtime-menu {
  position: sticky;
  top: calc(var(--topbar-height) + 14px);
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: color-mix(in srgb, var(--panel) 96%, var(--accent) 4%);
  box-shadow: var(--shadow-sm);
}
.service-runtime-menu > header {
  display: grid;
  gap: 3px;
  padding: 5px 7px 12px;
  border-bottom: 1px solid var(--border);
}
.service-runtime-menu > header small {
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.service-runtime-menu > header b { font-size: 15px; }
.service-runtime-menu > button {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.service-runtime-menu > button > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-soft);
}
.service-runtime-menu > button > div { display: grid; gap: 2px; min-width: 0; }
.service-runtime-menu > button b { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.service-runtime-menu > button small { color: var(--muted); font-size: 10px; }
.service-runtime-menu > button.active {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.service-runtime-menu > button.active > span { color: white; background: var(--accent); }
.service-runtime-content { min-width: 0; }
.service-runtime-current {
  display: grid;
  gap: 4px;
  margin: 0 0 14px;
  padding: 0 2px;
}
.service-runtime-current > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.service-runtime-current h2 { margin: 0; font-size: clamp(22px, 3vw, 31px); }
.service-runtime-current p { margin: 0; color: var(--muted); }

@media (max-width: 900px) {
  .service-runtime-layout { grid-template-columns: 1fr; padding-bottom: 82px; }
  .service-runtime-menu,
  .service-runtime-layout.menu-topbar .service-runtime-menu,
  .service-runtime-layout.menu-bottom .service-runtime-menu {
    position: fixed;
    z-index: 45;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
    top: auto;
    display: flex;
    max-width: none;
    flex-direction: row;
    gap: 5px;
    overflow-x: auto;
    padding: 7px;
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(0,0,0,.24);
    backdrop-filter: blur(18px);
  }
  .service-runtime-menu > header { display: none; }
  .service-runtime-menu > button {
    display: flex;
    min-width: 92px;
    flex: 1 0 92px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 59px;
    padding: 6px;
    text-align: center;
  }
  .service-runtime-menu > button > span { width: 28px; height: 28px; }
  .service-runtime-menu > button > div { display: block; max-width: 100%; }
  .service-runtime-menu > button b { display: block; font-size: 10px; }
  .service-runtime-menu > button small,
  .service-runtime-menu > button > svg { display: none; }
  .service-runtime-menu > button.active { box-shadow: inset 0 -3px 0 var(--accent); }
}
.workspace-preset-menu-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 14px;
  color: var(--accent);
  background: var(--accent-soft);
}
.workspace-preset-menu-note > div { display: grid; gap: 3px; }
.workspace-preset-menu-note b { color: var(--text); }
.workspace-preset-menu-note small { color: var(--muted); line-height: 1.4; }
.workspace-catalog-preview section > div > span:has(strong) { display: grid; gap: 2px; }
.workspace-catalog-preview section > div > span strong { color: var(--text); font-size: 12px; }
.workspace-catalog-preview section > div > span small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.builder-field-hint { margin: -4px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.45; }

/* ======================================================================
   WorkBlock 5.2 — white public landing and pricing configurator
   ====================================================================== */
html[data-view="landing"], html[data-view="pricing"] { color-scheme: light; background:#fff; }
html[data-view="landing"] body, html[data-view="pricing"] body { background:#fff !important; color:#172033; }
.wb5-public {
  --wb5-text:#172033; --wb5-heading:#0f172a; --wb5-muted:#667085; --wb5-border:#e6eaf0;
  --wb5-soft:#f6f8fc; --wb5-soft-blue:#edf4ff; --wb5-blue:#2563eb; --wb5-blue-dark:#1746b3;
  --wb5-orange:#f97316; --wb5-green:#0f9f6e; --wb5-shadow:0 22px 60px rgba(31,50,87,.10);
  min-height:100dvh; background:#fff; color:var(--wb5-text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow:clip;
}
.wb5-public *, .wb5-public *::before, .wb5-public *::after { box-sizing:border-box; }
.wb5-public button, .wb5-public input { font:inherit; }
.wb5-public .btn { min-height:44px; border-radius:12px; font-weight:760; }
.wb5-public .btn.xl { min-height:52px; padding:0 22px; font-size:16px; }
.wb5-public .btn.primary { border-color:var(--wb5-blue); background:var(--wb5-blue); color:#fff; box-shadow:0 11px 24px rgba(37,99,235,.20); }
.wb5-public .btn.primary:hover { background:var(--wb5-blue-dark); border-color:var(--wb5-blue-dark); }
.wb5-public .btn.soft { border-color:#dbe5f5; background:#f2f6fd; color:#204070; }
.wb5-public .btn.ghost { border-color:transparent; background:transparent; color:#344054; }
.wb5-public .btn.full { width:100%; }
.wb5-header { position:sticky; top:0; z-index:90; width:100%; min-height:76px; padding:0 max(24px,calc((100vw - 1440px)/2)); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; border-bottom:1px solid rgba(230,234,240,.86); background:rgba(255,255,255,.92); backdrop-filter:blur(20px); }
.wb5-brand { display:flex; align-items:center; gap:11px; border:0; background:transparent; color:var(--wb5-heading); text-align:left; cursor:pointer; white-space:nowrap; }
.wb5-brand-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(145deg,#2563eb,#5c8cff); color:#fff; box-shadow:0 9px 23px rgba(37,99,235,.23); }
.wb5-brand > span:last-child { display:grid; line-height:1.05; }
.wb5-brand b { font-size:17px; letter-spacing:-.025em; }
.wb5-brand small { margin-top:5px; color:#7a8498; font-size:10px; font-weight:680; letter-spacing:.015em; }
.wb5-nav { justify-self:center; display:flex; align-items:center; gap:6px; }
.wb5-nav a { padding:10px 12px; border-radius:9px; color:#475467; font-size:14px; font-weight:700; text-decoration:none; transition:.18s ease; }
.wb5-nav a:hover { background:#f3f6fb; color:#1d4ed8; }
.wb5-header-actions { display:flex; align-items:center; gap:6px; }
.wb5-menu-toggle { display:none; width:42px; height:42px; place-items:center; border:1px solid var(--wb5-border); border-radius:11px; background:#fff; color:var(--wb5-heading); }
.wb5-hero { position:relative; width:min(1440px,100%); min-height:760px; margin:auto; padding:105px 34px 90px; display:grid; grid-template-columns:minmax(0,.88fr) minmax(600px,1.12fr); align-items:center; gap:70px; }
.wb5-hero::before { content:""; position:absolute; z-index:0; width:700px; height:700px; right:-220px; top:-120px; border-radius:50%; background:radial-gradient(circle,rgba(72,127,255,.14),rgba(72,127,255,0) 66%); pointer-events:none; }
.wb5-hero-copy,.wb5-product-preview { position:relative; z-index:1; }
.wb5-eyebrow { display:inline-flex; align-items:center; gap:9px; color:#365486; font-size:12px; font-weight:830; letter-spacing:.055em; text-transform:uppercase; }
.wb5-eyebrow > span { width:9px; height:9px; border-radius:50%; background:var(--wb5-blue); box-shadow:0 0 0 6px rgba(37,99,235,.11); }
.wb5-hero h1 { max-width:720px; margin:24px 0 22px; color:var(--wb5-heading); font-size:clamp(49px,5.45vw,78px); line-height:1.015; letter-spacing:-.064em; }
.wb5-hero h1 em { color:var(--wb5-blue); font-style:normal; }
.wb5-hero-copy > p { max-width:720px; margin:0; color:var(--wb5-muted); font-size:19px; line-height:1.7; }
.wb5-hero-actions { margin:31px 0 20px; display:flex; gap:10px; flex-wrap:wrap; }
.wb5-hero-note { display:flex; align-items:center; flex-wrap:wrap; gap:9px 18px; }
.wb5-hero-note span { display:flex; align-items:center; gap:6px; color:#5c677a; font-size:12px; font-weight:700; }
.wb5-hero-note svg { color:var(--wb5-green); }
.wb5-product-preview { min-width:0; padding:22px 0 28px; }
.wb5-preview-window { min-height:510px; overflow:hidden; border:1px solid #dce4f0; border-radius:22px; background:#fff; box-shadow:0 32px 90px rgba(26,49,92,.15); transform:perspective(1400px) rotateY(-2.5deg) rotateX(1deg); transform-origin:center; }
.wb5-preview-top { height:56px; padding:0 17px; display:flex; align-items:center; gap:9px; border-bottom:1px solid #e7ebf2; }
.wb5-preview-top > b { font-size:13px; }
.wb5-preview-top > div { margin-left:auto; display:flex; align-items:center; gap:7px; }
.wb5-preview-top > div i { width:25px; height:7px; border-radius:4px; background:#eef2f7; }
.wb5-preview-top .avatar { width:29px; height:29px; display:grid; place-items:center; border-radius:9px; background:#eaf1ff; color:#2457c6; font-size:9px; font-weight:850; }
.wb5-preview-logo { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; background:var(--wb5-blue); color:white; }
.wb5-preview-body { min-height:454px; display:grid; grid-template-columns:150px 1fr; }
.wb5-preview-body > aside { padding:15px 10px; display:flex; flex-direction:column; gap:4px; background:#f7f9fc; border-right:1px solid #e7ebf2; }
.wb5-preview-body > aside > button { min-height:35px; padding:0 10px; display:flex; align-items:center; gap:8px; border:0; border-radius:8px; background:transparent; color:#647084; font-size:11px; font-weight:720; text-align:left; }
.wb5-preview-body > aside > button.active { background:#e8f0ff; color:#2458c7; }
.wb5-preview-upgrade { margin-top:auto; padding:12px; border:1px solid #dbe7fb; border-radius:11px; background:linear-gradient(155deg,#f0f6ff,#fff); display:grid; gap:5px; }
.wb5-preview-upgrade small { color:#3563c4; font-size:8px; font-weight:850; text-transform:uppercase; }
.wb5-preview-upgrade b { font-size:10px; line-height:1.35; }
.wb5-preview-upgrade span { color:#2e5cc0; font-size:9px; font-weight:760; }
.wb5-preview-body > section { padding:25px 24px; background:#fff; }
.wb5-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wb5-preview-heading small { color:#8a94a6; font-size:9px; }
.wb5-preview-heading h3 { margin:4px 0 0; font-size:18px; letter-spacing:-.025em; }
.wb5-preview-heading button { min-height:31px; padding:0 11px; border:0; border-radius:8px; background:var(--wb5-blue); color:white; font-size:9px; font-weight:800; }
.wb5-preview-stats { margin-top:20px; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.wb5-preview-stats article { padding:14px; display:grid; gap:5px; border:1px solid #e9edf4; border-radius:11px; }
.wb5-preview-stats small { color:#7d8799; font-size:8px; }
.wb5-preview-stats b { font-size:21px; }
.wb5-preview-stats span { color:#67816e; font-size:8px; }
.wb5-preview-grid { margin-top:13px; display:grid; grid-template-columns:1.25fr .75fr; gap:10px; }
.wb5-preview-grid > article { padding:15px; border:1px solid #e9edf4; border-radius:11px; }
.wb5-preview-grid .tasks > div { display:flex; justify-content:space-between; font-size:10px; }
.wb5-preview-grid .tasks > div span { color:#3763bd; font-size:8px; }
.wb5-preview-grid label { padding:11px 0; display:grid; grid-template-columns:13px 1fr auto; align-items:center; gap:8px; border-bottom:1px solid #eef1f5; }
.wb5-preview-grid label:last-child { border:0; }
.wb5-preview-grid label > i { width:12px; height:12px; border:1.5px solid #cbd2dc; border-radius:4px; }
.wb5-preview-grid label > i.done { background:#4c7ce8; border-color:#4c7ce8; }
.wb5-preview-grid label span { display:grid; gap:3px; }
.wb5-preview-grid label b { font-size:9px; }
.wb5-preview-grid label small { color:#8b94a5; font-size:7px; }
.wb5-preview-grid label em { padding:3px 5px; border-radius:5px; background:#fff3ec; color:#d85d18; font-size:6px; font-style:normal; }
.wb5-preview-grid .timeline > b { font-size:10px; }
.wb5-preview-grid .timeline > div { margin-top:13px; display:grid; grid-template-columns:28px 1fr; gap:8px; }
.wb5-preview-grid .timeline time { color:#8090a6; font-size:7px; }
.wb5-preview-grid .timeline span { position:relative; padding-left:10px; display:grid; gap:2px; }
.wb5-preview-grid .timeline span::before { content:""; position:absolute; left:0; top:2px; bottom:-13px; width:1px; background:#dfe5ef; }
.wb5-preview-grid .timeline i { position:absolute; z-index:1; left:-2px; top:2px; width:5px; height:5px; border-radius:50%; background:#4f7ce3; }
.wb5-preview-grid .timeline b { font-size:8px; }
.wb5-preview-grid .timeline small { color:#8892a2; font-size:7px; }
.wb5-floating-card { position:absolute; z-index:3; min-width:210px; padding:12px 14px; display:flex; align-items:center; gap:10px; border:1px solid #e2e8f2; border-radius:14px; background:rgba(255,255,255,.96); box-shadow:0 18px 45px rgba(31,49,81,.13); }
.wb5-floating-card > span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#edf3ff; color:#2c62cd; }
.wb5-floating-card div { display:grid; gap:3px; }
.wb5-floating-card b { font-size:11px; }
.wb5-floating-card small { color:#7d8798; font-size:8px; }
.wb5-floating-card.one { left:-28px; bottom:4px; }
.wb5-floating-card.two { right:-22px; top:2px; }
.wb5-proof-strip { width:min(1372px,calc(100% - 48px)); margin:0 auto 30px; padding:26px 30px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; border:1px solid var(--wb5-border); border-radius:19px; background:#fff; box-shadow:0 14px 42px rgba(24,41,73,.06); }
.wb5-proof-strip div { padding-left:20px; display:grid; gap:4px; border-left:1px solid #e8ecf2; }
.wb5-proof-strip div:first-child { padding-left:0; border:0; }
.wb5-proof-strip b { font-size:18px; letter-spacing:-.02em; }
.wb5-proof-strip span { color:var(--wb5-muted); font-size:12px; }
.wb5-section { width:min(1372px,calc(100% - 48px)); margin:0 auto; padding:112px 0; }
.wb5-section-head { max-width:820px; margin:0 auto 46px; text-align:center; }
.wb5-section-head.left { margin-left:0; text-align:left; }
.wb5-section-head > span,.wb5-builder-copy > .wb5-access-badge,.wb5-device-copy > span,.wb5-security-section > div > span,.wb5-final-cta > div > span { color:#3563c5; font-size:11px; font-weight:850; letter-spacing:.085em; text-transform:uppercase; }
.wb5-section-head h2,.wb5-builder-copy h2,.wb5-device-copy h2,.wb5-security-section h2,.wb5-final-cta h2 { margin:14px 0 13px; color:var(--wb5-heading); font-size:clamp(34px,4vw,52px); line-height:1.08; letter-spacing:-.048em; }
.wb5-section-head p,.wb5-builder-copy > p,.wb5-device-copy > p,.wb5-security-section p,.wb5-final-cta p { margin:0; color:var(--wb5-muted); font-size:17px; line-height:1.7; }
.wb5-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.wb5-feature-grid article { min-height:225px; padding:28px; border:1px solid var(--wb5-border); border-radius:18px; background:#fff; transition:.2s ease; }
.wb5-feature-grid article:hover { transform:translateY(-3px); box-shadow:0 19px 50px rgba(29,49,85,.08); }
.wb5-feature-grid article > span { width:46px; height:46px; display:grid; place-items:center; border-radius:13px; background:var(--wb5-soft-blue); color:#2b61c9; }
.wb5-feature-grid h3 { margin:24px 0 10px; font-size:19px; letter-spacing:-.025em; }
.wb5-feature-grid p { margin:0; color:var(--wb5-muted); font-size:14px; line-height:1.65; }
.wb5-growth-section { width:100%; max-width:none; padding-left:max(24px,calc((100vw - 1372px)/2)); padding-right:max(24px,calc((100vw - 1372px)/2)); background:#f7f9fc; }
.wb5-tier-flow { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.wb5-tier-flow article { position:relative; min-width:0; min-height:375px; padding:22px 18px; display:flex; flex-direction:column; border:1px solid #e2e7ef; border-radius:17px; background:#fff; }
.wb5-tier-flow article.featured { border-color:#9bb9fb; box-shadow:0 15px 42px rgba(37,99,235,.11); }
.wb5-tier-top { min-height:42px; display:flex; align-items:center; gap:8px; }
.wb5-tier-top > span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#edf3ff; color:#2f63cc; }
.wb5-tier-top small { color:#718096; font-size:8px; font-weight:820; text-transform:uppercase; }
.wb5-tier-top em { position:absolute; top:-11px; right:14px; padding:5px 8px; border-radius:20px; background:#2563eb; color:#fff; font-size:7px; font-style:normal; font-weight:850; }
.wb5-tier-flow h3 { margin:19px 0 4px; font-size:23px; letter-spacing:-.035em; }
.wb5-tier-flow article > b { color:#446181; font-size:10px; }
.wb5-tier-flow article > p { min-height:83px; margin:13px 0 16px; color:#687386; font-size:11px; line-height:1.55; }
.wb5-tier-flow ul { margin:0 0 19px; padding:0; display:grid; gap:9px; list-style:none; }
.wb5-tier-flow li { display:flex; align-items:flex-start; gap:6px; color:#4f5a6e; font-size:9px; line-height:1.4; }
.wb5-tier-flow li svg { flex:none; color:#18a06e; }
.wb5-link-button { margin-top:auto; padding:0; display:flex; align-items:center; gap:5px; border:0; background:transparent; color:#2d5fc4; font-size:10px; font-weight:800; text-align:left; cursor:pointer; }
.wb5-tier-arrow { display:none; }
.wb5-tier-flow .tone-orange .wb5-tier-top > span { background:#fff1e8; color:#e8681f; }
.wb5-tier-flow .tone-dark .wb5-tier-top > span { background:#e9edf4; color:#263246; }
.wb5-builder-section { display:grid; grid-template-columns:.76fr 1.24fr; align-items:center; gap:70px; }
.wb5-access-badge { width:max-content; padding:7px 10px; display:flex; align-items:center; gap:6px; border-radius:20px; background:#eaf2ff; }
.wb5-builder-steps { margin:27px 0 29px; display:grid; gap:12px; }
.wb5-builder-steps article { padding:14px; display:flex; gap:12px; border:1px solid #e5eaf2; border-radius:13px; }
.wb5-builder-steps article > span { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:#2563eb; color:#fff; font-size:11px; font-weight:850; }
.wb5-builder-steps article div { display:grid; gap:4px; }
.wb5-builder-steps b { font-size:13px; }
.wb5-builder-steps small { color:#707b8e; font-size:11px; line-height:1.45; }
.wb5-builder-preview { min-width:0; overflow:hidden; border:1px solid #dce4ef; border-radius:20px; background:#fff; box-shadow:var(--wb5-shadow); }
.wb5-builder-toolbar { min-height:52px; padding:0 12px; display:flex; align-items:center; gap:8px; border-bottom:1px solid #e7ebf1; }
.wb5-builder-toolbar > span { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; background:#f4f6fa; }
.wb5-builder-toolbar > b { font-size:11px; }
.wb5-builder-toolbar > small { margin-right:auto; color:#738198; font-size:8px; }
.wb5-builder-toolbar > button { min-height:29px; padding:0 9px; border:1px solid #dde4ee; border-radius:7px; background:#fff; color:#4f5b6e; font-size:8px; font-weight:800; }
.wb5-builder-toolbar > button.primary { border-color:#2563eb; background:#2563eb; color:#fff; }
.wb5-builder-layout { min-height:460px; display:grid; grid-template-columns:118px 1fr 145px; }
.wb5-builder-layout > aside { padding:13px 9px; display:flex; flex-direction:column; gap:4px; border-right:1px solid #e8ecf2; background:#f8fafc; }
.wb5-builder-layout > aside > small { padding:5px 7px; color:#8892a2; font-size:7px; font-weight:800; text-transform:uppercase; }
.wb5-builder-layout > aside > button { min-height:30px; padding:0 8px; border:0; border-radius:7px; background:transparent; color:#687386; font-size:8px; font-weight:720; text-align:left; }
.wb5-builder-layout > aside > button.active { background:#e9f1ff; color:#245bc5; }
.wb5-builder-layout > aside > button.add { margin-top:8px; border:1px dashed #cfd8e6; color:#3563be; text-align:center; }
.wb5-builder-layout > main { min-width:0; background:#eef2f7; padding:18px; }
.wb5-builder-layout main > nav { min-height:37px; padding:0 12px; display:flex; align-items:center; gap:12px; border-radius:9px 9px 0 0; background:#17233a; color:#fff; }
.wb5-builder-layout main > nav b { margin-right:auto; font-size:9px; }
.wb5-builder-layout main > nav span { font-size:6px; color:#c9d2e2; }
.wb5-builder-layout main > section { min-height:365px; padding:32px 25px; background:#fff; }
.wb5-builder-layout main > section > small { color:#6d82a7; font-size:7px; }
.wb5-builder-layout main > section > h3 { margin:5px 0 19px; font-size:18px; }
.wb5-service-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.wb5-service-cards article { padding:10px; display:grid; gap:5px; border:1px solid #e5eaf2; border-radius:9px; }
.wb5-service-cards i { height:55px; border-radius:6px; background:linear-gradient(145deg,#e8eef8,#f7f9fd); }
.wb5-service-cards b { font-size:8px; }
.wb5-service-cards span { color:#778296; font-size:6px; }
.wb5-builder-layout main > section > button { margin-top:19px; min-height:29px; padding:0 12px; border:0; border-radius:7px; background:#1e66e5; color:#fff; font-size:7px; font-weight:800; }
.wb5-builder-layout > aside.inspector { padding:17px 11px; border-right:0; border-left:1px solid #e8ecf2; background:#fff; }
.wb5-builder-layout .inspector > b { padding:7px; font-size:9px; }
.wb5-builder-layout .inspector label { margin-top:8px; padding:8px; display:grid; gap:4px; border:1px solid #e7ebf1; border-radius:7px; color:#818b9d; font-size:6px; }
.wb5-builder-layout .inspector label span { color:#31405a; font-size:7px; font-weight:700; }
.wb5-app-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.wb5-app-grid article { min-height:260px; padding:25px; display:flex; flex-direction:column; border:1px solid #e4e9f1; border-radius:18px; background:#fff; transition:.2s ease; }
.wb5-app-grid article:hover { transform:translateY(-3px); box-shadow:0 18px 48px rgba(27,47,83,.08); }
.wb5-app-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:13px; background:#edf3ff; color:#2e63cb; }
.wb5-app-meta { margin-top:21px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.wb5-app-meta span { color:#6d7890; font-size:9px; font-weight:800; text-transform:uppercase; }
.wb5-app-meta em { padding:4px 7px; border-radius:20px; background:#eff5ff; color:#2c5fca; font-size:7px; font-style:normal; font-weight:800; }
.wb5-app-grid h3 { margin:10px 0 8px; font-size:20px; }
.wb5-app-grid p { margin:0; color:#697488; font-size:12px; line-height:1.6; }
.wb5-app-grid footer { margin-top:auto; padding-top:20px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #edf0f4; }
.wb5-app-grid footer span { color:#7d8799; font-size:9px; }
.wb5-app-grid footer button { display:flex; align-items:center; gap:5px; border:0; background:transparent; color:#2b5fc4; font-size:9px; font-weight:800; }
.wb5-section-action { margin-top:25px; text-align:center; }
.wb5-connected-section { width:100%; max-width:none; padding-left:max(24px,calc((100vw - 1372px)/2)); padding-right:max(24px,calc((100vw - 1372px)/2)); background:#f7f9fc; }
.wb5-connected-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:12px; }
.wb5-connected-flow article { min-height:140px; padding:19px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px solid #e1e7f0; border-radius:16px; background:#fff; text-align:center; }
.wb5-connected-flow article > span { width:43px; height:43px; display:grid; place-items:center; border-radius:12px; background:#ecf3ff; color:#2d63cd; }
.wb5-connected-flow b { font-size:13px; }
.wb5-connected-flow small { color:#788396; font-size:9px; }
.wb5-connected-flow > i { color:#9aa8bd; }
.wb5-device-section { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:80px; }
.wb5-device-copy ul { margin:24px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:11px; list-style:none; }
.wb5-device-copy li { display:flex; align-items:center; gap:7px; color:#4f5c70; font-size:12px; }
.wb5-device-copy li svg { color:#16a06d; }
.wb5-devices { position:relative; min-height:420px; }
.wb5-devices > div { position:absolute; border:7px solid #263249; background:#263249; box-shadow:0 22px 50px rgba(25,40,68,.18); }
.wb5-devices > div > div { width:100%; height:100%; padding:15px; display:grid; align-content:start; gap:10px; background:#fff; }
.wb5-devices b { font-size:10px; }
.wb5-devices span { display:block; height:38px; border-radius:7px; background:#edf2f8; }
.wb5-devices .desktop { width:76%; height:300px; left:0; top:15px; border-radius:12px; }
.wb5-devices .tablet { width:35%; height:260px; right:4%; top:90px; border-radius:17px; }
.wb5-devices .phone { width:18%; min-width:100px; height:230px; right:27%; bottom:0; border-width:6px; border-radius:22px; }
.wb5-devices .phone > div { padding:12px 8px; }
.wb5-security-section { padding:52px; display:grid; grid-template-columns:auto 1fr .85fr; align-items:center; gap:32px; border-radius:25px; background:linear-gradient(135deg,#13213b,#1d3157); color:#fff; }
.wb5-security-icon { width:82px; height:82px; display:grid; place-items:center; border-radius:21px; background:rgba(255,255,255,.10); color:#8db6ff; }
.wb5-security-section > div > span { color:#9fc1ff; }
.wb5-security-section h2 { color:#fff; font-size:36px; }
.wb5-security-section p { color:#bdc8da; font-size:14px; }
.wb5-security-points { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wb5-security-points span { padding:11px 12px; border:1px solid rgba(255,255,255,.11); border-radius:10px; background:rgba(255,255,255,.06); color:#d9e1ef; font-size:10px; font-weight:700; }
.wb5-final-cta { width:min(1372px,calc(100% - 48px)); margin:85px auto; padding:58px 62px; display:flex; align-items:center; justify-content:space-between; gap:45px; border:1px solid #dbe5f4; border-radius:25px; background:linear-gradient(135deg,#f0f5ff,#fff 60%,#fff6ed); }
.wb5-final-cta > div:first-child { max-width:790px; }
.wb5-final-cta h2 { font-size:39px; }
.wb5-final-cta > div:last-child { display:flex; gap:9px; flex-wrap:wrap; }
.wb5-footer { width:min(1372px,calc(100% - 48px)); margin:auto; min-height:130px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; border-top:1px solid #e7ebf1; }
.wb5-footer > div:nth-child(2) { justify-self:center; display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.wb5-footer a { color:#637086; font-size:11px; font-weight:700; text-decoration:none; }
.wb5-footer > small { color:#929baa; font-size:10px; }
/* Pricing */
.wb5-pricing { background:#f7f9fc; }
.wb5-pricing-main { padding-bottom:80px; }
.wb5-pricing-hero { width:min(1120px,calc(100% - 48px)); margin:auto; padding:95px 0 58px; text-align:center; }
.wb5-pricing-hero h1 { margin:22px 0 17px; color:#101828; font-size:clamp(46px,5.3vw,72px); line-height:1.02; letter-spacing:-.06em; }
.wb5-pricing-hero > p { max-width:790px; margin:auto; color:#687386; font-size:18px; line-height:1.7; }
.wb5-pricing-promises { margin-top:24px; display:flex; justify-content:center; flex-wrap:wrap; gap:9px 18px; }
.wb5-pricing-promises span { display:flex; align-items:center; gap:6px; color:#566277; font-size:12px; font-weight:700; }
.wb5-pricing-promises svg { color:#14a06d; }
.wb5-pricing-section,.wb5-pricing-builder { width:min(1280px,calc(100% - 48px)); margin:0 auto 24px; }
.wb5-pricing-section { padding:35px; border:1px solid #e0e6ef; border-radius:22px; background:#fff; }
.wb5-pricing-step { display:flex; gap:17px; align-items:flex-start; }
.wb5-pricing-step > span { flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#2563eb; color:#fff; font-size:14px; font-weight:850; }
.wb5-pricing-step small { color:#3563c5; font-size:9px; font-weight:850; letter-spacing:.075em; text-transform:uppercase; }
.wb5-pricing-step h2 { margin:5px 0 6px; color:#101828; font-size:27px; letter-spacing:-.035em; }
.wb5-pricing-step p { margin:0; color:#738095; font-size:12px; }
.wb5-pricing-step.compact { margin-bottom:25px; }
.wb5-pricing-step.compact > span { width:36px; height:36px; border-radius:10px; font-size:12px; }
.wb5-pricing-step.compact h2 { font-size:22px; }
.wb5-pricing-tiers { margin-top:28px; display:grid; grid-template-columns:repeat(6,1fr); gap:9px; }
.wb5-pricing-tiers > button { min-height:120px; padding:15px; display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:9px; border:1px solid #e0e6ee; border-radius:14px; background:#fff; color:#172033; text-align:left; cursor:pointer; transition:.18s ease; }
.wb5-pricing-tiers > button:hover { border-color:#a9bee7; }
.wb5-pricing-tiers > button.active { border-color:#5e8ced; background:#f2f6ff; box-shadow:0 9px 26px rgba(37,99,235,.10); }
.wb5-pricing-tiers > button > span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#edf3ff; color:#2c61ca; }
.wb5-pricing-tiers > button > div { display:grid; gap:3px; }
.wb5-pricing-tiers small { color:#7c8799; font-size:7px; font-weight:800; text-transform:uppercase; }
.wb5-pricing-tiers b { font-size:15px; }
.wb5-pricing-tiers em { color:#687386; font-size:8px; font-style:normal; }
.wb5-pricing-tiers > button > i { color:#4774d7; }
.wb5-pricing-builder { display:grid; grid-template-columns:minmax(0,1fr) 355px; gap:18px; align-items:start; }
.wb5-pricing-config { display:grid; gap:18px; }
.wb5-config-card { padding:32px; border:1px solid #e0e6ef; border-radius:22px; background:#fff; }
.wb5-module-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.wb5-module-grid > button { min-height:82px; padding:13px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; border:1px solid #e2e7ef; border-radius:12px; background:#fff; color:#172033; text-align:left; cursor:pointer; }
.wb5-module-grid > button.active { border-color:#8cabed; background:#f2f6ff; }
.wb5-module-grid > button > span { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:#f0f4fa; color:#47627e; }
.wb5-module-grid > button.active > span { background:#e2edff; color:#2e63cc; }
.wb5-module-grid > button > div { display:grid; gap:4px; }
.wb5-module-grid b { font-size:12px; }
.wb5-module-grid small { color:#778296; font-size:9px; line-height:1.4; }
.wb5-module-grid > button > i { color:#6d7c92; }
.wb5-module-grid > button.active > i { color:#2563eb; }
.wb5-seat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.wb5-seat-grid label { padding:15px; display:grid; gap:7px; border:1px solid #e4e9f0; border-radius:12px; }
.wb5-seat-grid label > span { font-size:11px; font-weight:800; }
.wb5-seat-grid label > small { min-height:28px; color:#7a8597; font-size:8px; line-height:1.4; }
.wb5-seat-grid input { width:100%; height:40px; padding:0 11px; border:1px solid #d9e0ea; border-radius:9px; background:#f9fafc; color:#172033; font-size:14px; font-weight:750; }
.wb5-resource-grid { margin-bottom:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.wb5-resource-grid label { display:grid; gap:7px; color:#566277; font-size:10px; font-weight:750; }
.wb5-resource-grid label > div { display:flex; align-items:center; border:1px solid #dce3ed; border-radius:10px; background:#f9fafc; overflow:hidden; }
.wb5-resource-grid input { min-width:0; width:100%; height:43px; padding:0 10px; border:0; background:transparent; color:#172033; font-weight:750; }
.wb5-resource-grid em { padding:0 9px; color:#8791a2; font-size:8px; font-style:normal; }
.wb5-pricing-unavailable { padding:35px; display:grid; justify-items:center; gap:7px; border:1px dashed #ccd6e5; border-radius:14px; color:#69758a; text-align:center; }
.wb5-pricing-unavailable p { margin:0; font-size:11px; }
.wb5-quote-card { position:sticky; top:94px; padding:24px; border:1px solid #d9e2f0; border-radius:22px; background:#fff; box-shadow:0 20px 55px rgba(30,49,82,.10); }
.wb5-quote-card.loading { opacity:.7; pointer-events:none; }
.wb5-quote-tier { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; }
.wb5-quote-tier > span { width:39px; height:39px; display:grid; place-items:center; border-radius:11px; background:#eaf2ff; color:#2c62cc; }
.wb5-quote-tier > div { display:grid; gap:3px; }
.wb5-quote-tier small { color:#818c9e; font-size:8px; }
.wb5-quote-tier b { font-size:14px; }
.wb5-quote-tier button { border:0; background:transparent; color:#3262c3; font-size:8px; font-weight:800; }
.wb5-quote-total,.wb5-enterprise-quote { margin:23px 0 17px; padding:20px; border-radius:15px; background:linear-gradient(145deg,#eef4ff,#f9fbff); }
.wb5-quote-total { display:grid; gap:6px; }
.wb5-quote-total small,.wb5-enterprise-quote small { color:#647894; font-size:8px; font-weight:800; text-transform:uppercase; }
.wb5-quote-total b { color:#123777; font-size:32px; letter-spacing:-.045em; }
.wb5-quote-total span { color:#738299; font-size:8px; }
.wb5-enterprise-quote h3 { margin:6px 0; font-size:27px; }
.wb5-enterprise-quote p { margin:0; color:#64748a; font-size:10px; line-height:1.5; }
.wb5-quote-summary { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.wb5-quote-summary > div { padding:11px; display:grid; gap:4px; border:1px solid #e7ebf1; border-radius:10px; }
.wb5-quote-summary span { color:#7d8798; font-size:7px; }
.wb5-quote-summary b { font-size:14px; }
.wb5-quote-lines { margin:17px 0; padding-top:14px; display:grid; gap:8px; border-top:1px solid #e7ebf1; }
.wb5-quote-lines > div { display:flex; justify-content:space-between; gap:12px; color:#5f6b7e; font-size:9px; }
.wb5-quote-lines b { color:#27354b; white-space:nowrap; }
.wb5-quote-info { margin:16px 0; padding:12px; display:flex; align-items:flex-start; gap:8px; border-radius:11px; background:#f7f9fc; color:#5e6c81; }
.wb5-quote-info svg { flex:none; color:#4670c9; }
.wb5-quote-info p { margin:0; font-size:8px; line-height:1.5; }
.wb5-quote-card .btn + .btn { margin-top:6px; }
.wb5-pricing-explain > div:last-child { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }
.wb5-pricing-explain article { padding:21px; border:1px solid #e5eaf1; border-radius:14px; }
.wb5-pricing-explain article > span { width:40px; height:40px; display:grid; place-items:center; border-radius:11px; background:#edf3ff; color:#2e63cc; }
.wb5-pricing-explain h3 { margin:17px 0 8px; font-size:15px; }
.wb5-pricing-explain p { margin:0; color:#6f7b8e; font-size:10px; line-height:1.55; }
@media (max-width:1200px) {
  .wb5-header { grid-template-columns:auto auto 1fr; gap:12px; padding:0 22px; }
  .wb5-menu-toggle { display:grid; margin-left:auto; }
  .wb5-nav { position:absolute; top:68px; left:18px; right:18px; padding:13px; display:none; flex-direction:column; align-items:stretch; border:1px solid #e1e7ef; border-radius:15px; background:#fff; box-shadow:var(--wb5-shadow); }
  .wb5-header.open .wb5-nav { display:flex; }
  .wb5-header-actions { margin-left:auto; }
  .wb5-hero { grid-template-columns:1fr; min-height:auto; }
  .wb5-hero-copy { max-width:920px; }
  .wb5-product-preview { width:min(850px,100%); margin:auto; }
  .wb5-tier-flow { grid-template-columns:repeat(3,1fr); }
  .wb5-builder-section { grid-template-columns:1fr; }
  .wb5-builder-copy { max-width:800px; }
  .wb5-connected-flow { grid-template-columns:repeat(5,1fr); }
  .wb5-connected-flow > i { display:none; }
  .wb5-pricing-tiers { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px) {
  .wb5-header-actions .btn.ghost:first-child { display:none; }
  .wb5-hero { padding:70px 20px; gap:38px; }
  .wb5-hero h1 { font-size:clamp(43px,11vw,66px); }
  .wb5-preview-window { min-height:430px; transform:none; }
  .wb5-preview-body { grid-template-columns:105px 1fr; }
  .wb5-preview-body > section { padding:18px 15px; }
  .wb5-preview-grid { grid-template-columns:1fr; }
  .wb5-preview-grid .timeline { display:none; }
  .wb5-proof-strip { grid-template-columns:1fr 1fr; }
  .wb5-proof-strip div:nth-child(3) { padding-left:0; border-left:0; }
  .wb5-section { padding:82px 0; }
  .wb5-feature-grid,.wb5-app-grid { grid-template-columns:1fr 1fr; }
  .wb5-tier-flow { grid-template-columns:1fr 1fr; }
  .wb5-builder-layout { grid-template-columns:90px 1fr; }
  .wb5-builder-layout > aside.inspector { display:none; }
  .wb5-device-section { grid-template-columns:1fr; }
  .wb5-devices { width:min(650px,100%); margin:auto; }
  .wb5-security-section { grid-template-columns:auto 1fr; }
  .wb5-security-points { grid-column:1/-1; }
  .wb5-final-cta { padding:42px; display:grid; }
  .wb5-footer { grid-template-columns:1fr; padding:35px 0; justify-items:center; text-align:center; }
  .wb5-footer > div:nth-child(2) { justify-self:center; }
  .wb5-pricing-builder { grid-template-columns:1fr; }
  .wb5-quote-card { position:static; }
  .wb5-seat-grid,.wb5-resource-grid { grid-template-columns:1fr 1fr; }
  .wb5-pricing-explain > div:last-child { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px) {
  .wb5-header { min-height:66px; padding:0 14px; grid-template-columns:1fr auto; }
  .wb5-brand small { display:none; }
  .wb5-header-actions { display:none; position:absolute; top:250px; left:18px; right:18px; padding:11px; flex-direction:column; align-items:stretch; border:1px solid #e1e7ef; border-radius:14px; background:#fff; box-shadow:var(--wb5-shadow); }
  .wb5-header.open .wb5-header-actions { display:flex; }
  .wb5-header-actions .btn { width:100%; }
  .wb5-menu-toggle { grid-column:2; }
  .wb5-hero { padding:56px 16px 48px; }
  .wb5-hero h1 { margin-top:19px; font-size:43px; }
  .wb5-hero-copy > p { font-size:16px; }
  .wb5-hero-actions { display:grid; }
  .wb5-hero-actions .btn { width:100%; }
  .wb5-hero-note { display:grid; }
  .wb5-product-preview { padding:0; }
  .wb5-preview-window { min-height:365px; border-radius:15px; }
  .wb5-preview-body { grid-template-columns:1fr; }
  .wb5-preview-body > aside { display:none; }
  .wb5-preview-body > section { padding:15px 12px; }
  .wb5-preview-stats { grid-template-columns:1fr 1fr; }
  .wb5-preview-stats article:last-child { display:none; }
  .wb5-floating-card { display:none; }
  .wb5-proof-strip { width:calc(100% - 28px); padding:21px; grid-template-columns:1fr; }
  .wb5-proof-strip div { padding:12px 0 0; border-left:0; border-top:1px solid #e8ecf2; }
  .wb5-proof-strip div:first-child { padding-top:0; border-top:0; }
  .wb5-section,.wb5-final-cta,.wb5-footer { width:calc(100% - 28px); }
  .wb5-section { padding:68px 0; }
  .wb5-section-head { margin-bottom:30px; }
  .wb5-section-head h2,.wb5-builder-copy h2,.wb5-device-copy h2,.wb5-final-cta h2 { font-size:34px; }
  .wb5-feature-grid,.wb5-app-grid,.wb5-tier-flow { grid-template-columns:1fr; }
  .wb5-tier-flow article { min-height:auto; }
  .wb5-tier-flow article > p { min-height:auto; }
  .wb5-growth-section,.wb5-connected-section { width:100%; padding-left:14px; padding-right:14px; }
  .wb5-builder-section { gap:38px; }
  .wb5-builder-layout { min-height:390px; grid-template-columns:72px 1fr; }
  .wb5-builder-toolbar > button:not(.primary) { display:none; }
  .wb5-service-cards { grid-template-columns:1fr 1fr; }
  .wb5-service-cards article:last-child { display:none; }
  .wb5-connected-flow { grid-template-columns:1fr; }
  .wb5-connected-flow article { min-height:100px; }
  .wb5-device-copy ul { grid-template-columns:1fr; }
  .wb5-devices { min-height:310px; transform:scale(.85); transform-origin:center top; }
  .wb5-security-section { padding:28px; grid-template-columns:1fr; }
  .wb5-security-points { grid-template-columns:1fr; }
  .wb5-final-cta { margin:50px auto; padding:30px 23px; }
  .wb5-final-cta > div:last-child { display:grid; }
  .wb5-final-cta .btn { width:100%; }
  .wb5-footer > div:nth-child(2) { gap:12px; }
  .wb5-pricing-hero { width:calc(100% - 28px); padding:65px 0 38px; }
  .wb5-pricing-hero h1 { font-size:43px; }
  .wb5-pricing-hero > p { font-size:15px; }
  .wb5-pricing-section,.wb5-pricing-builder { width:calc(100% - 28px); }
  .wb5-pricing-section,.wb5-config-card { padding:22px; }
  .wb5-pricing-tiers { grid-template-columns:1fr; }
  .wb5-module-grid,.wb5-seat-grid,.wb5-resource-grid,.wb5-pricing-explain > div:last-child { grid-template-columns:1fr; }
  .wb5-quote-card { padding:20px; }
}
.wb5-module-grid > button.included { cursor:default; }
.wb5-module-grid > button.included > i { color:#5677ac; }
.wb5-module-grid > button:disabled { opacity:1; }


/* ======================================================================
   WorkBlock 5.3 — unified White interface, communications and Vision
   ====================================================================== */
:root[data-theme="orange-dark"], :root[data-theme="blue-sky"], :root[data-theme="blue-white"] { color-scheme:light; }
html:not([data-view="landing"]):not([data-view="pricing"]) body { background:var(--bg); }
.appearance-control.white-only { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; font-weight:700; }
.appearance-control.white-only .theme-swatch { flex:none; }
.wb5-communications-section { padding-top:105px; }
.wb5-communications-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); gap:18px; align-items:stretch; }
.wb5-chat-demo,.wb5-call-demo,.wb5-vision-demo { border:1px solid #dde5f0; border-radius:22px; background:#fff; box-shadow:0 24px 70px rgba(31,50,87,.11); overflow:hidden; }
.wb5-chat-demo { min-height:500px; display:grid; grid-template-columns:220px 1fr; }
.wb5-chat-demo > aside { padding:18px 12px; display:flex; flex-direction:column; gap:6px; border-right:1px solid #e7ebf2; background:#f7f9fc; }
.wb5-chat-demo > aside > small { padding:0 8px 9px; color:#7b8799; font-size:10px; font-weight:800; text-transform:uppercase; }
.wb5-chat-demo > aside button { width:100%; padding:10px; display:grid; grid-template-columns:38px 1fr; gap:9px; border:0; border-radius:11px; background:transparent; color:#46556b; text-align:left; }
.wb5-chat-demo > aside button.active { background:#e8f0ff; color:#1f55bd; }
.wb5-chat-demo > aside button > span { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:#fff; color:#315dba; font-size:10px; font-weight:850; }
.wb5-chat-demo > aside button > div { min-width:0; display:grid; grid-template-columns:1fr auto; gap:2px 6px; }
.wb5-chat-demo > aside button b { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.wb5-chat-demo > aside button small { grid-column:1/-1; overflow:hidden; color:#8490a2; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.wb5-chat-demo > aside button em { width:18px; height:18px; display:grid; place-items:center; border-radius:999px; background:#2563eb; color:#fff; font-size:7px; font-style:normal; }
.wb5-chat-demo > main { min-width:0; display:grid; grid-template-rows:auto 1fr auto; }
.wb5-chat-demo > main > header { min-height:65px; padding:0 18px; display:flex; align-items:center; gap:8px; border-bottom:1px solid #e8edf3; }
.wb5-chat-demo > main > header > div { margin-right:auto; display:grid; gap:3px; }
.wb5-chat-demo > main > header b { font-size:13px; }
.wb5-chat-demo > main > header small { color:#7e899a; font-size:8px; }
.wb5-chat-demo > main > header button { width:34px; height:34px; display:grid; place-items:center; border:1px solid #e1e7ef; border-radius:10px; background:#fff; color:#3765bd; }
.wb5-chat-demo > main > section { padding:22px; display:flex; flex-direction:column; gap:19px; background:linear-gradient(180deg,#fff,#fbfcff); }
.wb5-chat-demo .message { display:flex; align-items:flex-start; gap:9px; max-width:82%; }
.wb5-chat-demo .message.own { align-self:flex-end; }
.wb5-chat-demo .message > span { width:30px; height:30px; display:grid; place-items:center; flex:none; border-radius:9px; background:#eaf1ff; color:#2b5fc4; font-size:8px; font-weight:850; }
.wb5-chat-demo .message article { padding:11px 13px; border:1px solid #e4eaf2; border-radius:5px 14px 14px; background:#fff; box-shadow:0 6px 18px rgba(35,54,86,.05); }
.wb5-chat-demo .message.own article { border-radius:14px 5px 14px 14px; border-color:#d6e4ff; background:#edf4ff; }
.wb5-chat-demo .message b { font-size:9px; } .wb5-chat-demo .message b small { margin-left:5px; color:#98a1b0; font-size:7px; font-weight:500; }
.wb5-chat-demo .message p { margin:6px 0 0; color:#4e5d72; font-size:10px; line-height:1.45; } .wb5-chat-demo .message strong { color:#2563eb; }
.wb5-chat-demo .message em { margin-top:8px; padding:7px 9px; display:block; border-radius:8px; background:#f4f7fb; color:#48627f; font-size:8px; font-style:normal; }
.wb5-chat-demo > main > footer { min-height:58px; padding:9px 12px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:7px; border-top:1px solid #e8edf3; }
.wb5-chat-demo > main > footer > span { padding:0 12px; color:#929cac; font-size:9px; } .wb5-chat-demo > main > footer button { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:10px; background:#f1f4f8; color:#68778b; } .wb5-chat-demo > main > footer button.send { background:#2563eb; color:#fff; }
.wb5-call-demo { min-height:500px; padding:18px; display:grid; grid-template-rows:auto 1fr auto; color:#f8fafc; background:linear-gradient(145deg,#162238,#0f172a); }
.wb5-call-top { display:flex; align-items:center; gap:7px; } .wb5-call-top small { margin-right:auto; color:#cbd5e1; font-size:9px; } .wb5-call-top b { font-size:10px; }
.wb5-call-stage { padding:24px 0; display:grid; grid-template-columns:1fr 1fr; gap:9px; align-content:center; } .wb5-call-stage article { min-height:125px; padding:13px; display:grid; place-items:center; align-content:center; gap:7px; border:1px solid rgba(255,255,255,.09); border-radius:15px; background:rgba(255,255,255,.06); } .wb5-call-stage article.speaker { grid-column:1/-1; min-height:190px; background:linear-gradient(145deg,rgba(63,104,185,.38),rgba(255,255,255,.05)); }
.wb5-call-stage article > div { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:#315baf; font-size:12px; font-weight:850; } .wb5-call-stage article b { font-size:10px; } .wb5-call-stage article small { color:#a9b8cc; font-size:8px; }
.wb5-call-demo > footer { display:flex; justify-content:center; gap:8px; } .wb5-call-demo > footer button { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12); border-radius:13px; background:rgba(255,255,255,.09); color:#fff; } .wb5-call-demo > footer button.end { background:#e5484d; border-color:#e5484d; transform:rotate(135deg); }
.wb5-communication-points { margin-top:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:11px; } .wb5-communication-points article { padding:19px; border:1px solid #e4e9f1; border-radius:15px; background:#fff; } .wb5-communication-points svg { color:#2563eb; } .wb5-communication-points b { margin:12px 0 7px; display:block; font-size:13px; } .wb5-communication-points p { margin:0; color:#6f7b8e; font-size:10px; line-height:1.5; }
.wb5-vision-section { display:grid; grid-template-columns:.78fr 1.22fr; gap:70px; align-items:center; } .wb5-vision-copy h2 { margin:19px 0 16px; font-size:clamp(36px,4vw,54px); line-height:1.07; letter-spacing:-.045em; } .wb5-vision-copy > p { color:#68758a; font-size:16px; line-height:1.7; } .wb5-vision-copy ul { margin:25px 0 0; padding:0; display:grid; gap:11px; list-style:none; } .wb5-vision-copy li { display:flex; align-items:center; gap:8px; color:#47566d; font-size:13px; font-weight:700; } .wb5-vision-copy li svg { color:#0f9f6e; }
.wb5-vision-demo > header { height:58px; padding:0 16px; display:flex; align-items:center; gap:13px; border-bottom:1px solid #e6ebf2; } .wb5-vision-demo > header > span { margin-right:auto; display:flex; align-items:center; gap:7px; font-weight:800; } .wb5-vision-demo > header > div { display:flex; align-items:center; gap:6px; color:#657287; font-size:8px; } .wb5-vision-demo > header i { width:8px; height:8px; border-radius:50%; background:#0f9f6e; } .wb5-vision-demo > header button { min-height:32px; padding:0 11px; border:1px solid #d9e2ef; border-radius:9px; background:#fff; color:#315fb9; font-size:8px; font-weight:800; }
.wb5-vision-demo > nav { padding:0 22px; min-height:53px; display:flex; align-items:center; gap:18px; border-bottom:1px solid #edf0f4; } .wb5-vision-demo > nav b { margin-right:auto; } .wb5-vision-demo > nav a { padding:17px 0 14px; color:#758095; font-size:9px; font-weight:750; } .wb5-vision-demo > nav a.active { color:#2158bf; border-bottom:2px solid #2563eb; }
.wb5-vision-demo > main { padding:28px; background:#f7f9fc; } .wb5-vision-hero { padding:28px; border:1px solid #e3e9f1; border-radius:17px; background:#fff; } .wb5-vision-hero > small { color:#3262c5; font-size:9px; font-weight:800; text-transform:uppercase; } .wb5-vision-hero h3 { margin:10px 0; font-size:26px; letter-spacing:-.035em; } .wb5-vision-hero p { margin:0; color:#6d798b; font-size:11px; } .wb5-vision-hero > div { margin-top:23px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; } .wb5-vision-hero > div > span { color:#1f55b9; font-size:18px; font-weight:850; } .wb5-vision-hero > div > i { height:7px; border-radius:999px; background:#e6ebf2; overflow:hidden; } .wb5-vision-hero > div > i em { width:72%; height:100%; display:block; background:linear-gradient(90deg,#2563eb,#6a99ff); } .wb5-vision-hero > div > b { color:#7f8a9c; font-size:8px; }
.wb5-vision-demo > main > section { margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; } .wb5-vision-demo > main > section article { padding:16px; display:grid; gap:6px; border:1px solid #e3e9f1; border-radius:13px; background:#fff; } .wb5-vision-demo > main > section span { color:#3262c5; font-size:7px; font-weight:850; text-transform:uppercase; } .wb5-vision-demo > main > section b { font-size:10px; } .wb5-vision-demo > main > section small { color:#8791a2; font-size:8px; } .wb5-vision-demo > main > footer { margin-top:15px; color:#8090a6; font-size:8px; text-align:center; }
.wb5-platform-section { padding-top:95px; } .wb5-platform-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .wb5-platform-grid article { padding:23px; border:1px solid #e3e9f1; border-radius:17px; background:#fff; transition:transform .2s ease,box-shadow .2s ease; } .wb5-platform-grid article:hover { transform:translateY(-3px); box-shadow:0 18px 45px rgba(31,50,87,.09); } .wb5-platform-grid article > span { width:43px; height:43px; display:grid; place-items:center; border-radius:12px; background:#edf4ff; color:#2862cf; } .wb5-platform-grid h3 { margin:18px 0 8px; font-size:16px; } .wb5-platform-grid p { margin:0; color:#6d798c; font-size:11px; line-height:1.6; }
.wb5-advantages-section { width:100%; max-width:none; padding:100px max(24px,calc((100vw - 1372px)/2)); background:#f6f8fc; } .wb5-advantages-table { overflow:hidden; border:1px solid #dfe6ef; border-radius:18px; background:#fff; } .wb5-advantages-table > header,.wb5-advantages-table > article { display:grid; grid-template-columns:.55fr 1.1fr 1.1fr; gap:18px; align-items:center; padding:17px 21px; } .wb5-advantages-table > header { background:#edf3fc; color:#40516a; font-size:10px; text-transform:uppercase; } .wb5-advantages-table > article + article { border-top:1px solid #e9edf3; } .wb5-advantages-table > article > b { font-size:12px; } .wb5-advantages-table > article > span { color:#6c788b; font-size:11px; line-height:1.45; } .wb5-advantages-table .positive { display:flex; align-items:flex-start; gap:7px; color:#284f91; font-weight:700; } .wb5-advantages-table .positive svg { flex:none; color:#0f9f6e; } .wb5-advantage-summary { margin-top:15px; display:grid; grid-template-columns:repeat(3,1fr); gap:11px; } .wb5-advantage-summary article { padding:20px; border:1px solid #e2e8f0; border-radius:15px; background:#fff; } .wb5-advantage-summary b { font-size:14px; } .wb5-advantage-summary p { margin:7px 0 0; color:#6d798c; font-size:10px; line-height:1.55; }
.wb5-resource-grid { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); }
@media(max-width:1050px){.wb5-communications-layout,.wb5-vision-section{grid-template-columns:1fr}.wb5-call-demo{min-height:430px}.wb5-platform-grid{grid-template-columns:1fr 1fr}.wb5-communication-points{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.wb5-chat-demo{grid-template-columns:1fr}.wb5-chat-demo>aside{display:none}.wb5-call-stage article.speaker{min-height:150px}.wb5-communication-points,.wb5-platform-grid,.wb5-vision-demo>main>section,.wb5-advantage-summary{grid-template-columns:1fr}.wb5-advantages-table>header{display:none}.wb5-advantages-table>article{grid-template-columns:1fr;gap:8px}.wb5-advantages-table>article>span{padding-left:0}.wb5-vision-demo>nav a{display:none}.wb5-vision-demo>nav a.active{display:block}}

/* ======================================================================
   WorkBlock 5.3.1 — landing typography and icon consistency
   ====================================================================== */
.wb5-section-kicker {
  width:max-content;
  max-width:100%;
  display:inline-flex !important;
  align-items:center;
  gap:8px;
}
.wb5-section-kicker > svg { flex:none; }
.wb5-proof-strip > div {
  display:flex;
  grid-template-columns:none;
  align-items:center;
  gap:13px;
}
.wb5-proof-strip > div > i {
  flex:none;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#edf4ff;
  color:#2e63cb;
  font-style:normal;
}
.wb5-proof-strip > div > span { display:grid; gap:4px; }
.wb5-proof-strip > div > span b { font-size:18px; letter-spacing:-.02em; }
.wb5-proof-strip > div > span small { color:var(--wb5-muted); font-size:12px; line-height:1.4; }
.wb5-advantage-summary article { display:flex; align-items:flex-start; gap:14px; }
.wb5-advantage-summary article > span {
  flex:none;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#edf4ff;
  color:#2c62cc;
}
.wb5-advantage-summary article > div { min-width:0; }

@media (min-width:1600px) {
  .wb5-landing .wb5-header {
    min-height:86px;
    padding-left:max(34px,calc((100vw - 1680px)/2));
    padding-right:max(34px,calc((100vw - 1680px)/2));
    gap:36px;
  }
  .wb5-landing .wb5-brand-mark { width:46px; height:46px; border-radius:14px; }
  .wb5-landing .wb5-brand b { font-size:20px; }
  .wb5-landing .wb5-brand small { font-size:12px; }
  .wb5-landing .wb5-nav { gap:9px; }
  .wb5-landing .wb5-nav a { padding:12px 15px; font-size:16px; }
  .wb5-landing .wb5-header-actions .btn { min-height:48px; padding-inline:17px; font-size:15px; }

  .wb5-landing .wb5-hero {
    width:min(1680px,100%);
    min-height:890px;
    padding:132px 48px 108px;
    grid-template-columns:minmax(0,.84fr) minmax(720px,1.16fr);
    gap:86px;
  }
  .wb5-landing .wb5-eyebrow { font-size:14px; gap:11px; }
  .wb5-landing .wb5-hero h1 { max-width:800px; margin:29px 0 27px; font-size:clamp(76px,4.8vw,96px); line-height:1.01; }
  .wb5-landing .wb5-hero-copy > p { max-width:800px; font-size:22px; line-height:1.67; }
  .wb5-landing .wb5-hero-actions { margin:38px 0 25px; gap:13px; }
  .wb5-landing .btn.xl { min-height:58px; padding:0 27px; font-size:18px; }
  .wb5-landing .wb5-hero-note { gap:11px 22px; }
  .wb5-landing .wb5-hero-note span { font-size:14px; }
  .wb5-landing .wb5-product-preview { padding-block:28px 35px; }
  .wb5-landing .wb5-preview-window { min-height:590px; border-radius:25px; }
  .wb5-landing .wb5-preview-top { height:64px; padding-inline:21px; }
  .wb5-landing .wb5-preview-top > b { font-size:15px; }
  .wb5-landing .wb5-preview-body { min-height:526px; grid-template-columns:178px 1fr; }
  .wb5-landing .wb5-preview-body > aside { padding:19px 13px; gap:6px; }
  .wb5-landing .wb5-preview-body > aside > button { min-height:42px; padding-inline:13px; gap:10px; font-size:13px; }
  .wb5-landing .wb5-preview-upgrade { padding:15px; gap:7px; }
  .wb5-landing .wb5-preview-upgrade small { font-size:10px; }
  .wb5-landing .wb5-preview-upgrade b { font-size:12px; }
  .wb5-landing .wb5-preview-upgrade span { font-size:11px; }
  .wb5-landing .wb5-preview-body > section { padding:31px 30px; }
  .wb5-landing .wb5-preview-heading small { font-size:11px; }
  .wb5-landing .wb5-preview-heading h3 { font-size:22px; }
  .wb5-landing .wb5-preview-heading button { min-height:38px; padding-inline:15px; font-size:11px; }
  .wb5-landing .wb5-preview-stats { margin-top:24px; gap:12px; }
  .wb5-landing .wb5-preview-stats article { padding:17px; gap:6px; }
  .wb5-landing .wb5-preview-stats small,.wb5-landing .wb5-preview-stats span { font-size:10px; }
  .wb5-landing .wb5-preview-stats b { font-size:26px; }
  .wb5-landing .wb5-preview-grid { margin-top:17px; gap:13px; }
  .wb5-landing .wb5-preview-grid > article { padding:18px; }
  .wb5-landing .wb5-preview-grid .tasks > div { font-size:12px; }
  .wb5-landing .wb5-preview-grid .tasks > div span { font-size:10px; }
  .wb5-landing .wb5-preview-grid label { padding:14px 0; grid-template-columns:15px 1fr auto; gap:10px; }
  .wb5-landing .wb5-preview-grid label b { font-size:11px; }
  .wb5-landing .wb5-preview-grid label small { font-size:9px; }
  .wb5-landing .wb5-preview-grid label em { padding:4px 7px; font-size:8px; }
  .wb5-landing .wb5-preview-grid .timeline > b { font-size:12px; }
  .wb5-landing .wb5-preview-grid .timeline time { font-size:9px; }
  .wb5-landing .wb5-preview-grid .timeline b { font-size:10px; }
  .wb5-landing .wb5-preview-grid .timeline small { font-size:9px; }
  .wb5-landing .wb5-floating-card { min-width:245px; padding:15px 17px; }
  .wb5-landing .wb5-floating-card b { font-size:13px; }
  .wb5-landing .wb5-floating-card small { font-size:10px; }

  .wb5-landing .wb5-proof-strip,
  .wb5-landing .wb5-section,
  .wb5-landing .wb5-final-cta,
  .wb5-landing .wb5-footer { width:min(1580px,calc(100% - 68px)); }
  .wb5-landing .wb5-proof-strip { margin-bottom:40px; padding:31px 36px; gap:30px; }
  .wb5-landing .wb5-proof-strip > div { gap:15px; }
  .wb5-landing .wb5-proof-strip > div > i { width:50px; height:50px; border-radius:15px; }
  .wb5-landing .wb5-proof-strip > div > span b { font-size:21px; }
  .wb5-landing .wb5-proof-strip > div > span small { font-size:14px; }

  .wb5-landing .wb5-section { padding:132px 0; }
  .wb5-landing .wb5-section-head { max-width:1000px; margin-bottom:56px; }
  .wb5-landing .wb5-section-head > span,
  .wb5-landing .wb5-builder-copy > .wb5-access-badge,
  .wb5-landing .wb5-device-copy > span,
  .wb5-landing .wb5-security-section > div > span,
  .wb5-landing .wb5-final-cta > div > span { font-size:13px; }
  .wb5-landing .wb5-section-head h2,
  .wb5-landing .wb5-builder-copy h2,
  .wb5-landing .wb5-device-copy h2,
  .wb5-landing .wb5-security-section h2,
  .wb5-landing .wb5-final-cta h2,
  .wb5-landing .wb5-vision-copy h2 { font-size:clamp(48px,3.25vw,64px); }
  .wb5-landing .wb5-section-head p,
  .wb5-landing .wb5-builder-copy > p,
  .wb5-landing .wb5-device-copy > p,
  .wb5-landing .wb5-security-section p,
  .wb5-landing .wb5-final-cta p,
  .wb5-landing .wb5-vision-copy > p { font-size:20px; line-height:1.68; }
  .wb5-landing .wb5-section-kicker { gap:10px; }

  .wb5-landing .wb5-feature-grid { gap:18px; }
  .wb5-landing .wb5-feature-grid article { min-height:270px; padding:34px; border-radius:21px; }
  .wb5-landing .wb5-feature-grid article > span { width:54px; height:54px; border-radius:15px; }
  .wb5-landing .wb5-feature-grid h3 { margin-top:28px; font-size:23px; }
  .wb5-landing .wb5-feature-grid p { font-size:16px; }

  .wb5-landing .wb5-growth-section,
  .wb5-landing .wb5-connected-section { padding-left:max(34px,calc((100vw - 1580px)/2)); padding-right:max(34px,calc((100vw - 1580px)/2)); }
  .wb5-landing .wb5-tier-flow { gap:14px; }
  .wb5-landing .wb5-tier-flow article { min-height:430px; padding:28px 23px; border-radius:20px; }
  .wb5-landing .wb5-tier-top > span { width:42px; height:42px; }
  .wb5-landing .wb5-tier-top small { font-size:10px; }
  .wb5-landing .wb5-tier-top em { padding:7px 10px; font-size:9px; }
  .wb5-landing .wb5-tier-flow h3 { font-size:28px; }
  .wb5-landing .wb5-tier-flow article > b { font-size:13px; }
  .wb5-landing .wb5-tier-flow article > p { min-height:105px; font-size:14px; line-height:1.58; }
  .wb5-landing .wb5-tier-flow li { gap:8px; font-size:12px; }
  .wb5-landing .wb5-link-button { font-size:13px; }

  .wb5-landing .wb5-builder-section { grid-template-columns:.78fr 1.22fr; gap:88px; }
  .wb5-landing .wb5-builder-steps { margin-block:34px; gap:15px; }
  .wb5-landing .wb5-builder-steps article { padding:18px; gap:15px; }
  .wb5-landing .wb5-builder-steps article > span { width:38px; height:38px; font-size:14px; }
  .wb5-landing .wb5-builder-steps b { font-size:16px; }
  .wb5-landing .wb5-builder-steps small { font-size:14px; }
  .wb5-landing .wb5-builder-toolbar { min-height:62px; padding-inline:16px; }
  .wb5-landing .wb5-builder-toolbar > b { font-size:14px; }
  .wb5-landing .wb5-builder-toolbar > small { font-size:10px; }
  .wb5-landing .wb5-builder-toolbar > button { min-height:35px; padding-inline:12px; font-size:10px; }
  .wb5-landing .wb5-builder-layout { min-height:530px; grid-template-columns:145px 1fr 180px; }
  .wb5-landing .wb5-builder-layout > aside { padding:17px 12px; }
  .wb5-landing .wb5-builder-layout > aside > small { font-size:9px; }
  .wb5-landing .wb5-builder-layout > aside > button { min-height:37px; font-size:10px; }
  .wb5-landing .wb5-builder-layout > main { padding:23px; }
  .wb5-landing .wb5-builder-layout main > nav { min-height:45px; padding-inline:15px; }
  .wb5-landing .wb5-builder-layout main > nav b { font-size:11px; }
  .wb5-landing .wb5-builder-layout main > nav span { font-size:8px; }
  .wb5-landing .wb5-builder-layout main > section { min-height:420px; padding:39px 31px; }
  .wb5-landing .wb5-builder-layout main > section > small { font-size:9px; }
  .wb5-landing .wb5-builder-layout main > section > h3 { font-size:22px; }
  .wb5-landing .wb5-service-cards article { padding:13px; }
  .wb5-landing .wb5-service-cards i { height:70px; }
  .wb5-landing .wb5-service-cards b { font-size:10px; }
  .wb5-landing .wb5-service-cards span { font-size:8px; }
  .wb5-landing .wb5-builder-layout main > section > button { min-height:36px; font-size:10px; }
  .wb5-landing .wb5-builder-layout .inspector > b { font-size:11px; }
  .wb5-landing .wb5-builder-layout .inspector label { font-size:8px; }
  .wb5-landing .wb5-builder-layout .inspector label span { font-size:10px; }

  .wb5-landing .wb5-communications-layout { grid-template-columns:minmax(0,1.5fr) minmax(360px,.5fr); gap:24px; }
  .wb5-landing .wb5-chat-demo,.wb5-landing .wb5-call-demo { min-height:580px; }
  .wb5-landing .wb5-chat-demo { grid-template-columns:255px 1fr; }
  .wb5-landing .wb5-chat-demo > aside > small { font-size:12px; }
  .wb5-landing .wb5-chat-demo > aside button b { font-size:13px; }
  .wb5-landing .wb5-chat-demo > aside button small { font-size:10px; }
  .wb5-landing .wb5-chat-demo > main > header { min-height:75px; }
  .wb5-landing .wb5-chat-demo > main > header b { font-size:15px; }
  .wb5-landing .wb5-chat-demo > main > header small { font-size:10px; }
  .wb5-landing .wb5-chat-demo .message b { font-size:11px; }
  .wb5-landing .wb5-chat-demo .message b small { font-size:9px; }
  .wb5-landing .wb5-chat-demo .message p { font-size:12px; }
  .wb5-landing .wb5-chat-demo .message em { font-size:10px; }
  .wb5-landing .wb5-chat-demo > main > footer > span { font-size:11px; }
  .wb5-landing .wb5-call-top small,.wb5-landing .wb5-call-top b { font-size:11px; }
  .wb5-landing .wb5-call-stage article b { font-size:12px; }
  .wb5-landing .wb5-call-stage article small { font-size:10px; }
  .wb5-landing .wb5-communication-points { gap:15px; }
  .wb5-landing .wb5-communication-points article { padding:24px; }
  .wb5-landing .wb5-communication-points b { font-size:16px; }
  .wb5-landing .wb5-communication-points p { font-size:13px; }

  .wb5-landing .wb5-vision-section { gap:90px; }
  .wb5-landing .wb5-vision-copy li { font-size:15px; }
  .wb5-landing .wb5-vision-demo > header { height:68px; }
  .wb5-landing .wb5-vision-demo > header > div,.wb5-landing .wb5-vision-demo > header button { font-size:10px; }
  .wb5-landing .wb5-vision-demo > nav { min-height:62px; }
  .wb5-landing .wb5-vision-demo > nav a { font-size:11px; }
  .wb5-landing .wb5-vision-demo > main { padding:34px; }
  .wb5-landing .wb5-vision-hero { padding:34px; }
  .wb5-landing .wb5-vision-hero > small { font-size:11px; }
  .wb5-landing .wb5-vision-hero h3 { font-size:31px; }
  .wb5-landing .wb5-vision-hero p { font-size:14px; }
  .wb5-landing .wb5-vision-demo > main > section article { padding:20px; }
  .wb5-landing .wb5-vision-demo > main > section span { font-size:9px; }
  .wb5-landing .wb5-vision-demo > main > section b { font-size:13px; }
  .wb5-landing .wb5-vision-demo > main > section small,.wb5-landing .wb5-vision-demo > main > footer { font-size:10px; }

  .wb5-landing .wb5-app-grid { gap:18px; }
  .wb5-landing .wb5-app-grid article { min-height:315px; padding:32px; border-radius:21px; }
  .wb5-landing .wb5-app-icon { width:54px; height:54px; }
  .wb5-landing .wb5-app-meta span { font-size:11px; }
  .wb5-landing .wb5-app-meta em { font-size:9px; }
  .wb5-landing .wb5-app-grid h3 { font-size:24px; }
  .wb5-landing .wb5-app-grid p { font-size:15px; }
  .wb5-landing .wb5-app-grid footer span,.wb5-landing .wb5-app-grid footer button { font-size:12px; }

  .wb5-landing .wb5-connected-flow article { min-height:170px; padding:25px; }
  .wb5-landing .wb5-connected-flow article > span { width:52px; height:52px; }
  .wb5-landing .wb5-connected-flow b { font-size:16px; }
  .wb5-landing .wb5-connected-flow small { font-size:12px; }

  .wb5-landing .wb5-device-section { gap:100px; }
  .wb5-landing .wb5-device-copy li { font-size:15px; }
  .wb5-landing .wb5-devices { min-height:500px; }
  .wb5-landing .wb5-devices .desktop { height:355px; }
  .wb5-landing .wb5-devices .tablet { height:305px; }
  .wb5-landing .wb5-devices .phone { height:270px; min-width:120px; }
  .wb5-landing .wb5-devices b { font-size:12px; }

  .wb5-landing .wb5-platform-grid { gap:16px; }
  .wb5-landing .wb5-platform-grid article { padding:29px; border-radius:20px; }
  .wb5-landing .wb5-platform-grid article > span { width:51px; height:51px; }
  .wb5-landing .wb5-platform-grid h3 { font-size:20px; }
  .wb5-landing .wb5-platform-grid p { font-size:14px; }

  .wb5-landing .wb5-advantages-section { padding:128px max(34px,calc((100vw - 1580px)/2)); }
  .wb5-landing .wb5-advantages-table > header,
  .wb5-landing .wb5-advantages-table > article { padding:22px 27px; gap:24px; }
  .wb5-landing .wb5-advantages-table > header { font-size:12px; }
  .wb5-landing .wb5-advantages-table > article > b { font-size:15px; }
  .wb5-landing .wb5-advantages-table > article > span { font-size:14px; }
  .wb5-landing .wb5-advantage-summary { gap:15px; }
  .wb5-landing .wb5-advantage-summary article { padding:25px; }
  .wb5-landing .wb5-advantage-summary b { font-size:17px; }
  .wb5-landing .wb5-advantage-summary p { font-size:13px; }

  .wb5-landing .wb5-security-section { padding:63px; gap:40px; }
  .wb5-landing .wb5-security-icon { width:96px; height:96px; }
  .wb5-landing .wb5-security-section h2 { font-size:48px; }
  .wb5-landing .wb5-security-section p { font-size:17px; }
  .wb5-landing .wb5-security-points span { padding:14px 15px; font-size:13px; }

  .wb5-landing .wb5-final-cta { margin-block:105px; padding:70px 75px; }
  .wb5-landing .wb5-final-cta h2 { font-size:50px; }
  .wb5-landing .wb5-final-cta p { font-size:19px; }
  .wb5-landing .wb5-footer { min-height:155px; }
  .wb5-landing .wb5-footer a { font-size:13px; }
  .wb5-landing .wb5-footer > small { font-size:12px; }
}

/* WorkBlock 5.4 — public launch readiness */
.wb5-public {
  --wb5-content: 1440px;
  --wb5-wide: 1760px;
  --wb5-ultra: 1960px;
}
.wb5-section { width:min(var(--wb5-content),calc(100% - 64px)); }
.wb5-section-head { max-width:980px; }
.wb5-section-head.left { max-width:1060px; }
.wb5-growth-section,.wb5-connected-section,.wb5-advantages-section {
  padding-left:max(32px,calc((100vw - var(--wb5-wide))/2));
  padding-right:max(32px,calc((100vw - var(--wb5-wide))/2));
}
.wb5-section-kicker { display:inline-flex; align-items:center; gap:8px; }

/* AI */
.wb5-ai-section { width:min(var(--wb5-wide),calc(100% - 64px)); display:grid; grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr); gap:58px; align-items:center; }
.wb5-ai-section::before { content:""; position:absolute; inset:auto 0; height:560px; z-index:-1; background:linear-gradient(90deg,#f7faff,#fff8f3); }
.wb5-ai-copy h2 { margin:17px 0 17px; max-width:760px; color:#111827; font-size:clamp(38px,4.2vw,60px); line-height:1.05; letter-spacing:-.052em; }
.wb5-ai-copy > p { margin:0; max-width:760px; color:#657187; font-size:18px; line-height:1.72; }
.wb5-ai-badge { width:max-content; display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #d9e5ff; border-radius:999px; background:#eef4ff; color:#315fbf; font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.wb5-ai-columns { margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wb5-ai-columns article { padding:21px; display:flex; gap:13px; border:1px solid #e3e9f2; border-radius:18px; background:#fff; box-shadow:0 14px 38px rgba(33,54,91,.05); }
.wb5-ai-columns article > span { flex:none; width:43px; height:43px; display:grid; place-items:center; border-radius:13px; background:#edf4ff; color:#2d63cc; }
.wb5-ai-columns b { display:block; margin-bottom:7px; color:#182236; font-size:15px; }
.wb5-ai-columns p { margin:0; color:#6d788b; font-size:12px; line-height:1.55; }
.wb5-ai-copy > ul { margin:24px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; list-style:none; }
.wb5-ai-copy > ul li { display:flex; align-items:center; gap:8px; color:#4d5b70; font-size:13px; font-weight:700; }
.wb5-ai-copy > ul svg { color:#15966b; }
.wb5-ai-demo { overflow:hidden; border:1px solid #dfe6f0; border-radius:26px; background:#fff; box-shadow:0 34px 90px rgba(32,53,92,.14); }
.wb5-ai-demo > header { padding:18px 22px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e9edf3; background:#fbfcfe; }
.wb5-ai-demo > header span { display:flex; align-items:center; gap:9px; color:#172033; font-size:14px; font-weight:850; }
.wb5-ai-demo > header span svg { color:#466fd1; }
.wb5-ai-demo > header em { padding:5px 8px; border-radius:7px; background:#f0eafe; color:#7751bb; font-size:8px; font-style:normal; font-weight:900; text-transform:uppercase; }
.wb5-ai-prompt { margin:24px 24px 0; padding:20px; border:1px solid #e6eaf1; border-radius:18px; background:#f8fafc; }
.wb5-ai-prompt small,.wb5-ai-result > small { color:#7a8698; font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.075em; }
.wb5-ai-prompt p { margin:10px 0 0; color:#28364c; font-size:14px; line-height:1.62; }
.wb5-ai-result { margin:14px 24px 24px; padding:22px; border:1px solid #dce7fb; border-radius:19px; background:linear-gradient(145deg,#f3f7ff,#fff); }
.wb5-ai-result h3 { margin:7px 0 16px; font-size:25px; letter-spacing:-.035em; }
.wb5-ai-result > div { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.wb5-ai-result > div span { padding:12px; display:grid; gap:2px; border-radius:12px; background:#fff; color:#6c788c; font-size:9px; }
.wb5-ai-result > div b { color:#1c3f83; font-size:18px; }
.wb5-ai-result ul { margin:17px 0; padding-left:20px; color:#536177; font-size:12px; line-height:1.8; }
.wb5-ai-result button { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:12px; background:#2563eb; color:#fff; font-size:12px; font-weight:850; cursor:pointer; }

/* Public application catalog */
.wb5-app-catalog-section { width:min(var(--wb5-wide),calc(100% - 64px)); }
.wb5-catalog-stats { margin:-18px 0 26px; display:flex; flex-wrap:wrap; gap:10px; }
.wb5-catalog-stats span { padding:9px 12px; border:1px solid #e1e7ef; border-radius:999px; background:#fff; color:#657187; font-size:11px; }
.wb5-catalog-stats b { color:#215bc6; font-size:14px; }
.wb5-catalog-tools { margin-bottom:22px; display:grid; grid-template-columns:minmax(300px,460px) 1fr; gap:18px; align-items:start; }
.wb5-catalog-tools > label { min-height:48px; padding:0 15px; display:flex; align-items:center; gap:10px; border:1px solid #dce3ed; border-radius:14px; background:#fff; color:#708099; }
.wb5-catalog-tools input { width:100%; border:0; outline:0; background:transparent; color:#172033; font-size:14px; }
.wb5-catalog-tools > div { display:flex; flex-wrap:wrap; gap:7px; }
.wb5-catalog-tools button { padding:10px 13px; border:1px solid #e0e6ef; border-radius:10px; background:#fff; color:#647086; font-size:10px; font-weight:750; cursor:pointer; }
.wb5-catalog-tools button.active { border-color:#5d8dec; background:#eef4ff; color:#285cc4; }
.wb5-catalog-layout { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:20px; align-items:start; }
.wb5-app-grid-live { grid-template-columns:repeat(3,minmax(0,1fr)); }
.wb5-app-grid-live article { min-height:285px; cursor:pointer; }
.wb5-app-grid-live article.selected { border-color:#5c8be9; box-shadow:0 0 0 3px #e9f0ff,0 20px 48px rgba(38,86,174,.10); }
.wb5-app-grid-live p { font-size:12px; }
.wb5-app-facts { margin:14px 0; display:flex; flex-wrap:wrap; gap:6px; }
.wb5-app-facts span { padding:5px 7px; border-radius:7px; background:#f2f5f9; color:#68758a; font-size:8px; font-weight:750; }
.wb5-catalog-preview { position:sticky; top:88px; padding:27px; border:1px solid #dae3ef; border-radius:21px; background:#fff; box-shadow:0 24px 60px rgba(35,55,89,.09); }
.wb5-catalog-preview-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:16px; background:#edf4ff; color:#285fc8; }
.wb5-catalog-preview > small { display:block; margin-top:15px; color:#5374b4; font-size:9px; font-weight:850; text-transform:uppercase; }
.wb5-catalog-preview h3 { margin:7px 0 9px; font-size:25px; letter-spacing:-.035em; }
.wb5-catalog-preview > p { margin:0; color:#68758a; font-size:12px; line-height:1.65; }
.wb5-catalog-preview section { margin:20px 0; padding-top:17px; border-top:1px solid #e8edf3; }
.wb5-catalog-preview section > b { display:block; margin-bottom:10px; font-size:12px; }
.wb5-catalog-preview section > span { padding:7px 0; display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:center; color:#526078; }
.wb5-catalog-preview section > span small { grid-column:2; color:#8a94a5; font-size:8px; }
.wb5-catalog-preview section > div { display:flex; flex-wrap:wrap; gap:6px; }
.wb5-catalog-preview section > div span { padding:6px 8px; border-radius:8px; background:#f2f5f9; color:#5c687c; font-size:9px; }
.wb5-catalog-register-note { margin-top:10px!important; text-align:center; text-transform:none!important; letter-spacing:0!important; color:#8a94a5!important; }
.wb5-catalog-loading { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.wb5-catalog-loading span { height:250px; border-radius:18px; background:linear-gradient(100deg,#f2f4f7,#fafbfc,#f2f4f7); background-size:220% 100%; animation:skeleton 1.3s infinite; }
.wb5-catalog-empty { padding:52px; display:grid; justify-items:center; gap:9px; border:1px dashed #ced8e6; border-radius:18px; color:#68758a; }
.wb5-catalog-empty button { border:0; background:transparent; color:#2563eb; font-weight:800; cursor:pointer; }

/* Wide growth and connected sections */
.wb5-tier-flow { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.wb5-tier-flow article { min-height:360px; padding:28px; }
.wb5-tier-flow article .wb5-tier-arrow { display:none; }
.wb5-connected-flow { grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.wb5-connected-flow article { min-height:245px; padding:27px; align-items:flex-start; justify-content:flex-start; text-align:left; }
.wb5-connected-flow article > span { width:100%; height:auto; display:flex; align-items:center; justify-content:space-between; background:transparent; }
.wb5-connected-flow article > span > svg { width:48px; height:48px; padding:12px; border-radius:14px; background:#ecf3ff; }
.wb5-connected-flow article > span > b { color:#c4cede; font-size:40px; line-height:1; }
.wb5-connected-flow h3 { margin:17px 0 9px; color:#172033; font-size:18px; }
.wb5-connected-flow p { margin:0 0 auto; color:#6a7689; font-size:12px; line-height:1.58; }
.wb5-connected-flow small { margin-top:19px; padding:6px 9px; border-radius:999px; background:#f0f3f7; font-size:9px; font-weight:850; }

/* Advantages: two readable columns */
.wb5-advantages-table > header { grid-template-columns:1fr 1fr; gap:0; padding:0; }
.wb5-advantages-table > header b { padding:20px 25px; font-size:12px; }
.wb5-advantages-table > header b:first-child { background:#eaf2ff; color:#2757b6; }
.wb5-advantages-table > header b:last-child { background:#f1f3f6; color:#667085; }
.wb5-advantages-table > article { grid-template-columns:1fr 1fr; gap:0; padding:0; align-items:stretch; }
.wb5-advantages-table > article > span { min-height:104px; padding:20px 25px; display:flex; gap:12px; align-items:flex-start; }
.wb5-advantages-table > article > span:first-child { background:#f8fbff; }
.wb5-advantages-table > article > span:last-child { border-left:1px solid #e9edf3; background:#fbfcfd; }
.wb5-advantages-table > article span > svg { flex:none; margin-top:2px; }
.wb5-advantages-table .typical > svg { color:#9ca6b5; }
.wb5-advantages-table > article b { font-size:13px; }
.wb5-advantages-table > article p { margin:6px 0 0; color:#68758a; font-size:11px; line-height:1.5; }

/* Invite registration */
.invite-access-card { margin:0 0 16px; padding:17px; display:flex; gap:13px; border:1px solid #dce6f5; border-radius:15px; background:#f4f8ff; }
.invite-access-card > span { flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:#e3edff; color:#2860c7; }
.invite-access-card b { display:block; margin-bottom:5px; color:#22314a; font-size:14px; }
.invite-access-card p { margin:0 0 10px; color:#67758a; font-size:11px; line-height:1.55; }
.invite-access-card.accepted { border-color:#cde9dc; background:#f1fbf6; }
.invite-access-card.accepted > span { background:#dcf5e8; color:#138258; }

/* Legal pages */
.wb5-legal-page { min-height:100vh; background:#f7f9fc; }
.wb5-legal-page > main { width:min(1320px,calc(100% - 48px)); margin:auto; padding:82px 0; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; }
.wb5-legal-page > main > article { overflow:hidden; border:1px solid #dfe5ee; border-radius:22px; background:#fff; }
.wb5-legal-page > main > article > header { padding:36px 42px; border-bottom:1px solid #e8edf3; background:linear-gradient(135deg,#f4f8ff,#fff); }
.wb5-legal-page > main > article > header span { display:flex; align-items:center; gap:8px; color:#3564c7; font-size:10px; font-weight:850; text-transform:uppercase; }
.wb5-legal-page h1 { margin:15px 0 10px; color:#172033; font-size:43px; letter-spacing:-.045em; }
.wb5-legal-page > main > article > header p { margin:0; color:#6d798c; font-size:14px; }
.wb5-legal-content { padding:38px 42px 55px; white-space:pre-wrap; color:#344258; font-size:14px; line-height:1.82; }
.wb5-legal-page > main > aside { position:sticky; top:92px; padding:22px; display:grid; gap:8px; border:1px solid #dfe5ee; border-radius:18px; background:#fff; }
.wb5-legal-page > main > aside > b { margin-bottom:7px; font-size:14px; }
.wb5-legal-page > main > aside a { padding:11px; display:flex; align-items:center; gap:9px; border-radius:10px; color:#46546a; text-decoration:none; font-size:11px; font-weight:750; }
.wb5-legal-page > main > aside a:hover { background:#f0f5ff; color:#2e61c5; }
.wb5-legal-page > main > aside small { margin-top:12px; color:#8a94a5; font-size:9px; line-height:1.55; }

/* Protected pricing preview */
.wb5-quote-closed > b { min-height:64px; display:flex!important; align-items:center; gap:5px; filter:none!important; }
.wb5-quote-closed > b i,.wb5-quote-lines-closed b i { display:block; width:13px; height:34px; border-radius:5px; background:linear-gradient(145deg,#d4dce8,#eef2f7); }
.wb5-quote-closed > b i:nth-child(2n) { height:40px; }
.wb5-quote-closed > span { max-width:290px; }
.wb5-quote-lines-closed b { min-width:74px; display:flex; justify-content:flex-end; gap:3px; }
.wb5-quote-lines-closed b i { width:8px; height:18px; border-radius:3px; }

@media (min-width:1600px) {
  .wb5-section { width:min(var(--wb5-wide),calc(100% - 96px)); }
  .wb5-section-head { max-width:1080px; }
  .wb5-section-head h2,.wb5-builder-copy h2,.wb5-device-copy h2,.wb5-security-section h2,.wb5-final-cta h2 { font-size:clamp(48px,3.2vw,66px); }
  .wb5-section-head p,.wb5-builder-copy > p,.wb5-device-copy > p { font-size:19px; }
  .wb5-growth-section,.wb5-connected-section,.wb5-advantages-section { padding-left:max(48px,calc((100vw - var(--wb5-wide))/2)); padding-right:max(48px,calc((100vw - var(--wb5-wide))/2)); }
  .wb5-app-grid-live { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .wb5-feature-grid article,.wb5-platform-grid article { padding:29px; }
  .wb5-feature-grid h3,.wb5-platform-grid h3 { font-size:18px; }
  .wb5-feature-grid p,.wb5-platform-grid p { font-size:13px; }
}
@media (min-width:2560px) {
  .wb5-section,.wb5-ai-section,.wb5-app-catalog-section { width:min(var(--wb5-ultra),calc(100% - 140px)); }
  .wb5-growth-section,.wb5-connected-section,.wb5-advantages-section { padding-left:max(70px,calc((100vw - var(--wb5-ultra))/2)); padding-right:max(70px,calc((100vw - var(--wb5-ultra))/2)); }
  .wb5-section-head { max-width:1200px; }
  .wb5-app-grid-live { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .wb5-catalog-layout { grid-template-columns:minmax(0,1fr) 430px; gap:28px; }
  .wb5-tier-flow { gap:24px; }
  .wb5-tier-flow article { min-height:390px; padding:34px; }
  .wb5-connected-flow { gap:22px; }
  .wb5-connected-flow article { min-height:280px; padding:34px; }
  .wb5-advantages-table > article > span { min-height:120px; padding:25px 32px; }
}
@media (max-width:1100px) {
  .wb5-ai-section,.wb5-catalog-layout { grid-template-columns:1fr; }
  .wb5-catalog-preview { position:relative; top:auto; }
  .wb5-app-grid-live { grid-template-columns:repeat(2,1fr); }
  .wb5-catalog-tools { grid-template-columns:1fr; }
  .wb5-connected-flow { grid-template-columns:1fr 1fr; }
  .wb5-connected-flow article:last-child { grid-column:1/-1; }
  .wb5-legal-page > main { grid-template-columns:1fr; }
  .wb5-legal-page > main > aside { position:static; }
}
@media (max-width:700px) {
  .wb5-ai-section,.wb5-app-catalog-section { width:calc(100% - 28px); padding:68px 0; }
  .wb5-ai-columns,.wb5-ai-copy > ul,.wb5-app-grid-live,.wb5-connected-flow { grid-template-columns:1fr; }
  .wb5-ai-demo { border-radius:18px; }
  .wb5-ai-result > div { grid-template-columns:1fr; }
  .wb5-catalog-tools > div { flex-wrap:nowrap; overflow-x:auto; padding-bottom:5px; }
  .wb5-catalog-tools button { white-space:nowrap; }
  .wb5-catalog-stats { margin-top:0; }
  .wb5-advantages-table > header { display:grid; grid-template-columns:1fr 1fr; }
  .wb5-advantages-table > article { grid-template-columns:1fr; }
  .wb5-advantages-table > article > span:last-child { border-left:0; border-top:1px solid #e9edf3; }
  .wb5-legal-page > main { width:calc(100% - 28px); padding:44px 0; }
  .wb5-legal-page > main > article > header,.wb5-legal-content { padding:25px 22px; }
  .wb5-legal-page h1 { font-size:34px; }
}

/* WorkBlock 5.4.3 — legal documents clarity */
.wb5-legal-page .wb5-nav a.active { color:#245cc5; background:#edf4ff; }
.wb5-legal-page > main > aside { gap:10px; }
.wb5-legal-page > main > aside > b { font-size:16px; color:#172033; }
.wb5-legal-page > main > aside a { min-height:56px; padding:12px 13px; border:1px solid transparent; }
.wb5-legal-page > main > aside a > span,.wb5-legal-contact > span { display:grid; gap:3px; }
.wb5-legal-page > main > aside a b,.wb5-legal-contact b { color:inherit; font-size:12px; }
.wb5-legal-page > main > aside a small,.wb5-legal-contact small { margin:0; color:#7d899b; font-size:10px; line-height:1.35; }
.wb5-legal-page > main > aside a.active { border-color:#bcd0f8; color:#245cc5; background:#edf4ff; box-shadow:0 8px 22px rgba(37,92,197,.08); }
.wb5-legal-contact { margin-top:8px; padding:13px; display:flex; align-items:center; gap:10px; border-top:1px solid #e4e9f0; color:#526176; }
@media (min-width:1600px) {
  .wb5-legal-page > main { width:min(1540px,calc(100% - 80px)); grid-template-columns:minmax(0,1fr) 340px; gap:32px; }
  .wb5-legal-content { font-size:16px; line-height:1.9; }
  .wb5-legal-page > main > article > header p { font-size:16px; }
}

/* ======================================================================
   WorkBlock 5.4.4 — ultrawide sections and clear application boot state
   ====================================================================== */
.wb-boot-screen {
  min-height:100dvh;
  padding:clamp(24px,4vw,72px);
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 16%,rgba(37,99,235,.11),transparent 30%),
    linear-gradient(180deg,#f8fbff 0%,#fff 48%,#f7f9fc 100%);
}
.wb-boot-panel {
  width:min(560px,100%);
  padding:clamp(32px,5vw,58px);
  display:grid;
  justify-items:center;
  text-align:center;
  border:1px solid #dfe7f2;
  border-radius:30px;
  background:rgba(255,255,255,.94);
  box-shadow:0 28px 90px rgba(31,49,82,.12);
}
.wb-boot-brand {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#172033;
}
.wb-boot-brand > span:last-child { display:grid; text-align:left; }
.wb-boot-brand b { font-size:19px; letter-spacing:-.035em; }
.wb-boot-brand small { margin-top:2px; color:#7b8799; font-size:10px; letter-spacing:.055em; text-transform:uppercase; }
.wb-boot-orbit {
  position:relative;
  width:116px;
  height:116px;
  margin:38px 0 28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#edf4ff;
}
.wb-boot-orbit::before,.wb-boot-orbit::after {
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(37,99,235,.22);
}
.wb-boot-orbit::before { inset:-12px; }
.wb-boot-orbit::after { inset:17px; border-style:dashed; animation:wbBootRotate 4.4s linear infinite; }
.wb-boot-orbit > span { width:44px; height:44px; border-radius:15px; background:linear-gradient(145deg,#2563eb,#6f9fff); box-shadow:0 13px 32px rgba(37,99,235,.28); }
.wb-boot-orbit > i,.wb-boot-orbit > em { position:absolute; width:12px; height:12px; border-radius:50%; background:#f97316; box-shadow:0 0 0 6px #fff; }
.wb-boot-orbit > i { top:3px; right:17px; }
.wb-boot-orbit > em { left:7px; bottom:20px; width:9px; height:9px; background:#16a36d; }
.wb-boot-kicker { color:#2e62c6; font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.wb-boot-panel h1 { margin:12px 0 12px; color:#172033; font-size:clamp(30px,5vw,44px); line-height:1.08; letter-spacing:-.055em; }
.wb-boot-panel > p { max-width:410px; margin:0; color:#68758a; font-size:15px; line-height:1.65; }
.wb-boot-progress { width:min(360px,100%); height:8px; margin:30px 0 14px; overflow:hidden; border-radius:999px; background:#e9eef5; }
.wb-boot-progress > i { width:42%; height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#2563eb,#78a4ff,#2563eb); background-size:200% 100%; animation:wbBootProgress 1.7s ease-in-out infinite; }
.wb-boot-status { display:flex; align-items:center; gap:8px; color:#69768a; font-size:12px; font-weight:750; }
.wb-boot-status > span { width:8px; height:8px; border-radius:50%; background:#16a36d; box-shadow:0 0 0 5px rgba(22,163,109,.11); animation:wbBootPulse 1.5s ease-in-out infinite; }
@keyframes wbBootRotate { to { transform:rotate(360deg); } }
@keyframes wbBootProgress { 0% { transform:translateX(-110%); } 55%,100% { transform:translateX(245%); } }
@keyframes wbBootPulse { 50% { transform:scale(.72); opacity:.62; } }

.wb5-legal-current { display:none !important; }

/* These sections intentionally use the viewport instead of the regular article width. */
.wb5-growth-section,
.wb5-connected-section,
.wb5-advantages-section {
  width:100%;
  max-width:none;
  padding-inline:clamp(28px,4vw,120px);
}
.wb5-growth-section > .wb5-section-head,
.wb5-connected-section > .wb5-section-head,
.wb5-advantages-section > .wb5-section-head {
  max-width:1280px;
}

@media (min-width:1600px) {
  .wb5-growth-section,
  .wb5-connected-section,
  .wb5-advantages-section {
    padding-top:clamp(124px,7vw,168px);
    padding-bottom:clamp(124px,7vw,168px);
  }
  .wb5-growth-section .wb5-tier-flow {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(22px,1.5vw,36px);
  }
  .wb5-growth-section .wb5-tier-flow article {
    min-height:430px;
    padding:clamp(30px,2.1vw,44px);
    border-radius:24px;
  }
  .wb5-growth-section .wb5-tier-flow h3 { font-size:30px; }
  .wb5-growth-section .wb5-tier-flow article > b { font-size:13px; }
  .wb5-growth-section .wb5-tier-flow article > p { min-height:auto; font-size:14px; line-height:1.65; }
  .wb5-growth-section .wb5-tier-flow li { font-size:12px; line-height:1.5; }
  .wb5-growth-section .wb5-link-button { font-size:13px; }

  .wb5-connected-section .wb5-connected-flow {
    width:100%;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:clamp(18px,1.4vw,34px);
  }
  .wb5-connected-section .wb5-connected-flow article {
    min-height:310px;
    padding:clamp(28px,2vw,42px);
    border-radius:24px;
  }
  .wb5-connected-section .wb5-connected-flow h3 { font-size:23px; line-height:1.18; }
  .wb5-connected-section .wb5-connected-flow p { font-size:15px; line-height:1.65; }
  .wb5-connected-section .wb5-connected-flow small { font-size:11px; }

  .wb5-advantages-section .wb5-advantages-table { border-radius:26px; }
  .wb5-advantages-section .wb5-advantages-table > header b { padding:28px 38px; font-size:15px; }
  .wb5-advantages-section .wb5-advantages-table > article > span { min-height:138px; padding:30px 38px; }
  .wb5-advantages-section .wb5-advantages-table > article b { font-size:17px; }
  .wb5-advantages-section .wb5-advantages-table > article p { font-size:14px; line-height:1.62; }
  .wb5-advantages-section .wb5-advantage-summary { gap:24px; margin-top:24px; }
  .wb5-advantages-section .wb5-advantage-summary article { padding:32px; border-radius:22px; }
  .wb5-advantages-section .wb5-advantage-summary b { font-size:20px; }
  .wb5-advantages-section .wb5-advantage-summary p { font-size:14px; }
}

@media (min-width:2400px) {
  .wb5-growth-section,
  .wb5-connected-section,
  .wb5-advantages-section {
    padding-inline:max(80px,calc((100vw - 3000px)/2));
  }
  .wb5-growth-section > .wb5-section-head,
  .wb5-connected-section > .wb5-section-head,
  .wb5-advantages-section > .wb5-section-head { max-width:1480px; }
  .wb5-growth-section .wb5-tier-flow { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .wb5-growth-section .wb5-tier-flow article { min-height:470px; }
  .wb5-connected-section .wb5-connected-flow article { min-height:340px; }
}

@media (max-width:700px) {
  .wb-boot-screen { padding:18px; }
  .wb-boot-panel { padding:30px 22px; border-radius:23px; }
  .wb-boot-orbit { width:94px; height:94px; margin:30px 0 23px; }
}

/* ======================================================================
   WorkBlock 5.4.5 — readable ultrawide grids and delayed animated boot
   ====================================================================== */
.wb-boot-gate {
  min-height:100dvh;
  background:#fff;
}
.wb-boot-gate.visible {
  background:#f8fbff;
}
.wb-boot-orbit > span {
  animation:wbBootCorePulse 2.2s ease-in-out infinite;
}
.wb-boot-orbit > i,
.wb-boot-orbit > em {
  inset:auto;
  top:50%;
  left:50%;
  margin:-6px 0 0 -6px;
  transform-origin:0 0;
  will-change:transform;
}
.wb-boot-orbit > i {
  animation:wbBootOrbitOuter 2.8s linear infinite;
}
.wb-boot-orbit > em {
  width:9px;
  height:9px;
  margin:-4.5px 0 0 -4.5px;
  animation:wbBootOrbitInner 2.05s linear infinite reverse;
}
@keyframes wbBootOrbitOuter {
  from { transform:rotate(0deg) translateX(67px) rotate(0deg); }
  to { transform:rotate(360deg) translateX(67px) rotate(-360deg); }
}
@keyframes wbBootOrbitInner {
  from { transform:rotate(32deg) translateX(43px) rotate(-32deg); }
  to { transform:rotate(392deg) translateX(43px) rotate(-392deg); }
}
@keyframes wbBootCorePulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.08); }
}

/* Large displays use fewer, wider cards. Expanding the section alone made
   six tariff cards unreadably narrow on 2K/4K screens. */
@media (min-width:1400px) {
  .wb5-landing .wb5-growth-section,
  .wb5-landing .wb5-connected-section,
  .wb5-landing .wb5-advantages-section {
    width:100%;
    max-width:none;
    padding-inline:clamp(56px,5vw,150px);
  }
  .wb5-landing .wb5-growth-section > .wb5-section-head,
  .wb5-landing .wb5-connected-section > .wb5-section-head,
  .wb5-landing .wb5-advantages-section > .wb5-section-head {
    width:min(1900px,100%);
    max-width:1900px;
    margin-inline:auto;
  }
  .wb5-landing .wb5-growth-section > .wb5-section-head > p,
  .wb5-landing .wb5-connected-section > .wb5-section-head > p,
  .wb5-landing .wb5-advantages-section > .wb5-section-head > p {
    max-width:1050px;
  }
  .wb5-landing .wb5-tier-flow {
    width:min(1900px,100%);
    margin-inline:auto;
    grid-template-columns:repeat(3,minmax(360px,1fr));
    gap:30px;
  }
  .wb5-landing .wb5-tier-flow article {
    min-width:0;
    min-height:390px;
    padding:36px;
  }
  .wb5-landing .wb5-tier-flow h3 { font-size:34px; }
  .wb5-landing .wb5-tier-flow article > b { font-size:15px; }
  .wb5-landing .wb5-tier-flow article > p { font-size:16px; line-height:1.65; }
  .wb5-landing .wb5-tier-flow li { font-size:14px; line-height:1.55; }
  .wb5-landing .wb5-tier-flow .wb5-link-button { font-size:14px; }

  .wb5-landing .wb5-connected-flow {
    width:min(1900px,100%);
    margin-inline:auto;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:28px;
  }
  .wb5-landing .wb5-connected-flow > article {
    grid-column:span 2;
    min-height:300px;
    padding:38px;
  }
  .wb5-landing .wb5-connected-flow > article:nth-of-type(4) { grid-column:2 / span 2; }
  .wb5-landing .wb5-connected-flow > article:nth-of-type(5) { grid-column:4 / span 2; }
  .wb5-landing .wb5-connected-flow h3 { font-size:27px; }
  .wb5-landing .wb5-connected-flow p { font-size:17px; }
  .wb5-landing .wb5-connected-flow small { font-size:12px; }

  .wb5-landing .wb5-advantages-table,
  .wb5-landing .wb5-advantage-summary {
    width:min(1900px,100%);
    margin-inline:auto;
  }
  .wb5-landing .wb5-advantages-table > header b {
    padding:30px 42px;
    font-size:17px;
  }
  .wb5-landing .wb5-advantages-table > article > span {
    min-height:132px;
    padding:32px 42px;
  }
  .wb5-landing .wb5-advantages-table > article b { font-size:19px; }
  .wb5-landing .wb5-advantages-table > article p { font-size:16px; line-height:1.65; }
  .wb5-landing .wb5-advantage-summary { gap:28px; margin-top:28px; }
  .wb5-landing .wb5-advantage-summary article { padding:36px; }
  .wb5-landing .wb5-advantage-summary b { font-size:22px; }
  .wb5-landing .wb5-advantage-summary p { font-size:16px; }
}

@media (min-width:2400px) {
  .wb5-landing .wb5-growth-section,
  .wb5-landing .wb5-connected-section,
  .wb5-landing .wb5-advantages-section {
    padding-inline:clamp(90px,6vw,210px);
  }
  .wb5-landing .wb5-tier-flow,
  .wb5-landing .wb5-connected-flow,
  .wb5-landing .wb5-advantages-table,
  .wb5-landing .wb5-advantage-summary,
  .wb5-landing .wb5-growth-section > .wb5-section-head,
  .wb5-landing .wb5-connected-section > .wb5-section-head,
  .wb5-landing .wb5-advantages-section > .wb5-section-head {
    width:min(2200px,100%);
    max-width:2200px;
  }
  .wb5-landing .wb5-tier-flow {
    grid-template-columns:repeat(3,minmax(520px,1fr));
    gap:40px;
  }
  .wb5-landing .wb5-tier-flow article {
    min-height:430px;
    padding:44px;
  }
  .wb5-landing .wb5-connected-flow { gap:38px; }
  .wb5-landing .wb5-connected-flow > article {
    min-height:340px;
    padding:46px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .wb-boot-orbit::after,
  .wb-boot-orbit > span,
  .wb-boot-orbit > i,
  .wb-boot-orbit > em,
  .wb-boot-progress > i,
  .wb-boot-status > span {
    animation:none !important;
  }
  .wb-boot-orbit > i { transform:translateX(67px); }
  .wb-boot-orbit > em { transform:rotate(32deg) translateX(43px) rotate(-32deg); }
}


/* ======================================================================
   WorkBlock 5.4.6 — balanced landing width
   Key sections keep the same visual axis as AI and application catalog.
   Full-width background is preserved, while content is capped at 1760px.
   ====================================================================== */
.wb5-landing .wb5-growth-section,
.wb5-landing .wb5-connected-section,
.wb5-landing .wb5-advantages-section {
  width:100%;
  max-width:none;
  box-sizing:border-box;
  padding-inline:clamp(32px,3vw,72px);
}
.wb5-landing .wb5-growth-section > .wb5-section-head,
.wb5-landing .wb5-connected-section > .wb5-section-head,
.wb5-landing .wb5-advantages-section > .wb5-section-head,
.wb5-landing .wb5-tier-flow,
.wb5-landing .wb5-connected-flow,
.wb5-landing .wb5-advantages-table,
.wb5-landing .wb5-advantage-summary {
  width:min(var(--wb5-wide),100%);
  max-width:var(--wb5-wide);
  margin-inline:auto;
}
.wb5-landing .wb5-growth-section > .wb5-section-head,
.wb5-landing .wb5-connected-section > .wb5-section-head,
.wb5-landing .wb5-advantages-section > .wb5-section-head {
  width:min(1180px,100%);
  max-width:1180px;
}
.wb5-landing .wb5-tier-flow {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,1.5vw,30px);
}
.wb5-landing .wb5-connected-flow {
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(18px,1.35vw,28px);
}
.wb5-landing .wb5-connected-flow > article {
  grid-column:span 2;
}
.wb5-landing .wb5-connected-flow > article:nth-of-type(4) { grid-column:2 / span 2; }
.wb5-landing .wb5-connected-flow > article:nth-of-type(5) { grid-column:4 / span 2; }
@media (min-width:2400px) {
  .wb5-landing .wb5-growth-section,
  .wb5-landing .wb5-connected-section,
  .wb5-landing .wb5-advantages-section {
    padding-inline:clamp(48px,3vw,96px);
  }
  .wb5-landing .wb5-tier-flow,
  .wb5-landing .wb5-connected-flow,
  .wb5-landing .wb5-advantages-table,
  .wb5-landing .wb5-advantage-summary {
    width:min(var(--wb5-wide),100%);
    max-width:var(--wb5-wide);
  }
  .wb5-landing .wb5-tier-flow {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:1100px) {
  .wb5-landing .wb5-growth-section,
  .wb5-landing .wb5-connected-section,
  .wb5-landing .wb5-advantages-section {
    padding-inline:24px;
  }
}

/* ======================================================================
   WorkBlock 5.4.7 — mobile landing and Developer Docs readability
   ====================================================================== */

@media (max-width:1100px) {
  .wb5-landing .wb5-growth-section,
  .wb5-landing .wb5-connected-section,
  .wb5-landing .wb5-advantages-section {
    width:100%;
    padding:72px 24px;
  }
  .wb5-landing .wb5-tier-flow {
    width:100%;
    max-width:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }
  .wb5-landing .wb5-tier-flow article {
    min-width:0;
    min-height:auto;
    padding:28px;
  }
  .wb5-landing .wb5-connected-flow {
    width:100%;
    max-width:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }
  .wb5-landing .wb5-connected-flow > article,
  .wb5-landing .wb5-connected-flow > article:nth-of-type(4),
  .wb5-landing .wb5-connected-flow > article:nth-of-type(5) {
    grid-column:auto;
    min-width:0;
    min-height:auto;
    padding:26px;
  }
  .wb5-landing .wb5-connected-flow > article:last-child {
    grid-column:1 / -1;
  }
}

@media (max-width:900px) {
  .wb5-public .wb5-header {
    min-height:66px;
    height:auto;
    padding:10px 14px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-auto-rows:auto;
    align-items:center;
    gap:9px 10px;
  }
  .wb5-public .wb5-brand {
    min-width:0;
    overflow:hidden;
  }
  .wb5-public .wb5-brand > span:last-child {
    min-width:0;
    overflow:hidden;
  }
  .wb5-public .wb5-brand b {
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .wb5-public .wb5-menu-toggle {
    display:grid;
    grid-column:2;
    grid-row:1;
    margin:0;
  }
  .wb5-public .wb5-nav,
  .wb5-public .wb5-header-actions {
    position:static;
    inset:auto;
    width:100%;
    margin:0;
    grid-column:1 / -1;
    border:0;
    box-shadow:none;
    transform:none;
  }
  .wb5-public .wb5-nav {
    grid-row:2;
    max-height:min(46dvh,390px);
    padding:10px;
    display:none;
    overflow:auto;
    flex-direction:column;
    align-items:stretch;
    gap:3px;
    border-radius:15px 15px 9px 9px;
    background:#f5f8fc;
  }
  .wb5-public .wb5-nav a {
    width:100%;
    min-height:44px;
    padding:11px 13px;
    display:flex;
    align-items:center;
    border-radius:10px;
    font-size:15px;
  }
  .wb5-public .wb5-header-actions {
    grid-row:3;
    padding:0 10px 10px;
    display:none;
    grid-template-columns:1fr;
    gap:7px;
    border-radius:9px 9px 15px 15px;
    background:#f5f8fc;
  }
  .wb5-public .wb5-header.open .wb5-nav,
  .wb5-public .wb5-header.open .wb5-header-actions {
    display:grid;
  }
  .wb5-public .wb5-header-actions .btn,
  .wb5-public .wb5-header-actions .btn.ghost:first-child {
    width:100%;
    display:flex;
    justify-content:center;
  }
}

@media (max-width:700px) {
  .wb5-landing .wb5-growth-section,
  .wb5-landing .wb5-connected-section,
  .wb5-landing .wb5-advantages-section {
    width:100%;
    padding:58px 16px;
  }
  .wb5-landing .wb5-growth-section > .wb5-section-head,
  .wb5-landing .wb5-connected-section > .wb5-section-head,
  .wb5-landing .wb5-advantages-section > .wb5-section-head {
    width:100%;
    margin-bottom:26px;
  }
  .wb5-landing .wb5-tier-flow {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:14px;
  }
  .wb5-landing .wb5-tier-flow article {
    width:100%;
    min-height:auto;
    padding:23px 21px;
    border-radius:18px;
  }
  .wb5-landing .wb5-tier-flow h3 { font-size:28px; }
  .wb5-landing .wb5-tier-flow article > p { font-size:14px; line-height:1.58; }
  .wb5-landing .wb5-tier-flow li { font-size:13px; }
  .wb5-landing .wb5-tier-arrow { display:none; }

  .wb5-landing .wb5-connected-flow {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }
  .wb5-landing .wb5-connected-flow > article,
  .wb5-landing .wb5-connected-flow > article:nth-of-type(4),
  .wb5-landing .wb5-connected-flow > article:nth-of-type(5),
  .wb5-landing .wb5-connected-flow > article:last-child {
    grid-column:auto;
    width:100%;
    min-height:auto;
    padding:21px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "icon title"
      "icon text"
      "icon meta";
    align-items:start;
    justify-content:stretch;
    gap:5px 14px;
    border-radius:17px;
    text-align:left;
  }
  .wb5-landing .wb5-connected-flow article > span {
    position:relative;
    grid-area:icon;
    width:47px;
    height:47px;
  }
  .wb5-landing .wb5-connected-flow article > span b {
    position:absolute;
    right:-5px;
    bottom:-5px;
    width:18px;
    height:18px;
    display:grid;
    place-items:center;
    border:2px solid #fff;
    border-radius:50%;
    background:#2563eb;
    color:#fff;
    font-size:9px;
  }
  .wb5-landing .wb5-connected-flow h3 {
    grid-area:title;
    margin:0;
    font-size:19px;
    line-height:1.25;
  }
  .wb5-landing .wb5-connected-flow p {
    grid-area:text;
    margin:0;
    font-size:14px;
    line-height:1.55;
  }
  .wb5-landing .wb5-connected-flow small {
    grid-area:meta;
    font-size:11px;
  }

  .wb5-landing .wb5-advantages-table {
    width:100%;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
  }
  .wb5-landing .wb5-advantages-table > header { display:none; }
  .wb5-landing .wb5-advantages-table > article {
    padding:0;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
    border:0;
    background:transparent;
  }
  .wb5-landing .wb5-advantages-table > article + article {
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid #dfe6ef;
  }
  .wb5-landing .wb5-advantages-table > article > span {
    min-height:0;
    padding:17px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:8px 10px;
    border:1px solid #e0e6ef;
    border-radius:14px;
    background:#fff;
  }
  .wb5-landing .wb5-advantages-table > article > span::before {
    grid-column:1 / -1;
    font-size:9px;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .wb5-landing .wb5-advantages-table .positive::before { content:"WorkBlock"; color:#2563eb; }
  .wb5-landing .wb5-advantages-table .typical::before { content:"Отдельные сервисы"; color:#7b8798; }
  .wb5-landing .wb5-advantages-table > article b { font-size:15px; }
  .wb5-landing .wb5-advantages-table > article p { font-size:13px; line-height:1.52; }
  .wb5-landing .wb5-advantage-summary {
    width:100%;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
  }
}

@media (max-width:1080px) {
  .developer-navigation {
    background:#fff;
    border-right:1px solid var(--line);
    backdrop-filter:none;
    opacity:1;
  }
  .developer-navigation.open {
    box-shadow:18px 0 46px rgba(15,23,42,.16);
  }
}
@media (max-width:760px) {
  html[data-view="api-docs-public"],
  html[data-view="api-docs-public"] body {
    background:#fff;
  }
  .developer-header {
    background:#fff;
    backdrop-filter:none;
    box-shadow:0 1px 0 var(--line);
  }
  .developer-brand > span,
  .developer-general-example,
  .developer-operation-card,
  .developer-method-grid > button,
  .developer-method-grid > button:hover,
  .developer-method-grid > button.active,
  .developer-playground,
  .developer-environment-switch button.active,
  .developer-request-builder,
  .developer-response-panel,
  .developer-code-example,
  .developer-response-examples > div,
  .developer-webhook-config,
  .developer-webhook-messages {
    box-shadow:none;
  }
  .developer-general-example,
  .developer-operation-card {
    border-radius:18px;
  }
  .developer-operation-card {
    margin-inline:-4px;
    padding:20px 16px;
  }
  .developer-navigation {
    top:66px;
    height:calc(100dvh - 66px);
    width:min(340px,92vw);
    background:#fff;
  }
}

/* WorkBlock 5.6.5 — versioned Workflow studio */
.workflow-studio-page{display:grid;gap:16px;min-width:0;padding-bottom:28px}
.workflow-studio-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 26px;border-radius:24px}
.workflow-studio-head h2{margin:4px 0 6px;font-size:28px;letter-spacing:-.035em}
.workflow-studio-head p{margin:0;max-width:760px;color:var(--muted);line-height:1.55}
.workflow-release-state{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;max-width:420px}
.workflow-unsaved-dot{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:750;color:#b45309}
.workflow-unsaved-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.12)}
.workflow-studio-tabs{display:flex;align-items:center;gap:6px;padding:7px;border-radius:18px;overflow-x:auto;scrollbar-width:none}
.workflow-studio-tabs::-webkit-scrollbar{display:none}
.workflow-studio-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-weight:750;white-space:nowrap;cursor:pointer}
.workflow-studio-tabs button:hover{background:var(--soft);color:var(--text)}
.workflow-studio-tabs button.active{background:var(--surface-strong,#fff);color:var(--text);box-shadow:0 6px 20px rgba(15,23,42,.08)}
.workflow-studio-tabs em{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--soft);font-size:11px;font-style:normal}
.workflow-loading{padding:56px;text-align:center;color:var(--muted);border-radius:24px}
.workflow-design-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start;min-width:0}
.workflow-design-main{display:grid;gap:16px;min-width:0}
.workflow-editor-section{padding:22px;border-radius:24px;min-width:0}
.workflow-editor-section>header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}
.workflow-editor-section h3{margin:3px 0 4px;font-size:20px}
.workflow-editor-section p{margin:0;color:var(--muted);line-height:1.5}
.workflow-stage-list,.workflow-transition-list{display:grid;gap:10px}
.workflow-stage-row{display:grid;grid-template-columns:34px 36px minmax(180px,1.2fr) minmax(120px,.8fr) minmax(130px,.8fr) 80px 100px minmax(140px,.8fr) 38px;gap:10px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--surface-strong,#fff);min-width:0}
.workflow-stage-order{display:grid;place-items:center;width:30px;height:34px;border-radius:10px;background:var(--soft);color:var(--muted);font-size:12px;font-weight:800;align-self:center}
.workflow-color-control{display:grid;place-items:center;width:34px;height:34px;position:relative;align-self:center}
.workflow-color-control input{position:absolute;inset:0;opacity:0;cursor:pointer}
.workflow-color-control i{display:block;width:24px;height:24px;border-radius:8px;border:2px solid var(--surface-strong,#fff);box-shadow:0 0 0 1px var(--line)}
.workflow-stage-main{display:grid;gap:4px;min-width:0}
.workflow-stage-main small{color:var(--muted);font-size:11px}
.workflow-stage-row>label:not(.workflow-color-control),.workflow-publish-panel>label{display:grid;gap:6px;min-width:0}
.workflow-stage-row>label>span,.workflow-publish-panel>label>span{font-size:11px;font-weight:750;color:var(--muted)}
.workflow-stage-row select,.workflow-transition-row select,.workflow-mapping-panel select{width:100%;min-height:40px;border:1px solid var(--line);border-radius:11px;background:var(--surface-strong,#fff);color:var(--text);padding:0 10px}
.workflow-stage-rules{display:grid;gap:7px;align-self:center}
.workflow-stage-rules .checkbox{font-size:11px;white-space:nowrap}
.workflow-transition-row{display:grid;grid-template-columns:minmax(130px,1fr) 24px minmax(130px,1fr) minmax(140px,1fr) auto auto 38px;gap:10px;align-items:center;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface-strong,#fff)}
.workflow-transition-row>.wb-icon{color:var(--muted)}
.workflow-transition-row .checkbox{font-size:12px;white-space:nowrap}
.workflow-publish-panel{position:sticky;top:86px;display:grid;gap:16px;padding:22px;border-radius:24px}
.workflow-publish-panel h3{margin:-8px 0 0;font-size:21px;letter-spacing:-.025em}
.workflow-publish-panel>p{margin:-8px 0 2px;color:var(--muted);line-height:1.5}
.workflow-publish-panel textarea{min-height:116px;resize:vertical}
.workflow-publish-panel dl{display:grid;gap:0;margin:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.workflow-publish-panel dl div{display:flex;justify-content:space-between;gap:14px;padding:11px 13px;border-bottom:1px solid var(--line)}
.workflow-publish-panel dl div:last-child{border-bottom:0}
.workflow-publish-panel dt{color:var(--muted);font-size:12px}
.workflow-publish-panel dd{margin:0;font-size:12px;font-weight:800;text-align:right}
.workflow-publish-actions{display:grid;gap:9px}
.workflow-publish-actions .btn{width:100%}
.workflow-publish-actions .link-danger{justify-self:center;border:0;background:none;cursor:pointer}
.workflow-impact-layout{display:grid;gap:16px}
.workflow-impact-summary{padding:22px 24px;border-radius:24px}
.workflow-impact-summary>header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}
.workflow-impact-summary h3{margin:4px 0 0;font-size:22px}
.workflow-impact-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.workflow-impact-metrics article{display:grid;gap:4px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--soft)}
.workflow-impact-metrics b{font-size:22px;letter-spacing:-.03em}
.workflow-impact-metrics span{font-size:12px;color:var(--muted)}
.workflow-impact-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.65fr);gap:16px}
.workflow-impact-messages,.workflow-mapping-panel{padding:22px;border-radius:24px}
.workflow-impact-messages>header,.workflow-mapping-panel>header{margin-bottom:14px}
.workflow-impact-messages h3,.workflow-mapping-panel h3{margin:0 0 4px;font-size:19px}
.workflow-mapping-panel header p{margin:0;color:var(--muted);line-height:1.45}
.workflow-impact-message{display:flex;gap:12px;padding:14px;border-radius:15px;margin-top:9px;border:1px solid var(--line)}
.workflow-impact-message.error{background:rgba(239,68,68,.07);border-color:rgba(239,68,68,.2);color:#b91c1c}
.workflow-impact-message.warning{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.22);color:#9a5600}
.workflow-impact-message.success{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.2);color:#15803d}
.workflow-impact-message b{display:block;margin-bottom:3px;font-size:13px}
.workflow-impact-message p{margin:0;color:inherit;font-size:12px;line-height:1.45}
.workflow-mapping-panel>label{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.8fr);align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.workflow-mapping-panel>label:last-of-type{border-bottom:0}
.workflow-mapping-panel>label>span{display:grid;gap:3px}
.workflow-mapping-panel>label small{color:var(--muted)}
.workflow-impact-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:18px 22px;border-radius:22px}
.workflow-impact-actions>div{margin-right:auto}
.workflow-impact-actions b{display:block;font-size:14px}
.workflow-impact-actions p{margin:3px 0 0;color:var(--muted);font-size:12px}
.workflow-version-history{padding:22px;border-radius:24px}
.workflow-version-history>header{margin-bottom:14px}
.workflow-version-history h3{margin:3px 0 4px;font-size:21px}
.workflow-version-history header p{margin:0;color:var(--muted)}
.workflow-version-history>article{display:grid;grid-template-columns:54px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.workflow-version-history>article:last-of-type{border-bottom:0}
.workflow-version-index{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--soft);font-weight:850}
.workflow-version-history article b{font-size:14px}
.workflow-version-history article p{margin:3px 0;color:var(--text);font-size:13px}
.workflow-version-history article small{color:var(--muted)}

@media (max-width:1440px){
  .workflow-design-layout{grid-template-columns:minmax(0,1fr) 300px}
  .workflow-stage-row{grid-template-columns:30px 32px minmax(170px,1fr) 120px 120px 70px 90px 38px}
  .workflow-stage-rules{grid-column:3/8;display:flex;gap:16px;padding-left:2px}
  .workflow-transition-row{grid-template-columns:minmax(120px,1fr) 22px minmax(120px,1fr) minmax(130px,1fr) 38px}
  .workflow-transition-row .checkbox{grid-row:2}
}
@media (max-width:1100px){
  .workflow-design-layout,.workflow-impact-columns{grid-template-columns:1fr}
  .workflow-publish-panel{position:static;order:-1}
  .workflow-publish-panel dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workflow-publish-panel dl div:nth-child(odd){border-right:1px solid var(--line)}
  .workflow-impact-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .workflow-studio-page{gap:12px;padding-bottom:88px}
  .workflow-studio-head{display:grid;padding:18px;border-radius:20px}
  .workflow-studio-head h2{font-size:24px}
  .workflow-release-state{justify-content:flex-start}
  .workflow-studio-tabs{margin-inline:-4px}
  .workflow-studio-tabs button{min-height:40px;padding:0 13px}
  .workflow-editor-section,.workflow-publish-panel,.workflow-impact-summary,.workflow-impact-messages,.workflow-mapping-panel,.workflow-version-history{padding:16px;border-radius:20px}
  .workflow-editor-section>header{display:grid;gap:12px}
  .workflow-editor-section>header .btn{width:100%}
  .workflow-stage-row{grid-template-columns:32px 34px minmax(0,1fr) 38px;align-items:center;padding:13px}
  .workflow-stage-main{grid-column:3/4}
  .workflow-stage-row>label:not(.workflow-color-control),.workflow-stage-rules{grid-column:1/-1}
  .workflow-stage-rules{display:flex;flex-wrap:wrap;padding:2px 0 0}
  .workflow-transition-row{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 38px;padding:12px}
  .workflow-transition-name{grid-column:1/-1}
  .workflow-transition-row .checkbox{grid-row:auto;grid-column:span 2}
  .workflow-publish-panel dl{grid-template-columns:1fr}
  .workflow-publish-panel dl div:nth-child(odd){border-right:0}
  .workflow-impact-metrics{grid-template-columns:1fr 1fr}
  .workflow-impact-summary>header{display:grid}
  .workflow-mapping-panel>label{grid-template-columns:1fr}
  .workflow-impact-actions{position:sticky;bottom:calc(74px + env(safe-area-inset-bottom));z-index:20;display:grid;padding:14px;box-shadow:0 -14px 40px rgba(15,23,42,.12)}
  .workflow-impact-actions>div{margin:0}
  .workflow-impact-actions .btn{width:100%}
  .workflow-version-history>article{grid-template-columns:48px minmax(0,1fr)}
  .workflow-version-history>article>.status-pill,.workflow-version-history>article>.btn{grid-column:2;justify-self:start}
}

/* WorkBlock 5.6.9 — unified access model */
.access-model-strip{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.15fr);gap:12px;align-items:stretch;margin:0 0 18px}
.access-model-strip article{padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--surface);display:flex;flex-direction:column;gap:7px;min-width:0}
.access-model-strip article.result{background:linear-gradient(135deg,var(--accent-soft),var(--surface));border-color:color-mix(in srgb,var(--accent) 32%,var(--border))}
.access-model-strip article b{font-size:15px}.access-model-strip article span{color:var(--muted);line-height:1.45}.access-model-strip>i{align-self:center;color:var(--muted);font-style:normal;font-size:20px}
.access-role-card{min-height:250px}.access-current-card{overflow:hidden}.access-source-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}.access-source-columns>section{border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:9px;min-width:0}
.access-member-directory{gap:10px}.access-member-row{grid-template-columns:auto minmax(240px,1fr) minmax(150px,.55fr) auto;align-items:center}.access-member-groups{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.group-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}.access-member-row .member-directory-meta small{color:var(--muted)}
.access-group-grid{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}.access-group-card{min-height:310px}.group-leader{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--surface-soft);margin:8px 0}.group-leader>span:last-child{display:flex;flex-direction:column;gap:2px}.group-leader small{color:var(--muted)}.role-badge{border-color:color-mix(in srgb,var(--accent) 28%,var(--border))}
.group-role-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}.group-role-choice .role-choice{justify-content:flex-start}.group-role-choice .role-color{width:9px;height:9px;border-radius:50%;display:inline-block}
.access-editor-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.7fr);gap:18px;align-items:start}.access-preview-panel{position:sticky;top:0;border:1px solid var(--border);border-radius:18px;padding:16px;background:var(--surface-soft);display:flex;flex-direction:column;gap:12px}.access-preview-panel>header{display:flex;justify-content:space-between;align-items:center;gap:10px}.access-preview-number{font-size:38px;font-weight:800;line-height:1;display:flex;flex-direction:column;gap:5px}.access-preview-number small{font-size:12px;font-weight:600;color:var(--muted)}.access-preview-source{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--border);padding-top:10px}.access-preview-source span{color:var(--muted)}.deny-option{border-color:color-mix(in srgb,var(--danger) 20%,var(--border))}
.access-explanation{display:flex;flex-direction:column;gap:18px}.access-explanation-summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:18px;background:var(--surface-soft)}.access-explanation-summary h3,.access-explanation-summary p{margin:0}.access-explanation-summary p{color:var(--muted);margin-top:4px}.access-explanation-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px}.access-explanation-grid>section{border:1px solid var(--border);border-radius:18px;padding:16px;min-width:0}.access-explanation-grid h3{margin:0 0 12px}.access-source-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--border)}.access-source-row:first-of-type{border-top:0}.access-source-row>div{display:flex;flex-direction:column;gap:3px}.access-source-row small{color:var(--muted)}.access-source-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}.access-source-icon.group{background:var(--success-soft);color:var(--success)}.access-source-icon.personal{background:var(--warning-soft);color:var(--warning)}
.project-access-explain{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px 0;border-top:1px solid var(--border)}.project-access-explain:first-of-type{border-top:0}.project-access-explain>div:first-child{display:flex;flex-direction:column}.project-access-explain small{color:var(--muted)}.project-access-explain .chip-row{grid-column:1/-1}.access-permission-matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:420px;overflow:auto}.access-permission-matrix article{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;padding:10px;border:1px solid var(--border);border-radius:12px;opacity:.65}.access-permission-matrix article.granted{opacity:1;border-color:color-mix(in srgb,var(--success) 28%,var(--border));background:var(--success-soft)}.access-permission-matrix article.denied{opacity:1;border-color:color-mix(in srgb,var(--danger) 28%,var(--border));background:var(--danger-soft)}.access-permission-matrix article>div{display:flex;flex-direction:column;gap:3px;min-width:0}.access-permission-matrix b{overflow-wrap:anywhere}.access-permission-matrix small{color:var(--muted)}.danger-text{color:var(--danger)!important}
@media (max-width:1050px){.access-model-strip{grid-template-columns:1fr 1fr}.access-model-strip>i{display:none}.access-editor-layout,.access-explanation-grid{grid-template-columns:1fr}.access-preview-panel{position:static}.access-member-row{grid-template-columns:auto minmax(0,1fr)}.access-member-row .member-directory-meta,.access-member-row .member-directory-actions{grid-column:2}.access-member-row .member-directory-actions{justify-content:flex-start;flex-wrap:wrap}.access-source-columns{grid-template-columns:1fr}}
@media (max-width:680px){.access-model-strip{grid-template-columns:1fr}.access-permission-matrix{grid-template-columns:1fr}.access-explanation-summary{grid-template-columns:auto minmax(0,1fr)}.access-explanation-summary .access-preview-number{grid-column:1/-1}.access-member-row{grid-template-columns:auto minmax(0,1fr);padding:14px}.group-role-choice{grid-template-columns:1fr}}