/* Qintr — design system CSS
   Fonts self-hosted (Open Sans variable font, @font-face below).
   All design tokens + component classes for the full app.
   Token values are sourced from the Claude Design project's
   colors_and_type.css — keep them in lockstep with that file.
*/

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Open Sans, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SF Mono, JetBrains Mono, Menlo, monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/* ── Brand: Qintr violet (Alaan-aligned primary) ── */

:root {
  --purple-50:  #F5F2FE;
  --purple-100: #EDE9FD;
  --purple-200: #D9CFFB;
  --purple-300: #B9A6F5;
  --purple-400: #8B6FE8;
  --purple-500: #5B2FD4;
  --purple-600: #4A26B0;
  --purple-700: #3F1F9C;
  --purple-800: #2E1678;
  --purple-900: #2A1D4A;
  /* Accent: amber for ratings/highlights only */
  --accent-300: #ffd889;
  --accent-400: #ffc247;
  --accent-500: #f5a623;
  --star:        #f5a623;
  /* Cool neutrals */
  --neutral-50:  #F7F6FB;
  --neutral-100: #F0EFF5;
  --neutral-200: #E7E6EC;
  --neutral-300: #D0CFD6;
  --neutral-400: #A8A7B0;
  --neutral-700: #45454F;
  --neutral-800: #2A2A32;
  --neutral-950: #0E0E12;
  --success-50:  #E6F7EF;
  --success-100: #C6F0DA;
  --success-500: #12B76A;
  --success-600: #0E9F5B;
  --success-700: #08794b;
  --warning-50:  #FFF3E0;
  --warning-100: #FFE4B8;
  --warning-500: #F79009;
  --warning-700: #9a5b00;
  --error-50:  #FDECEA;
  --error-100: #F9D2CE;
  --error-500: #D92D20;
  --error-600: #b42318;
  --bg:        #F7F6FB;
  --bg-soft:   #F0EFF5;
  --surface:   #FFFFFF;
  --surface-2: #FBFAFF;
  --border:    #E7E6EC;
  --border-2:  #D0CFD6;
  --text:      #0E0E12;
  --text-soft: #45454F;
  --text-mute: #77777F;
  --canvas:          var(--bg);
  --fg-1:            var(--text);
  --fg-2:            var(--text-soft);
  --fg-3:            var(--text-mute);
  --fg-4:            #A8A7B0;
  --border-subtle:   var(--border);
  --border-default:  var(--border-2);
  --border-focus:    var(--purple-500);
  --surface-hover:   #F0EFF5;
  --surface-sunken:  var(--bg-soft);
  --font-sans:    'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --font-serif:   Georgia, 'Times New Roman', serif;
  --fw-book:    400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --shadow-xs:   0 1px 2px rgba(16,16,18,.05);
  --shadow-sm:   0 1px 2px rgba(16,16,18,.05), 0 1px 1px rgba(16,16,18,.03);
  --shadow-md:   0 4px 12px rgba(43,29,74,.08), 0 1px 2px rgba(16,16,18,.05);
  --shadow-lg:   0 8px 24px rgba(43,29,74,.12), 0 2px 6px rgba(16,16,18,.05);
  --shadow-xl:   0 12px 32px rgba(43,29,74,.14), 0 2px 6px rgba(16,16,18,.05);
  --shadow-glow: var(--shadow-md);
  /* retired: glow reads as generated UI — alias kept for old references */
  --focus-ring:  0 0 0 3px var(--purple-100);
  --success: #12B76A;
  --danger:  #D92D20;
  --warning: #F79009;
  --r-sm:   10px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 999px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  /* Qintr ops type scale */
  --display-xl-size:   36px;
  --display-xl-weight: 700;
  --display-xl-lh: 1.1;
  --display-xl-ls: -.025em;
  --display-size:      26px;
  --display-weight:    700;
  --display-lh:    1.15;
  --display-ls:    -.02em;
  /* Scale opened up (Jul 2026 polish): H1/H2 must be visibly larger than body,
       hierarchy can't ride on weight alone. */
  --h1-size:           22px;
  --h1-weight:         750;
  --h1-lh:         1.2;
  --h1-ls:         -.022em;
  --h2-size:           16px;
  --h2-weight:         650;
  --h2-lh:         1.35;
  --h2-ls:         -.012em;
  --h3-size:           14px;
  --h3-weight:         650;
  --h3-lh:         1.35;
  --h3-ls:         0;
  --lead-size:         13.5px;
  --lead-weight:       400;
  --lead-lh:       1.45;
  --body-size:         14px;
  --body-weight:       400;
  --body-lh:       1.5;
  --small-size:        12.5px;
  --small-weight:      400;
  --small-lh:      1.4;
  --label-size:        11px;
  --label-weight:      600;
  --label-lh:      1.3;
  --label-ls: .04em;
}

/* ---------- Semantic element defaults — opt-in via these classes ---------- */

.pc-h2 {
  font-family:var(--font-display);
  font-size:var(--h2-size);
  font-weight:var(--h2-weight);
  line-height:var(--h2-lh);
  letter-spacing:var(--h2-ls);
}

.pc-h3 {
  font-family:var(--font-display);
  font-size:var(--h3-size);
  font-weight:var(--h3-weight);
  line-height:var(--h3-lh);
  letter-spacing:var(--h3-ls);
}

.pc-lead  {
  font-size:var(--lead-size);
  font-weight:var(--lead-weight);
  line-height:var(--lead-lh);
  color:var(--text-soft);
}

.pc-small {
  font-size:var(--small-size);
  font-weight:var(--small-weight);
  line-height:var(--small-lh);
  color:var(--text-soft);
}

/* NOTE: was named .pc-label — collided with the FORM ELEMENTS .pc-label below (same
     selector, later layer always wins), which silently made this rule dead code. Renamed
     so both can exist; use this for uppercase section/kicker text, not form-field labels. */

.pc-eyebrow {
  font-size:var(--label-size);
  font-weight:var(--label-weight);
  line-height:var(--label-lh);
  letter-spacing:var(--label-ls);
  text-transform:uppercase;
  color:var(--text-mute);
}

/* ── Dark theme ── */

[data-theme="dark"] {
  --purple-500: #7876f5;
  --purple-600: #5b5bf0;
  --bg:        #131316;
  --bg-soft:   #1a1a1f;
  --surface:   #1d1d23;
  --surface-2: #232329;
  --border:    #2e2e36;
  --border-2:  #3d3d47;
  --text:      #f2f2f5;
  --text-soft: #a8a8b5;
  --text-mute: #74747f;
  --neutral-950: #0d0b12;
  --surface-hover: #2c2440;
  --shadow-sm:   0 1px 2px rgba(0,0,0,.35);
  --shadow-md:   0 4px 14px rgba(0,0,0,.45);
  --shadow-lg:   0 14px 40px rgba(0,0,0,.55);
  --shadow-xl:   0 24px 56px rgba(0,0,0,.60);
  --shadow-glow: 0 6px 22px rgba(120,118,245,.4);
  /* Semantic aliases — custom-property inheritance bakes in the *computed*
       value at :root, so these don't auto-follow the raw tokens above just
       because --bg/--text/etc. were reassigned. Must be redeclared here too. */
  --canvas:          var(--bg);
  --fg-1:            var(--text);
  --fg-2:            var(--text-soft);
  --fg-3:            var(--text-mute);
  --fg-4:            #59506b;
  --border-subtle:   var(--border);
  --border-default:  var(--border-2);
  --surface-sunken:  var(--bg-soft);
}

/* ── Element defaults ── */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* Lucide icons are sized here, once — never inline. The <i data-lucide> shell
     is sized too so nothing jumps when the runtime swaps it for the <svg>.
     Contextual sizes (.btn svg, .empty-state .icon-wrap svg, …) override this. */

svg.lucide, i[data-lucide] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: inline-block;
}

[x-cloak] {
  display: none !important;
}

/* Thin, on-brand scrollbars everywhere — the browser default (esp. Windows'
   classic gray scrollbar with arrow buttons) clashes badly with the rounded,
   colored design system whenever a scrollable area (a textarea, a picker
   list, the sidebar) actually overflows. */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--fg-3);
}

*::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

@font-face {
  font-family: 'Open Sans';

  src: url("../fonts/OpenSans-VariableFont_wdth_wght.551810a67920.ttf") format('truetype');

  font-weight: 100 900;

  font-style: normal;

  font-display: swap;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* ════════════════════════════════════════════════
     BUTTONS
  ════════════════════════════════════════════════ */

.\!btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 20px !important;
  height: 40px !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  /* 10px, not pill: full-round buttons + rounded-everything is the generated-UI
       cluster; a single radius family reads engineered. Pills stay for badges/avatars. */
  border-radius: var(--r-sm) !important;
  border: 1.5px solid transparent !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 150ms, border-color 150ms, color 150ms !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  height: 40px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  /* 10px, not pill: full-round buttons + rounded-everything is the generated-UI
       cluster; a single radius family reads engineered. Pills stay for badges/avatars. */
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
}

.\!btn svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.btn-primary {
  background: var(--purple-500);
  color: #fff;
  border-color: var(--purple-500);
}

.btn-primary:hover {
  background: var(--purple-700);
  border-color: var(--purple-700);
}

.btn-primary:active {
  background: var(--purple-800);
  border-color: var(--purple-800);
}

.btn-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--surface);
  color: var(--fg-1);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
  border-color: var(--purple-500);
  color: var(--purple-500);
}

.btn-ghost {
  background: transparent;
  color: var(--purple-500);
  border-color: transparent;
  padding-left: 8px;
  padding-right: 8px;
}

.btn-ghost:hover {
  background: var(--purple-50);
  color: var(--purple-700);
}

.btn-accent {
  background: var(--accent-500);
  color: #1a0f00;
  font-weight: 600;
}

.btn-accent:hover {
  background: var(--accent-400);
}

.btn-danger {
  background: var(--error-500);
  color: #fff;
  border-color: var(--error-500);
}

.btn-danger:hover {
  background: var(--error-600);
  border-color: var(--error-600);
}

.btn-lg {
  height: 48px;
  padding: 0 26px;
  font-size: 15px;
}

.btn-sm {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}

.btn-block {
  width: 100%;
}

/*
    Text wrapping contract (app-wide):
    - UI chrome (buttons, chips, tabs, meters, single-line meta) stays on one line.
    - Body copy (help, leads, empty states, quotes) wraps at word boundaries.
    - Truncation uses ellipsis only where a max width / flex min-width:0 exists.
  */

.filter-chip-label,
  .section-tab,
  .settings-tab,
  .settings-nav-label,
  .nav-group-label,
  .badge,
  .pc-label,
  .dash-panel-link,
  .invite-usage-meter,
  .invite-usage-meter-count,
  .invite-usage-meter-label,
  .modal-title {
  white-space: nowrap;
}

.pc-panel-title,
  .pc-h2,
  .pc-h3,
  .dash-chart-sub {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.pc-help,
  .settings-lead,
  .modal-subtitle,
  .page-desc,
  .page-search-hint,
  .tags-empty-copy,
  .activation-sub,
  .dash-status-line,
  .screen-sub,
  .landing-sub {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-hyphens: manual;
          hyphens: manual;
}

/* Long single tokens (emails, URLs, IDs) — break only when needed */

.mono,
  .word-break-all,
  a[href^="mailto:"],
  a[href^="http"] {
  overflow-wrap: anywhere;
}

/* Icon-only button */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--fg-2);
  cursor: pointer;
  transition: all 120ms;
}

.icon-btn:hover {
  background: var(--surface-hover);
  color: var(--fg-1);
}

.icon-btn svg {
  width: 15px;
  height: 15px;
}

.icon-btn-sm {
  width: 28px;
  height: 28px;
}

/* ════════════════════════════════════════════════
     FORM ELEMENTS
  ════════════════════════════════════════════════ */

.pc-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1);
  margin-bottom: 6px;
}

/* Uppercase section / group label (share modal fields, builder groups) */

.pc-field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}

.pc-field {
  margin-bottom: 14px;
}

.pc-field .pc-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pc-field .opt {
  font-size: 12px;
  color: var(--purple-700);
  font-weight: 500;
  cursor: pointer;
}

/* Inline alert banners (form errors, billing notices) — prefer over one-off divs */

.pc-alert {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}

.pc-alert svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.pc-alert-error {
  background: var(--error-50);
  color: var(--error-600);
  border: 1px solid var(--error-100);
}

.pc-alert-success {
  background: var(--success-50);
  color: var(--success-700);
  border: 1px solid var(--success-100);
}

.pc-alert-warning {
  background: var(--warning-50);
  color: var(--warning-700);
  border: 1px solid var(--warning-100);
}

.pc-alert-info {
  background: var(--purple-50);
  color: var(--purple-700);
  border: 1px solid var(--purple-100);
}

/* Text-style back control used under Settings sub-pages and similar flows */

.pc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
  text-decoration: none;
  margin-bottom: 16px;
}

.pc-back-link:hover {
  color: var(--fg-1);
}

.pc-back-link svg {
  width: 14px;
  height: 14px;
}

/* Auth footer legal links */

.auth-legal-bar {
  padding: 16px 32px;
  text-align: center;
  font-size: 11px;
  color: var(--fg-3);
  position: relative;
  z-index: 1;
}

.auth-legal-bar a {
  color: var(--fg-3);
}

.auth-legal-bar a:hover {
  color: var(--fg-2);
}

/* Star rating row — filled / empty stars using text glyphs */

.star-row {
  display: inline-flex;
  gap: 1px;
  line-height: 1;
  color: var(--accent-500);
}

.star-row .star-empty {
  color: var(--border-default);
}

/* Clickable star-rating input (Import wizard's manual/video rating picker) —
     same glyph/color language as .star-row, sized up and made interactive. */

.star-picker {
  display: inline-flex;
  gap: 6px;
}

.star-picker-btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: var(--border-default);
  transition: color 120ms, transform 120ms;
}

.star-picker-btn.is-filled {
  color: var(--accent-500);
}

.star-picker-btn:hover {
  transform: scale(1.08);
}

.star-picker-btn:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 2px;
}

.pc-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border-default);
  background: var(--surface);
  font-size: 14px;
  color: var(--fg-1);
  outline: none;
  transition: all 120ms;
}

.pc-input::-moz-placeholder {
  color: var(--fg-3);
}

.pc-input::placeholder {
  color: var(--fg-3);
}

.pc-input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.pc-input.has-prefix-icon {
  padding-left: 42px;
}

.pc-input.has-suffix-icon {
  padding-right: 42px;
}

/* Hide browser-native password reveal (Edge/IE/Chromium) so it doesn't
     stack on top of our custom .pc-input-action eye toggle. */

.pc-input-wrap input[type="password"]::-ms-reveal,
  .pc-input-wrap input[type="password"]::-ms-clear,
  .pc-input.has-suffix-icon[type="password"]::-ms-reveal,
  .pc-input.has-suffix-icon[type="password"]::-ms-clear {
  display: none;
}

.pc-input-wrap input[type="password"]::-webkit-credentials-auto-fill-button,
  .pc-input-wrap input[type="password"]::-webkit-strong-password-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

select.pc-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a99' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.pc-input[aria-invalid="true"] {
  border-color: var(--error-500);
}

.pc-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(225,90,90,.14);
}

textarea.pc-input {
  height: auto;
  padding: 10px 14px;
  line-height: 1.6;
  resize: vertical;
}

.pc-input-wrap {
  position: relative;
}

.pc-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-3);
  pointer-events: none;
  display: flex;
}

.pc-input-icon svg {
  width: 16px;
  height: 16px;
}

.pc-input-action {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-3);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  transition: color 120ms;
}

.pc-input-action:hover {
  color: var(--fg-1);
}

.pc-input-action svg {
  width: 16px;
  height: 16px;
}

.pc-help {
  font-size: 12px;
  color: var(--fg-2);
  margin-top: 6px;
  line-height: 1.5;
}

.pc-error {
  font-size: 12px;
  color: var(--error-600);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pc-error svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Inline success message — mirrors .pc-error for the positive case (e.g. slug-available) */

.pc-success {
  font-size: 12px;
  color: var(--success-700);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pc-success svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════
     AUTH SHELL — centered card layout (login, signup, etc.)
  ════════════════════════════════════════════════ */

.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  position: relative;
  overflow: hidden;
}

/* Two independently-drifting washes instead of one static gradient —
     same footprint/opacity as before, just alive. Reuses the error-hero
     drift keyframes (generic translate+scale loops, not error-specific). */

.auth-shell::before,
  .auth-shell::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(70px);
}

.auth-shell::before {
  top: -220px;
  left: 50%;
  margin-left: -350px;
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse at center, color-mix(in oklab, var(--purple-500) 20%, transparent), transparent 65%);
  animation: errhero-drift 18s ease-in-out infinite;
}

.auth-shell::after {
  bottom: -260px;
  right: -120px;
  width: 560px;
  height: 460px;
  background: radial-gradient(ellipse at center, color-mix(in oklab, var(--accent-500) 14%, transparent), transparent 65%);
  animation: errhero-drift-2 21s ease-in-out infinite;
}

.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

.auth-topbar-link {
  font-size: 13px;
  color: var(--fg-2);
}

.auth-topbar-link a {
  display: inline-block;
  color: var(--purple-700);
  font-weight: 600;
  transition: color 150ms, transform 200ms var(--ease-enter);
}

.auth-topbar-link a:hover {
  color: var(--purple-600);
  transform: translateX(2px);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-decoration: none;
}

.auth-brand .logo-lockup {
  height: 34px;
  width: auto;
  flex-shrink: 0;
}

.auth-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px 48px;
  position: relative;
  z-index: 1;
}

.auth-card {
  width: 100%;
  max-width: 420px;
}

.auth-card h1 {
  margin: 0 0 6px;
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--fg-1);
}

.auth-card .sub {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.55;
}

.auth-card--centered h1 {
  text-align: center;
}

.auth-card--centered .sub {
  text-align: center;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--purple-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.auth-kicker .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--purple-600);
}

/* Pill variant for login/signup only — plain .auth-kicker stays as-is
     elsewhere (onboarding steps). */

.auth-kicker--pill {
  justify-content: center;
  margin: 0 auto 14px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 7px 14px 7px 11px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.auth-kicker--pill .dot {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--purple-600) 16%, transparent);
}

.auth-panel {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
  transition: box-shadow 200ms var(--ease-enter);
}

.auth-panel:focus-within {
  box-shadow: var(--shadow-lg);
}

.auth-panel .btn-primary {
  transition: background 150ms, border-color 150ms, transform 150ms var(--ease-enter), box-shadow 150ms var(--ease-enter);
}

.auth-panel .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.auth-panel .btn-primary:active {
  transform: translateY(0);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--fg-3);
  font-size: 12px;
}

.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.sso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
  cursor: pointer;
  transition: all 120ms;
  text-decoration: none;
}

.sso-btn:hover {
  background: var(--surface-hover);
  border-color: var(--neutral-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.sso-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.auth-foot {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.6;
}

.auth-foot a {
  color: var(--purple-700);
  font-weight: 600;
}

/* Entrance stagger for the auth column — card content settles in instead
     of popping, on-brand with the error-hero rise-in treatment. Reduced
     motion is handled globally (see the site-wide prefers-reduced-motion
     rule further down, which zeroes all animation durations). */

@keyframes auth-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to   {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-rise   {
  animation: auth-rise .5s var(--ease-enter) both;
}

.auth-rise-2 {
  animation: auth-rise .5s var(--ease-enter) .07s both;
}

.auth-rise-3 {
  animation: auth-rise .5s var(--ease-enter) .14s both;
}

.auth-rise-4 {
  animation: auth-rise .5s var(--ease-enter) .21s both;
}

/* Floating feature-callout cards — atmosphere only, describe the product
     rather than claiming a real customer quote. Hidden from assistive tech
     and dropped below 1100px where they'd collide with the centered card. */

@keyframes auth-float {
  0%, 100% {
    transform: translateY(0);
  }

  50%      {
    transform: translateY(-10px);
  }
}

.auth-decor {
  position: absolute;
  z-index: 1;
  width: 190px;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 14px 16px;
  text-align: left;
}

.auth-decor-inner {
  animation: auth-float var(--auth-float-dur, 12s) ease-in-out var(--auth-float-delay, 0s) infinite;
}

.auth-decor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--purple-500) 10%, transparent);
  color: var(--purple-700);
}

.auth-decor-icon svg {
  width: 15px;
  height: 15px;
}

.auth-decor-title {
  margin: 11px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.auth-decor-body {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-2);
}

@media (max-width: 1100px) {
  .auth-decor {
    display: none;
  }
}

/* Auth-scoped focus polish — label/icon tint on focus-within, kept off
     the shared .pc-field/.pc-label used app-wide so this doesn't leak
     beyond login/signup. */

.auth-panel .pc-field:focus-within .pc-label {
  color: var(--purple-700);
}

.auth-panel .pc-field:focus-within .pc-input-icon {
  color: var(--purple-600);
}

.auth-panel .pc-input-icon {
  transition: color 150ms;
}

.auth-btn-spinner {
  width: 17px;
  height: 17px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: pc-spin 0.6s linear infinite;
}

.auth-foot a:hover {
  color: var(--purple-600);
}

.auth-legal {
  text-align: center;
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 6px;
}

.auth-legal a {
  color: var(--fg-2);
}

/* Method toggle (password / magic link) */

.method-toggle button.\!active {
  background: var(--surface) !important;
  color: var(--fg-1) !important;
  box-shadow: 0 1px 3px rgba(43,37,54,.08) !important;
}

.method-toggle button.active {
  background: var(--surface);
  color: var(--fg-1);
  box-shadow: 0 1px 3px rgba(43,37,54,.08);
}

/* OTP / magic-link code inputs */

.otp.filled {
  border-color: var(--purple-600);
}

/* Email pill */

/* Callout / resend info box */

.pc-callout {
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.55;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.pc-callout .ic {
  color: var(--fg-3);
  margin-top: 1px;
  flex-shrink: 0;
}

.pc-callout svg {
  width: 14px;
  height: 14px;
}

.pc-callout a {
  color: var(--purple-700);
  font-weight: 500;
}

/* Remember me checkbox row */

.checkbox-row {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.pc-cb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg-1);
}

.pc-cb input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--purple-600);
  flex-shrink: 0;
}

/* Password strength meter */

.pw-strength {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 8px;
}

.pw-strength .bar {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-sunken);
  transition: background 200ms;
}

.pw-strength[data-score="1"] .bar:nth-child(-n+1) {
  background: var(--error-500);
}

.pw-strength[data-score="2"] .bar:nth-child(-n+2) {
  background: var(--warning-500);
}

.pw-strength[data-score="3"] .bar:nth-child(-n+3) {
  background: var(--success-500);
}

.pw-strength[data-score="4"] .bar {
  background: var(--success-500);
}

/* ════════════════════════════════════════════════
     APP SHELL — sidebar + topbar + main content
  ════════════════════════════════════════════════ */

.app-shell {
  display: grid;
  /* minmax(0,1fr) lets the main column shrink/grow with the viewport
       instead of overflowing and leaving dead space when the sidebar collapses. */
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-rows: 1fr;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  /* Fixed: grid must not grow beyond the viewport */
  height: 100dvh;
  overflow: hidden;
  /* Clip: scrolling happens inside cells, not the shell */
  transition: grid-template-columns .18s ease;
}

.app-shell.is-collapsed {
  grid-template-columns: 68px minmax(0, 1fr);
}

/* Prevent any child from widening the document and “drifting” right */

html, body {
  max-width: 100%;
  overflow-x: clip;
}

/* ── Sidebar (collapsible: 232px expanded / 68px collapsed) ── */

.app-sidebar {
  /* Sidebar-scoped dark surface — independent of the app's [data-theme="dark"]
       toggle (which only affects the light/dark canvas, not this). Content
       stays on the light canvas; the sidebar is permanently dark, brand-
       tinted toward violet rather than a neutral gray so it reads as a
       deliberate extension of the palette, not a generic dark panel.
       Overlays that happen to be TRIGGERED from inside the sidebar (the
       workspace-switcher menu, the keyboard-shortcut/user dropdown) stay on
       the light surface tokens — they float over the light content area, not
       over this dark strip, so they're deliberately NOT re-themed here. */
  --sb-bg: color-mix(in oklab, var(--purple-900) 42%, #0c0a13);
  --sb-bg-hover: color-mix(in oklab, var(--purple-900) 62%, #0c0a13);
  --sb-border: rgba(255,255,255,.08);
  --sb-text: rgba(255,255,255,.68);
  --sb-text-strong: #ffffff;
  --sb-text-mute: rgba(255,255,255,.38);
  --sb-icon: rgba(255,255,255,.62);
  width: 100%;
  min-width: 0;
  background: linear-gradient(180deg, var(--sb-bg) 0%, var(--sb-bg-hover) 100%);
  border-right: 1px solid var(--sb-border);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  box-sizing: border-box;
  transition: padding .18s ease;
}

.app-sidebar.is-collapsed {
  padding: 14px 10px;
}

.sidebar-top {
  margin-bottom: 10px;
}

.sidebar-brand-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 6px;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background 120ms;
}

.app-sidebar .sidebar-brand {
  color: var(--sb-text-strong);
}

.app-sidebar .sidebar-brand:hover {
  background: var(--sb-bg-hover);
}

.sidebar-brand .logo-lockup,
  .sidebar-brand .logo-mark {
  height: 30px;
  width: auto;
  display: block;
}

.app-sidebar.is-collapsed .sidebar-brand-row {
  flex-direction: column;
  gap: 6px;
}

.app-sidebar.is-collapsed .sidebar-brand {
  justify-content: center;
  padding: 4px 0;
  flex: 0 0 auto;
  width: 100%;
}

/* Collapse toggle lives at the bottom of the nav, not next to the logo -
     it's an infrequent, secondary action and shouldn't compete with the
     brand for top-of-sidebar attention. */

.sidebar-bottom {
  margin-top: auto;
  padding-top: 10px;
  flex-shrink: 0;
  border-top: 1px solid var(--sb-border);
}

.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--sb-text-mute);
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 120ms, color 120ms;
}

.sidebar-collapse-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: .8;
}

.sidebar-collapse-btn:hover {
  background: var(--sb-bg-hover);
  color: var(--sb-text-strong);
}

.app-sidebar.is-collapsed .sidebar-collapse-btn {
  justify-content: center;
  padding: 9px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
}

/* Button-reset used by the "Keyboard shortcuts" item inside .header-user-menu
     (the class name is a leftover from when it lived in the sidebar). */

.sidebar-bottom-item {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.sidebar-user-email {
  font-size: 11px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.sidebar-user-menu-head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
}

.header-user-menu .nav-item {
  font-size: 13.5px;
  padding: 8px 10px;
}

.header-user-menu .nav-item.danger {
  color: var(--danger);
}

.header-user-menu .nav-item.danger svg {
  color: var(--danger);
}

.sidebar-user-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  /* Match .nav-item: same size, weight, and color as Settings / Help */
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg-2);
}

.sidebar-user-plan-label {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

/* Same stroke icon size/weight as other menu rows (.nav-item svg) */

.sidebar-user-plan-label svg,
  .sidebar-user-plan-label i[data-lucide] {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--fg-2);
  opacity: .8;
}

.sidebar-user-plan a {
  font-size: 12px;
  font-weight: 700;
  color: var(--purple-500);
  text-decoration: none;
  flex-shrink: 0;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}

.nav-group:first-of-type {
  margin-top: 8px;
}

.nav-group-label {
  padding: 6px 11px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sb-text-mute);
  line-height: 1.2;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.nav-group-divider {
  height: 1px;
  margin: 6px 8px 4px;
  background: var(--sb-border);
  border-radius: 1px;
}

.app-sidebar.is-collapsed .nav-group {
  margin-top: 6px;
}

.app-sidebar.is-collapsed .nav-group:first-of-type {
  margin-top: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--fg-2);
  cursor: pointer;
  line-height: 1.4;
  text-decoration: none;
  transition: background 120ms, color 120ms;
  font-weight: 500;
}

.app-sidebar.is-collapsed .nav-item {
  justify-content: center;
  padding: 9px;
}

.nav-item svg {
  width: 17px;
  height: 17px;
  color: var(--fg-2);
  flex-shrink: 0;
  opacity: .8;
}

.nav-item .nav-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-body);
  background: var(--purple-100);
  color: var(--purple-700);
  border-radius: 999px;
  padding: 1px 7px;
}

.nav-item:hover:not(.active) {
  background: var(--surface-hover);
  color: var(--fg-1);
}

.nav-item:hover:not(.active) svg {
  color: var(--fg-1);
  opacity: 1;
}

/* Tinted active state: solid violet fill made the nav the loudest element on
     every screen. Tint + inset indicator says "you are here" and reserves solid
     violet for the primary action. */

.nav-item.active {
  background: var(--purple-50);
  color: var(--purple-700);
  font-weight: 650;
  box-shadow: inset 2.5px 0 0 var(--purple-500);
}

.nav-item.\!active {
  background: var(--purple-50) !important;
  color: var(--purple-700) !important;
  font-weight: 650 !important;
  box-shadow: inset 2.5px 0 0 var(--purple-500) !important;
}

.nav-item.active svg {
  color: var(--purple-600);
  opacity: 1;
}

.nav-item.\!active svg {
  color: var(--purple-600) !important;
  opacity: 1 !important;
}

.nav-item.active .nav-count {
  background: var(--purple-100);
  color: var(--purple-700);
}

.nav-item.\!active .nav-count {
  background: var(--purple-100) !important;
  color: var(--purple-700) !important;
}

.nav-item.active:hover {
  background: var(--purple-100);
  color: var(--purple-700);
}

.nav-item.\!active:hover {
  background: var(--purple-100) !important;
  color: var(--purple-700) !important;
}

/* Sidebar nav items only — .nav-item is also reused for the header user
     dropdown's menu items (a light overlay, not part of this dark strip),
     so all of this is scoped under .app-sidebar rather than touching the
     base .nav-item rules above, which stay correct for that other context. */

.app-sidebar .nav-item {
  color: var(--sb-text);
}

.app-sidebar .nav-item svg {
  color: var(--sb-icon);
}

.app-sidebar .nav-item .nav-count {
  background: rgba(255,255,255,.16);
  color: #fff;
}

.app-sidebar .nav-item:hover:not(.active) {
  background: var(--sb-bg-hover);
  color: var(--sb-text-strong);
}

.app-sidebar .nav-item:hover:not(.active) svg {
  color: var(--sb-text-strong);
}

/* Bold white pill for the active item — the strongest contrast available
     against a dark surface, replacing the tint-on-light treatment above
     (which only made sense against a light sidebar). */

.app-sidebar .nav-item.active {
  background: #ffffff;
  color: var(--purple-700);
  font-weight: 650;
  box-shadow: none;
}

.app-sidebar .nav-item.\!active {
  background: #ffffff !important;
  color: var(--purple-700) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

.app-sidebar .nav-item.active svg {
  color: var(--purple-600);
  opacity: 1;
}

.app-sidebar .nav-item.\!active svg {
  color: var(--purple-600) !important;
  opacity: 1 !important;
}

.app-sidebar .nav-item.active .nav-count {
  background: var(--purple-100);
  color: var(--purple-700);
}

.app-sidebar .nav-item.\!active .nav-count {
  background: var(--purple-100) !important;
  color: var(--purple-700) !important;
}

.app-sidebar .nav-item.active:hover {
  background: #ffffff;
  color: var(--purple-700);
}

.app-sidebar .nav-item.\!active:hover {
  background: #ffffff !important;
  color: var(--purple-700) !important;
}

.u-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-700);
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-body);
  background: var(--purple-100);
  -o-object-fit: cover;
     object-fit: cover;
}

/* ── Paywall banner (dismissible, shown above the topbar near a plan limit) ── */

.paywall-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 22px;
  background: var(--purple-50);
  border-bottom: 1px solid var(--purple-200);
  font-size: 13px;
  color: var(--purple-700);
}

.paywall-banner--expired {
  background: color-mix(in srgb, var(--accent-500, #F5A623) 12%, var(--surface));
  border-bottom-color: color-mix(in srgb, var(--accent-500, #F5A623) 35%, var(--border-subtle));
  color: var(--fg-1);
}

.paywall-banner--expired .paywall-banner-upgrade {
  background: var(--accent-500, #F5A623);
  color: #1a1a1a;
}

.paywall-banner--expired .paywall-banner-dismiss {
  color: var(--fg-2);
}

.paywall-banner-upgrade {
  display: inline-block;
  text-decoration: none;
  background: var(--purple-500);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

.paywall-banner-dismiss {
  background: none;
  border: none;
  color: var(--purple-600);
  cursor: pointer;
  font-size: 14px;
  padding: 2px;
  flex-shrink: 0;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-shrink: 0;
  box-sizing: border-box;
  /* A sibling of .app-main-body (the scrolling container), not a child of
       it — same as .mobile-nav-toggle and the paywall banners above it —
       so it never scrolls with the page and needs no position:sticky or
       margin tricks to bleed edge-to-edge; .app-main itself has no padding
       to fight against. */
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--canvas);
}

.page-header-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.page-header-title {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-ls);
  line-height: var(--h1-lh);
  color: var(--fg-1);
  margin: 0;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.page-header-actions:empty {
  display: none;
}

/* Global search + account access, identical on every standard page's
     header — moved out of the sidebar (which used to carry them, one at
     the top, one pinned to the bottom, both losing their label when the
     sidebar collapses) so there is exactly one place for each, and they
     never compete with per-page CTAs (those live in page-body toolbars,
     not here). */

.header-search {
  position: relative;
  flex-shrink: 0;
}

.header-search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  min-width: 220px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--fg-3);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  height: 36px;
  box-sizing: border-box;
}

.header-search-btn:hover {
  border-color: var(--purple-200);
  color: var(--fg-2);
}

.header-search-btn svg {
  opacity: .75;
}

.header-search-label {
  white-space: nowrap;
  margin-right: auto;
}

.header-search-hint {
  opacity: .65;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .header-search-label, .header-search-hint {
    display: none;
  }

  .header-search-btn {
    padding: 7px;
    min-width: 0;
    width: 34px;
    justify-content: center;
  }
}

/* Inline search — expands in place in the header (no centered modal, no
     backdrop); results drop down anchored to the input itself, same pattern
     as .header-user-menu, just wider and search-flavoured. */

.header-search-inline {
  display: flex;
  flex-direction: column;
  width: 340px;
}

@media (max-width: 720px) {
  .header-search-inline {
    width: min(340px, calc(100vw - 32px));
    position: absolute;
    right: 0;
    top: 0;
  }
}

.header-search-input-row {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1.5px solid var(--purple-300);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.header-search-input-row svg {
  width: 16px;
  height: 16px;
  color: var(--fg-3);
  flex-shrink: 0;
}

.header-search-input-row input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--fg-1);
  font-family: var(--font-body);
}

.header-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  max-height: min(400px, 60vh);
  overflow-y: auto;
  padding: 6px;
  box-sizing: border-box;
}

.header-search-empty {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--fg-3);
  box-sizing: border-box;
}

.header-notif {
  position: relative;
  flex-shrink: 0;
}

.header-notif-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--fg-3);
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
}

.header-notif-btn svg {
  width: 16px;
  height: 16px;
  opacity: .8;
}

.header-notif-btn:hover, .header-notif-btn[aria-expanded="true"] {
  border-color: var(--purple-200);
  color: var(--fg-2);
}

.header-notif-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 40;
}

.header-notif-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg-1);
}

.header-notif-dismiss-all {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--purple-600);
  font-family: inherit;
}

.header-notif-dismiss-all:hover {
  color: var(--purple-700);
}

.header-notif-item-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-subtle);
}

.header-notif-item-wrap:last-of-type {
  border-bottom: none;
}

.header-notif-item-wrap .header-notif-item {
  flex: 1;
  border-bottom: none;
  padding-right: 36px;
}

.header-notif-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-notif-dismiss:hover {
  background: var(--surface-hover);
  color: var(--fg-1);
}

.header-notif-dismiss svg {
  width: 13px;
  height: 13px;
}

.header-notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 16px;
  text-align: center;
}

.header-notif-empty svg {
  width: 22px;
  height: 22px;
  color: var(--fg-3);
  opacity: .6;
}

.header-notif-empty p {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-3);
}

.header-user {
  position: relative;
  flex-shrink: 0;
}

.header-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 2px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  height: 36px;
  box-sizing: border-box;
}

.header-user-btn:hover, .header-user-btn[aria-expanded="true"] {
  background: var(--surface-hover);
  border-color: var(--border-subtle);
}

.header-user-btn .u-avatar,
  .header-user-btn img.u-avatar {
  width: 30px;
  height: 30px;
  font-size: 11.5px;
}

.header-user-chevron {
  width: 14px;
  height: 14px;
  color: var(--fg-3);
  flex-shrink: 0;
  opacity: .7;
  margin-right: 2px;
}

.header-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  max-width: calc(100vw - 24px);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 40;
  padding: 6px;
}

.search-group-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 7px 8px 4px;
}

.search-result-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.search-result-row:hover {
  background: var(--purple-50);
}

.search-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--purple-100);
  color: var(--purple-700);
  display: grid;
  place-items: center;
}

/* Settings modal overlay — hidden/shown via a class (not inline `display`
     or Alpine's x-show) so visibility is a single deterministic CSS rule.
     Hidden by default even before Alpine loads; Alpine only ever toggles
     the `is-open` class. */

.settings-modal-overlay.is-open {
  display: flex;
}

/* Global HTMX-populated modal (share / delete / paywall etc.) — same class-toggle
     pattern as .settings-modal-overlay, for the same reason: visibility must be a
     single deterministic CSS rule, not inline `style` mutated from JS. */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.modal-overlay.is-open {
  display: flex;
}

/* Styled confirm dialog (pcConfirm) — a separate, higher-stacked overlay so
     a confirm triggered from inside an already-open modal (e.g. the invite
     wizard's "Clear all") doesn't destroy that modal's content underneath it. */

.confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 150;
  align-items: center;
  justify-content: center;
}

.confirm-overlay.is-open {
  display: flex;
}

.modal-content {
  background: var(--surface);
  border-radius: var(--r-md);
  max-width: 500px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
  margin: 16px;
}

.modal-content.modal-sm {
  max-width: 420px;
}

.modal-content.modal-lg {
  max-width: 640px;
}

/* Wider shell when share/request wizards are open */

.modal-content:has(.share-channels) {
  max-width: 720px;
}

.modal-content:has(.share-testimonial) {
  max-width: 560px;
}

/* Widget style picker — wide shell; body flexes so footer stays pinned */

.modal-content:has(.widget-gallery-modal) {
  max-width: min(960px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-content:has(.share-studio) {
  max-width: 940px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The two composer panes scroll independently (see .share-studio-controls /
     .share-preview-area below) — the modal shell itself must not scroll. */

.modal-content:has(.share-studio) .modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Invite wizard: same pinned-head / scrolling-middle / pinned-footer shell
     as .share-studio above. The header, mode switch/stepper, and footer
     action buttons must never scroll away; only the active step's content
     does. See .invite-wizard-head / .invite-wizard-scroll /
     .invite-wizard-footer. */

/* Request / invite wizard — wide shell like the widget style gallery so the
     message step can show config + live email preview side by side. */

.modal-content:has(.invite-wizard) {
  max-width: min(960px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-content:has(.invite-wizard) .modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* New form dialog — type/layout picker grids can get tall (esp. on short
     viewports); pin header and Cancel/Create so only the picker content
     scrolls, instead of the whole modal (and its action buttons) scrolling
     off-screen. Same pinned-head/scrolling-middle/pinned-footer shell as
     .share-studio / .invite-wizard above. */

.modal-content.new-form-modal {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-content.new-form-modal .modal-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-bottom: 0;
}

.new-form-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.new-form-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.new-form-modal .modal-actions {
  flex-shrink: 0;
  padding: 16px 0 28px;
}

.modal-body {
  padding: 28px;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.modal-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--fg-1);
  line-height: 1.25;
}

.modal-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.55;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.modal-actions--stack {
  flex-direction: column;
  align-items: stretch;
}

/* Modal entrance: a 160ms fade + 6px rise instead of a display:none → flex snap.
     Kept subtle — motion should feel like intent, not decoration. */

@keyframes pc-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pc-modal-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(.985);
  }

  to   {
    opacity: 1;
    transform: none;
  }
}

.modal-overlay.is-open {
  animation: pc-fade-in 140ms ease-out;
}

.modal-overlay.is-open .modal-content {
  animation: pc-modal-in 160ms var(--ease-enter);
}

.settings-modal-overlay.is-open {
  animation: pc-fade-in 140ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay.is-open,
    .modal-overlay.is-open .modal-content,
    .settings-modal-overlay.is-open {
    animation: none;
  }
}

/* ── Main content ──
     .app-main is a flex column: a fixed-height topbar, then a scrolling body.
     Individual pages that need full-bleed layouts (Testimonials, testimonial detail)
     override padding/overflow on .app-main-body, not .app-main itself. */

.app-main {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  /* grid/flex child must have this to honour overflow */
  min-width: 0;
  /* same — without it, wide content (e.g. a multi-column
                           preview) bubbles up and forces the whole grid track,
                           and the page, wider than the viewport */
}

.app-main-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  padding: 20px 24px 28px;
  overflow-y: auto;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
}

.app-main-body > .testimonial-layout,
  .app-main-body > .wall-layout,
  .app-main-body > .td-shell,
  .app-main-body > .wb-shell,
  .app-main-body > .builder-shell,
  .app-main-body > .builder-layout,
  .app-main-body > .invite-activity {
  flex: 1 1 auto;
  min-height: 0;
}

/* ════════════════════════════════════════════════
     PAGE COMPONENTS
  ════════════════════════════════════════════════ */

/* Page header (legacy full-page title block — prefer topbar title + page-toolbar) */

.page-head .sub {
  font-size: 13px;
  color: var(--fg-2);
  margin: 0;
}

.page-head .actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Unified list/page toolbar ──
     Title + subtitle live in the topbar.
     Body chrome: [search + filters LEFT] ····· [primary CTA RIGHT]
     Optional second row: .page-filters for pills / selects. */

.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0 0 20px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.page-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 160px;
  min-width: 0;
  max-width: 100%;
}

.page-toolbar-left .local-search {
  flex: 1 1 auto;
  max-width: min(320px, 100%);
  min-width: 0;
  width: 100%;
}

.page-toolbar-left .local-search-field {
  width: 100%;
}

.page-toolbar-left .local-search-field .pc-input,
  .page-toolbar-left .local-search-field input[type="search"],
  .page-toolbar-left .local-search-field input[type="text"] {
  width: 100%;
  min-width: 0;
}

.page-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.page-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.page-filters-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.page-filters-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin-left: auto;
}

.page-search-hint {
  margin: -8px 0 16px;
  font-size: 13px;
  color: var(--fg-3);
}

.page-search-hint a {
  color: var(--purple-600);
  font-weight: 600;
  text-decoration: none;
}

.page-search-hint a:hover {
  text-decoration: underline;
}

/* Usage / count chip in list toolbars (e.g. "2 / 3 widgets", "1 wall") */

.page-meta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-3);
  white-space: nowrap;
  line-height: 1.3;
}

/* Centered list of cards (testimonial list, import history) */

.pc-stack {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 0 0;
}

.pc-pagination-label {
  font-size: 12.5px;
  color: var(--fg-2);
  white-space: nowrap;
}

/* Local list search — same chrome on Forms, Widgets, Requests, Testimonials, pickers */

.local-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.local-search--grow {
  flex: 1 1 auto;
}

.local-search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.local-search-icon {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--fg-3);
  pointer-events: none;
  flex-shrink: 0;
}

.local-search-field .pc-input,
  .local-search-field input[type="search"],
  .local-search-field input[type="text"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 38px;
  padding-left: 34px;
  box-sizing: border-box;
  font-size: 13px;
}

/* Desktop list search: comfortable fixed width when not stretched by toolbar */

.page-toolbar-left .local-search-field .pc-input {
  max-width: 280px;
}

.local-search--grow .local-search-field .pc-input,
  .local-search--grow .local-search-field input[type="search"],
  .local-search--grow .local-search-field input[type="text"] {
  width: 100%;
}

.local-search-field .pc-input:focus,
  .local-search-field input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(91,47,212, 0.12);
}

/* Section tabs (Forms | Requests, Analytics categories) — underline style */

.section-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.section-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: -1px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: color 120ms;
}

.section-tab:hover {
  color: var(--fg-1);
}

.section-tab.active {
  color: var(--fg-1);
  border-bottom-color: var(--purple-600);
}

.section-tab.\!active {
  color: var(--fg-1) !important;
  border-bottom-color: var(--purple-600) !important;
}

.section-tab svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.section-tab .count,
  .section-tab-count {
  color: var(--fg-3);
  font-weight: 600;
  font-size: 12.5px;
}

.section-tab.active .count,
  .section-tab.active .section-tab-count {
  color: var(--purple-700);
}

.section-tab.\!active .count,
  .section-tab.\!active .section-tab-count {
  color: var(--purple-700) !important;
}

/* Sub-page back row (edit, embed) — no second page title */

.page-back-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.page-back-row .page-desc {
  flex: 1 1 auto;
  max-width: none;
}

/* Builder chrome (form + widget builders) */

.builder-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.builder-chrome-name {
  flex: 0 1 238px;
  min-width: 100px;
  max-width: 238px;
  /* ~30% narrower than previous 340px */
}

.builder-chrome-name input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--fg-1);
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  padding: 4px 8px;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.builder-chrome-name input:focus {
  border-color: var(--purple-400);
  background: var(--surface);
}

.builder-chrome-slug {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 5px;
  height: 30px;
  padding: 0 8px;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  white-space: nowrap;
}

.builder-chrome-slug:focus-within {
  border-color: var(--purple-400);
  background: var(--surface);
}

.builder-chrome-slug.has-error {
  border-color: var(--danger-500, #e5484d);
}

.builder-chrome-slug-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--fg-3);
}

.builder-chrome-slug-input {
  width: 120px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-2);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
}

.builder-chrome-slug-input:focus {
  color: var(--fg-1);
}

.builder-chrome-slug-error-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--danger-500, #e5484d);
}

.builder-chrome-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Step nav merged into the header row (form builder only — see
     builder.html for .builder-step/-num/-connector rules). Sits between
     the name field and the action buttons; scrolls horizontally rather
     than wrapping if the row gets tight. */

.builder-steps-compact {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 1;
  min-width: 0;
  margin-left: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.builder-steps-compact::-webkit-scrollbar {
  display: none;
}

/* Center the single "Import complete" chip in the remaining header space */

.builder-steps-compact.builder-steps-done {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  margin-left: 0;
}

.builder-type-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 8px;
  border-radius: var(--r-full);
  background: var(--purple-50);
  color: var(--purple-700);
  font-size: 12.5px;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s;
}

.builder-type-chip:hover {
  background: var(--purple-100);
}

.builder-type-chip svg {
  width: 13px;
  height: 13px;
}

.builder-type-chip-arrow {
  font-weight: 500;
  opacity: .7;
  padding-left: 7px;
  border-left: 1px solid var(--purple-200, currentColor);
}

@media (max-width: 900px) {
  .builder-type-chip-arrow {
    display: none;
  }
}

.builder-saved-hint {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  flex-shrink: 0;
}

/* Step dots for .builder-steps-compact — shared by Forms builder and the
     Import wizard. Inactive steps collapse to a numbered dot; the active
     step expands to show its label inline (keeps the merged header row
     from growing taller than the header itself). A consumer with a real
     linear progression (e.g. Import) can also apply builder-step-num--active
     to already-completed steps, not just the current one, to fill their
     dot in as "reached" — Forms doesn't need that since every tab is
     always reachable, so its own JS only ever applies it to the current tab. */

.builder-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  z-index: 1;
  transition: background .12s, border-color .12s, padding .12s;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  white-space: nowrap;
}

.builder-step:hover:not(.builder-step--active) {
  background: var(--surface-hover);
}

.builder-step--active {
  padding: 4px 12px 4px 4px;
  background: var(--purple-50);
  border-color: color-mix(in srgb, var(--purple-500) 18%, transparent);
}

.builder-step--active .builder-step-label {
  color: var(--purple-700);
}

.builder-step-label {
  display: inline;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fg-1);
}

.builder-step--active .builder-step-label {
  display: inline;
}

@media (max-width: 1100px) {
  .builder-step-label {
    display: none;
  }

  .builder-step--active .builder-step-label {
    display: inline;
  }
}

.builder-step-num {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--border);
  color: var(--fg-3);
}

.builder-step-num--active {
  background: var(--purple-500);
  color: #fff;
}

/* Thin connecting line between step dots — purely decorative. */

.builder-step-connector {
  width: 10px;
  height: 1px;
  flex-shrink: 0;
  background: var(--border-subtle);
}

/* Testimonials filter sticky bar */

.testimonial-list-col {
  background: var(--canvas);
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  border-right: 1px solid var(--border-default);
}

.testimonial-list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.testimonial-list-body {
  padding: 8px 12px 24px 24px;
  flex: 1;
  min-height: 0;
}

.testimonial-filter-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--canvas);
  border-bottom: 1px solid var(--border-subtle);
}

/* Search + status + dropdown filters all share one wrapping row so the
     status filter reads as a quick dropdown at the top, alongside search,
     rather than its own pill row. */

.testimonial-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 8px;
  padding: 14px 28px 10px;
}

/* Search and filter chips share one height (38px) across every listing page (Testimonials/Feedback/Ratings/Widgets/Wall of Love/Requests). */

.testimonial-filter-row .testimonial-search-compact,
  .page-toolbar-left .testimonial-search-compact {
  /* Overrides .page-toolbar-left .local-search's grow-to-320px rule — a
       fixed compact width keeps the gap to the first filter chip visually
       tight instead of the search box stretching to fill the row. */
  flex: 0 1 280px;
  min-width: 160px;
  max-width: 280px;
}

.testimonial-search-input.pc-input,
  .testimonial-filter-row .local-search-field .pc-input,
  .page-toolbar-left .local-search-field .pc-input {
  height: 38px;
  font-size: 13px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 34px;
  box-sizing: border-box;
}

.testimonial-layout.is-empty {
  grid-template-columns: 1fr !important;
}

.testimonial-layout.is-empty .testimonial-detail-pane {
  display: none !important;
}

.testimonial-layout.is-empty .testimonial-filter-sticky {
  display: none;
}

/* Bottom sticky multi-select bar */

.testimonial-bulk-bar {
  flex-shrink: 0;
  z-index: 40;
  position: sticky;
  bottom: 0;
  background: color-mix(in oklab, var(--purple-500) 10%, var(--surface));
  border-top: 1px solid color-mix(in oklab, var(--purple-500) 22%, var(--border-subtle));
  box-shadow: 0 -6px 20px rgba(43, 29, 74, 0.08);
}

.testimonial-bulk-bar-inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 12px 20px;
  overflow-x: auto;
}

.testimonial-bulk-count {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--purple-700);
}

/* Stat grid */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}

/* Dashboard home's row can have 3-5 cards depending on which form types the
     org uses (Feedback/Ratings only appear when relevant) — auto-fit keeps
     however many exist on one row instead of a fixed 4-column grid leaving
     a lone orphaned card wrapped onto its own second row. */

.dash-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Stat card, Jul 2026 polish: label-above-value (Stripe/Linear convention),
     no icon tile, no badge — the number is the hero, the third line carries
     the one thing worth knowing. */

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 14px 16px 15px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 150ms, border-color 150ms;
}

.stat-card .val-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

a.stat-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.stat-card--link:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--purple-200);
}

a.stat-card--link:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 2px;
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
}

.stat-card .top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-card .icon-tile {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--purple-50);
  color: var(--purple-600);
  display: grid;
  place-items: center;
}

.stat-card .icon-tile svg {
  width: 16px;
  height: 16px;
}

.stat-card .val {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.stat-card .lbl {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--fg-3);
  margin: 0 0 7px;
  order: -1;
}

.stat-card .delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
}

.stat-card .delta svg {
  width: 13px;
  height: 13px;
}

.delta-up {
  color: var(--success);
}

.delta-dn {
  color: var(--danger);
}

/* Tabs */

.pc-tab .count {
  background: var(--neutral-100);
  padding: 1px 6px;
  font-size: 11px;
  border-radius: var(--r-full);
  color: var(--fg-3);
}

.pc-tab.\!active {
  color: var(--fg-1) !important;
  border-bottom-color: var(--purple-600) !important;
  font-weight: 600 !important;
}

.pc-tab.active {
  color: var(--fg-1);
  border-bottom-color: var(--purple-600);
  font-weight: 600;
}

.pc-tab.\!active .count {
  background: var(--purple-50) !important;
  color: var(--purple-700) !important;
}

.pc-tab.active .count {
  background: var(--purple-50);
  color: var(--purple-700);
}

/* Testimonial card (wall / grid) */

.t-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 150ms var(--ease-enter), box-shadow 150ms var(--ease-enter);
  cursor: pointer;
}

.t-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.t-card .src-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--fg-3);
}

.t-card .src-badge svg {
  width: 12px;
  height: 12px;
}

.t-card .stars {
  display: flex;
  gap: 2px;
  color: var(--star);
}

.t-card .stars svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.t-card .body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-1);
  font-weight: 400;
}

.t-card .person {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.t-card .person .av {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--purple-400), var(--purple-700));
}

.t-card .person .n {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  line-height: 1.3;
}

.t-card .person .\!n {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fg-1) !important;
  line-height: 1.3 !important;
}

.t-card .person .r {
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.3;
}

.t-card .person .\!r {
  font-size: 12px !important;
  color: var(--fg-2) !important;
  line-height: 1.3 !important;
}

/* Standalone avatar circle — reusable outside .t-card (gallery previews, builder,
     avatar-strip widget type). Same look as .t-card .person .av; size/font overridable inline. */

.av-circle {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--purple-400), var(--purple-700));
}

/* ════════════════════════════════════════════════
     WALL OF LOVE — dashboard live preview.
     Mirrors templates/public/wall.html's own inline styles so the config
     page's preview visually matches the real public page. Size-scaling
     for Compact/Comfortable density is applied inline by Alpine (see
     templates/dashboard/wall.html) — these rules cover fixed layout/color.
  ════════════════════════════════════════════════ */

.wall-headline {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  color: var(--fg-1);
}

.wall-subline {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--fg-2);
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto 28px;
}

.wall-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  transition: transform .2s ease, box-shadow .2s ease;
}

.wall-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.card-stars {
  color: var(--accent-500);
  letter-spacing: 2px;
  line-height: 1;
}

.card-stars .star-empty {
  color: var(--border-default);
}

.card-content {
  margin: 0;
  line-height: 1.6;
  color: var(--fg-1);
}

.card-content::before {
  content: "\201C";
}

.card-content::after  {
  content: "\201D";
}

.card-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.card-author .avatar {
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--purple-400), var(--purple-700));
  color: #fff;
  font-weight: 700;
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.author-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.author-meta {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-thumb {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16/10;
  background: linear-gradient(140deg, var(--purple-600) 0%, var(--purple-900) 100%);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.video-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-full);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.play-btn {
  border-radius: var(--r-full);
  background: rgba(255,255,255,.93);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
}

/* Status badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

.badge-success {
  background: var(--success-50);
  color: var(--success-700);
}

.badge-warning {
  background: var(--warning-50);
  color: var(--warning-700);
}

.badge-neutral {
  background: var(--neutral-100);
  color: var(--neutral-700);
}

.badge-purple  {
  background: var(--purple-50);
  color: var(--purple-700);
}

.badge-danger  {
  background: var(--error-50);
  color: var(--error-600);
}

.badge-lg {
  height: 28px;
  padding: 0 12px;
  font-size: 13px;
}

/* Custom tags (workspace organization) — saturated enough to read at a glance */

.tag-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tag-chip-row--pane {
  min-height: 24px;
  margin: 0;
}

/* Inbox list cards (Testimonials / Feedback / Ratings)
     Layout:
       [check] [avatar]  name ………………… stars
                         subtitle
                         excerpt (2 lines)
                         [status · tags …] ……… [time / share]
     Chips keep full badge/tag padding. Right side is a real column
     (stars up top, time/share on the meta row) — not empty flex void. */

.inbox-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 120px;
  height: auto;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color 150ms, background 150ms, box-shadow 150ms;
  box-sizing: border-box;
}

.inbox-card:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
}

.inbox-card:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 2px;
}

.inbox-card__check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--border-default);
  cursor: pointer;
  margin-top: 10px;
  background: var(--surface);
}

.inbox-card__check i,
  .inbox-card__check svg {
  width: 12px;
  height: 12px;
  color: #fff;
}

.inbox-card__avatar-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.inbox-card__avatar,
  .inbox-card__avatar.av-circle,
  .inbox-card__avatar-wrap .av-circle {
  width: 40px;
  height: 40px;
  font-size: 13px;
  flex-shrink: 0;
}

.inbox-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.inbox-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.inbox-card__identity {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 4px;
}

.inbox-card__name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fg-1);
}

.inbox-card__name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(100%, 28ch);
}

.inbox-card__sub {
  font-size: 12px;
  line-height: 1.35;
  color: var(--fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-card__aside {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 5.5rem;
  /* stable right column so rows align */
}

.inbox-card__aside .star-row,
  .inbox-card__aside .stars {
  font-size: 13px;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* Share is an action next to stars — not next to relative time */

.inbox-card__aside .share-action-btn,
  .inbox-card__aside .icon-btn {
  flex-shrink: 0;
}

.inbox-card__excerpt {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-2);
  max-height: calc(1.45em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.inbox-card__excerpt--muted {
  color: var(--fg-3);
  font-style: italic;
}

/* Meta strip: status + tags (left) · time/share (right) */

.inbox-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
  min-height: 28px;
}

.inbox-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
}

.inbox-card__meta-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--fg-3);
  font-size: 11.5px;
  line-height: 1;
  white-space: nowrap;
}

/* Keep full chip padding — do not crush badge/tag sizing here */

.inbox-card__meta .badge {
  flex-shrink: 0;
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

.inbox-card__meta .tag-chip {
  flex-shrink: 0;
  height: 22px;
  padding: 0 9px 0 7px;
  font-size: 11px;
  max-width: 140px;
}

.inbox-card__meta .tag-chip-dot {
  width: 6px;
  height: 6px;
}

.inbox-card__time {
  color: var(--fg-3);
  font-size: 11.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: min(220px, 100%);
  height: 24px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tag-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.tag-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.85;
}

/* Stronger tinted fills so colors are obvious on white cards */

.tag-chip--violet {
  background: #EDE9FD;
  color: #3F1F9C;
  border-color: #C4B5F5;
}

.tag-chip--violet .tag-chip-dot {
  background: #5B2FD4;
  opacity: 1;
}

.tag-chip--amber .tag-chip-dot {
  background: #F5A623;
  opacity: 1;
}

.tag-chip--emerald .tag-chip-dot {
  background: #12B76A;
  opacity: 1;
}

.tag-chip--sky .tag-chip-dot {
  background: #0EA5E9;
  opacity: 1;
}

.tag-chip--rose .tag-chip-dot {
  background: #E11D48;
  opacity: 1;
}

.tag-chip--slate .tag-chip-dot {
  background: #6B6B78;
  opacity: 1;
}

.tag-chip--more {
  background: var(--surface);
  color: var(--fg-3);
  border-color: var(--border-default);
  font-weight: 700;
}

.tag-chip--more .tag-chip-dot {
  display: none;
}

.tag-chip-empty {
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.4;
}

/* Removable applied chip in pane */

.tag-chip-removable .tag-chip {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-right: 6px;
}

.tag-chip-removable .tag-chip--violet + .tag-chip-remove {
  background: #EDE9FD;
  color: #3F1F9C;
  border-color: #C4B5F5;
}

/* Testimonials tag filter popover */

.tag-filter-panel {
  min-width: 260px;
  max-width: 300px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
  z-index: 60 !important;
}

.tag-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-2);
}

.tag-filter-head > span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag-filter-head .btn {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 8px;
  font-size: 11.5px;
  white-space: nowrap;
}

.tag-filter-head .\!btn {
  flex: 0 0 auto !important;
  height: 26px !important;
  padding: 0 8px !important;
  font-size: 11.5px !important;
  white-space: nowrap !important;
}

.tag-filter-scroll {
  overflow: auto;
  max-height: 300px;
  padding: 6px 0 8px;
}

.tag-filter-group {
  padding: 4px 0 8px;
}

.tag-filter-group-label {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.tag-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.tag-filter-option:hover {
  background: var(--surface-hover);
}

.tag-filter-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border-default);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: transparent;
  background: var(--surface);
}

.tag-filter-check i, .tag-filter-check svg {
  width: 11px;
  height: 11px;
}

.tag-filter-option.is-selected .tag-filter-check {
  background: var(--purple-500);
  border-color: var(--purple-500);
  color: #fff;
}

.tag-filter-empty {
  padding: 16px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--fg-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.tag-filter-empty p {
  margin: 0;
}

/* Bulk bar actions */

.testimonial-bulk-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.testimonial-bulk-actions-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.btn-icon-only {
  padding: 0 9px !important;
  min-width: 32px;
}

.testimonial-bulk-tags-wrap {
  position: relative;
  flex-shrink: 0;
}

/* Centered tags modal (fixed to viewport — never clipped by action bar) */

.bulk-tags-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 15, 20, 0.45);
}

.bulk-tags-modal {
  width: min(480px, 100%);
  max-height: min(80vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.bulk-tags-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
  flex-shrink: 0;
}

.bulk-tags-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.25;
}

.bulk-tags-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--fg-3);
  font-weight: 500;
}

.bulk-tags-mode {
  display: flex;
  gap: 8px;
  padding: 14px 18px 0;
  flex-shrink: 0;
}

.bulk-tags-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.bulk-tags-categories {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bulk-tags-category {
  margin: 0;
}

.bulk-tags-category-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.bulk-tags-category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bulk-tags-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  transition: border-color 120ms, background 120ms, box-shadow 120ms;
}

.bulk-tags-option:hover {
  border-color: var(--purple-300, #B9A6F5);
  background: color-mix(in oklab, var(--purple-500) 5%, var(--surface));
}

.bulk-tags-option:has(input:checked) {
  border-color: var(--purple-500);
  background: color-mix(in oklab, var(--purple-500) 10%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--purple-500) 30%, transparent);
}

.bulk-tags-option input {
  accent-color: var(--purple-600);
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
}

.bulk-tags-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background: var(--surface-2, var(--surface));
}

.bulk-tags-empty {
  padding: 28px 18px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Quick-view section chrome (spacing finalized in the testimonial-pane block below) */

.testimonial-pane-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.testimonial-pane-section-label i,
  .testimonial-pane-section-label svg {
  width: 13px;
  height: 13px;
}

.tag-picker-create-row .pc-input {
  height: 34px;
  font-size: 13px;
  flex: 1;
  min-width: 100px;
}

/* Manage → Tags (full-width; same toolbar as Forms/Requests) */

.tags-page {
  width: 100%;
  max-width: none;
  margin: 0;
}

.tags-app {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  width: 100%;
}

.tags-toolbar {
  margin-bottom: 16px;
  width: 100%;
}

.tags-usage-meter {
  margin: 0;
}

.tags-result-hint {
  margin: -8px 0 14px;
}

.tags-surface {
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  min-height: 320px;
}

.tags-table {
  width: 100%;
}

.tags-table-head {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(160px, 1.2fr) 100px 96px;
  gap: 16px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-soft, var(--surface-2, var(--neutral-50)));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.tags-table-body {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tags-table-row {
  border-bottom: 1px solid var(--border-subtle);
}

.tags-table-row:last-child {
  border-bottom: 0;
}

.tags-table-view {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(160px, 1.2fr) 100px 96px;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  min-height: 56px;
  transition: background 120ms;
}

.tags-table-row:hover .tags-table-view {
  background: color-mix(in srgb, var(--purple-50) 40%, transparent);
}

.tags-col {
  min-width: 0;
}

.tags-col--tag .tag-chip {
  max-width: 100%;
}

.tags-col--tag .tag-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.tags-col--usage {
  text-align: center;
}

.tags-col--actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  white-space: nowrap;
}

.tags-cat-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tags-usage-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tags-delete-form {
  margin: 0;
  display: inline-flex;
}

.tags-manage-delete {
  color: var(--error-600, #b91c1c) !important;
}

.tags-table-edit {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(160px, 1.2fr) 100px minmax(160px, auto);
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
  margin: 0;
  background: color-mix(in srgb, var(--purple-50) 50%, var(--surface));
}

.tags-table-edit .pc-input {
  height: 36px;
  font-size: 13px;
}

.tags-col--edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .tags-table-head {
    display: none;
  }

  .tags-table-view,
    .tags-table-edit {
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    padding: 14px 16px;
  }

  .tags-col--tag {
    grid-column: 1;
  }

  .tags-col--cat {
    grid-column: 1;
  }

  .tags-col--usage {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    text-align: right;
  }

  .tags-col--actions,
    .tags-col--edit-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Modern color swatch picker (Brand tab + workspace settings) */

.pc-color-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pc-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pc-color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--fg-1) 10%, transparent);
  background: var(--swatch, #ccc);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 6%, transparent);
  transition: transform .12s ease, box-shadow .12s ease;
}

.pc-color-swatch:hover {
  transform: scale(1.06);
}

.pc-color-swatch.is-selected {
  box-shadow:
      0 0 0 2px var(--surface),
      0 0 0 4px var(--swatch, var(--purple-500));
}

.pc-color-swatch i,
  .pc-color-swatch svg {
  width: 13px;
  height: 13px;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

.pc-color-custom {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pc-color-custom-chip {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--border-default);
  background:
      linear-gradient(135deg, var(--swatch, #7C5CFF) 0 50%, transparent 50%),
      conic-gradient(from 90deg, #f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7, #f43f5e);
  cursor: pointer;
  flex-shrink: 0;
}

.pc-color-custom-chip input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 0;
  padding: 0;
}

.pc-color-hex {
  font-size: 12px;
  color: var(--fg-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  min-width: 4.5rem;
}

/* New tag modal */

.tags-new-modal .modal-subtitle {
  max-width: 44ch;
  margin-top: 4px;
}

.tags-new-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(200px, 0.85fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 640px) {
  .tags-new-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.tags-new-main .pc-label {
  margin-bottom: 8px;
}

.tags-new-textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.45;
  font-size: 14px;
}

.tags-new-help {
  margin: 8px 0 0;
}

.tags-new-preview {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

.tags-new-preview-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.tags-new-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tags-new-preview-more {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  align-self: center;
}

.tags-new-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-soft, var(--surface-2));
}

.tags-new-aside .pc-field {
  margin: 0;
}

.tags-new-actions {
  margin-top: 18px;
}

.tags-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 36px;
}

.tags-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  transition: border-color 120ms, transform 120ms;
}

.tags-color-swatch--auto {
  width: auto;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-2);
}

.tags-color-swatch:hover {
  transform: translateY(-1px);
}

.tags-color-swatch.is-selected {
  border-color: var(--purple-600);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple-400) 35%, transparent);
}

.tags-color-swatch-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: currentColor;
}

.tags-color-swatch.tag-chip-violet {
  color: var(--purple-600);
  background: var(--purple-50);
}

.tags-color-swatch.tag-chip-amber {
  color: #d97706;
  background: #fffbeb;
}

.tags-color-swatch.tag-chip-emerald {
  color: #059669;
  background: #ecfdf5;
}

.tags-color-swatch.tag-chip-sky {
  color: #0284c7;
  background: #f0f9ff;
}

.tags-color-swatch.tag-chip-rose {
  color: #e11d48;
  background: #fff1f2;
}

.tags-color-swatch.tag-chip-slate {
  color: #475569;
  background: #f1f5f9;
}

/* Legacy hooks */

@media (max-width: 900px) {
  .testimonial-bulk-label {
    display: none;
  }

  .tags-manage-row {
    flex-wrap: wrap;
  }

  .tags-manage-edit {
    flex-wrap: wrap;
  }
}

/* Testimonials table */

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  box-sizing: border-box;
  padding: 0 11px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--fg-2);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  white-space: nowrap;
  flex-shrink: 0;
}

.filter-chip:hover {
  border-color: var(--border-default);
  color: var(--fg-1);
}

.filter-chip svg,
  .filter-chip i {
  width: 13px;
  height: 13px;
  color: var(--fg-3);
  flex-shrink: 0;
}

/* Icon-only variant — testimonial list's five dropdown chips (Source/Rating/Type/Form/
     Sort) were wrapping onto a second line once their text labels grew long
     ("Sort: Top rated" etc.). The label stays for screen readers (.sr-only)
     and as a hover title; sighted users get the icon plus a small caret. */

.filter-chip-icon-only {
  padding: 0 9px;
  gap: 4px;
}

.filter-chip-caret {
  font-size: 9px;
  color: var(--fg-3);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.filter-chip.active {
  background: var(--purple-100);
  border-color: transparent;
  color: var(--purple-700);
  font-weight: 600;
}

.filter-chip.\!active {
  background: var(--purple-100) !important;
  border-color: transparent !important;
  color: var(--purple-700) !important;
  font-weight: 600 !important;
}

.filter-chip.active svg,
  .filter-chip.active i {
  color: var(--purple-700);
}

.filter-chip.\!active svg,
  .filter-chip.\!active i {
  color: var(--purple-700) !important;
}

/* Popover panel for a .filter-chip dropdown - promoted here from an
     testimonial-only inline \3c style> so any page's filter chips (Requests' Form
     filter included) can open the same-looking menu. */

.testimonial-filter-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 150px;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
}

.testimonial-filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  text-decoration: none;
  border: none;
  background: transparent;
  font: inherit;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--fg-1);
}

.testimonial-filter-option-count {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}

.testimonial-filter-option.is-selected .testimonial-filter-option-count {
  color: inherit;
  opacity: .85;
}

.testimonial-filter-option:hover {
  background: var(--bg-soft);
}

.testimonial-filter-option:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: -2px;
}

.testimonial-filter-option.is-selected {
  background: var(--purple-50);
  color: var(--purple-600);
  font-weight: 600;
}

/* "Filter" popover — accordion of the less-frequently-used filters
     (Source/Rating/Type/Channel/Forms/Sort) collapsed behind one chip. */

.more-filters-panel {
  min-width: 200px;
  max-height: 70vh;
  overflow-y: auto;
}

.more-filters-section + .more-filters-section {
  border-top: 1px solid var(--border-subtle);
  margin-top: 2px;
  padding-top: 2px;
}

.more-filters-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
}

.more-filters-section-head:hover {
  background: var(--bg-soft);
}

.more-filters-section-head svg,
  .more-filters-section-head i:first-child {
  width: 13px;
  height: 13px;
  color: var(--fg-3);
  flex-shrink: 0;
}

.more-filters-chevron {
  width: 13px;
  height: 13px;
  color: var(--fg-3);
  margin-left: auto;
  transition: transform 120ms;
  flex-shrink: 0;
}

.more-filters-chevron.is-open {
  transform: rotate(180deg);
}

/* Empty state */

.empty-state {
  text-align: center;
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.empty-state.es-bordered {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.empty-state .icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--purple-50);
  color: var(--purple-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.empty-state .icon-wrap svg {
  width: 22px;
  height: 22px;
}

.empty-state h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-align: center;
  max-width: 36ch;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
  color: var(--fg-2);
  max-width: 36ch;
  text-align: center;
  line-height: 1.5;
}

.empty-state .es-kicker {
  font-size: 11px;
  font-weight: 600;
  color: var(--purple-700);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.empty-state .es-cta {
  margin-top: 4px;
}

.empty-state .es-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
}

/* Compact empty state when nested inside a panel/card */

.empty-state.es-compact {
  padding: 32px 16px;
}

.empty-state.es-compact .icon-wrap {
  width: 40px;
  height: 40px;
}

.empty-state.es-compact .icon-wrap svg {
  width: 18px;
  height: 18px;
}

.empty-state.es-compact h3 {
  font-size: 15px;
}

.empty-state.es-compact p {
  font-size: 13.5px;
}

/* Shared wrapper for list/settings empties — same centering everywhere */

.inbox-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 280px;
  padding: 28px 16px 40px;
  box-sizing: border-box;
}

.inbox-empty .empty-state {
  margin: 0 auto;
}

/* Bordered empty cards (match Tags / Requests / Forms) */

.inbox-empty .empty-state.es-bordered,
  .forms-empty-wrap .empty-state.es-bordered {
  max-width: 520px;
  width: 100%;
  padding: 48px 28px;
}

/* Detail pane empty uses same component, fill height */

.testimonial-detail-pane > .empty-state,
  .ratings-detail-pane > .empty-state,
  .feedback-detail-pane > .empty-state {
  height: 100%;
  justify-content: center;
  max-width: none;
}

/* Coming-soon placeholder (unfinished Settings tabs etc.) */

.pc-coming-soon .icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--bg-soft);
  color: var(--fg-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pc-coming-soon .icon-wrap svg {
  width: 22px;
  height: 22px;
}

/* ── Forms section (list + requests) ── */

/* Aliases: older class names map onto the unified page-toolbar system */

.forms-empty-wrap {
  margin-top: 4px;
  padding: 12px 0 8px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Step list: left-aligned lines, but the whole block is centered under the title */

.es-steps {
  text-align: left;
  margin: 4px auto 0;
  padding: 0;
  list-style: none;
  counter-reset: es-step;
  max-width: 36ch;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 13.5px;
  color: var(--fg-2);
  line-height: 1.55;
}

.es-steps li {
  position: relative;
  padding: 0 0 0 1.6em;
  margin: 0 0 8px;
  text-align: left;
}

.es-steps li:last-child {
  margin-bottom: 0;
}

.es-steps li::before {
  counter-increment: es-step;
  content: counter(es-step) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.empty-state .es-steps {
  margin-top: 2px;
}

.empty-state.es-compact .es-steps {
  font-size: 13px;
  line-height: 1.45;
  max-width: 32ch;
}

.empty-state.es-compact .es-steps li {
  margin-bottom: 6px;
}

.empty-state.es-compact .es-cta-row {
  margin-top: 4px;
}

/* Equal-height form cards in the grid */

.form-card-wrap {
  height: 100%;
  position: relative;
  display: flex;
  min-width: 0;
  /* Default stacking; elevated when kebab menu is open so the flyout
       paints above neighbouring cards (grid siblings otherwise cover it). */
  z-index: 0;
}

.form-card-wrap.is-menu-open {
  z-index: 40;
}

.form-card-wrap .form-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  overflow: visible;
}

.form-card-wrap.is-menu-open .form-card {
  /* Keep open menu readable; don't let hover lift fight stacking. */
  transform: none;
  box-shadow: var(--shadow-md);
}

.form-card-wrap .form-card-body {
  flex: 1 1 auto;
  min-height: 0;
}

.form-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Anchor for kebab + flyout so click.outside covers both. */

.form-card-menu-anchor {
  position: relative;
  flex-shrink: 0;
}

/* Fixed footer structure — one line metrics, no wrap growth */

.form-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  min-height: 36px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.form-card-footer-metrics {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

/* Forms grid only: two fixed rows (badges, metrics) instead of the
     shared single-row layout above, so every form card is exactly the
     same height regardless of how much badge/metric content it has.
     Widget and Wall of Love cards reuse the base .form-card-footer /
     .form-card-footer-metrics rules above unmodified. */

.form-card-footer--fixed {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  height: 64px;
  box-sizing: border-box;
}

.form-card-footer--fixed .form-card-footer-metrics {
  flex: none;
  text-align: left;
}

.form-card-footer-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}

/* Status badge ("Live"/"Draft") never shrinks -- it's always short. */

.form-card-footer-badges .badge:first-child {
  flex-shrink: 0;
}

/* Survey type + form layout: compact text badges so purpose is scannable. */

.form-card-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 110px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--purple-50);
  color: var(--purple-700);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.form-card-type-badge i {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.form-card-type-badge--muted {
  background: var(--neutral-100);
  color: var(--neutral-700);
}

.form-card-footer-badges {
  flex-wrap: wrap;
  row-gap: 4px;
}

.form-card-footer-metrics a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.form-card-footer-metrics a:hover {
  color: var(--purple-600);
}

.form-card-metric-sep {
  margin: 0 5px;
  color: var(--border-2);
}

/* ── Request activity / invite flow ── */

/* Quiet persistent stat (like .invite-usage-meter, which it now sits next
     to in .page-filters-right), not an alert/toast — it has no dismiss
     because it isn't a one-off event notification, just a standing fact
     about the list ("N have come back completed"). */

.invite-completed-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fg-3);
  flex-shrink: 0;
}

.invite-completed-summary i {
  width: 14px;
  height: 14px;
  color: var(--success-600, var(--success-700));
  flex-shrink: 0;
}

.invite-completed-summary a {
  color: var(--fg-2);
  font-weight: 600;
  text-decoration: none;
}

.invite-completed-summary a:hover {
  text-decoration: underline;
}

/* Compact usage readout — sits inline with the toolbar's New request
     button (.page-filters-right). Deliberately NOT styled like a button or
     .filter-chip (no border/background box) — it's a stat, not an action,
     so it reads as a small meter: icon, count, a thin fill bar, label. */

.invite-usage-meter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 4px;
  font-size: 12.5px;
  color: var(--fg-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.invite-usage-meter i {
  width: 14px;
  height: 14px;
  color: var(--fg-3);
  flex-shrink: 0;
}

.invite-usage-meter-count {
  color: var(--fg-2);
  font-weight: 500;
}

.invite-usage-meter-count strong {
  color: var(--fg-1);
  font-weight: 700;
}

.invite-usage-meter-bar {
  display: inline-block;
  width: 46px;
  height: 5px;
  border-radius: 99px;
  background: var(--border-subtle);
  overflow: hidden;
}

.invite-usage-meter-bar > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--purple-500);
  transition: width 0.3s ease;
}

.invite-usage-meter-label {
  color: var(--fg-3);
}

.invite-usage-meter.is-warn .invite-usage-meter-count strong,
  .invite-usage-meter.is-warn i {
  color: var(--warning-700);
}

.invite-usage-meter.is-warn .invite-usage-meter-bar > span {
  background: var(--accent-500, #F5A623);
}

.invite-usage-meter.is-over .invite-usage-meter-count strong,
  .invite-usage-meter.is-over i {
  color: var(--error-600);
}

.invite-usage-meter.is-over .invite-usage-meter-bar > span {
  background: var(--error-500);
}

.invite-usage-meter-upgrade {
  font-weight: 700;
  color: var(--purple-600);
  text-decoration: none;
}

.invite-usage-meter-upgrade:hover {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .invite-usage-meter-label {
    display: none;
  }
}

@media (max-width: 720px) {
  .invite-usage-meter-count,
    .invite-usage-meter-bar {
    display: none;
  }
}

.invite-toolbar {
  /* Same job as .page-filters — keep class for invite-specific markup */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.invite-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Requests page owns its own scroll (same pattern as .testimonial-layout /
     .wall-layout, see the .app-main-body > selector list above): the
     toolbar, usage meter, and completed summary stay fixed in
     .invite-activity-fixed; only the row list scrolls, in
     .invite-activity-scroll. Pagination sits below the scroll area, also
     fixed, so page controls are never lost off the bottom either. */

.invite-activity {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.invite-activity-fixed {
  flex: none;
}

/* A plain list, not a boxed card — no border/radius/background here, the
     table just uses the full page width like every other list in the app.
     overflow-x:hidden (paired with overflow-y:auto) is only there because a
     position:sticky element needs an unbroken path to the ancestor that's
     actually scrolling — an overflow:hidden ancestor in between would bind
     the sticky calculation to the wrong (non-scrolling) box instead. See
     .invite-table-head below. */

.invite-activity-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.invite-table-head {
  display: grid;
  grid-template-columns: 2.2fr 1.4fr 1fr 1.1fr 1.2fr;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .03em;
  /* Column labels stay visible while rows scroll underneath (background is
       opaque so nothing shows through), relative to .invite-activity-scroll,
       the nearest scrolling ancestor. */
  position: sticky;
  top: 0;
  z-index: 2;
}

.invite-table-head-action {
  text-align: right;
}

.invite-campaign-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 8px 16px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  min-height: 40px;
}

.invite-campaign-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--fg-1);
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}

.invite-campaign-title strong {
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-campaign-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-3);
}

.invite-campaign-meta .dot-sep {
  margin: 0 5px;
  opacity: .6;
}

.invite-row {
  display: grid;
  grid-template-columns: 2.2fr 1.4fr 1fr 1.1fr 1.2fr;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-top: 1px solid var(--border-subtle);
}

.invite-row--batch {
  background: color-mix(in oklab, var(--bg-soft) 40%, var(--surface));
}

.invite-row-recipient {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.invite-row-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invite-row-email {
  font-size: 12px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invite-row-form, .invite-row-when {
  font-size: 13px;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invite-row-meta {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 3px;
}

.invite-row-actions {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.invite-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex: none;
}

.invite-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--purple-50);
  color: var(--purple-700);
  border-radius: 999px;
  padding: 4px 6px 4px 10px;
  font-size: 12.5px;
  font-weight: 600;
  max-width: 100%;
}

/* min-width:0 lets this shrink/truncate inside the flex row instead of the
     buttons below shrinking with it — without it, a long name/email/company
     squeezes every flex child roughly equally, including the remove button,
     down to a sliver that's still technically clickable but easy to miss. */

.invite-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.invite-chip button {
  border: 0;
  background: transparent;
  color: var(--purple-600);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  flex-shrink: 0;
}

.invite-chip--custom {
  background: var(--accent-50, #fef3e2);
  color: var(--accent-700, #b56a0a);
}

.invite-chip--custom button {
  color: var(--accent-600, #d68a1f);
}

/* Pinned header block above the scrolling step content — title/close row
     plus the mode switch + stepper. Never scrolls (see .modal-content:has(.invite-wizard)). */

.invite-wizard-head {
  flex: none;
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.invite-wizard-head .modal-header {
  margin-bottom: 14px;
}

.invite-wizard-modeswitch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* The <form> itself becomes the flex column between the pinned head and
     the browser viewport edge, so its own last child (.invite-wizard-footer)
     can be pinned while everything above it (.invite-wizard-scroll) scrolls. */

.invite-wizard-form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.invite-wizard-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 28px;
}

.invite-wizard-footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--border-subtle);
  padding: 14px 28px;
}

.invite-step-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.invite-optional {
  font-weight: 500;
  color: var(--fg-3);
}

.invite-add-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.invite-add-row .pc-input {
  flex: 1 1 120px;
  min-width: 100px;
  height: 40px;
}

.invite-add-row .invite-add-email {
  flex: 1.4 1 160px;
}

.invite-add-row .btn {
  height: 40px;
  padding: 0 16px;
  flex-shrink: 0;
}

.invite-add-row .\!btn {
  height: 40px !important;
  padding: 0 16px !important;
  flex-shrink: 0 !important;
}

.invite-add-row--pairs .pc-input {
  flex: 1 1 100px;
}

.invite-paste-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.invite-paste-block .btn {
  align-self: flex-start;
}

.invite-paste-block .\!btn {
  align-self: flex-start !important;
}

.invite-input-modes {
  margin-top: 2px;
  display: inline-flex !important;
  width: auto !important;
  max-width: 100%;
  flex: 0 0 auto;
  align-self: flex-start;
}

/* Keep segmented controls hug-content inside the invite wizard (not full modal width) */

.invite-wizard .segmented {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  align-self: flex-start;
}

.invite-mode-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.invite-mode-panel--row {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.invite-file-name {
  font-size: 12.5px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.invite-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.invite-recipient-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 240px;
  overflow: auto;
  padding: 2px 0;
}

.invite-recipient-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.invite-chip-custom-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .75;
}

.invite-chip-action {
  opacity: .7;
  display: inline-flex;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: inherit;
}

.invite-chip-action svg {
  width: 12px;
  height: 12px;
}

.invite-override-panel {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.invite-override-hint {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.45;
}

.invite-override-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.invite-count-line {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  font-size: 12.5px;
  color: var(--fg-3);
  width: auto;
  max-width: 100%;
  align-self: flex-start;
}

.invite-count-line .link-btn {
  margin-left: 0;
}

.invite-send-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.invite-send-block-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
}

.invite-reminders-block {
  border-top: 1px solid var(--border-subtle);
  padding-top: 20px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.link-btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--purple-600);
  font-family: inherit;
  text-decoration: underline;
}

.link-btn:hover {
  color: var(--purple-700);
}

/* Status column: badge + meta + engagement icons on one compact block */

.invite-row-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.invite-row-status-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.invite-row-engagement {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-3);
}

.invite-row-engagement .is-on {
  color: var(--purple-600);
  opacity: 1;
}

.invite-row-engagement .is-off {
  opacity: .32;
}

.invite-row-engagement svg {
  width: 13px;
  height: 13px;
}

.invite-row-meta {
  font-size: 11.5px;
  color: var(--fg-3);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Import history table — same chrome language as .invite-table */

.import-table {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow-x: auto;
}

.import-table-head,
  .import-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 0.85fr) minmax(0, 0.9fr) minmax(0, 1.15fr);
  gap: 10px 12px;
  align-items: center;
  padding: 12px 16px;
}

.import-table-head > *,
  .import-table-row > * {
  min-width: 0;
}

.import-table-head {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.import-table-head-action {
  text-align: right;
}

.import-table-row {
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13.5px;
  color: var(--fg-1);
}

.import-table-row:last-child {
  border-bottom: none;
}

.import-table-source {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.import-recent-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: var(--bg-soft);
  color: var(--fg-2);
  display: grid;
  place-items: center;
}

.import-recent-icon svg {
  width: 14px;
  height: 14px;
}

.import-table-source-text {
  min-width: 0;
  flex: 1;
}

.import-table-name {
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.import-table-meta {
  display: block;
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.import-table-count,
  .import-table-when,
  .import-table-by {
  font-size: 13px;
  color: var(--fg-2);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.import-table-action {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 960px) {
  .import-table-head {
    display: none;
  }

  .import-table-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
  }

  .import-table-action {
    justify-content: flex-start;
  }
}

.invite-stepper {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.invite-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  color: var(--fg-3);
  font-size: 11.5px;
  font-weight: 600;
}

.invite-step.is-active {
  color: var(--fg-1);
}

.invite-step.is-done {
  color: var(--purple-600);
}

.invite-step-num {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 10px;
  background: var(--border-default);
  color: var(--fg-3);
}

.invite-step.is-active .invite-step-num,
  .invite-step.is-done .invite-step-num {
  background: var(--purple-500);
  color: #fff;
}

.invite-message-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
  gap: 24px;
  align-items: start;
}

.invite-message-fields {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Stick the live email preview while the config column scrolls inside
     .invite-wizard-scroll — only the left fields should move. */

.invite-message-preview {
  position: sticky;
  top: 0;
  align-self: start;
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(90vh - 220px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.invite-message-preview-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-3);
}

.invite-message-preview-hint {
  font-size: 11px;
  color: var(--fg-3);
  line-height: 1.4;
}

.invite-link-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 8px 11px;
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.45;
}

.invite-email-preview {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-xs);
}

.invite-email-preview-from {
  font-size: 11px;
  color: var(--fg-3);
}

.invite-email-preview-subject {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
  word-break: break-word;
}

.invite-email-preview-body {
  font-size: 12.5px;
  color: var(--fg-2);
  white-space: pre-wrap;
  line-height: 1.5;
  word-break: break-word;
}

.invite-email-preview-cta {
  margin-top: 4px;
  text-align: center;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--purple-500);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 820px) {
  .invite-message-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .invite-message-preview {
    position: static;
    max-height: none;
    overflow: visible;
    order: -1;
    /* preview first on narrow screens */
  }
}

.invite-review-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}

.invite-review-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  font-size: 12.5px;
  color: var(--fg-3);
}

.invite-review-row:nth-child(even) {
  background: var(--surface-sunken);
}

.invite-review-row + .invite-review-row {
  border-top: 1px solid var(--border-subtle);
}

.invite-review-row strong {
  color: var(--fg-1);
  font-weight: 600;
}

.share-channel-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.share-channel-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.share-channel-card--featured {
  border-color: var(--purple-200);
  background: color-mix(in oklab, var(--purple-50) 70%, var(--surface));
}

.share-channel-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  color: var(--fg-2);
}

.share-channel-icon--accent {
  background: var(--purple-100);
  color: var(--purple-700);
}

.share-channel-body {
  flex: 1;
  min-width: 0;
}

.share-channel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
}

.share-channel-desc {
  font-size: 12.5px;
  color: var(--fg-2);
  margin-top: 2px;
  line-height: 1.45;
}

.share-channel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.share-channel-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0 6px 0 12px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--surface);
  height: 44px;
}

.share-channel-url {
  flex: 1;
  font-size: 13px;
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-btn {
  border: 0;
  background: none;
  color: var(--purple-600);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* ── Share Studio (testimonial social share) ── */

.share-studio-header {
  margin-bottom: 0 !important;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.share-studio-header__text {
  min-width: 0;
  padding-right: 8px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.share-studio-header__copy {
  min-width: 0;
}

.share-studio-header .modal-title {
  margin: 0 0 2px;
}

.share-studio-header .modal-subtitle {
  margin: 0;
  line-height: 1.35;
}

/* Full-width tabs; never wrap labels onto two lines */

.share-studio-tabs {
  display: flex !important;
  width: 100%;
  margin-bottom: 0;
  box-sizing: border-box;
}

.share-studio-tab {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  padding: 8px 10px !important;
  font-size: 13px !important;
}

.share-studio-tab span {
  white-space: nowrap;
}

.share-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 8px;
  line-height: 1.2;
}

.share-hint {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--fg-3);
  line-height: 1.45;
}

.share-control-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.share-image-design {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.share-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.share-caption-tones {
  margin-bottom: 8px;
}

/* Equal-width segmented rows (layout / bg type) — never mix with color swatches */

.share-seg-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 0;
}

.share-seg-row--4 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

.share-seg-btn {
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.15;
  border: 1.5px solid var(--border-default);
  background: var(--surface-2);
  color: var(--fg-2);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.share-seg-btn.active {
  border-color: var(--purple-500);
  color: var(--purple-700);
  background: color-mix(in srgb, var(--purple-500) 12%, white);
}

.share-seg-btn.\!active {
  border-color: var(--purple-500) !important;
  color: var(--purple-700) !important;
  background: color-mix(in srgb, var(--purple-500) 12%, white) !important;
}

.share-look-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.share-look-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 1.5px solid var(--border-default);
  background: var(--surface-2);
  font-family: inherit;
  min-width: 0;
}

.share-look-card.active {
  border-color: var(--purple-400);
  background: color-mix(in srgb, var(--purple-500) 8%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple-500) 12%, transparent);
}

.share-look-card.\!active {
  border-color: var(--purple-400) !important;
  background: color-mix(in srgb, var(--purple-500) 8%, white) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple-500) 12%, transparent) !important;
}

.share-look-card__title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.2;
}

.share-look-card__desc {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-3);
  line-height: 1.3;
}

/* Platform grid — equal tiles, no orphan text pills */

.share-platform-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 520px) {
  .share-platform-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.share-platform-pick {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 4px 8px;
  border-radius: 12px;
  cursor: pointer;
  background: var(--surface-2);
  border: 1.5px solid var(--border-default);
  font-family: inherit;
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}

.share-platform-pick.is-active {
  background: var(--surface);
  border-color: var(--purple-400);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple-500) 12%, transparent);
}

.share-platform-pick:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 2px;
}

.share-platform-pick__icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}

.share-platform-pick__icon svg,
  .share-platform-pick__icon i {
  width: 15px;
  height: 15px;
  display: block;
  color: #fff;
}

.share-platform-pick__label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fg-3);
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.share-platform-pick.is-active .share-platform-pick__label {
  color: var(--fg-1);
}

.share-guidance {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--purple-50);
  border: 1px solid var(--purple-200);
  border-radius: var(--r-md);
  padding: 11px 13px;
  margin: 0;
}

.share-guidance__icon {
  color: var(--purple-600);
  flex-shrink: 0;
  margin-top: 1px;
}

.share-guidance__icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

.share-guidance p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--purple-800);
}

.share-excerpt-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 100px;
  overflow-y: auto;
}

.share-excerpt-btn {
  text-align: left;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border-default);
  background: var(--surface-2);
  color: var(--fg-1);
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.share-excerpt-btn.is-active {
  border-color: var(--purple-500);
  background: color-mix(in srgb, var(--purple-500) 10%, white);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--purple-500) 30%, transparent);
}

.share-card-preview {
  position: relative;
  background: transparent;
  border-radius: var(--r-lg);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  min-height: 120px;
  max-width: 100%;
  max-height: 100%;
}

.share-card-preview__img {
  /* Auto-scale so tall story/portrait cards never clip the preview pane */
  max-width: min(320px, 100%);
  max-height: min(420px, calc(92vh - 220px));
  width: auto;
  height: auto;
  border-radius: 18px;
  display: block;
  box-shadow: var(--shadow-lg);
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0;
  transition: opacity 160ms ease;
}

.share-card-preview__img.is-ready {
  opacity: 1;
}

.share-card-preview.is-loading .share-card-preview__img {
  opacity: 0.15;
}

.share-card-preview__skeleton {
  position: absolute;
  inset: 12% 18%;
  border-radius: 18px;
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--purple-200) 50%, var(--surface-2)) 0%,
      color-mix(in srgb, var(--purple-100) 70%, var(--surface)) 50%,
      color-mix(in srgb, var(--purple-200) 50%, var(--surface-2)) 100%);
  background-size: 200% 100%;
  animation: sharePreviewShimmer 1.1s ease-in-out infinite;
}

.share-card-preview__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 20px;
  text-align: center;
  max-width: 280px;
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.45;
}

.share-card-preview__error svg {
  width: 28px;
  height: 28px;
  color: var(--fg-3);
}

@keyframes sharePreviewShimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.share-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 14px;
  margin-bottom: 10px;
  border: 1.5px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-2);
  height: 48px;
}

.share-link-row__url {
  flex: 1;
  font-size: 13px;
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-caption-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.share-caption-meta__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.share-caption-meta__count.is-near {
  color: var(--warning);
}

.share-caption-meta__count.is-over {
  color: var(--danger, #dc2626);
}

.share-caption-field {
  width: 100%;
  font-size: 14px;
  color: var(--fg-1);
  background: var(--surface-2);
  border: 1.5px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 12px 14px;
  outline: none;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
  margin-bottom: 8px;
  min-height: 80px;
}

.share-caption-field.is-over {
  border-color: var(--danger, #dc2626);
}

.share-studio-grid {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 640px) {
  .share-studio-grid {
    flex-direction: column;
    overflow-y: auto;
  }

  .share-studio-controls {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  /* On small screens, show the preview first */

  .share-studio-preview-col {
    order: -1;
  }

  .share-preview-area {
    min-height: 240px;
  }
}

.share-studio-controls {
  width: min(430px, 42vw);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 18px 20px 22px;
  overflow-y: auto;
  border-right: 1px solid var(--border-subtle);
  scrollbar-gutter: stable;
}

@media (max-width: 900px) {
  .share-studio-controls {
    width: 380px;
  }
}

.share-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.share-chip {
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border: 1.5px solid var(--border-default);
  background: var(--surface-2);
  color: var(--fg-2);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.share-chip.active {
  border-color: var(--purple-500);
  color: var(--purple-700);
  background: color-mix(in srgb, var(--purple-500) 12%, white);
}

.share-chip.\!active {
  border-color: var(--purple-500) !important;
  color: var(--purple-700) !important;
  background: color-mix(in srgb, var(--purple-500) 12%, white) !important;
}

.share-accent-swatch.\!active {
  box-shadow: 0 0 0 2px var(--purple-500) !important;
}

.share-accent-swatch.active {
  box-shadow: 0 0 0 2px var(--purple-500);
}

/* Aspect ratio picker — visual ratio chips (Share Flow) */

.share-aspect-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.share-aspect-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 11px 4px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  border: 1.5px solid var(--border-default);
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 700;
  transition: border-color 120ms, background 120ms, color 120ms;
}

.share-aspect-btn.active {
  border-color: var(--purple-400);
  background: var(--purple-50);
  color: var(--purple-700);
}

.share-aspect-btn.\!active {
  border-color: var(--purple-400) !important;
  background: var(--purple-50) !important;
  color: var(--purple-700) !important;
}

.share-aspect-btn:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 2px;
}

.share-aspect-btn__chip {
  border-radius: 3px;
  background: var(--border-default);
  display: block;
}

.share-aspect-btn.active .share-aspect-btn__chip {
  background: var(--purple-400);
}

.share-aspect-btn.\!active .share-aspect-btn__chip {
  background: var(--purple-400) !important;
}

.share-aspect-btn__chip--square {
  width: 20px;
  height: 20px;
}

.share-aspect-btn__chip--portrait {
  width: 17px;
  height: 21px;
}

.share-aspect-btn__chip--story {
  width: 13px;
  height: 23px;
}

/* Include toggles as button cards with checkbox boxes (Share Flow) */

.share-include-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.share-include-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  border: 1.5px solid var(--border-default);
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition: all 120ms;
  min-height: 48px;
}

.share-include-btn.active {
  border-color: var(--purple-300);
  background: var(--purple-50);
  color: var(--purple-800);
}

.share-include-btn.\!active {
  border-color: var(--purple-300) !important;
  background: var(--purple-50) !important;
  color: var(--purple-800) !important;
}

.share-include-btn.is-locked {
  opacity: .72;
  cursor: not-allowed;
}

.share-include-btn:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 2px;
}

.share-include-btn__box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1.5px solid var(--border-default);
}

.share-include-btn.active .share-include-btn__box {
  background: var(--purple-500);
  border-color: var(--purple-500);
}

.share-include-btn.\!active .share-include-btn__box {
  background: var(--purple-500) !important;
  border-color: var(--purple-500) !important;
}

.share-include-btn:not(.active) .share-include-btn__box i,
  .share-include-btn:not(.active) .share-include-btn__box svg {
  opacity: 0;
}

.share-include-btn__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

.share-include-btn__title {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

.share-include-btn__sub {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--fg-3);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-include-btn.active .share-include-btn__sub {
  color: var(--purple-600);
}

.share-include-btn.\!active .share-include-btn__sub {
  color: var(--purple-600) !important;
}

.share-custom-color-row__left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.share-copy-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--purple-500);
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.share-copy-link-btn:hover {
  filter: brightness(1.05);
}

.share-copy-link-btn.is-copied {
  background: var(--success);
}

.share-rewrite-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--purple-600) !important;
  border-color: var(--purple-200) !important;
  background: var(--purple-50) !important;
}

.share-rewrite-chip:hover {
  background: var(--purple-100) !important;
}

.share-caption-field {
  margin-bottom: 8px;
  transition: border-color 160ms, box-shadow 160ms, background 160ms;
}

.share-caption-field.is-flash {
  border-color: var(--purple-400);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple-500) 16%, transparent);
  background: color-mix(in srgb, var(--purple-50) 70%, var(--surface-2));
}

.share-overflow-warn {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger, #dc2626);
  line-height: 1.4;
}

.share-utm-note {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 10px;
}

.share-utm-note svg {
  flex-shrink: 0;
}

.share-primary-btn:disabled,
  .share-action-bar .btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: none;
}


  .share-action-bar .\!btn:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  filter: none !important;
}

/* Custom photo dropzone (Share Flow Photo tab) */

.share-photo-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  margin-bottom: 4px;
  text-align: center;
  border: 2px dashed var(--border-default);
  background: var(--surface-2);
  transition: border-color 120ms, background 120ms;
}

.share-photo-drop.is-active {
  border-color: var(--purple-300);
  background: var(--purple-50);
  border-style: solid;
}

.share-photo-drop.is-busy {
  opacity: .7;
  pointer-events: none;
}

.share-photo-drop__empty {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 600;
}

.share-photo-drop__has {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
}

.share-photo-drop__thumb {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border-default);
}

.share-photo-drop__title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
}

.share-photo-drop__sub {
  display: block;
  font-size: 11.5px;
  color: var(--purple-600);
  font-weight: 600;
}

.share-studio-preview-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
}

.share-history-strip {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.share-history-chip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-3);
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* Single share control: icon + optional count badge (no duplicate share icons) */

.share-action-btn {
  position: relative;
  width: 28px;
  height: 28px;
  color: var(--fg-3);
}

.share-action-btn.td-icon-action {
  width: auto;
  height: auto;
}

.share-action-btn__count {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--purple-500);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
  pointer-events: none;
}

.testimonial-pane-btn .share-action-btn__count {
  position: static;
  margin-left: 4px;
  box-shadow: none;
  background: color-mix(in srgb, var(--purple-500) 14%, white);
  color: var(--purple-700);
  min-width: 18px;
  height: 18px;
  line-height: 18px;
}

/* Analytics / elsewhere */

/* Single outer shell — one continuous border (no double-edge join glitches) */

.share-advanced {
  margin: 4px 0;
  border: 1.5px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-2);
  overflow: hidden;
}

.share-advanced.is-open {
  border-color: var(--purple-300);
  background: color-mix(in srgb, var(--purple-500) 4%, var(--surface));
}

.share-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--purple-700);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.share-advanced-toggle:hover {
  background: color-mix(in srgb, var(--purple-500) 6%, transparent);
}

.share-advanced.is-open .share-advanced-toggle {
  border-bottom: 1px solid color-mix(in srgb, var(--purple-300) 70%, transparent);
}

.share-advanced-toggle__chevron {
  margin-left: auto;
  transition: transform 150ms ease;
  flex-shrink: 0;
}

.share-advanced.is-open .share-advanced-toggle__chevron {
  transform: rotate(180deg);
}

.share-advanced-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.share-advanced-panel .share-control-block {
  margin: 0;
  padding: 0;
}

.share-advanced-panel .share-section-label {
  margin: 0 0 8px;
}

.share-advanced-panel__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.share-advanced-panel__chips .share-chip {
  height: 32px;
  padding: 0 12px;
}

.share-advanced-panel__chips .share-color-chip {
  flex-shrink: 0;
}

.share-star-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.share-star-color-row__hex {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  font-family: ui-monospace, SF Mono, Menlo, monospace;
  min-width: 4.5em;
}

.share-advanced-panel .share-excerpt-list {
  max-height: 140px;
  gap: 8px;
}

.share-advanced-panel .share-excerpt-btn {
  padding: 10px 12px;
  line-height: 1.4;
}

.share-advanced-panel__save {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  margin: 0;
}

.share-success {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 28px 32px;
  width: 100%;
  box-sizing: border-box;
}

.share-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--success-500) 14%, var(--surface));
  color: var(--success-600);
}

.share-success__icon svg {
  width: 28px !important;
  height: 28px !important;
}

.share-success__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--fg-1);
  margin: 0 0 8px;
  max-width: 380px;
  letter-spacing: -.01em;
}

.share-success__sub {
  font-size: 14px;
  color: var(--fg-2);
  margin: 0 0 10px;
  line-height: 1.55;
  max-width: 380px;
}

.share-success__note {
  font-size: 13px;
  font-weight: 600;
  color: var(--purple-700);
  margin: 0 0 8px;
  max-width: 380px;
  background: var(--purple-50);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  display: inline-block;
}

.share-success__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.share-success__actions .btn {
  min-width: 132px;
}

.share-success__actions .\!btn {
  min-width: 132px !important;
}

.share-ig-checklist {
  max-width: 320px;
  margin: 16px auto 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-ig-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-3);
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
}

.share-ig-step.done {
  color: var(--fg-1);
  background: color-mix(in srgb, var(--success) 12%, white);
}

.share-ig-step__n {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: var(--border-default);
  color: var(--fg-2);
}

.share-ig-step.done .share-ig-step__n {
  background: var(--success);
  color: #fff;
}

.share-link-preview.is-linkedin .share-link-preview__card {
  border-radius: 8px;
}

.share-link-preview.is-x .share-link-preview__media {
  border-radius: 16px;
}

/* Background color tiles — ring lives on outer button so fills never
     collide with Gradient/Solid type tabs above. */

.share-bg-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
  padding: 2px;
  /* room for active outline without clipping neighbors */
}

.share-bg-swatch {
  position: relative;
  height: 36px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 2px;
  background: transparent;
  box-sizing: border-box;
  overflow: visible;
}

.share-bg-swatch__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}

.share-bg-swatch:hover .share-bg-swatch__fill {
  filter: brightness(1.05);
}

.share-bg-swatch.active {
  border-color: var(--purple-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple-500) 18%, transparent);
}

.share-bg-swatch.\!active {
  border-color: var(--purple-500) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple-500) 18%, transparent) !important;
}

.share-custom-color-row__pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Custom color picker: a native <input type=color>, made invisible and
     stretched over a chip whose own background shows the picked value. */

.share-custom-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  margin: 0 0 4px;
  border: 1.5px solid var(--border-default);
  background: var(--surface-2);
  transition: border-color 120ms, background 120ms;
}

.share-custom-color-row.is-active {
  border-color: var(--purple-300);
  background: var(--purple-50);
}

.share-custom-color-row__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg-2);
}

.share-custom-color-row.is-active .share-custom-color-row__label {
  color: var(--purple-800);
}

.share-color-chip {
  position: relative;
  display: block;
  width: 40px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 7px;
  cursor: pointer;
  border: 1.5px solid var(--border-default);
  overflow: hidden;
}

.share-color-chip--sm {
  width: 34px;
  height: 30px;
}

.share-color-chip.is-active {
  border-color: var(--purple-400);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple-500) 15%, transparent);
}

.share-color-chip input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}

/* Rewrite lives in the caption toolbar (share-rewrite-chip) — no overlay. */

/* Header avatar (single) / stacked badge (bulk) */

.share-header-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple-400), var(--purple-700));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
}

.share-header-badge-stack {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.share-header-badge-stack__back {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 38px;
  height: 38px;
  border-radius: var(--r-lg);
  background: var(--purple-200);
}

.share-header-badge {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--r-lg);
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple-400), var(--purple-700));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  box-shadow: var(--shadow-sm);
}

.share-header-badge-stack .share-header-badge {
  position: absolute;
  left: 0;
  top: 0;
}

/* Link-format preview: an illustrative mock of the resulting post — not
     submitted anywhere, just shows what the caption + link-preview will
     look like once posted. */

.share-preview-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 26px 26px;
}

.share-link-preview {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  flex-shrink: 0;
}

.share-link-preview__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 15px 10px;
}

.share-link-preview__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple-400), var(--purple-700));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}

.share-link-preview__meta {
  line-height: 1.25;
  min-width: 0;
}

.share-link-preview__name {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-1);
}

.share-link-preview__handle {
  display: block;
  font-size: 12px;
  color: var(--fg-3);
}

.share-link-preview__badge {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
  font-weight: 700;
}

.share-link-preview__caption {
  margin: 0;
  padding: 0 15px 12px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--fg-1);
  overflow-wrap: break-word;
  max-height: min(220px, 36vh);
  overflow-y: auto;
}

.share-link-preview__card {
  margin: 0 15px 15px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.share-link-preview__media {
  aspect-ratio: 1.9 / 1;
  padding: 0 22px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--purple-500), var(--purple-800));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.share-link-preview__stars {
  font-size: 24px;
  color: var(--accent-400);
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.share-link-preview__quote {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  opacity: .96;
}

.share-link-preview__footer {
  padding: 10px 13px;
  background: var(--surface-2);
}

.share-link-preview__foot-handle {
  display: block;
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.share-link-preview__foot-line {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
  color: var(--fg-1);
}

/* Image-format preview: real Pillow-rendered card; bulk adds ghost side cards */

.share-bulk-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

.share-bulk-preview__side {
  width: 56px;
  height: 200px;
  border-radius: var(--r-lg);
  background: var(--purple-200);
  opacity: .35;
  flex-shrink: 0;
}

.share-bulk-preview.is-bulk .share-card-preview__img {
  max-width: min(280px, calc(100% - 140px));
}

.share-action-bar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex: none;
  padding: 16px 24px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface);
}

.share-action-bar > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 16px;
  line-height: 1.2;
}

.share-action-bar > .\!btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 46px !important;
  padding: 12px 16px !important;
  line-height: 1.2 !important;
}

.share-action-bar > .btn-secondary {
  flex: 0 0 auto;
}

.share-action-bar > .btn-primary,
  .share-action-bar > .share-primary-btn {
  flex: 1 1 auto;
  min-width: 0;
}

.share-link-row {
  align-items: center;
}

.share-link-row .share-copy-link-btn {
  align-self: center;
}

.share-include-btn {
  min-height: 42px;
}

.share-include-btn__box svg {
  display: block;
}

/* Success step — centered in the full studio shell */

.share-success {
  flex: 1;
  min-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 28px 32px;
  width: 100%;
  box-sizing: border-box;
}

@keyframes shareCheckPop {
  0% {
    transform: scale(.4);
    opacity: 0;
  }

  60% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.share-success .modal-title,
  .share-success .modal-subtitle {
  text-align: center;
}

.share-success .modal-subtitle {
  max-width: 380px;
  margin: 0 auto;
}

.share-success__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  width: 100%;
  margin: 24px auto 0;
}

.share-success__actions .btn {
  min-width: 132px;
  justify-content: center;
}

.share-success__actions .\!btn {
  min-width: 132px !important;
  justify-content: center !important;
}

@media (max-width: 900px) {
  .invite-message-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .invite-message-preview {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
  }

  .local-search-field .pc-input,
    .local-search-field input[type="search"],
    .local-search-field input[type="text"] {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .page-toolbar {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
  }

  .page-toolbar-left {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .page-toolbar-left .local-search {
    max-width: none;
    width: 100%;
  }

  .page-toolbar-actions {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .page-toolbar-actions .btn-primary {
    flex: 1 1 auto;
    width: 100%;
  }

  .page-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .page-filters-right {
    margin-left: 0;
    width: 100%;
  }

  .section-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .invite-table-head {
    display: none;
  }

  .invite-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
  }

  .invite-row-actions {
    text-align: left;
    justify-content: flex-start;
  }

  .invite-filters {
    width: 100%;
  }

  .testimonial-filter-row {
    padding: 12px 16px 10px;
    flex-wrap: wrap;
  }
}

/* Shared toast look (global region + builder autosave) */

.pc-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  max-width: 320px;
  color: #fff;
}

.pc-toast-success {
  background: var(--success-500);
}

.pc-toast-error {
  background: var(--error-500);
}

.pc-toast-info {
  background: var(--fg-1);
}

.pc-toast svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Code copy button on dark embed snippets */

.copy-btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  font-family: inherit;
  position: absolute;
  top: 11px;
  right: 11px;
  padding: 6px 11px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.14);
}

.copy-btn-dark:hover {
  background: rgba(255,255,255,.22);
}

/* `display` utility classes — use these (not an inline `display:flex`/`display:grid`
     style) on any element that also carries `x-show`. Alpine's x-show clears the whole
     inline `display` value when it restores visibility, which silently drops an inline
     flex/grid declaration and collapses the element to its default `display:block`. A
     class-based display isn't touched by that. */

.d-flex {
  display: flex;
}

.d-grid {
  display: grid;
}

/* ── Settings pages ─────────────────────────────────────────────────────
     One content column for every tab so switching Profile → Domains → Billing
     does not jump width. Billing alone opts into --wide for the 3-up plan grid.
     Lead copy fills the panel (no 52ch clamp) so intros are not truncated mid-row. */

.settings-shell {
  width: 100%;
  max-width: 720px;
}

.settings-shell--wide {
  max-width: 960px;
}

.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

/* Forms that wrap multiple panels (Profile, General) — same gap as the stack */

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

/* Page-level intro above the first panel */

/* Section intros under panel titles — full panel width, wrap naturally */

.settings-lead {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--fg-2);
  line-height: 1.55;
  max-width: none;
}

.settings-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
}

.settings-panel-head > div:first-child {
  flex: 1 1 12rem;
  min-width: 0;
}

.settings-panel-head .badge {
  flex-shrink: 0;
}

/* Sunken callout (URL preview, inbox preview, dashed upgrade notes) */

.settings-callout {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  min-width: 0;
}

.settings-callout--dashed {
  background: transparent;
  border-style: dashed;
}

.settings-callout-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-3);
  margin: 0 0 6px;
}

.settings-callout-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-1);
  word-break: break-all;
  line-height: 1.45;
}

.settings-callout-value a {
  color: var(--purple-700);
  text-decoration: none;
}

.settings-callout-value a:hover {
  text-decoration: underline;
}

.settings-callout-value.mono,
  .settings-callout .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

/* Custom file picker — hide native "Choose file / No file chosen" chrome */

.settings-file-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
}

.settings-file-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  display: grid;
  place-items: center;
}

.settings-file-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.settings-file-thumb-empty {
  display: grid;
  place-items: center;
  color: var(--fg-3);
}

.settings-file-thumb-empty i,
  .settings-file-thumb-empty svg {
  width: 18px !important;
  height: 18px !important;
}

.settings-file-meta {
  min-width: 0;
  flex: 1 1 12rem;
}

.settings-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.settings-file-meta label.btn {
  cursor: pointer;
  display: inline-flex;
}

.settings-file-meta label.\!btn {
  cursor: pointer !important;
  display: inline-flex !important;
}

/* Billing uses the same shell width as other settings; keep plan cards readable */

.settings-shell .billing-plans-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  .settings-shell .billing-plans-grid {
    grid-template-columns: 1fr;
  }
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.settings-dns-wrap {
  overflow-x: auto;
  margin-bottom: 14px;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.settings-dns-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  table-layout: fixed;
}

.settings-dns-table th {
  text-align: left;
  color: var(--fg-3);
  border-bottom: 1px solid var(--border-subtle);
  padding: 8px 10px;
  font-weight: 600;
}

.settings-dns-table th:first-child,
  .settings-dns-table td:first-child {
  padding-left: 0;
}

.settings-dns-table th:last-child,
  .settings-dns-table td:last-child {
  padding-right: 0;
}

.settings-dns-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  color: var(--fg-2);
  word-break: break-all;
}

.settings-dns-table td:first-child {
  font-weight: 700;
  color: var(--fg-1);
  word-break: normal;
}

.settings-dns-table .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
}

.profile-avatar-img {
  width: 72px;
  height: 72px;
  border-radius: var(--r-full);
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid var(--border-subtle);
  display: block;
}

.profile-avatar-fallback {
  width: 72px;
  height: 72px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--purple-400), var(--purple-700));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.profile-avatar-fallback.is-hidden {
  display: none !important;
}

.profile-avatar-cam {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  background: var(--purple-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--surface);
  z-index: 1;
}

.profile-avatar-cam svg,
  .profile-avatar-cam i[data-lucide] {
  width: 13px !important;
  height: 13px !important;
}

.profile-avatar-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

.settings-panel-head .pc-panel-title {
  margin: 0 0 4px;
}

.settings-panel-head .settings-lead {
  margin: 0;
}

.settings-lead-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.5;
}

.settings-lead-list li {
  margin-bottom: 6px;
}

.settings-lead-list li:last-child {
  margin-bottom: 0;
}

/* Builder tab section head — shared across Welcome / Fields / Thank-you / Settings / Language */

.builder-section-head {
  margin: 0 0 22px;
}

.builder-section-head .pc-h2 {
  margin: 0 0 6px;
}

.builder-tab-lead {
  margin: 0;
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.5;
}

/* Step footer pinned to the bottom of the editor pane (not sticky over content) */

.builder-step-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin: 0;
  padding: 12px 0 4px;
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
}

.builder-step-footer-left,
  .builder-step-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.builder-step-footer-right {
  margin-left: auto;
}

/* Success hero (import done, etc.) — icon + copy vertically centered as a stack */

.pc-success-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 20px 24px;
  gap: 0;
}

.pc-success-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--success-500) 14%, var(--surface));
  color: var(--success-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  flex-shrink: 0;
}

.pc-success-hero-icon svg,
  .pc-success-hero-icon i[data-lucide] {
  width: 26px !important;
  height: 26px !important;
  display: block;
}

.pc-success-hero h2,
  .pc-success-hero .pc-h2 {
  margin: 0 0 8px;
}

.pc-success-hero-text {
  font-size: 14px;
  color: var(--fg-2);
  max-width: 400px;
  line-height: 1.6;
  margin: 0 0 6px;
}

.pc-success-hero-note {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0 0 26px;
  max-width: 400px;
  line-height: 1.5;
}

.pc-success-hero-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Header notification list */

.header-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 120ms;
}

.header-notif-item:last-child {
  border-bottom: none;
}

.header-notif-item:hover {
  background: var(--surface-hover);
}

.header-notif-item-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--purple-50);
  color: var(--purple-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-notif-item-icon svg {
  width: 14px;
  height: 14px;
}

.header-notif-item-body {
  min-width: 0;
  flex: 1;
}

.header-notif-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  line-height: 1.35;
}

.header-notif-item-meta {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 2px;
  line-height: 1.4;
}

.header-notif-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--purple-500);
  border: 2px solid var(--surface);
}

.header-notif-btn {
  position: relative;
}

.settings-tabs {
  display: flex;
  gap: 2px 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 24px;
  flex-wrap: wrap;
  overflow: visible;
  width: 100%;
}

.settings-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: -1px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.settings-tab:hover {
  color: var(--fg-1);
}

.settings-tab.active {
  color: var(--fg-1);
  border-bottom-color: var(--purple-600);
  font-weight: 600;
}

.settings-tab.\!active {
  color: var(--fg-1) !important;
  border-bottom-color: var(--purple-600) !important;
  font-weight: 600 !important;
}

/* Settings uses the same underline language as section-tabs */

.settings-tabs.section-tabs {
  margin-bottom: 24px;
  overflow: visible;
  flex-wrap: wrap;
}

/* Settings nav grouped by owner: Account (personal) vs Workspace (org). */

.settings-nav {
  display: flex;
  align-items: flex-end;
  gap: 0 28px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 24px;
}

.settings-nav-group {
  display: flex;
  flex-direction: column;
}

.settings-nav-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 0 2px 6px;
}

.settings-nav .settings-tabs {
  margin-bottom: 0;
  border-bottom: none;
}

/* Compact danger zone — same column width as form panels, not stretched */

.settings-danger {
  border-color: var(--error-200, #fecaca);
  padding: 16px 18px;
}

.settings-danger-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--error-700, #b91c1c);
  letter-spacing: -0.01em;
}

.settings-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 12px 14px;
  border: 1px solid var(--error-500);
  border-radius: var(--r-md);
  background: var(--surface);
}

.settings-danger-copy {
  min-width: 0;
  flex: 1;
}

.settings-danger-copy strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
}

.settings-danger-copy span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-3);
  max-width: none;
}

.settings-danger-row .btn {
  flex-shrink: 0;
}

.settings-danger-row .\!btn {
  flex-shrink: 0 !important;
}

/* Billing usage meters */

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

.billing-usage-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 14px 14px 12px;
  background: var(--surface-sunken, var(--surface));
  min-width: 0;
}

.billing-usage-card.is-over {
  border-color: var(--error-300, #fca5a5);
  background: color-mix(in srgb, var(--error-500) 6%, var(--surface));
}

.billing-usage-card.is-unavailable {
  opacity: 0.72;
}

.billing-usage-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.billing-usage-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-2);
}

.billing-usage-label i {
  width: 15px;
  height: 15px;
  color: var(--purple-600);
  flex-shrink: 0;
}

.billing-usage-value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  line-height: 1.1;
  text-align: right;
}

.billing-usage-value small {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-3);
}

.billing-usage-value.is-over {
  color: var(--error-600);
}

.billing-usage-bar {
  height: 6px;
  background: var(--border-subtle);
  border-radius: 99px;
  overflow: hidden;
}

.billing-usage-bar > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--purple-500);
  transition: width 0.3s ease;
}

.billing-usage-bar > span.is-warn {
  background: var(--accent-500, #F5A623);
}

.billing-usage-bar > span.is-over {
  background: var(--error-500);
}

.billing-usage-bar.is-muted {
  opacity: 0.35;
}

.billing-usage-hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--fg-3);
}

/* At/near the cap this line is the actionable one — it must not be the
     lowest-contrast text on the card. Bumped to AA-passing status colors. */

.billing-usage-hint.is-over {
  color: var(--error-600);
  font-weight: 600;
}

.billing-usage-hint.is-warn {
  color: var(--warning-700);
  font-weight: 600;
}

/* Domains & email — side-by-side domain + local part fields */

.settings-domain-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 160px);
  gap: 12px 16px;
  align-items: start;
  width: 100%;
}

.settings-domain-fields .pc-field {
  min-width: 0;
}

.settings-domain-fields .pc-input,
  .settings-domain-fields input {
  width: 100%;
  box-sizing: border-box;
}

.settings-domain-fields .pc-help,
  .settings-domain-fields .pc-error {
  min-height: 1.25em;
}

@media (max-width: 560px) {
  .settings-domain-fields {
    grid-template-columns: 1fr;
  }
}

/* ── Current plan hero ── */

.billing-current {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg, 12px);
  overflow: hidden;
  background: var(--surface);
}

.billing-current-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 22px;
  background:
      linear-gradient(135deg, var(--purple-50) 0%, var(--surface) 55%, var(--surface) 100%);
  border-bottom: 1px solid var(--border-subtle);
}

.billing-current-hero.is-free {
  background: var(--surface);
}

.billing-current-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.billing-current-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.billing-current-name {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  line-height: 1.15;
}

.billing-current-price {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--purple-700);
}

.billing-current-note {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 44ch;
}

.billing-current-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}

.billing-current-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--border-subtle);
}

.billing-current-stat {
  padding: 16px 18px;
  border-right: 1px solid var(--border-subtle);
  min-width: 0;
}

.billing-current-stat:last-child {
  border-right: none;
}

.billing-current-stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.billing-current-stat-label i {
  width: 13px;
  height: 13px;
  color: var(--purple-600);
}

.billing-current-stat-value {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  line-height: 1.3;
}

.billing-current-stat-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.35;
}

.billing-current-stat-hint.is-warn {
  color: var(--accent-600, #c47d0e);
  font-weight: 600;
}

.billing-current-stat-hint.is-danger {
  color: var(--error-600);
  font-weight: 600;
}

.billing-current-stat.is-warn .billing-current-stat-value {
  color: var(--accent-600, #c47d0e);
}

.billing-current-stat.is-danger .billing-current-stat-value {
  color: var(--error-600);
}

.billing-current-usage {
  padding: 18px 22px 20px;
}

.billing-current-usage-title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* legacy meta (unused) kept minimal in case of cache */

.billing-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.billing-plan-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 20px 18px 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.billing-plan-card.is-featured:not(.is-current) {
  border-color: color-mix(in srgb, var(--purple-500) 45%, var(--border-subtle));
}

.billing-plan-card.is-current {
  border-color: var(--purple-500);
  background: var(--purple-50);
  box-shadow: 0 0 0 3px var(--purple-100);
}

.billing-plan-head {
  margin-bottom: 16px;
  min-height: 92px;
}

.billing-plan-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.billing-plan-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-1);
}

.billing-plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.billing-plan-amount {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  line-height: 1.1;
}

.billing-plan-period {
  font-size: 13px;
  color: var(--fg-2);
  font-weight: 500;
}

.billing-plan-price-note {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--fg-3);
  line-height: 1.4;
}

.billing-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.billing-plan-features li {
  font-size: 12.5px;
  color: var(--fg-2);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.35;
}

.billing-plan-features li.is-off {
  color: var(--fg-3);
}

.billing-plan-features li i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--purple-500);
}

.billing-plan-features li.is-off i {
  color: var(--fg-3);
}

.billing-plan-cta {
  margin-top: auto;
}

.billing-plan-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Custom / enterprise strip — not a 4th pricing column */

.billing-custom-band {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr minmax(200px, 240px);
  gap: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--purple-500) 6%, var(--surface)) 0%,
        var(--surface) 55%);
}

.billing-custom-band.is-current {
  border-color: var(--purple-500);
  box-shadow: 0 0 0 3px var(--purple-100);
}

.billing-custom-band-main {
  padding: 22px 24px;
  min-width: 0;
}

.billing-custom-band-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--purple-700);
  margin-bottom: 8px;
}

.billing-custom-band-badge i {
  width: 14px;
  height: 14px;
}

.billing-custom-band-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.billing-custom-band-copy {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.55;
  max-width: 58ch;
}

.billing-custom-band-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.billing-custom-band-points li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.4;
}

.billing-custom-band-points li i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--purple-500);
}

.billing-custom-band-aside {
  padding: 22px 20px;
  border-left: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface-sunken, #f6f6f8) 70%, var(--surface));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: center;
}

.billing-custom-band-price-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-3);
}

.billing-custom-band-price {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.billing-custom-band-price-note {
  margin: 6px 0 16px;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.4;
}

.billing-plans-footnote {
  font-size: 12px;
  color: var(--fg-3);
  margin: 16px 0 0;
  text-align: center;
  line-height: 1.5;
}

.billing-plans-footnote a {
  color: var(--purple-700);
  font-weight: 600;
}

/* Centered paywall / upgrade empty state on Requests */

.invite-upgrade-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(56vh, 480px);
  width: 100%;
  padding: 24px 16px;
  box-sizing: border-box;
}

.invite-upgrade-card {
  width: 100%;
  max-width: 440px;
  text-align: center;
  padding: 32px 28px;
}

.invite-upgrade-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: var(--r-md);
  background: var(--purple-50);
  color: var(--purple-600);
  display: grid;
  place-items: center;
}

.invite-upgrade-icon i {
  width: 24px;
  height: 24px;
}

.invite-upgrade-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: -0.02em;
}

.invite-upgrade-card p {
  margin: 0 auto 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 36ch;
}

.invite-upgrade-card ul {
  list-style: none;
  margin: 0 auto 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  max-width: 28ch;
}

.invite-upgrade-card li {
  font-size: 13px;
  color: var(--fg-2);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}

.invite-upgrade-card li i {
  width: 14px;
  height: 14px;
  color: var(--purple-500);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Panel / card section */

.pc-panel {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.pc-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Section title */

/* Forms & Widgets list — shared grid of vertical cards.
     minmax(min(100%, 240px), 1fr) never forces a track wider than the parent
     (the old max(220px, …) formula could overflow on narrow phones). */

.forms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 14px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.forms-grid > .form-card-wrap {
  min-height: 100%;
  min-width: 0;
  max-width: 100%;
}

.form-card,
  .widget-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 150ms var(--ease-enter), box-shadow 150ms var(--ease-enter);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.form-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.form-card-thumb {
  height: 84px;
  border-radius: var(--r-md);
  color: #fff;
  display: grid;
  place-items: center;
}

.form-card-body {
  flex: 1;
  min-width: 0;
}

/* Title row — name + kebab trigger side by side; the kebab's flyout
     anchors here (not the thumbnail) so it aligns with the name. */

.form-card-title-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.form-card-name {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg-1);
  margin-bottom: 3px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card titles that are real links: keep the plain-title look, add focus. */

a.form-card-name,
  a.widget-card-name {
  display: block;
  text-decoration: none;
  color: var(--fg-1);
}

a.form-card-name:hover,
  a.widget-card-name:hover {
  color: var(--purple-600);
}

a.form-card-name:focus-visible,
  a.widget-card-name:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 2px;
  border-radius: var(--r-xs, 4px);
}

.form-card-meta {
  font-size: 12px;
  color: var(--fg-3);
}

/* .form-card-footer rules live with Forms section styles above */

/* Dashed "new form" tile — first cell in the grid */

/* Forms list — single-column row layout */

.forms-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Widgets: list (row + grid views) ── */

.widget-card {
  position: relative;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 150ms var(--ease-enter), box-shadow 150ms var(--ease-enter);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.widget-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.widget-card-thumb {
  height: 84px;
  border-radius: var(--r-md);
  color: #fff;
  display: grid;
  place-items: center;
}

.widget-type-pill {
  border: 1px solid var(--purple-200);
}

/* Shared kebab flyout menu — used by both Forms and Widgets grid cards.
     Width differs per usage (170px forms / 150px widgets), set inline. */

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  padding: 4px;
}

/* Forms card menu: sit above sibling cards when wrap is elevated. */

.form-card-menu {
  z-index: 50;
  min-width: 190px;
  max-height: min(70vh, 420px);
  overflow-y: auto;
}

.dropdown-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--fg-1);
  white-space: nowrap;
  text-align: left;
  border-radius: 8px;
  font-family: inherit;
  text-decoration: none;
}

.dropdown-menu-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.dropdown-menu-item:hover {
  background: var(--surface-hover);
}

.dropdown-menu-item--danger {
  color: var(--error-600);
}

/* Generic segmented pill toggle — view mode, breakpoint, theme, columns, embed tabs */

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--surface-sunken);
  border-radius: var(--r-md);
}

.segmented-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  background: transparent;
  color: var(--fg-2);
  transition: background 120ms, color 120ms;
}

.segmented-btn.active {
  background: var(--surface);
  color: var(--fg-1);
  box-shadow: var(--shadow-xs);
}

.segmented-btn.\!active {
  background: var(--surface) !important;
  color: var(--fg-1) !important;
  box-shadow: var(--shadow-xs) !important;
}

.segmented-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.segmented--tabs .segmented-btn {
  border-radius: 8px 8px 0 0;
}

.segmented--tabs .segmented-btn.active {
  background: var(--neutral-950);
  color: #fff;
  box-shadow: none;
}

.segmented--tabs .segmented-btn.\!active {
  background: var(--neutral-950) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Widgets gallery — type picker cards */

.type-pick-card.\!selected {
  border-color: var(--purple-500) !important;
  box-shadow: 0 0 0 3px var(--purple-100) !important;
}

.type-pick-card.selected {
  border-color: var(--purple-500);
  box-shadow: 0 0 0 3px var(--purple-100);
}

.type-pick-card.is-disabled {
  cursor: not-allowed;
  opacity: .6;
}

/* Builder — used by embed.html's "What it'll look like" section label
     (the widget builder itself now uses the wall-of-love-style two-pane
     layout, styled inline — see dashboard/widgets/builder.html) */

.builder-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 10px;
}

/* Form-filter chips (builder "By form" source) */

.form-chip.\!active {
  background: var(--purple-600) !important;
  color: #fff !important;
  border-color: var(--purple-600) !important;
}

.form-chip.active {
  background: var(--purple-600);
  color: #fff;
  border-color: var(--purple-600);
}

/* ── Analytics dashboard ───────────────────────────────────────────────── */

.analytics-page {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* No divider under the header row — the active tab's own underline is
     enough; a second full-width line here just added visual noise.
     .section-tabs's own border stays suppressed below so neither draws one. */

.analytics-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 0;
}

.analytics-header-row > nav {
  flex: 1 1 auto;
  min-width: 0;
}

.analytics-header-row > nav > .section-tabs {
  margin-bottom: 0;
  border-bottom: none;
}

.analytics-header-row .section-tab {
  margin-bottom: -1px;
  font-size: 13px;
}

.analytics-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-bottom: 8px;
}

.analytics-controls-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.analytics-range-select,
  .analytics-sort select {
  height: 32px;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-1);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  padding: 0 28px 0 10px;
  background: var(--surface);
  font-family: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a99' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.analytics-custom-dates {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.analytics-custom-dates input[type="date"] {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-1);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  background: var(--surface);
  font-family: inherit;
}

.analytics-custom-sep {
  color: var(--text-mute);
  font-size: 12px;
}

.btn-xs {
  padding: 4px 10px !important;
  font-size: 12px !important;
  gap: 5px !important;
}

/* Quiet period meta (not a second KPI band) */

.analytics-summary-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin: -6px 0 16px;
  padding: 0;
  background: transparent;
  border: none;
}

.analytics-summary-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
}

.analytics-summary-range svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--fg-3);
}

.analytics-summary-line {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-3);
  font-feature-settings: "tnum";
}

.analytics-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.analytics-detail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.analytics-detail-left,
  .analytics-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.analytics-detail-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}

.analytics-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

.analytics-grid-2--equal {
  align-items: stretch;
}

.analytics-panel--fill {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0 !important;
}

.analytics-panel-body {
  flex: 1;
  min-height: 0;
}

.analytics-grid-spacer {
  min-height: 1px;
}

@media (max-width: 860px) {
  .analytics-grid-2 {
    grid-template-columns: 1fr;
  }

  .analytics-grid-spacer {
    display: none;
  }
}

.analytics-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-mute);
  font-size: 13px;
}

.analytics-empty--sm {
  padding: 16px;
  font-size: 12.5px;
}

.analytics-footnote {
  font-size: 11.5px;
  color: var(--text-mute);
  margin: 10px 0 0;
  line-height: 1.45;
}

.analytics-campaigns {
  margin-top: 12px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
}

.analytics-campaigns-label {
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-3);
}

.analytics-widget-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.analytics-widget-name svg {
  width: 15px;
  height: 15px;
  color: var(--fg-3);
  flex-shrink: 0;
}

.analytics-host-cell {
  font-weight: 600;
  word-break: break-all;
}

/* KPI cards — inherit dashboard .stat-card (label above, 30px value).
     Only grid layout is analytics-specific. */

.analytics-stat-grid.stat-grid,
  .analytics-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.analytics-stat-grid:has(> :nth-child(5)) {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1100px) {
  .analytics-stat-grid:has(> :nth-child(5)) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 960px) {
  .analytics-stat-grid,
    .analytics-stat-grid:has(> :nth-child(5)) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .analytics-stat-grid,
    .analytics-stat-grid:has(> :nth-child(5)) {
    grid-template-columns: 1fr;
  }
}

/* Tip sits inline with the label on dashboard-style cards */

.analytics-stat-grid .stat-card .lbl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.analytics-page .pc-panel,
  .analytics-page .analytics-panel {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  margin-bottom: 14px;
}

/* Alaan panel titles: compact uppercase tracking */

.analytics-page .pc-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-1);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  color: var(--text-mute);
  font-size: 9px;
  font-weight: 700;
  justify-content: center;
  cursor: help;
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: 0;
}

.stat-tip:hover .stat-tip-bubble,
  .stat-tip:focus .stat-tip-bubble {
  opacity: 1;
  pointer-events: auto;
}

.stat-tip-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  background: var(--fg-1);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
  z-index: 20;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}

/* Conversion / funnel strip */

.analytics-funnel-strip,
  .analytics-conversion {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
}

.analytics-funnel-step {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 72px;
  padding: 2px 4px;
}

.analytics-funnel-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.analytics-funnel-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.analytics-funnel-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 10px;
  color: var(--fg-4);
  min-width: 44px;
}

.analytics-funnel-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--purple-600);
  background: var(--purple-50);
  border-radius: 999px;
  padding: 1px 7px;
  font-feature-settings: "tnum";
}

.analytics-funnel-arrow {
  font-size: 14px;
  line-height: 1;
  color: var(--neutral-400);
}

/* Legacy chip fallback if used elsewhere */

.analytics-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--fg-3);
  line-height: 1.5;
}

.analytics-secondary > span {
  white-space: nowrap;
}

.analytics-secondary-dot {
  margin: 0 8px;
  color: var(--border-default);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.analytics-callout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--purple-50);
  border: 1px solid var(--purple-100);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.45;
}

.analytics-callout svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--purple-500);
}

.analytics-callout p {
  margin: 0;
  flex: 1;
}

.analytics-callout-link {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--purple-600);
  text-decoration: none;
  white-space: nowrap;
}

.analytics-callout-link:hover {
  text-decoration: underline;
}

/* Panels */

.analytics-panel {
  margin-bottom: 14px;
  border-radius: var(--r-lg);
  padding: 16px 18px;
}

.analytics-panel--spark {
  padding-bottom: 12px;
}

/* Horizontal bar lists (shares / rankings) */

.analytics-bar-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.analytics-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.analytics-bar-label {
  width: 96px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
}

.analytics-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple-400), var(--purple-600));
  border-radius: 999px;
  min-width: 0;
}

.analytics-bar-value {
  width: 36px;
  flex-shrink: 0;
  text-align: right;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg-1);
  font-feature-settings: "tnum";
}

.analytics-rank-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.analytics-rank-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
}

.analytics-rank-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.analytics-rank-badge {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--purple-700);
  background: var(--purple-50);
  border: 1px solid var(--purple-100);
  border-radius: 999px;
  padding: 2px 8px;
  font-feature-settings: "tnum";
}

/* Spark bar chart (shares daily) */

.analytics-spark-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 88px;
  padding-top: 4px;
}

.analytics-spark-bar {
  flex: 1;
  min-width: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--purple-400);
  height: calc(8px + (var(--h, 0) * 10px));
  max-height: 100%;
  opacity: 0.92;
  transition: opacity 120ms;
}

.analytics-spark-bar.is-empty {
  height: 4px;
  opacity: 0.22;
  background: var(--neutral-300);
}

.analytics-spark-bar:hover {
  opacity: 1;
}

/* Performance table — 13px body, 11px uppercase headers (Alaan row rhythm) */

.analytics-table-wrap {
  overflow-x: auto;
}

.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.analytics-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 10px 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.analytics-table th.num,
  .analytics-table td.num {
  text-align: right;
  font-feature-settings: "tnum";
}

.analytics-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--fg-1);
  vertical-align: middle;
}

.analytics-table tr:last-child td {
  border-bottom: none;
}

.analytics-table tbody tr {
  transition: background 120ms;
}

.analytics-table tbody tr:hover td {
  background: var(--bg-soft);
}

.analytics-table a.row-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.analytics-table a.row-link:hover {
  color: var(--purple-600);
}

.analytics-table .muted {
  color: var(--fg-3);
  font-weight: 500;
  font-size: 12px;
  margin-top: 2px;
}

.analytics-table .is-disabled {
  opacity: 0.55;
}

.analytics-table .is-disabled:hover td {
  background: transparent;
}

.analytics-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
}

.analytics-row:not(.is-disabled):hover {
  background: transparent;
}

.analytics-row + .analytics-row {
  border-top: 1px solid var(--border-subtle);
}

.analytics-row.is-disabled {
  opacity: 0.5;
  cursor: default;
}

.analytics-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
}

.analytics-row-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
  font-feature-settings: "tnum";
}

/* Funnel bars (Alaan-adjacent: tight rows, tabular nums) */

.funnel-compact .funnel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.funnel-label {
  min-width: 88px;
  max-width: 120px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  line-height: 1.25;
}

.funnel-bar-track {
  flex: 1;
  height: 10px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
}

.funnel-bar-fill {
  height: 100%;
  background: var(--purple-500);
  border-radius: 999px;
  transition: width 300ms var(--ease-enter);
  min-width: 0;
}

.funnel-bar-fill.is-worst {
  background: var(--purple-300);
}

.funnel-value {
  width: 40px;
  flex-shrink: 0;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-1);
  font-feature-settings: "tnum";
}

.funnel-kept {
  width: 40px;
  flex-shrink: 0;
  text-align: right;
  font-size: 11px;
  color: var(--text-mute);
  font-feature-settings: "tnum";
}

.funnel-kept.is-worst {
  color: var(--purple-700);
  font-weight: 700;
}

/* Donut — Alaan: 104px ring, brand ramp, 12px legend */

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}

.donut-ring {
  width: 104px;
  height: 104px;
  border-radius: 999px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.donut-center {
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.donut-center-value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--fg-1);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.donut-center-unit {
  font-size: 9px;
  color: var(--fg-3);
  font-weight: 600;
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-2);
}

.donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.donut-legend-count {
  margin-left: auto;
  font-weight: 700;
  color: var(--fg-1);
  font-feature-settings: "tnum";
  white-space: nowrap;
}

.donut-legend-pct {
  color: var(--fg-3);
  font-weight: 500;
  font-size: 11px;
  margin-left: 4px;
}

/* Sparklines */

.trend-bucket {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  background: var(--bg-soft);
  padding: 2px 8px;
  border-radius: 999px;
}

.trend-svg-wrap {
  width: 100%;
  position: relative;
}

.trend-svg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 120px;
}

.trend-svg-wrap--compact svg {
  max-height: 80px;
}

.trend-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-mute);
}

.trend-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  background: var(--fg-1);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transform: translate(-50%, -120%);
  opacity: 0;
  transition: opacity 80ms;
}

.trend-tooltip.is-on {
  opacity: 1;
}

.trend-grid line {
  stroke: var(--border-subtle);
  stroke-width: 1;
}

.trend-point {
  outline: none;
}

.trend-point:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 2px;
}

.histogram-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}

.histogram-stars {
  width: 48px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--fg-2);
}

.histogram-track {
  flex: 1;
  height: 8px;
  background: var(--bg-soft);
  border-radius: var(--r-full);
  overflow: hidden;
}

.histogram-fill {
  height: 100%;
  background: var(--accent-500);
  border-radius: var(--r-full);
}

.histogram-count {
  width: 28px;
  flex-shrink: 0;
  text-align: right;
  font-size: 12px;
  color: var(--text-mute);
  font-feature-settings: "tnum";
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.rank-row + .rank-row {
  border-top: 1px solid var(--border-subtle);
}

.rank-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.rank-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-1);
}

.rank-bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-soft);
  border-radius: var(--r-full);
  overflow: hidden;
}

.rank-bar-fill {
  height: 100%;
  background: var(--purple-400);
  border-radius: var(--r-full);
}

.rank-pct {
  width: 36px;
  flex-shrink: 0;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-1);
}

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

.pc-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 2px solid var(--border-default);
  border-top-color: var(--purple-500);
  animation: pc-spin 0.6s linear infinite;
}

.analytics-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-mute);
  font-weight: 500;
}

.analytics-tracking-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 0 14px;
  border-radius: var(--r-md);
  background: var(--neutral-50);
  border: 1px solid var(--border-subtle);
  color: var(--fg-3);
  font-size: 12.5px;
  line-height: 1.45;
}

.analytics-tracking-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--text-mute);
}

.analytics-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 860px) {
  .analytics-compare-grid {
    grid-template-columns: 1fr;
  }
}

#analytics-body.htmx-request .analytics-content {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 150ms;
}

/* Manual-selection testimonial card (builder left pane) */

.manual-card.\!selected {
  border-color: var(--purple-400) !important;
  background: var(--purple-50) !important;
}

.manual-card.selected {
  border-color: var(--purple-400);
  background: var(--purple-50);
}

.manual-card.\!selected .manual-card-check {
  background: var(--purple-600) !important;
  border-color: var(--purple-600) !important;
}

.manual-card.selected .manual-card-check {
  background: var(--purple-600);
  border-color: var(--purple-600);
}

/* Fake browser-chrome preview frame (builder + embed) */

.browser-chrome {
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.browser-chrome-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
}

.browser-chrome-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--border-default);
}

.browser-chrome-url {
  margin-left: 8px;
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-chrome-body {
  background: var(--bg-soft);
  padding: 36px 22px;
  min-height: 220px;
}

/* Inline PRO upgrade prompt */

.upgrade-box {
  margin-top: 10px;
  border-radius: var(--r-md);
  padding: 12px;
  background: linear-gradient(135deg, rgba(245,166,35,.14), rgba(91,47,212,.08));
  border: 1px solid var(--accent-300, #ffcbab);
}

/* Star-badge widget type (aggregate rating pill) */

.star-badge-stars {
  color: var(--star);
  display: flex;
  gap: 1px;
}

.star-badge-stars svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Create space form */

.ask-toggle.on {
  border-color: color-mix(in oklab, var(--purple-500) 30%, transparent);
  background: var(--purple-50);
}

.ask-toggle.on .at-icon {
  background: var(--purple-100);
  color: var(--purple-700);
}

.ask-toggle.on .at-switch {
  background: var(--purple-600);
}

.ask-toggle.on .at-switch::after {
  transform: translateX(14px);
}

/* Standalone toggle switch — same look/dimensions as .ask-toggle .at-switch, usable
     outside that wrapper (e.g. widget-builder "hide branding" row). */

.pc-switch {
  display: inline-block;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  flex-shrink: 0;
  border: none;
  padding: 0;
  background: var(--border-default);
  transition: background 150ms;
  position: relative;
  cursor: pointer;
}

.pc-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  transition: transform 150ms;
  box-shadow: var(--shadow-xs);
}

.pc-switch.on {
  background: var(--purple-600);
}

.pc-switch.on::after {
  transform: translateX(14px);
}

/* ════════════════════════════════════════════════
     ONBOARDING WIZARD
  ════════════════════════════════════════════════ */

/* Labeled step progress in auth-topbar */

.ob-stepper {
  display: flex;
  align-items: center;
  gap: 0;
}

.ob-stepper-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.ob-time-hint {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ob-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-sm);
}

a.ob-step:hover .ob-step-label {
  color: var(--purple-700);
}

a.ob-step:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ob-step + .ob-step::before {
  content: '';
  width: 20px;
  height: 2px;
  margin-right: 4px;
  border-radius: 999px;
  background: var(--border-default);
  flex-shrink: 0;
}

.ob-step.done + .ob-step::before,
  .ob-step.active + .ob-step::before {
  background: var(--purple-300);
}


  .ob-step.\!active + .ob-step::before {
  background: var(--purple-300) !important;
}

.ob-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--border-default);
  box-shadow: 0 0 0 3px transparent;
  transition: background 200ms, box-shadow 200ms;
}

.ob-step.active .ob-step-dot {
  background: var(--purple-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--purple-500) 18%, transparent);
}

.ob-step.\!active .ob-step-dot {
  background: var(--purple-500) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--purple-500) 18%, transparent) !important;
}

.ob-step.done .ob-step-dot {
  background: var(--purple-400);
}

.ob-step-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ob-step.active .ob-step-label {
  color: var(--purple-700);
}

.ob-step.\!active .ob-step-label {
  color: var(--purple-700) !important;
}

.ob-step.done .ob-step-label {
  color: var(--fg-2);
}

/* Card shells */

.ob-card {
  width: 100%;
  max-width: 560px;
}

.ob-card--wide {
  max-width: 760px;
}

.ob-card h1,
  .auth-card h1 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--fg-1);
}

.ob-card .sub,
  .auth-card .sub {
  margin: 0 0 20px;
  font-size: 14.5px;
  color: var(--fg-2);
  line-height: 1.55;
}

/* Single surface for step body */

.ob-panel {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.ob-panel-body {
  padding: 24px 28px;
}

.ob-panel-body > .pc-field:last-child,
  .ob-panel-body > .pc-field:last-of-type {
  margin-bottom: 0;
}

/* Wizard action bar — Back left, Skip + primary right */

.ob-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding: 16px 28px;
  border-top: 1px solid var(--border-subtle);
  background: color-mix(in oklab, var(--surface-sunken) 55%, var(--surface));
}

.ob-actions-start,
  .ob-actions-end {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ob-actions-end {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ob-actions .btn {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  flex: 0 0 auto;
}

.ob-actions .\!btn {
  height: 40px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  flex: 0 0 auto !important;
}

.ob-actions .btn-primary {
  min-width: 132px;
}

.ob-actions .btn-secondary {
  min-width: 0;
  padding: 0 14px;
  background: var(--surface);
}

.ob-skip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 10px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-3);
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color 120ms, background 120ms;
}

.ob-skip:hover {
  color: var(--fg-1);
  background: color-mix(in oklab, var(--fg-1) 5%, transparent);
}

.ob-skip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Compact CTA row (share step, single-action layouts) */

.ob-cta-row .\!btn {
  height: 40px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
}

.ob-cta-row .btn {
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
}

/* Brand step: form + live preview */

.ob-brand-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
  gap: 0;
  align-items: stretch;
}

.ob-brand-form {
  padding: 24px 28px;
  border-right: 1px solid var(--border-subtle);
  min-width: 0;
}

.ob-brand-preview-col {
  padding: 20px 18px;
  background:
      radial-gradient(ellipse 120% 80% at 50% 0%,
        color-mix(in oklab, var(--purple-500) 8%, transparent),
        transparent 70%),
      var(--surface-sunken);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ob-brand-preview-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: center;
}

/* Logo drag-and-drop upload zone */

.ob-drop-zone {
  border: 1.5px dashed var(--border-default);
  border-radius: var(--r-md);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color 150ms, background 150ms, box-shadow 150ms;
  background: var(--surface-sunken);
  text-align: center;
}

.ob-drop-zone:hover,
  .ob-drop-zone.drag-over {
  border-color: var(--purple-400);
  background: color-mix(in oklab, var(--purple-500) 6%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--purple-500) 10%, transparent);
}

.ob-drop-zone.has-file {
  border-style: solid;
  border-color: var(--border-subtle);
  background: var(--surface);
  padding: 16px;
}

.ob-drop-zone .dz-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-2);
  box-shadow: var(--shadow-xs);
}

.ob-drop-zone .dz-icon svg {
  width: 18px;
  height: 18px;
}

.ob-drop-zone .dz-lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  margin: 0;
}

.ob-drop-zone .dz-hint {
  font-size: 12px;
  color: var(--fg-3);
  margin: 0;
}

.ob-logo-preview {
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  -o-object-fit: contain;
     object-fit: contain;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  padding: 4px;
}

/* Color swatches + custom picker */

.ob-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ob-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.ob-swatch {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 12%, transparent);
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
  flex-shrink: 0;
  padding: 0;
}

.ob-swatch:hover {
  transform: scale(1.08);
}

.ob-swatch:focus-visible {
  outline: none;
  box-shadow:
      0 0 0 2px var(--surface),
      0 0 0 4px var(--purple-500);
}

.ob-swatch.selected {
  box-shadow:
      0 0 0 2px var(--surface),
      0 0 0 4px var(--fg-1);
  transform: scale(1.06);
}

.ob-swatch.\!selected {
  box-shadow:
      0 0 0 2px var(--surface),
      0 0 0 4px var(--fg-1) !important;
  transform: scale(1.06) !important;
}

.ob-drop-zone.has-error {
  border-color: var(--error-500);
  background: color-mix(in oklab, var(--error-500) 6%, var(--surface));
}

.ob-preview-footnote {
  margin: 0;
  font-size: 11.5px;
  color: var(--fg-3);
  text-align: center;
  line-height: 1.4;
}

.ob-url-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
}

.ob-url-summary-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ob-url-summary-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ob-url-summary-code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-1);
  word-break: break-all;
}

.ob-url-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--purple-700);
  cursor: pointer;
}

.ob-url-toggle:hover {
  color: var(--purple-500);
}

.ob-url-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

.ob-url-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 150ms;
}

.ob-url-toggle .ob-chevron-open {
  transform: rotate(180deg);
}

.ob-form-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
}

.ob-form-name-field {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.ob-form-name-edit {
  margin-top: 8px;
  width: 100%;
}

.ob-form-name-field .pc-input-wrap,
  .ob-form-name-field .pc-input {
  width: 100%;
  max-width: none;
}

.ob-form-name-toggle {
  flex-shrink: 0;
  margin-top: 2px;
}

.ob-form-name-value {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-1);
}

.ob-primary-activate {
  height: 48px;
  font-size: 15px;
}

.ob-flash-stack {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ob-flash-stack:has(+ .ob-card--wide) {
  max-width: 760px;
}

.ob-flash {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
}

.ob-flash--info, .ob-flash-- {
  background: var(--purple-50);
  color: var(--purple-700);
  border-color: var(--purple-200);
}

.ob-color-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 140px;
  min-width: 0;
}

.ob-color-native {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--r-sm);
  padding: 2px;
  cursor: pointer;
  background: var(--surface);
  flex-shrink: 0;
}

.ob-color-hex {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Live collection preview card */

.ob-preview {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-md);
}

.ob-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 12px;
}

.ob-preview-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  -o-object-fit: contain;
     object-fit: contain;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 2px color-mix(in oklab, #000 12%, transparent);
}

.ob-preview-logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  background: var(--surface);
}

.ob-preview-org {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.2;
}

.ob-preview-title {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 2px;
  font-family: var(--font-mono);
}

.ob-preview-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 4px;
  line-height: 1.3;
}

.ob-preview-copy {
  font-size: 12px;
  color: var(--fg-2);
  margin: 0 0 12px;
  line-height: 1.45;
}

.ob-preview-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
}

.ob-preview-field {
  background: var(--surface-sunken);
  border: 1.5px solid var(--border-default);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: 10px;
  min-height: 44px;
}

.ob-preview-cta {
  width: 100%;
  height: 36px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px color-mix(in oklab, #000 16%, transparent);
}

/* Goal picker cards (step 3) */

.ob-goal-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ob-goal-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  border: 1.5px solid var(--border-default);
  background: var(--surface);
  color: var(--fg-2);
  font-family: inherit;
  text-align: left;
  transition: border-color .12s, background .12s, box-shadow .12s;
}

.ob-goal-card:hover {
  border-color: var(--purple-300);
  background: color-mix(in oklab, var(--purple-500) 3%, var(--surface));
}

.ob-goal-card.is-active {
  border-color: var(--purple-500);
  background: var(--purple-50);
  color: var(--purple-700);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--purple-500) 12%, transparent);
}

.ob-goal-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  color: var(--fg-2);
}

.ob-goal-card.is-active .ob-goal-icon {
  background: color-mix(in oklab, var(--purple-500) 12%, var(--surface));
  border-color: color-mix(in oklab, var(--purple-500) 22%, transparent);
  color: var(--purple-700);
}

.ob-goal-icon svg {
  width: 16px;
  height: 16px;
}

.ob-goal-text {
  min-width: 0;
  flex: 1;
}

.ob-goal-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.25;
}

.ob-goal-card.is-active .ob-goal-text strong {
  color: var(--purple-800);
}

.ob-goal-text span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fg-2);
}

.ob-goal-card.is-active .ob-goal-text span {
  color: var(--purple-700);
}

.ob-goal-check {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1.5px solid var(--border-default);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all .12s;
}

.ob-goal-card.is-active .ob-goal-check {
  border-color: var(--purple-500);
  background: var(--purple-500);
  color: #fff;
}

.ob-goal-check svg {
  width: 11px;
  height: 11px;
}

/* Form template checklist row */

/* Share step */

.ob-link-box {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ob-link-box .pc-input {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.ob-share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ob-share-actions .btn {
  width: 100%;
  justify-content: center;
}

.ob-share-actions .\!btn {
  width: 100% !important;
  justify-content: center !important;
}

/* Slug prefix decoration */

.ob-slug-wrap {
  display: flex;
  border: 1.5px solid var(--border-default);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
  transition: border-color 120ms, box-shadow 120ms;
}

.ob-slug-wrap:focus-within {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.ob-slug-prefix {
  padding: 0 10px;
  background: var(--surface-sunken);
  border-right: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ob-slug-input {
  flex: 1;
  height: 44px;
  padding: 0 12px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-family: var(--font-mono);
  color: var(--fg-1);
}

/* Goal / type cards used on onboarding (legacy alias) */

.resp-type-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px;
  border-radius: var(--r-lg);
  cursor: pointer;
  border: 1.5px solid var(--border-default);
  background: var(--surface);
  color: var(--fg-2);
  font-family: inherit;
  text-align: left;
  transition: border-color .12s, background .12s, box-shadow .12s;
  width: 100%;
}

.resp-type-card:hover {
  border-color: var(--purple-300);
}

.resp-type-card--active {
  border-color: var(--purple-500);
  background: var(--purple-50);
  color: var(--purple-700);
  box-shadow: 0 0 0 4px rgba(91,47,212,.12);
}

.resp-type-card strong {
  color: inherit;
  font-size: 14px;
}

/* ════════════════════════════════════════════════
   UX audit: activation, quick actions, kbd, a11y
════════════════════════════════════════════════ */

.activation-card {
  border: 1px solid var(--purple-100);
  background: linear-gradient(180deg, var(--purple-50) 0%, var(--surface) 48%);
  margin-bottom: 18px;
}

.activation-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.activation-sub {
  font-size: 13px;
  color: var(--fg-2);
  margin: 4px 0 0;
  line-height: 1.5;
}

.activation-progress {
  height: 6px;
  background: var(--border-subtle);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 14px;
}

.activation-progress-fill {
  height: 100%;
  background: var(--purple-500);
  border-radius: 99px;
  transition: width .3s;
}

.activation-next {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--purple-200);
  border-radius: var(--r-md);
}

.activation-next-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: var(--purple-50);
  color: var(--purple-600);
  display: grid;
  place-items: center;
}

.activation-next-body {
  flex: 1;
  min-width: 0;
}

.activation-next-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-1);
}

.activation-next-detail {
  font-size: 12.5px;
  color: var(--fg-3);
  margin-top: 2px;
}

.activation-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.activation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activation-list--compact {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.activation-step {
  display: flex;
  align-items: center;
  gap: 10px;
}

.activation-step.is-next .activation-label {
  color: var(--purple-700);
  font-weight: 600;
}

.activation-check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--border-default);
  background: var(--surface);
  color: var(--purple-600);
  font-size: 11px;
  font-weight: 700;
}

.activation-step.is-done .activation-check {
  background: var(--success-500);
  border-color: var(--success-500);
  color: #fff;
}

.activation-num {
  line-height: 1;
  color: var(--fg-3);
}

.activation-label {
  font-size: 13px;
  color: var(--fg-2);
}

.activation-step.is-done .activation-label {
  color: var(--fg-3);
  text-decoration: line-through;
}

.activation-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--purple-700);
  font-weight: 600;
  text-decoration: none;
  text-align: left;
}

.activation-link:hover {
  text-decoration: underline;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.quick-action-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms, box-shadow 120ms;
}

.quick-action-card:hover {
  border-color: var(--purple-200);
  box-shadow: var(--shadow-md);
}

.quick-action-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: var(--purple-50);
  color: var(--purple-600);
  display: grid;
  place-items: center;
}

.dash-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  margin-bottom: 22px;
}

/* ── Dashboard home (enhanced) ── */

.dash-home {
  width: 100%;
  max-width: none;
  min-width: 0;
}

/* Greeting lives in the page body, not the shared header (identity +
   global utilities only) - first thing under it, name only, no subtitle. */

.dash-welcome {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 650;
  color: var(--fg-1);
}

/* Dismiss control: ghost × inside the card header — never a boxed button outside */

.dash-panel-dismissable {
  position: relative;
  overflow: hidden;
}

.dash-panel-dismiss {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-3);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  line-height: 1;
}

.dash-panel-dismiss:hover {
  background: rgba(15, 15, 20, .06);
  color: var(--fg-1);
}

.dash-panel-dismiss:focus-visible {
  outline: 2px solid var(--purple-400);
  outline-offset: 1px;
}

/* Header row used across dismissable panels */

.dash-panel-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.dash-panel-bar:last-child {
  margin-bottom: 0;
}

.dash-panel-bar-main {
  flex: 1;
  min-width: 0;
}

.dash-panel-bar--flush {
  margin-bottom: 0;
}

/* Keep strip/banner/pipeline dismiss as the last flex item */

.dash-proof-strip .dash-panel-dismiss,
.dash-coverage-banner .dash-panel-dismiss,
.dash-pipeline-card .dash-panel-dismiss {
  margin-left: 4px;
}

.dash-restore-panels {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  border: none;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-3);
  cursor: pointer;
}

.dash-restore-panels:hover {
  color: var(--purple-700);
}

.dash-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.dash-status-line {
  font-size: 13.5px;
  color: var(--fg-3);
  margin-top: 4px;
  line-height: 1.45;
  max-width: 52ch;
}

.dash-status-org {
  color: var(--fg-3);
}

.dash-hero-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dash-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin: -8px 0 16px;
}

.dash-controls-row .dash-welcome {
  margin: 0;
}

.dash-controls-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.dash-range-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  gap: 2px;
}

.dash-range-btn {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-3);
  padding: 5px 10px;
  border-radius: 6px;
  text-decoration: none;
}

.dash-range-btn.is-active {
  background: var(--surface);
  color: var(--fg-1);
  box-shadow: var(--shadow-sm);
}

.dash-range-btn:hover {
  color: var(--fg-1);
}

.dash-primary-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.dash-primary-cta.tone-attention {
  border-color: var(--error-100);
  background: linear-gradient(90deg, var(--error-50) 0%, var(--surface) 55%);
}

.dash-primary-cta.tone-setup {
  border-color: var(--purple-200);
  background: linear-gradient(90deg, var(--purple-50) 0%, var(--surface) 55%);
}

.dash-primary-cta-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.dash-primary-cta-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: var(--purple-50);
  color: var(--purple-600);
  display: grid;
  place-items: center;
}

.dash-primary-cta-label {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--fg-1);
}

.dash-primary-cta-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.stat-card--attention {
  border-color: var(--error-100);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--error-500) 12%, transparent);
}

.stat-card .icon-tile--amber {
  background: #fffbeb;
  color: #d97706;
}

.stat-card .icon-tile--green {
  background: var(--purple-50);
  color: var(--purple-700);
}

.stat-card .icon-tile--purple {
  background: var(--purple-50);
  color: var(--purple-600);
}

.stat-card .icon-tile--indigo {
  background: #eef2ff;
  color: #4338ca;
}

.dash-spark {
  width: 64px;
  height: 22px;
  margin-top: 8px;
  display: block;
}

.stat-card .delta-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
}

.stat-card .delta-pill.delta-up {
  color: var(--success-700, #047857);
  background: var(--success-50, #ecfdf5);
}

.stat-card .delta-pill.delta-dn {
  color: var(--error-600, #dc2626);
  background: var(--error-50, #fef2f2);
}

.stat-card .stat-sub {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 4px;
}

/* Share this win hero */

.dash-share-win {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--purple-50) 0%, var(--surface) 55%);
  border: 1px solid var(--purple-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.dash-share-win-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--purple-700);
}

.dash-share-win-body {
  min-width: 0;
}

.dash-share-win-quote {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-1);
  line-height: 1.45;
  margin: 0 0 8px;
}

.dash-share-win-rating {
  font-size: 14px;
  color: var(--star, #f5a623);
  letter-spacing: 1px;
  line-height: 1;
  margin: 0 0 2px;
}

.dash-share-win-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.dash-share-win-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-1);
}

.dash-share-win-role {
  font-size: 12px;
  color: var(--fg-3);
}

.dash-share-win-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.dash-share-win-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 2px;
  border-top: 1px solid color-mix(in oklab, var(--purple-200) 55%, transparent);
}

/* Proof health + coverage + playbook */

.dash-health-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}

.dash-health-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
}

.dash-health-alert.tone-warn {
  border-color: var(--error-100);
  background: var(--error-50);
}

.dash-health-alert.tone-info {
  border-color: var(--purple-100);
  background: var(--purple-50);
}

.dash-health-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--fg-2);
}

.dash-health-alert.tone-warn .dash-health-icon {
  color: var(--error-600);
}

.dash-health-body {
  flex: 1;
  min-width: 0;
}

.dash-health-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--fg-1);
}

.dash-health-text {
  font-size: 12.5px;
  color: var(--fg-2);
  margin-top: 2px;
  line-height: 1.45;
}

.dash-health-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.dash-coverage-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px dashed var(--purple-300);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--fg-2);
  font-size: 13px;
  transition: border-color 120ms, background 120ms;
}

.dash-coverage-banner:hover {
  border-color: var(--purple-500);
  background: var(--purple-50);
  color: var(--fg-1);
}

.dash-coverage-cta {
  font-weight: 700;
  color: var(--purple-700);
  white-space: nowrap;
}

.dash-playbook {
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}

.dash-playbook-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-1);
}

.dash-playbook-sub {
  font-size: 12.5px;
  color: var(--fg-3);
  margin-top: 2px;
  line-height: 1.45;
}

.dash-playbook-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.dash-playbook-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-soft);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-1);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}

.dash-playbook-chip:hover {
  border-color: var(--purple-300);
  background: var(--purple-50);
  color: var(--purple-800);
}

.activity-row--actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.activity-row--actions:last-child {
  border-bottom: none;
}

.activity-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.activity-row-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.activity-approve-btn {
  white-space: nowrap;
}

.dash-proof-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--fg-2);
}

.dash-proof-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.dash-proof-item i {
  color: var(--fg-3);
}

.dash-proof-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--purple-600);
  text-decoration: none;
  margin-left: 4px;
}

.dash-proof-link:hover {
  text-decoration: underline;
}

.dash-proof-analytics {
  margin-left: auto;
}

.dash-pipeline-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms, box-shadow 120ms;
}

.dash-pipeline-card:hover {
  border-color: var(--purple-200);
  box-shadow: var(--shadow-sm);
}

.dash-pipeline-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: var(--purple-50);
  color: var(--purple-600);
  display: grid;
  place-items: center;
}

.dash-pipeline-body {
  flex: 1;
  min-width: 0;
}

.dash-pipeline-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--fg-1);
}

.dash-pipeline-meta {
  font-size: 12.5px;
  color: var(--fg-3);
  margin-top: 2px;
}

.dash-pipeline-cta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--purple-600);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.text-mute {
  color: var(--fg-3);
}

.dash-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.dash-panel-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--purple-600);
  text-decoration: none;
  margin-left: auto;
}

.dash-panel-link:hover {
  text-decoration: underline;
}

.dash-activity-tabs {
  display: inline-flex;
  gap: 4px;
}

.dash-activity-tab {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-3);
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
}

.dash-activity-tab .count {
  background: var(--purple-100);
  color: var(--purple-700);
  font-size: 11px;
  padding: 0 6px;
  border-radius: 999px;
  margin-left: 4px;
}

.dash-activity-tab.is-active {
  background: var(--purple-50);
  color: var(--purple-700);
}

.activity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border-subtle);
}

.activity-row:last-child {
  border-bottom: none;
}

.activity-row:hover {
  background: var(--bg-soft);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: var(--r-sm);
}

.activity-row-body {
  flex: 1;
  min-width: 0;
}

.activity-row-title {
  font-size: 13.5px;
  color: var(--fg-1);
}

.activity-row-meta {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-stars {
  font-size: 12px;
  flex-shrink: 0;
}

.dash-form-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  text-decoration: none;
  color: inherit;
}

.dash-form-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--purple-50);
  color: var(--purple-600);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.dash-form-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-form-status {
  margin-top: 3px;
}

.dash-form-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-bottom: 14px;
}

.dash-form-metric {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.dash-form-metric .lbl {
  color: var(--fg-2);
}

.dash-form-metric .val {
  font-weight: 700;
  color: var(--fg-1);
  font-feature-settings: 'tnum';
}

.dash-form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dash-form-others {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--purple-600);
  text-decoration: none;
}

.dash-share-section {
  margin-bottom: 22px;
}

.dash-share-section-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--fg-3);
  line-height: 1.35;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-share-section-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dash-share-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dash-share-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--purple-400);
  min-height: 100%;
  transition: border-color 120ms, box-shadow 120ms;
}

.dash-share-card:hover {
  border-color: var(--purple-200);
  box-shadow: var(--shadow-md);
}

.dash-share-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dash-share-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-2);
  background: var(--bg-soft);
  border-radius: 999px;
  padding: 3px 8px;
}

.dash-share-pill--fav {
  color: var(--purple-700);
  background: var(--purple-50);
}

.dash-share-rating {
  font-size: 12px;
  color: #f5a623;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.dash-share-quote {
  margin: 0;
  font-size: 13.5px;
  color: var(--fg-1);
  line-height: 1.5;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dash-share-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.dash-share-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-share-co {
  font-size: 11.5px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-share-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 2px;
}

.dash-share-card-actions .btn {
  flex: 1;
  justify-content: center;
}

.dash-tips {
  margin-top: 8px;
  margin-bottom: 12px;
}

.dash-tips-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.dash-tips-dismiss-all {
  background: none;
  border: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-3);
  cursor: pointer;
}

.dash-tips-dismiss-all:hover {
  color: var(--fg-1);
}

.dash-tips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dash-tip-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}

.dash-tip-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: var(--purple-50);
  color: var(--purple-600);
  display: grid;
  place-items: center;
}

.dash-tip-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--fg-1);
}

.dash-tip-body {
  font-size: 12.5px;
  color: var(--fg-3);
  margin-top: 2px;
  line-height: 1.4;
}

.kbd-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(15,15,20,.45);
  display: grid;
  place-items: center;
  padding: 20px;
}

.kbd-help-panel {
  width: min(420px, 100%);
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  padding: 18px 20px;
}

.kbd-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.kbd-help-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kbd-help-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--fg-2);
}

.kbd-help-note {
  font-size: 12px;
  color: var(--fg-3);
  margin: 14px 0 0;
}

/* Workspace switcher (sidebar) */

.workspace-switcher {
  position: relative;
  margin-top: 10px;
}

.workspace-switcher--static {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12.5px;
  color: var(--fg-2);
}

.workspace-switcher-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--sb-border);
  background: rgba(255,255,255,.05);
  cursor: pointer;
  color: var(--sb-text);
  text-align: left;
}

.workspace-switcher-btn:hover {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
}

.workspace-switcher-av {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.workspace-switcher-name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace-switcher-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
}

.workspace-switcher-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--fg-1);
  text-align: left;
  font: inherit;
}

.workspace-switcher-item:hover {
  background: var(--bg-soft);
}

.workspace-switcher-item.is-active {
  background: var(--purple-50);
  color: var(--purple-700);
}

/* Notifications settings */

.dash-notify-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  cursor: pointer;
}

.dash-notify-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-1);
}

.dash-notify-desc {
  font-size: 13px;
  color: var(--fg-3);
  margin-top: 3px;
  line-height: 1.45;
  max-width: none;
  /* Full copy must wrap — never ellipsis-truncate settings help text */
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.dash-notify-copy {
  min-width: 0;
  flex: 1 1 auto;
}

/* Checkbox-driven switch — same visual language as .pc-switch (widget builder)
   so on/off settings look identical everywhere. */

.dash-notify-toggle {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 2px;
  border: none;
  background: var(--border-default);
  transition: background 150ms;
  position: relative;
  cursor: pointer;
}

.dash-notify-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  transition: transform 150ms;
  box-shadow: var(--shadow-xs);
}

.dash-notify-toggle:checked {
  background: var(--purple-600);
}

.dash-notify-toggle:checked::after {
  transform: translateX(14px);
}

.dash-notify-toggle:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 2px;
}

.pc-kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-soft);
  border: 1px solid var(--border-default);
  border-radius: 5px;
  padding: 1px 6px;
}

/* ── Testimonials list | permanent separator | quick view ── */

.testimonial-detail-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  /* Soft canvas when empty ("Select a testimonial"); filled pane is still white via .testimonial-pane */
  background: var(--canvas);
  border-left: none;
  padding: 0;
  box-sizing: border-box;
}

.testimonial-detail-pane > .empty-state {
  flex: 1 1 auto;
  max-width: none;
  margin: 0;
  justify-content: center;
  background: transparent;
}

.testimonial-detail-mobile-bar {
  display: none;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background: var(--surface);
  gap: 8px;
}

.testimonial-pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  /* Edge-to-edge in the detail column — border-radius only if needed */
  background: var(--surface);
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

/* ── Quick view spacing system ────────────────────────────────────────────
   H-pad: 14px · Section gap: 14px · Label→body: 6px
   Q&A: prompt→text 3px · items 8px
*/

.testimonial-pane-head {
  flex-shrink: 0;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
}

.testimonial-pane-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.testimonial-pane-footer {
  flex-shrink: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface);
}

/* Identity header */

.testimonial-pane-identity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  margin: 0;
}

.testimonial-pane-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--purple-100);
  color: var(--purple-700);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}

.testimonial-pane-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.testimonial-pane-identity-text {
  min-width: 0;
  flex: 1;
}

.testimonial-pane-identity-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 0;
}

.testimonial-pane-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.testimonial-pane-meta-line {
  font-size: 12.5px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  line-height: 1.3;
}

.testimonial-pane-meta-line a {
  color: inherit;
  text-decoration: none;
}

.testimonial-pane-meta-line a:hover {
  color: var(--purple-600);
}

.testimonial-pane-email-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  min-width: 0;
}

.testimonial-pane-email {
  font-size: 12.5px;
  color: var(--fg-3);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  line-height: 1.3;
}

.testimonial-pane-email:hover {
  color: var(--purple-600);
}

.testimonial-pane-email--empty {
  display: none;
}

.testimonial-pane-status-stars {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.testimonial-pane-expand {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.testimonial-pane-stars {
  display: inline-flex;
  gap: 1px;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  letter-spacing: 0.02em;
}

.testimonial-pane-stars--header {
  font-size: 18px;
  gap: 2px;
}

.testimonial-pane-stars .is-on {
  color: var(--accent-500);
}

.testimonial-pane-stars .is-off {
  color: var(--border-default);
}

/* Sections inside scroll body — gap handled by .testimonial-pane-scroll */

.testimonial-pane-section {
  margin: 0;
  padding: 0;
}

.testimonial-pane-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 2px;
  /* Proof / Combined quote label → body */
  min-height: 0;
  line-height: 1.2;
}

.testimonial-pane-section-head h2,
.testimonial-pane-section-head h3,
.testimonial-pane-section-head .testimonial-pane-section-label {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

/* Media + quote body */

.testimonial-pane-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0E0E12;
  margin: 0 0 8px;
}

/* Tools are 28px; don't force extra head height when slot is empty/hidden */

.testimonial-pane-section-head:has(.pane-proof-tools-slot) {
  min-height: 0;
}

.testimonial-pane-video video {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.testimonial-pane-video--empty {
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  color: var(--fg-3);
  font-size: 13px;
}

.testimonial-pane-quote {
  margin: 0;
  padding: 0;
}

/*
  pre-line MUST live only on the content node (.pc-quote-body / .testimonial-answer-body).
  Putting it on the wrapper preserves pretty-printed HTML newlines as blank lines
  above/below the answer — which looked like CSS gaps that refused to shrink.
*/

.testimonial-pane-quote-text {
  margin: 0;
  padding: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-1);
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  white-space: normal;
}

.testimonial-pane-quote-text .pc-quote-body {
  white-space: pre-line;
}

/* Proof tools (edit / highlight) */

.pane-proof-tools-slot {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.pane-proof-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.pane-proof-tool-form {
  margin: 0;
  display: inline-flex;
}

.pane-proof-tool {
  width: 28px !important;
  height: 28px !important;
  color: var(--fg-3);
  border: 1px solid transparent;
  background: transparent;
}

.pane-proof-tool:hover {
  color: var(--purple-700);
  background: var(--purple-50);
  border-color: var(--purple-100);
}

.pane-proof-tool i,
.pane-proof-tool svg {
  width: 14px !important;
  height: 14px !important;
}

.pane-quote-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
  justify-content: flex-end;
}

.pane-quote-actions form {
  margin: 0;
}

.pane-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Combined quote under multi-prompt Q&A — keep close to last answer */

.testimonial-pane-combined {
  margin: 4px 0 0;
  padding: 4px 0 0;
  border-top: 1px solid var(--border-subtle);
}

.testimonial-pane-combined-head {
  margin: 0 0 2px;
}

/* Proof heading → single-prompt quote / multi Q&A */

.testimonial-pane-section--proof > .testimonial-pane-section-head {
  margin-bottom: 2px;
}

.testimonial-pane-section--proof > .testimonial-pane-quote,
.testimonial-pane-section--proof > .testimonial-pane-quote--answers {
  margin-top: 0;
}

.testimonial-pane-section-label .pane-info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  padding: 0;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-3);
  cursor: help;
  vertical-align: middle;
}

.testimonial-pane-section-label .pane-info-tip:hover,
.testimonial-pane-section-label .pane-info-tip:focus-visible {
  color: var(--purple-600);
  background: var(--purple-50);
  outline: none;
}

.testimonial-pane-section-label .pane-info-tip i,
.testimonial-pane-section-label .pane-info-tip svg {
  width: 13px !important;
  height: 13px !important;
}

/* Multi-question Q&A */

.testimonial-answers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.testimonial-answer {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.testimonial-answers > .testimonial-answer:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}

.testimonial-answer-prompt {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin: 0;
  padding: 0;
}

.testimonial-answer-prompt--combined {
  margin: 8px 0 4px !important;
}

.testimonial-answer-text {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-1);
  /* normal: avoid phantom blank lines from template indentation */
  white-space: normal;
  word-break: break-word;
  margin: 0;
  padding: 0;
}

.testimonial-answer-body {
  /* real newlines inside answer text only */
  white-space: pre-line;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  cursor: text;
  border-radius: var(--r-sm);
  outline: none;
}

.testimonial-answer-body:focus-visible {
  box-shadow: 0 0 0 2px var(--purple-200);
}

.testimonial-answer-text--quote {
  font-size: 14.5px;
  font-weight: 500;
}

.testimonial-answers--single .testimonial-answer-prompt {
  margin-bottom: 0;
}

.testimonial-answer-actions {
  margin: 0;
  padding: 0;
}

.testimonial-answer-hint {
  font-size: 12.5px;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.testimonial-answer-hint svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.testimonial-answer-hint--static {
  margin: 4px 0 0;
  display: block;
  line-height: 1.4;
}

.testimonial-answer-text .pc-quote-highlight {
  background: #FDE68A;
  background: color-mix(in srgb, #F5A623 42%, #FFF7D6);
  color: inherit;
  border-radius: 0.2em;
  padding: 0 0.15em;
  font-weight: 700;
  box-shadow: inset 0 -0.12em 0 color-mix(in srgb, #F5A623 55%, transparent);
}

/* Details grid */

.testimonial-pane-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}

.testimonial-pane-facts--after {
  margin: 0;
}

.testimonial-pane-fact {
  padding: 10px 12px;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  min-width: 0;
}

.testimonial-pane-fact:nth-child(2n) {
  border-right: none;
}

.testimonial-pane-fact:nth-last-child(-n+2) {
  border-bottom: none;
}

.testimonial-pane-fact dt {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  line-height: 1.3;
}

.testimonial-pane-fact dd {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.testimonial-pane-fact dd.is-ok {
  color: var(--success-700);
}

.testimonial-pane-fact dd.is-warn {
  color: var(--warning-700);
}

/* Full detail page quote cards (not pane) */

.td-card {
  padding: 28px 30px;
  position: relative;
  margin-bottom: 14px;
}

.td-card-quote-icon,
.td-card-quote-icon svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--purple-200);
  position: absolute;
  top: 16px;
  left: 16px;
}

.td-edit-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--purple-600);
}

.td-edit-textarea {
  width: 100%;
  min-height: 140px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--fg-1);
  background: var(--surface-2);
  border: 1.5px solid var(--purple-300);
  border-radius: var(--r-md);
  padding: 14px 16px;
  outline: none;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
}

.td-edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.td-edit-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--fg-3);
}

.td-edit-btns {
  display: flex;
  gap: 8px;
}

/* Sleek single-row moderation tools */

.testimonial-pane-toolbar {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}

.testimonial-pane-action-form {
  display: flex;
  margin: 0;
  min-width: 0;
  flex: 1 1 0;
}

.testimonial-pane-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 34px;
  padding: 0 8px;
  margin: 0;
  border-radius: 9px;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--fg-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
}

.testimonial-pane-toolbar > .testimonial-pane-tool {
  flex: 1 1 0;
  min-width: 0;
}

.testimonial-pane-tool i,
.testimonial-pane-tool svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.testimonial-pane-tool:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--border-default);
  color: var(--fg-1);
}

.testimonial-pane-tool:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.testimonial-pane-tool--approve {
  background: color-mix(in oklab, var(--success-500, #12b76a) 12%, var(--surface));
  border-color: color-mix(in oklab, var(--success-500, #12b76a) 35%, var(--border-subtle));
  color: var(--success-700, #08794b);
}

.testimonial-pane-tool--approve:hover:not(:disabled) {
  background: color-mix(in oklab, var(--success-500, #12b76a) 18%, var(--surface));
  border-color: color-mix(in oklab, var(--success-500, #12b76a) 50%, var(--border-subtle));
  color: var(--success-700, #08794b);
}

.testimonial-pane-tool--reject:hover:not(:disabled) {
  background: color-mix(in oklab, var(--error-500, #d92d20) 8%, var(--surface));
  border-color: color-mix(in oklab, var(--error-500, #d92d20) 30%, var(--border-subtle));
  color: var(--error-600, #b42318);
}

.testimonial-pane-tool--share:not(:disabled) {
  color: var(--purple-700);
  border-color: color-mix(in oklab, var(--purple-500) 28%, var(--border-subtle));
  background: color-mix(in oklab, var(--purple-500) 8%, var(--surface));
}

.testimonial-pane-tool--share:hover:not(:disabled) {
  background: color-mix(in oklab, var(--purple-500) 14%, var(--surface));
  border-color: color-mix(in oklab, var(--purple-500) 40%, var(--border-subtle));
  color: var(--purple-700);
}

@media (max-width: 420px) {
  .testimonial-pane-tool span {
    display: none;
  }

  .testimonial-pane-tool {
    padding: 0;
  }
}

.testimonial-pane-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 40px 28px;
  text-align: center;
  color: var(--fg-3);
  font-size: 13.5px;
  line-height: 1.45;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* Feedback pane's "move to Testimonials" disclosure — plain <details>, styled
   to match the rest of the quick-view chrome instead of default browser markers. */

.feedback-move-disclosure {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 10px 12px;
}

.feedback-move-disclosure summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
}

.feedback-move-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--fg-2);
  margin: 10px 0;
}

.feedback-move-consent input {
  margin-top: 2px;
}

/* Create-form type picker: color-code the "→ inbox" pill so the two cards
   that converge on the same inbox (Testimonial/Review) visually match, and
   the two that diverge (Quick rating/Private feedback) read as distinct. */

.resp-type-inbox-chip {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 10.5px;
  font-weight: 700;
}

.resp-type-inbox-chip--testimonials {
  background: var(--purple-50);
  color: var(--purple-700);
}

.resp-type-inbox-chip--ratings {
  background: rgba(245,166,35,.14);
  color: var(--accent-700, #a15a00);
}

.resp-type-inbox-chip--feedback {
  background: var(--surface-sunken);
  color: var(--fg-2);
}

.inbox-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}

.inbox-switcher-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-3);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.inbox-switcher-item:hover {
  color: var(--fg-1);
}

.inbox-switcher-item.is-active {
  background: var(--surface);
  color: var(--fg-1);
  box-shadow: var(--shadow-sm);
}

.inbox-switcher-item svg {
  width: 14px;
  height: 14px;
}

.inbox-switcher-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--purple-500);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 720px) {
  .inbox-switcher-item {
    position: relative;
    padding: 0 10px;
  }

  .inbox-switcher-item > span:not(.inbox-switcher-count) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.pane-next-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.pane-next-steps-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-right: 2px;
}

.builder-chrome-preview {
  display: none;
}

.builder-chrome-more {
  position: relative;
  flex-shrink: 0;
}

.wg-mini {
  position: relative;
  overflow: hidden;
  animation: none !important;
}

.wg-mini-stage,
.wg-mini-el,
.wg-mini-el::before,
.wg-mini-el::after {
  animation: none !important;
}

.wg-mini-stage {
  position: absolute;
  inset: 10px 10px 12px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}

.wg-mini-el {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 4px 10px rgba(15, 15, 20, .1);
  position: relative;
}

.wg-mini-el::before,
.wg-mini-el::after {
  content: "";
  position: absolute;
  left: 8px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--purple-500) 32%, #ddd6f5);
}

/* Default / single quote: one card, quote bar + two lines + avatar */

.wg-mini--single .wg-mini-el:nth-child(n+2) {
  display: none;
}

.wg-mini--single .wg-mini-el:first-child::before {
  top: 10px;
  width: 18px;
  height: 10px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--purple-500) 55%, #fff);
}

.wg-mini--single .wg-mini-el:first-child::after {
  top: 26px;
  right: 14px;
  height: 4px;
  width: auto;
  box-shadow: 0 7px 0 color-mix(in srgb, var(--purple-500) 22%, #ddd6f5);
}

.wg-mini--single .wg-mini-stage::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 8px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--purple-300);
  box-shadow: 16px 3px 0 0 color-mix(in srgb, var(--purple-500) 22%, #ddd6f5),
              40px 3px 0 -3px color-mix(in srgb, var(--purple-500) 16%, #ddd6f5);
}

/* Stacked list / chat */

.wg-mini--list .wg-mini-stage {
  flex-direction: column;
  gap: 4px;
}

.wg-mini--list .wg-mini-el {
  height: auto;
}

.wg-mini--list .wg-mini-el::before {
  top: 6px;
  width: 55%;
  height: 4px;
}

.wg-mini--list .wg-mini-el::after {
  top: 13px;
  width: 78%;
  height: 3px;
  opacity: .7;
}

.wg-mini--list .wg-mini-el:nth-child(3) {
  display: none;
}

.wg-mini-id--bubble-list .wg-mini-el {
  border-radius: 10px 10px 10px 3px;
}

.wg-mini-id--bubble-list .wg-mini-el:nth-child(2) {
  align-self: flex-end;
  width: 78%;
  flex: 0 0 auto;
  height: 28px;
}

/* Social post */

.wg-mini--social_card .wg-mini-el:nth-child(n+2) {
  display: none;
}

.wg-mini--social_card .wg-mini-el:first-child::before {
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  left: 8px;
}

.wg-mini--social_card .wg-mini-el:first-child::after {
  top: 28px;
  right: 10px;
  height: 4px;
  box-shadow: 0 7px 0 color-mix(in srgb, var(--purple-500) 20%, #ddd6f5);
}

/* Carousel: three cards */

.wg-mini--carousel .wg-mini-stage {
  align-items: center;
}

.wg-mini--carousel .wg-mini-el {
  height: 62px;
}

.wg-mini--carousel .wg-mini-el:nth-child(2) {
  height: 74px;
}

.wg-mini--carousel .wg-mini-el::before {
  top: 8px;
  width: 70%;
  height: 4px;
}

.wg-mini--carousel .wg-mini-el::after {
  top: 16px;
  width: 46%;
  height: 3px;
  opacity: .65;
}

.wg-mini-id--slab-carousel .wg-mini-el {
  background:
    linear-gradient(180deg, var(--purple-200) 0 38%, #fff 38%);
}

/* Marquee ticker */

.wg-mini--marquee .wg-mini-stage {
  gap: 4px;
  align-items: center;
}

.wg-mini--marquee .wg-mini-el {
  height: 36px;
  border-radius: 6px;
  flex: 0 0 42px;
}

.wg-mini--marquee .wg-mini-el:nth-child(2) {
  flex-basis: 56px;
}

.wg-mini--marquee .wg-mini-el::before {
  top: 10px;
  width: 70%;
  height: 3px;
}

.wg-mini--marquee .wg-mini-el::after {
  display: none;
}

/* Grid */

.wg-mini--grid_embed .wg-mini-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
}

.wg-mini--grid_embed .wg-mini-el:nth-child(3) {
  grid-column: 1 / -1;
  height: auto;
}

.wg-mini--grid_embed .wg-mini-el::before {
  top: 6px;
  width: 60%;
  height: 3px;
}

.wg-mini--grid_embed .wg-mini-el::after {
  top: 12px;
  width: 80%;
  height: 3px;
  opacity: .65;
}

.wg-mini-id--testimonial-masonry .wg-mini-el:first-child {
  min-height: 28px;
}

.wg-mini-id--testimonial-masonry .wg-mini-el:nth-child(2) {
  margin-top: 8px;
}

/* Avatars */

.wg-mini--avatars .wg-mini-stage {
  align-items: center;
  justify-content: center;
  gap: 0;
}

.wg-mini--avatars .wg-mini-el {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple-100) 80%, #fff);
  margin-left: -6px;
  background: radial-gradient(circle at 35% 30%, #fff, var(--purple-200));
}

.wg-mini--avatars .wg-mini-el:first-child {
  margin-left: 0;
}

.wg-mini--avatars .wg-mini-el::before,
.wg-mini--avatars .wg-mini-el::after {
  display: none;
}

.wg-mini-id--avatars-pro .wg-mini-el {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}

/* Badge / score */

.wg-mini--badge .wg-mini-stage {
  align-items: center;
}

.wg-mini--badge .wg-mini-el:nth-child(n+2) {
  display: none;
}

.wg-mini--badge .wg-mini-el:first-child {
  flex: 0 1 78%;
  height: 28px;
  border-radius: 999px;
  background: #fff;
}

.wg-mini--badge .wg-mini-el:first-child::before {
  top: 8px;
  left: 12px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent-400, #f5a623);
}

.wg-mini--badge .wg-mini-el:first-child::after {
  top: 11px;
  left: 30px;
  width: 40%;
  height: 6px;
  border-radius: 3px;
}

.wg-mini-id--score-ring .wg-mini-el:first-child {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 999px;
  background:
    conic-gradient(var(--purple-500) 0 72%, var(--purple-100) 72% 100%);
  box-shadow: inset 0 0 0 7px #fff;
}

.wg-mini-id--score-ring .wg-mini-el:first-child::before,
.wg-mini-id--score-ring .wg-mini-el:first-child::after {
  display: none;
}

.wg-mini-id--trust-strip .wg-mini-el:nth-child(n+2) {
  display: block;
}

.wg-mini-id--trust-strip .wg-mini-stage {
  align-items: center;
  gap: 3px;
}

.wg-mini-id--trust-strip .wg-mini-el {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 999px;
}

.wg-mini-id--trust-strip .wg-mini-el:last-child {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 4px;
  width: auto;
}

/* Video */

.wg-mini--video .wg-mini-el:nth-child(n+2) {
  display: none;
}

.wg-mini--video .wg-mini-el:first-child {
  background:
    linear-gradient(160deg, var(--purple-200), var(--purple-400));
}

.wg-mini--video .wg-mini-el:first-child::before {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 0;
  background: transparent;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-40%, -50%);
  box-shadow: none;
}

.wg-mini--video .wg-mini-el:first-child::after {
  display: none;
}

/* Photo / media tiles */

.wg-mini--media_grid .wg-mini-stage {
  gap: 4px;
}

.wg-mini--media_grid .wg-mini-el {
  background:
    linear-gradient(160deg, var(--purple-100), var(--purple-300));
  border-radius: 6px;
}

.wg-mini--media_grid .wg-mini-el:nth-child(2) {
  margin-top: 8px;
}

.wg-mini--media_grid .wg-mini-el::before,
.wg-mini--media_grid .wg-mini-el::after {
  display: none;
}

.wg-mini-id--image-gallery .wg-mini-el:nth-child(1) {
  transform: rotate(-4deg);
}

.wg-mini-id--image-gallery .wg-mini-el:nth-child(3) {
  transform: rotate(5deg);
}

/* Logos */

.wg-mini--logos .wg-mini-stage {
  align-items: center;
  gap: 6px;
}

.wg-mini--logos .wg-mini-el {
  height: 14px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--purple-500) 18%, #fff);
  box-shadow: none;
}

.wg-mini--logos .wg-mini-el::before,
.wg-mini--logos .wg-mini-el::after {
  display: none;
}

/* Wall page (if ever shown in this gallery) */

.wg-mini--wall .wg-mini-stage {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  align-items: end;
}

.wg-mini--wall .wg-mini-el:nth-child(1) {
  height: 70%;
}

.wg-mini--wall .wg-mini-el:nth-child(2) {
  height: 100%;
}

.wg-mini--wall .wg-mini-el:nth-child(3) {
  height: 55%;
}

.wg-gallery-card.is-locked {
  opacity: .92;
}

.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 35;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--fg-1);
}

.mobile-nav-toggle:hover {
  background: var(--surface-hover);
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,15,20,.4);
  z-index: 40;
}

.nav-count-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--purple-500);
  flex-shrink: 0;
}

.htmx-indicator, .htmx-request .htmx-indicator-show {
  display: none;
}

.htmx-request.htmx-indicator, .htmx-request .htmx-indicator-show {
  display: inline-flex;
}

.list-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
}

.list-skeleton-row {
  height: 72px;
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--bg-soft) 25%, var(--surface-2) 50%, var(--bg-soft) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.2s ease infinite;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ════════════════════════════════════════════════
   RESPONSIVE — dashboard shell & common layouts
════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash-split {
    grid-template-columns: 1fr;
  }

  .quick-actions-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dash-share-strip {
    grid-template-columns: 1fr 1fr;
  }

  .dash-tips-grid {
    grid-template-columns: 1fr;
  }

  .dash-share-section .dash-panel-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .dash-share-section-tools {
    justify-content: space-between;
  }

  .forms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-toolbar-left .local-search-field .pc-input {
    max-width: none;
  }
}

/* Leads always wrap; keep dash subtitles readable on narrow panels */

@media (max-width: 560px) {
  .dash-share-section-sub,
  .dash-notify-desc {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .builder-step-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .builder-step-footer-left,
  .builder-step-footer-right {
    width: 100%;
    margin-left: 0;
  }

  .builder-step-footer-right {
    justify-content: stretch;
  }

  .builder-step-footer .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .invite-campaign-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .invite-campaign-title {
    flex-wrap: wrap;
  }

  /* Funnel strip: 4 steps + 3 connectors don't fit one row on phones —
     flex-wrap breaks mid-sequence (a connector stranded on its own line).
     Stack top-to-bottom instead, arrow pointing down. */

  .analytics-funnel-strip,
  .analytics-conversion {
    flex-direction: column;
  }

  .analytics-funnel-step {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding: 6px 2px;
  }

  .analytics-funnel-connector {
    flex-direction: row;
    justify-content: flex-start;
    gap: 6px;
    padding: 2px 2px 2px 4px;
  }

  .analytics-funnel-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 900px) {
  .builder-chrome-preview {
    display: inline-flex;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-shell.is-collapsed {
    grid-template-columns: 1fr;
  }

  /* .app-main is hardcoded to grid-column:2 for the desktop 232px+1fr shell.
     With only one explicit column here, that placement spills into an
     implicit auto-sized second track instead of overlapping the single 1fr
     one — auto-sizing then depends on each page's own content, so .app-main
     lands shifted right by a different amount per page (confirmed on
     Widgets/Forms/Wall of Love) instead of the reliable 0 that pages whose
     content happened to size the implicit track to ~0 got "for free". */

  .app-main {
    grid-column: 1;
  }

  .app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    width: min(280px, 86vw);
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
  }

  .app-shell.is-mobile-open .app-sidebar {
    transform: translateX(0);
    width: min(280px, 86vw);
  }

  .app-sidebar.is-collapsed {
    width: min(280px, 86vw);
    padding: 14px 12px;
  }

  .app-shell.is-mobile-open .sidebar-backdrop {
    display: block;
  }

  .mobile-nav-toggle {
    display: inline-flex;
  }

  /* The toggle is fixed at 12px/12px (40px square, right edge at 52px) — page
     titles must clear it with room to spare, otherwise "Dashboard" renders
     partly behind the button. */

  .page-header {
    padding-left: 56px;
  }

  /* Long titles ellipsize instead of wrapping the search/notification/avatar
     cluster onto its own line — a forced wrap (flex-basis:100% on
     .page-header-text) used to do that even for short titles like
     "Dashboard", and as a side effect shrank the title's row to its own
     26px height instead of the actions row's 36px, throwing off its
     vertical center against the (position:fixed) hamburger button. */

  .page-header-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-main:has(.testimonial-layout) > .page-header,
  .app-main:has(.wall-layout) > .page-header {
    padding-left: 68px;
  }

  .sidebar-collapse-btn {
    display: none !important;
  }

  /* Mobile drawer is always expanded: show labels, hide mark-only / collapse-only bits.
     Scope to .sidebar-label / .sidebar-icon-only — never blanket [x-show] (breaks Alpine). */

  .app-sidebar .sidebar-label {
    display: revert !important;
  }

  .app-sidebar .sidebar-icon-only {
    display: none !important;
  }

  .app-sidebar.is-collapsed .nav-item {
    justify-content: flex-start;
    padding: 9px 12px;
  }

  .app-sidebar.is-collapsed .nav-count {
    display: inline-flex !important;
  }

  /* Testimonials: list/detail swap */

  .testimonial-layout {
    grid-template-columns: 1fr !important;
  }

  .testimonial-detail-pane {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none !important;
    border-left: none !important;
    background: var(--surface-2);
  }

  .testimonial-layout.is-detail-open .testimonial-detail-pane {
    display: block !important;
  }

  /* !important: .testimonial-list-col carries an inline style="display:flex"
     (list.html), which otherwise outranks this rule regardless of source order. */

  .testimonial-layout.is-detail-open .testimonial-list-col {
    display: none !important;
  }

  .testimonial-detail-mobile-bar {
    display: flex !important;
    align-items: center;
  }

  .testimonial-filter-row {
    padding: 12px 14px 10px;
    gap: 8px;
  }

  .testimonial-bulk-row {
    padding: 8px 14px 12px;
  }

  .settings-tabs {
    overflow: visible;
    flex-wrap: wrap;
  }

  .billing-plans-grid {
    grid-template-columns: 1fr !important;
  }

  .billing-custom-band {
    grid-template-columns: 1fr !important;
  }

  .billing-custom-band-aside {
    border-left: none !important;
    border-top: 1px solid var(--border-subtle);
  }

  .billing-usage-grid {
    grid-template-columns: 1fr !important;
  }

  .billing-current-stats {
    grid-template-columns: 1fr !important;
  }

  .billing-current-stat {
    border-right: none !important;
    border-bottom: 1px solid var(--border-subtle);
  }

  .billing-current-stat:last-child {
    border-bottom: none;
  }

  .billing-current-actions {
    width: 100%;
  }

  .settings-danger-row {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-danger-row .btn {
    width: 100%;
  }

  /* Analytics: tabs scroll horizontally, header row stacks tabs/controls */

  .analytics-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .analytics-header-row > nav {
    width: 100%;
  }

  .analytics-header-row > nav > .section-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    border-bottom: none;
  }

  .analytics-controls {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 10px 0 10px;
    border-top: none;
  }

  /* Tables scroll horizontally instead of blowing the layout */

  .invite-table,
  .analytics-table-wrap,
  .pc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modals fill more of the phone width */

  .modal-content,
  .modal-content.modal-sm,
  .modal-content.modal-lg,
  .modal-content:has(.invite-wizard),
  .modal-content:has(.share-channels),
  .modal-content:has(.share-testimonial),
  .modal-content:has(.share-studio),
  .modal-content:has(.widget-gallery-modal) {
    max-width: calc(100vw - 24px);
    margin: 12px;
  }

  .modal-body {
    padding: 20px 16px;
  }

  .invite-wizard-head {
    padding: 16px 16px 12px;
  }

  .invite-wizard-scroll {
    padding: 14px 16px;
  }

  .invite-wizard-footer {
    padding: 12px 16px;
  }

  /* Builder chrome wraps actions cleanly */

  .builder-chrome {
    padding: 10px 12px;
    gap: 10px;
  }

  .builder-chrome-name {
    max-width: none;
    flex: 1 1 140px;
  }

  .builder-chrome-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .builder-steps-compact {
    width: 100%;
    justify-content: center;
  }

  /* Wall of Love + widget builder: stack config over preview */

  .wall-layout,
  .wb-body {
    flex-direction: column;
    overflow: auto;
  }

  .wall-config,
  .wb-config {
    width: 100%;
    max-height: min(46vh, 420px);
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }

  .wall-preview-col,
  .wb-preview {
    flex: 1 1 auto;
    min-height: 48vh;
  }

  .wall-preview-frame,
  .wb-preview-frame {
    padding: 16px 12px 24px;
  }

  .wall-preview-canvas {
    padding: 20px 14px;
  }

  /* Form builder: steps horizontal, hide live preview, editor full width.
     Keep overflow on #tab-panel (not .builder-body) so Brand never page-scrolls. */

  .builder-body {
    flex-direction: column;
    overflow: hidden;
  }

  .builder-steps-nav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding: 10px 12px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .builder-steps-label {
    display: none;
  }

  .builder-steps-list {
    flex-direction: row;
    gap: 6px;
    min-width: -moz-max-content;
    min-width: max-content;
  }

  .builder-step {
    width: auto;
    padding: 8px 10px;
    flex-direction: column;
    gap: 6px;
    min-width: 72px;
    text-align: center;
  }

  .builder-step-label {
    font-size: 12px;
  }

  .builder-editor {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    min-height: 0;
    width: 100%;
    padding: 18px 16px 16px;
    overflow: hidden;
  }

  .builder-editor #tab-panel {
    overflow: auto;
    overscroll-behavior: contain;
    contain: paint;
  }

  .builder-preview {
    display: none;
  }

  .form-card-name,
  .form-card-meta {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .stat-card {
    padding: 14px;
  }

  .stat-card .val {
    font-size: 22px;
  }

  .quick-actions-grid {
    grid-template-columns: 1fr;
  }

  .app-main-body {
    padding: 14px 12px !important;
  }

  .page-header {
    padding: 14px 12px 16px 56px;
  }

  .forms-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-toolbar {
    gap: 10px;
    margin-bottom: 14px;
    flex-direction: column;
    align-items: stretch;
  }

  .page-toolbar-left,
  .page-toolbar-actions {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .page-toolbar-actions {
    justify-content: stretch;
  }

  .page-toolbar-actions .btn-primary {
    width: 100%;
  }

  .page-toolbar-left .local-search,
  .page-toolbar-left .local-search-field,
  .page-toolbar-left .local-search-field .pc-input {
    width: 100%;
    max-width: none;
  }

  .forms-section-tabs,
  .section-tabs {
    max-width: 100%;
  }

  .page-back-row {
    flex-wrap: wrap;
  }

  .dash-share-strip {
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .dash-primary-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .dash-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .dash-hero-controls {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .dash-share-win-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .dash-share-win-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }

  .dash-health-alert {
    flex-direction: column;
  }

  .activity-row--actions {
    flex-direction: column;
    align-items: stretch;
  }

  .activity-row-side {
    justify-content: flex-end;
  }

  .analytics-stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .segmented {
    flex-wrap: wrap;
  }

  .btn {
    max-width: 100%;
  }

  /* Auth / onboarding */

  .auth-topbar {
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .auth-center {
    padding: 16px 14px 32px;
  }

  .auth-card {
    width: 100%;
    max-width: 100%;
  }

  .auth-panel {
    padding: 18px 16px;
  }

  .ob-step-label {
    display: none;
  }

  .ob-step + .ob-step::before {
    width: 14px;
  }

  .ob-card,
  .ob-card--wide {
    max-width: 100%;
  }

  .ob-panel-body,
  .ob-brand-form {
    padding: 18px 16px;
  }

  .ob-actions {
    padding: 14px 16px;
    flex-direction: column;
    align-items: stretch;
  }

  .ob-actions-start,
  .ob-actions-end {
    width: 100%;
  }

  .ob-actions-end {
    margin-left: 0;
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .ob-actions .btn,
  .ob-actions .btn-primary,
  .ob-skip {
    width: 100%;
    justify-content: center;
  }

  .ob-brand-layout {
    grid-template-columns: 1fr;
  }

  .ob-brand-form {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .ob-brand-preview-col {
    padding: 16px;
  }

  .ob-share-actions {
    grid-template-columns: 1fr;
  }

  .ob-link-box {
    flex-direction: column;
  }

  /* Paywall banner stacks */

  .paywall-banner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
}

@media (max-width: 420px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .analytics-stat-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-filter-row {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Skip to content ──
   Off-screen until focused, then pinned top-left above all chrome. */

.skip-link {
  /* fixed, not absolute: it then contributes nothing to document scroll size,
     so it can never widen the page while parked off-screen. */
  position: fixed;
  left: 8px;
  top: -60px;
  z-index: 300;
  padding: 10px 16px;
  background: var(--purple-600);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: var(--r-sm);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: top 120ms var(--ease-enter);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* Programmatic focus target — never show a ring on the region itself. */

#main-content:focus {
  outline: none;
}

/* ── Error hero — the full-page 403 / 404 / 500 treatment ──
   These are pages a customer can land on cold, so they get wayfinding instead
   of a dead end. Shared chrome lives in templates/error_hero.html; each error
   template fills in the copy. Same token set as the rest of the app, and
   deliberately self-contained — they render when the app is already degraded,
   so no dashboard or auth layout deps. */

.errhero-shell {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
}

/* Ambient gradient wash. Purely decorative — pointer-events off so it can
   never swallow a click on the CTAs beneath it. */

.errhero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.errhero-blob-1 {
  top: -160px;
  left: -140px;
  width: 520px;
  height: 520px;
  background: var(--purple-500);
  opacity: .22;
  animation: errhero-drift 16s ease-in-out infinite;
}

.errhero-blob-2 {
  bottom: -180px;
  right: -120px;
  width: 460px;
  height: 460px;
  background: var(--accent-500);
  opacity: .16;
  animation: errhero-drift-2 19s ease-in-out infinite;
}

@keyframes errhero-drift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }

  50%      {
    transform: translate(24px, -22px) scale(1.06);
  }
}

@keyframes errhero-drift-2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }

  50%      {
    transform: translate(-28px, 20px) scale(1.08);
  }
}

@keyframes errhero-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to   {
    opacity: 1;
    transform: translateY(0);
  }
}

.errhero-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 24px 32px;
}

.errhero-header .logo-lockup {
  height: 26px;
  width: auto;
}

.errhero-brand {
  display: inline-flex;
  color: var(--fg-1);
  text-decoration: none;
}

.errhero-main {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 32px 80px;
}

.errhero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 20px;
}

.errhero-code {
  font-size: clamp(128px, 22vw, 248px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
  background: linear-gradient(135deg, var(--purple-400), var(--purple-700));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 12px 30px rgba(91,47,212, .22));
}

.errhero-copy {
  max-width: 520px;
  margin-top: 12px;
}

.errhero-heading {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--fg-1);
  margin: 0 0 12px;
}

.errhero-message {
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}

.errhero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

/* Reuse the app's .btn component, sized up to hold its own under the numeral —
   the default 38px control reads undersized at this scale. */

.errhero-actions .btn {
  height: 44px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--r-md);
}

.errhero-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: center;
  align-items: center;
  margin-top: 36px;
  font-size: 13px;
  color: var(--text-mute);
}

.errhero-jump a {
  font-weight: 600;
  color: var(--purple-600);
  text-decoration: none;
}

.errhero-jump a:hover {
  text-decoration: underline;
}

.errhero-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 32px 28px;
  font-size: 12px;
  color: var(--text-mute);
}

.errhero-footer a {
  font-weight: 600;
  color: var(--purple-600);
}

/* Staggered entrance for the main column. */

.errhero-rise {
  animation: errhero-rise .5s ease both;
}

.errhero-rise-2 {
  animation: errhero-rise .5s ease .08s both;
}

.errhero-rise-3 {
  animation: errhero-rise .5s ease .16s both;
}

.errhero-rise-4 {
  animation: errhero-rise .5s ease .24s both;
}

/* Decorative testimonial cards floating at the edges — atmosphere only,
   hidden from assistive tech and dropped below 1100px where they'd collide
   with the centred column. */

.errhero-decor {
  position: absolute;
  width: 300px;
  opacity: .5;
  pointer-events: none;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 16px;
  text-align: left;
}

.errhero-decor-1 {
  top: 11%;
  left: 5%;
  transform: rotate(-7deg);
}

.errhero-decor-2 {
  bottom: 9%;
  right: 5%;
  transform: rotate(6deg);
}

.errhero-decor-stars {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--star);
}

.errhero-decor-quote {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-1);
  margin: 8px 0 14px;
}

.errhero-decor-who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.errhero-decor-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--purple-100);
  color: var(--purple-700);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.errhero-decor-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-1);
}

.errhero-decor-role {
  font-size: 11.5px;
  color: var(--text-mute);
}

@media (max-width: 1100px) {
  .errhero-decor {
    display: none;
  }
}

@media (max-width: 640px) {
  .errhero-header {
    padding: 20px;
  }

  .errhero-main {
    padding: 16px 20px 56px;
  }

  .errhero-actions .btn {
    width: 100%;
  }
}

/* The blobs drift forever; honour a reduced-motion preference. */

@media (prefers-reduced-motion: reduce) {
  .errhero-blob-1,
  .errhero-blob-2,
  .errhero-rise,
  .errhero-rise-2,
  .errhero-rise-3,
  .errhero-rise-4 {
    animation: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.isolate {
  isolation: isolate;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-grow {
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.border-collapse {
  border-collapse: collapse;
}

.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-2 {
  --tw-translate-y: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize {
  resize: both;
}

.flex-wrap {
  flex-wrap: wrap;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-wrap {
  text-wrap: wrap;
}

.rounded {
  border-radius: 0.25rem;
}

.border {
  border-width: 1px;
}

.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}

.font-display {
  font-family: Open Sans, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.underline {
  text-decoration-line: underline;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-75 {
  transition-duration: 75ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\[cur_start\:cur_end\] {
  cur_start: cur end;
}

.\[g0\:g1\] {
  g0: g1;
}

.\[i\:j\] {
  i: j;
}

.\[local_hs\:local_he\] {
  local_hs: local he;
}

.\[old_s\:old_e\] {
  old_s: old e;
}

.\[s0\:e0\] {
  s0: e0;
}

.\[s1\:e1\] {
  s1: e1;
}

.\[s\:e\] {
  s: e;
}

.\[start\:end\] {
  start: end;
}

.\[trial_s\:trial_e\] {
  trial_s: trial e;
}

.\[win_start\:win_end\] {
  win_start: win end;
}

/* ── One-off utilities not in Tailwind ── */

/* Pattern library (locked tokens — use these, not raw hex)
   Color: --purple-500 #5B2FD4 (product), org accent is independent (#7C5CFF default)
   Type: Open Sans; page titles pc-h2/pc-h3; body 14; help 12.5
   Spacing: 8/10/12/16; cards r-md + shadow-xs
   Components: .btn .pc-input .filter-chip .badge .pc-panel .stat-card
   Voice: Form type, Layout, response, rating, feedback; Requests stays Requests
*/

.dash-hero {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.dash-hero-text {
  min-width:0;
  flex:1 1 auto;
}

.dash-greeting {
  margin:0;
  font-size:var(--small-size);
  font-weight:500;
  color:var(--fg-2);
  line-height:1.3;
}

.dash-status-line {
  margin:2px 0 0;
  font-size:var(--lead-size);
  font-weight:400;
  color:var(--fg-3);
  line-height:1.4;
}

.dash-hero-controls {
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.testimonial-status-filters {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.testimonial-filter-divider {
  width: 1px;
  height: 22px;
  background: var(--border-subtle);
  flex-shrink: 0;
  margin: 0 2px;
}

.filter-chip-count {
  opacity: .7;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.filter-chip.active .filter-chip-count {
  opacity: .85;
}

.testimonial-status-filters {
  display: inline-flex;
  flex-shrink: 0;
}

.testimonial-filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  white-space: nowrap;
}

.testimonial-filter-option > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonial-filter-option-count {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
  flex-shrink: 0;
  white-space: nowrap;
}

.testimonial-filter-option.is-selected .testimonial-filter-option-count {
  color: inherit;
  opacity: .85;
}

/* -- UX roadmap �1��5: density, mobile, success, inbox nav, form cards -- */

.pc-success-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--success-500, #22c55e);
  background: var(--success-50, #f0fdf4);
  color: var(--fg-1);
}

.pc-success-banner-icon {
  color: var(--success-600, #16a34a);
  flex-shrink: 0;
}

.pc-success-banner-title {
  font-weight: 700;
  font-size: 14px;
}

.pc-success-banner-msg {
  font-size: 13px;
  color: var(--fg-2);
  margin-top: 2px;
  line-height: 1.45;
}

.pc-success-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ── Modern dashboard: compact even cards ── */

.dash-home--modern {
  --dash-gap: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--dash-gap);
}

.dash-home--modern > * {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.dash-home--modern .dash-controls-row {
  margin: 0;
  align-items: center;
}

.dash-home--modern .dash-welcome {
  font-size: 15px;
}

.dash-home--modern .dash-status-line {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.3;
  max-width: 64ch;
}

.dash-home--modern .dash-stat-grid {
  gap: var(--dash-gap);
  margin-bottom: 0;
  align-items: stretch;
}

.dash-home--modern .stat-card.dash-kpi {
  padding: 12px 12px 10px;
  min-height: 124px;
  height: 100%;
  gap: 0;
}

.dash-home--modern .dash-kpi .lbl {
  margin: 0;
  font-size: 11.5px;
}

.dash-home--modern .dash-kpi .val {
  font-size: 26px;
}

.dash-home--modern .dash-kpi .val-row {
  min-height: 28px;
  margin-top: 4px;
}

.dash-home--modern .dash-kpi .stat-sub {
  margin-top: auto;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-home--modern .pc-panel {
  padding: 14px 16px;
}

.dash-home--modern .dash-journey {
  padding: 6px 8px;
}

.dash-home--modern .dash-pulse-panel {
  margin-bottom: 0;
}

.dash-home--modern .dash-display-panel {
  padding: 12px 16px;
}

.dash-home--modern .dash-split {
  gap: 10px;
  margin-bottom: 10px;
  align-items: start;
}

.dash-home--modern .dash-perf-panel {
  height: auto;
}

.dash-kpi {
  position: relative;
  overflow: hidden;
}

.dash-kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  min-height: 22px;
}

.dash-kpi-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--purple-50);
  color: var(--purple-600);
}

.dash-kpi-icon i, .dash-kpi-icon svg {
  width: 13px;
  height: 13px;
}

.dash-kpi-icon--warn {
  background: var(--error-50);
  color: var(--error-600);
}

.dash-kpi-icon--amber {
  background: #fffbeb;
  color: #d97706;
}

.dash-kpi-icon--ok {
  background: var(--purple-50);
  color: var(--purple-700);
}

.dash-kpi-visual {
  height: 18px;
  margin: 8px 0 6px;
  display: flex;
  align-items: center;
}

.dash-kpi-meter {
  height: 4px;
  width: 100%;
  border-radius: 999px;
  background: var(--neutral-100);
  overflow: hidden;
}

.dash-kpi-meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple-400), var(--purple-600));
}

.dash-kpi-meter-fill--warn {
  background: linear-gradient(90deg, var(--error-500), var(--error-600));
}

.dash-kpi-meter-fill--ok {
  background: linear-gradient(90deg, var(--purple-400), var(--purple-700));
}

.dash-kpi-spark {
  display: block;
  width: 100%;
  height: 18px;
  color: var(--purple-500);
  opacity: .9;
}

.dash-kpi-stars {
  position: relative;
  height: 16px;
  width: 100%;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--neutral-200);
}

.dash-kpi-stars-base {
  position: absolute;
  inset: 0;
}

.dash-kpi-stars-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #f5a623;
}

.dash-section {
  margin: 2px 0 8px;
}

.dash-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 8px;
}

.dash-row {
  display: grid;
  gap: var(--dash-gap, 12px);
  margin: 0 0 var(--dash-gap, 12px);
  align-items: stretch;
}

.dash-row--top {
  align-items: start;
}

.dash-row--full {
  grid-template-columns: 1fr;
}

.dash-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dash-row--2-1 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.dash-row--thirds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dash-review-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.dash-review-grid.is-triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dash-review-grid > * {
  min-height: 268px;
  height: 100%;
  max-height: 280px;
  overflow: hidden;
}

.dash-review-grid .dash-review-side {
  display: flex;
  flex-direction: column;
  min-height: 268px;
  max-height: 280px;
  height: 100%;
}

.dash-activity-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.dash-activity-list {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -4px;
  padding: 0 4px;
}

.dash-activity-panel .activity-row,
.dash-activity-panel .activity-row--actions {
  padding-top: 8px;
  padding-bottom: 8px;
}

.dash-activity-panel .activity-row-title {
  font-size: 13px;
}

.dash-share-win--card {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 14px;
  box-sizing: border-box;
}

.dash-share-win-kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

.dash-share-win-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.dash-share-win-nav-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  min-width: 2.6em;
  text-align: center;
}

.dash-share-win-nav-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  padding: 0;
}

.dash-share-win-nav-btn:hover:not(:disabled) {
  background: var(--purple-50);
  color: var(--purple-700);
}

.dash-share-win-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.dash-share-win-nav-btn i,
.dash-share-win-nav-btn svg {
  width: 15px;
  height: 15px;
}

.dash-share-win--card .dash-share-win-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dash-share-win--card .dash-share-win-quote {
  font-size: 13.5px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dash-share-win--card .dash-share-win-footer {
  margin-top: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}

.dash-share-win--card .dash-share-win-actions {
  margin-left: 0;
}

.dash-share-win-actions a.is-disabled {
  pointer-events: none;
  opacity: 0.45;
}

.dash-journey {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0 0 10px;
  padding: 6px 8px;
}

.dash-journey-step {
  flex: 1 1 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
  min-width: 0;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
}

.dash-journey-step:hover {
  background: var(--bg-soft);
}

.dash-journey-step.is-warn {
  background: var(--error-50);
}

.dash-journey-step.is-warn:hover {
  background: color-mix(in srgb, var(--error-50) 70%, var(--surface));
}

.dash-journey-step.is-ok {
  background: var(--purple-50);
}

.dash-journey-step.is-ok:hover {
  background: color-mix(in srgb, var(--purple-50) 70%, var(--surface));
}

.dash-journey-label {
  flex: 1 0 100%;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 1px;
}

.dash-journey-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.15;
}

.dash-journey-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
}

.dash-journey-detail {
  flex: 1 0 100%;
  font-size: 11.5px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-journey-arrow {
  flex: 0 0 auto;
  align-self: center;
  color: var(--neutral-300);
  font-size: 13px;
  line-height: 1;
}

/* Collection pulse — informative, per-form actions, light chrome */

.dash-pulse-panel {
  margin: 0 0 var(--dash-gap, 12px);
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface);
}

.dash-pulse-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}

.dash-pulse-head-text {
  min-width: 0;
  flex: 1 1 220px;
}

.dash-pulse-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.25;
}

.dash-pulse-summary {
  margin: 3px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-2);
  line-height: 1.4;
}

.dash-pulse-sep {
  margin: 0 5px;
  color: var(--fg-3);
  opacity: 0.75;
}

.dash-pulse-stats {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dash-pulse-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-3);
  white-space: nowrap;
}

.dash-pulse-stat strong {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.dash-pulse-stat--quiet {
  background: color-mix(in srgb, var(--amber-100, #fef3c7) 55%, var(--surface));
  color: var(--amber-800, #92400e);
}

.dash-pulse-stat--quiet strong {
  color: var(--amber-900, #78350f);
}

.dash-pulse-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
}

.dash-pulse-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.dash-pulse-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dash-pulse-row-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dash-pulse-form-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-pulse-form-meta {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg-3);
}

.dash-pulse-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.dash-pulse-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--purple-700);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.dash-pulse-action:hover {
  background: var(--purple-50);
  color: var(--purple-800);
}

.dash-pulse-action i,
.dash-pulse-action svg {
  width: 12px;
  height: 12px;
  opacity: 0.85;
}

@media (max-width: 560px) {
  .dash-pulse-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .dash-pulse-row-actions {
    justify-content: flex-start;
  }
}

.dash-home--modern .activation-card,
.dash-home--modern .dash-primary-cta,
.dash-home--modern .dash-health-list {
  margin-bottom: 12px;
}

.dash-display-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.dash-display-total {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
}

.dash-display-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-2);
}

.dash-display-inline-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

.dash-display-inline-item:hover {
  color: var(--purple-700);
}

.dash-display-inline-item strong {
  font-weight: 800;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.dash-display-insight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--purple-50);
  text-decoration: none;
  color: var(--fg-2);
  font-size: 12px;
  line-height: 1.35;
}

a.dash-display-insight:hover {
  background: var(--purple-100);
  color: var(--fg-1);
}

.dash-display-insight-cta {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--purple-700);
  white-space: nowrap;
}

.dash-charts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "trend trend trend"
    "mix rating health"
    "forms forms forms";
  gap: 10px;
  margin: 0 0 10px;
  align-items: stretch;
}

.dash-chart-panel {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 168px;
}

.dash-chart-panel--wide,
.dash-chart-panel--forms {
  min-height: 0;
}

.dash-charts-grid > .dash-chart-panel--wide {
  grid-area: trend;
}

.dash-charts-grid > .dash-chart-panel--forms {
  grid-area: forms;
}

.dash-charts-grid > .dash-chart-panel:nth-of-type(2) {
  grid-area: mix;
}

.dash-charts-grid > .dash-chart-panel:nth-of-type(3) {
  grid-area: rating;
}

.dash-charts-grid > .dash-chart-panel:nth-of-type(4) {
  grid-area: health;
}

.dash-chart-panel .donut-wrap {
  flex: 1;
  align-items: center;
}

.dash-chart-panel .donut-ring {
  width: 84px;
  height: 84px;
}

.dash-chart-panel .donut-center {
  width: 50px;
  height: 50px;
}

.dash-chart-panel .donut-center-value {
  font-size: 14px;
}

.dash-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.dash-chart-sub {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--fg-3);
  font-weight: 500;
}

.dash-chart-head-metric {
  text-align: right;
  flex-shrink: 0;
}

.dash-chart-head-value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.dash-chart-head-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.dash-chart-empty {
  padding: 16px 10px;
  text-align: center;
  font-size: 12.5px;
  color: var(--fg-3);
  background: var(--bg-soft);
  border-radius: var(--r-md);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Line / area trend (~30% shorter than previous 112px) */

.dash-trend {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dash-trend-plot {
  position: relative;
  width: 100%;
}

.dash-trend-svg {
  width: 100%;
  height: 78px;
  display: block;
}

.dash-trend-line {
  stroke: var(--purple-600);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.dash-trend-dot {
  fill: var(--surface);
  stroke: var(--purple-600);
  stroke-width: 1.75;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 120ms;
  pointer-events: none;
}

.dash-trend-point:hover .dash-trend-dot,
.dash-trend-point:focus .dash-trend-dot,
.dash-trend:hover .dash-trend-dot {
  opacity: 1;
}

.dash-trend-hit {
  cursor: crosshair;
  pointer-events: all;
}

.dash-trend-tip {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, calc(-100% - 10px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 72px;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  background: var(--neutral-950);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

.dash-trend-tip strong {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.dash-trend-tip span {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.78;
}

.dash-trend-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fg-3);
}

/* Vertical response bars */

.dash-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 112px;
  padding: 0;
  flex: 1;
}

.dash-bar-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
}

.dash-bar-track {
  flex: 1;
  width: 100%;
  max-width: 28px;
  display: flex;
  align-items: flex-end;
  border-radius: 6px 6px 3px 3px;
  background: color-mix(in srgb, var(--purple-50) 70%, transparent);
}

.dash-bar-fill {
  width: 100%;
  min-height: 3px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--purple-400), var(--purple-700));
  transition: height 220ms ease, opacity 120ms;
}

.dash-bar-fill.is-empty {
  min-height: 3px;
  height: 3px !important;
  background: var(--neutral-200);
  box-shadow: none;
  opacity: .7;
}

.dash-bar-col:hover .dash-bar-fill:not(.is-empty) {
  filter: brightness(1.06);
}

.dash-bar-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}

/* Rating distribution bars */

.dash-rating-bars {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
  flex: 1;
}

.dash-rating-row {
  display: grid;
  grid-template-columns: 26px 1fr 24px 32px;
  align-items: center;
  gap: 6px;
}

.dash-rating-star {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

.dash-rating-track {
  height: 6px;
  border-radius: 999px;
  background: var(--neutral-100);
  overflow: hidden;
}

.dash-rating-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5a623, #f59e0b);
  min-width: 0;
}

.dash-rating-count, .dash-rating-pct {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dash-rating-pct {
  color: var(--fg-3);
  font-weight: 600;
}

/* Program health progress */

.dash-health-progress {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
}

.dash-health-progress-row {
  display: grid;
  grid-template-columns: 1fr 36px;
  grid-template-rows: auto auto;
  gap: 3px 8px;
  align-items: center;
}

.dash-health-progress-meta {
  grid-column: 1;
  min-width: 0;
}

.dash-health-progress-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg-1);
}

.dash-health-progress-detail {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-health-progress-bar {
  grid-column: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--neutral-100);
  overflow: hidden;
}

.dash-health-progress-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neutral-300), var(--neutral-400));
  transition: width 280ms ease;
}

.dash-health-progress-row.is-ok .dash-health-progress-bar > span {
  background: linear-gradient(90deg, var(--purple-400), var(--purple-700));
}

.dash-health-progress-pct {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 12px;
  font-weight: 800;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Form performance horizontal chart */

.dash-hchart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-hchart-row {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr) minmax(140px, 180px);
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 6px 4px;
  border-radius: var(--r-sm);
}

.dash-hchart-row:hover {
  background: var(--surface-sunken, var(--neutral-50));
}

.dash-hchart-label {
  min-width: 0;
}

.dash-hchart-label .dash-form-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-hchart-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.dash-hchart-meta .muted {
  font-size: 11px;
  color: var(--fg-3);
}

.dash-hchart-tracks {
  position: relative;
  height: 22px;
  background: var(--neutral-100);
  border-radius: 6px;
  overflow: hidden;
}

.dash-hchart-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  min-width: 0;
}

.dash-hchart-bar--views {
  background: color-mix(in srgb, var(--purple-300) 55%, var(--neutral-200));
  opacity: .85;
}

.dash-hchart-bar--resp {
  background: linear-gradient(90deg, var(--purple-500), var(--purple-700));
  top: 4px;
  bottom: 4px;
}

.dash-hchart-nums {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 8px;
  font-size: 11.5px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.dash-hchart-nums strong {
  color: var(--fg-1);
  font-size: 13px;
}

.dash-hchart-legend {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-3);
}

.dash-hchart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.dash-swatch--resp {
  background: var(--purple-600);
}

.dash-swatch--views {
  background: color-mix(in srgb, var(--purple-300) 70%, var(--neutral-200));
}

/* Display: mix bar + inline stats */

.dash-display-panel {
  margin: 0;
  padding: 12px 16px;
}

.dash-display-mix {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--neutral-100);
  margin: 0 0 12px;
}

.dash-display-mix-seg {
  display: block;
  height: 100%;
  min-width: 0;
}

.dash-display-mix-seg--widgets {
  background: var(--purple-500);
}

.dash-display-mix-seg--wall {
  background: var(--purple-400);
}

.dash-display-mix-seg--shares {
  background: var(--purple-300);
}

.dash-display-charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dash-spark-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.dash-spark-card:hover {
  border-color: var(--purple-200);
  background: var(--surface);
}

.dash-spark-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.dash-spark-card-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.dash-spark-svg {
  width: 100%;
  height: 44px;
  display: block;
}

.dash-spark-line {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.dash-spark-line--widgets {
  stroke: var(--purple-600);
}

.dash-spark-line--wall {
  stroke: var(--purple-400);
}

.dash-spark-line--shares {
  stroke: var(--purple-300);
}

.dash-spark-empty {
  height: 44px;
  border-radius: 6px;
  background: var(--neutral-100);
}

.dash-display-kicker {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.dash-display-sub {
  font-size: 11.5px;
  color: var(--fg-3);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ops widgets: request pipeline, coverage, pulse, mix, top widget */

.dash-ops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 10px;
  align-items: stretch;
}

.dash-ops-panel {
  min-height: 168px;
}

.dash-ops-panel .donut-wrap {
  flex: 1;
  align-items: center;
}

.dash-ops-panel .donut-ring {
  width: 80px;
  height: 80px;
}

.dash-ops-panel .donut-center {
  width: 48px;
  height: 48px;
}

.dash-funnel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  flex: 1;
}

.dash-funnel-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 28px 34px;
  align-items: center;
  gap: 8px;
}

.dash-funnel-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-2);
}

.dash-funnel-track {
  height: 8px;
  border-radius: 999px;
  background: var(--neutral-100);
  overflow: hidden;
}

.dash-funnel-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  min-width: 0;
}

.dash-funnel-fill--sent,
.dash-funnel-fill--collecting {
  background: var(--purple-500);
}

.dash-funnel-fill--opened,
.dash-funnel-fill--approving {
  background: var(--purple-400);
}

.dash-funnel-fill--completed,
.dash-funnel-fill--displaying {
  background: var(--purple-300);
}

.dash-funnel-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 4px 0;
  border-radius: var(--r-sm);
}

.dash-funnel-link:hover {
  background: var(--bg-soft);
}

.dash-funnel-note {
  margin: 2px 0 6px 78px;
  font-size: 11.5px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-row--2-1 .dash-hchart-row {
  grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
  gap: 8px;
}

.dash-row--2-1 .dash-hchart-nums {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.dash-chart-panel--forms {
  min-height: 0;
  max-height: none;
  height: 100%;
}

.dash-row--forms-match {
  align-items: stretch;
}

.dash-row--forms-match > .dash-chart-panel--forms {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.dash-row--forms-match .dash-form-conv {
  flex: 1 1 auto;
  min-height: 0;
}

.dash-chart-panel--mix {
  min-height: 0;
}

.dash-chart-panel--full {
  width: 100%;
}

.dash-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  height: 100%;
}

.dash-stack > .pc-panel {
  margin: 0;
}

/* Sleek single-line notices (no widget / wall quiet / embed) */

.dash-notice-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 var(--dash-gap, 12px);
  width: 100%;
}

.dash-notice-stack:empty,
.dash-notice-stack.is-empty {
  display: none;
  margin: 0;
  gap: 0;
  min-height: 0;
}

.dash-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  padding: 6px 8px 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--fg-2);
}

.dash-notice--warn {
  border-color: color-mix(in srgb, var(--error-100, #fee2e2) 80%, var(--border-subtle));
  background: color-mix(in srgb, var(--error-50, #fef2f2) 70%, var(--surface));
}

.dash-notice--soft {
  border-color: color-mix(in srgb, var(--purple-100) 70%, var(--border-subtle));
  background: color-mix(in srgb, var(--purple-50) 55%, var(--surface));
}

.dash-notice-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--fg-3);
}

.dash-notice--warn .dash-notice-icon {
  color: var(--error-600, #dc2626);
}

.dash-notice--soft .dash-notice-icon {
  color: var(--purple-600);
}

.dash-notice-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .dash-notice-text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: break-word;
  }
}

.dash-notice-text strong {
  font-weight: 700;
  color: var(--fg-1);
}

.dash-notice-link {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--purple-700);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.dash-notice-link:hover {
  color: var(--purple-800);
  text-decoration: underline;
}

.dash-notice-dismiss {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
}

.dash-notice-dismiss:hover {
  background: color-mix(in srgb, var(--fg-1) 6%, transparent);
  color: var(--fg-1);
}

.dash-notice-dismiss i,
.dash-notice-dismiss svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 720px) {
  .dash-notice {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .dash-notice-text {
    flex: 1 1 calc(100% - 80px);
    white-space: normal;
  }

  .dash-notice-dismiss {
    margin-left: auto;
  }
}

/* New request picker — templates as quiet chips; send modes as large cards */

.invite-picker-field {
  margin-bottom: 16px;
}

.invite-picker-help {
  margin: 6px 0 0;
}

.invite-picker-optional {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: none;
  letter-spacing: 0;
}

.invite-picker-tpl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.invite-picker-tpl {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--fg-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms, box-shadow 120ms;
}

.invite-picker-tpl:hover {
  background: var(--surface-hover, var(--neutral-100));
  color: var(--fg-1);
}

.invite-picker-tpl.is-selected {
  border-color: color-mix(in srgb, var(--purple-400) 55%, transparent);
  background: var(--purple-50);
  color: var(--purple-700);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple-400) 25%, transparent);
}

.invite-picker-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.invite-picker-mode {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 14px 14px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color 120ms, background 120ms, box-shadow 120ms, transform 120ms;
}

.invite-picker-mode:hover {
  border-color: var(--purple-300);
  background: color-mix(in srgb, var(--purple-50) 55%, var(--surface));
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.invite-picker-mode--primary {
  border-color: color-mix(in srgb, var(--purple-400) 45%, var(--border-subtle));
  background: color-mix(in srgb, var(--purple-50) 70%, var(--surface));
}

.invite-picker-mode--primary:hover {
  border-color: var(--purple-500);
  background: var(--purple-50);
}

.invite-picker-mode-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  color: var(--fg-2);
}

.invite-picker-mode--primary .invite-picker-mode-icon {
  background: var(--purple-100);
  color: var(--purple-700);
}

.invite-picker-mode-icon i,
.invite-picker-mode-icon svg {
  width: 17px;
  height: 17px;
}

.invite-picker-mode-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.invite-picker-mode-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.25;
}

.invite-picker-mode-desc {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg-3);
  line-height: 1.35;
}

.invite-picker-mode-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--fg-3);
}

.invite-picker-mode:hover .invite-picker-mode-arrow {
  color: var(--purple-600);
}

@media (max-width: 560px) {
  .invite-picker-modes {
    grid-template-columns: 1fr;
  }
}

.dash-form-conv {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-height: 0;
  padding-right: 2px;
}

.dash-form-conv-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.dash-form-conv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dash-form-conv-nums {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.dash-form-conv-track {
  position: relative;
  height: 8px;
  background: var(--neutral-100);
  border-radius: 999px;
  overflow: hidden;
}

.dash-form-conv-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
}

.dash-form-conv-bar--views {
  background: color-mix(in srgb, var(--purple-300) 55%, var(--neutral-200));
}

.dash-form-conv-bar--starts {
  background: var(--purple-400);
  top: 2px;
  bottom: 2px;
}

.dash-form-conv-bar--done {
  background: var(--purple-700);
  top: 2px;
  bottom: 2px;
}

.dash-signal-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--dash-gap, 12px);
}

.dash-signal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  background: var(--purple-50);
  color: var(--fg-2);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
}

.dash-signal:hover {
  background: var(--purple-100);
  color: var(--fg-1);
}

.dash-signal--warn {
  background: var(--error-50);
}

.dash-signal--warn:hover {
  background: color-mix(in srgb, var(--error-50) 70%, var(--surface));
}

.dash-signal i, .dash-signal svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.dash-funnel-count, .dash-funnel-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dash-funnel-pct {
  color: var(--fg-3);
  font-weight: 600;
}

.dash-ops-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--fg-3);
  font-weight: 600;
  flex-wrap: wrap;
}

.dash-ops-fail {
  color: var(--error-600);
  text-decoration: none;
  font-weight: 700;
}

.dash-ops-fail:hover {
  text-decoration: underline;
}

.dash-coverage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  gap: 4px;
}

.dash-coverage-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
}

.dash-coverage-meta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-2);
}

.dash-coverage-track {
  height: 8px;
  border-radius: 999px;
  background: var(--neutral-100);
  overflow: hidden;
  margin-top: 6px;
}

.dash-coverage-track > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple-400), var(--purple-700));
}

.dash-coverage-msg {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.4;
}

.dash-pulse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
  align-content: center;
}

.dash-pulse-stat {
  min-width: 0;
}

.dash-pulse-value {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.dash-pulse-lbl {
  font-size: 11.5px;
  color: var(--fg-3);
  font-weight: 600;
}

.dash-pulse-forms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.dash-top-widget {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  padding: 4px 0;
}

.dash-top-widget-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-top-widget-type {
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 600;
  margin-top: 2px;
}

.dash-top-widget-val {
  margin-top: 10px;
  font-size: 28px;
  font-weight: 800;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
}

.dash-top-widget-lbl {
  font-size: 11.5px;
  color: var(--fg-3);
  font-weight: 600;
}

.dash-home--modern .dash-share-win {
  margin-bottom: 10px;
  padding: 12px 16px;
}

.analytics-layer-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 16px 0 8px;
}

.analytics-group-label {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 0 6px 0 10px;
}

.dash-stat-grid--journey {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dash-kind-chip {
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--neutral-100);
  color: var(--fg-2);
}

.dash-top-forms {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-top-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
}

.dash-top-form-row:hover {
  background: var(--surface-sunken, var(--neutral-50));
}

.dash-top-form-metric {
  font-weight: 700;
  font-size: 15px;
  color: var(--purple-700);
}

.dash-top-form-main .muted {
  font-size: 12px;
  color: var(--fg-3);
  margin-left: 6px;
}

.form-card--rich {
  position: relative;
}

.builder-preview-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px;
  position: absolute;
  inset: 0;
  background: var(--surface);
  z-index: 2;
}

.skeleton-line, .skeleton-block {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.2s ease-in-out infinite;
}

.skeleton-line {
  height: 12px;
}

.skeleton-block {
  height: 80px;
  width: 100%;
}

.sk-w-40 {
  width: 40%;
}

.sk-w-50 {
  width: 50%;
}

.sk-w-60 {
  width: 60%;
}

.sk-w-80 {
  width: 80%;
}

@keyframes sk-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@media (max-width: 1100px) {
  .dash-ops-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dash-row--2,
  .dash-row--2-1 {
    grid-template-columns: 1fr;
  }

  .dash-review-grid,
  .dash-review-grid.is-triple {
    grid-template-columns: 1fr 1fr;
  }

  .dash-review-grid.is-triple .dash-share-win--card {
    grid-column: 1 / -1;
    max-height: none;
    min-height: 0;
  }

  .dash-charts-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "trend trend"
      "mix rating"
      "health health"
      "forms forms";
  }

  .dash-bar-chart {
    height: 100px;
  }

  .dash-hchart-row {
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) minmax(110px, 150px);
  }
}

@media (max-width: 960px) {
  .dash-stat-grid--journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-row--thirds {
    grid-template-columns: 1fr;
  }

  .dash-journey {
    flex-wrap: wrap;
  }

  .dash-journey-arrow {
    display: none;
  }

  .dash-journey-step {
    flex: 1 1 30%;
  }

  .dash-charts-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "trend"
      "mix"
      "rating"
      "health"
      "forms";
  }

  .dash-split {
    grid-template-columns: 1fr !important;
  }

  .dash-display-charts {
    grid-template-columns: 1fr;
  }

  .dash-ops-grid {
    grid-template-columns: 1fr;
  }

  .dash-review-grid,
  .dash-review-grid.is-triple {
    grid-template-columns: 1fr;
  }

  .dash-review-grid > *:not(.dash-activity-panel) {
    max-height: none;
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .dash-stat-grid--journey {
    grid-template-columns: 1fr;
  }

  .dash-controls-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .forms-grid {
    grid-template-columns: 1fr !important;
  }

  .page-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .dash-bar-label {
    font-size: 9px;
  }

  .dash-rating-row {
    grid-template-columns: 26px 1fr 24px;
  }

  .dash-rating-pct {
    display: none;
  }

  .dash-home--modern .stat-card.dash-kpi {
    min-height: 0;
  }

  .dash-hchart-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .dash-hchart-nums {
    justify-content: flex-start;
  }
}