/* Focused specimen primitives shared by this AI Kit. */
:root {
  --ff-component-canvas: var(--canvas, var(--ff-bg, #f4f5f7));
  --ff-component-surface: var(--surface, var(--ff-surface, #ffffff));
  --ff-component-raised: var(--surface-2, var(--ff-raised, #f1f3f7));
  --ff-component-border: var(--border, var(--ff-border, #d9dce3));
  --ff-component-border-strong: var(--border-strong, var(--ff-border-strong, #abb2c0));
  --ff-component-text: var(--text, var(--ff-text, #17181b));
  --ff-component-muted: var(--muted, var(--ff-muted, #687080));
  --ff-component-faint: var(--faint, #8a93a3);
  --ff-component-accent: var(--accent, var(--ff-accent, #4f68ff));
  --ff-component-success: var(--success, var(--ff-success, #168c5d));
  --ff-component-danger: var(--danger, var(--ff-danger, #c5424d));
  --ff-component-shadow: var(--shadow, var(--ff-shadow, 0 16px 36px rgba(23, 28, 45, .12)));
}

* { box-sizing: border-box; }
.kit-render {
  display: grid;
  width: 100%;
  min-height: 100vh;
  place-items: center;
  padding: 28px;
  background: var(--ff-component-canvas);
  color: var(--ff-component-text);
}
.kit-specimen {
  display: grid;
  width: min(100%, 520px);
  gap: 16px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--ff-component-border);
  border-radius: 16px;
  background: var(--ff-component-surface);
  box-shadow: var(--ff-component-shadow);
  color: var(--ff-component-text);
  font: inherit;
}
.kit-specimen button,
.kit-specimen input,
.kit-specimen select,
.kit-specimen textarea { font: inherit; }
.kit-specimen button { -webkit-appearance: none; appearance: none; cursor: pointer; }
.kit-specimen button:focus-visible,
.kit-specimen input:focus-visible,
.kit-specimen select:focus-visible,
.kit-specimen textarea:focus-visible,
.kit-specimen [tabindex]:focus-visible {
  outline: 2px solid var(--ff-component-accent);
  outline-offset: 3px;
}
.kit-kicker {
  color: var(--ff-component-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.kit-title { margin: 0; font-size: 18px; letter-spacing: -.035em; }
.kit-copy { margin: 0; color: var(--ff-component-muted); font-size: 12px; line-height: 1.45; }
.kit-row { display: flex; align-items: center; gap: 10px; }
.kit-between { justify-content: space-between; }
.kit-stack { display: grid; gap: 10px; }
.kit-muted { color: var(--ff-component-muted); font-size: 11px; }
.kit-status { min-height: 15px; margin: 0; color: var(--ff-component-muted); font-size: 11px; text-align: center; }
.kit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ff-component-border);
  border-radius: 9px;
  background: var(--ff-component-raised);
  padding: 0 14px;
  color: var(--ff-component-text);
  font-size: 12px;
  font-weight: 750;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.kit-button:hover { border-color: var(--ff-component-accent); transform: translateY(-1px); }
.kit-primary { border-color: var(--ff-component-accent); background: var(--ff-component-accent); color: var(--inverse, #fff); }
.kit-quiet { background: transparent; }
.kit-icon-button { display: inline-grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--ff-component-border); border-radius: 9px; background: var(--ff-component-raised); color: var(--ff-component-text); }
.kit-field { display: grid; gap: 7px; }
.kit-form { display: grid; gap: 12px; }
.kit-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ff-component-text); font-size: 12px; font-weight: 750; }
.kit-input,
.kit-select,
.kit-textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--ff-component-border);
  border-radius: 9px;
  background: var(--ff-component-canvas);
  padding: 0 11px;
  color: var(--ff-component-text);
  outline: 0;
  font-size: 12px;
}
.kit-textarea { min-height: 72px; padding-block: 10px; resize: vertical; }
.kit-search { display: flex; align-items: center; gap: 9px; min-height: 42px; border: 1px solid var(--ff-component-border); border-radius: 10px; background: var(--ff-component-canvas); padding: 0 11px; }
.kit-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ff-component-text); font-size: 12px; }
.kit-search kbd { border: 1px solid var(--ff-component-border); border-radius: 5px; padding: 3px 5px; color: var(--ff-component-faint); font: 10px ui-monospace, monospace; white-space: nowrap; }
.kit-range { display: grid; gap: 10px; }
.kit-range input[type="range"] { width: 100%; height: 5px; accent-color: var(--ff-component-accent); }
.kit-upload { display: grid; justify-items: center; gap: 8px; border: 1px dashed var(--ff-component-border-strong); border-radius: 11px; background: var(--ff-component-canvas); padding: 22px 16px; color: var(--ff-component-text); text-align: center; cursor: pointer; }
.kit-upload small { color: var(--ff-component-muted); font-size: 10px; }
.kit-upload-mark { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--ff-component-border); border-radius: 9px; background: var(--ff-component-raised); color: var(--ff-component-accent); font-weight: 800; }
.kit-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.kit-toggle-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; -webkit-appearance: none; appearance: none; border: 0; background: transparent; padding: 0; color: inherit; text-align: left; }
.kit-toggle-copy { display: grid; gap: 3px; }
.kit-toggle-copy strong { font-size: 12px; }
.kit-toggle-copy small { color: var(--ff-component-muted); font-size: 10px; }
.kit-switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; border: 0; border-radius: 999px; background: var(--ff-component-border-strong); }
.kit-switch::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ff-component-surface); content: ""; transition: transform .16s ease; }
.kit-switch[aria-checked="true"] { background: var(--ff-component-accent); }
.kit-switch[aria-checked="true"]::after { transform: translateX(18px); }
.kit-divider { height: 1px; background: var(--ff-component-border); }
.kit-panel, .kit-card, .kit-dialog, .kit-drawer, .kit-plan, .kit-metric, .kit-state, .kit-date, .kit-product { border: 1px solid var(--ff-component-border); border-radius: 13px; background: var(--ff-component-surface); padding: 16px; }
.kit-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--ff-component-border); border-radius: 12px; overflow: hidden; }
.kit-list li { display: flex; align-items: center; gap: 10px; min-height: 42px; border-bottom: 1px solid var(--ff-component-border); padding: 9px 11px; font-size: 12px; }
.kit-list li:last-child { border-bottom: 0; }
.kit-list li span:last-child { margin-left: auto; color: var(--ff-component-muted); font-size: 10px; }
.kit-menu { display: grid; gap: 7px; }
.kit-menu-trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 1px solid var(--ff-component-border); border-radius: 9px; background: var(--ff-component-surface); padding: 11px 12px; color: var(--ff-component-text); font-size: 12px; }
.kit-menu-list, .kit-command-list { display: grid; gap: 2px; border: 1px solid var(--ff-component-border); border-radius: 10px; background: var(--ff-component-surface); padding: 5px; box-shadow: var(--ff-component-shadow); }
.kit-menu-item, .kit-command-item { display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 7px; background: transparent; padding: 9px 10px; color: var(--ff-component-text); text-align: left; font-size: 11px; }
.kit-menu-item:hover, .kit-command-item:hover { background: var(--ff-component-raised); }
.kit-tabs { display: grid; gap: 12px; }
.kit-tab-list { display: flex; gap: 3px; border: 1px solid var(--ff-component-border); border-radius: 999px; background: var(--ff-component-canvas); padding: 3px; }
.kit-tab { flex: 1; border: 0; border-radius: 999px; background: transparent; padding: 8px 10px; color: var(--ff-component-muted); font-size: 11px; font-weight: 700; }
.kit-tab[aria-selected="true"] { background: var(--ff-component-accent); color: #fff; }
.kit-tab-panel { border: 1px solid var(--ff-component-border); border-radius: 10px; padding: 12px; color: var(--ff-component-muted); font-size: 11px; }
.kit-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ff-component-muted); font-size: 11px; }
.kit-crumbs strong { color: var(--ff-component-text); }
.kit-page-card { display: grid; gap: 9px; border: 1px solid var(--ff-component-border); border-radius: 13px; background: var(--ff-component-surface); padding: 16px; }
.kit-nav { display: flex; align-items: center; gap: 18px; border: 1px solid var(--ff-component-border); border-radius: 12px; padding: 12px 14px; }
.kit-nav-brand { color: var(--ff-component-text); font-size: 13px; font-weight: 800; text-decoration: none; }
.kit-nav-links { display: flex; flex: 1; gap: 14px; color: var(--ff-component-muted); font-size: 11px; }
.kit-nav-links a { color: inherit; text-decoration: none; }
.kit-side-layout { display: grid; grid-template-columns: 120px 1fr; overflow: hidden; border: 1px solid var(--ff-component-border); border-radius: 12px; }
.kit-side-nav { display: grid; align-content: start; gap: 3px; padding: 9px; background: var(--ff-component-raised); }
.kit-side-nav button { border: 0; border-radius: 7px; background: transparent; padding: 8px; color: var(--ff-component-muted); text-align: left; font-size: 10px; }
.kit-side-nav button[aria-current="page"], .kit-side-nav button:hover { background: var(--ff-component-surface); color: var(--ff-component-text); }
.kit-side-main { display: grid; align-content: center; gap: 5px; padding: 16px; }
.kit-table-wrap { overflow: auto; border: 1px solid var(--ff-component-border); border-radius: 10px; }
.kit-table { width: 100%; min-width: 360px; border-collapse: collapse; font-size: 11px; }
.kit-table th, .kit-table td { border-bottom: 1px solid var(--ff-component-border); padding: 9px 10px; text-align: left; }
.kit-table th { background: var(--ff-component-raised); color: var(--ff-component-muted); font-size: 10px; text-transform: uppercase; }
.kit-table tr:last-child td { border-bottom: 0; }
.kit-alert { display: flex; align-items: flex-start; gap: 10px; border: 1px solid color-mix(in srgb, var(--ff-component-accent) 35%, var(--ff-component-border)); border-radius: 11px; background: color-mix(in srgb, var(--ff-component-accent) 9%, var(--ff-component-surface)); padding: 12px; }
.kit-alert-mark { display: inline-grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--ff-component-accent); color: #fff; font-size: 11px; font-weight: 800; }
.kit-loader, .kit-animation { display: grid; gap: 11px; justify-items: center; text-align: center; }
.kit-spinner { width: 34px; height: 34px; border: 3px solid var(--ff-component-raised); border-top-color: var(--ff-component-accent); border-radius: 50%; animation: kit-spin 1s linear infinite; }
@keyframes kit-spin { to { transform: rotate(360deg); } }
.kit-pulse-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--ff-component-accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ff-component-accent) 35%, transparent); animation: kit-pulse 1.7s ease-out infinite; }
@keyframes kit-pulse { 70% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.kit-progress { display: grid; gap: 10px; }
.kit-track { height: 7px; overflow: hidden; border-radius: 999px; background: var(--ff-component-raised); }
.kit-track span { display: block; height: 100%; border-radius: inherit; background: var(--ff-component-accent); }
.kit-badge-row, .kit-avatar-row { display: flex; align-items: center; gap: 8px; }
.kit-badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ff-component-border); border-radius: 999px; background: var(--ff-component-raised); padding: 5px 9px; color: var(--ff-component-text); font-size: 10px; font-weight: 750; }
.kit-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ff-component-success); }
.kit-avatar { display: inline-grid; width: 34px; height: 34px; place-items: center; border: 2px solid var(--ff-component-surface); border-radius: 50%; background: var(--ff-component-raised); color: var(--ff-component-text); font-size: 10px; font-weight: 800; box-shadow: 0 0 0 1px var(--ff-component-border); }
.kit-avatar + .kit-avatar { margin-left: -11px; }
.kit-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.kit-step { display: grid; gap: 6px; justify-items: center; color: var(--ff-component-muted); font-size: 10px; }
.kit-step-mark { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--ff-component-border); border-radius: 50%; background: var(--ff-component-surface); font-size: 10px; }
.kit-step.is-active .kit-step-mark, .kit-step.is-done .kit-step-mark { border-color: var(--ff-component-accent); background: var(--ff-component-accent); color: #fff; }
.kit-step-line { width: 45px; height: 1px; margin: 0 6px 18px; background: var(--ff-component-border); }
.kit-slide { display: grid; gap: 12px; }
.kit-slide-art { display: grid; min-height: 100px; place-items: center; border: 1px solid var(--ff-component-border); border-radius: 10px; background: linear-gradient(135deg, var(--ff-component-raised), var(--ff-component-canvas)); color: var(--ff-component-muted); font-size: 11px; }
.kit-date { display: grid; gap: 6px; text-align: center; }
.kit-date time { font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.kit-chart { display: grid; gap: 12px; }
.kit-bars { display: flex; height: 100px; align-items: end; gap: 8px; border-bottom: 1px solid var(--ff-component-border); padding: 8px 4px 0; }
.kit-bars i { flex: 1; min-width: 10px; height: var(--height); border-radius: 4px 4px 0 0; background: var(--ff-component-accent); }
.kit-plan, .kit-metric { display: grid; gap: 8px; }
.kit-price { font-size: 30px; font-weight: 800; letter-spacing: -.06em; }
.kit-metric strong { font-size: 28px; letter-spacing: -.06em; }
.kit-positive { color: var(--ff-component-success); font-size: 11px; font-weight: 750; }
.kit-state { display: grid; gap: 7px; justify-items: center; text-align: center; }
.kit-state-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--ff-component-success) 15%, var(--ff-component-raised)); color: var(--ff-component-success); font-weight: 900; }
.kit-command { display: grid; gap: 8px; }
.kit-command-item kbd { color: var(--ff-component-faint); font: 10px ui-monospace, monospace; }
.kit-chat { display: grid; gap: 9px; }
.kit-bubble { width: fit-content; max-width: 82%; border: 1px solid var(--ff-component-border); border-radius: 12px 12px 12px 4px; background: var(--ff-component-raised); padding: 9px 11px; font-size: 11px; line-height: 1.4; }
.kit-bubble--mine { margin-left: auto; border-color: var(--ff-component-accent); background: var(--ff-component-accent); color: #fff; }
.kit-chat-form { display: flex; gap: 7px; }
.kit-chat-form .kit-input { min-width: 0; }
.kit-feed { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ff-component-border); border-radius: 12px; padding: 12px; }
.kit-feed-copy { display: grid; gap: 3px; flex: 1; }
.kit-feed-copy strong { font-size: 12px; }
.kit-feed-copy small { color: var(--ff-component-muted); font-size: 10px; }
.kit-product { display: grid; gap: 12px; }
.kit-product-art { display: grid; min-height: 105px; place-items: center; border-radius: 9px; background: linear-gradient(135deg, var(--ff-component-raised), color-mix(in srgb, var(--ff-component-accent) 16%, var(--ff-component-surface))); color: var(--ff-component-accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.kit-layout { display: grid; grid-template-columns: 120px 1fr; overflow: hidden; border: 1px solid var(--ff-component-border); border-radius: 12px; }
.kit-layout aside { display: grid; align-content: start; gap: 4px; padding: 12px 10px; background: var(--ff-component-raised); }
.kit-layout aside a { color: var(--ff-component-muted); font-size: 10px; text-decoration: none; }
.kit-layout main { display: grid; align-content: center; gap: 6px; padding: 18px; }
.kit-dialog { display: grid; gap: 9px; box-shadow: var(--ff-component-shadow); }
.kit-dialog-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 3px; }
.kit-drawer { display: grid; gap: 12px; box-shadow: var(--ff-component-shadow); }
.kit-drawer-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.kit-drawer-list li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--ff-component-border); padding-bottom: 8px; font-size: 11px; }
.kit-tip { display: grid; justify-items: center; gap: 10px; }
.kit-tip-popover { max-width: 310px; border: 1px solid var(--ff-component-border); border-radius: 9px; background: var(--ff-component-raised); padding: 9px 11px; color: var(--ff-component-muted); font-size: 11px; line-height: 1.4; text-align: center; }
.kit-illustration { display: grid; gap: 12px; justify-items: center; text-align: center; }
.kit-illustration-mark { display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid var(--ff-component-border); border-radius: 20px; background: linear-gradient(135deg, var(--ff-component-raised), color-mix(in srgb, var(--ff-component-accent) 18%, var(--ff-component-surface))); color: var(--ff-component-accent); font-size: 24px; }
.kit-pattern { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--ff-component-border); border-radius: 12px; background: var(--ff-component-border); }
.kit-pattern span { min-height: 45px; background: var(--ff-component-surface); }
.kit-pattern span:nth-child(3n) { background: var(--ff-component-raised); }
[hidden] { display: none !important; }
@media (max-width: 520px) {
  .kit-render { padding: 18px; }
  .kit-specimen { padding: 18px; }
  .kit-nav-links { display: none; }
  .kit-side-layout, .kit-layout { grid-template-columns: 96px 1fr; }
  .kit-step-line { width: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-button, .kit-switch::after, .kit-spinner, .kit-pulse-dot { animation: none; transition: none; }
}

/* frontend-forever: focused-specimen-normalization-v2 */
/* Collection metadata already names and explains the element. The iframe only
   renders the category-specific control or composition. */
/*
 * Theme bridge
 *
 * The reference packs predate a single token vocabulary: some expose
 * --canvas, some --ff-canvas, some --ff-bg, and some their original --kit-*
 * variables. Focused specimens use a private semantic namespace so this
 * bridge never overwrites a pack's native variables while resolving either
 * iframe theme.
 */
:root,
.light,
[data-theme="light"],
.dark,
[data-theme="dark"] {
  --ff-component-canvas: var(--canvas, var(--ff-canvas, var(--ff-bg, var(--kit-bg, #f4f5f7))));
  --ff-component-surface: var(--surface, var(--ff-surface, var(--ff-component-surface, #ffffff)));
  --ff-component-raised: var(--surface-2, var(--ff-surface-2, var(--ff-raised, var(--kit-elevated, #f1f3f7))));
  --ff-component-border: var(--border, var(--ff-border, var(--ff-component-border, #d9dce3)));
  --ff-component-border-strong: var(--border-strong, var(--ff-border-strong, var(--ff-component-border, #abb2c0)));
  --ff-component-text: var(--text, var(--ff-text, var(--ff-component-text, #17181b)));
  --ff-component-muted: var(--muted, var(--ff-muted, var(--ff-component-muted, #687080)));
  --ff-component-faint: var(--faint, var(--ff-faint, var(--ff-component-muted, var(--ff-component-muted))));
  --ff-component-accent: var(--accent, var(--ff-accent, var(--ff-component-accent, #4f68ff)));
  --ff-component-success: var(--success, var(--ff-success, var(--ff-component-success, var(--kit-good, #168c5d))));
  --ff-component-warning: var(--warning, var(--ff-warning, var(--ff-component-warning, var(--kit-warm, #d98e2b))));
  --ff-component-danger: var(--danger, var(--ff-danger, var(--ff-component-danger, #c5424d)));
  --ff-component-inverse: var(--inverse, var(--ff-inverse, var(--kit-on-accent, #ffffff)));
  --ff-component-warning-ink: var(--on-warning, var(--ff-on-warning, #1f2937));
  --ff-component-shadow: var(--shadow, var(--ff-shadow, var(--ff-component-shadow, 0 16px 36px rgba(23, 28, 45, .12))));
}

.kit-specimen {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.kit-fab {
  width: 40px;
  height: 40px;
  border-color: var(--ff-component-accent);
  border-radius: 50%;
  background: var(--ff-component-accent);
  color: var(--ff-component-inverse);
}

.kit-specimen[data-component="buttons"] .kit-status,
.kit-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.kit-specimen[data-component="tabs"] .kit-tabs-heading,
.kit-specimen[data-component="loaders"] .kit-loader > :not(.kit-spinner),
.kit-specimen[data-component="animations"] .kit-animation > :not(.kit-pulse-dot) {
  display: none;
}

.kit-specimen[data-component="sidebars"] .kit-side-layout {
  display: block;
  width: min(100%, 220px);
  margin-inline: auto;
}

.kit-specimen[data-component="sidebars"] .kit-side-main { display: none; }
.kit-specimen[data-component="sidebars"] .kit-side-nav { min-height: 220px; }