/* FFStock Corporate Interface components and standalone reference page v2. */

.ffui-standalone,
.ffui-standalone * {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.ffui-standalone {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  background-color: var(--ci-color-bg-bottom);
  background-image:
    radial-gradient(circle at 12% 3%, rgba(255, 255, 255, .28), transparent 29rem),
    radial-gradient(circle at 90% 18%, rgba(73, 68, 58, .06), transparent 34rem),
    linear-gradient(180deg, var(--ci-color-bg-top) 0%, var(--ci-color-bg-mid) 31%, var(--ci-color-bg-bottom) 83%);
  background-attachment: fixed;
  color: var(--ci-color-ink);
  font-family: var(--ci-font-sans);
  font-size: var(--ci-type-16);
  line-height: var(--ci-leading-24);
  letter-spacing: var(--ci-tracking-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.ffui-standalone::before,
.ffui-standalone::after {
  position: fixed;
  z-index: -1;
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  content: "";
  filter: blur(90px);
  opacity: .18;
  pointer-events: none;
}

.ffui-standalone::before { top: 24%; left: -18rem; background: #f6f2ea; }
.ffui-standalone::after { right: -19rem; bottom: 4%; background: #c7c2b8; }

.ffui-standalone :where(button, input, select, textarea) { font: inherit; }
.ffui-standalone :where(a, button, input, select, textarea):focus-visible { outline: none; box-shadow: var(--ci-focus-ring); }
.ffui-standalone :where(h1, h2, h3, p, ul, dl, dd, figure) { margin-top: 0; }
.ffui-standalone :where(h1, h2, h3, p, td, th, code, strong, small) { overflow-wrap: anywhere; }
.ffui-standalone a:not(.ffui-button) { color: inherit; }

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

.ffui-skip-link {
  position: fixed;
  z-index: 9999;
  top: 8px;
  left: 8px;
  padding: 8px 12px;
  border-radius: var(--ci-radius-compact);
  background: var(--ci-color-brand-800);
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
}
.ffui-skip-link:focus { transform: translateY(0); }

.ffui-scope {
  --ffui-brand: var(--ci-color-brand-700);
  --ffui-brand-strong: var(--ci-color-brand-800);
  --ffui-brand-soft: var(--ci-color-brand-100);
  --ffui-text: var(--ci-color-ink);
  --ffui-muted: var(--ci-color-muted);
  --ffui-surface: var(--ci-color-surface);
  --ffui-surface-strong: var(--ci-color-surface-strong);
  --ffui-surface-soft: var(--ci-color-surface-soft);
  --ffui-border: var(--ci-color-line);
  --ffui-danger: var(--ci-color-danger);
  --ffui-warning: var(--ci-color-warning);
  --ffui-success: var(--ci-color-success);
  --ffui-info: var(--ci-color-info);
  --ffui-radius-sm: var(--ci-radius-control);
  --ffui-radius-md: var(--ci-radius-menu);
  --ffui-radius-lg: var(--ci-radius-dialog);
  --ffui-shadow-sm: var(--ci-shadow-1);
  --ffui-shadow-md: var(--ci-shadow-2);
  --ffui-focus: var(--ci-focus-ring);
  --ffui-motion-fast: var(--ci-motion-fast);
  --ffui-motion-base: var(--ci-motion-base);
  color: var(--ffui-text);
}

.ffui-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: var(--ci-space-5) var(--ci-page-inline) var(--ci-space-12);
}

.ffui-topbar {
  position: sticky;
  z-index: 100;
  top: var(--ci-space-4);
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--ci-space-6);
  min-height: 64px;
  padding: var(--ci-space-4) var(--ci-space-5);
  border: 1px solid rgba(255, 255, 255, .66);
  border-radius: var(--ci-radius-menu);
  background: rgba(255, 254, 252, .82);
  box-shadow: var(--ci-shadow-1);
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
}

.ffui-wordmark {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--ci-space-4);
  color: var(--ci-color-ink);
  text-decoration: none;
}
.ffui-wordmark-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: var(--ci-radius-control);
  background: linear-gradient(145deg, var(--ci-color-brand-600), var(--ci-color-brand-800));
  color: #fff;
  box-shadow: 0 10px 24px rgba(31, 34, 29, .18);
}
.ffui-wordmark > span:last-child { display: grid; line-height: 1.15; }
.ffui-wordmark strong { font-size: var(--ci-type-16); font-weight: 850; letter-spacing: var(--ci-tracking-heading); }
.ffui-wordmark small { margin-top: 3px; color: var(--ci-color-muted); font-size: var(--ci-type-11); font-weight: 700; letter-spacing: var(--ci-tracking-label); }
.ffui-topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--ci-space-4); }
.ffui-status-chip {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: var(--ci-space-3);
  padding: var(--ci-space-2) var(--ci-space-5);
  border: 1px solid rgba(24, 117, 82, .16);
  border-radius: var(--ci-radius-round);
  background: var(--ci-color-success-soft);
  color: var(--ci-color-success);
  font-size: var(--ci-type-12);
  font-weight: 800;
  letter-spacing: var(--ci-tracking-label);
}

.ffui-section-nav {
  position: sticky;
  z-index: 90;
  top: 82px;
  display: flex;
  max-width: 100%;
  gap: var(--ci-space-2);
  margin: var(--ci-space-5) 0;
  padding: var(--ci-space-2);
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: var(--ci-radius-control);
  background: rgba(248, 247, 243, .86);
  box-shadow: 0 8px 24px rgba(31, 34, 29, .05);
  scrollbar-width: thin;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.ffui-section-nav a {
  display: inline-flex;
  min-height: var(--ci-control-height-sm);
  flex: 0 0 auto;
  align-items: center;
  padding: var(--ci-space-2) var(--ci-space-5);
  border-radius: var(--ci-radius-compact);
  color: var(--ci-color-ink-soft);
  font-size: var(--ci-type-14);
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.ffui-section-nav a:hover { background: rgba(255, 255, 255, .88); color: var(--ci-color-brand-800); }

.ffui-scope main {
  display: grid;
  min-width: 0;
  gap: var(--ci-space-6);
}

.ffui-hero,
.ffui-section {
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--ci-radius-dialog);
  background: var(--ci-color-surface);
  box-shadow: var(--ci-shadow-2);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
}

.ffui-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  padding: clamp(24px, 5vw, 72px);
  scroll-margin-top: 136px;
}
.ffui-hero-copy { min-width: 0; }
.ffui-kicker,
.ffui-section-index {
  display: inline-block;
  color: var(--ci-color-brand-700);
  font-size: var(--ci-type-11);
  font-weight: 850;
  line-height: var(--ci-leading-16);
  letter-spacing: var(--ci-tracking-eyebrow);
}
.ffui-hero h1 {
  margin: var(--ci-space-5) 0 0;
  color: var(--ci-color-ink);
  font-size: clamp(2.35rem, 6vw, 5.4rem);
  font-weight: 850;
  line-height: .98;
  letter-spacing: -.035em;
}
.ffui-hero h1 em { color: var(--ci-color-brand-700); font-style: normal; }
.ffui-hero-copy > p {
  max-width: 69ch;
  margin: var(--ci-space-7) 0 0;
  color: var(--ci-color-ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  line-height: 1.6;
}
.ffui-hero-actions { display: flex; flex-wrap: wrap; gap: var(--ci-space-4); margin-top: var(--ci-space-8); }
.ffui-hero-spec {
  display: grid;
  min-width: 0;
  gap: var(--ci-space-5);
  padding: var(--ci-space-7);
  border: 1px solid rgba(36, 39, 34, .12);
  border-radius: var(--ci-radius-card);
  background: rgba(255, 254, 252, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.ffui-spec-orb { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 50%; background: var(--ci-color-brand-100); color: var(--ci-color-brand-700); }
.ffui-spec-orb .ffui-icon { width: 26px; height: 26px; }
.ffui-hero-spec > strong { font-size: var(--ci-type-20); font-weight: 850; letter-spacing: var(--ci-tracking-heading); }
.ffui-hero-spec ul { display: grid; gap: var(--ci-space-4); margin: 0; padding: 0; list-style: none; }
.ffui-hero-spec li { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-space-5); padding-top: var(--ci-space-4); border-top: 1px solid var(--ci-color-line); font-size: var(--ci-type-14); }
.ffui-hero-spec li b { color: var(--ci-color-success); font-size: var(--ci-type-12); }

.ffui-section {
  scroll-margin-top: 136px;
  padding: var(--ci-section-padding);
}
.ffui-section-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ci-space-8);
  margin-bottom: var(--ci-space-8);
}
.ffui-section-head > div { min-width: 0; }
.ffui-section-head h2 {
  margin: var(--ci-space-2) 0 0;
  color: var(--ci-color-ink);
  font-size: clamp(1.55rem, 2.5vw, 2.25rem);
  font-weight: 850;
  line-height: 1.16;
  letter-spacing: var(--ci-tracking-tight);
}
.ffui-section-head p { max-width: 78ch; margin: var(--ci-space-3) 0 0; color: var(--ci-color-muted); font-size: var(--ci-type-14); line-height: var(--ci-leading-20); }
.ffui-knowledge-tools { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(150px, 1fr)); gap: var(--ci-space-4); align-items: end; margin-bottom: var(--ci-space-6); }
.ffui-knowledge-tools output { grid-column: 1 / -1; color: var(--ci-color-muted); font-size: var(--ci-type-14); }
.ffui-knowledge-list { display: grid; gap: var(--ci-space-4); }
.ffui-knowledge-card { min-width: 0; border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-menu); background: rgba(255, 255, 255, .68); }
.ffui-knowledge-card[hidden] { display: none; }
.ffui-knowledge-card > summary { position: relative; display: grid; gap: var(--ci-space-2); padding: var(--ci-space-5) calc(var(--ci-space-6) + 20px) var(--ci-space-5) var(--ci-space-6); cursor: pointer; }
.ffui-knowledge-card > summary::after { position: absolute; top: var(--ci-space-5); right: var(--ci-space-6); content: '⌄'; color: var(--ci-color-brand-700); font-size: var(--ci-type-20); font-weight: 800; line-height: 1; }
.ffui-knowledge-card[open] > summary::after { content: '⌃'; }
.ffui-knowledge-card > summary:focus-visible { outline: 3px solid var(--ci-color-brand-700); outline-offset: 3px; }
.ffui-knowledge-card > summary strong { color: var(--ci-color-ink); font-size: var(--ci-type-16); }
.ffui-knowledge-card > summary > span:last-child { color: var(--ci-color-muted); font-size: var(--ci-type-14); line-height: var(--ci-leading-20); }
.ffui-knowledge-id { color: var(--ci-color-brand-700); font-family: var(--ci-font-mono); font-size: var(--ci-type-11); font-weight: 800; }
.ffui-knowledge-body { display: grid; gap: var(--ci-space-5); padding: 0 var(--ci-space-6) var(--ci-space-6); color: var(--ci-color-ink-soft); font-size: var(--ci-type-14); line-height: 1.6; }
.ffui-knowledge-body p, .ffui-knowledge-guidance h3, .ffui-knowledge-guidance ul { margin: 0; }
.ffui-knowledge-meta { display: flex; flex-wrap: wrap; gap: var(--ci-space-2) var(--ci-space-5); color: var(--ci-color-muted); font-size: var(--ci-type-12); }
.ffui-knowledge-guidance { display: grid; gap: var(--ci-space-2); }
.ffui-knowledge-guidance h3 { color: var(--ci-color-ink); font-size: var(--ci-type-14); }
.ffui-knowledge-guidance ul { padding-left: 1.4em; }
.ffui-knowledge-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ci-space-4); }
.ffui-knowledge-compare > div { display: grid; gap: var(--ci-space-2); padding: var(--ci-space-4); border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-control); }
.ffui-knowledge-compare small { color: var(--ci-color-muted); }
.ffui-knowledge-compare strong { color: var(--ci-color-ink); }
.ffui-knowledge-sources { display: flex; flex-wrap: wrap; gap: var(--ci-space-3); align-items: baseline; padding-top: var(--ci-space-4); border-top: 1px solid var(--ci-color-line); }
.ffui-knowledge-sources a { color: var(--ci-color-brand-700); }
.ffui-knowledge-code summary { color: var(--ci-color-brand-700); cursor: pointer; font-weight: 750; }
.ffui-knowledge-code pre { max-width: 100%; overflow: auto; padding: var(--ci-space-4); border-radius: var(--ci-radius-control); background: var(--ci-color-ink); color: #fff; white-space: pre-wrap; overflow-wrap: anywhere; }
.ffui-knowledge-figure { display: grid; gap: var(--ci-space-2); max-width: 100%; margin: 0; }
.ffui-knowledge-figure img { display: block; width: 100%; max-height: 520px; object-fit: contain; border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-control); background: #fff; }
.ffui-knowledge-figure figcaption { color: var(--ci-color-muted); font-size: var(--ci-type-12); line-height: 1.5; }
.ffui-knowledge-empty, .ffui-knowledge-note { color: var(--ci-color-muted); font-size: var(--ci-type-14); line-height: var(--ci-leading-20); }
.ffui-source-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: var(--ci-space-2) var(--ci-space-5);
  border: 1px solid var(--ci-color-line);
  border-radius: var(--ci-radius-round);
  background: rgba(255, 255, 255, .64);
  color: var(--ci-color-muted);
  font-size: var(--ci-type-11);
  font-weight: 750;
  letter-spacing: var(--ci-tracking-label);
}

.ffui-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: none; stroke: currentColor; vertical-align: -.14em; }

.ffui-button,
.ffui-icon-button {
  display: inline-flex;
  min-height: var(--ci-control-height-md);
  align-items: center;
  justify-content: center;
  gap: var(--ci-space-4);
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--ci-radius-control);
  background: linear-gradient(180deg, #fff 0%, #f3f4f3 58%, #e7e9e8 100%);
  color: var(--ci-color-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 4px rgba(31, 34, 29, .08);
  cursor: pointer;
  font-size: var(--ci-type-14);
  font-weight: 800;
  line-height: var(--ci-leading-20);
  text-decoration: none;
  transition: transform var(--ci-motion-fast) var(--ci-ease-standard), box-shadow var(--ci-motion-base) var(--ci-ease-standard), background var(--ci-motion-base) ease, border-color var(--ci-motion-base) ease;
}
.ffui-button { padding: 10px 16px; }
.ffui-button--compact { min-height: var(--ci-control-height-sm); padding: 6px 12px; font-size: var(--ci-type-12); line-height: var(--ci-leading-16); }
.ffui-icon-button { width: var(--ci-control-height-md); padding: 0; border-radius: 50%; }
.ffui-button:hover:not(:disabled), .ffui-icon-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--ci-shadow-1); }
.ffui-button:active:not(:disabled), .ffui-icon-button:active:not(:disabled) { transform: translateY(0) scale(.985); }
.ffui-button:disabled, .ffui-icon-button:disabled { cursor: not-allowed; opacity: .45; transform: none; box-shadow: none; }
.ffui-button--primary { border-color: rgba(47, 81, 106, .18); background: linear-gradient(180deg, #fff 0%, #f5f6f6 48%, #e1e5e6 100%); color: var(--ci-color-brand-800); box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--ci-color-depth-edge), 0 5px 0 var(--ci-color-depth-accent), 0 10px 18px rgba(42, 55, 62, .16); }
.ffui-button--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, 0 4px 0 var(--ci-color-depth-edge), 0 6px 0 var(--ci-color-depth-accent), 0 13px 22px rgba(42, 55, 62, .18); }
.ffui-button--primary:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 1px 3px rgba(42, 55, 62, .1), 0 1px 0 var(--ci-color-depth-edge), 0 2px 0 var(--ci-color-depth-accent), 0 4px 8px rgba(42, 55, 62, .12); }
.ffui-button--secondary { border-color: var(--ci-color-line-strong); color: var(--ci-color-brand-800); }
.ffui-button--quiet { border-color: transparent; background: transparent; color: var(--ci-color-brand-800); box-shadow: none; }
.ffui-button--danger { border-color: rgba(169, 54, 45, .18); background: var(--ci-color-danger-soft); color: var(--ci-color-danger); }
.ffui-button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.ffui-button.is-loading::after { position: absolute; width: 18px; height: 18px; border: 2px solid var(--ci-color-brand-800); border-right-color: transparent; border-radius: 50%; content: ""; animation: ffui-spin .72s linear infinite; }

.ffui-notification-icon { position: relative; display: inline-grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; overflow: visible; }
.ffui-notification-icon > .ffui-icon { width: 18px; height: 18px; }
.ffui-notification-icon--sample { width: 44px; height: 44px; flex-basis: 44px; border: 1px solid var(--ci-color-line-strong); border-radius: var(--ci-radius-control); background: var(--ci-color-brand-100); color: var(--ci-color-brand-800); }
.ffui-notification-icon--sample > .ffui-icon { width: 22px; height: 22px; }
.ffui-notification-icon--app { width: 64px; height: 64px; flex-basis: 64px; border-radius: 18px; background: var(--ci-color-brand-700); color: #fff; box-shadow: var(--ci-shadow-1); }
.ffui-notification-icon--app > .ffui-icon { width: 30px; height: 30px; }
.ffui-notification-anchor { position: relative; overflow: visible; }
.ffui-notification-badge { position: absolute; top: -9px; right: -10px; z-index: 3; display: grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; border: 0; border-radius: var(--ci-radius-round); background: var(--ci-color-notification); color: #fff; box-shadow: none; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.ffui-notification-badge--app { top: -10px; right: -10px; min-width: 30px; height: 30px; padding-inline: 8px; font-size: 17px; }
.ffui-notification-badge[hidden] { display: none; }
.ffui-demo--wide { grid-column: 1 / -1; }
.ffui-notification-showcase { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ci-space-8); margin-top: var(--ci-space-6); }
.ffui-notification-example { display: grid; justify-items: center; gap: var(--ci-space-3); color: var(--ci-color-muted); font-size: var(--ci-type-11); font-weight: 750; }
.ffui-notification-toolbar-demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-space-5); margin-top: var(--ci-space-6); padding-top: var(--ci-space-6); border-top: 1px solid var(--ci-color-line); }
.ffui-notification-note { margin: var(--ci-space-5) 0 0; color: var(--ci-color-ink-soft); font-size: var(--ci-type-12); line-height: var(--ci-leading-20); }
.ffui-notification-note code { font-family: var(--ci-font-mono); font-size: var(--ci-type-11); }

.ffui-color-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ci-space-4); }
.ffui-color-token { min-width: 0; overflow: hidden; border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-menu); background: rgba(255, 255, 255, .68); }
.ffui-color-sample { display: block; height: 86px; background: #fff; }
.ffui-color-token > div { display: grid; gap: 2px; padding: var(--ci-space-5); }
.ffui-color-token strong { font-size: var(--ci-type-14); }
.ffui-color-token code, .ffui-color-token small { color: var(--ci-color-muted); font-family: var(--ci-font-mono); font-size: var(--ci-type-11); }
.ffui-color-token.is-brand-800 .ffui-color-sample { background: var(--ci-color-brand-800); }
.ffui-color-token.is-brand-700 .ffui-color-sample { background: var(--ci-color-brand-700); }
.ffui-color-token.is-brand-100 .ffui-color-sample { background: var(--ci-color-brand-100); }
.ffui-color-token.is-ink .ffui-color-sample { background: var(--ci-color-ink); }
.ffui-color-token.is-surface .ffui-color-sample { background: var(--ci-color-surface-strong); }
.ffui-color-token.is-danger .ffui-color-sample { background: var(--ci-color-danger); }
.ffui-color-token.is-notification .ffui-color-sample { background: var(--ci-color-notification); }

.ffui-principle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ci-space-4); margin-top: var(--ci-space-6); }
.ffui-principle-grid article { position: relative; min-width: 0; padding: var(--ci-space-6); overflow: hidden; border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-menu); background: rgba(255, 255, 255, .58); }
.ffui-principle-grid article > span { color: var(--ci-color-brand-700); font-family: var(--ci-font-mono); font-size: var(--ci-type-12); font-weight: 800; }
.ffui-principle-grid strong { display: block; margin-top: var(--ci-space-4); font-size: var(--ci-type-16); }
.ffui-principle-grid p { margin: var(--ci-space-2) 0 0; color: var(--ci-color-muted); font-size: var(--ci-type-14); line-height: var(--ci-leading-20); }

.ffui-callout,
.ffui-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ci-space-4);
  align-items: flex-start;
  padding: var(--ci-space-5) var(--ci-space-6);
  border: 1px solid var(--ci-color-line);
  border-radius: var(--ci-radius-control);
  background: var(--ci-color-surface-soft);
  color: var(--ci-color-ink-soft);
}
.ffui-callout strong, .ffui-callout p, .ffui-alert strong, .ffui-alert p { margin: 0; }
.ffui-callout p, .ffui-alert p { margin-top: 2px; font-size: var(--ci-type-14); line-height: var(--ci-leading-20); }
.ffui-callout--info { border-color: rgba(40, 101, 138, .2); background: var(--ci-color-info-soft); color: #214f69; }
.ffui-callout--neutral { margin-top: var(--ci-space-6); }
.ffui-alert--success { border-color: rgba(24, 117, 82, .2); background: var(--ci-color-success-soft); color: var(--ci-color-success); }
.ffui-alert--warning { border-color: rgba(139, 92, 0, .2); background: var(--ci-color-warning-soft); color: var(--ci-color-warning); }
.ffui-alert--danger { border-color: rgba(169, 54, 45, .2); background: var(--ci-color-danger-soft); color: var(--ci-color-danger); }

.ffui-radius-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ci-space-4); margin-top: var(--ci-space-6); }
.ffui-radius-token { display: grid; min-width: 0; gap: var(--ci-space-5); padding: var(--ci-space-5); border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-menu); background: rgba(255, 255, 255, .6); }
.ffui-radius-shape { display: grid; width: 100%; aspect-ratio: 1.2; place-items: center; border: 1px solid var(--ci-color-line-strong); border-radius: var(--demo-radius); background: linear-gradient(145deg, var(--ci-color-brand-100), rgba(255, 255, 255, .9)); color: var(--ci-color-brand-800); }
.ffui-radius-shape span { font-family: var(--ci-font-mono); font-size: var(--ci-type-14); font-weight: 800; }
.ffui-radius-token strong, .ffui-radius-token code, .ffui-radius-token p { display: block; }
.ffui-radius-token strong { font-size: var(--ci-type-14); }
.ffui-radius-token code { margin-top: 2px; color: var(--ci-color-brand-700); font-family: var(--ci-font-mono); font-size: var(--ci-type-11); }
.ffui-radius-token p { margin: var(--ci-space-3) 0 0; color: var(--ci-color-muted); font-size: var(--ci-type-12); line-height: var(--ci-leading-16); }

.ffui-compare-table-wrap,
.ffui-table-region { max-width: 100%; overflow: auto; border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-menu); background: rgba(255, 255, 255, .7); }
.ffui-compare-table-wrap { margin-top: var(--ci-space-6); }
.ffui-compare-table,
.ffui-data-table { width: 100%; border-collapse: collapse; color: var(--ci-color-ink); font-size: var(--ci-type-14); font-variant-numeric: tabular-nums; }
.ffui-compare-table { min-width: 680px; }
.ffui-compare-table caption,
.ffui-data-table caption { padding: var(--ci-space-5) var(--ci-space-6); color: var(--ci-color-muted); font-size: var(--ci-type-12); font-weight: 750; text-align: left; }
.ffui-compare-table th,
.ffui-compare-table td { padding: 10px 14px; border-top: 1px solid var(--ci-color-line); text-align: left; vertical-align: top; }
.ffui-compare-table th { background: rgba(239, 237, 232, .76); color: var(--ci-color-ink-soft); font-size: var(--ci-type-12); letter-spacing: var(--ci-tracking-label); }
.ffui-compare-table code { color: var(--ci-color-brand-800); font-family: var(--ci-font-mono); font-size: var(--ci-type-12); }
.ffui-compare-table tr.is-selected td { background: var(--ci-color-success-soft); font-weight: 750; }

.ffui-angle-lab { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: var(--ci-space-7); align-items: center; margin-top: var(--ci-space-6); padding: var(--ci-space-7); overflow: hidden; border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-menu); background: rgba(255, 255, 255, .56); }
.ffui-angle-lab-copy { min-width: 0; }
.ffui-angle-lab-copy h3 { margin: var(--ci-space-3) 0 0; font-size: var(--ci-type-20); line-height: var(--ci-leading-28); }
.ffui-angle-lab-copy p { max-width: var(--ci-measure-reading); margin: var(--ci-space-4) 0 0; color: var(--ci-color-muted); font-size: var(--ci-type-14); line-height: var(--ci-leading-20); }
.ffui-angle-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ci-space-4); }
.ffui-angle-samples article { display: grid; min-width: 0; gap: var(--ci-space-2); padding: var(--ci-space-5); border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-control); background: rgba(255, 254, 252, .8); }
.ffui-angle-samples article > div { position: relative; height: 72px; overflow: hidden; border-radius: var(--ci-radius-compact); background: linear-gradient(145deg, var(--ci-color-brand-800), var(--ci-color-brand-600)); }
.ffui-angle-samples article > div::before { position: absolute; width: 150%; height: 38px; top: 17px; left: -25%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent); content: ""; transform: rotate(var(--demo-angle)); }
.ffui-angle-samples strong { margin-top: var(--ci-space-2); font-family: var(--ci-font-mono); font-size: var(--ci-type-20); }
.ffui-angle-samples span { color: var(--ci-color-ink-soft); font-size: var(--ci-type-12); font-weight: 800; }
.ffui-angle-samples code { color: var(--ci-color-muted); font-family: var(--ci-font-mono); font-size: var(--ci-type-11); }

.ffui-spacing-scale { display: grid; grid-template-columns: repeat(13, minmax(60px, 1fr)); gap: var(--ci-space-3); align-items: end; padding: var(--ci-space-6); overflow-x: auto; border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-menu); background: rgba(255, 255, 255, .56); }
.ffui-spacing-scale article { display: grid; min-width: 62px; justify-items: center; gap: var(--ci-space-2); }
.ffui-spacing-scale article > div { display: flex; height: 90px; align-items: flex-end; }
.ffui-spacing-scale article > div span { display: block; width: max(4px, min(56px, var(--demo-space))); height: max(4px, min(80px, var(--demo-space))); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--ci-color-brand-600), var(--ci-color-brand-800)); }
.ffui-spacing-scale strong { font-family: var(--ci-font-mono); font-size: var(--ci-type-12); }
.ffui-spacing-scale code { color: var(--ci-color-muted); font-family: var(--ci-font-mono); font-size: .58rem; writing-mode: vertical-rl; }

.ffui-anatomy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ci-space-4); margin-top: var(--ci-space-6); }
.ffui-anatomy-card { min-width: 0; padding: var(--ci-space-6); border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-menu); background: rgba(255, 255, 255, .62); }
.ffui-anatomy-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-space-4); }
.ffui-anatomy-head strong { font-size: var(--ci-type-16); }
.ffui-anatomy-head span { color: var(--ci-color-brand-700); font-family: var(--ci-font-mono); font-size: var(--ci-type-11); font-weight: 800; }
.ffui-anatomy-card > p { margin: var(--ci-space-5) 0 0; color: var(--ci-color-muted); font-size: var(--ci-type-12); line-height: var(--ci-leading-16); }
.ffui-measure-box { position: relative; display: grid; min-height: 128px; place-items: center; margin-top: var(--ci-space-6); padding: 34px 44px; border: 1px dashed var(--ci-color-line-strong); border-radius: var(--ci-radius-menu); background: rgba(239, 237, 232, .48); }
.ffui-measure-box b { display: grid; width: 100%; min-height: 44px; place-items: center; border-radius: var(--ci-radius-control); background: var(--ci-color-brand-700); color: #fff; font-size: var(--ci-type-14); line-height: var(--ci-leading-20); }
.ffui-measure-box--cell b { min-height: 40px; border: 1px solid var(--ci-color-line); border-radius: 0; background: #fff; color: var(--ci-color-ink); font-weight: 500; }
.ffui-measure-box i { position: absolute; color: var(--ci-color-brand-800); font-family: var(--ci-font-mono); font-size: .62rem; font-style: normal; font-weight: 800; }
.ffui-measure-box i.is-top { top: 12px; left: 50%; transform: translateX(-50%); }
.ffui-measure-box i.is-bottom { bottom: 12px; left: 50%; transform: translateX(-50%); }
.ffui-measure-box i.is-left { top: 50%; left: 10px; transform: translateY(-50%); }
.ffui-measure-box i.is-right { top: 50%; right: 10px; transform: translateY(-50%); }
.ffui-section-anatomy { display: grid; min-height: 128px; place-items: center; margin-top: var(--ci-space-6); padding: 24px; border: 1px dashed var(--ci-color-line-strong); border-radius: var(--ci-radius-card); background: rgba(239, 237, 232, .48); }
.ffui-section-anatomy div { display: grid; width: 100%; min-height: 78px; place-items: center; border-radius: var(--ci-radius-menu); background: #fff; color: var(--ci-color-muted); font-size: var(--ci-type-14); }

.ffui-type-table { overflow: hidden; border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-menu); background: rgba(255, 255, 255, .68); }
.ffui-type-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 220px; gap: var(--ci-space-6); align-items: center; min-width: 0; padding: var(--ci-space-5) var(--ci-space-6); border-top: 1px solid var(--ci-color-line); }
.ffui-type-row:first-child { border-top: 0; }
.ffui-type-row > div:first-child { display: grid; }
.ffui-type-row > div:first-child strong { font-size: var(--ci-type-14); }
.ffui-type-row code { color: var(--ci-color-muted); font-family: var(--ci-font-mono); font-size: var(--ci-type-11); }
.ffui-type-row p { margin: 0; color: var(--ci-color-ink); }
.ffui-type-row dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ci-space-4); margin: 0; }
.ffui-type-row dl div { min-width: 0; }
.ffui-type-row dt { color: var(--ci-color-muted); font-size: var(--ci-type-11); }
.ffui-type-row dd { margin: 0; font-family: var(--ci-font-mono); font-size: var(--ci-type-12); }
.ffui-type-row.type-1 p { font-size: var(--ci-type-48); font-weight: 850; line-height: var(--ci-leading-52); letter-spacing: var(--ci-tracking-tight); }
.ffui-type-row.type-2 p { font-size: var(--ci-type-32); font-weight: 800; line-height: var(--ci-leading-36); letter-spacing: var(--ci-tracking-tight); }
.ffui-type-row.type-3 p { font-size: var(--ci-type-24); font-weight: 800; line-height: var(--ci-leading-28); letter-spacing: var(--ci-tracking-heading); }
.ffui-type-row.type-4 p { font-size: var(--ci-type-16); font-weight: 450; line-height: var(--ci-leading-24); }
.ffui-type-row.type-5 p { font-size: var(--ci-type-14); font-weight: 500; line-height: var(--ci-leading-20); font-variant-numeric: tabular-nums; }
.ffui-type-row.type-6 p { font-size: var(--ci-type-12); font-weight: 750; line-height: var(--ci-leading-16); letter-spacing: var(--ci-tracking-label); }

.ffui-reading-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ci-space-4); margin-top: var(--ci-space-6); }
.ffui-reading-compare article { min-width: 0; padding: var(--ci-space-6); border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-menu); background: rgba(255, 255, 255, .6); }
.ffui-reading-compare article > span { display: inline-flex; padding: 2px 8px; border-radius: var(--ci-radius-compact); font-size: var(--ci-type-11); font-weight: 800; }
.ffui-reading-compare article.is-bad > span { background: var(--ci-color-danger-soft); color: var(--ci-color-danger); }
.ffui-reading-compare article.is-good > span { background: var(--ci-color-success-soft); color: var(--ci-color-success); }
.ffui-reading-compare article > div { margin-top: var(--ci-space-5); }
.ffui-reading-compare .is-bad > div { font-size: var(--ci-type-12); line-height: 1.15; text-align: justify; }
.ffui-reading-compare .is-good > div { max-width: var(--ci-measure-reading); font-size: var(--ci-type-16); line-height: var(--ci-leading-24); }
.ffui-reading-compare small { display: block; margin-top: var(--ci-space-5); color: var(--ci-color-muted); font-family: var(--ci-font-mono); font-size: var(--ci-type-11); }

.ffui-density-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-space-6); margin-bottom: var(--ci-space-5); }
.ffui-density-picker { display: inline-flex; flex-wrap: wrap; gap: var(--ci-space-2); padding: var(--ci-space-2); border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-control); background: rgba(255, 255, 255, .62); }
.ffui-density-picker button { display: grid; min-height: 48px; justify-items: start; padding: 6px 12px; border: 0; border-radius: var(--ci-radius-compact); background: transparent; color: var(--ci-color-muted); cursor: pointer; }
.ffui-density-picker button strong { font-size: var(--ci-type-12); }
.ffui-density-picker button small { font-family: var(--ci-font-mono); font-size: .62rem; }
.ffui-density-picker button[aria-pressed="true"] { background: var(--ci-color-brand-700); color: #fff; box-shadow: 0 8px 18px rgba(31, 34, 29, .16); }
.ffui-density-output { color: var(--ci-color-brand-800); font-family: var(--ci-font-mono); font-size: var(--ci-type-11); font-weight: 750; text-align: right; }
.ffui-table-region:focus-visible { box-shadow: var(--ci-focus-ring); }
.ffui-data-table { min-width: 820px; }
.ffui-data-table th,
.ffui-data-table td { height: var(--ci-table-row-default); padding: var(--ci-table-pad-default-y) var(--ci-table-pad-default-x); border-top: 1px solid var(--ci-color-line); text-align: left; vertical-align: middle; white-space: nowrap; }
.ffui-data-table th { background: rgba(239, 237, 232, .78); color: var(--ci-color-ink-soft); font-size: var(--ci-type-12); font-weight: 800; letter-spacing: var(--ci-tracking-label); }
.ffui-data-table td { font-size: var(--ci-type-14); line-height: var(--ci-leading-20); }
.ffui-data-table tr:hover td { background: rgba(239, 237, 232, .44); }
.ffui-data-table .is-number { text-align: right; font-variant-numeric: tabular-nums; }
.ffui-data-table[data-density="dense"] th,
.ffui-data-table[data-density="dense"] td { height: var(--ci-table-row-dense); padding: var(--ci-table-pad-dense-y) var(--ci-table-pad-dense-x); }
.ffui-data-table[data-density="comfortable"] th,
.ffui-data-table[data-density="comfortable"] td { height: var(--ci-table-row-comfortable); padding: var(--ci-table-pad-comfortable-y) var(--ci-table-pad-comfortable-x); }
.ffui-table-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--ci-radius-round); font-size: var(--ci-type-11); font-weight: 800; }
.ffui-table-status::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.ffui-table-status.is-ready { background: var(--ci-color-success-soft); color: var(--ci-color-success); }
.ffui-table-status.is-waiting { background: var(--ci-color-info-soft); color: var(--ci-color-info); }
.ffui-table-status.is-warning { background: var(--ci-color-warning-soft); color: var(--ci-color-warning); }
.ffui-table-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ci-space-4); margin-top: var(--ci-space-5); }
.ffui-table-rules article { padding: var(--ci-space-5); border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-control); background: rgba(255, 255, 255, .54); }
.ffui-table-rules article.is-selected { border-color: var(--ci-color-line-strong); background: var(--ci-color-brand-100); }
.ffui-table-rules strong { font-size: var(--ci-type-14); }
.ffui-table-rules p { margin: 2px 0 0; color: var(--ci-color-muted); font-size: var(--ci-type-12); line-height: var(--ci-leading-16); }

.ffui-component-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ci-space-4); }
.ffui-demo { min-width: 0; padding: var(--ci-space-6); border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-menu); background: rgba(255, 255, 255, .62); }
.ffui-demo h3 { margin: 0; font-size: var(--ci-type-16); line-height: var(--ci-leading-24); }
.ffui-demo > p { margin: 2px 0 0; color: var(--ci-color-muted); font-size: var(--ci-type-12); line-height: var(--ci-leading-16); }
.ffui-demo-content { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-space-4); margin-top: var(--ci-space-6); }
.ffui-field-stack { display: grid; gap: var(--ci-space-5); margin-top: var(--ci-space-6); }
.ffui-field { display: grid; min-width: 0; gap: var(--ci-space-3); }
.ffui-field > span { color: var(--ci-color-ink-soft); font-size: var(--ci-type-12); font-weight: 800; letter-spacing: var(--ci-tracking-label); }
.ffui-field :where(input, select, textarea) { width: 100%; min-height: var(--ci-control-height-md); margin: 0; padding: 9px 12px; border: 1px solid var(--ci-color-line-strong); border-radius: var(--ci-radius-control); background: var(--ci-color-surface-strong); color: var(--ci-color-ink); font-size: var(--ci-type-14); line-height: var(--ci-leading-20); }
.ffui-field textarea { min-height: 96px; resize: vertical; }
.ffui-field small { color: var(--ci-color-muted); font-size: var(--ci-type-11); line-height: var(--ci-leading-16); }
.ffui-field.has-error :where(input, select, textarea) { border-color: rgba(169, 54, 45, .65); }
.ffui-field-error { display: inline-flex; align-items: center; gap: var(--ci-space-3); color: var(--ci-color-danger) !important; font-weight: 750; }
.ffui-segmented { display: inline-flex; flex-wrap: wrap; gap: var(--ci-space-2); margin: 0; padding: var(--ci-space-3); border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-round); background: rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(7, 56, 53, .06); }
.ffui-segmented label { position: relative; cursor: pointer; }
.ffui-segmented input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); opacity: 0; }
.ffui-segmented span { display: inline-flex; min-height: var(--ci-control-height-sm); align-items: center; justify-content: center; padding: 6px 14px; border-radius: var(--ci-radius-round); color: var(--ci-color-muted); font-size: var(--ci-type-12); font-weight: 800; transition: background var(--ci-motion-base) ease, color var(--ci-motion-base) ease, box-shadow var(--ci-motion-base) ease, transform var(--ci-motion-fast) ease; }
.ffui-segmented input:checked + span { background: var(--ci-color-brand-700); color: #fff; }
.ffui-segmented input:focus-visible + span { box-shadow: var(--ci-focus-ring); }
.ffui-segmented input:active + span { transform: scale(.98); }
.ffui-date-shortcuts { display: flex; flex-wrap: wrap; gap: var(--ci-space-3); }
.ffui-date-output { margin: 0; color: var(--ci-color-brand-800); font-size: var(--ci-type-12); font-weight: 750; }

.ffui-adoption-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ci-space-6); margin-top: var(--ci-space-10); }
.ffui-adoption-head .ffui-subsection-title { margin: var(--ci-space-3) 0 0; }
.ffui-adoption-head p { max-width: var(--ci-measure-reading); margin: var(--ci-space-3) 0 0; color: var(--ci-color-muted); font-size: var(--ci-type-14); line-height: var(--ci-leading-20); }
.ffui-ready-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--ci-space-5); margin-top: var(--ci-space-6); }
.ffui-ready-card { display: grid; min-width: 0; gap: var(--ci-space-6); padding: var(--ci-space-6); overflow: hidden; border: 1px solid rgba(7, 94, 89, .12); border-radius: var(--ci-radius-card); background: linear-gradient(150deg, rgba(255, 255, 255, .98), rgba(240, 247, 245, .88)); box-shadow: var(--ci-shadow-1); }
.ffui-ready-card-head { display: flex; min-width: 0; align-items: center; gap: var(--ci-space-4); }
.ffui-ready-card-head > div { min-width: 0; }
.ffui-ready-card-head span:not(.ffui-ready-icon) { display: block; color: var(--ci-color-brand-700); font-size: var(--ci-type-11); font-weight: 850; letter-spacing: var(--ci-tracking-eyebrow); }
.ffui-ready-card h4 { margin: 2px 0 0; color: var(--ci-color-ink); font-size: var(--ci-type-16); line-height: var(--ci-leading-20); }
.ffui-ready-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 14px; background: var(--ci-color-brand-100); color: var(--ci-color-brand-700); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.ffui-ready-icon .ffui-icon { width: 22px; height: 22px; }
.ffui-ready-icon.is-metric { background: var(--ci-color-info-soft); color: var(--ci-color-info); }
.ffui-ready-icon.is-operation { background: var(--ci-color-warning-soft); color: var(--ci-color-warning); }
.ffui-ready-icon.is-composer { background: #262b30; color: #fff; }
.ffui-segmented--wide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ffui-segmented--wide span { width: 100%; padding-inline: var(--ci-space-3); }
.ffui-smart-search { position: relative; display: block; }
.ffui-smart-search .ffui-icon { position: absolute; z-index: 1; top: 13px; left: 14px; width: 18px; height: 18px; color: var(--ci-color-muted); pointer-events: none; }
.ffui-smart-search input { width: 100%; min-height: var(--ci-control-height-md); padding: 9px 14px 9px 42px; border: 1px solid var(--ci-color-line-strong); border-radius: var(--ci-radius-round); outline: 0; background: #fff; color: var(--ci-color-ink); font: inherit; font-size: var(--ci-type-12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 7px 18px rgba(7, 56, 53, .05); }
.ffui-smart-search input:focus-visible { border-color: var(--ci-color-brand-600); box-shadow: var(--ci-focus-ring), 0 10px 24px rgba(7, 56, 53, .08); }
.ffui-check-list { display: grid; gap: var(--ci-space-3); margin: 0; padding: 0; border: 0; }
.ffui-check-list legend { margin-bottom: var(--ci-space-3); color: var(--ci-color-muted); font-size: var(--ci-type-11); font-weight: 800; }
.ffui-check { position: relative; display: flex; min-height: 42px; align-items: center; gap: var(--ci-space-4); padding: var(--ci-space-4) var(--ci-space-5); border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-control); background: rgba(255, 255, 255, .72); cursor: pointer; }
.ffui-check input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); opacity: 0; }
.ffui-check > span { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border: 1px solid var(--ci-color-line-strong); border-radius: 8px; background: #fff; color: transparent; transition: background var(--ci-motion-fast) ease, color var(--ci-motion-fast) ease, transform var(--ci-motion-fast) ease; }
.ffui-check > span .ffui-icon { width: 15px; height: 15px; }
.ffui-check b { color: var(--ci-color-ink-soft); font-size: var(--ci-type-12); }
.ffui-check input:checked + span { border-color: var(--ci-color-brand-700); background: var(--ci-color-brand-700); color: #fff; transform: rotate(-2deg); }
.ffui-check input:focus-visible + span { box-shadow: var(--ci-focus-ring); }
.ffui-metric-grid { display: grid; gap: var(--ci-space-4); }
.ffui-metric-card { display: grid; gap: var(--ci-space-3); padding: var(--ci-space-5); border: 1px solid rgba(7, 94, 89, .1); border-radius: var(--ci-radius-menu); background: #fff; }
.ffui-metric-card > div { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-space-4); color: var(--ci-color-muted); font-size: var(--ci-type-11); font-weight: 800; }
.ffui-metric-card > div .ffui-icon { width: 18px; height: 18px; color: var(--ci-color-brand-700); }
.ffui-metric-card > strong { color: var(--ci-color-ink); font-size: var(--ci-type-24); line-height: var(--ci-leading-28); letter-spacing: var(--ci-tracking-tight); }
.ffui-metric-card > strong em { color: var(--ci-color-muted); font-size: var(--ci-type-12); font-style: normal; font-weight: 750; letter-spacing: 0; }
.ffui-metric-card > small { color: var(--ci-color-warning); font-size: var(--ci-type-11); font-weight: 750; }
.ffui-metric-card > small.is-up { color: var(--ci-color-success); }
.ffui-spark { display: flex; height: 28px; align-items: end; gap: 4px; }
.ffui-spark i { height: var(--bar); flex: 1 1 0; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--ci-color-depth-accent), var(--ci-color-brand-700)); }
.ffui-metric-progress { height: 7px; overflow: hidden; border-radius: var(--ci-radius-round); background: var(--ci-color-brand-100); }
.ffui-metric-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ci-color-brand-700), var(--ci-color-depth-accent)); }
.ffui-metric-card.is-queue .ffui-metric-progress i { background: linear-gradient(90deg, var(--ci-color-warning), #e0aa36); }
.ffui-ready-note { margin: calc(var(--ci-space-2) * -1) 0 0; color: var(--ci-color-muted); font-size: var(--ci-type-11); line-height: var(--ci-leading-16); }
.ffui-next-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ci-space-5); padding: var(--ci-space-5); border: 1px solid rgba(7, 94, 89, .12); border-radius: var(--ci-radius-menu); background: #fff; }
.ffui-next-time { display: grid; align-content: center; align-self: stretch; padding-right: var(--ci-space-5); border-right: 1px solid var(--ci-color-line); text-align: center; }
.ffui-next-time strong { color: var(--ci-color-brand-800); font-size: var(--ci-type-20); }
.ffui-next-time span { color: var(--ci-color-muted); font-size: var(--ci-type-11); }
.ffui-next-copy { min-width: 0; }
.ffui-next-copy h5 { margin: var(--ci-space-3) 0 0; font-size: var(--ci-type-14); line-height: var(--ci-leading-20); }
.ffui-next-copy p { margin: 2px 0 0; color: var(--ci-color-muted); font-size: var(--ci-type-11); }
.ffui-next-card > button { grid-column: 2; justify-self: start; }
.ffui-ready-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ci-space-4); padding: var(--ci-space-5); border: 1px solid rgba(145, 100, 0, .18); border-radius: var(--ci-radius-menu); background: var(--ci-color-warning-soft); }
.ffui-ready-alert > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: #fff; color: var(--ci-color-warning); }
.ffui-ready-alert > span .ffui-icon { width: 20px; height: 20px; }
.ffui-ready-alert strong { color: var(--ci-color-ink); font-size: var(--ci-type-12); }
.ffui-ready-alert p { margin: 2px 0 0; color: var(--ci-color-muted); font-size: var(--ci-type-11); line-height: var(--ci-leading-16); }
.ffui-ready-alert button { grid-column: 2; justify-self: start; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--ci-color-warning); cursor: pointer; font: inherit; font-size: var(--ci-type-11); font-weight: 850; }
.ffui-ready-alert button:focus-visible { outline: 3px solid rgba(32, 167, 154, .35); outline-offset: 3px; }
.ffui-ready-sources { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-space-3); padding-top: var(--ci-space-4); border-top: 1px solid var(--ci-color-line); }
.ffui-ready-sources span { color: var(--ci-color-muted); font-size: var(--ci-type-11); font-weight: 800; }
.ffui-ready-sources a { padding: 3px 8px; border-radius: var(--ci-radius-round); background: var(--ci-color-brand-100); color: var(--ci-color-brand-800); font-size: var(--ci-type-11); font-weight: 800; text-decoration: none; }
.ffui-ready-sources a:focus-visible { outline: 3px solid rgba(32, 167, 154, .35); outline-offset: 2px; }

/* FFStock adaptation of Uiverse.io/Cobp/dangerous-dolphin-47 (MIT). */
.ffui-ready-card--composer { gap: var(--ci-space-5); }
.ffui-ai-composer { width: min(100%, 340px); }
.ffui-ai-composer__frame { position: relative; display: flex; padding: 1.5px; overflow: hidden; border-radius: 16px; background: linear-gradient(to bottom right, #8b8b8b, #363636 22%, #222 80%); box-shadow: 0 12px 28px rgba(7, 56, 53, .16); }
.ffui-ai-composer__frame::after { position: absolute; top: -10px; left: -10px; width: 32px; height: 32px; background: radial-gradient(ellipse at center, #fff, rgba(255, 255, 255, .3), rgba(255, 255, 255, .1), transparent 72%); content: ""; filter: blur(1px); pointer-events: none; }
.ffui-ai-composer__surface { display: flex; width: 100%; flex-direction: column; overflow: hidden; border-radius: 15px; background: rgba(0, 0, 0, .68); }
.ffui-ai-composer textarea { width: 100%; min-height: 76px; margin: 0; padding: 12px; border: 0; outline: 0; resize: vertical; background: transparent; color: #fff; font: inherit; font-size: var(--ci-type-12); line-height: var(--ci-leading-16); }
.ffui-ai-composer textarea::placeholder { color: #f3f6fd; transition: color var(--ci-motion-base) ease; }
.ffui-ai-composer textarea:focus::placeholder { color: #8b8b8b; }
.ffui-ai-composer textarea:focus-visible { box-shadow: inset 0 0 0 2px var(--ci-color-depth-accent); }
.ffui-ai-composer textarea::-webkit-scrollbar { width: 10px; height: 10px; }
.ffui-ai-composer textarea::-webkit-scrollbar-thumb { border-radius: 5px; background: #888; }
.ffui-ai-composer__actions { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ci-space-4); padding: 10px; }
.ffui-ai-composer__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ffui-ai-composer__tools button, .ffui-ai-composer__submit, .ffui-ai-composer__tags button { border: 0; cursor: pointer; font: inherit; }
.ffui-ai-composer__tools button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; background: transparent; color: rgba(255, 255, 255, .45); transition: transform var(--ci-motion-base) ease, color var(--ci-motion-base) ease; }
.ffui-ai-composer__tools button:hover { color: #fff; transform: translateY(-3px); }
.ffui-ai-composer__tools button:focus-visible, .ffui-ai-composer__submit:focus-visible, .ffui-ai-composer__tags button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ffui-ai-composer__tools .ffui-icon { width: 20px; height: 20px; }
.ffui-ai-composer__submit { display: grid; width: 36px; height: 36px; place-items: center; padding: 2px; border-radius: 10px; background: linear-gradient(to top, #292929, #555, #292929); color: #8b8b8b; box-shadow: inset 0 6px 2px -4px rgba(255, 255, 255, .5); transition: transform var(--ci-motion-fast) ease, color var(--ci-motion-base) ease, filter var(--ci-motion-base) ease; }
.ffui-ai-composer__submit .ffui-icon { width: 22px; height: 22px; }
.ffui-ai-composer__submit:hover, .ffui-ai-composer__submit:focus-visible { color: #f3f6fd; filter: drop-shadow(0 0 5px #fff); }
.ffui-ai-composer__submit:active { transform: scale(.92); }
.ffui-ai-composer__tags { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 10px; }
.ffui-ai-composer__tags button { min-height: 28px; padding: 4px 8px; border: 1.5px solid #363636; border-radius: 10px; background: #1b1b1b; color: #fff; font-size: var(--ci-type-10); user-select: none; }
.ffui-ai-composer__tags button:hover { border-color: #777; background: #292929; }

.ffui-icon-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--ci-space-3); margin-top: var(--ci-space-6); }
.ffui-icon-sample { display: grid; min-width: 0; min-height: 90px; place-items: center; align-content: center; gap: 2px; padding: var(--ci-space-4); border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-control); background: rgba(255, 255, 255, .58); color: var(--ci-color-ink); cursor: pointer; text-align: center; }
.ffui-icon-sample:hover { border-color: var(--ci-color-line-strong); background: var(--ci-color-brand-100); }
.ffui-icon-sample .ffui-icon { width: 23px; height: 23px; color: var(--ci-color-brand-700); }
.ffui-icon-sample strong { font-size: var(--ci-type-11); }
.ffui-icon-sample code { color: var(--ci-color-muted); font-family: var(--ci-font-mono); font-size: .58rem; }
.ffui-icon-library-block { display: grid; gap: var(--ci-space-4); margin-top: var(--ci-space-7); }
.ffui-icon-library-head { display: flex; align-items: end; justify-content: space-between; gap: var(--ci-space-5); }
.ffui-icon-library-head h3, .ffui-icon-library-head p { margin: 0; }
.ffui-icon-library-head p { margin-top: 2px; color: var(--ci-color-muted); font-size: var(--ci-type-12); }
.ffui-icon-library-head a { color: var(--ci-color-brand-700); font-size: var(--ci-type-12); font-weight: 800; }
.ffui-emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--ci-space-3); }
.ffui-emoji-sample { display: grid; min-width: 0; min-height: 112px; place-items: center; align-content: center; gap: 3px; padding: var(--ci-space-4); border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-control); background: #fff; color: var(--ci-color-ink); cursor: pointer; text-align: center; }
.ffui-emoji-sample:hover { border-color: var(--ci-color-brand-700); background: var(--ci-color-brand-100); transform: translateY(-2px); }
.ffui-emoji { width: 42px; height: 42px; }
.ffui-emoji-sample strong { font-size: var(--ci-type-11); }
.ffui-emoji-sample code { overflow: hidden; max-width: 100%; color: var(--ci-color-muted); font-family: var(--ci-font-mono); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.ffui-tabler-browser { display: grid; gap: var(--ci-space-5); margin-top: var(--ci-space-8); padding: var(--ci-space-6); border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-card); background: rgba(240, 247, 245, .78); }
.ffui-tabler-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) 180px auto; align-items: end; gap: var(--ci-space-4); }
.ffui-tabler-count { align-self: center; color: var(--ci-color-muted); font-size: var(--ci-type-12); font-weight: 800; }
.ffui-tabler-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--ci-space-3); }
.ffui-tabler-sample { display: grid; min-width: 0; min-height: 96px; place-items: center; align-content: center; gap: 2px; padding: var(--ci-space-3); border: 1px solid rgba(7, 94, 89, .1); border-radius: var(--ci-radius-control); background: #fff; color: var(--ci-color-ink); cursor: pointer; text-align: center; }
.ffui-tabler-sample:hover { border-color: var(--ci-color-brand-700); background: var(--ci-color-brand-100); transform: translateY(-1px); }
.ffui-tabler-sample svg { width: 28px; height: 28px; color: var(--ci-color-brand-700); }
.ffui-tabler-sample strong { overflow: hidden; max-width: 100%; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.ffui-tabler-sample small { overflow: hidden; max-width: 100%; color: var(--ci-color-muted); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.ffui-tabler-more { justify-self: center; }
.ffui-tabler-note { margin: 0; color: var(--ci-color-muted); font-size: var(--ci-type-12); }

.ffui-receipt-lab {
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr);
  gap: var(--ci-space-6);
}
.ffui-receipt-stage {
  position: relative;
  display: grid;
  min-height: 610px;
  place-items: center;
  align-content: center;
  gap: var(--ci-space-7);
  padding: clamp(24px, 5vw, 56px) var(--ci-space-6);
  overflow: hidden;
  border: 1px solid rgba(36, 39, 34, .1);
  border-radius: var(--ci-radius-card);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .92), transparent 18rem),
    #e8e8e8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), var(--ci-shadow-1);
  color: var(--ci-color-ink);
  isolation: isolate;
}
.ffui-receipt-stage::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(36, 39, 34, .1) .7px, transparent .7px);
  background-size: 8px 8px;
  opacity: .14;
  content: "";
}
.ffui-receipt-stage > small { color: var(--ci-color-muted); font-size: var(--ci-type-11); }
.ffui-receipt-printer {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(380px, 100%);
}
.ffui-receipt-slot {
  position: relative;
  z-index: 2;
  width: min(350px, calc(100% - 24px));
  height: 36px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--ci-radius-round);
  background: linear-gradient(90deg, rgba(63, 100, 125, .4), rgba(85, 194, 200, .9), rgba(140, 91, 181, .7), rgba(63, 100, 125, .4));
  background-size: 220% 100%;
  box-shadow: 0 0 26px rgba(85, 194, 200, .2);
  animation: ffui-receipt-slot 5.5s linear infinite;
}
.ffui-receipt-slot span { display: block; width: 100%; height: 100%; border-radius: inherit; background: #101318; box-shadow: inset 0 5px 8px rgba(0, 0, 0, .75); }
.ffui-receipt-mask {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 455px;
  margin-top: -18px;
  padding-top: 18px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, .08) 0, #000 20px);
  mask-image: linear-gradient(rgba(0, 0, 0, .08) 0, #000 20px);
  perspective: 1000px;
}
.ffui-receipt-card {
  --ffui-receipt-card-padding: var(--ci-space-8);
  position: relative;
  width: min(340px, calc(100% - 28px));
  padding: var(--ffui-receipt-card-padding);
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 18px 18px 10px 10px;
  background:
    linear-gradient(115deg, rgba(85, 194, 200, .34), rgba(255, 255, 255, .94) 34%, rgba(158, 128, 218, .24) 66%, rgba(145, 231, 210, .4)),
    #fffefc;
  box-shadow: 0 14px 34px rgba(42, 55, 62, .14), inset 0 1px 0 #fff;
  color: var(--ci-color-ink);
  transform: translateY(-110%);
  transform-origin: 50% 0;
  transition: box-shadow var(--ci-motion-slow) ease;
}
.ffui-receipt-card.is-visible { animation: ffui-receipt-eject 11s ease-in-out both; }
.ffui-receipt-card:hover { box-shadow: 0 18px 42px rgba(42, 55, 62, .18), inset 0 1px 0 #fff; }
.ffui-receipt-reflex {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.ffui-receipt-reflex::before {
  position: absolute;
  width: 70%;
  height: 160%;
  top: -30%;
  left: -95%;
  background: linear-gradient(100deg, transparent 25%, rgba(85, 194, 200, .13) 42%, rgba(140, 91, 181, .1) 54%, transparent 72%);
  content: "";
  transform: skewX(-18deg);
  animation: ffui-receipt-reflex 6.5s ease-in-out infinite;
}
.ffui-receipt-head,
.ffui-receipt-meta > div,
.ffui-receipt-items > div,
.ffui-receipt-total,
.ffui-receipt-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ci-space-5);
}
.ffui-receipt-head {
  position: relative;
  padding-bottom: var(--ci-space-7);
  border-bottom: 1px dashed var(--ci-color-line-strong);
}
.ffui-receipt-head::before,
.ffui-receipt-head::after {
  position: absolute;
  bottom: -8px;
  z-index: 2;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #e8e8e8;
  box-shadow: inset 0 0 0 1px rgba(36, 39, 34, .06), 0 1px 1px rgba(255, 255, 255, .72);
  content: "";
}
.ffui-receipt-head::before { left: calc((var(--ffui-receipt-card-padding) + 8px) * -1); }
.ffui-receipt-head::after { right: calc((var(--ffui-receipt-card-padding) + 8px) * -1); }
.ffui-receipt-head > div { display: grid; gap: 1px; }
.ffui-receipt-head strong { color: var(--ci-color-brand-800); font-size: var(--ci-type-16); letter-spacing: .05em; }
.ffui-receipt-head > div span,
.ffui-receipt-meta,
.ffui-receipt-card footer { color: var(--ci-color-muted); font-size: var(--ci-type-11); }
.ffui-receipt-paid { display: inline-flex; align-items: center; gap: var(--ci-space-2); padding: var(--ci-space-2) var(--ci-space-4); border-radius: var(--ci-radius-round); background: var(--ci-color-success-soft); color: var(--ci-color-success); font-size: var(--ci-type-11); font-weight: 850; white-space: nowrap; }
.ffui-receipt-paid .ffui-icon { width: 14px; height: 14px; }
.ffui-receipt-meta { display: grid; gap: var(--ci-space-3); margin: var(--ci-space-6) 0; }
.ffui-receipt-meta dt,
.ffui-receipt-meta dd { margin: 0; }
.ffui-receipt-meta dd { color: var(--ci-color-ink); font-weight: 700; text-align: right; }
.ffui-receipt-items { display: grid; gap: var(--ci-space-5); padding: var(--ci-space-6) 0; border-block: 1px dashed var(--ci-color-line-strong); }
.ffui-receipt-items span { min-width: 0; font-size: var(--ci-type-14); }
.ffui-receipt-items b { flex: 0 0 auto; font-size: var(--ci-type-14); font-variant-numeric: tabular-nums; }
.ffui-receipt-total { padding: var(--ci-space-7) 0; }
.ffui-receipt-total > span { color: var(--ci-color-muted); font-size: var(--ci-type-12); font-weight: 750; }
.ffui-receipt-total strong { color: var(--ci-color-brand-800); font-size: var(--ci-type-20); font-variant-numeric: tabular-nums; }
.ffui-receipt-card footer { padding-top: var(--ci-space-5); }
.ffui-receipt-barcode { display: block; width: 112px; height: 28px; background: repeating-linear-gradient(90deg, var(--ci-color-ink) 0 2px, transparent 2px 4px, var(--ci-color-ink) 4px 5px, transparent 5px 8px); }

.ffui-code-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--ci-radius-card); background: #13171c; box-shadow: var(--ci-shadow-1); color: #e9eef2; }
.ffui-code-toolbar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--ci-space-5); padding: var(--ci-space-5); border-bottom: 1px solid rgba(255, 255, 255, .08); background: #1a1f25; }
.ffui-code-tabs { display: inline-flex; min-width: 0; gap: var(--ci-space-2); }
.ffui-code-tabs button,
.ffui-code-copy { min-height: 38px; padding: var(--ci-space-3) var(--ci-space-5); border: 1px solid transparent; border-radius: var(--ci-radius-compact); background: transparent; color: #9fa9b3; cursor: pointer; font-size: var(--ci-type-12); font-weight: 800; }
.ffui-code-tabs button[aria-selected="true"] { border-color: rgba(85, 194, 200, .32); background: rgba(85, 194, 200, .1); color: #fff; }
.ffui-code-copy { display: inline-flex; align-items: center; gap: var(--ci-space-3); border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: #e9eef2; }
.ffui-code-copy:hover { border-color: rgba(85, 194, 200, .38); background: rgba(85, 194, 200, .09); }
.ffui-code-panel { min-height: 466px; }
.ffui-code-panel[hidden] { display: none; }
.ffui-code-panel pre { height: 466px; margin: 0; padding: var(--ci-space-7); overflow: auto; tab-size: 2; }
.ffui-code-panel code { color: #d9e0e6; font-family: var(--ci-font-mono); font-size: .76rem; line-height: 1.7; white-space: pre; }
.ffui-code-note { display: grid; gap: var(--ci-space-2); padding: var(--ci-space-5) var(--ci-space-7); border-top: 1px solid rgba(255, 255, 255, .08); background: #1a1f25; }
.ffui-code-note strong { color: #fff; font-size: var(--ci-type-12); }
.ffui-code-note span { color: #aeb7bf; font-size: var(--ci-type-11); line-height: var(--ci-leading-16); }

@keyframes ffui-receipt-slot {
  to { background-position: -220% 0; }
}
@keyframes ffui-receipt-eject {
  0% { transform: translateY(-110%); }
  7% { transform: translateY(-96%); }
  12% { transform: translateY(-78%); }
  16% { transform: translateY(-64%); }
  22% { transform: translateY(-40%); }
  27% { transform: translateY(-15%); }
  34%, 100% { transform: translateY(0); }
}
@keyframes ffui-receipt-reflex {
  0%, 28% { left: -95%; }
  60%, 100% { left: 145%; }
}

.ffui-feedback-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: var(--ci-space-4); }
.ffui-feedback-stack { display: grid; gap: var(--ci-space-4); }
.ffui-popover { width: min(340px, calc(100vw - 24px)); margin: 0; padding: var(--ci-space-6); border: 1px solid var(--ci-color-line-strong); border-radius: var(--ci-radius-menu); background: rgba(255, 254, 252, .98); color: var(--ci-color-ink); box-shadow: var(--ci-shadow-2); }
.ffui-popover[hidden] { display: none; }
.ffui-popover:popover-open { animation: ffui-pop-in var(--ci-motion-base) var(--ci-ease-standard) both; }
.ffui-popover strong, .ffui-popover p { display: block; margin: 0; }
.ffui-popover p { margin-top: 3px; color: var(--ci-color-muted); font-size: var(--ci-type-12); line-height: var(--ci-leading-16); }
.ffui-dialog { width: min(560px, calc(100vw - 24px)); max-height: min(84vh, 720px); padding: 0; overflow: auto; border: 1px solid rgba(255, 255, 255, .74); border-radius: var(--ci-radius-dialog); background: rgba(255, 254, 252, .98); color: var(--ci-color-ink); box-shadow: var(--ci-shadow-3); }
.ffui-dialog::backdrop { background: rgba(31, 34, 29, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ffui-dialog[open] { animation: ffui-dialog-in var(--ci-motion-base) var(--ci-ease-standard) both; }
.ffui-dialog-head, .ffui-dialog-body, .ffui-dialog-actions { padding: var(--ci-space-7); }
.ffui-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ci-space-5); border-bottom: 1px solid var(--ci-color-line); }
.ffui-dialog-head-actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--ci-space-3); }
.ffui-dialog-head h3 { margin: 2px 0 0; font-size: var(--ci-type-24); line-height: var(--ci-leading-28); letter-spacing: var(--ci-tracking-heading); }
.ffui-dialog-head p { margin: 2px 0 0; color: var(--ci-color-muted); font-size: var(--ci-type-14); }
.ffui-dialog-actions { display: flex; justify-content: flex-end; gap: var(--ci-space-4); border-top: 1px solid var(--ci-color-line); }
.ffui-media-preview-dialog { box-sizing: border-box; width: min(var(--ffui-media-preview-width, 760px), calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: hidden; }
.ffui-media-preview-body { display: grid; width: 100%; height: min(var(--ffui-media-preview-height, 640px), calc(100vh - 132px)); min-height: 180px; place-items: center; overflow: hidden; padding: 0; background: #eef2ef; }
.ffui-media-preview-body img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.ffui-media-preview-body iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.ffui-media-preview-error { align-self: center; max-width: 36ch; margin: var(--ci-space-6); color: var(--ci-color-danger); text-align: center; }

.ffui-sticker-set-nav {
  display: flex;
  gap: var(--ci-space-4);
  margin-block: var(--ci-space-7);
  padding: 2px 2px var(--ci-space-4);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.ffui-sticker-set-nav a {
  display: grid;
  flex: 0 0 min(220px, 72vw);
  gap: 2px;
  min-height: 58px;
  padding: var(--ci-space-4) var(--ci-space-5);
  border: 1px solid var(--ci-color-line);
  border-radius: var(--ci-radius-control);
  background: var(--ci-color-surface-strong);
  color: var(--ci-color-ink);
  text-decoration: none;
  transition: border-color var(--ci-motion-fast), box-shadow var(--ci-motion-fast), transform var(--ci-motion-fast);
}
.ffui-sticker-set-nav a:hover { border-color: var(--ci-color-brand-700); transform: translateY(-1px); }
.ffui-sticker-set-nav a:focus-visible { outline: 3px solid var(--ci-color-depth-accent); outline-offset: 2px; }
.ffui-sticker-set-nav a[aria-current="true"] { border-color: var(--ci-color-brand-700); background: var(--ci-color-brand-100); box-shadow: inset 0 0 0 1px var(--ci-color-brand-700); }
.ffui-sticker-set-nav strong { font-size: var(--ci-type-14); line-height: var(--ci-leading-20); }
.ffui-sticker-set-nav span { color: var(--ci-color-muted); font-size: var(--ci-type-12); }
.ffui-sticker-library { display: grid; gap: var(--ci-space-6); }
.ffui-sticker-library-head { display: flex; align-items: end; justify-content: space-between; gap: var(--ci-space-6); }
.ffui-sticker-library-head h3 { margin: var(--ci-space-2) 0; font-size: var(--ci-type-24); line-height: var(--ci-leading-28); }
.ffui-sticker-library-head p { max-width: 66ch; margin: 0; color: var(--ci-color-muted); }
.ffui-sticker-count { flex: 0 0 auto; padding: var(--ci-space-3) var(--ci-space-5); border-radius: var(--ci-radius-round); background: var(--ci-color-brand-100); color: var(--ci-color-brand-800); font-size: var(--ci-type-14); font-weight: 800; }
.ffui-sticker-toolbar { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 2fr); gap: var(--ci-space-5); align-items: end; padding: var(--ci-space-5); border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-menu); background: rgba(255, 255, 255, .7); }
.ffui-sticker-tag-filters { display: flex; gap: var(--ci-space-3); padding-block: 2px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.ffui-sticker-tag-filters button,
.ffui-sticker-tag-group button {
  min-height: 32px;
  padding: var(--ci-space-2) var(--ci-space-4);
  border: 1px solid var(--ci-color-line);
  border-radius: var(--ci-radius-round);
  background: var(--ci-color-surface-strong);
  color: var(--ci-color-muted);
  font: inherit;
  font-size: var(--ci-type-12);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.ffui-sticker-tag-filters button:hover,
.ffui-sticker-tag-group button:hover { border-color: var(--ci-color-brand-700); color: var(--ci-color-brand-800); }
.ffui-sticker-tag-filters button:focus-visible,
.ffui-sticker-tag-group button:focus-visible { outline: 3px solid var(--ci-color-depth-accent); outline-offset: 2px; }
.ffui-sticker-tag-filters button[aria-pressed="true"] { border-color: var(--ci-color-brand-700); background: var(--ci-color-brand-800); color: #fff; }
.ffui-sticker-tag-filters small { margin-inline-start: var(--ci-space-2); opacity: .78; font: inherit; }
.ffui-sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--ci-space-5); }
.ffui-sticker-card { min-width: 0; overflow: hidden; border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-menu); background: var(--ci-color-surface-strong); box-shadow: var(--ci-shadow-1); }
.ffui-sticker-card[hidden] { display: none !important; }
.ffui-sticker-preview { position: relative; display: grid; width: 100%; aspect-ratio: 370 / 320; place-items: center; overflow: hidden; padding: var(--ci-space-4); border: 0; border-bottom: 1px solid var(--ci-color-line); border-radius: 0; background-color: #f2f6f4; background-image: linear-gradient(45deg, rgba(7, 94, 89, .035) 25%, transparent 25%), linear-gradient(-45deg, rgba(7, 94, 89, .035) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(7, 94, 89, .035) 75%), linear-gradient(-45deg, transparent 75%, rgba(7, 94, 89, .035) 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; cursor: zoom-in; }
.ffui-sticker-preview img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform var(--ci-motion-base); }
.ffui-sticker-preview > span { position: absolute; right: var(--ci-space-4); bottom: var(--ci-space-4); display: inline-flex; align-items: center; gap: var(--ci-space-2); padding: var(--ci-space-2) var(--ci-space-4); border-radius: var(--ci-radius-round); background: rgba(7, 35, 33, .82); color: #fff; font-size: var(--ci-type-12); font-weight: 700; opacity: 0; transform: translateY(4px); transition: opacity var(--ci-motion-fast), transform var(--ci-motion-fast); }
.ffui-sticker-preview:hover img { transform: scale(1.025); }
.ffui-sticker-preview:hover > span,
.ffui-sticker-preview:focus-visible > span { opacity: 1; transform: translateY(0); }
.ffui-sticker-preview:focus-visible { outline: 3px solid var(--ci-color-depth-accent); outline-offset: -3px; }
.ffui-sticker-card-copy { display: grid; gap: var(--ci-space-4); padding: var(--ci-space-5); }
.ffui-sticker-card-copy > strong { overflow: hidden; color: var(--ci-color-ink); font-size: var(--ci-type-14); line-height: var(--ci-leading-20); text-overflow: ellipsis; white-space: nowrap; }
.ffui-sticker-tag-group { display: grid; gap: var(--ci-space-2); }
.ffui-sticker-tag-group > span { color: var(--ci-color-brand-800); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ffui-sticker-tag-group > div { display: flex; flex-wrap: wrap; gap: var(--ci-space-2); }
.ffui-sticker-tag-group button { min-height: 28px; padding-inline: var(--ci-space-3); background: var(--ci-color-brand-100); color: var(--ci-color-brand-800); }
.ffui-sticker-tag-group.is-internal > span { color: var(--ci-color-muted); }
.ffui-sticker-tag-group.is-internal button { background: #f2f4f3; color: var(--ci-color-muted); }
.ffui-sticker-library-state { display: grid; justify-items: center; gap: var(--ci-space-3); padding: var(--ci-space-9); border: 1px dashed var(--ci-color-line); border-radius: var(--ci-radius-menu); color: var(--ci-color-muted); text-align: center; }
.ffui-sticker-library-state[hidden] { display: none !important; }
.ffui-sticker-library-state .ffui-icon { width: 32px; height: 32px; color: var(--ci-color-brand-700); }
.ffui-sticker-library-state strong { color: var(--ci-color-ink); }
.ffui-upload-dropzone { display: grid; min-height: 180px; place-items: center; padding: var(--ci-space-7); border: 2px dashed #b9c9c0; border-radius: var(--ci-radius-card); background: #f8fbf9; text-align: center; cursor: pointer; }
.ffui-upload-dropzone.is-dragover { border-color: var(--ci-color-brand); background: #eef8f2; }
.ffui-upload-dropzone strong, .ffui-upload-dropzone span { display: block; }
.ffui-upload-dropzone span { margin-top: var(--ci-space-2); color: var(--ci-color-muted); font-size: var(--ci-type-14); }
.ffui-upload-dropzone svg { width: 36px; height: 36px; margin-bottom: var(--ci-space-3); color: var(--ci-color-brand); }
.ffui-upload-camera-actions { display:flex; justify-content:flex-end; margin-top:var(--ci-space-3); }
.ffui-upload-camera-actions .ffui-button { gap:var(--ci-space-2); }
.ffui-upload-camera-actions svg { width:20px; height:20px; }
.ffui-upload-selection { display: grid; gap: var(--ci-space-1); margin: var(--ci-space-4) 0 0; padding-left: 22px; font-size: var(--ci-type-14); }
.ffui-upload-progress { display: grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--ci-space-3); margin-top:var(--ci-space-4); }
.ffui-upload-progress[hidden] { display:none; }
.ffui-upload-progress-track { height:8px; overflow:hidden; border-radius:999px; background:var(--ci-color-line); }
.ffui-upload-progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:var(--ci-color-brand); transition:width var(--ci-motion-fast) linear; }
.ffui-upload-progress>strong { min-width:38px; color:var(--ci-color-ink); font-size:var(--ci-type-14); text-align:right; font-variant-numeric:tabular-nums; }
.ffui-upload-status { min-height: 20px; margin: var(--ci-space-3) 0 0; color: var(--ci-color-muted); font-size: var(--ci-type-14); font-weight: var(--ci-weight-semibold); }
.ffui-upload-status.is-error { color: var(--ci-color-danger); }
.ffui-upload-status.is-success { color: var(--ci-color-success); }
.ffui-toast-region { position: fixed; z-index: 5000; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: grid; width: min(380px, calc(100vw - 32px)); gap: var(--ci-space-4); pointer-events: none; }
.ffui-toast { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ci-space-4); padding: var(--ci-space-5) var(--ci-space-6); border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--ci-radius-control); background: rgba(32, 35, 31, .96); color: #fff; box-shadow: var(--ci-shadow-2); pointer-events: auto; animation: ffui-toast-in var(--ci-motion-base) var(--ci-ease-standard) both; }
.ffui-toast strong { font-size: var(--ci-type-14); }
.ffui-toast.is-leaving { animation: ffui-toast-out var(--ci-motion-fast) ease both; }

.ffui-reference-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ci-space-5); margin-bottom: var(--ci-space-6); padding: var(--ci-space-6); border: 1px solid rgba(11, 131, 122, .18); border-radius: var(--ci-radius-menu); background: var(--ci-color-brand-100); color: var(--ci-color-brand-800); }
.ffui-reference-notice .ffui-icon { width: 22px; height: 22px; margin-top: 1px; }
.ffui-reference-notice strong, .ffui-reference-notice p { display: block; margin: 0; }
.ffui-reference-notice p { margin-top: 3px; color: var(--ci-color-ink-soft); font-size: var(--ci-type-12); line-height: var(--ci-leading-20); }
.ffui-direction-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--ci-space-4); }
.ffui-direction-card { grid-column: span 4; display: grid; grid-template-rows: 240px auto; min-width: 0; overflow: hidden; border: 1px solid rgba(7, 94, 89, .1); border-radius: var(--ci-radius-menu); background: rgba(255, 255, 255, .9); color: var(--ci-color-ink); box-shadow: 0 8px 24px rgba(7, 56, 53, .05); text-decoration: none; transition: border-color var(--ci-motion-fast) var(--ci-ease-standard), box-shadow var(--ci-motion-fast) var(--ci-ease-standard), transform var(--ci-motion-fast) var(--ci-ease-standard); }
.ffui-direction-card.is-wide { grid-column: span 6; grid-template-rows: 280px auto; }
.ffui-direction-card.is-detail { grid-column: span 3; grid-template-rows: 210px auto; }
.ffui-direction-card.is-tall { grid-column: span 3; grid-row: span 2; grid-template-rows: 340px auto; }
.ffui-direction-card.is-page { grid-column: span 4; grid-row: span 2; grid-template-rows: 420px auto; }
.ffui-direction-card:hover { border-color: rgba(11, 131, 122, .38); box-shadow: 0 16px 36px rgba(7, 56, 53, .1); transform: translateY(-2px); }
.ffui-direction-card:focus-visible { outline: 3px solid var(--ci-color-focus); outline-offset: 3px; }
.ffui-direction-preview { display: grid; min-height: 0; place-items: center; overflow: hidden; padding: var(--ci-space-4); background: linear-gradient(145deg, #f1f4f3, #fff); cursor: zoom-in; }
.ffui-direction-preview img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--ci-motion-base) var(--ci-ease-standard); }
.ffui-direction-card:hover .ffui-direction-preview img { transform: scale(1.02); }
.ffui-direction-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: var(--ci-space-5); }
.ffui-direction-copy small { color: var(--ci-color-brand-700); font-size: var(--ci-type-11); font-weight: 800; letter-spacing: var(--ci-tracking-label); }
.ffui-direction-copy strong { margin-top: 3px; font-size: var(--ci-type-14); line-height: var(--ci-leading-20); }
.ffui-direction-copy em { margin-top: 3px; color: var(--ci-color-muted); font-size: var(--ci-type-11); font-style: normal; line-height: var(--ci-leading-16); }
.ffui-direction-copy b { margin-top: var(--ci-space-4); color: var(--ci-color-brand-800); font-size: var(--ci-type-11); }

.ffui-source-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ci-space-4); }
.ffui-source-grid article { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: var(--ci-space-6); border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-menu); background: rgba(255, 255, 255, .58); }
.ffui-source-grid article > span { color: var(--ci-color-brand-700); font-size: var(--ci-type-11); font-weight: 800; letter-spacing: var(--ci-tracking-label); }
.ffui-source-grid strong { display: block; margin-top: var(--ci-space-3); font-size: var(--ci-type-16); }
.ffui-source-grid p { flex: 1 1 auto; margin: var(--ci-space-3) 0 var(--ci-space-5); color: var(--ci-color-muted); font-size: var(--ci-type-12); line-height: var(--ci-leading-16); }
.ffui-source-grid a { color: var(--ci-color-brand-800); font-size: var(--ci-type-12); font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ffui-source-grid small { color: var(--ci-color-muted); font-size: var(--ci-type-11); }
.ffui-subsection-title { margin: var(--ci-space-9) 0 var(--ci-space-5); font-size: var(--ci-type-20); line-height: var(--ci-leading-24); }
.ffui-asset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ci-space-4); }
.ffui-asset { display: grid; grid-template-rows: 150px auto; min-width: 0; overflow: hidden; border: 1px solid var(--ci-color-line); border-radius: var(--ci-radius-menu); background: rgba(255, 255, 255, .62); }
.ffui-asset-preview { display: grid; place-items: center; padding: var(--ci-space-4); overflow: hidden; background: linear-gradient(145deg, rgba(199, 194, 184, .2), rgba(255, 255, 255, .78)); }
.ffui-asset img { width: 100%; height: 100%; object-fit: contain; }
.ffui-asset-copy { padding: var(--ci-space-5); }
.ffui-asset-copy strong, .ffui-asset-copy small { display: block; }
.ffui-asset-copy strong { font-size: var(--ci-type-14); }
.ffui-asset-copy small { margin-top: 2px; color: var(--ci-color-muted); font-size: var(--ci-type-11); line-height: var(--ci-leading-16); }

.ffui-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.ffui-uiverse-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ci-space-6); margin-top: var(--ci-space-10); }
.ffui-uiverse-heading .ffui-subsection-title { margin: var(--ci-space-3) 0 0; }
.ffui-uiverse-heading p { max-width: var(--ci-measure-reading); margin: var(--ci-space-3) 0 0; color: var(--ci-color-muted); font-size: var(--ci-type-14); line-height: var(--ci-leading-20); }
.ffui-reference-notice--caution { margin-top: var(--ci-space-5); border-color: rgba(186, 124, 10, .2); background: #fff7e2; color: #805800; }
.ffui-uiverse-notebook { margin-top: var(--ci-space-6); }
.ffui-uiverse-toolbar { display: grid; grid-template-columns: minmax(260px, 1.5fr) minmax(180px, .7fr) minmax(190px, .7fr) auto; align-items: end; gap: var(--ci-space-4); padding: var(--ci-space-5); border: 1px solid rgba(7, 94, 89, .12); border-radius: var(--ci-radius-menu); background: rgba(247, 251, 250, .88); }
.ffui-uiverse-toolbar label { display: grid; gap: var(--ci-space-3); min-width: 0; color: var(--ci-color-ink-soft); font-size: var(--ci-type-11); font-weight: 800; }
.ffui-uiverse-toolbar input, .ffui-uiverse-toolbar select { width: 100%; min-height: 44px; padding: 0 var(--ci-space-5); border: 1px solid var(--ci-color-line-strong); border-radius: var(--ci-radius-control); background: #fff; color: var(--ci-color-ink); font: inherit; font-size: var(--ci-type-14); font-weight: 600; }
.ffui-uiverse-toolbar input:focus-visible, .ffui-uiverse-toolbar select:focus-visible { outline: 3px solid var(--ci-color-focus); outline-offset: 2px; }
.ffui-uiverse-search { position: relative; }
.ffui-uiverse-search .ffui-icon { position: absolute; z-index: 1; top: 13px; left: var(--ci-space-5); width: 18px; height: 18px; color: var(--ci-color-muted); }
.ffui-uiverse-search input { padding-left: 42px; }
.ffui-uiverse-count { align-self: center; min-width: 142px; color: var(--ci-color-brand-800); font-size: var(--ci-type-12); font-weight: 800; text-align: right; }
.ffui-uiverse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--ci-space-5); margin-top: var(--ci-space-5); }
.ffui-uiverse-empty { grid-column: 1 / -1; margin: 0; padding: var(--ci-space-8); border: 1px dashed var(--ci-color-line-strong); border-radius: var(--ci-radius-menu); color: var(--ci-color-muted); text-align: center; }
.ffui-uiverse-card { display: flex; min-width: 0; flex-direction: column; padding: var(--ci-space-6); overflow: hidden; border: 1px solid rgba(7, 94, 89, .12); border-radius: var(--ci-radius-card); background: rgba(255, 255, 255, .9); box-shadow: 0 8px 24px rgba(7, 56, 53, .05); }
.ffui-uiverse-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ci-space-4); }
.ffui-uiverse-badges, .ffui-uiverse-tags { display: flex; flex-wrap: wrap; gap: var(--ci-space-3); }
.ffui-uiverse-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 9px; border: 1px solid rgba(11, 131, 122, .14); border-radius: var(--ci-radius-round); background: var(--ci-color-brand-100); color: var(--ci-color-brand-800); font-size: var(--ci-type-11); font-weight: 800; }
.ffui-uiverse-badge.is-css { border-color: rgba(35, 127, 186, .16); background: #ebf7ff; color: #165e8a; }
.ffui-uiverse-badge.is-tailwind { border-color: rgba(14, 165, 233, .18); background: #ecfeff; color: #0e7490; }
.ffui-uiverse-badge.is-tag { min-height: 22px; padding: 2px 8px; border-color: var(--ci-color-line); background: #f6f7f7; color: var(--ci-color-muted); font-weight: 700; }
.ffui-uiverse-number { flex: 0 0 auto; color: var(--ci-color-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--ci-type-11); font-weight: 800; }
.ffui-uiverse-card h4 { margin: var(--ci-space-5) 0 0; font-size: var(--ci-type-20); line-height: var(--ci-leading-24); letter-spacing: var(--ci-tracking-heading); }
.ffui-uiverse-byline, .ffui-uiverse-summary { margin: 0; }
.ffui-uiverse-byline { margin-top: var(--ci-space-3); color: var(--ci-color-brand-700); font-size: var(--ci-type-12); font-weight: 800; }
.ffui-uiverse-summary { flex: 1 1 auto; margin-top: var(--ci-space-4); color: var(--ci-color-muted); font-size: var(--ci-type-12); line-height: var(--ci-leading-20); }
.ffui-uiverse-tags { margin-top: var(--ci-space-5); }
.ffui-uiverse-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ci-space-3); margin-top: var(--ci-space-5); }
.ffui-uiverse-actions a, .ffui-uiverse-actions button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: var(--ci-space-3) var(--ci-space-4); border: 1px solid var(--ci-color-line-strong); border-radius: var(--ci-radius-control); background: #fff; color: var(--ci-color-brand-800); cursor: pointer; font: inherit; font-size: var(--ci-type-11); font-weight: 800; text-align: center; text-decoration: none; }
.ffui-uiverse-actions a { grid-column: 1 / -1; border-color: transparent; background: var(--ci-color-brand-800); color: #fff; }
.ffui-uiverse-actions a:hover, .ffui-uiverse-actions button:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(7, 56, 53, .1); }
.ffui-uiverse-actions a:focus-visible, .ffui-uiverse-actions button:focus-visible { outline: 3px solid var(--ci-color-focus); outline-offset: 2px; }
.ffui-uiverse-preview { position: relative; display: grid; min-height: 220px; place-items: center; margin: var(--ci-space-5) calc(var(--ci-space-6) * -1) 0; overflow: hidden; border-block: 1px solid var(--ci-color-line); background: #edf2f7; }
.ffui-uiverse-preview iframe { display: block; width: 100%; height: 340px; border: 0; background: #edf2f7; }
.ffui-uiverse-preview-placeholder { margin: 0; padding: var(--ci-space-6); color: var(--ci-color-muted); font-size: var(--ci-type-12); font-weight: 750; text-align: center; }
.ffui-uiverse-preview--external { align-content: center; gap: var(--ci-space-3); padding: var(--ci-space-7); background: linear-gradient(145deg, #ecfeff, #f4fbff); color: #0e7490; text-align: center; }
.ffui-uiverse-preview--external .ffui-icon { width: 28px; height: 28px; }
.ffui-uiverse-preview--external strong { font-size: var(--ci-type-14); }
.ffui-uiverse-preview--external p { max-width: 34ch; margin: 0; color: var(--ci-color-muted); font-size: var(--ci-type-11); line-height: var(--ci-leading-16); }
.ffui-uiverse-preview--external a { color: #0e7490; font-size: var(--ci-type-12); font-weight: 850; }
.ffui-uiverse-more { margin: var(--ci-space-6) auto 0; }
.ffui-uiverse-dialog { width: min(1060px, calc(100vw - 24px)); }
.ffui-uiverse-codebar { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-space-5); padding: var(--ci-space-4) var(--ci-space-6); border-top: 1px solid #303030; border-bottom: 1px solid #303030; background: #202020; }
.ffui-uiverse-tabs { display: flex; min-width: 0; gap: var(--ci-space-3); }
.ffui-uiverse-tabs button { min-width: 122px; min-height: 42px; padding: 0 var(--ci-space-5); border: 0; border-radius: var(--ci-radius-compact); background: transparent; color: #a9adb3; cursor: pointer; font: inherit; font-weight: 800; }
.ffui-uiverse-tabs button[aria-selected="true"] { background: #151515; color: #fff; box-shadow: inset 0 -2px #1ba3e5; }
.ffui-uiverse-tabs button:focus-visible { outline: 3px solid #55c2c8; outline-offset: 2px; }
.ffui-uiverse-codebar .ffui-code-copy { flex: 0 0 auto; min-height: 42px; background: #333; }
.ffui-uiverse-code { height: min(58vh, 620px); margin: 0; padding: var(--ci-space-6); overflow: auto; background: #151515; color: #e6edf3; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; line-height: 1.65; tab-size: 2; white-space: pre; }
.ffui-uiverse-code code { font: inherit; }

.ffui-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-space-6); margin-top: var(--ci-space-8); padding: var(--ci-space-6); border-top: 1px solid var(--ci-color-line-strong); color: var(--ci-color-ink-soft); }
.ffui-footer > div { display: grid; }
.ffui-footer strong { font-size: var(--ci-type-14); }
.ffui-footer span { color: var(--ci-color-muted); font-size: var(--ci-type-11); }
.ffui-footer a { color: var(--ci-color-brand-800); font-size: var(--ci-type-12); font-weight: 800; }

/* Owner visual direction refresh — 2026-08-08. */
.ffui-standalone {
  background-image:
    radial-gradient(circle at 8% 2%, rgba(255, 255, 255, .86), transparent 28rem),
    radial-gradient(circle at 94% 14%, rgba(47, 211, 179, .13), transparent 32rem),
    linear-gradient(180deg, var(--ci-color-bg-top) 0%, var(--ci-color-bg-mid) 28%, var(--ci-color-bg-bottom) 78%);
}
.ffui-standalone::before { top: 18%; left: -18rem; background: #bdebe1; opacity: .24; }
.ffui-standalone::after { right: -18rem; bottom: 0; background: #c5e9f5; opacity: .22; }

.ffui-topbar {
  border-color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 14px 38px rgba(7, 56, 53, .08);
}
.ffui-wordmark-icon {
  background: linear-gradient(145deg, var(--ci-color-brand-600), var(--ci-color-brand-800));
  box-shadow: 0 10px 24px rgba(7, 94, 89, .24), 0 0 0 5px rgba(32, 167, 154, .08);
}
.ffui-section-nav {
  border-color: rgba(7, 94, 89, .08);
  background: rgba(247, 251, 250, .88);
  box-shadow: 0 10px 28px rgba(7, 56, 53, .06);
}
.ffui-section-nav a:hover {
  background: #fff;
  color: var(--ci-color-brand-800);
  box-shadow: 0 6px 16px rgba(7, 94, 89, .08);
}

.ffui-hero,
.ffui-section {
  border-color: rgba(7, 94, 89, .09);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 54px rgba(7, 56, 53, .08);
}
.ffui-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .98) 0 58%, rgba(227, 245, 241, .9) 100%);
}
.ffui-hero::before,
.ffui-hero::after {
  position: absolute;
  z-index: -1;
  border-radius: 62% 38% 56% 44%;
  content: "";
  pointer-events: none;
}
.ffui-hero::before {
  width: 310px;
  height: 190px;
  top: -76px;
  right: -42px;
  background: linear-gradient(135deg, rgba(47, 211, 179, .3), rgba(11, 131, 122, .06));
  transform: rotate(-18deg);
  box-shadow: -92px 98px 0 -36px rgba(35, 127, 186, .08);
}
.ffui-hero::after {
  width: 240px;
  height: 150px;
  right: 18%;
  bottom: -108px;
  background: rgba(32, 167, 154, .08);
  transform: rotate(16deg);
}
.ffui-hero h1 { max-width: 12ch; font-weight: 760; line-height: 1.01; }
.ffui-hero h1 em { color: var(--ci-color-brand-700); }
.ffui-hero-spec {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, .22);
  background:
    radial-gradient(circle at 92% 12%, rgba(92, 231, 183, .38), transparent 9rem),
    linear-gradient(145deg, #0a8c80, #075e59 72%);
  color: #fff;
  box-shadow: 0 24px 58px rgba(7, 94, 89, .25), inset 0 1px 0 rgba(255, 255, 255, .24);
}
.ffui-spec-orb { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 10px 24px rgba(3, 47, 44, .2); }
.ffui-hero-score { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ci-space-4); }
.ffui-hero-score > span { color: rgba(255, 255, 255, .72); font-size: var(--ci-type-12); }
.ffui-hero-score > strong { color: #fff; font-size: clamp(2.8rem, 5vw, 4.2rem); font-weight: 600; line-height: .9; letter-spacing: -.05em; }
.ffui-hero-score small { margin-left: 3px; color: rgba(255, 255, 255, .58); font-size: var(--ci-type-14); font-weight: 500; letter-spacing: 0; }
.ffui-score-track { height: 12px; padding: 2px; overflow: hidden; border-radius: var(--ci-radius-round); background: rgba(0, 53, 49, .34); box-shadow: inset 0 2px 6px rgba(0, 38, 35, .2); }
.ffui-score-track span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2fd3b3, #9bf2a7); box-shadow: 0 0 18px rgba(155, 242, 167, .5); }
.ffui-hero-spec > strong { color: #fff; }
.ffui-hero-spec li { border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .78); }
.ffui-hero-spec li b { color: #adf4d2; }

.ffui-section:nth-of-type(3n) {
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(239, 248, 246, .9));
}
.ffui-section-index { color: var(--ci-color-brand-700); }
.ffui-source-badge { border-color: rgba(7, 94, 89, .12); background: rgba(227, 245, 241, .72); color: var(--ci-color-brand-700); }

.ffui-button {
  border-color: rgba(7, 94, 89, .12);
  background: linear-gradient(180deg, #fff, #f2f8f6);
  box-shadow: inset 0 1px 0 #fff, 0 5px 14px rgba(7, 56, 53, .07);
}
.ffui-button--primary {
  border-color: rgba(5, 81, 76, .4);
  background: linear-gradient(135deg, var(--ci-color-brand-700), var(--ci-color-brand-800));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 22px rgba(7, 94, 89, .23);
}
.ffui-button--primary:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 28px rgba(7, 94, 89, .28); }
.ffui-button--primary:active:not(:disabled) { transform: translateY(1px) scale(.985); box-shadow: inset 0 2px 5px rgba(0, 45, 42, .22), 0 4px 10px rgba(7, 94, 89, .18); }
.ffui-button--secondary { border-color: rgba(7, 94, 89, .16); background: var(--ci-color-brand-100); }
.ffui-button--danger { border-color: rgba(217, 79, 92, .18); background: var(--ci-color-danger-soft); }

.ffui-color-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ffui-color-token,
.ffui-principle-grid article,
.ffui-radius-token,
.ffui-anatomy-card,
.ffui-reading-compare article,
.ffui-table-rules article,
.ffui-demo,
.ffui-source-grid article,
.ffui-asset {
  border-color: rgba(7, 94, 89, .1);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 8px 24px rgba(7, 56, 53, .05);
}
.ffui-color-token { border-radius: var(--ci-radius-card); }
.ffui-color-sample { height: 108px; }
.ffui-color-token.is-accent .ffui-color-sample { background: var(--ci-color-depth-accent); }
.ffui-color-token.is-info .ffui-color-sample { background: var(--ci-color-info); }
.ffui-principle-grid article::after { position: absolute; width: 72px; height: 72px; right: -30px; bottom: -34px; border-radius: 50%; background: rgba(47, 211, 179, .12); content: ""; }

.ffui-callout,
.ffui-alert { border-radius: var(--ci-radius-menu); box-shadow: 0 8px 22px rgba(7, 56, 53, .04); }
.ffui-callout--info { border-color: rgba(35, 127, 186, .18); color: #1f6f9e; }
.ffui-measure-box,
.ffui-section-anatomy { background: rgba(227, 245, 241, .5); }
.ffui-type-table,
.ffui-compare-table-wrap,
.ffui-table-region,
.ffui-spacing-scale { border-color: rgba(7, 94, 89, .1); background: rgba(255, 255, 255, .88); box-shadow: 0 8px 24px rgba(7, 56, 53, .04); }
.ffui-compare-table th,
.ffui-data-table th { background: rgba(227, 245, 241, .72); }
.ffui-data-table tr:hover td { background: rgba(227, 245, 241, .42); }
.ffui-density-picker,
.ffui-segmented { background: rgba(240, 247, 245, .92); }
.ffui-density-picker button[aria-pressed="true"],
.ffui-segmented input:checked + span { background: linear-gradient(135deg, var(--ci-color-brand-700), var(--ci-color-brand-800)); box-shadow: 0 8px 18px rgba(7, 94, 89, .2); }

.ffui-icon-sample { min-height: 100px; border-color: rgba(7, 94, 89, .09); background: #fff; box-shadow: 0 8px 20px rgba(7, 56, 53, .05); }
.ffui-icon-sample .ffui-icon { width: 30px; height: 30px; padding: 5px; overflow: visible; border: 1px solid rgba(37, 48, 54, .1); border-radius: 10px; color: var(--ci-color-ink); background: linear-gradient(145deg, #f5f7f7, #e4e8e8); box-shadow: 0 8px 18px rgba(37, 48, 54, .1); }
.ffui-icon-sample[data-ffui-copy="success"] .ffui-icon { background: linear-gradient(145deg, #20a783, var(--ci-color-success)); box-shadow: 0 8px 18px rgba(8, 124, 112, .2); }
.ffui-icon-sample[data-ffui-copy="warning"] .ffui-icon { background: linear-gradient(145deg, #d9a62e, var(--ci-color-warning)); box-shadow: 0 8px 18px rgba(145, 100, 0, .2); }
.ffui-icon-sample[data-ffui-copy="success"] .ffui-icon,
.ffui-icon-sample[data-ffui-copy="warning"] .ffui-icon { border-color: transparent; color: #fff; }
.ffui-icon-sample:hover { background: var(--ci-color-brand-100); transform: translateY(-2px); }

.ffui-receipt-slot { background: linear-gradient(90deg, rgba(7, 94, 89, .72), rgba(47, 211, 179, .96), rgba(35, 127, 186, .72), rgba(7, 94, 89, .72)); }
.ffui-receipt-card { background: linear-gradient(115deg, rgba(47, 211, 179, .22), rgba(255, 255, 255, .96) 34%, rgba(35, 127, 186, .12) 66%, rgba(155, 242, 167, .22)), #fff; }
.ffui-receipt-reflex::before { background: linear-gradient(100deg, transparent 25%, rgba(47, 211, 179, .14) 42%, rgba(35, 127, 186, .1) 54%, transparent 72%); }
.ffui-code-card { border-color: rgba(47, 211, 179, .16); background: #0f1d22; box-shadow: 0 18px 44px rgba(7, 56, 53, .16); }
.ffui-code-toolbar,
.ffui-code-note { background: #14272c; }
.ffui-code-tabs button[aria-selected="true"] { border-color: rgba(47, 211, 179, .34); background: rgba(47, 211, 179, .12); }

.ffui-popover,
.ffui-dialog { border-color: rgba(7, 94, 89, .12); background: rgba(255, 255, 255, .98); }
.ffui-dialog::backdrop { background: rgba(3, 35, 33, .48); }
.ffui-toast { background: rgba(5, 50, 47, .96); }
.ffui-asset-preview { background: linear-gradient(145deg, rgba(227, 245, 241, .74), rgba(255, 255, 255, .92)); }
.ffui-footer { border-color: rgba(7, 94, 89, .14); }

@keyframes ffui-spin { to { transform: rotate(360deg); } }
@keyframes ffui-pop-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes ffui-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes ffui-toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes ffui-toast-out { to { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1180px) {
  .ffui-color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ffui-radius-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ffui-icon-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ffui-emoji-grid, .ffui-tabler-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ffui-source-grid, .ffui-asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ffui-direction-card, .ffui-direction-card.is-detail { grid-column: span 4; }
  .ffui-type-row { grid-template-columns: 150px minmax(0, 1fr); }
  .ffui-type-row dl { grid-column: 2; }
  .ffui-uiverse-toolbar { grid-template-columns: minmax(240px, 1.3fr) repeat(2, minmax(170px, .7fr)); }
  .ffui-uiverse-count { grid-column: 1 / -1; text-align: left; }
  .ffui-ready-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .ffui-hero { grid-template-columns: 1fr; }
  .ffui-hero-spec { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .ffui-hero-spec ul { grid-column: 1 / -1; }
  .ffui-anatomy-grid, .ffui-component-grid { grid-template-columns: 1fr; }
  .ffui-principle-grid, .ffui-table-rules { grid-template-columns: 1fr; }
  .ffui-icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ffui-emoji-grid, .ffui-tabler-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ffui-tabler-toolbar { grid-template-columns: minmax(0, 1fr) 150px; }
  .ffui-tabler-count { grid-column: 1 / -1; }
  .ffui-source-grid, .ffui-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ffui-direction-card, .ffui-direction-card.is-detail, .ffui-direction-card.is-tall, .ffui-direction-card.is-page { grid-column: span 6; grid-row: auto; }
  .ffui-direction-card.is-wide { grid-column: span 12; }
  .ffui-feedback-grid { grid-template-columns: 1fr; }
  .ffui-receipt-lab { grid-template-columns: 1fr; }
  .ffui-angle-lab { grid-template-columns: 1fr; }
  .ffui-density-toolbar { align-items: flex-start; flex-direction: column; }
  .ffui-density-output { text-align: left; }
  .ffui-uiverse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ffui-ready-grid { grid-template-columns: 1fr; }
  .ffui-sticker-toolbar { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ffui-knowledge-tools { grid-template-columns: minmax(0, 1fr); }
  .ffui-knowledge-compare { grid-template-columns: minmax(0, 1fr); }
  .ffui-shell { padding-top: var(--ci-space-4); }
  .ffui-topbar { top: 4px; min-height: 58px; padding: 6px 8px; }
  .ffui-wordmark-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .ffui-status-chip { display: none; }
  .ffui-section-nav { top: 70px; margin-block: var(--ci-space-4); }
  .ffui-section-nav a { min-height: 44px; }
  .ffui-hero, .ffui-section { border-radius: var(--ci-radius-card); }
  .ffui-hero { gap: var(--ci-space-8); padding: var(--ci-space-7); }
  .ffui-hero h1 { font-size: clamp(2.15rem, 12vw, 3.5rem); line-height: 1.02; }
  .ffui-hero-spec { grid-template-columns: 1fr; }
  .ffui-hero-spec ul { grid-column: auto; }
  .ffui-section { scroll-margin-top: 120px; }
  .ffui-section-head { flex-direction: column; gap: var(--ci-space-4); }
  .ffui-adoption-head { align-items: flex-start; flex-direction: column; }
  .ffui-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ffui-radius-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ffui-type-row { grid-template-columns: 1fr; gap: var(--ci-space-4); }
  .ffui-type-row dl { grid-column: auto; }
  .ffui-type-row.type-1 p { font-size: var(--ci-type-32); line-height: var(--ci-leading-36); }
  .ffui-type-row.type-2 p { font-size: var(--ci-type-24); line-height: var(--ci-leading-28); }
  .ffui-reading-compare { grid-template-columns: 1fr; }
  .ffui-angle-samples { grid-template-columns: 1fr; }
  .ffui-density-picker { width: 100%; }
  .ffui-density-picker button { flex: 1 1 30%; min-width: 92px; }
  .ffui-icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ffui-emoji-grid, .ffui-tabler-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ffui-icon-library-head { align-items: flex-start; flex-direction: column; }
  .ffui-tabler-browser { padding: var(--ci-space-4); }
  .ffui-tabler-toolbar { grid-template-columns: 1fr; }
  .ffui-tabler-count { grid-column: auto; }
  .ffui-receipt-stage { min-height: 560px; margin-inline: calc(var(--ci-section-padding) * -.25); padding-inline: var(--ci-space-4); }
  .ffui-receipt-card { --ffui-receipt-card-padding: var(--ci-space-6); width: min(330px, calc(100% - 16px)); }
  .ffui-receipt-total { align-items: flex-end; flex-direction: column; }
  .ffui-code-toolbar { align-items: stretch; flex-direction: column; }
  .ffui-code-copy { justify-content: center; }
  .ffui-code-panel,
  .ffui-code-panel pre { min-height: 390px; height: 390px; }
  .ffui-source-grid, .ffui-asset-grid { grid-template-columns: 1fr; }
  .ffui-sticker-library-head { align-items: flex-start; flex-direction: column; }
  .ffui-sticker-toolbar { margin-inline: calc(var(--ci-space-2) * -1); padding: var(--ci-space-4); }
  .ffui-sticker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ci-space-4); }
  .ffui-sticker-card-copy { gap: var(--ci-space-3); padding: var(--ci-space-4); }
  .ffui-sticker-card-copy > strong { font-size: var(--ci-type-12); }
  .ffui-sticker-preview > span { display: none; }
  .ffui-sticker-tag-group > div { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ffui-sticker-tag-group > div::-webkit-scrollbar { display: none; }
  .ffui-uiverse-heading { align-items: flex-start; flex-direction: column; }
  .ffui-uiverse-toolbar { grid-template-columns: 1fr; }
  .ffui-uiverse-count { grid-column: auto; }
  .ffui-uiverse-grid { grid-template-columns: 1fr; }
  .ffui-uiverse-actions a, .ffui-uiverse-actions button { min-height: 44px; }
  .ffui-uiverse-codebar { align-items: stretch; flex-direction: column; }
  .ffui-uiverse-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ffui-uiverse-tabs button { min-width: 0; }
  .ffui-uiverse-code { height: 52vh; padding: var(--ci-space-5); font-size: 12px; }
  .ffui-segmented--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--ci-radius-menu); }
  .ffui-direction-card, .ffui-direction-card.is-wide, .ffui-direction-card.is-detail, .ffui-direction-card.is-tall, .ffui-direction-card.is-page { grid-column: span 12; grid-row: auto; grid-template-rows: 230px auto; }
  .ffui-direction-card.is-tall, .ffui-direction-card.is-page { grid-template-rows: 360px auto; }
  .ffui-dialog { width: calc(100vw - 16px); margin-bottom: 8px; border-radius: var(--ci-radius-card); }
  .ffui-dialog-actions { position: sticky; bottom: 0; flex-direction: column-reverse; background: rgba(255, 254, 252, .98); }
  .ffui-dialog-actions .ffui-button { width: 100%; }
  .ffui-date-shortcuts .ffui-button--compact { min-height: 44px; }
  .ffui-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 390px) {
  .ffui-topbar-actions .ffui-button { width: 44px; min-height: 44px; gap: 0; padding: 0; overflow: hidden; color: transparent; font-size: 0; }
  .ffui-topbar-actions .ffui-button .ffui-icon { width: 20px; height: 20px; color: var(--ci-color-brand-800); }
  .ffui-color-grid, .ffui-radius-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ffui-icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ffui-emoji-grid, .ffui-tabler-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ffui-scope *, .ffui-scope *::before, .ffui-scope *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ffui-receipt-card { opacity: 1; clip-path: none; transform: none; }
}

@media print {
  .ffui-standalone { background: #fff; }
  .ffui-topbar, .ffui-section-nav, .ffui-hero-actions, .ffui-footer { display: none; }
  .ffui-receipt-slot, .ffui-code-card { display: none; }
  .ffui-receipt-stage { min-height: auto; background: #fff; }
  .ffui-receipt-mask { min-height: auto; margin-top: 0; padding-top: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .ffui-receipt-card { opacity: 1; clip-path: none; transform: none; box-shadow: none; }
  .ffui-hero, .ffui-section { break-inside: avoid; border: 1px solid #ccd6d0; box-shadow: none; backdrop-filter: none; }
}