:root {
  color-scheme: light;
  --pink-700: #c94772;
  --pink-600: #e25887;
  --pink-500: #e96f98;
  --pink-400: #f08caf;
  --pink-300: #f6a9c4;
  --pink-200: #facbd9;
  --pink-100: #fbe7ef;
  --pink-050: #fff3f7;
  --aqua-500: #43bde8;
  --aqua-300: #8cddf6;
  --aqua-200: #bcecff;
  --aqua-100: #ddf6ff;
  --aqua-050: #f1fbff;
  --gfp-500: #72dc67;
  --gfp-300: #b8f58e;
  --gfp-100: #edffe4;
  --gfp-ink: #277446;
  --white: #fffdfd;
  --warm-white: #fff9fb;
  --plum-900: #34233a;
  --plum-700: #5a465f;
  --plum-500: #7f7084;
  --plum-300: #aa9dad;
  --mint: var(--gfp-ink);
  --mint-soft: var(--gfp-100);
  --blue: var(--aqua-500);
  --line: #e4e2eb;
  --line-strong: #d7cedd;
  --shadow: 0 18px 50px rgba(71, 85, 117, .1);
  --shadow-soft: 0 10px 30px rgba(71, 85, 117, .07);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --sidebar: 238px;
  --font-display: "Fredoka", sans-serif;
  --font-body: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; background: var(--warm-white); color: var(--plum-900); font: 16px/1.5 var(--font-body); }
button, input, select { color: inherit; font: inherit; }
button, select, input[type="range"], input[type="color"] { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(67, 189, 232, .34); outline-offset: 2px; }
button { min-height: 44px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 10px 14px; border-radius: 8px; background: var(--plum-900); color: white; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.main-content { min-width: 0; grid-column: 2; }
.screen { display: none; min-height: 100vh; padding: 0 28px 48px; background: radial-gradient(circle at 86% 0%, rgba(140,221,246,.24), transparent 24rem), radial-gradient(circle at 58% 8%, rgba(184,245,142,.1), transparent 18rem), radial-gradient(circle at 30% 0%, rgba(246,169,196,.14), transparent 26rem), var(--warm-white); }
.screen.is-active { display: block; animation: screen-in 280ms ease-out; }
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar); display: flex; flex-direction: column; gap: 16px; padding: 22px 16px 18px; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,253,253,.96), rgba(241,251,255,.92)); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 8px; border: 0; background: transparent; text-align: left; }
.brand > span:last-child { min-width: 0; }
.brand > span:last-child small { display: block; }
.brand > span:last-child > strong { display: block; font: 700 22px/1 var(--font-display); letter-spacing: -.03em; }
.brand > span:last-child small { margin-top: 5px; color: var(--plum-500); font-size: 11px; }
.brand-logo { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(67,189,232,.16)) drop-shadow(0 0 5px rgba(184,245,142,.16)); }
.brand-logo.large { width: 60px; height: 60px; }
.axo-mark { position: relative; flex: 0 0 auto; width: 44px; height: 40px; display: grid; place-items: center; border: 2px solid var(--pink-500); border-radius: 48% 48% 52% 52%; background: var(--warm-white); color: var(--plum-900); }
.axo-mark b { font: 700 14px var(--font-display); }
.axo-mark i { position: absolute; top: 8px; width: 13px; height: 22px; border-block: 3px solid var(--pink-500); }
.axo-mark i:first-child { left: -9px; border-radius: 70% 20% 20% 70%; transform: rotate(-12deg); }
.axo-mark i:last-child { right: -9px; border-radius: 20% 70% 70% 20%; transform: rotate(12deg); }
.workspace-switcher { display: grid; grid-template-columns: 36px minmax(0,1fr) 28px; align-items: center; gap: 9px; min-height: 64px; padding: 9px; border: 1px solid var(--aqua-200); border-radius: var(--radius-md); background: linear-gradient(120deg, var(--pink-050), var(--aqua-050)); }
.workspace-avatar, .user-avatar { display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--pink-500), var(--aqua-500)); color: white; font-weight: 700; }
.workspace-avatar { width: 36px; height: 36px; }
.workspace-switcher span:nth-child(2) { min-width: 0; }
.workspace-switcher small, .workspace-switcher strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-switcher small { color: var(--plum-500); font-size: 10px; }
.workspace-switcher strong { font-size: 12px; }
.workspace-switcher button, .sidebar-user button { min-height: 32px; border: 0; background: transparent; }
.primary-nav { display: grid; gap: 5px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--plum-700); text-align: left; }
.nav-item span { width: 22px; color: var(--plum-500); font-size: 18px; text-align: center; }
.nav-item b { font-size: 13px; font-weight: 600; }
.nav-item:hover { background: var(--pink-050); }
.nav-item.is-active { border-color: var(--aqua-200); background: linear-gradient(100deg, var(--pink-100), var(--aqua-050)); color: var(--pink-700); box-shadow: inset 3px 0 0 var(--aqua-500); }
.nav-item.is-active span { color: var(--pink-600); }
.sidebar-tip { display: grid; grid-template-columns: 42px 1fr; gap: 10px; margin-top: auto; padding: 14px; border: 1px solid var(--aqua-200); border-radius: var(--radius-lg); background: linear-gradient(145deg, #fff, var(--aqua-050)); }
.sidebar-tip strong { font-size: 12px; }
.sidebar-tip p { margin: 3px 0 0; color: var(--plum-500); font-size: 10px; line-height: 1.5; }
.mini-axo { display: inline-grid; place-items: center; width: 38px; height: 34px; border: 2px solid var(--pink-500); border-radius: 50%; background: linear-gradient(145deg, white, var(--aqua-050)); color: var(--plum-900); font: 700 12px var(--font-display); box-shadow: -7px 0 0 -4px var(--pink-300), 7px 0 0 -4px var(--pink-300), 0 0 15px rgba(184,245,142,.4); }
.mini-axo.large { width: 56px; height: 50px; font-size: 17px; }
.sidebar-user { display: grid; grid-template-columns: 36px minmax(0,1fr) 30px; align-items: center; gap: 9px; padding: 10px 8px; border-top: 1px solid var(--line); }
.sidebar-user .user-avatar { width: 36px; height: 36px; }
.sidebar-user strong, .sidebar-user small { display: block; }
.sidebar-user strong { font-size: 12px; }.sidebar-user small { color: var(--plum-500); font-size: 10px; }

.page-header { min-height: 126px; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1500px; margin: 0 auto; padding: 24px 4px 18px; }
.page-header small, .panel-heading small { color: var(--pink-700); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.page-header h1 { margin: 3px 0 2px; font: 700 clamp(30px,3vw,46px)/1 var(--font-display); letter-spacing: -.045em; }
.page-header h1 span { color: var(--pink-500); }
.page-header p { margin: 8px 0 0; color: var(--plum-500); }
.eyebrow-row { display: flex; align-items: center; gap: 8px; }
.gfp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid rgba(114,220,103,.48); border-radius: 99px; background: var(--gfp-100); color: var(--gfp-ink); font-size: 9px; font-weight: 800; letter-spacing: .08em; box-shadow: 0 0 16px rgba(184,245,142,.28); }
.gfp-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gfp-500); box-shadow: 0 0 8px var(--gfp-300); }
.compact-header { min-height: 112px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 13px; font-weight: 700; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease; }
.button:hover { transform: translateY(-2px); }.button:active { transform: scale(.98); }
.button-primary { border: 1px solid var(--pink-600); background: linear-gradient(135deg, var(--pink-600), #f33f77); color: white; box-shadow: 0 10px 24px rgba(226,88,135,.22); }
.button-ghost { border: 1px solid var(--line-strong); background: rgba(255,255,255,.82); color: var(--pink-700); }
.button-soft { border: 1px solid var(--pink-200); background: var(--pink-050); color: var(--pink-700); }
.full { width: 100%; }
.surface { border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,253,253,.93); box-shadow: var(--shadow-soft); }
.card-title { display: flex; align-items: center; gap: 10px; }
.card-title > strong { font: 600 16px var(--font-display); }.card-title > button { margin-left: auto; border: 0; background: transparent; color: var(--pink-700); font-size: 11px; }
.round-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(145deg, var(--aqua-100), var(--pink-050)); color: #267e9f; }
.success-pill, .step-pill { margin-left: auto; padding: 5px 9px; border-radius: 99px; background: var(--mint-soft); color: var(--mint); font-size: 11px; font-weight: 700; }

.celebration-layout { max-width: 1500px; display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 16px; margin: 0 auto; }
.celebration-main { min-width: 0; }
.metrics-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.goal-card, .performers-card, .achievements-card, .wins-card { padding: 20px; }
.goal-card h2 { margin: 18px 0 0; font: 700 34px var(--font-display); letter-spacing: -.04em; }.goal-card > p { margin: 0; color: var(--plum-500); font-size: 12px; }
.progress { height: 12px; margin: 24px 0 10px; overflow: hidden; border-radius: 99px; background: var(--aqua-100); }.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink-600), var(--aqua-500)); box-shadow: 0 0 12px rgba(184,245,142,.4); }
.goal-card footer { display: flex; justify-content: space-between; color: var(--plum-500); font-size: 11px; }.goal-card footer b { color: var(--plum-900); }
.performer-list, .achievement-list, .wins-list { margin: 14px 0 0; padding: 0; list-style: none; }
.performer-list li { display: grid; grid-template-columns: 24px 36px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 48px; border-top: 1px solid var(--line); }
.performer-list li > b { color: var(--pink-700); }.performer-list li > span strong, .performer-list li > span small { display: block; }.performer-list li > span strong { font-size: 12px; }.performer-list li > span small { color: var(--plum-500); font-size: 9px; }.performer-list em { color: var(--pink-700); font-size: 12px; font-style: normal; font-weight: 700; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: white; font-size: 9px; font-weight: 700; }.avatar-maya { background: #d55d81; }.avatar-ethan { background: #576886; }.avatar-sofia { background: #d58d57; }.avatar-liam { background: #3c8c85; }
.lower-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 16px; margin-top: 16px; }
.achievement-list li { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }.achievement-list li > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pink-050); color: var(--pink-600); }.achievement-list strong, .achievement-list small { display: block; }.achievement-list strong { font-size: 11px; }.achievement-list small, .achievement-list time { color: var(--plum-500); font-size: 9px; }.achievement-list time { color: var(--mint); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gfp-500); box-shadow: 0 0 0 4px var(--gfp-100), 0 0 12px var(--gfp-300); }
.wins-list li { display: grid; grid-template-columns: 36px minmax(0,1fr) 50px 40px; align-items: center; gap: 10px; min-height: 54px; border-top: 1px solid var(--line); }.wins-list strong, .wins-list small { display: block; }.wins-list strong { font-size: 11px; }.wins-list small, .wins-list time { color: var(--plum-500); font-size: 9px; }.wins-list time { text-align: right; }.replay-mini { min-height: 38px; border: 0; background: transparent; color: var(--pink-600); font-size: 18px; }
.momentum-banner { min-height: 82px; display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 20px; border: 1px solid var(--aqua-200); border-radius: var(--radius-lg); background: linear-gradient(95deg, var(--aqua-050), white 54%, var(--gfp-100)); }.momentum-banner strong { font: 600 14px var(--font-display); }.momentum-banner p { margin: 2px 0 0; color: var(--plum-500); font-size: 10px; }.momentum-banner button { margin-left: auto; }
.celebration-controls { align-self: start; position: sticky; top: 16px; padding: 20px; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.panel-heading h2 { margin: 2px 0 0; font: 600 19px var(--font-display); }.autosave { padding: 5px 8px; border-radius: 99px; background: var(--mint-soft); color: var(--mint); font-size: 9px; }
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }.style-grid button { display: grid; place-items: center; gap: 3px; min-height: 74px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--plum-700); font-size: 10px; }.style-grid button > span { color: var(--pink-600); font-size: 22px; }.style-grid button.is-active { border-color: var(--pink-500); background: var(--pink-050); color: var(--pink-700); box-shadow: inset 0 0 0 1px var(--pink-500); }
.range-field, .field-label { display: grid; gap: 7px; margin-top: 16px; font-size: 11px; font-weight: 700; }.range-field > span { display: flex; justify-content: space-between; }.range-field output { color: var(--pink-700); }.range-field input { width: 100%; accent-color: var(--pink-600); }.range-field small { display: flex; justify-content: space-between; color: var(--plum-300); font-size: 8px; font-style: normal; }.range-field small i { font-style: normal; }
.field-label input, .field-label select, .preset-picker select, .game-inspector input, .game-inspector select, .library-toolbar select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: white; }
.helper-copy { display: flex; gap: 7px; margin: 12px 0 0; color: var(--plum-500); font-size: 9px; }.helper-copy span { color: var(--mint); }

.sounds-layout { max-width: 1500px; display: grid; grid-template-columns: minmax(560px,1fr) 360px; gap: 16px; margin: 0 auto; }
.sounds-library { min-width: 0; }.upload-zone { width: 100%; min-height: 170px; display: grid; place-items: center; align-content: center; gap: 5px; border: 2px dashed var(--pink-300); border-radius: var(--radius-lg); background: radial-gradient(circle at 25% 40%, rgba(246,169,196,.16), transparent 8rem), radial-gradient(circle at 78% 40%, rgba(246,169,196,.12), transparent 10rem), white; color: var(--pink-700); }.upload-zone span { font-size: 32px; }.upload-zone strong { font: 600 18px var(--font-display); }.upload-zone small { color: var(--plum-500); font-size: 10px; }.upload-zone:hover { background-color: var(--pink-050); }
.library-toolbar { display: grid; grid-template-columns: minmax(220px,1fr) 130px 150px; gap: 10px; margin: 16px 0 10px; }.search-box { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: white; }.search-box input { width: 100%; border: 0; outline: 0; background: transparent; }
.sound-table { display: grid; gap: 7px; }.sound-row { width: 100%; display: grid; grid-template-columns: 38px 150px minmax(120px,1fr) 50px 70px 22px; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: white; text-align: left; }.sound-row:hover { border-color: var(--pink-300); }.sound-row.is-selected { border-color: var(--pink-300); background: var(--pink-050); box-shadow: inset 0 0 0 1px var(--pink-200); }.play-control { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pink-300); color: var(--plum-900); font-size: 11px; }.sound-meta strong, .sound-meta small { display: block; }.sound-meta strong { font-size: 11px; }.sound-meta small { color: var(--plum-500); font-size: 8px; }.sound-row time, .assignment-count { color: var(--plum-500); font-size: 9px; }.sound-row > b { color: var(--pink-600); font-size: 16px; }
.waveform { height: 34px; display: flex; align-items: center; gap: 2px; color: var(--pink-500); }.waveform i { width: 2px; height: 18%; border-radius: 99px; background: currentColor; }.waveform i:nth-child(2n) { height: 56%; }.waveform i:nth-child(3n) { height: 86%; }.waveform i:nth-child(5n) { height: 34%; }.waveform.alt { color: #d68ce6; }.waveform.large { flex: 1; height: 54px; }
.sound-inspector { align-self: start; position: sticky; top: 16px; padding: 22px; }.selected-sound { display: grid; grid-template-columns: 68px 1fr 34px; align-items: start; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.sound-art { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 16px; background: linear-gradient(145deg, var(--pink-200), var(--pink-050)); color: var(--pink-600); font-size: 28px; }.selected-sound small { color: var(--pink-700); font-size: 8px; font-weight: 700; }.selected-sound h2 { margin: 2px 0 7px; font: 600 20px var(--font-display); }.selected-sound div > button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--pink-600); color: white; font-size: 10px; }.selected-sound time { margin-left: 8px; }.favorite-button { min-height: 34px; border: 0; background: transparent; color: var(--pink-600); font-size: 20px; }
.form-section { margin-top: 18px; font-size: 11px; }.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }.chips button { min-height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 99px; background: var(--pink-050); font-size: 9px; }.chips .add-chip { border-style: dashed; background: white; color: var(--pink-700); }.sound-preview-strip { display: flex; align-items: center; gap: 10px; margin: 18px 0; padding: 8px 12px; border-radius: 12px; background: var(--pink-050); }.sound-preview-strip > button { width: 38px; min-height: 38px; border: 0; border-radius: 50%; background: var(--pink-600); color: white; }.sound-preview-strip time { color: var(--plum-500); font-size: 9px; }.success-message { padding: 10px; border: 1px solid #a7dfca; border-radius: 10px; background: var(--mint-soft); color: var(--mint); font-size: 9px; text-align: center; }

.preset-picker { display: flex; align-items: center; gap: 8px; color: var(--plum-500); font-size: 9px; text-transform: uppercase; }.preset-picker select { width: 230px; color: var(--plum-900); font-size: 12px; text-transform: none; }
.kombat-layout { max-width: 1560px; display: grid; grid-template-columns: 230px minmax(520px,1fr) 350px; gap: 12px; margin: 0 auto; }.studio-steps { align-self: start; overflow: hidden; }.step { display: flex; align-items: center; gap: 10px; min-height: 70px; padding: 12px; border-bottom: 1px solid var(--line); }.step > b { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: var(--plum-300); color: white; }.step span { flex: 1; }.step strong, .step small { display: block; }.step strong { font-size: 12px; }.step small { color: var(--plum-500); font-size: 9px; }.step.complete > b, .step.active > b { background: var(--pink-600); }.step.complete > i { color: var(--mint); }
.studio-steps nav { display: grid; gap: 5px; padding: 10px; border-bottom: 1px solid var(--line); }.studio-steps nav button { padding: 0 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left; font-size: 10px; }.studio-steps nav button.is-active { border-color: var(--pink-200); background: var(--pink-050); color: var(--pink-700); }.studio-tip { display: grid; gap: 4px; margin: 12px; padding: 12px; border-radius: 10px; background: var(--pink-050); color: var(--plum-500); font-size: 9px; }.studio-tip span { font-size: 18px; }.studio-tip strong { color: var(--plum-900); }
.game-stage { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-soft); }.preview-heading { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }.preview-heading > div:first-child { display: grid; grid-template-columns: 10px 1fr; column-gap: 9px; }.preview-heading strong, .preview-heading small { display: block; }.preview-heading small { grid-column: 2; color: var(--plum-500); font-size: 9px; }.preview-heading > div:last-child { display: flex; gap: 5px; }.preview-heading button { width: 40px; border: 1px solid var(--line); border-radius: 9px; background: var(--pink-050); }
.arena { --team-one: #38a8ea; --team-two: #f55286; position: relative; min-height: 600px; overflow: hidden; padding: 24px; background: radial-gradient(circle at 50% 35%, rgba(246,80,135,.3), transparent 24%), linear-gradient(#15132d 0 60%, #241a48 60% 100%); color: white; }.arena::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 72px, rgba(255,255,255,.025) 72px 74px); }.scoreboard { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 80px 1fr; align-items: start; gap: 12px; text-align: center; }.scoreboard > div { position: relative; text-align: left; }.scoreboard > div:last-child { text-align: right; }.scoreboard strong { display: block; margin-bottom: 5px; color: var(--team-one); font: 600 18px var(--font-display); text-transform: uppercase; }.scoreboard > div:last-child strong { color: var(--team-two); }.scoreboard div span { display: block; height: 24px; overflow: hidden; border: 3px solid rgba(255,255,255,.85); background: #17152d; box-shadow: 0 0 0 3px rgba(0,0,0,.3); }.scoreboard div span i { display: block; height: 100%; background: var(--team-one); }.scoreboard > div:last-child span i { margin-left: auto; background: var(--team-two); }.scoreboard div > b { position: absolute; right: 7px; bottom: 1px; }.scoreboard > div:last-child > b { right: auto; left: 7px; }.scoreboard > p { margin: 0; color: #ffd063; font: 700 11px/1.1 var(--font-display); }.scoreboard > p b { display: block; color: white; font-size: 28px; }
.arena-lights { position: absolute; inset: 95px 40px auto; display: flex; justify-content: space-around; }.arena-lights i { width: 70px; height: 160px; background: linear-gradient(rgba(255,230,180,.18), transparent); clip-path: polygon(42% 0,58% 0,100% 100%,0 100%); transform: rotate(12deg); }.arena-lights i:nth-child(2n) { transform: rotate(-12deg); }
.winner-copy { position: relative; z-index: 2; display: grid; place-items: center; margin-top: 72px; text-align: center; }.winner-copy small { color: #ffd063; font: 700 10px var(--font-display); letter-spacing: .12em; }.winner-copy > strong { max-width: 420px; color: var(--team-two); font: 700 clamp(30px,4vw,56px)/.95 var(--font-display); text-transform: uppercase; text-shadow: 0 4px 0 rgba(0,0,0,.28); }
.fighters { position: absolute; z-index: 3; inset: auto 12% 42px; display: flex; align-items: end; justify-content: space-between; }.fighter { position: relative; width: 150px; height: 170px; display: grid; place-items: center; border: 8px solid var(--team-one); border-radius: 44% 44% 38% 38%; background: #b8e7ff; color: #182039; font: 700 28px var(--font-display); box-shadow: 0 16px 0 #173b70, 0 18px 36px rgba(0,0,0,.4); }.fighter-two { border-color: var(--team-two); background: #ffd2de; box-shadow: 0 16px 0 #7e2448, 0 18px 36px rgba(0,0,0,.4); }.fighter i { position: absolute; bottom: -18px; width: 80%; height: 34px; border-radius: 50%; background: currentColor; opacity: .35; }.fighter-gills { position: absolute; top: 28px; left: -26px; width: calc(100% + 52px); color: inherit; font-size: 28px; letter-spacing: 88px; }.fighter small { position: absolute; bottom: -48px; color: white; font: 600 10px var(--font-body); white-space: nowrap; }.arena-floor { position: absolute; inset: auto 0 0; height: 190px; background: repeating-linear-gradient(90deg, transparent 0 49px, rgba(246,169,196,.12) 50px), repeating-linear-gradient(0deg, transparent 0 39px, rgba(246,169,196,.1) 40px); transform: perspective(300px) rotateX(55deg); transform-origin: bottom; }
.editable-labels { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }.editable-labels > span { width: 100%; color: var(--plum-500); font-size: 9px; }.editable-labels button { min-height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 9px; }
.game-inspector { align-self: start; overflow: hidden; }.inspector-scroll { max-height: calc(100vh - 205px); overflow-y: auto; padding: 14px; }.game-inspector fieldset { display: grid; gap: 10px; margin: 0; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); }.game-inspector legend { margin-bottom: 6px; font-size: 11px; font-weight: 700; }.game-inspector label { display: grid; gap: 5px; color: var(--plum-700); font-size: 9px; font-weight: 600; }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.sprite-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.sprite-pickers button { display: grid; place-items: center; gap: 4px; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: white; }.sprite { display: grid; place-items: center; width: 58px; height: 58px; border: 5px solid var(--blue); border-radius: 44%; background: #c5ecff; font: 700 13px var(--font-display); }.sprite.coral { border-color: var(--pink-600); background: var(--pink-100); }.sprite-pickers small { font-size: 8px; }.sprite-pickers b { color: var(--pink-700); font-size: 9px; }.arena-options { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }.arena-options button { min-height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--pink-050); }.arena-options button.is-active { border-color: var(--pink-500); box-shadow: inset 0 0 0 1px var(--pink-500); }.color-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.color-pickers label { grid-template-columns: 1fr 44px; align-items: center; }.color-pickers input { width: 44px; padding: 2px; }.game-inspector footer { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: white; }

.brand-layout { max-width: 1250px; display: grid; grid-template-columns: 460px 1fr; gap: 24px; margin: 0 auto; }.brand-form { padding: 24px; }.logo-drop { min-height: 72px; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--pink-050); }.logo-drop strong, .logo-drop small { display: block; }.logo-drop small { color: var(--plum-500); font-size: 9px; }.logo-drop button { border: 0; background: transparent; color: var(--pink-700); font-size: 10px; }.accessibility-check { display: flex; align-items: center; gap: 10px; margin: 18px 0; padding: 12px; border: 1px solid #a7dfca; border-radius: 10px; background: var(--mint-soft); }.accessibility-check > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mint); color: white; }.accessibility-check strong, .accessibility-check small { display: block; }.accessibility-check strong { font-size: 10px; }.accessibility-check small { color: var(--mint); font-size: 8px; }
.brand-preview { align-self: start; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: #f2e9ed; box-shadow: var(--shadow); }.preview-browser { height: 42px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: white; }.preview-browser > span { width: 8px; height: 8px; border-radius: 50%; background: var(--pink-300); }.preview-browser small { margin-left: auto; color: var(--plum-500); font-size: 9px; }.preview-app { min-height: 540px; display: grid; grid-template-columns: 145px 1fr; transform: scale(.96); transform-origin: center; border-radius: 16px; background: white; }.preview-app > aside { display: grid; align-content: start; justify-items: center; gap: 16px; padding: 22px 12px; border-right: 1px solid var(--line); }.preview-app > aside strong { font: 600 12px var(--font-display); }.preview-app > aside > i { width: 100%; height: 34px; border-radius: 9px; background: var(--pink-050); }.preview-app > main { padding: 30px; background: radial-gradient(circle at 80% 0, var(--pink-100), transparent 16rem); }.preview-app > main > small { color: var(--pink-700); font-size: 8px; font-weight: 700; }.preview-app > main > h2 { margin: 4px 0 20px; font: 700 32px var(--font-display); }.preview-win { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 14px; border: 1px solid var(--pink-200); border-radius: 20px; background: linear-gradient(145deg, white, var(--pink-050)); text-align: center; }.preview-win > strong { font: 600 30px/1.1 var(--font-display); }.preview-win > strong b { color: var(--pink-600); font-size: 46px; }.preview-button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 10px; background: var(--pink-600); color: white; }.preview-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; }.preview-cards i { height: 70px; border: 1px solid var(--line); border-radius: 10px; background: white; }.brand-preview > p { margin: 0; padding: 12px; color: var(--plum-500); font-size: 9px; text-align: center; }

.celebration-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(52,35,58,.32); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 200ms ease; }.celebration-overlay.is-visible { opacity: 1; pointer-events: auto; }.win-modal { position: relative; width: min(580px,100%); min-height: 480px; display: grid; place-items: center; align-content: center; padding: 48px; overflow: hidden; border: 1px solid var(--pink-200); border-radius: 30px; background: radial-gradient(circle at 50% 65%, var(--pink-100), transparent 15rem), white; box-shadow: 0 30px 100px rgba(86,35,57,.28); text-align: center; transform: translateY(24px) scale(.96); transition: transform 260ms cubic-bezier(.2,.8,.2,1); }.celebration-overlay.is-visible .win-modal { transform: none; }.close-win { position: absolute; top: 16px; right: 16px; width: 44px; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--pink-700); font-size: 20px; }.celebration-badge { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--pink-050); color: var(--pink-600); font-size: 24px; }.win-modal h2 { margin: 18px 0; font: 700 clamp(32px,5vw,54px)/1 var(--font-display); }.win-modal h2 strong { display: block; color: var(--pink-600); font-size: 1.25em; }.hero-axo { position: relative; width: 150px; height: 125px; display: grid; place-items: center; border: 8px solid var(--pink-300); border-radius: 46%; background: var(--warm-white); font: 700 32px var(--font-display); box-shadow: -30px 0 0 -18px var(--pink-300), 30px 0 0 -18px var(--pink-300); }.hero-axo > i { position: absolute; top: 28px; width: 45px; height: 60px; border-block: 10px solid var(--pink-500); }.hero-axo > i:first-child { left: -34px; transform: rotate(-12deg); }.hero-axo > i:last-of-type { right: -34px; transform: rotate(12deg); }.hero-axo span { position: absolute; right: -34px; bottom: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pink-600); color: white; font-size: 18px; }.win-modal p { color: var(--plum-500); font-size: 10px; }
.confetti { position: absolute; inset: 0; overflow: hidden; }.confetti i { position: absolute; top: -20px; width: 10px; height: 18px; border-radius: 3px; background: var(--pink-500); animation: confetti-fall 2.4s linear infinite; }.confetti i:nth-child(2n) { background: #50c7bc; }.confetti i:nth-child(3n) { background: #ffb64a; }.confetti i:nth-child(1) { left: 8%; animation-delay: -.4s; }.confetti i:nth-child(2) { left: 16%; animation-delay: -1.2s; }.confetti i:nth-child(3) { left: 25%; animation-delay: -.1s; }.confetti i:nth-child(4) { left: 35%; animation-delay: -1.7s; }.confetti i:nth-child(5) { left: 44%; animation-delay: -.7s; }.confetti i:nth-child(6) { left: 52%; animation-delay: -2s; }.confetti i:nth-child(7) { left: 61%; animation-delay: -.3s; }.confetti i:nth-child(8) { left: 70%; animation-delay: -1.5s; }.confetti i:nth-child(9) { left: 78%; animation-delay: -.8s; }.confetti i:nth-child(10) { left: 86%; animation-delay: -1.9s; }.confetti i:nth-child(11) { left: 92%; animation-delay: -.2s; }.confetti i:nth-child(12) { left: 48%; animation-delay: -1.1s; }
@keyframes confetti-fall { to { transform: translateY(110vh) rotate(520deg); } }
.celebration-overlay[data-style="Bubbles"] .confetti i { border-radius: 50%; background: transparent; border: 2px solid var(--pink-400); }.celebration-overlay[data-style="Fireworks"] .confetti i { width: 4px; height: 28px; }.celebration-overlay[data-style="Axolotl wave"] .confetti i { width: 18px; height: 18px; border-radius: 50% 50% 40% 40%; }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 150; display: flex; align-items: center; gap: 10px; min-width: 280px; padding: 13px; border: 1px solid #a7dfca; border-radius: var(--radius-md); background: white; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(14px); transition: opacity 180ms ease, transform 180ms ease; }.toast.is-visible { opacity: 1; transform: none; }.toast > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mint); color: white; }.toast strong, .toast small { display: block; }.toast strong { font-size: 11px; }.toast small { color: var(--plum-500); font-size: 9px; }

/* Aquatic secondary accent and restrained GFP fluorescence layer. */
.upload-zone { border-color: var(--aqua-300); background: radial-gradient(circle at 25% 40%, rgba(140,221,246,.22), transparent 8rem), radial-gradient(circle at 78% 40%, rgba(246,169,196,.13), transparent 10rem), white; color: #267e9f; }
.upload-zone:hover { background-color: var(--aqua-050); }
.sound-row:hover, .sound-row.is-selected { border-color: var(--aqua-300); }
.sound-row.is-selected { background: linear-gradient(100deg, var(--pink-050), var(--aqua-050)); box-shadow: inset 3px 0 0 var(--aqua-500); }
.waveform.alt { color: var(--aqua-500); }
.sound-art, .sound-preview-strip { background: linear-gradient(145deg, var(--aqua-100), var(--pink-050)); }
.achievement-list li:nth-child(2) > span, .achievement-list li:nth-child(4) > span { background: var(--gfp-100); color: var(--gfp-ink); box-shadow: 0 0 12px rgba(184,245,142,.2); }
.style-grid button:nth-child(3) > span { color: var(--aqua-500); }
.arena { background: radial-gradient(circle at 50% 32%, rgba(114,220,103,.16), transparent 18%), radial-gradient(circle at 22% 20%, rgba(67,189,232,.24), transparent 24%), radial-gradient(circle at 78% 18%, rgba(246,80,135,.28), transparent 22%), linear-gradient(#111b35 0 60%, #192d50 60% 100%); }
.arena-lights i:nth-child(2n) { background: var(--gfp-300); box-shadow: 0 0 20px var(--gfp-500); }
.fighter-one { background: linear-gradient(145deg, #dff6ff, #a9e8ff); box-shadow: 0 16px 0 #236887, 0 0 28px rgba(67,189,232,.28), 0 18px 36px rgba(0,0,0,.4); }
.sprite.blue { background: var(--aqua-100); }
.brand-preview { background: linear-gradient(145deg, #f2e9ed, var(--aqua-100)); }
.preview-browser > span:nth-child(2) { background: var(--aqua-300); }
.preview-browser > span:nth-child(3) { background: var(--gfp-300); box-shadow: 0 0 7px var(--gfp-300); }
.preview-app > aside > i:nth-of-type(2) { background: var(--aqua-100); }
.preview-app > main { background: radial-gradient(circle at 82% 0, var(--aqua-100), transparent 15rem), radial-gradient(circle at 55% 10%, var(--gfp-100), transparent 11rem), radial-gradient(circle at 16% 0, var(--pink-100), transparent 16rem); }
.preview-win { border-color: var(--aqua-200); background: linear-gradient(145deg, white, var(--pink-050) 58%, var(--aqua-050)); }
.win-modal { border-color: var(--aqua-200); background: radial-gradient(circle at 38% 64%, var(--pink-100), transparent 15rem), radial-gradient(circle at 70% 55%, var(--aqua-100), transparent 14rem), radial-gradient(circle at 50% 25%, rgba(184,245,142,.18), transparent 10rem), white; }
.celebration-badge { background: var(--aqua-100); color: #267e9f; box-shadow: 0 0 16px rgba(184,245,142,.32); }
.confetti i:nth-child(2n) { background: var(--aqua-500); }
.confetti i:nth-child(4n) { background: var(--gfp-500); box-shadow: 0 0 8px var(--gfp-300); }

/* Dashboard builder */
.dashboard-toolbar { max-width: 1500px; min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 auto 16px; padding: 10px 14px; }
.dashboard-toolbar > div { display: flex; align-items: center; gap: 9px; }.dashboard-toolbar small { color: var(--plum-500); font-size: 10px; }.dashboard-toolbar button { min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--plum-700); font-size: 10px; font-weight: 700; }
.kpi-grid { max-width: 1500px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 auto; }
.kpi-card { min-height: 240px; padding: 18px; overflow: hidden; }.kpi-card-featured { border-color: var(--aqua-200); background: radial-gradient(circle at 100% 0, var(--aqua-100), transparent 11rem), white; }
.kpi-card header { display: flex; align-items: center; gap: 8px; }.kpi-card header small { min-width: 0; overflow: hidden; color: var(--plum-500); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.kpi-card header button { margin-left: auto; border: 0; background: transparent; color: var(--plum-500); }
.source-mark, .integration-logo { display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; background-color: white; background-position: center; background-repeat: no-repeat; background-size: 62%; color: transparent; font: 700 13px var(--font-body); overflow: hidden; }.source-mark { width: 26px; height: 26px; border-radius: 8px; background-size: 60%; font-size: 10px; }.source-mark.google, .integration-logo.google { background-image: url("assets/integrations/google-sheets.svg"); }.source-mark.hubspot, .integration-logo.hubspot { background-image: url("assets/integrations/hubspot.svg"); }
.kpi-card > p { margin: 18px 0 2px; color: var(--plum-500); font-size: 11px; }.kpi-card > strong { display: block; font: 700 clamp(30px, 3vw, 43px)/1 var(--font-display); letter-spacing: -.04em; }
.kpi-change { margin-top: 9px; font-size: 10px; font-weight: 700; }.kpi-change span { color: var(--plum-500); font-weight: 500; }.kpi-change.positive { color: var(--gfp-ink); }.kpi-change.neutral { color: #267e9f; }
.kpi-spark { height: 54px; display: flex; align-items: end; gap: 5px; margin: 10px 0; }.kpi-spark i { flex: 1; border-radius: 5px 5px 2px 2px; background: var(--aqua-300); }.kpi-spark i:nth-child(1) { height: 28%; }.kpi-spark i:nth-child(2) { height: 42%; }.kpi-spark i:nth-child(3) { height: 36%; }.kpi-spark i:nth-child(4) { height: 60%; }.kpi-spark i:nth-child(5) { height: 51%; }.kpi-spark i:nth-child(6) { height: 72%; }.kpi-spark i:nth-child(7) { height: 66%; }.kpi-spark i:nth-child(8) { height: 92%; }.kpi-spark.pink i { background: var(--pink-300); }
.mini-progress { height: 9px; margin: 27px 0 24px; border-radius: 99px; background: var(--aqua-100); }.mini-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink-500), var(--aqua-500)); }.mini-progress.gfp i { background: linear-gradient(90deg, var(--aqua-500), var(--gfp-500)); box-shadow: 0 0 12px rgba(114,220,103,.28); }
.kpi-card footer, .kpi-preview-card footer { display: flex; justify-content: space-between; color: var(--plum-500); font-size: 9px; }.kpi-card footer b, .kpi-preview-card footer b { color: var(--plum-900); }
.dashboard-lower-grid { max-width: 1500px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .65fr); gap: 14px; margin: 14px auto 0; }.trend-card, .attention-card { padding: 20px; }.trend-card > header, .attention-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.trend-card small, .attention-card small { color: var(--pink-700); font-size: 8px; font-weight: 700; letter-spacing: .08em; }.trend-card h2, .attention-card h2 { margin: 3px 0 0; font: 600 18px var(--font-display); }.legend { display: flex; align-items: center; gap: 7px; color: var(--plum-500); font-size: 8px; }.aqua-dot, .pink-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--aqua-500); }.pink-dot { margin-left: 5px; background: var(--pink-400); }
.trend-chart { position: relative; min-height: 250px; margin-top: 12px; padding: 8px 0 26px 42px; }.trend-chart svg { width: 100%; height: 220px; overflow: visible; }.chart-y { position: absolute; inset: 5px auto 26px 0; display: flex; flex-direction: column; justify-content: space-between; color: var(--plum-300); font-size: 8px; }.chart-x { position: absolute; inset: auto 0 0 42px; display: flex; justify-content: space-between; color: var(--plum-300); font-size: 8px; }.chart-gridline { fill: none; stroke: #eee8ef; stroke-width: 1; }.chart-area { fill: url(#areaFill); }.chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }.chart-line.current { stroke: var(--aqua-500); }.chart-line.prior { stroke: var(--pink-300); stroke-width: 2; stroke-dasharray: 7 7; }
.attention-card header { justify-content: flex-start; }.attention-count { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pink-100); color: var(--pink-700); font-size: 11px; font-weight: 700; }.attention-card ul { margin: 14px 0; padding: 0; list-style: none; }.attention-card li { display: grid; grid-template-columns: 12px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 67px; border-top: 1px solid var(--line); }.attention-card li strong, .attention-card li small { display: block; }.attention-card li strong { font-size: 10px; }.attention-card li small { margin-top: 2px; color: var(--plum-500); font-size: 8px; }.attention-card li button { min-height: 34px; border: 0; background: transparent; color: var(--pink-700); font-size: 8px; font-weight: 700; }.status-orb { width: 9px; height: 9px; border-radius: 50%; }.status-orb.warning { background: #ffba4a; box-shadow: 0 0 0 4px #fff5db; }.status-orb.good { background: var(--gfp-500); box-shadow: 0 0 0 4px var(--gfp-100); }.status-orb.info { background: var(--aqua-500); box-shadow: 0 0 0 4px var(--aqua-100); }

/* Integration catalog */
.integration-layout { max-width: 1450px; display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 16px; margin: 0 auto; }.integration-main { min-width: 0; }.integration-summary { display: grid; grid-template-columns: repeat(4,1fr); padding: 16px; }.integration-summary > div { padding: 5px 18px; border-right: 1px solid var(--line); }.integration-summary > div:last-child { border: 0; }.integration-summary strong, .integration-summary span { display: block; }.integration-summary strong { font: 700 24px var(--font-display); }.integration-summary span { color: var(--plum-500); font-size: 8px; }.healthy-text { color: var(--gfp-ink); }
.section-title { margin: 22px 2px 10px; font: 600 16px var(--font-display); }.integration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.integration-card { padding: 20px; }.integration-card header { display: flex; justify-content: space-between; align-items: center; }.integration-logo { width: 44px; height: 44px; border-radius: 13px; font-size: 19px; }.integration-logo.small { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; }.connection-pill { padding: 5px 8px; border-radius: 99px; background: var(--gfp-100); color: var(--gfp-ink); font-size: 8px; font-weight: 700; }.integration-card h3 { margin: 15px 0 4px; font: 600 20px var(--font-display); }.integration-card > p { min-height: 42px; margin: 0; color: var(--plum-500); font-size: 10px; }.integration-card dl { margin: 15px 0; }.integration-card dl > div { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--line); font-size: 9px; }.integration-card dt { color: var(--plum-500); }.integration-card dd { margin: 0; font-weight: 700; }.integration-card footer { display: grid; grid-template-columns: .7fr 1fr; gap: 8px; }
.integration-catalog { display: grid; grid-template-columns: repeat(4,1fr); padding: 8px; }.integration-catalog button { min-height: 122px; display: grid; align-content: center; gap: 4px; padding: 12px; border: 0; border-right: 1px solid var(--line); background: transparent; text-align: left; }.integration-catalog button:last-child { border: 0; }.integration-catalog button:hover { background: var(--aqua-050); }.integration-catalog button > span { color: var(--aqua-500); font-size: 20px; }.integration-catalog b { font-size: 11px; }.integration-catalog small { color: var(--plum-500); font-size: 8px; }.integration-catalog i { margin-top: 5px; color: var(--pink-700); font-size: 7px; font-style: normal; font-weight: 700; text-transform: uppercase; }
.integration-health { align-self: start; position: sticky; top: 16px; padding: 20px; }.health-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }.health-row strong, .health-row small { display: block; }.health-row strong { font-size: 10px; }.health-row small { color: var(--plum-500); font-size: 8px; }.health-row > b { color: var(--gfp-ink); }.freshness-rule { display: flex; gap: 10px; margin-top: 18px; padding: 13px; border: 1px solid var(--aqua-200); border-radius: 12px; background: var(--aqua-050); }.freshness-rule > span { font-size: 20px; }.freshness-rule strong { font-size: 10px; }.freshness-rule p { margin: 3px 0 0; color: var(--plum-500); font-size: 8px; }

/* KPI builder modal */
.builder-overlay { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 24px; background: rgba(52,35,58,.38); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }.builder-overlay.is-visible { opacity: 1; pointer-events: auto; }.builder-modal { width: min(980px, 100%); max-height: calc(100vh - 36px); display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; overflow: hidden; border: 1px solid var(--aqua-200); border-radius: 26px; background: var(--warm-white); box-shadow: 0 34px 100px rgba(52,35,58,.28); transform: translateY(18px) scale(.985); transition: transform 200ms ease; }.builder-overlay.is-visible .builder-modal { transform: none; }
.builder-modal-header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 15px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(100deg, var(--pink-050), white 50%, var(--aqua-050)); }.builder-modal-header small { color: var(--pink-700); font-size: 8px; font-weight: 700; letter-spacing: .1em; }.builder-modal-header h2 { margin: 2px 0 0; font: 700 25px var(--font-display); }.builder-modal-header button { width: 42px; min-height: 42px; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--plum-700); font-size: 20px; }
.builder-steps { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 9px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: white; }.builder-steps span { display: flex; align-items: center; gap: 7px; color: var(--plum-300); font-size: 9px; font-weight: 700; }.builder-steps span b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--line); color: white; }.builder-steps span.is-active { color: var(--pink-700); }.builder-steps span.is-active b { background: var(--pink-600); }.builder-steps span.is-complete { color: var(--gfp-ink); }.builder-steps span.is-complete b { background: var(--gfp-500); }.builder-steps i { height: 1px; background: var(--line); }
.builder-body { min-height: 0; overflow-y: auto; padding: 24px; }.builder-step { display: none; }.builder-step.is-active { display: block; animation: screen-in 220ms ease-out; }.builder-copy { margin-bottom: 18px; }.builder-copy small { color: var(--pink-700); font-size: 8px; font-weight: 700; letter-spacing: .1em; }.builder-copy h3 { margin: 3px 0; font: 600 23px var(--font-display); }.builder-copy p { margin: 0; color: var(--plum-500); font-size: 10px; }
.source-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.source-choice { min-height: 116px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: white; text-align: left; }.source-choice:hover { border-color: var(--aqua-300); transform: translateY(-2px); }.source-choice.is-selected { border-color: var(--aqua-500); background: linear-gradient(110deg, white, var(--aqua-050)); box-shadow: inset 0 0 0 1px var(--aqua-500); }.source-choice strong, .source-choice small { display: block; }.source-choice strong { font: 600 15px var(--font-display); }.source-choice small { margin-top: 3px; color: var(--plum-500); font-size: 9px; }.source-choice > i { color: var(--gfp-ink); font-size: 8px; font-style: normal; font-weight: 700; }
.oauth-note { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: white; }.oauth-note > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gfp-100); }.oauth-note strong { font-size: 9px; }.oauth-note p { margin: 2px 0 0; color: var(--plum-500); font-size: 8px; }.oauth-note button, .filter-builder button { border: 0; background: transparent; color: var(--pink-700); font-size: 9px; font-weight: 700; }
.source-config { display: none; }.source-config.is-active { display: block; }.source-config label, .display-config label { display: grid; gap: 6px; color: var(--plum-700); font-size: 9px; font-weight: 700; }.source-config input, .source-config select, .display-config input, .display-config select { width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 10px; background: white; }.config-grid, .display-config > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }.range-builder { display: grid; grid-template-columns: 1.35fr .65fr; gap: 12px; }.range-builder label > div { display: grid; grid-template-columns: 1fr auto; }.range-builder input { border-radius: 10px 0 0 10px; }.range-builder button { min-height: 44px; padding: 0 12px; border: 1px solid var(--aqua-500); border-radius: 0 10px 10px 0; background: var(--aqua-050); color: #267e9f; font-size: 9px; font-weight: 700; }.range-builder small { color: var(--plum-500); font-size: 8px; font-weight: 400; }
.sheet-picker { margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; }.sheet-picker > header { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); }.sheet-picker header strong, .sheet-picker header small { display: block; }.sheet-picker header strong { font-size: 10px; }.sheet-picker header small, .sheet-picker header > span { color: var(--plum-500); font-size: 8px; }.sheet-grid { display: grid; grid-template-columns: 34px repeat(5,1fr); }.sheet-grid > * { min-width: 0; min-height: 38px; display: grid; place-items: center; margin: 0; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; font-size: 8px; }.sheet-grid > b, .sheet-grid > i { background: var(--aqua-050); color: var(--plum-500); font-style: normal; }.sheet-grid button:hover { background: var(--pink-050); }.sheet-grid button.is-selected { position: relative; background: var(--aqua-100); color: #176986; font-weight: 800; box-shadow: inset 0 0 0 2px var(--aqua-500); }
.filter-builder, .property-preview { margin-top: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: white; }.filter-builder > div:first-child, .property-preview header { display: flex; align-items: center; justify-content: space-between; }.filter-builder strong, .property-preview strong { font-size: 10px; }.filter-row { display: grid; grid-template-columns: 1fr 1fr 1fr 32px; gap: 7px; margin-top: 10px; }.filter-row select { min-width: 0; }.filter-row button { min-height: 42px; border: 1px solid var(--line); border-radius: 9px; }.property-preview header { margin-bottom: 8px; }.property-preview header span { color: var(--gfp-ink); font-size: 8px; }.property-preview > div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); font-size: 8px; }.property-preview > div span { color: var(--plum-500); }
.display-config { width: calc(100% - 300px); }.display-config fieldset { margin: 0 0 12px; padding: 0; border: 0; }.display-config legend { margin-bottom: 7px; font-size: 9px; font-weight: 700; }.visual-choice-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }.visual-choice-grid button { min-height: 68px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--aqua-500); font: 700 20px var(--font-display); }.visual-choice-grid button small { color: var(--plum-700); font: 600 8px var(--font-body); }.visual-choice-grid button.is-selected { border-color: var(--pink-500); background: var(--pink-050); box-shadow: inset 0 0 0 1px var(--pink-500); }
.builder-step[data-builder-step="3"] { position: relative; }.kpi-preview-card { position: absolute; top: 78px; right: 0; width: 275px; min-height: 280px; padding: 20px; border: 1px solid var(--aqua-200); border-radius: 18px; background: radial-gradient(circle at 100% 0, var(--aqua-100), transparent 12rem), white; box-shadow: var(--shadow-soft); }.kpi-preview-card > small { display: block; margin-bottom: 14px; color: var(--pink-700); font-size: 8px; font-weight: 700; }.kpi-preview-card > p { margin: 18px 0 2px; color: var(--plum-500); font-size: 10px; }.kpi-preview-card > strong { font: 700 35px var(--font-display); }.kpi-preview-card .mini-progress { margin-block: 28px; }
.builder-modal-footer { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--line); background: white; }.builder-modal-footer span { margin-left: auto; color: var(--plum-500); font-size: 8px; }.builder-modal-footer button:disabled { opacity: .45; cursor: not-allowed; }

/* TV screens and loops */
.display-layout, .automation-layout { max-width: 1450px; display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px; margin: 0 auto; }.display-main, .automation-main { min-width: 0; }
.display-summary { min-height: 74px; display: grid; grid-template-columns: 1.4fr .7fr .8fr auto; align-items: center; gap: 10px; padding: 12px 18px; }.display-summary > div { padding-right: 15px; border-right: 1px solid var(--line); }.display-summary > div:first-child { display: grid; grid-template-columns: 12px 1fr; column-gap: 8px; }.display-summary > div:first-child small { grid-column: 2; }.display-summary strong, .display-summary small, .display-summary b, .display-summary span { display: block; }.display-summary strong { font-size: 12px; }.display-summary small, .display-summary span { color: var(--plum-500); font-size: 8px; }.display-summary b { font: 700 21px var(--font-display); }.display-summary button { min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--pink-700); font-size: 9px; font-weight: 700; }
.screen-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.screen-device { overflow: hidden; }.device-preview { position: relative; height: 145px; display: grid; place-items: center; overflow: hidden; background: #17213b; color: white; }.device-preview::after { content: ""; position: absolute; inset: auto 8% 9px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.26); }.device-preview span { z-index: 2; font: 700 32px var(--font-display); }.device-preview i { position: absolute; bottom: 25px; width: 22%; border-radius: 8px 8px 2px 2px; background: var(--aqua-500); }.device-preview i:nth-child(2) { left: 13%; height: 28px; }.device-preview i:nth-child(3) { left: 39%; height: 45px; background: var(--pink-400); }.device-preview i:nth-child(4) { right: 13%; height: 62px; background: var(--gfp-500); }.concierge-mini { background: linear-gradient(145deg,#173149,#215c72); }.executive-mini { background: linear-gradient(145deg,#2d1d3d,#51334e); }.device-copy { padding: 15px; }.device-copy h3 { margin: 10px 0 2px; font: 600 16px var(--font-display); }.device-copy > p { margin: 0 0 10px; color: var(--plum-500); font-size: 8px; }.schedule-pill { padding: 5px 8px; border-radius: 99px; background: var(--aqua-100); color: #267e9f; font-size: 8px; font-weight: 700; }.device-copy dl { margin: 0; }.device-copy dl div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); font-size: 8px; }.device-copy dt { color: var(--plum-500); }.device-copy dd { margin: 0; font-weight: 700; }.screen-device > footer { display: grid; grid-template-columns: 1fr 42px; gap: 7px; padding: 10px 15px 15px; }.screen-device > footer button { min-height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--pink-050); color: var(--pink-700); font-size: 8px; font-weight: 700; }
.loop-builder { align-self: start; position: sticky; top: 16px; padding: 20px; }.loop-builder > p { color: var(--plum-500); font-size: 9px; }.loop-builder ol { margin: 14px 0 9px; padding: 0; list-style: none; }.loop-builder li { display: grid; grid-template-columns: 28px 1fr 34px; align-items: center; gap: 9px; min-height: 64px; margin-bottom: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: white; }.loop-builder li > b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--aqua-100); color: #267e9f; }.loop-builder li strong, .loop-builder li small { display: block; }.loop-builder li strong { font-size: 9px; }.loop-builder li small { color: var(--plum-500); font-size: 8px; }.loop-builder li button { border: 0; background: transparent; color: var(--plum-500); }.add-loop-view { width: 100%; min-height: 42px; border: 1px dashed var(--aqua-300); border-radius: 10px; background: var(--aqua-050); color: #267e9f; font-size: 9px; font-weight: 700; }.loop-settings { display: grid; gap: 10px; margin: 16px 0; }.loop-settings label { display: grid; gap: 5px; font-size: 8px; font-weight: 700; }.loop-settings select { min-height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: white; }

/* Automations */
.automation-summary { display: grid; grid-template-columns: repeat(4,1fr); padding: 15px; }.automation-summary div { padding: 4px 16px; border-right: 1px solid var(--line); }.automation-summary div:last-child { border: 0; }.automation-summary strong, .automation-summary span { display: block; }.automation-summary strong { font: 700 23px var(--font-display); }.automation-summary span { color: var(--plum-500); font-size: 8px; }.rule-list { display: grid; gap: 11px; }.rule-card { padding: 17px; }.rule-card > header { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 11px; }.rule-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--aqua-100); color: #267e9f; font: 700 17px var(--font-display); }.rule-icon.warning { background: #fff3d7; color: #ae6f00; }.rule-icon.deal { background: var(--gfp-100); color: var(--gfp-ink); }.rule-card h3 { margin: 0; font: 600 14px var(--font-display); }.rule-card header p { margin: 2px 0 0; color: var(--plum-500); font-size: 8px; }.toggle { position: relative; width: 42px; height: 24px; }.toggle input { position: absolute; opacity: 0; }.toggle span { position: absolute; inset: 0; border-radius: 99px; background: var(--line-strong); }.toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; transition: transform 150ms ease; }.toggle input:checked + span { background: var(--gfp-500); }.toggle input:checked + span::after { transform: translateX(18px); }.rule-flow { display: grid; grid-template-columns: minmax(170px,.8fr) 24px minmax(0,1.2fr); align-items: center; gap: 8px; margin: 13px 0; padding: 11px; border-radius: 11px; background: linear-gradient(100deg,var(--pink-050),var(--aqua-050)); }.rule-flow small, .rule-flow strong { display: block; }.rule-flow small { margin-bottom: 4px; color: var(--plum-500); font-size: 7px; font-weight: 700; }.rule-flow strong { font-size: 9px; }.rule-flow > i { color: var(--aqua-500); font-style: normal; text-align: center; }.action-chip { display: inline-flex; margin: 2px 3px 2px 0; padding: 5px 7px; border-radius: 99px; font-size: 7px; font-weight: 700; }.action-chip.celebration { background: var(--pink-100); color: var(--pink-700); }.action-chip.slack, .action-chip.owner { background: #eee7ff; color: #6543a6; }.action-chip.kombat { background: var(--aqua-100); color: #267e9f; }.action-chip.email { background: #fff3d7; color: #8e6106; }.action-chip.sound { background: var(--gfp-100); color: var(--gfp-ink); }.rule-card > footer { display: flex; align-items: center; justify-content: space-between; color: var(--plum-500); font-size: 8px; }.rule-card footer button { min-height: 34px; border: 0; background: transparent; color: var(--pink-700); font-size: 8px; font-weight: 700; }
.automation-guardrails { align-self: start; position: sticky; top: 16px; padding: 20px; }.automation-guardrails ul { margin: 14px 0; padding: 0; list-style: none; }.automation-guardrails li { display: grid; grid-template-columns: 34px 1fr; gap: 9px; padding: 12px 0; border-top: 1px solid var(--line); }.automation-guardrails li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--aqua-050); color: #267e9f; }.automation-guardrails strong { font-size: 9px; }.automation-guardrails p { margin: 3px 0 0; color: var(--plum-500); font-size: 8px; }

/* Customer-facing service administration */
.service-layout { max-width: 1450px; display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 16px; margin: 0 auto; }.service-main { min-width: 0; }.service-side { display: grid; align-content: start; gap: 14px; }.customer-hero { min-height: 116px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; background: radial-gradient(circle at 86% 20%,var(--gfp-100),transparent 8rem),linear-gradient(110deg,var(--pink-050),white 52%,var(--aqua-050)); }.customer-hero > div { display: flex; align-items: center; gap: 14px; }.workspace-avatar.large { width: 58px; height: 58px; font-size: 20px; }.customer-hero small, .launch-card header small, .plan-card header small, .members-card header small, .support-card > small { color: var(--pink-700); font-size: 8px; font-weight: 700; letter-spacing: .08em; }.customer-hero h2 { margin: 3px 0; font: 700 25px var(--font-display); }.customer-hero p { margin: 0; color: var(--plum-500); font-size: 9px; }.readiness-ring { width: 82px; height: 82px; display: grid; place-items: center; align-content: center; flex: 0 0 auto; border: 7px solid var(--aqua-100); border-top-color: var(--gfp-500); border-right-color: var(--pink-400); border-radius: 50%; background: white; text-align: center; }.readiness-ring b { font: 700 18px var(--font-display); }.readiness-ring small { color: var(--plum-500); font-size: 7px; letter-spacing: 0; }.service-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; margin-top: 14px; }.launch-card, .plan-card, .members-card, .service-health, .support-card { padding: 20px; }.launch-card header, .plan-card header, .members-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.launch-card h2, .plan-card h2, .members-card h2, .service-health h2, .support-card h2 { margin: 3px 0 0; font: 600 18px var(--font-display); }.launch-card header > b { color: var(--gfp-ink); font-size: 10px; }.launch-card ul, .service-health ul { margin: 14px 0 0; padding: 0; list-style: none; }.launch-card li { min-height: 56px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; border-top: 1px solid var(--line); }.launch-card li > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--aqua-100); color: #267e9f; font-size: 9px; font-weight: 800; }.launch-card li.complete > span { background: var(--gfp-100); color: var(--gfp-ink); }.launch-card strong, .launch-card small { display: block; }.launch-card strong { font-size: 10px; }.launch-card small { margin-top: 2px; color: var(--plum-500); font-size: 8px; }.launch-card li button, .members-card header button { min-height: 34px; border: 0; background: transparent; color: var(--pink-700); font-size: 8px; font-weight: 700; }.plan-card > p { margin: 13px 0 17px; color: var(--plum-500); font-size: 9px; }.usage-meter { margin: 13px 0; }.usage-meter > span { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 8px; }.usage-meter span small { color: var(--plum-500); }.usage-meter > i { height: 7px; display: block; overflow: hidden; border-radius: 99px; background: var(--aqua-100); }.usage-meter > i b { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,var(--pink-500),var(--aqua-500)); }.members-card { margin-top: 14px; }.member-row { min-height: 58px; display: grid; grid-template-columns: minmax(220px,1.5fr) .7fr .7fr .5fr; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 9px; }.member-row.member-head { min-height: 38px; margin-top: 10px; color: var(--plum-500); font-size: 8px; font-weight: 700; }.member-row > span:first-child { display: flex; align-items: center; gap: 9px; }.member-row > span > b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--pink-100); color: var(--pink-700); font-size: 8px; }.member-row strong, .member-row small { display: block; }.member-row small { color: var(--plum-500); font-size: 8px; }.service-health ul { margin-top: 12px; }.service-health li { min-height: 60px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; border-top: 1px solid var(--line); }.service-health li > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--aqua-050); color: #267e9f; }.service-health strong, .service-health small { display: block; }.service-health strong { font-size: 9px; }.service-health small { color: var(--plum-500); font-size: 8px; }.service-health li > b { color: var(--gfp-ink); }.support-card { border-color: var(--aqua-200); background: linear-gradient(145deg,white,var(--aqua-050)); }.support-card > .mini-axo { margin-bottom: 12px; }.support-card > p { color: var(--plum-500); font-size: 9px; }.support-card button + button { margin-top: 8px; }

/* Plans and billing */
.pricing-header { align-items: flex-end; }.pricing-header > div:first-child { max-width: 780px; }.billing-cycle { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 14px; background: white; box-shadow: var(--shadow-soft); }.billing-cycle button { min-height: 42px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--plum-500); font-size: 12px; font-weight: 700; }.billing-cycle button span { margin-left: 5px; color: var(--gfp-ink); font-size: 9px; }.billing-cycle button.is-active { background: var(--plum-900); color: white; }.billing-cycle button.is-active span { color: var(--gfp-300); }.pricing-principle { max-width: 1500px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; margin: 0 auto 18px; padding: 14px 16px; border-color: var(--aqua-200); background: linear-gradient(105deg,var(--aqua-050),white 48%,var(--gfp-100)); }.pricing-principle > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: var(--gfp-100); color: var(--gfp-ink); font-weight: 900; }.pricing-principle strong, .pricing-principle p { display: block; }.pricing-principle strong { font-size: 12px; }.pricing-principle p { margin: 2px 0 0; color: var(--plum-500); font-size: 10px; }.pricing-grid { max-width: 1500px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 0 auto; }.pricing-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px; overflow: hidden; }.pricing-card-featured { border: 2px solid var(--pink-500); box-shadow: 0 20px 55px rgba(226,88,135,.16); }.popular-ribbon { position: absolute; top: 0; right: 18px; padding: 7px 12px; border-radius: 0 0 10px 10px; background: linear-gradient(135deg,var(--pink-600),#f33f77); color: white; font-size: 8px; font-weight: 800; letter-spacing: .08em; }.pricing-card header { display: flex; align-items: center; gap: 11px; padding-right: 70px; }.pricing-card header small, .plan-comparison header small { color: var(--pink-700); font-size: 8px; font-weight: 800; letter-spacing: .1em; }.pricing-card h2 { margin: 2px 0 0; font: 700 24px/1 var(--font-display); }.plan-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--aqua-200); border-radius: 14px; background: linear-gradient(145deg,var(--pink-050),var(--aqua-050)); color: var(--pink-700); font-size: 18px; }.pricing-card > p { min-height: 48px; margin: 17px 0 12px; color: var(--plum-500); font-size: 11px; line-height: 1.55; }.plan-price { min-height: 80px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }.plan-price strong { font: 700 39px/1 var(--font-display); letter-spacing: -.04em; }.plan-price span { color: var(--plum-500); font-size: 11px; }.plan-price small { width: 100%; margin-top: 2px; color: var(--plum-500); font-size: 9px; }.plan-capacity { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 16px 0 6px; padding: 12px; border-radius: 14px; background: var(--aqua-050); }.plan-capacity span { color: var(--plum-500); font-size: 9px; }.plan-capacity b { color: var(--plum-900); }.pricing-card ul { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }.pricing-card li { position: relative; padding-left: 20px; color: var(--plum-700); font-size: 10px; line-height: 1.45; }.pricing-card li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gfp-ink); font-weight: 900; }.not-included { margin-top: auto; padding-top: 18px; }.not-included small { color: var(--plum-500); font-size: 8px; font-weight: 800; letter-spacing: .08em; }.not-included p { margin: 3px 0 0; color: var(--plum-500); font-size: 9px; }.pricing-card-enterprise { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(220px,.8fr) minmax(260px,1fr) 2fr; align-items: center; gap: 24px; background: radial-gradient(circle at 88% 30%,rgba(184,245,142,.18),transparent 14rem),linear-gradient(105deg,var(--plum-900),#49364e); color: white; }.pricing-card-enterprise > p { min-height: 0; margin: 0; color: #ddd3e0; }.pricing-card-enterprise .plan-price { min-height: 0; margin: 0; }.pricing-card-enterprise .plan-price small { color: #ddd3e0; }.pricing-card-enterprise .button { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: white; }.enterprise-features { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 7px; }.enterprise-features span { padding: 6px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; color: #f8eef9; font-size: 9px; }.plan-comparison { max-width: 1500px; margin: 18px auto 0; padding: 22px; }.plan-comparison > header { display: flex; align-items: end; justify-content: space-between; gap: 24px; }.plan-comparison h2 { margin: 2px 0 0; font: 700 22px var(--font-display); }.plan-comparison header p { max-width: 590px; margin: 0; color: var(--plum-500); font-size: 10px; }.comparison-scroll { margin-top: 16px; overflow-x: auto; }.comparison-table { min-width: 760px; }.comparison-row { min-height: 48px; display: grid; grid-template-columns: 1.35fr repeat(4,1fr); align-items: center; border-top: 1px solid var(--line); }.comparison-row > * { padding: 8px 12px; font-size: 9px; text-align: center; }.comparison-row > :first-child { text-align: left; }.comparison-row > span { color: var(--plum-500); }.comparison-head { min-height: 38px; border-top: 0; border-radius: 10px; background: var(--aqua-050); }.comparison-head b { color: var(--plum-700); }

/* Competitive feature modals */
.feature-overlay { position: fixed; inset: 0; z-index: 175; display: grid; place-items: center; padding: 24px; background: rgba(52,35,58,.4); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }.feature-overlay.is-visible { opacity: 1; pointer-events: auto; }.feature-modal { width: min(1120px,100%); max-height: calc(100vh - 40px); overflow-y: auto; border: 1px solid var(--aqua-200); border-radius: 26px; background: var(--warm-white); box-shadow: 0 34px 100px rgba(52,35,58,.3); transform: translateY(16px) scale(.985); transition: transform 180ms ease; }.feature-overlay.is-visible .feature-modal { transform: none; }.feature-modal > header { min-height: 102px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); background: linear-gradient(105deg,var(--pink-050),white 48%,var(--aqua-050)); }.feature-modal header small { color: var(--pink-700); font-size: 8px; font-weight: 700; letter-spacing: .1em; }.feature-modal header h2 { margin: 3px 0; font: 700 26px var(--font-display); }.feature-modal header p { margin: 0; color: var(--plum-500); font-size: 9px; }.feature-close { width: 42px; min-height: 42px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--plum-700); font-size: 20px; }
.template-filters, .share-tabs { display: flex; gap: 6px; padding: 13px 24px; border-bottom: 1px solid var(--line); background: white; }.template-filters button, .share-tabs button { min-height: 34px; padding: 0 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--plum-500); font-size: 8px; font-weight: 700; }.template-filters button.is-active, .share-tabs button.is-active { border-color: var(--aqua-200); background: var(--aqua-050); color: #267e9f; }.template-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 20px; }.template-card { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: white; }.template-card.featured-template { border-color: var(--aqua-300); box-shadow: 0 10px 30px rgba(67,189,232,.1); }.template-art { position: relative; height: 120px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: linear-gradient(145deg,#18304c,#254d68); color: white; }.template-art b { z-index: 2; font: 700 27px var(--font-display); }.template-art i { position: absolute; bottom: 15px; width: 20%; border-radius: 6px 6px 2px 2px; background: var(--aqua-500); }.template-art i:nth-child(2) { left: 15%; height: 24px; }.template-art i:nth-child(3) { left: 40%; height: 43px; background: var(--pink-400); }.template-art i:nth-child(4) { right: 15%; height: 62px; background: var(--gfp-500); }.pipeline-template { background: linear-gradient(145deg,#37203d,#774459); }.concierge-template { background: linear-gradient(145deg,#17413e,#278178); }.template-card > span { display: block; margin-top: 12px; color: var(--pink-700); font-size: 7px; font-weight: 700; letter-spacing: .08em; }.template-card h3 { margin: 4px 0; font: 600 17px var(--font-display); }.template-card p { min-height: 44px; margin: 0; color: var(--plum-500); font-size: 8px; }.template-card ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; padding: 0; list-style: none; }.template-card li { padding: 4px 6px; border-radius: 99px; background: var(--pink-050); color: var(--plum-700); font-size: 7px; }
.compact-feature-modal { width: min(720px,100%); }.share-panel { display: none; padding: 20px 24px 24px; }.share-panel.is-active { display: block; }.share-link-row { display: grid; grid-template-columns: 1fr auto; }.share-link-row input { min-width: 0; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px 0 0 10px; background: var(--aqua-050); }.share-link-row button { padding: 0 15px; border: 1px solid var(--aqua-500); border-radius: 0 10px 10px 0; background: var(--aqua-500); color: white; font-size: 9px; font-weight: 700; }.share-options { margin: 14px 0; }.share-options label { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); }.share-options strong, .share-options small { display: block; }.share-options strong { font-size: 9px; }.share-options small { color: var(--plum-500); font-size: 8px; }.share-options select { min-height: 38px; border: 1px solid var(--line); border-radius: 8px; background: white; }.destination-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.destination-grid button { min-height: 84px; display: grid; place-items: center; align-content: center; gap: 2px; border: 1px solid var(--line); border-radius: 11px; background: white; }.destination-grid button.is-selected { border-color: var(--aqua-500); background: var(--aqua-050); }.destination-grid span { color: #6543a6; font: 700 18px var(--font-display); }.destination-grid strong { font-size: 9px; }.destination-grid small { color: var(--plum-500); font-size: 7px; }.snapshot-config { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }.snapshot-config label { display: grid; gap: 5px; font-size: 8px; font-weight: 700; }.snapshot-config select { min-height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: white; }.embed-preview { padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #251f2b; color: var(--aqua-200); font: 10px/1.5 monospace; }
.drilldown-modal { width: min(1050px,100%); }.lineage-bar { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 10px; padding: 12px 22px; border-bottom: 1px solid var(--line); background: white; }.lineage-bar strong, .lineage-bar small { display: block; }.lineage-bar strong { font-size: 9px; }.lineage-bar small { color: var(--plum-500); font-size: 8px; }.lineage-bar button { min-height: 36px; border: 0; background: transparent; color: var(--pink-700); font-size: 8px; font-weight: 700; }.drilldown-summary { display: grid; grid-template-columns: repeat(4,1fr); padding: 15px 22px; border-bottom: 1px solid var(--line); }.drilldown-summary > div { padding: 3px 14px; border-right: 1px solid var(--line); }.drilldown-summary > div:first-child { padding-left: 0; }.drilldown-summary > div:last-child { border: 0; }.drilldown-summary small, .drilldown-summary strong { display: block; }.drilldown-summary small { color: var(--plum-500); font-size: 7px; }.drilldown-summary strong { margin-top: 3px; font: 600 13px var(--font-display); }.drilldown-content { display: grid; grid-template-columns: 1fr 270px; gap: 14px; padding: 20px 22px 24px; }.table-heading { display: flex; align-items: center; justify-content: space-between; }.table-heading small, .drilldown-content aside > small { color: var(--pink-700); font-size: 7px; font-weight: 700; letter-spacing: .08em; }.table-heading h3, .drilldown-content aside h3 { margin: 2px 0 8px; font: 600 14px var(--font-display); }.table-heading button { min-height: 34px; border: 0; background: transparent; color: var(--pink-700); font-size: 8px; font-weight: 700; }.source-table { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; }.table-row { min-height: 44px; display: grid; grid-template-columns: 1fr 1.4fr .7fr .7fr; align-items: center; gap: 8px; padding: 7px 10px; border-top: 1px solid var(--line); font-size: 8px; }.table-row:first-child { border: 0; }.table-row.table-head { min-height: 34px; background: var(--aqua-050); color: var(--plum-500); font-weight: 700; }.table-row small { color: var(--plum-500); }.drilldown-content aside { padding: 14px; border: 1px solid var(--aqua-200); border-radius: 12px; background: var(--aqua-050); }.drilldown-content aside p { color: var(--plum-500); font-size: 8px; }.drilldown-content aside dl { margin: 12px 0; }.drilldown-content aside dl div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--aqua-200); font-size: 8px; }.drilldown-content aside dt { color: var(--plum-500); }.drilldown-content aside dd { margin: 0; font-weight: 700; }
.kpi-card[data-drilldown] { cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease; }.kpi-card[data-drilldown]:hover { transform: translateY(-3px); box-shadow: var(--shadow); }.kpi-card[data-drilldown]:focus-visible { outline: 3px solid rgba(67,189,232,.34); }

.tv-preview-overlay { background: #11182a; }.tv-preview-stage { width: min(1400px,100%); min-height: min(850px,calc(100vh - 30px)); display: grid; grid-template-rows: auto auto 1fr auto; padding: 28px; border: 1px solid rgba(140,221,246,.3); border-radius: 24px; background: radial-gradient(circle at 80% 0,rgba(67,189,232,.18),transparent 28rem),radial-gradient(circle at 20% 0,rgba(233,111,152,.16),transparent 25rem),#182038; color: white; }.tv-preview-stage > header { display: flex; align-items: center; justify-content: space-between; }.tv-preview-stage header > div { display: flex; align-items: center; gap: 12px; }.tv-preview-stage header img { width: 62px; height: 62px; object-fit: contain; }.tv-preview-stage header small { color: var(--aqua-300); font-size: 10px; font-weight: 700; letter-spacing: .1em; }.tv-preview-stage header h2 { margin: 3px 0; font: 700 34px var(--font-display); }.tv-preview-stage header button { width: 48px; min-height: 48px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(255,255,255,.08); color: white; font-size: 22px; }.tv-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 26px 0 14px; }.tv-kpis article { min-height: 180px; display: grid; align-content: center; padding: 25px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.06); }.tv-kpis small { color: var(--aqua-300); font-size: 10px; font-weight: 700; }.tv-kpis strong { margin: 6px 0; font: 700 clamp(45px,6vw,78px)/1 var(--font-display); }.tv-kpis span { color: var(--gfp-300); font-size: 13px; }.tv-chart { display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; padding: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.05); }.tv-chart small { color: var(--pink-300); font-size: 10px; font-weight: 700; }.tv-chart strong { display: block; max-width: 370px; margin-top: 8px; font: 600 32px/1.1 var(--font-display); }.tv-chart svg { width: 100%; }.tv-preview-stage > footer { display: flex; align-items: center; gap: 9px; padding-top: 18px; color: rgba(255,255,255,.65); font-size: 11px; }.tv-preview-stage footer i { width: 1px; height: 16px; background: rgba(255,255,255,.2); }

/* Reusable feature workflow wireframes */
#workflowModal { z-index: 190; }.workflow-modal { width: min(1080px,100%); display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; overflow: hidden; }.workflow-progress { min-height: 54px; display: flex; align-items: center; gap: 8px; padding: 10px 24px; overflow-x: auto; border-bottom: 1px solid var(--line); background: white; }.workflow-progress span { display: inline-flex; align-items: center; gap: 7px; color: var(--plum-300); font-size: 9px; font-weight: 700; white-space: nowrap; }.workflow-progress span::before { content: attr(data-step); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--line); color: white; }.workflow-progress span.is-active { color: var(--pink-700); }.workflow-progress span.is-active::before { background: var(--pink-600); }.workflow-progress i { width: 30px; height: 1px; flex: 0 0 auto; background: var(--line); }
.workflow-layout { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 300px; overflow-y: auto; }.workflow-canvas { padding: 24px; }.workflow-context { padding: 22px; border-left: 1px solid var(--line); background: linear-gradient(145deg,var(--aqua-050),white 70%); }.workflow-canvas h3, .workflow-context h3 { margin: 0 0 4px; font: 600 19px var(--font-display); }.workflow-canvas > p, .workflow-context > p { margin: 0 0 16px; color: var(--plum-500); font-size: 9px; }.workflow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.workflow-card { min-height: 112px; display: grid; align-content: start; gap: 5px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: white; text-align: left; }.workflow-card:hover, .workflow-card.is-selected { border-color: var(--aqua-500); background: var(--aqua-050); }.workflow-card > span { color: var(--aqua-500); font-size: 22px; }.workflow-card strong { font-size: 11px; }.workflow-card small { color: var(--plum-500); font-size: 8px; }.workflow-card i { color: var(--pink-700); font-size: 8px; font-style: normal; font-weight: 700; }.workflow-form { display: grid; gap: 12px; }.workflow-form label { display: grid; gap: 6px; color: var(--plum-700); font-size: 9px; font-weight: 700; }.workflow-form input, .workflow-form select, .workflow-form textarea { width: 100%; min-height: 44px; padding: 10px 11px; border: 1px solid var(--line-strong); border-radius: 10px; background: white; font: inherit; }.workflow-form textarea { min-height: 90px; resize: vertical; }.workflow-checks { display: grid; gap: 7px; }.workflow-checks label { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: white; }.workflow-checks input { width: 18px; min-height: auto; accent-color: var(--pink-600); }.workflow-list { margin: 0; padding: 0; list-style: none; }.workflow-list li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; min-height: 55px; padding: 8px 0; border-top: 1px solid var(--line); }.workflow-list li:first-child { border-top: 0; }.workflow-list li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--pink-050); color: var(--pink-700); }.workflow-list strong, .workflow-list small { display: block; }.workflow-list strong { font-size: 10px; }.workflow-list small { color: var(--plum-500); font-size: 8px; }.workflow-list button { min-height: 34px; border: 0; background: transparent; color: var(--pink-700); font-size: 8px; font-weight: 700; }.workflow-summary { display: grid; gap: 10px; }.workflow-summary > div { padding: 12px; border: 1px solid var(--aqua-200); border-radius: 11px; background: white; }.workflow-summary small, .workflow-summary strong { display: block; }.workflow-summary small { color: var(--plum-500); font-size: 8px; }.workflow-summary strong { margin-top: 3px; font-size: 10px; }.workflow-preview { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 18px; border: 1px dashed var(--aqua-300); border-radius: 16px; background: radial-gradient(circle at 80% 10%,var(--pink-100),transparent 9rem),var(--aqua-050); text-align: center; }.workflow-preview > span { font-size: 36px; }.workflow-preview strong { font: 600 22px var(--font-display); }.workflow-preview small { color: var(--plum-500); font-size: 9px; }.workflow-drop { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 20px; border: 2px dashed var(--aqua-300); border-radius: 16px; background: var(--aqua-050); text-align: center; }.workflow-drop span { color: var(--aqua-500); font-size: 36px; }.workflow-drop strong { font: 600 17px var(--font-display); }.workflow-drop small { color: var(--plum-500); font-size: 9px; }.run-ledger { display: grid; gap: 7px; }.run-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: white; font-size: 8px; }.run-row b.success { color: var(--gfp-ink); }.run-row b.suppressed { color: #9b6b19; }.workflow-footer { min-height: 68px; display: flex; align-items: center; gap: 10px; padding: 11px 20px; border-top: 1px solid var(--line); background: white; }.workflow-footer span { margin-left: auto; color: var(--plum-500); font-size: 8px; }

/* Blank example-customer sandbox */
.workspace-empty-state, .synthetic-data-banner, .blank-tenant-note { display: none; }
.workspace-empty-state { max-width: 1120px; min-height: 430px; place-items: center; align-content: center; gap: 10px; margin: 0 auto; padding: 48px; border-color: var(--aqua-200); background: radial-gradient(circle at 82% 18%,var(--gfp-100),transparent 10rem),radial-gradient(circle at 14% 85%,var(--pink-100),transparent 15rem),white; text-align: center; }
.workspace-empty-state > .empty-axo { width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid var(--pink-200); border-radius: 22px; background: var(--pink-050); color: var(--pink-700); font: 700 26px var(--font-display); }
.workspace-empty-state > small { color: var(--pink-700); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.workspace-empty-state > h2 { margin: 0; font: 700 30px var(--font-display); }
.workspace-empty-state > p { max-width: 650px; margin: 0 0 8px; color: var(--plum-500); font-size: 11px; line-height: 1.6; }
.workspace-empty-state > div:not(.blank-connector-grid) { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }
.blank-connector-grid { width: min(760px,100%); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; text-align: left; }
.blank-connector-grid article { min-height: 190px; display: grid; align-content: start; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.84); }
.blank-connector-grid article strong, .blank-connector-grid article small { display: block; }.blank-connector-grid article strong { font: 600 16px var(--font-display); }.blank-connector-grid article small { min-height: 40px; color: var(--plum-500); font-size: 9px; line-height: 1.5; }.blank-connector-grid article button { margin-top: auto; }
.credential-boundary { width: min(760px,100%); display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; margin-top: 10px; padding: 13px 15px; border: 1px solid #f0d695; border-radius: 12px; background: #fff9e8; color: #6f5318; text-align: left; }.credential-boundary b { font-size: 9px; }.credential-boundary span { font-size: 9px; line-height: 1.5; }.credential-boundary.compact { width: 100%; grid-template-columns: 1fr; }
.synthetic-data-banner, .blank-tenant-note { max-width: 1500px; align-items: center; gap: 12px; margin: 0 auto 14px; padding: 11px 14px; border-color: var(--aqua-200); background: linear-gradient(90deg,var(--aqua-050),white,var(--pink-050)); }.synthetic-data-banner b, .blank-tenant-note b { color: #267e9f; font-size: 9px; letter-spacing: .08em; }.synthetic-data-banner span, .blank-tenant-note span { flex: 1; color: var(--plum-500); font-size: 9px; }.synthetic-data-banner button, .blank-tenant-note button { min-height: 38px; border: 0; background: transparent; color: var(--pink-700); font-size: 9px; font-weight: 700; }
.oauth-contract { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; }.oauth-contract > div { padding: 12px; border: 1px solid var(--aqua-200); border-radius: 11px; background: var(--aqua-050); }.oauth-contract small, .oauth-contract strong { display: block; }.oauth-contract small { color: var(--plum-500); font-size: 8px; }.oauth-contract strong { margin-top: 3px; font-size: 10px; }

body[data-active-workspace="sample-empty"][data-demo-data="false"] [data-screen-panel="dashboard"] .workspace-empty-state,
body[data-active-workspace="sample-empty"] [data-screen-panel="integrations"] .workspace-empty-state,
body[data-active-workspace="sample-empty"] [data-screen-panel="displays"] .workspace-empty-state,
body[data-active-workspace="sample-empty"] [data-screen-panel="automations"] .workspace-empty-state,
body[data-active-workspace="sample-empty"] [data-screen-panel="workspace"] .workspace-empty-state,
body[data-active-workspace="sample-empty"] [data-screen-panel="celebrations"] .workspace-empty-state,
body[data-active-workspace="sample-empty"] [data-screen-panel="sounds"] .workspace-empty-state { display: grid; }
body[data-active-workspace="sample-empty"][data-demo-data="true"] .synthetic-data-banner,
body[data-active-workspace="sample-empty"] .blank-tenant-note { display: flex; }
body[data-active-workspace="sample-empty"][data-demo-data="false"] [data-screen-panel="dashboard"] :is(.dashboard-toolbar,.kpi-grid,.dashboard-lower-grid),
body[data-active-workspace="sample-empty"] [data-screen-panel="integrations"] .integration-layout,
body[data-active-workspace="sample-empty"] [data-screen-panel="displays"] .display-layout,
body[data-active-workspace="sample-empty"] [data-screen-panel="automations"] .automation-layout,
body[data-active-workspace="sample-empty"] [data-screen-panel="workspace"] .service-layout,
body[data-active-workspace="sample-empty"] [data-screen-panel="celebrations"] .celebration-layout,
body[data-active-workspace="sample-empty"] [data-screen-panel="sounds"] .sounds-layout { display: none; }

@media (max-width: 1250px) {
  :root { --sidebar: 86px; }
  .brand > span:last-child, .workspace-switcher span:nth-child(2), .workspace-switcher > button, .nav-item b, .sidebar-tip div, .sidebar-user span:nth-child(2), .sidebar-user > button { display: none; }
  .brand { justify-content: center; }.workspace-switcher { grid-template-columns: 1fr; justify-items: center; }.nav-item { justify-content: center; padding: 0; }.sidebar-tip { display: flex; justify-content: center; padding: 10px; }.sidebar-user { display: flex; justify-content: center; }
  .celebration-layout { grid-template-columns: 1fr 290px; }.sounds-layout { grid-template-columns: minmax(0,1fr) 310px; }.kombat-layout { grid-template-columns: 190px minmax(460px,1fr); }.game-inspector { grid-column: 1 / -1; }.inspector-scroll { max-height: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 0 18px; }.game-inspector footer { max-width: 420px; margin-left: auto; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.integration-layout { grid-template-columns: 1fr 290px; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }.pricing-card-enterprise { grid-column: 1 / -1; }
  .display-layout, .automation-layout { grid-template-columns: minmax(0,1fr) 290px; }.screen-grid { grid-template-columns: 1fr 1fr; }.screen-device:last-child { grid-column: 1 / -1; }
}
@media (max-width: 920px) {
  .workflow-layout { grid-template-columns: 1fr; }.workflow-context { border-top: 1px solid var(--line); border-left: 0; }
  .service-layout { grid-template-columns: 1fr; }.service-side { grid-template-columns: 1fr 1fr; }
  .celebration-layout, .sounds-layout, .brand-layout { grid-template-columns: 1fr; }.celebration-controls, .sound-inspector { position: static; }.kombat-layout { grid-template-columns: 1fr; }.studio-steps { display: none; }.inspector-scroll { grid-template-columns: 1fr 1fr; }.brand-preview { order: -1; }.metrics-row { grid-template-columns: 1fr; }
  .dashboard-lower-grid, .integration-layout, .display-layout, .automation-layout { grid-template-columns: 1fr; }.integration-health, .loop-builder, .automation-guardrails { position: static; }.integration-catalog { grid-template-columns: 1fr 1fr; }.integration-catalog button:nth-child(2) { border-right: 0; }.integration-catalog button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .template-grid { grid-template-columns: 1fr 1fr; }.template-card:first-child { grid-column: 1 / -1; }.tv-preview-stage { min-height: calc(100vh - 30px); }.tv-kpis { grid-template-columns: 1fr 1fr; }.tv-kpis article:last-child { grid-column: 1 / -1; }
  .pricing-card-enterprise { grid-template-columns: 1fr 1fr; }.pricing-card-enterprise > p { grid-column: 1 / -1; }.enterprise-features { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .workspace-empty-state { min-height: 390px; padding: 28px 18px; }.workspace-empty-state > h2 { font-size: 25px; }.workspace-empty-state > p { font-size: 12px; }.workspace-empty-state > div:not(.blank-connector-grid), .blank-connector-grid { grid-template-columns: 1fr; width: 100%; }.workspace-empty-state > div:not(.blank-connector-grid) { display: grid; }.blank-connector-grid article { min-height: 180px; }.credential-boundary { grid-template-columns: 1fr; }.synthetic-data-banner, .blank-tenant-note { align-items: flex-start; flex-direction: column; }.synthetic-data-banner button, .blank-tenant-note button { width: 100%; text-align: left; }.oauth-contract { grid-template-columns: 1fr; }
  .feature-modal button, .builder-modal button, .celebration-modal button { min-width: 52px; min-height: 52px; }
  .workflow-progress { padding-inline: 14px; }.workflow-canvas, .workflow-context { padding: 16px; }.workflow-grid, .workflow-form .field-row { grid-template-columns: 1fr; }.workflow-footer { position: sticky; bottom: 0; padding-bottom: calc(11px + env(safe-area-inset-bottom)); }.workflow-footer span { display: none; }
  .customer-hero { align-items: flex-start; }.customer-hero > div { align-items: flex-start; }.readiness-ring { width: 68px; height: 68px; }.service-grid, .service-side { grid-template-columns: 1fr; }.member-row { grid-template-columns: 1fr auto; }.member-row.member-head { display: none; }.member-row > span:nth-child(3), .member-row > span:nth-child(4) { display: none; }
  .pricing-header { align-items: stretch; }.billing-cycle { width: 100%; }.billing-cycle button { flex: 1; }.pricing-principle { grid-template-columns: 38px 1fr; }.pricing-principle .button { grid-column: 1 / -1; width: 100%; }.pricing-grid { grid-template-columns: 1fr; }.pricing-card { padding: 20px; }.pricing-card > p { min-height: 0; }.pricing-card-enterprise { grid-template-columns: 1fr; }.pricing-card-enterprise > p, .enterprise-features { grid-column: auto; }.plan-comparison { padding: 18px 14px; }.plan-comparison > header { align-items: flex-start; flex-direction: column; gap: 8px; }
  :root { --sidebar: 0px; }
  .screen.is-active button { min-width: 45px; min-height: 45px; }.kpi-card header button, .screen-device footer button:last-child, .loop-builder li button, .favorite-button, .replay-mini { min-width: 45px; }
  .app-shell { display: block; }.main-content { grid-column: 1; }.sidebar { position: sticky; top: 0; width: 100%; height: calc(68px + env(safe-area-inset-top)); flex-direction: row; align-items: center; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; border-right: 0; border-bottom: 1px solid var(--line); }.brand { margin-right: auto; }.brand > span:last-child { display: block; }.brand > span:last-child small, .workspace-switcher, .sidebar-tip, .sidebar-user { display: none; }.primary-nav { display: flex; gap: 2px; max-width: 230px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; scrollbar-color: var(--pink-400) transparent; }.primary-nav::-webkit-scrollbar { height: 3px; }.primary-nav::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--pink-400); }.nav-item { width: 44px; flex: 0 0 44px; }.screen { padding: 0 14px calc(34px + env(safe-area-inset-bottom)); }.screen small, .screen dt, .screen dd, .screen time { font-size: 11px; }.screen button, .screen label, .screen input, .screen select { font-size: 12px; }.page-header { min-height: auto; align-items: start; flex-direction: column; padding: 22px 2px; }.header-actions { width: 100%; overflow-x: auto; }.lower-grid, .field-row { grid-template-columns: 1fr; }.momentum-banner { align-items: start; flex-wrap: wrap; }.momentum-banner button { width: 100%; margin: 0; }.library-toolbar { grid-template-columns: 1fr 1fr; }.search-box { grid-column: 1 / -1; }.sound-row { grid-template-columns: 38px minmax(0,1fr) auto 44px; gap: 7px; padding-inline: 8px; }.sound-row .waveform, .sound-row time { display: none; }.kombat-layout { display: block; }.game-inspector { margin-top: 12px; }.inspector-scroll { grid-template-columns: 1fr; }.arena { min-height: 500px; padding: 14px; }.scoreboard { grid-template-columns: 1fr 54px 1fr; }.fighters { inset-inline: 7%; }.fighter { width: 105px; height: 125px; }.fighter-gills { letter-spacing: 55px; }.editable-labels { overflow-x: auto; flex-wrap: nowrap; }.editable-labels > span { display: none; }.preview-app { grid-template-columns: 90px 1fr; }.preview-app > main { padding: 18px; }
  .dashboard-toolbar { align-items: flex-start; flex-direction: column; }.dashboard-toolbar > div:last-child { width: 100%; overflow-x: auto; }.kpi-grid, .integration-grid, .source-choice-grid, .config-grid, .range-builder, .display-config > div { grid-template-columns: 1fr; }.dashboard-lower-grid { display: block; }.attention-card { margin-top: 14px; }.integration-summary { grid-template-columns: 1fr 1fr; }.integration-summary > div:nth-child(2) { border-right: 0; }.integration-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.integration-card footer { grid-template-columns: 1fr; }
  .builder-overlay { padding: 0; }.builder-modal { max-height: 100vh; min-height: 100vh; border: 0; border-radius: 0; }.builder-body { padding: 18px 14px; }.builder-steps { padding-inline: 14px; }.source-choice { grid-template-columns: 44px 1fr; }.source-choice > i { grid-column: 2; }.oauth-note { grid-template-columns: 36px 1fr; }.oauth-note button { grid-column: 2; justify-self: start; }.sheet-grid { grid-template-columns: 30px repeat(5, minmax(52px,1fr)); overflow-x: auto; }.filter-row { grid-template-columns: 1fr; }.display-config { width: 100%; }.visual-choice-grid { grid-template-columns: 1fr 1fr; }.kpi-preview-card { position: static; width: 100%; margin-top: 16px; }.builder-modal-footer { position: sticky; bottom: 0; }.builder-modal-footer span { display: none; }
  .display-summary, .automation-summary { grid-template-columns: 1fr 1fr; }.display-summary > div:nth-child(2), .automation-summary > div:nth-child(2) { border-right: 0; }.display-summary > button { grid-column: 1 / -1; }.screen-grid { grid-template-columns: 1fr; }.screen-device:last-child { grid-column: auto; }.rule-flow { grid-template-columns: 1fr; }.rule-flow > i { transform: rotate(90deg); }.rule-card header { grid-template-columns: 42px 1fr; }.rule-card .toggle { grid-column: 2; justify-self: start; }
  .feature-overlay { padding: 0; }.feature-modal { width: 100%; max-height: 100vh; min-height: 100vh; border: 0; border-radius: 0; }.feature-modal button, .builder-modal button { min-width: 52px; min-height: 52px; }.feature-modal p, .feature-modal small, .feature-modal button, .feature-modal input, .feature-modal select, .feature-modal label, .builder-modal p, .builder-modal small, .builder-modal button, .builder-modal input, .builder-modal select, .builder-modal label { font-size: 12px; }.feature-close, .builder-modal-header button { min-width: 52px; min-height: 52px; }.feature-modal > header { min-height: 90px; padding: 16px; }.feature-modal header h2 { font-size: 21px; }.template-filters, .share-tabs { overflow-x: auto; padding-inline: 14px; }.template-grid { grid-template-columns: 1fr; padding: 14px; }.template-card:first-child { grid-column: auto; }.share-panel { padding: 16px; }.share-link-row, .snapshot-config, .destination-grid { grid-template-columns: 1fr; }.drilldown-summary { grid-template-columns: 1fr 1fr; }.drilldown-summary > div:nth-child(2) { border-right: 0; }.drilldown-content { grid-template-columns: 1fr; padding: 15px; }.lineage-bar { grid-template-columns: 30px 1fr; }.lineage-bar .connection-pill, .lineage-bar button { grid-column: 2; justify-self: start; }.source-table { overflow-x: auto; }.table-row { min-width: 570px; font-size: 11px; }.tv-preview-stage { width: 100%; min-height: 100vh; padding: 16px; border: 0; border-radius: 0; overflow-y: auto; }.tv-preview-stage header img { width: 42px; height: 42px; }.tv-preview-stage header h2 { font-size: 23px; }.tv-kpis { grid-template-columns: 1fr; margin-top: 18px; }.tv-kpis article, .tv-kpis article:last-child { min-height: 130px; grid-column: auto; }.tv-chart { grid-template-columns: 1fr; padding: 18px; }.tv-chart strong { font-size: 24px; }.tv-preview-stage > footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}