@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";/* ============================================================
   @fuzefront/chat-ui — component styles.

   RULES (enforced by the design-system-first contract):
   - ZERO hard-coded colors / spacing / type. Every value is a
     design-system CSS variable (--bg-*, --text-*, --accent-*,
     --space-*, --radius-*, --font-*, --seam, --shadow-*, …)
     defined by @fuzefront/design-system / frontend/src/index.css.
   - RTL/LTR mirrors automatically: only LOGICAL properties
     (margin-inline, padding-inline-start, inset-inline-end,
     border-start-*, text-align: start). No left/right.
   ============================================================ */

/* ---- Launcher (floating toggle button) ---------------------- */
.ffc-launcher {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);
  inline-size: var(--space-12);
  block-size: var(--space-12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--seam);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard);
  z-index: 1000;
}
.ffc-launcher:hover {
  transform: translateY(-2px);
}
.ffc-launcher:focus-visible {
  outline: var(--border-width-strong) solid var(--accent-color);
  outline-offset: var(--space-1);
}

/* ---- Drawer ------------------------------------------------- */
.ffc-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--bg-tertiary);
  border-inline-start: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}

/* The signature fuse seam along the joining edge of the drawer. */
.ffc-drawer::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--border-width-strong);
  background: var(--seam);
}

.ffc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  padding-block: var(--space-3);
  border-block-end: var(--border-width) solid var(--border-color);
}
.ffc-header__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--text-primary);
  margin: 0;
}
.ffc-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--space-8);
  block-size: var(--space-8);
  padding: 0;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.ffc-iconbtn:hover {
  background: var(--bg-quaternary);
  color: var(--text-primary);
}
.ffc-iconbtn:focus-visible {
  outline: var(--border-width-strong) solid var(--accent-color);
  outline-offset: var(--space-1);
}

/* ---- Message list ------------------------------------------- */
.ffc-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-inline: var(--space-4);
  padding-block: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ffc-empty {
  margin: auto;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
}

/* Scroll-up paging indicator pinned above the oldest loaded message. */
.ffc-history-more {
  margin: 0;
  padding-block: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
}

.ffc-msg {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-inline-size: 90%;
}
.ffc-msg--user {
  align-self: flex-end;
  align-items: flex-end;
}
.ffc-msg--assistant {
  align-self: flex-start;
  align-items: flex-start;
}
.ffc-bubble {
  padding-inline: var(--space-4);
  padding-block: var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  white-space: pre-wrap;
  word-break: break-word;
}
.ffc-msg--user .ffc-bubble {
  background: var(--accent-soft);
  color: var(--text-primary);
  border-start-end-radius: var(--radius-sm);
}
.ffc-msg--assistant .ffc-bubble {
  background: var(--bg-quaternary);
  color: var(--text-primary);
  border-start-start-radius: var(--radius-sm);
}
.ffc-msg__role {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.04em);
}

/* Streaming caret. */
.ffc-caret {
  display: inline-block;
  inline-size: var(--space-2);
  block-size: 1em;
  margin-inline-start: var(--space-1);
  background: var(--accent-color);
  vertical-align: text-bottom;
  animation: ffc-blink 1s steps(2, start) infinite;
}
@keyframes ffc-blink {
  to {
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ffc-caret {
    animation: none;
  }
  .ffc-launcher {
    transition: none;
  }
}

/* ---- RAG citations ------------------------------------------ */
.ffc-sources {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
}
.ffc-sources__heading {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.ffc-citation {
  display: block;
  padding-inline: var(--space-3);
  padding-block: var(--space-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
}
.ffc-citation:hover {
  border-color: var(--accent-color);
  color: var(--text-primary);
}
.ffc-citation:focus-visible {
  outline: var(--border-width-strong) solid var(--accent-color);
  outline-offset: var(--space-1);
}
.ffc-citation__title {
  color: var(--accent-2);
  font-weight: var(--weight-medium, 500);
}
.ffc-citation__excerpt {
  margin-block-start: var(--space-1);
  color: var(--text-tertiary);
}

/* ---- Confirmation card -------------------------------------- */
.ffc-confirm {
  border: var(--border-width) solid var(--warning-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ffc-confirm__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--warning-color);
  font-weight: var(--weight-semibold, 600);
}
.ffc-confirm__desc {
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.ffc-confirm__tool {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.ffc-confirm__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}
.ffc-confirm__resolved {
  font-size: var(--text-sm);
}
.ffc-confirm__resolved--approved {
  color: var(--success-color);
}
.ffc-confirm__resolved--denied {
  color: var(--error-color);
}

/* ---- Buttons ------------------------------------------------ */
.ffc-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding-inline: var(--space-4);
  padding-block: var(--space-2);
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  cursor: pointer;
}
.ffc-btn:focus-visible {
  outline: var(--border-width-strong) solid var(--accent-color);
  outline-offset: var(--space-1);
}
.ffc-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ffc-btn--primary {
  background: var(--accent-color);
  color: var(--primary-foreground);
}
.ffc-btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
}
.ffc-btn--ghost {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-secondary);
}
.ffc-btn--ghost:hover:not(:disabled) {
  background: var(--bg-quaternary);
  color: var(--text-primary);
}

/* ---- Composer ----------------------------------------------- */
.ffc-composer {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  padding-block: var(--space-3);
  border-block-start: var(--border-width) solid var(--border-color);
}
.ffc-composer__input {
  flex: 1 1 auto;
  resize: none;
  max-block-size: var(--space-16);
  padding-inline: var(--space-3);
  padding-block: var(--space-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  text-align: start;
}
.ffc-composer__input::placeholder {
  color: var(--text-tertiary);
}
.ffc-composer__input:focus-visible {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 var(--border-width) var(--accent-color);
}

/* ---- Feedback ----------------------------------------------- */
.ffc-feedback {
  display: flex;
  gap: var(--space-1);
  margin-block-start: var(--space-1);
}
.ffc-feedback__btn {
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  line-height: 1;
}
.ffc-feedback__btn:hover {
  color: var(--text-primary);
}
.ffc-feedback__btn[aria-pressed='true'] {
  color: var(--accent-color);
}
.ffc-feedback__btn:focus-visible {
  outline: var(--border-width-strong) solid var(--accent-color);
  outline-offset: var(--space-1);
}

/* ---- Error -------------------------------------------------- */
.ffc-error {
  color: var(--error-color);
  font-size: var(--text-sm);
  border: var(--border-width) solid var(--error-color);
  border-radius: var(--radius-md);
  padding-inline: var(--space-3);
  padding-block: var(--space-2);
  background: var(--bg-secondary);
}
/* ============================================================
   @fuzefront/billing-ui — component styles.

   RULES (enforced by the design-system-first contract):
   - ZERO hard-coded colors / spacing / type. Every value is a
     design-system CSS variable (--bg-*, --text-*, --accent-*,
     --space-*, --radius-*, --font-*, --seam, --shadow-*, …)
     defined by @fuzefront/design-system / frontend/src/index.css.
   - RTL/LTR mirrors automatically: only LOGICAL properties
     (margin-inline, padding-inline-*, inset-inline-*, border-start-*,
     text-align: start). No left/right.
   - The few raw px values that remain are non-themable layout caps
     (max widths, hairline transforms), never color/spacing/type.
   ============================================================ */

/* ---- Plan picker ------------------------------------------- */
.ffb-plans__head {
  margin-block-end: var(--space-6);
}
.ffb-plans__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ffb-plans__subtitle {
  margin-block-start: var(--space-1);
  margin-block-end: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.ffb-plans__interval {
  display: inline-flex;
  gap: var(--space-1);
  margin-block-start: var(--space-4);
  padding: var(--space-1);
  background: var(--bg-quaternary);
  border-radius: var(--radius-pill);
}
.ffb-plans__interval-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  font: inherit;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.ffb-plans__interval-btn[aria-pressed='true'] {
  background: var(--accent-soft);
  color: var(--text-primary);
}
.ffb-plans__interval-btn:focus-visible {
  outline: var(--border-width-strong) solid var(--accent-color);
  outline-offset: var(--space-1);
}
.ffb-plans__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

/* ---- Plan card --------------------------------------------- */
.ffb-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--bg-tertiary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  text-align: start;
  transition: border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
.ffb-plan-card--featured {
  border-color: var(--accent-color);
  box-shadow: var(--shadow-accent);
}
.ffb-plan-card--current {
  border-color: var(--success-color);
}
.ffb-plan-card__seam {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--border-width-strong);
  background: var(--seam);
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
}
.ffb-plan-card__badge {
  position: absolute;
  inset-block-start: calc(var(--space-3) * -1);
  inset-inline-end: var(--space-4);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--primary-foreground);
  background: var(--seam);
  border-radius: var(--radius-pill);
}
.ffb-plan-card__badge--current {
  background: var(--success-color);
  color: var(--bg-secondary);
}
.ffb-plan-card__name {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ffb-plan-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.ffb-plan-card__amount {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.ffb-plan-card__interval {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}
.ffb-plan-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ffb-plan-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.ffb-plan-card__check {
  flex: none;
  color: var(--accent-2);
  margin-block-start: 0.15em;
}

/* ---- Shared button primitive (mirrors DS Button) ----------- */
.ffb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}
.ffb-btn:focus-visible {
  outline: var(--border-width-strong) solid var(--accent-color);
  outline-offset: var(--space-1);
}
.ffb-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ffb-btn--primary {
  background: var(--accent-color);
  color: var(--primary-foreground);
}
.ffb-btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
}
.ffb-btn--secondary {
  background: var(--bg-quaternary);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.ffb-btn--secondary:hover:not(:disabled) {
  border-color: var(--border-strong);
}
.ffb-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}
.ffb-btn--ghost:hover:not(:disabled) {
  color: var(--text-primary);
}
.ffb-btn--danger {
  background: transparent;
  color: var(--error-color);
  border-color: var(--border-color);
}
.ffb-btn--danger:hover:not(:disabled) {
  background: var(--error-color);
  color: var(--bg-secondary);
}
.ffb-btn--block {
  inline-size: 100%;
}

/* ---- Status pill (mirrors DS StatusPill) ------------------- */
.ffb-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--bg-quaternary);
  color: var(--text-secondary);
}
.ffb-status__dot {
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: var(--radius-pill);
  background: currentColor;
}
.ffb-status--success {
  color: var(--success-color);
}
.ffb-status--warning {
  color: var(--warning-color);
}
.ffb-status--error {
  color: var(--error-color);
}
.ffb-status--neutral {
  color: var(--text-tertiary);
}

/* ---- Modal / dialog ---------------------------------------- */
.ffb-modal__overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--scrim);
  z-index: 1000;
}
.ffb-modal {
  inline-size: min(480px, 100%);
  max-block-size: calc(100vh - var(--space-8));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--bg-tertiary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.ffb-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.ffb-modal__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ffb-modal__subtitle {
  margin-block-start: var(--space-1);
  margin-block-end: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.ffb-modal__close {
  flex: none;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  line-height: 0;
}
.ffb-modal__close:hover {
  color: var(--text-primary);
}
.ffb-modal__close:focus-visible {
  outline: var(--border-width-strong) solid var(--accent-color);
  outline-offset: var(--space-1);
}

/* ---- Order summary ----------------------------------------- */
.ffb-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-quaternary);
  border-radius: var(--radius-md);
}
.ffb-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.ffb-summary__row--total {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: var(--border-width) solid var(--border-color);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
}
.ffb-summary__trial {
  margin: 0;
  color: var(--accent-2);
  font-size: var(--text-xs);
}

/* ---- Stripe Payment Element host --------------------------- */
.ffb-payment {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ffb-payment__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ffb-payment__element {
  padding: var(--space-3);
  background: var(--bg-primary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

/* ---- Alerts / notices -------------------------------------- */
.ffb-notice {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border: var(--border-width) solid var(--border-color);
}
.ffb-notice--error {
  color: var(--error-color);
  border-color: var(--error-color);
  background: var(--bg-quaternary);
}
.ffb-notice--info {
  color: var(--text-secondary);
  background: var(--bg-quaternary);
}

/* ---- Panel (subscription / usage / payment cards) ---------- */
.ffb-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-tertiary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
}
.ffb-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.ffb-panel__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ffb-panel__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.ffb-panel__key {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}
.ffb-panel__value {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.ffb-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
}
.ffb-panel__empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* ---- Usage metric ------------------------------------------ */
.ffb-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ffb-metric__value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.ffb-metric__label {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}
.ffb-metric--credit .ffb-metric__value {
  color: var(--success-color);
}

/* ---- Payment method summary -------------------------------- */
.ffb-pm {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ffb-pm__brand {
  text-transform: capitalize;
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}
.ffb-pm__digits {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
}
.ffb-pm__exp {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

/* ---- Spinner ----------------------------------------------- */
.ffb-spinner {
  inline-size: var(--space-4);
  block-size: var(--space-4);
  border: var(--border-width-strong) solid var(--accent-soft);
  border-block-start-color: var(--accent-color);
  border-radius: var(--radius-pill);
  animation: ffb-spin var(--duration-slow) linear infinite;
}
@keyframes ffb-spin {
  to {
    transform: rotate(360deg);
  }
}
.ffb-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Invoice history --------------------------------------- */
/* Soft status fills. The semantic `*-soft` tokens are derived here from the
   design-system status color tokens via color-mix (tokens-only, no raw
   hex/rgb) — mirroring @fuzefront/design-system's intended semantic *-soft
   ramp. Scoped to the panel so they collapse cleanly if the DS publishes
   global *-soft tokens later. */
.ffb-invoices {
  --success-soft: color-mix(in srgb, var(--success-color) 14%, transparent);
  --warning-soft: color-mix(in srgb, var(--warning-color) 14%, transparent);
  --error-soft: color-mix(in srgb, var(--error-color) 14%, transparent);
  --neutral-soft: color-mix(in srgb, var(--text-secondary) 12%, transparent);

  position: relative;
  overflow: hidden;
  background: var(--bg-tertiary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
}
.ffb-invoices__seam {
  block-size: var(--border-width-strong);
  background: var(--seam);
}
.ffb-invoices__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-5) var(--space-3);
  padding-inline: var(--space-5);
}
.ffb-invoices__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ffb-invoices__count {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.ffb-invoices__list {
  display: flex;
  flex-direction: column;
}
.ffb-invoices__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
  padding-inline: var(--space-5);
  border-block-start: var(--border-width) solid var(--border-color);
}
.ffb-invoices__row-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}
.ffb-invoices__row-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ffb-invoices__num {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.ffb-invoices__date {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.ffb-invoices__row-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}
.ffb-invoices__amount {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.ffb-invoices__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  background: var(--bg-quaternary);
  color: var(--text-secondary);
}
.ffb-invoices__pill-dot {
  inline-size: var(--space-1);
  block-size: var(--space-1);
  border-radius: var(--radius-pill);
  background: currentColor;
}
.ffb-invoices__pill--success {
  background: var(--success-soft);
  color: var(--success-color);
}
.ffb-invoices__pill--warning {
  background: var(--warning-soft);
  color: var(--warning-color);
}
.ffb-invoices__pill--error {
  background: var(--error-soft);
  color: var(--error-color);
}
.ffb-invoices__pill--neutral {
  background: var(--neutral-soft);
  color: var(--text-secondary);
}
.ffb-invoices__dl {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--space-8);
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--accent-color);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.ffb-invoices__dl:hover {
  background: var(--accent-soft);
}
.ffb-invoices__dl:focus-visible {
  outline: var(--border-width-strong) solid var(--accent-color);
  outline-offset: var(--space-1);
}
.ffb-invoices__dl svg {
  inline-size: var(--space-4);
  block-size: var(--space-4);
}
.ffb-invoices__foot {
  display: flex;
  justify-content: center;
  padding-block: var(--space-4);
  padding-inline: var(--space-5);
  border-block-start: var(--border-width) solid var(--border-color);
}
.ffb-invoices__empty {
  padding-block: var(--space-8);
  padding-inline: var(--space-5);
  text-align: center;
  color: var(--text-secondary);
}
.ffb-invoices__empty-icon {
  inline-size: var(--space-10);
  block-size: var(--space-10);
  margin-block-end: var(--space-3);
  color: var(--text-tertiary);
}
.ffb-invoices__empty-icon--error {
  color: var(--error-color);
}
.ffb-invoices__empty-title {
  margin-block: 0 var(--space-1);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.ffb-invoices__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.ffb-invoices__empty .ffb-btn {
  margin-block-start: var(--space-3);
}
.ffb-invoices__skel {
  display: block;
  block-size: var(--space-3);
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    var(--bg-quaternary),
    var(--border-color),
    var(--bg-quaternary)
  );
  background-size: 200% 100%;
  animation: ffb-invoices-shimmer 1.3s ease-in-out infinite;
}
.ffb-invoices__skel--wide {
  inline-size: 58%;
}
.ffb-invoices__skel--narrow {
  inline-size: 34%;
  margin-block-start: var(--space-1);
}
.ffb-invoices__skel--pill {
  inline-size: var(--space-12);
  block-size: var(--space-5);
}
@keyframes ffb-invoices-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ffb-invoices__skel {
    animation: none;
  }
}



/* ============================================================
   FuzeFront Design System — global entry point
   Consumers link THIS file only. Imports only; no rules here.
   ============================================================ */
/* ============================================================
   FuzeFront — Webfonts (all free, Google Fonts)
   ------------------------------------------------------------
   Display:  Space Grotesk   — headings, brand, the wordmark
   Body/UI:  Inter           — everything you read
   Mono:     JetBrains Mono  — the machine's voice (IDs, scopes,
                               remoteEntry URLs — technical data)
   ============================================================ */
/* ============================================================
   FuzeFront — Color tokens
   The "runtime fabric": a deep blue-graphite shell, an electric
   indigo + cyan "fuse seam", and a cool status set with one warm
   amber spark. Dark is the DEFAULT; light is an override.
   ============================================================ */

:root {
  /* ---- Brand primitives ---------------------------------- */

  /* Indigo — "the fuse". The brand's load-bearing hue. */
  --indigo-50:  #f0eeff;
  --indigo-100: #e0dcff;
  --indigo-300: #b3a9ff;
  --indigo-400: #8c7cff;
  --indigo-500: #6e5cff;   /* accent (dark theme) */
  --indigo-600: #6048f5;   /* accent (light theme) */
  --indigo-700: #5847e6;   /* hover (dark) */
  --indigo-800: #4f3ae0;   /* hover (light) */

  /* Cyan — the signal the indigo fuses with along the seam. */
  --cyan-400: #29d3e6;
  --cyan-500: #0bb6c9;

  /* Status — cool throughout, with one warm amber spark. */
  --mint-500:  #34d399;   /* success (dark) */
  --mint-600:  #10b981;   /* success (light) */
  --amber-500: #f5a623;   /* warning (dark) */
  --amber-600: #d98313;   /* warning (light) */
  --coral-500: #f26b7a;   /* error (dark) */
  --coral-600: #e0556b;   /* error (light) */

  /* Graphite — the dark shell, shallow (shell) to raised. */
  --graphite-950: #0b0e15;  /* shell / top bar (deepest) */
  --graphite-900: #0f131c;  /* content canvas */
  --graphite-850: #141a26;  /* panels & cards */
  --graphite-800: #1c2433;  /* raised / hover / chips */
  --graphite-700: #232c3d;  /* borders */
  --graphite-600: #303b50;  /* strong dividers */
  --graphite-400: #66718a;  /* muted text */
  --graphite-300: #9fa9bc;  /* secondary text */
  --graphite-100: #e7ecf5;  /* primary text */

  /* Paper — the light shell. */
  --paper:        #ffffff;
  --paper-tint:   #f6f8fc;
  --paper-muted:  #eef1f7;
  --line-light:   #e4e9f2;
  --line-strong-light: #d2d9e6;
  --ink-900:      #131722;  /* primary text (light) */
  --ink-600:      #54607a;  /* secondary text (light) */
  --ink-400:      #8a93a6;  /* muted text (light) */
}

/* ============================================================
   Semantic tokens — the names components actually consume.
   These match the FuzeFront app 1:1, so anything built against
   this design system drops straight into frontend/src.
   ============================================================ */
:root,
[data-theme='dark'] {
  /* surfaces */
  --bg-secondary:  var(--graphite-950);  /* app shell / top bar */
  --bg-primary:    var(--graphite-900);  /* content canvas */
  --bg-tertiary:   var(--graphite-850);  /* panels & cards */
  --bg-quaternary: var(--graphite-800);  /* raised / hover */
  /* borders */
  --border-color:  var(--graphite-700);
  --border-strong: var(--graphite-600);
  /* text */
  --text-primary:   var(--graphite-100);
  --text-secondary: var(--graphite-300);
  --text-tertiary:  var(--graphite-400);
  /* the fuse */
  --accent-color: var(--indigo-500);
  --accent-hover: var(--indigo-700);
  --accent-soft:  rgba(110, 92, 255, 0.14);
  --accent-2:     var(--cyan-400);
  --drop-active:  rgba(110, 92, 255, 0.18);   /* FileDropZone hover fill */
  /* status */
  --success-color: var(--mint-500);
  --warning-color: var(--amber-500);
  --error-color:   var(--coral-500);
  /* status soft-tints — inline callout / banner fills (StatusCallout, posture summary) */
  --success-soft:  rgba(52, 211, 153, 0.12);
  --warning-soft:  rgba(245, 166, 35, 0.12);
  --error-soft:    rgba(243, 105, 127, 0.12);
  /* elevation */
  --shadow: rgba(0, 0, 0, 0.45);
  /* modal / dialog scrim — dims the shell behind overlays */
  --scrim: rgba(0, 0, 0, 0.55);
  /* signature: the seam where modules fuse at runtime */
  --seam: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-2) 100%);

  /* shadcn token layer — kept in sync with the surfaces above so
     shadcn components never fall back to light on the dark shell. */
  --background: var(--bg-primary);
  --foreground: var(--text-primary);
  --card: var(--bg-tertiary);
  --card-foreground: var(--text-primary);
  --popover: var(--bg-tertiary);
  --popover-foreground: var(--text-primary);
  --primary: var(--accent-color);
  --primary-foreground: #ffffff;
  --secondary: var(--bg-quaternary);
  --secondary-foreground: var(--text-primary);
  --muted: var(--bg-quaternary);
  --muted-foreground: var(--text-secondary);
  --accent: var(--bg-quaternary);
  --accent-foreground: var(--text-primary);
  --destructive: var(--error-color);
  --border: var(--border-color);
  --input: var(--border-color);
  --ring: var(--accent-color);
}

/* Light theme — cool, instrument-grade white. */
[data-theme='light'] {
  --bg-secondary:  var(--paper);
  --bg-primary:    var(--paper-tint);
  --bg-tertiary:   var(--paper);
  --bg-quaternary: var(--paper-muted);
  --border-color:  var(--line-light);
  --border-strong: var(--line-strong-light);
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary:  var(--ink-400);
  --accent-color: var(--indigo-600);
  --accent-hover: var(--indigo-800);
  --accent-soft:  rgba(96, 72, 245, 0.10);
  --accent-2:     var(--cyan-500);
  --drop-active:  rgba(96, 72, 245, 0.14);   /* FileDropZone hover fill (light) */
  --success-color: var(--mint-600);
  --warning-color: var(--amber-600);
  --error-color:   var(--coral-600);
  --success-soft:  rgba(16, 185, 129, 0.10);
  --warning-soft:  rgba(217, 131, 19, 0.10);
  --error-soft:    rgba(224, 85, 107, 0.10);
  --shadow: rgba(15, 23, 42, 0.12);
  --scrim: rgba(15, 23, 42, 0.32);
  --seam: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-2) 100%);

  --background: var(--bg-primary);
  --foreground: var(--text-primary);
  --card: var(--bg-tertiary);
  --card-foreground: var(--text-primary);
  --popover: var(--bg-tertiary);
  --popover-foreground: var(--text-primary);
  --primary: var(--accent-color);
  --primary-foreground: #ffffff;
  --secondary: var(--bg-quaternary);
  --secondary-foreground: var(--text-primary);
  --muted: var(--bg-quaternary);
  --muted-foreground: var(--text-secondary);
  --accent: var(--bg-quaternary);
  --accent-foreground: var(--text-primary);
  --destructive: var(--error-color);
  --border: var(--border-color);
  --input: var(--border-color);
  --ring: var(--accent-color);
}
/* ============================================================
   FuzeFront — Typography tokens
   Space Grotesk carries the personality; Inter does the reading;
   JetBrains Mono speaks for the machine.
   ============================================================ */

:root {
  /* ---- Families ------------------------------------------ */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- Weights ------------------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Type scale (rem) ---------------------------------- */
  --text-2xs: 0.7rem;     /* 11px — mono meta, badges */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px — UI default */
  --text-md: 1rem;        /* 16px — body */
  --text-lg: 1.1rem;      /* h3 */
  --text-xl: 1.35rem;     /* h2 */
  --text-2xl: 1.75rem;    /* h1 */
  --text-3xl: 2.25rem;    /* page hero */

  /* ---- Line heights -------------------------------------- */
  --leading-tight: 1.15;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* ---- Tracking ------------------------------------------ */
  --tracking-display: -0.02em;  /* headings & wordmark */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ---- Semantic roles ------------------------------------ */
  --role-hero-font: var(--font-display);
  --role-hero-size: var(--text-3xl);
  --role-hero-weight: var(--weight-semibold);
  --role-hero-leading: var(--leading-tight);

  --role-heading-font: var(--font-display);
  --role-heading-size: var(--text-2xl);
  --role-heading-weight: var(--weight-semibold);

  --role-section-font: var(--font-display);
  --role-section-size: var(--text-lg);
  --role-section-weight: var(--weight-semibold);

  --role-body-font: var(--font-sans);
  --role-body-size: var(--text-md);
  --role-body-weight: var(--weight-regular);
  --role-body-leading: var(--leading-normal);

  --role-label-font: var(--font-sans);
  --role-label-size: var(--text-base);
  --role-label-weight: var(--weight-medium);

  --role-data-font: var(--font-mono);   /* IDs, scopes, remote URLs */
  --role-data-size: var(--text-2xs);
  --role-data-weight: var(--weight-medium);
}
/* ============================================================
   FuzeFront — Spacing, radii, shadows, layout, motion
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) -------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 1.75rem;   /* 28px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ---- Radii --------------------------------------------- */
  --radius: 0.625rem;   /* 10px base */
  --radius-sm: 0.375rem; /* 6px */
  --radius-md: 0.5rem;   /* 8px — inputs, buttons, chips */
  --radius-lg: 0.625rem; /* 10px — cards */
  --radius-xl: 1rem;     /* 16px — modals, auth card */
  --radius-pill: 999px;

  /* ---- Borders ------------------------------------------- */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* ---- Shadows — deep and soft, tuned for the dark shell -- */
  --shadow-xs: 0 1px 2px var(--shadow);
  --shadow-sm: 0 4px 12px -6px var(--shadow);
  --shadow-md: 0 16px 40px -20px var(--shadow);
  --shadow-lg: 0 24px 60px -24px var(--shadow);
  --shadow-accent: 0 6px 18px -8px var(--accent-color); /* glow under a primary button */
  --shadow-pop: 0 12px 32px -12px var(--shadow), 0 2px 8px -4px var(--shadow); /* dropdowns, popovers, tooltips */

  /* ---- Elevation / stacking order ------------------------ */
  /* One ladder for every layered surface, so overlays never collide. */
  --z-base: 0;
  --z-raised: 10;       /* lifted cards, sticky table headers */
  --z-sticky: 100;      /* top bar, side panel */
  --z-dropdown: 1000;   /* menus, selects, popovers */
  --z-overlay: 1100;    /* scrim behind modals */
  --z-modal: 1200;      /* dialogs, command palette */
  --z-toast: 1300;      /* transient notifications */
  --z-tooltip: 1400;    /* always on top */

  /* ---- Layout -------------------------------------------- */
  --top-bar-height: 60px;
  --side-panel-width: 240px;
  --container-max: 1440px;
  --modal-max-w: 560px;
  --modal-max-w-lg: 720px;

  /* ---- Mobile layout ------------------------------------- */
  --top-bar-height-mobile: 52px;  /* collapsed top bar on xs/sm */
  --bottom-nav-height: 56px;      /* bottom nav bar replaces side panel */
  --drawer-width: 280px;          /* slide-in drawer on xs/sm */
  --sheet-max-h: 80dvh;           /* bottom sheet max height */
  --touch-target: 44px;           /* WCAG 2.5.5 minimum tap area */
  /* Safe-area insets for notch / home-indicator devices */
  --safe-area-top:    env(safe-area-inset-top,    0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left:   env(safe-area-inset-left,   0px);
  --safe-area-right:  env(safe-area-inset-right,  0px);

  /* ---- Breakpoints (reference values for @media queries) -
     xs  < 480px  — phone portrait   → BottomNav + Drawer
     sm    480px  — phone landscape
     md    768px  — tablet           → SidePanel returns
     lg   1024px  — desktop
     xl   1280px  — wide desktop                            */

  /* ---- Motion -------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-seam: cubic-bezier(0.16, 1, 0.3, 1); /* brand springy — alias of ease-out */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-enter: 260ms;  /* overlay/card enter */
  --duration-exit:  180ms;  /* overlay/card exit (faster than enter) */
  --duration-seam:  400ms;  /* seam draw-on across a full edge */
}
/* ============================================================
   FuzeFront — Base element defaults
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Space Grotesk carries headings; tight tracking gives it the wordmark feel. */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
  margin: 0;
}
h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-xl); line-height: var(--leading-snug); }
h3 { font-size: var(--text-lg); line-height: var(--leading-snug); }

/* Technical data reads in mono — connection IDs, scopes, remoteEntry URLs. */
.mono, code, kbd, .app-id, .remote-url {
  font-family: var(--font-mono);
  font-feature-settings: 'ss01' 1;
}

a { color: var(--accent-color); text-decoration: none; }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; }

::selection { background: var(--accent-soft); color: var(--text-primary); }

/* Quality floor: a visible, on-brand keyboard focus everywhere. */
:focus-visible {
  outline: var(--border-width-strong) solid var(--accent-color);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{:root,:host{--font-sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", monospace;--color-red-100:oklch(93.6% .032 17.717);--color-red-300:oklch(80.8% .114 19.571);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-orange-100:oklch(95.4% .038 75.164);--color-orange-200:oklch(90.1% .076 70.697);--color-orange-600:oklch(64.6% .222 41.116);--color-orange-800:oklch(47% .157 37.304);--color-yellow-50:oklch(98.7% .026 102.212);--color-yellow-200:oklch(94.5% .129 101.54);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-700:oklch(55.4% .135 66.442);--color-yellow-800:oklch(47.6% .114 61.907);--color-green-50:oklch(98.2% .018 155.826);--color-green-100:oklch(96.2% .044 156.743);--color-green-200:oklch(92.5% .084 155.995);--color-green-300:oklch(87.1% .15 154.449);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-purple-100:oklch(94.6% .033 307.174);--color-purple-200:oklch(90.2% .063 306.703);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-800:oklch(43.8% .218 303.724);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-4xl:56rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--default-mono-font-family:"JetBrains Mono", ui-monospace, "SF Mono", monospace;--font-display:"Space Grotesk", "Inter", system-ui, sans-serif}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){*{outline-color:color-mix(in oklab, var(--ring) 50%, transparent)}}body{background-color:var(--background);color:var(--foreground)}}@layer components;@layer utilities{.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:0}.z-40{z-index:40}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mr-1{margin-right:var(--spacing)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mr-3{margin-right:calc(var(--spacing) * 3)}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.-ml-1{margin-left:calc(var(--spacing) * -1)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-3{margin-left:calc(var(--spacing) * 3)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-12{height:calc(var(--spacing) * 12)}.h-20{height:calc(var(--spacing) * 20)}.h-full{height:100%}.max-h-60{max-height:calc(var(--spacing) * 60)}.min-h-screen{min-height:100vh}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-12{width:calc(var(--spacing) * 12)}.w-20{width:calc(var(--spacing) * 20)}.w-48{width:calc(var(--spacing) * 48)}.w-64{width:calc(var(--spacing) * 64)}.w-full{width:100%}.max-w-4xl{max-width:var(--container-4xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-md{max-width:var(--container-md)}.min-w-0{min-width:0}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-8>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-blue-200{border-color:var(--color-blue-200)}.border-blue-500{border-color:var(--color-blue-500)}.border-blue-600{border-color:var(--color-blue-600)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-400{border-color:var(--color-gray-400)}.border-gray-500{border-color:var(--color-gray-500)}.border-gray-600{border-color:var(--color-gray-600)}.border-green-200{border-color:var(--color-green-200)}.border-green-600{border-color:var(--color-green-600)}.border-orange-200{border-color:var(--color-orange-200)}.border-orange-600{border-color:var(--color-orange-600)}.border-purple-200{border-color:var(--color-purple-200)}.border-purple-600{border-color:var(--color-purple-600)}.border-transparent{border-color:#0000}.border-yellow-200{border-color:var(--color-yellow-200)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-gray-600{background-color:var(--color-gray-600)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-600{background-color:var(--color-green-600)}.bg-orange-100{background-color:var(--color-orange-100)}.bg-orange-600{background-color:var(--color-orange-600)}.bg-purple-100{background-color:var(--color-purple-100)}.bg-purple-600{background-color:var(--color-purple-600)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-600{background-color:var(--color-red-600)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-yellow-50{background-color:var(--color-yellow-50)}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-purple-600{--tw-gradient-to:var(--color-purple-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-1{padding-inline:var(--spacing)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-current{color:currentColor}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-600{color:var(--color-green-600)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-orange-600{color:var(--color-orange-600)}.text-orange-800{color:var(--color-orange-800)}.text-purple-600{color:var(--color-purple-600)}.text-purple-800{color:var(--color-purple-800)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-red-800{color:var(--color-red-800)}.text-white{color:var(--color-white)}.text-yellow-400{color:var(--color-yellow-400)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-800{color:var(--color-yellow-800)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.running{animation-play-state:running}@media (hover:hover){.hover\:border-gray-300:hover{border-color:var(--color-gray-300)}.hover\:bg-blue-50:hover{background-color:var(--color-blue-50)}.hover\:bg-blue-200:hover{background-color:var(--color-blue-200)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-300:hover{background-color:var(--color-gray-300)}.hover\:bg-gray-400:hover{background-color:var(--color-gray-400)}.hover\:bg-green-700:hover{background-color:var(--color-green-700)}.hover\:bg-red-700:hover{background-color:var(--color-red-700)}.hover\:text-gray-700:hover{color:var(--color-gray-700)}.hover\:opacity-80:hover{opacity:.8}}.focus\:border-blue-500:focus{border-color:var(--color-blue-500)}.focus\:bg-blue-50:focus{background-color:var(--color-blue-50)}.focus\:bg-gray-50:focus{background-color:var(--color-gray-50)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\:ring-gray-500:focus{--tw-ring-color:var(--color-gray-500)}.focus\:ring-green-500:focus{--tw-ring-color:var(--color-green-500)}.focus\:ring-red-500:focus{--tw-ring-color:var(--color-red-500)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:bg-blue-300:disabled{background-color:var(--color-blue-300)}.disabled\:bg-gray-100:disabled{background-color:var(--color-gray-100)}.disabled\:bg-green-300:disabled{background-color:var(--color-green-300)}.disabled\:bg-red-300:disabled{background-color:var(--color-red-300)}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root{font-family:var(--font-sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--radius:.625rem;font-weight:400;line-height:1.5}:root,[data-theme=dark]{--bg-secondary:#0b0e15;--bg-primary:#0f131c;--bg-tertiary:#141a26;--bg-quaternary:#1c2433;--border-color:#232c3d;--border-strong:#303b50;--text-primary:#e7ecf5;--text-secondary:#9fa9bc;--text-tertiary:#66718a;--accent-color:#6e5cff;--accent-hover:#5847e6;--accent-soft:#6e5cff24;--accent-2:#29d3e6;--success-color:#34d399;--warning-color:#f5a623;--error-color:#f26b7a;--error-soft:#f26b7a1f;--shadow:#00000073;--scrim:#0000008c;--seam:linear-gradient(90deg, var(--accent-color) 0%, var(--accent-2) 100%);--background:#0f131c;--foreground:#e7ecf5;--card:#141a26;--card-foreground:#e7ecf5;--popover:#141a26;--popover-foreground:#e7ecf5;--primary:#6e5cff;--primary-foreground:#fff;--secondary:#1c2433;--secondary-foreground:#e7ecf5;--muted:#1c2433;--muted-foreground:#9fa9bc;--accent:#1c2433;--accent-foreground:#e7ecf5;--destructive:#f26b7a;--border:#232c3d;--input:#232c3d;--ring:#6e5cff;--chart-1:#6e5cff;--chart-2:#29d3e6;--chart-3:#34d399;--chart-4:#f5a623;--chart-5:#f26b7a;--sidebar:#141a26;--sidebar-foreground:#e7ecf5;--sidebar-primary:#6e5cff;--sidebar-primary-foreground:#fff;--sidebar-accent:#1c2433;--sidebar-accent-foreground:#e7ecf5;--sidebar-border:#232c3d;--sidebar-ring:#6e5cff}[data-theme=light]{--bg-secondary:#fff;--bg-primary:#f6f8fc;--bg-tertiary:#fff;--bg-quaternary:#eef1f7;--border-color:#e4e9f2;--border-strong:#d2d9e6;--text-primary:#131722;--text-secondary:#54607a;--text-tertiary:#8a93a6;--accent-color:#6048f5;--accent-hover:#4f3ae0;--accent-soft:#6048f51a;--accent-2:#0bb6c9;--success-color:#10b981;--warning-color:#d98313;--error-color:#e0556b;--error-soft:#e0556b1a;--shadow:#0f172a1f;--scrim:#0f172a52;--seam:linear-gradient(90deg, var(--accent-color) 0%, var(--accent-2) 100%);--background:#f6f8fc;--foreground:#131722;--card:#fff;--card-foreground:#131722;--popover:#fff;--popover-foreground:#131722;--primary:#6048f5;--primary-foreground:#fff;--secondary:#eef1f7;--secondary-foreground:#131722;--muted:#eef1f7;--muted-foreground:#54607a;--accent:#eef1f7;--accent-foreground:#131722;--destructive:#e0556b;--border:#e4e9f2;--input:#e4e9f2;--ring:#6048f5;--chart-1:#6048f5;--chart-2:#0bb6c9;--chart-3:#10b981;--chart-4:#d98313;--chart-5:#e0556b;--sidebar:#fff;--sidebar-foreground:#131722;--sidebar-primary:#6048f5;--sidebar-primary-foreground:#fff;--sidebar-accent:#eef1f7;--sidebar-accent-foreground:#131722;--sidebar-border:#e4e9f2;--sidebar-ring:#6048f5}*{box-sizing:border-box}body{background-color:var(--bg-primary);min-width:320px;min-height:100vh;color:var(--text-primary);place-items:center;margin:0;transition:background-color .3s,color .3s;display:flex}#root{text-align:center;width:100%;height:100dvh;margin:0 auto}h1,h2,h3,.display{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text-primary);font-weight:600}h1{font-size:1.75rem;line-height:1.15}h2{font-size:1.35rem;line-height:1.2}h3{font-size:1.1rem;line-height:1.25}.brand-mark{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text-primary);font-size:1.15rem;font-weight:700}.brand-mark .brand-accent{background:var(--seam);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text}.mono,code,kbd,.app-id,.remote-url{font-family:var(--font-mono);font-feature-settings:"ss01" 1}:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px;border-radius:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}:root,[data-theme=dark],[data-theme=light]{--spinner-track:var(--border-strong)}@keyframes seam-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.provisioning-card{background-color:var(--bg-tertiary);border-radius:var(--radius-xl);border:1px solid var(--border-color);max-width:420px;box-shadow:0 24px 60px -24px var(--shadow);text-align:center;margin:2rem auto;padding:2.5rem 2rem;transition:background-color .3s,border-color .3s;position:relative;overflow:hidden}.provisioning-card:before{content:"";background:var(--seam);height:2px;position:absolute;top:0;left:0;right:0}.provisioning-spinner{border:4px solid var(--spinner-track);border-top-color:var(--accent-color);border-radius:50%;width:48px;height:48px;margin:0 auto 1.5rem;animation:.9s linear infinite seam-spin}.provisioning-title{font-family:var(--font-display);color:var(--text-primary);margin:0 0 .5rem;font-size:1.2rem;font-weight:600}.provisioning-description{color:var(--text-secondary);margin:0 0 1.5rem;font-size:.9375rem;line-height:1.5}.app-layout{flex-direction:column;height:100dvh;display:flex}.top-bar{background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;height:60px;padding:0 1.25rem;transition:background-color .3s,border-color .3s;display:flex;position:relative}.top-bar:after{content:"";background:var(--seam);opacity:.7;height:1px;position:absolute;bottom:-1px;left:0;right:0}.main-content{flex:1;display:flex;overflow:hidden}.side-panel{background-color:var(--bg-tertiary);border-right:1px solid var(--border-color);width:250px;padding:1rem 0;transition:background-color .3s,border-color .3s}.content-area{background-color:var(--bg-primary);flex:1;padding:1rem;transition:background-color .3s;overflow:auto}.hamburger-btn{border-radius:var(--radius-md);cursor:pointer;width:44px;height:44px;color:var(--text-primary);background:0 0;border:none;flex-direction:column;flex-shrink:0;justify-content:space-between;align-items:center;margin-right:4px;padding:10px 8px;transition:background-color .18s;display:none}.hamburger-btn:hover,.hamburger-btn:focus-visible{background-color:var(--bg-quaternary)}.hamburger-bar{background-color:currentColor;border-radius:2px;width:20px;height:2px;display:block}.sidebar-scrim{z-index:199;background:var(--scrim);animation:.2s forwards scrim-in;display:none;position:fixed;inset:0}@keyframes scrim-in{0%{opacity:0}to{opacity:1}}@media (max-width:768px){.hamburger-btn{display:flex}.sidebar-scrim{display:block}.side-panel{z-index:200;width:min(280px,80vw);height:100%;padding-bottom:env(safe-area-inset-bottom,0px);transition:transform .28s cubic-bezier(.4,0,.2,1);position:fixed;top:0;bottom:0;left:0;overflow-y:auto;transform:translate(-100%)}[dir=rtl] .side-panel{left:auto;right:0;transform:translate(100%)}.side-panel[data-open=true]{transform:translate(0)}.main-content{position:relative}.lang-selector-wrap{display:none}.top-bar{gap:4px;padding:0 .75rem}.top-bar-actions{gap:6px!important}.menu-item{min-height:44px}.app-grid{grid-template-columns:1fr}}.menu-item{border-radius:var(--radius-md);cursor:pointer;color:var(--text-secondary);align-items:center;gap:.625rem;margin:.125rem .5rem;padding:.625rem .75rem;font-size:.9375rem;transition:background-color .18s,color .18s;display:flex;position:relative}.menu-item:hover{background-color:var(--bg-quaternary);color:var(--text-primary)}.menu-item.active{background-color:var(--accent-soft);color:var(--text-primary);font-weight:600}.menu-item.active:before{content:"";background:var(--seam);border-radius:3px;width:3px;height:1.1rem;position:absolute;top:50%;left:0;transform:translateY(-50%)}.dropdown{display:inline-block;position:relative}.dropdown-content{background-color:var(--bg-secondary);min-width:160px;box-shadow:0px 8px 16px 0px var(--shadow);z-index:1;border:1px solid var(--border-color);border-radius:4px;transition:background-color .3s,border-color .3s;display:none;position:absolute}.dropdown:hover .dropdown-content{display:block}.dropdown-item{color:var(--text-primary);cursor:pointer;padding:12px 16px;text-decoration:none;transition:background-color .2s;display:block}.dropdown-item:hover{background-color:var(--bg-quaternary)}.auth-form{background-color:var(--bg-tertiary);border-radius:var(--radius-xl);border:1px solid var(--border-color);max-width:400px;box-shadow:0 24px 60px -24px var(--shadow);margin:2rem auto;padding:2rem;transition:background-color .3s,border-color .3s;position:relative;overflow:hidden}.auth-form:before{content:"";background:var(--seam);height:2px;position:absolute;top:0;left:0;right:0}.form-group{margin-bottom:1rem}.form-group label{color:var(--text-secondary);margin-bottom:.5rem;display:block}.form-group input{border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-secondary);width:100%;color:var(--text-primary);padding:.75rem .875rem;transition:background-color .2s,border-color .2s,box-shadow .2s,color .2s}.form-group input::placeholder{color:var(--text-tertiary)}.form-group input:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.btn{border-radius:var(--radius-md);cursor:pointer;color:#fff;border:1px solid #0000;padding:.75rem 1.5rem;font-size:.9375rem;font-weight:600;transition:background-color .18s,box-shadow .18s,transform 50ms}.btn:active{transform:translateY(1px)}.btn-primary{background-color:var(--accent-color);color:#fff;box-shadow:0 6px 18px -8px var(--accent-color)}.btn-primary:hover{background-color:var(--accent-hover)}.btn-secondary{background-color:var(--bg-quaternary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background-color:var(--bg-tertiary)}.dashboard{padding:2rem}.dashboard-header{margin-bottom:2rem}.dashboard-subtitle{color:var(--text-secondary);margin:.25rem 0 0;font-size:1.1rem}.section-title{margin-bottom:1.5rem}.app-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;display:grid}.app-card{border:1px solid var(--border-color);border-radius:var(--radius-lg);background-color:var(--bg-tertiary);cursor:pointer;padding:1.5rem;transition:border-color .2s,transform .2s,box-shadow .2s;position:relative;overflow:hidden}.app-card:hover{box-shadow:0 16px 40px -20px var(--shadow);border-color:#0000;transform:translateY(-2px)}.app-card:before{content:"";background:var(--seam);opacity:0;height:2px;transition:opacity .2s;position:absolute;top:0;left:0;right:0}.app-card:hover:before{opacity:1}.app-card.is-offline{cursor:not-allowed;opacity:.6;filter:grayscale(.5)}.app-card.is-offline:hover{border-color:var(--border-color);box-shadow:none;transform:none}.app-card.is-offline:hover:before{opacity:0}.app-card-head{align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.app-card-icon{width:40px;height:40px;position:relative}.app-icon-img{object-fit:cover;border-radius:10px;width:40px;height:40px}.app-icon-fallback{background:var(--bg-quaternary);border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.5rem;display:flex}.app-icon-fallback.type-module-federation{background:linear-gradient(135deg, #15414f, var(--accent-2))}.app-icon-fallback.type-iframe{background:linear-gradient(135deg, #4a3a12, var(--warning-color))}.app-icon-fallback.type-web-component,.app-icon-fallback.type-other{background:linear-gradient(135deg, #2f1f4f, var(--accent-color))}.health-dot{background-color:var(--success-color);border:2px solid var(--bg-tertiary);border-radius:50%;width:12px;height:12px;position:absolute;bottom:-2px;right:-2px}.health-dot.offline{background-color:var(--error-color)}.app-card-title{margin:0;font-size:1.2rem}.app-card.is-offline .app-card-title{color:var(--text-tertiary)}.app-offline-tag{color:var(--error-color);margin-left:8px;font-size:.9rem}.app-type-badge{font-family:var(--font-mono);border-radius:var(--radius-sm);background-color:var(--accent-soft);color:var(--accent-color);text-transform:lowercase;padding:.2rem .5rem;font-size:.7rem;display:inline-block}.app-card-desc{color:var(--text-secondary);margin:0;font-size:.9rem;line-height:1.4}.dashboard-empty{text-align:center;color:var(--text-secondary);padding:3rem}.quick-actions{border:1px solid var(--border-color);border-radius:var(--radius-lg);background-color:var(--bg-tertiary);margin-top:3rem;padding:1.5rem}.quick-actions-row{flex-wrap:wrap;gap:1rem;margin-top:1rem;display:flex}.theme-toggle{cursor:pointer;color:var(--text-primary);background:0 0;border:none;border-radius:8px;padding:8px;font-size:18px;transition:background-color .2s}.theme-toggle:hover{background-color:#ffffff1a}[data-theme=light] .theme-toggle:hover{background-color:#0000001a}.chat-panel{background-color:var(--bg-secondary);border-left:1px solid var(--border-color);width:400px;height:calc(100vh - 60px);box-shadow:-2px 0 10px var(--shadow);z-index:1000;flex-direction:column;transition:transform .3s,background-color .3s,border-color .3s;display:flex;position:fixed;top:60px;right:0;transform:translate(100%)}.chat-panel.open{transform:translate(0)}.chat-panel.closed{transform:translate(calc(100% - 60px))}.chat-header{background-color:var(--bg-tertiary);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1rem;transition:background-color .3s,border-color .3s;display:flex}.chat-header h3{color:var(--text-primary);margin:0;font-size:1rem;font-weight:600}.chat-toggle-btn{color:var(--text-primary);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;min-width:40px;padding:.5rem;font-size:1.2rem;transition:background-color .2s;display:flex}.chat-toggle-btn:hover{background-color:var(--bg-quaternary)}.chat-messages{flex-direction:column;flex:1;gap:1rem;padding:1rem;display:flex;overflow-y:auto}.chat-welcome{text-align:center;justify-content:center;align-items:center;height:100%;display:flex}.welcome-message{background-color:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary);border-radius:12px;max-width:280px;padding:2rem;line-height:1.5}.chat-message{flex-direction:column;gap:.5rem;max-width:85%;display:flex}.chat-message.user{align-self:flex-end}.chat-message.assistant{align-self:flex-start}.message-header{color:var(--text-tertiary);justify-content:space-between;align-items:center;margin-bottom:.25rem;font-size:.75rem;display:flex}.message-sender{font-weight:600}.message-time{opacity:.7}.message-content{white-space:pre-wrap;word-wrap:break-word;border-radius:12px;padding:.75rem 1rem;line-height:1.4}.chat-message.user .message-content{background-color:var(--accent-color);color:#fff;border-bottom-right-radius:4px}.chat-message.assistant .message-content{background-color:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);border-bottom-left-radius:4px}.message-content.loading{justify-content:center;align-items:center;min-height:40px;display:flex}.typing-indicator{align-items:center;gap:4px;display:flex}.typing-indicator span{background-color:var(--text-tertiary);border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite typing}.typing-indicator span:first-child{animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes typing{0%,80%,to{opacity:.5;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.message-feedback{opacity:.7;gap:.5rem;margin-top:.5rem;transition:opacity .2s;display:flex}.chat-message.assistant:hover .message-feedback{opacity:1}.feedback-btn{cursor:pointer;opacity:.6;background:0 0;border:none;border-radius:4px;padding:.25rem;font-size:1rem;transition:all .2s}.feedback-btn:hover{opacity:1;background-color:var(--bg-quaternary)}.feedback-btn.active{opacity:1;background-color:var(--accent-color);color:#fff}.chat-input-area{background-color:var(--bg-tertiary);border-top:1px solid var(--border-color);padding:1rem;transition:background-color .3s,border-color .3s}.chat-form{flex-direction:column;gap:.5rem;display:flex}.input-container{align-items:flex-end;gap:.5rem;display:flex}.chat-input{border:1px solid var(--border-color);background-color:var(--bg-primary);color:var(--text-primary);resize:none;border-radius:8px;flex:1;min-height:42px;max-height:120px;padding:.75rem;font-family:inherit;font-size:.9rem;line-height:1.4;transition:all .3s}.chat-input:focus{border-color:var(--accent-color);outline:none;box-shadow:0 0 0 2px #646cff33}.chat-input:disabled{opacity:.6;cursor:not-allowed}.send-btn{background-color:var(--accent-color);color:#fff;cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:44px;height:42px;padding:.75rem;font-size:1rem;transition:all .2s;display:flex}.send-btn:hover:not(:disabled){background-color:var(--accent-hover);transform:scale(1.05)}.send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.input-hint{color:var(--text-tertiary);text-align:center;opacity:.8;font-size:.75rem}@media (max-width:768px){.chat-panel{width:100%;right:0}.chat-panel.closed{transform:translate(calc(100% - 50px))}.chat-header h3{font-size:.9rem}.welcome-message{max-width:240px;padding:1.5rem}.chat-message{max-width:90%}}.app-layout.chat-open .content-area{margin-right:400px;transition:margin-right .3s}@media (max-width:768px){.app-layout.chat-open .content-area{margin-right:0;display:none}}.help-page{max-width:1200px;margin:0 auto;padding:2rem}.help-header{text-align:center;margin-bottom:2rem}.help-header h1{color:var(--text-primary);margin:0 0 .5rem;font-size:2.5rem}.help-header p{color:var(--text-secondary);margin:0;font-size:1.1rem}.help-tabs{border-bottom:1px solid var(--border-color);gap:.5rem;margin-bottom:2rem;display:flex;overflow-x:auto}.help-tab{color:var(--text-secondary);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;align-items:center;gap:.5rem;min-width:fit-content;padding:1rem 1.5rem;font-size:1rem;font-weight:400;transition:all .2s;display:flex}.help-tab:hover{color:var(--text-primary);background-color:var(--bg-secondary)}.help-tab.active{color:var(--accent-color);border-bottom-color:var(--accent-color);font-weight:600}.help-tab .tab-icon{font-size:1.2rem}.help-content-container{min-height:500px}.help-content{animation:.3s ease-in-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.help-card{border:1px solid var(--border-color);background-color:var(--bg-secondary);border-radius:12px;margin-bottom:2rem;padding:2rem;transition:all .3s}.help-card:hover{border-color:var(--accent-color);box-shadow:0 8px 25px var(--shadow);transform:translateY(-2px)}.help-card h3{color:var(--text-primary);align-items:center;gap:.5rem;margin-top:0;margin-bottom:1rem;font-size:1.5rem;display:flex}.help-card h4{color:var(--text-primary);border-bottom:1px solid var(--border-color);margin-top:2rem;margin-bottom:1rem;padding-bottom:.5rem;font-size:1.2rem}.help-card h5{color:var(--text-primary);margin-top:1rem;margin-bottom:.5rem;font-size:1.1rem}.help-card p{color:var(--text-secondary);margin-bottom:1rem;line-height:1.6}.help-card ul,.help-card ol{color:var(--text-secondary);margin-bottom:1rem;padding-left:1.5rem;line-height:1.6}.help-card li{margin-bottom:.5rem}.help-card code{background-color:var(--bg-tertiary);color:var(--accent-color);border-radius:4px;padding:.2rem .4rem;font-family:Courier New,monospace;font-size:.9rem}.api-section{margin:2rem 0}.api-link-container{text-align:center;margin:1rem 0}.api-link{color:#fff;background:linear-gradient(45deg,#646cff,#747bff);border-radius:8px;align-items:center;gap:.5rem;padding:1rem 2rem;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex;box-shadow:0 4px 15px #646cff4d}.api-link:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #646cff66}.code-block{background-color:var(--bg-quaternary);border:1px solid var(--border-color);border-radius:8px;margin:1rem 0;overflow:hidden}.code-block pre{color:var(--text-primary);background:0 0;margin:0;padding:1.5rem;font-family:Courier New,monospace;font-size:.9rem;line-height:1.4;overflow-x:auto}.endpoint-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin:1.5rem 0;display:grid}.endpoint-card{border:1px solid var(--border-color);background-color:var(--bg-tertiary);border-radius:8px;padding:1.5rem}.endpoint-card h5{color:var(--text-primary);margin-top:0;margin-bottom:1rem;font-size:1.1rem}.endpoint-card ul{margin:0;padding-left:1rem}.endpoint-card li{margin-bottom:.5rem;font-family:Courier New,monospace;font-size:.9rem}.step-by-step{margin:2rem 0}.step{border:1px solid var(--border-color);background-color:var(--bg-tertiary);border-radius:8px;margin-bottom:2rem;padding:1.5rem}.step h5{color:var(--accent-color);margin-top:0;margin-bottom:1rem;font-size:1.2rem}.integration-types{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin:2rem 0;display:grid}.integration-card{border:1px solid var(--border-color);background-color:var(--bg-tertiary);border-radius:8px;padding:1.5rem;transition:all .3s}.integration-card:hover{border-color:var(--accent-color);transform:translateY(-2px)}.integration-card h5{color:var(--text-primary);margin-top:0;margin-bottom:1rem;font-size:1.1rem}.guide-link-container{text-align:center;margin:2rem 0}.guide-link{color:#fff;background:linear-gradient(45deg,#28a745,#20c997);border-radius:8px;align-items:center;gap:.5rem;padding:1rem 2rem;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex;box-shadow:0 4px 15px #28a7454d}.guide-link:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #28a74566}.deployment-options{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin:2rem 0;display:grid}.deployment-card{border:1px solid var(--border-color);background-color:var(--bg-tertiary);border-radius:8px;padding:1.5rem}.deployment-card h5{color:var(--text-primary);align-items:center;gap:.5rem;margin-top:0;margin-bottom:1rem;font-size:1.1rem;display:flex}.contact-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin:2rem 0;display:grid}.contact-card{border:1px solid var(--border-color);background-color:var(--bg-tertiary);text-align:center;border-radius:8px;padding:1.5rem}.contact-card h5{color:var(--text-primary);margin-top:0;margin-bottom:1rem;font-size:1.1rem}.contact-card a{color:var(--accent-color);font-weight:600;text-decoration:none}.contact-card a:hover{text-decoration:underline}.troubleshooting-section{margin:2rem 0}.troubleshooting-section details{border:1px solid var(--border-color);background-color:var(--bg-tertiary);border-radius:8px;margin-bottom:1rem}.troubleshooting-section summary{cursor:pointer;color:var(--text-primary);background-color:var(--bg-secondary);border-radius:8px 8px 0 0;padding:1rem;font-weight:600}.troubleshooting-section summary:hover{background-color:var(--bg-tertiary)}.troubleshooting-section details[open] summary{border-bottom:1px solid var(--border-color);border-radius:8px 8px 0 0}.troubleshooting-section details p{margin:0;padding:1rem}.system-info{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;margin:1.5rem 0;padding:1.5rem}.system-info p{margin:.5rem 0;font-family:Courier New,monospace;font-size:.9rem}@media (max-width:768px){.help-page{padding:1rem}.help-header h1{font-size:2rem}.help-tabs{border-bottom:none;border-right:1px solid var(--border-color);flex-direction:column;margin-bottom:1rem}.help-tab{border-bottom:none;border-right:2px solid #0000;justify-content:flex-start}.help-tab.active{border-bottom:none;border-right-color:var(--accent-color)}.help-card{padding:1.5rem}.endpoint-grid,.integration-types,.deployment-options,.contact-grid{grid-template-columns:1fr}.code-block pre{padding:1rem;font-size:.8rem}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}