@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Lexend:wght@400;500;700&display=swap";.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}
/* =====================================================================
   UI OVERHAUL — shared component kit styles
   Every class here is driven by the design tokens in src/index.css
   (surface / text / accent / row-h / cell-y tokens), so all of it is
   automatically light/dark/compact aware. Import once (kit/index.js does).
   Prefix: .k-  to avoid colliding with legacy/Tailwind classes.
   ===================================================================== */

.k-root,
.k-scope {
  font-family: var(--font-sans);
  color: var(--text-1);
}
.k-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---- surfaces ---- */
.k-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}
.k-card--scroll { overflow-x: auto; overflow-y: hidden; }
.k-card__head {
  flex-wrap: wrap;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.k-card__title { font-size: 13px; font-weight: 500; }

/* ---- page header ---- */
.k-page { padding: 26px 30px 60px; width: 100%; }
.k-page__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.k-page__h1 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.k-page__sub { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.k-page__actions { margin-left: auto; display: flex; gap: 6px; flex: none; }
.k-page a { color: var(--accent); text-decoration: none; }
.k-page a:hover { color: var(--accent-text); }

/* ---- buttons ---- */
.k-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 10px; border-radius: var(--radius);
  font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-1);
  transition: background .12s, border-color .12s, color .12s;
}
.k-btn:hover { background: var(--surface-2); }
.k-btn--primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.k-btn--primary:hover { background: var(--accent-text); border-color: var(--accent-text); }
.k-btn--ghost { border-color: transparent; background: none; color: var(--text-2); }
.k-btn--ghost:hover { background: var(--surface-2); color: var(--text-1); }
.k-btn--sm { min-height: 26px; font-size: 11.5px; padding: 0 12px; }
.k-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- scope filter bar ---- */
.k-scopebar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.k-scopebar__label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); font-weight: 500; margin-right: 2px;
}
.k-scopebar__divider { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.k-chipbtn {
  min-height: 30px; white-space: nowrap; flex: none; padding: 0 11px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1); font-size: 12px; font-family: inherit;
  color: var(--text-1); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.k-chipbtn:hover { border-color: var(--border-strong); }
.k-chipbtn--active {
  border-color: var(--accent); background: var(--accent-bg); color: var(--accent-text);
}
.k-chipbtn--active:hover { background: var(--surface-1); border-color: var(--accent-text); }
.k-chipbtn__key { color: var(--text-3); }
.k-chipbtn__caret { color: var(--text-3); font-size: 9px; }
.k-countpill {
  font-size: 11px; color: var(--text-2); background: var(--surface-2);
  border-radius: 20px; padding: 3px 10px; font-family: var(--font-mono);
}

/* ---- search input ---- */
.k-search {
  height: 28px; display: flex; align-items: center; gap: 7px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1); min-width: 240px;
}
.k-search input {
  border: 0; background: none; outline: none; font-family: inherit;
  font-size: 12px; color: var(--text-1); width: 100%;
}
.k-search input::placeholder { color: var(--text-3); }

/* ---- badges / chips / tags ---- */
.k-tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px;
  padding: 2px 7px; border-radius: 4px; background: var(--neutral-bg);
  color: var(--text-2); white-space: nowrap;
}
.k-tag--accent { background: var(--accent-bg); color: var(--accent-text); }
.k-tag--success { background: var(--success-bg); color: var(--success-text); }
.k-tag--warning { background: var(--warning-bg); color: var(--warning-text); }
.k-tag--danger { background: var(--danger-bg); color: var(--danger-text); }
/* Pill variant, for a tag that sits inside an uppercase label row (the KPI cards'
   "Billed + est."). One step smaller, fully rounded, and it resets the label row's
   text-transform/letter-spacing — without that reset the badge inherited the
   label's uppercase and read "BILLED + EST.". Design values, mockup ~366. */
.k-tag--pill {
  font-size: 10px; padding: 1px 6px; border-radius: 20px; font-weight: 500;
  text-transform: none; letter-spacing: 0; flex: none;
}
.k-typetag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  font-family: var(--font-mono); padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--border-strong); color: var(--text-2);
  background: var(--surface-1); white-space: nowrap;
}
/* One step down, for type chips that sit inside a dense list rather than a table
   cell — the design uses 10px in the drawer's relationship rows (mockup ~1222). */
.k-typetag--sm { font-size: 10px; }
/* Outlined clickable pill — the design's "top drivers" chips: a quiet outline that
   picks up the accent on hover, unlike .k-tag (tinted, static) and .k-countpill
   (a count, not a control). Trailing figures inside it go in a <b>. */
.k-pillbtn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto;
  font-size: 11.5px; padding: 3px 10px; border-radius: 20px;
  border: 1px solid var(--border-strong); background: var(--surface-1);
  color: var(--text-2); cursor: pointer; text-align: left;
  font-family: inherit; transition: border-color .12s, color .12s;
}
.k-pillbtn:hover { border-color: var(--accent); color: var(--accent-text); }
.k-pillbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.k-pillbtn > b {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  white-space: nowrap; flex: none; color: var(--text-3);
}
.k-beta {
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; line-height: 14px; flex: none;
}

/* ---- provenance tags (observed / reported / mixed / derived / modelled / discovered) ---- */
.k-prov {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .02em;
  white-space: nowrap; padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--border); color: var(--text-2); background: var(--surface-1);
}
.k-prov--observed { border-color: var(--success); color: var(--success-text); }
.k-prov--reported { border-color: var(--accent); color: var(--accent-text); }
.k-prov--discovered { border-color: var(--warning); color: var(--warning-text); }
.k-prov--derived { border-style: dashed; }
.k-prov--modelled { border-style: dashed; }

/* ---- status dot ---- */
.k-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.k-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; background: var(--text-3); }
.k-dot--success { background: var(--success); }
.k-dot--warning { background: var(--warning); }
.k-dot--danger { background: var(--danger); }
.k-dot--muted { background: var(--border-strong); }

/* ---- delta chip ---- */
.k-delta {
  font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; flex: none;
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 4px;
}
.k-delta--up { color: var(--danger-text); background: var(--danger-bg); }
.k-delta--down { color: var(--success-text); background: var(--success-bg); }
.k-delta--good-up { color: var(--success-text); background: var(--success-bg); }
.k-delta--bad-down { color: var(--danger-text); background: var(--danger-bg); }

/* ---- stat card ---- */
.k-statgrid {
  /* `--k-cols` is set by StatGrid; the phone/tablet rules at the end of this file
     override the template by `data-cols`, which an inline style would have blocked. */
  display: grid; grid-template-columns: repeat(var(--k-cols, 4), minmax(185px, 1fr));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-1); overflow-x: auto; overflow-y: hidden;
}
.k-stat { padding: 16px 20px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px; }
.k-stat:last-child { border-right: 0; }
.k-stat__label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3);
  font-weight: 500; display: flex; align-items: flex-start; flex-wrap: wrap; row-gap: 4px; gap: 5px;
  min-height: 48px; position: relative;
  /* Reserves the corner the info dot is pinned into, so a long label or the badge
     wraps before it collides. Matches the mockup's KPI label row. */
  padding-right: 17px;
}
/* In a KPI card the dot pins to the card's top-right corner rather than trailing the
   label inline — the mockup does this so the dot lands in the same place on every
   card regardless of how many lines the label takes. */
.k-stat__label > .k-info { position: absolute; top: 0; right: 0; }
.k-stat__value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 24px; line-height: 30px;
  font-weight: 500; letter-spacing: -0.02em; white-space: nowrap;
}
/* `vertical-align: middle` is GLOBAL, not per call site. An `inline-grid` aligns on its
   baseline, which for a 14px glyph box sits below the text's optical centre — so the icon
   read high beside every label in the app. Two call sites (table headers, definition terms)
   had been patched individually; the other 33 had not. `position: relative` is the
   containing block for the touch-target ring below. */
.k-info { display: inline-grid; place-items: center; line-height: 1; color: var(--text-3); cursor: help; flex: none; vertical-align: middle; position: relative; }
.k-info:hover { color: var(--text-1); }
/* The trigger is now focusable (it was a non-focusable span with cursor:help, so the
   metric definitions were mouse-only). Give it a visible focus ring. */
.k-info:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; color: var(--text-1);
}
/* The ONLY tooltip-trigger shape: the mockup's 14px Material Symbols glyph. Sized on the
   span as well as the <svg> so the grid box is exact whichever glyph is inside — the
   warning triangle's bounding box is not square.
   There used to be a `.k-info--dot` beside this — a 12px bordered circle carrying a letter
   "i" — because v0.6 uses that shape in 9 of its 37 help triggers. It is deleted rather
   than left unused: it was reported four times as the icon that "still hasn't been
   updated", and every trigger now renders the glyph (see the note on `InfoDot`). Leaving
   the class in place would let the second shape drift back in one call site at a time. */
.k-info--icon { width: 14px; height: 14px; }
/* Warning variant: the mockup swaps the info glyph for an amber triangle when a
   figure carries a data-quality caveat rather than a definition, and deepens rather
   than neutralises the tint on hover. */
.k-info--warn { color: var(--warning-text); }
.k-info--warn:hover { color: var(--warning); }

/* Canonical floating-help surface. `Tooltip.jsx` applies these values inline (it has
   to position itself anyway); this class is for the larger hand-rolled help panels —
   the "how to fetch your API key" popovers — so every floating surface in the app
   agrees on one look. Previously each of those files carried its own near-miss copy
   of the style object. Matches the mockup's overlay convention. */
.k-tip-panel {
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  color: var(--text-1);
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 17px;
  text-wrap: pretty;
}
.k-tip-panel ol, .k-tip-panel ul { margin: 4px 0 0 16px; display: grid; gap: 3px; }
.k-tip-panel strong { color: var(--text-1); font-weight: 500; }

/* ---- meter / composition bars ---- */
.k-meter { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; position: relative; }
.k-meter__fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.k-comp { display: flex; height: 9px; border-radius: 5px; overflow: hidden; }
.k-comp > i { display: block; height: 100%; }
.k-comp > i.k-comp--clickable { cursor: pointer; }

/* ---- data table ---- */
.k-table { width: 100%; border-collapse: collapse; }
.k-table th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 500;
  color: var(--text-3); padding: 0 14px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.k-table th.k-th--first { padding-left: 18px; text-align: left; }
.k-table th.k-th--last { padding-right: 18px; }
.k-table th.k-th--right { text-align: right; }
.k-table th.k-th--left { text-align: left; }
.k-table td {
  padding: var(--cell-y) 14px; height: var(--row-h); vertical-align: middle;
  border-bottom: 1px solid var(--border); font-size: 12px;
}
.k-table td.k-td--first { padding-left: 18px; }
.k-table td.k-td--last { padding-right: 18px; }
.k-table td.k-td--right { text-align: right; }
.k-table td.k-td--num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.k-table tbody tr { cursor: pointer; }
.k-table tbody tr:hover { background: var(--surface-2); }
/* Opt out of the row highlight. The design does not tint a row on hover in a read-only
   distribution table — the bar itself carries the emphasis — and a full-width tint the same
   colour as the bar track made the two read as one block. */
.k-table--no-row-hover tbody tr:hover { background: transparent; }
.k-table tbody tr.k-tr--selected { background: var(--accent-bg); }
.k-table tbody tr.k-tr--muted { opacity: .55; }
/* An `opacity` below 1 creates a STACKING CONTEXT, and that broke every row menu that
   opened over a muted row: the muted rows below the open menu painted on top of it, so
   clicks on "Edit"/"Delete" fell through to the row underneath — which, because rows are
   themselves clickable, silently opened a DIFFERENT record. Measured on Synthetic groups:
   17 of 20 rows had every menu item unreachable.
   `z-index: 40` on `.k-pop` cannot win that fight; the popover and the muted rows are not
   being compared inside the same stacking context. So lift the row that currently owns an
   open menu into its own context above its siblings. Scoped with `:has()` so exactly one
   row is ever lifted and the muted look is untouched — dropping the opacity instead would
   have fixed the stacking but left tags, status dots and identity bars at full strength.
   Verified in the browser: 20/20 rows clickable, before 3/20.
   Applies to every table with both a row menu and muted rows: Synthetic groups, API keys,
   Spend explorer, Shadow AI, Connections. */
.k-table tbody tr:has(.k-pop) { position: relative; z-index: 2; }
/* Second half of the same problem, on the LAST rows of a table: the card clips its own
   vertical overflow (`.k-card--scroll` below), so a menu opening downward off the end of
   the table was cut off and its bottom items were unclickable — on API keys, "Revoke key"
   and "Delete key" on the final row. Stop clipping only while a menu is open, so the card
   still scrolls horizontally the rest of the time. Verified: 4/4 rows clickable, before 3/4. */
.k-card--scroll:has(.k-pop) { overflow: visible; }
.k-table tbody tr:last-child td { border-bottom: 0; }
.k-th--sort { color: var(--accent); margin-left: 3px; font-size: 9px; }
.k-inbar { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.k-inbar__track { width: 100%; max-width: 104px; min-width: 32px; height: 5px; border-radius: 3px; background: var(--neutral-bg); overflow: hidden; display: inline-block; vertical-align: middle; }
.k-inbar__fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
/* `flex: none` is load-bearing, not tidiness.
   A flex item's default `min-width: auto` floors it at its own min-content — but an
   EXPLICIT `min-width` replaces that floor. So `min-width: 34px` on a `white-space: nowrap`
   span told flex "you may shrink this to 34px", and the text, having nowhere to wrap and
   nothing clipping it, painted straight over the next column: on Synthetic groups the
   Budget cell's "4% of $30 monthly" ran through "Needs owner" in Status, at every window
   width (measured: 40px of spill).
   The figure is the content; the bar is decoration. So the figure never shrinks and the
   TRACK gives way instead — it already carries its own 32px floor. When even that is not
   enough the column simply gets wider and the card scrolls horizontally, which it is
   already set up to do, instead of two columns overlapping.
   `min-width` stays as an alignment floor for short values ("0%"); with `flex: none` it can
   no longer act as a shrink permit. The mockup's later revisions drop it for the same reason. */
.k-inbar__val { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); min-width: 34px; text-align: right; white-space: nowrap; flex: none; }
.k-rowmenu { color: var(--text-3); cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.k-rowmenu:hover { background: var(--surface-2); color: var(--text-1); }

/* ---- sub-tabs / segmented ---- */
.k-subtabs { display: flex; gap: 2px; padding: 9px 0 0; }
.k-subtab {
  padding: 5px 11px; font-size: 12.5px; border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-2); cursor: pointer; font-family: inherit; border-radius: var(--radius);
}
.k-subtab:hover { background: var(--surface-2); border-color: var(--border-strong); }
.k-subtab--active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-text); font-weight: 500; }
.k-subtab--active:hover { background: var(--surface-1); border-color: var(--accent-text); color: var(--accent-text); }

/* Underlined variant — the treatment the design uses on the Organization screen.
   Flat text with a 2px rule under the active tab, sitting on a hairline that runs
   the width of the bar. */
.k-subtabs--underline {
  gap: 20px; padding: 0; border-bottom: 1px solid var(--border); margin-top: 10px;
}
.k-subtab-u {
  border: 0; background: none; font-family: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--text-2); padding: 0 0 8px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.k-subtab-u:hover { color: var(--text-1); }
.k-subtab-u--active { color: var(--text-1); border-bottom-color: var(--accent); }
.k-subtab-u:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.k-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.k-seg button {
  height: 24px; padding: 0 9px; border: 0; border-right: 1px solid var(--border);
  background: var(--surface-1); font-family: inherit; font-size: 11.5px; color: var(--text-2); cursor: pointer;
}
.k-seg button:last-child { border-right: 0; }
.k-seg button:hover { background: var(--surface-2); }
.k-seg button.k-seg--active { background: var(--surface-2); color: var(--text-1); font-weight: 500; }

/* ---- callout ---- */
.k-callout { padding: 16px 20px; border-radius: var(--radius-lg); }
.k-callout--success { background: var(--success-bg); }

/* ---- detail drawer ---- */
.k-drawer {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1);
  position: sticky; top: 52px; overflow: hidden;
}
.k-drawer__section { border-bottom: 1px solid var(--border); padding: 14px 18px; }
.k-drawer__section:last-child { border-bottom: 0; }
.k-drawer__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
  font-weight: 500; margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
/* Wrapping explainer inside the label row (see DrawerSection's `note`). It grows
   into the free space instead of being pushed by margin-left:auto, so a long note
   wraps within the row rather than widening it. */
.k-drawer__note {
  font-size: 10.5px; text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--text-3); flex: 1 1 auto; min-width: 0; text-wrap: pretty;
}
.k-dl { display: grid; grid-template-columns: 118px 1fr; gap: 8px 14px; font-size: 12px; }
.k-dl dt { color: var(--text-3); }
.k-dl dd { color: var(--text-1); word-break: break-word; }
/* The design sets mono `dd` values half a pixel smaller than the sans ones (11.5 vs
   12) so the two optical sizes match — mono runs visually larger at equal px. */
.k-dl dd .k-mono { font-size: 11.5px; }
/* An info dot trailing a column header or a definition term is pinned 4px after the
   text and centred on the line, not the text baseline (mockup ~1100 / ~1203). */
.k-table th > .k-info,
.k-dl dt > .k-info { margin-left: 4px; vertical-align: middle; }

/* ---- popover ---- */
.k-pop {
  position: absolute; z-index: 40; border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface-1); box-shadow: 0 12px 32px rgba(0, 0, 0, .16); padding: 12px;
}
.k-pop__item { display: block; font-size: 12.5px; padding: 5px 8px; border-radius: var(--radius); cursor: pointer; }
.k-pop__item:hover { background: var(--surface-2); }

/* ---- empty / loading ---- */
.k-empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.k-skel { background: var(--surface-2); border-radius: 4px; animation: k-pulse 1.4s ease-in-out infinite; }
@keyframes k-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ------------------------------------------------------------------ scrollbars
 * Staging styled its scrollbars (.custom-scrollbar, index.css) with a hardcoded
 * purple thumb on a light track. That cannot follow the theme, so the redesign
 * left the sidebar on the browser's stock scrollbar instead — visibly out of
 * place against the rail. This is the same idea, token-driven, so it works in
 * light, dark and system.
 *
 * Applied to every scrollable kit surface: the sidebar nav, scrolling cards,
 * popovers and the detail drawer.
 */
.k-scroll { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.k-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.k-scroll::-webkit-scrollbar-track { background: transparent; }
.k-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  /* Transparent border + background-clip keeps the thumb visually thin while
     leaving a comfortable hit area. */
  border: 3px solid transparent;
  background-clip: content-box;
}
.k-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }
.k-scroll::-webkit-scrollbar-corner { background: transparent; }

/* Only show the thumb while the area is hovered or focused-within, so a resting
   sidebar stays clean. Falls back to always-visible where :has is unsupported. */
.k-scroll--quiet::-webkit-scrollbar-thumb { background: transparent; }
.k-scroll--quiet:hover::-webkit-scrollbar-thumb,
.k-scroll--quiet:focus-within::-webkit-scrollbar-thumb { background: var(--border-strong); }

.k-card--scroll, .k-pop, .k-drawer { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.k-card--scroll::-webkit-scrollbar, .k-pop::-webkit-scrollbar, .k-drawer::-webkit-scrollbar { width: 10px; height: 10px; }
.k-card--scroll::-webkit-scrollbar-track, .k-pop::-webkit-scrollbar-track, .k-drawer::-webkit-scrollbar-track { background: transparent; }
.k-card--scroll::-webkit-scrollbar-thumb, .k-pop::-webkit-scrollbar-thumb, .k-drawer::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box;
}

/* =====================================================================
   RESPONSIVE — phone (<640) and tablet (640–1023)
   The two numbers are the ONLY breakpoints in the app; hooks/viewport.js carries the
   same values for the cases CSS cannot cover (swapping a component). Everything that
   is just a different measurement lives here, so it applies before React mounts and
   without a re-render. Values are the approved canvas (WrangleAI Mobile Layouts).
   ===================================================================== */

/* ---- tablet: 640–1023 ---- */
@media (max-width: 1023px) {
  .k-page { padding: 22px 24px 60px; }
  /* Four 185px KPI cells need 740px; a tablet content column is ~664. Anything 3-up or
     wider goes 2×N. 1-up and 2-up already fit. */
  .k-statgrid[data-cols="3"], .k-statgrid[data-cols="4"], .k-statgrid[data-cols="5"], .k-statgrid[data-cols="6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  .k-statgrid[data-cols="3"] .k-stat, .k-statgrid[data-cols="4"] .k-stat,
  .k-statgrid[data-cols="5"] .k-stat, .k-statgrid[data-cols="6"] .k-stat { border-bottom: 1px solid var(--border); }
  .k-statgrid[data-cols="3"] .k-stat:nth-child(2n), .k-statgrid[data-cols="4"] .k-stat:nth-child(2n),
  .k-statgrid[data-cols="5"] .k-stat:nth-child(2n), .k-statgrid[data-cols="6"] .k-stat:nth-child(2n) { border-right: 0; }
  .k-statgrid[data-cols="4"] .k-stat:nth-last-child(-n+2), .k-statgrid[data-cols="6"] .k-stat:nth-last-child(-n+2),
  .k-statgrid[data-cols="3"] .k-stat:last-child, .k-statgrid[data-cols="5"] .k-stat:last-child { border-bottom: 0; }
}

/* ---- phone: <640 ---- */
@media (max-width: 639px) {
  .k-page { padding: 18px 16px 40px; }
  /* Actions drop UNDER the title instead of beside it (the design's head row is two
     columns; at 390 the title and a 2-button group cannot share a line). */
  .k-page__head { flex-direction: column; gap: 10px; }
  .k-page__actions { margin-left: 0; flex-wrap: wrap; }
  .k-page__h1 { text-wrap: balance; }

  /* Every KPI grid is 2-up; a 1-up stays 1-up. Cell padding and the value size step
     down (24→22px) so "$0.0009" and "11.4M" keep their whole width. */
  .k-statgrid:not([data-cols="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .k-statgrid:not([data-cols="1"]) .k-stat { border-bottom: 1px solid var(--border); }
  .k-statgrid:not([data-cols="1"]) .k-stat:nth-child(2n) { border-right: 0; }
  .k-statgrid[data-cols="2"] .k-stat, .k-statgrid[data-cols="4"] .k-stat:nth-last-child(-n+2),
  .k-statgrid[data-cols="6"] .k-stat:nth-last-child(-n+2), .k-statgrid[data-cols="3"] .k-stat:last-child,
  .k-statgrid[data-cols="5"] .k-stat:last-child { border-bottom: 0; }
  .k-stat { padding: 14px 16px; }
  .k-stat__value { font-size: 22px; line-height: 28px; }

  /* Touch targets: 44px is the floor for anything tapped in the approved designs.
     Buttons 28→36 (they sit in rows with 8px gaps, so the row reaches 44), chips
     30→36, segmented toggles 24→36, sub-tabs to a 44px row. */
  .k-btn { min-height: 36px; padding: 0 12px; }
  .k-btn--sm { min-height: 32px; }
  .k-chipbtn { min-height: 36px; }
  .k-seg button { height: 36px; padding: 0 12px; font-size: 12px; }
  .k-subtab { padding: 9px 12px; }
  .k-subtab-u { padding: 12px 0; }
  /* Sub-tab rows scroll sideways rather than wrapping — five pill tabs do not fit 358px,
     and a wrapped second row reads as two separate controls. */
  .k-subtabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  .k-subtabs > button { flex: none; }
  /* The 14px glyph gains a 44px hit area from an INVISIBLE PSEUDO-ELEMENT, so the glyph
     stays exactly where it is drawn. The previous attempt used `padding: 15px; margin:
     -15px`, and on the KPI card's corner-pinned icon — which is `position: absolute; top: 0;
     right: 0` — that margin resolved to `top/right: -15px` and pushed the icon 15px OUTSIDE
     the card. Reported as "the tooltip icons overflow the cards".
     A pseudo-element cannot affect layout or position, only what is tappable. */
  .k-info::after { content: ""; position: absolute; inset: -15px; }
  /* The pinned corner icon grows INWARD only: an outward ring would sit over the card's
     border and into the gap between cards, where it would swallow taps meant for a
     neighbour. Down-left is the card's own padding, which is empty. */
  .k-stat__label > .k-info::after { inset: -8px -8px -22px -22px; }

  .k-card__head { padding: 14px 16px; }
  .k-scopebar { padding: 10px 0; }
  /* The chip row inside the scope bar is a single line that scrolls, when the phone
     ScopeBar variant is not in use (legacy pages). */
  .k-scopebar--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .k-scopebar--scroll::-webkit-scrollbar { display: none; }

  /* The detail drawer becomes a bottom sheet. It is positioned OUT of its grid column, so
     the page that mounts it also collapses that column (the hook does that; see
     estate-map/index.jsx). 88vh leaves the page visible above as context. */
  .k-drawer {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    max-height: 88vh; overflow-y: auto; z-index: 60;
    border-radius: 14px 14px 0 0; border-bottom: 0; border-color: var(--border-strong);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .4);
    animation: k-sheet-in .26s cubic-bezier(.2, .8, .2, 1);
  }
  .k-drawer__section { padding: 14px 18px; }
  .k-sheet-grab { display: grid; place-items: center; padding: 8px 0 2px; }
  .k-sheet-grab::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); }
  .k-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 55; animation: k-fade-in .18s ease-out; }

  /* Popovers anchored to a chip can run off a 390px screen; pin them to the viewport. */
  .k-pop { max-width: calc(100vw - 16px); }

  /* Tables inside a scrolling card keep scrolling — the safety net for any raw table
     that has not been given the two-line-row treatment. */
  .k-card--scroll { -webkit-overflow-scrolling: touch; }
}

/* ---- the two-line row: DataTable's phone renderer ---- */
.k-rows { display: block; }
.k-row {
  display: flex; align-items: center; gap: 12px; min-height: var(--row-h);
  padding: var(--cell-y) 16px; border-bottom: 1px solid var(--border); cursor: pointer;
  width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0;
  font-family: inherit; color: inherit;
}
.k-row:last-child { border-bottom: 0; }
.k-row:hover { background: var(--surface-2); }
.k-row--selected { background: var(--accent-bg); }
.k-row--muted { opacity: .55; }
.k-row__main { min-width: 0; flex: 1; display: block; }
/* `display: block` is load-bearing on both of these, not tidiness. They are <span>s, and
   `overflow`, `text-overflow` and `max-height` DO NOT APPLY to a non-replaced inline
   element — so the ellipsis truncation here silently did nothing, and a two-line composite
   cell from the desktop table rendered at its full 36px inside a row that had asked for
   one line. Measured: title 36px with `max-height: 18px` in force. */
.k-row__title { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.k-row__sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.k-row__right { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.k-row__fig { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; letter-spacing: -0.01em; white-space: nowrap; }
.k-row__fig2 { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.k-rows__sort { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.k-rows__cols { margin-left: auto; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 500; white-space: nowrap; }

@keyframes k-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes k-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .k-drawer, .k-scrim, .k-rail-drawer { animation: none !important; transition: none !important; }
}

/* ---- phone scope sheet + search ---- */
@media (max-width: 639px) {
  /* Inside the Filters sheet every chip is a full-width 44px row, one per line — the
     divider that separated groups of chips on the bar has no meaning stacked. */
  .k-scope-sheet .k-chipbtn { width: 100%; justify-content: flex-start; min-height: 44px; }
  .k-scope-sheet .k-chipbtn__caret { margin-left: auto; }
  .k-scope-sheet .k-scopebar__divider { display: none; }
  .k-scope-sheet .k-countpill { align-self: flex-start; }
  .k-scope-sheet > * { max-width: 100%; }
  .k-search { min-width: 0; width: 100%; height: 40px; }
}

/* ---- phone: let the two-line rows actually shrink ---- */
@media (max-width: 639px) {
  /* Pages wrap DataTable in `<div style={{minWidth: 900}}>` so the DESKTOP table has room
     inside a scrolling card (30 such wrappers across the app). Two-line rows fit 358px, so
     that floor is precisely what forced the card to scroll sideways and stretched the row
     content to 900px. Scoped with :has() to cards that actually rendered ROWS, so a card
     still showing a real table keeps its scroller untouched. `!important` because the floor
     is an inline style, which a stylesheet cannot otherwise beat. */
  .k-card--scroll:has(.k-rows) { overflow-x: visible; }
  .k-card--scroll:has(.k-rows) > * { min-width: 0 !important; }

  /* A sub-line cell may be a wrap-container of Tag chips (the Groups column is exactly
     that). Its min-content width is large, so without a shrink permit AND a clip it sizes
     the whole row — measured at 427px for one cell. The full value is in the row's detail
     sheet; the sub line is a summary. */
  .k-row__sub { min-width: 0; }
  .k-row__sub > * { min-width: 0; overflow: hidden; }
  .k-row__main { min-width: 0; flex: 1 1 auto; }
  /* Long unbreakable strings (request ids, masked keys, file paths) in a phone row or card. */
  .k-page code, .k-row code, .k-drawer code { word-break: break-word; overflow-wrap: anywhere; }
}

/* ---- phone row: the sub line is ONE line, always ---- */
@media (max-width: 639px) {
  /* A sub-line cell can be a wrap-container of chips (Business functions' Groups column
     renders one Tag per group). Clipping the horizontal overflow was not enough: the
     container still WRAPPED, making the row three lines tall and painting its second cell
     over the right-hand figures. So the line is pinned to one row — no wrapping anywhere
     inside it, and `overflow:hidden` on the main block so nothing can paint into the
     figure column. The full value is in the row's destination; this line is a summary. */
  .k-row__main { overflow: hidden; }
  .k-row__sub { flex-wrap: nowrap; max-height: 20px; }
  .k-row__sub * { flex-wrap: nowrap !important; }
}

/* ---- phone row: hold the design's 58px row height ---- */
@media (max-width: 639px) {
  /* Measured before this block: 65–86px rows, and inconsistent between them. Two causes,
     both from cells built for a table cell's generous height — a Tag chip renders 24px
     tall, and the right-hand column stacks a figure plus a status chip for 46px. The row
     is a LIST row: consistent height is what makes a column scannable down the page, so
     the chips and the figures are given list metrics inside a row. --row-h stays the
     source of the height (40px under data-density="compact"). */
  .k-row__title { line-height: 18px; }
  .k-row__sub { max-height: 18px; line-height: 18px; }
  .k-row__sub .k-tag,
  .k-row__right .k-tag,
  .k-row__sub .k-typetag,
  .k-row__sub .k-prov { padding: 0 6px; font-size: 11px; line-height: 16px; }
  .k-row__sub .k-status { font-size: 11px; }
  .k-row__fig { line-height: 16px; }
  .k-row__fig2 { line-height: 14px; }
  /* An InlineBar in a row's sub line is decoration; the figure beside it is the content. */
  .k-row__sub .k-inbar__track { display: none; }
}
@media (max-width: 639px) {
  /* The desktop table's FIRST cell is frequently already a two-line composite (a name over
     a secondary line — the design's own two-line table row). Stacked under the derived sub
     line that made three lines and a 78px row. Clamped to its first line: the second line
     is the same class of secondary detail the sub line already carries, and the full cell
     is one tap away in the row's destination. */
  .k-row__title { max-height: 18px; overflow: hidden; }
}

/* ---- phone scope bar: one row that cannot collide ---- */
.k-scopebar__trail { display: flex; align-items: center; gap: 8px; min-width: 0; }
@media (max-width: 639px) {
  /* Measured: with a custom range the date label reads "28 Aug – 03 Sept 2026", the row
     overflowed, and the UTC badge painted underneath the Filters chip. The date chip now
     shrinks and truncates, and the timezone badge is dropped — it is stated in the sheet
     the Filters chip opens, so nothing is lost. */
  .k-scopebar__trail { flex: 1 1 auto; overflow: hidden; }
  .k-scopebar__trail > span { min-width: 0; }
  .k-scopebar__trail .k-chipbtn { min-width: 0; overflow: hidden; }
  .k-scopebar__trail .k-chipbtn > .k-mono { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .k-daterange__tz { display: none; }
  /* A card-head action on a 390px head wraps its label ("New synthetic group" over two
     lines). Let the head stack instead: title row, then the action full width. */
  .k-card__head > .k-btn:last-child:not(:only-child) { flex: 1 1 100%; justify-content: center; }
}

/* ---- phone: popovers are viewport-anchored, never clipped ---- */
@media (max-width: 639px) {
  /* Every `.k-pop` in the app (31 of them) is positioned against its TRIGGER with a
     hardcoded `top`/`left`/`right` and a fixed `width` — correct on a desktop, and on a
     390px screen it either runs off the edge or is clipped by a scrolling ancestor:
       · the date-range calendar is `right: 0; width: 296` inside a 206px-wide anchor, so it
         spanned x = −24…272 and lost its left quarter (reported as "the date filter
         overflows and goes out of the screen");
       · inside the Filters sheet, which is `overflow-y: auto`, a chip's popover was clipped
         away entirely — reported as the calendar "not opening" at all.
     One rule fixes all of them: on a phone a popover is a bottom sheet pinned to the
     VIEWPORT, which no ancestor can clip and no anchor width can misplace. `!important`
     is required because every one of those positions and widths is an inline style. */
  .k-pop {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 8px !important;
    width: auto !important;
    max-width: none;
    max-height: 78vh;
    overflow-y: auto;
    z-index: 90;
    border-radius: 14px;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .4);
    animation: k-sheet-in .22s cubic-bezier(.2, .8, .2, 1);
  }
  /* A popover's own scroll area must not fight the sheet's. */
  .k-pop > [style*="overflow"] { max-height: none !important; }
}

/* ---- phone: a chart and its legend — chart FIRST, centred ---- */
@media (max-width: 639px) {
  /* Three components lay a legend LIST beside a chart with `flex-wrap: wrap` (the model
     donut, the distribution charts, the SmartRouter model share). Wrapping put the list on
     top and the chart underneath, so the figure the card exists for was below the fold and
     the list read as the content. Column-REVERSE puts the chart first without touching the
     source order (the list stays first in the DOM, which is the right reading order for a
     screen reader), and centring it stops a 160px ring sitting hard left of a 358px card.
     `!important`: two of the three set `flex-direction` inline. */
  .k-chartsplit {
    flex-direction: column-reverse !important;
    align-items: center !important;
  }
  .k-chartsplit > * { width: 100%; }
  /* The ring itself is fixed-size and must stay centred, not stretched. */
  .k-chartsplit > span,
  .k-chartsplit > :last-child { width: auto; }
}


/*! tailwindcss v4.1.17 | 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-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --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-divide-y-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-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: 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-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-400: oklch(70.4% .191 22.216);
    --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-400: oklch(75% .183 55.934);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-700: oklch(55.3% .195 38.402);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-300: oklch(87.9% .169 91.605);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-amber-600: oklch(66.6% .179 58.318);
    --color-amber-700: oklch(55.5% .163 48.998);
    --color-amber-800: oklch(47.3% .137 46.201);
    --color-yellow-50: oklch(98.7% .026 102.212);
    --color-yellow-100: oklch(97.3% .071 103.193);
    --color-yellow-200: oklch(94.5% .129 101.54);
    --color-yellow-300: oklch(90.5% .182 98.111);
    --color-yellow-400: oklch(85.2% .199 91.936);
    --color-yellow-600: oklch(68.1% .162 75.834);
    --color-yellow-700: oklch(55.4% .135 66.442);
    --color-yellow-900: oklch(42.1% .095 57.708);
    --color-lime-400: oklch(84.1% .238 128.85);
    --color-lime-500: oklch(76.8% .233 130.85);
    --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-400: oklch(79.2% .209 151.711);
    --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-emerald-50: oklch(97.9% .021 166.113);
    --color-emerald-100: oklch(95% .052 163.051);
    --color-emerald-200: oklch(90.5% .093 164.15);
    --color-emerald-400: oklch(76.5% .177 163.223);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-emerald-600: oklch(59.6% .145 163.225);
    --color-emerald-700: oklch(50.8% .118 165.612);
    --color-emerald-800: oklch(43.2% .095 166.913);
    --color-teal-400: oklch(77.7% .152 181.912);
    --color-cyan-400: oklch(78.9% .154 211.53);
    --color-cyan-500: oklch(71.5% .143 215.221);
    --color-sky-400: oklch(74.6% .16 232.661);
    --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-400: oklch(70.7% .165 254.624);
    --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-blue-900: oklch(37.9% .146 265.522);
    --color-indigo-50: oklch(96.2% .018 272.314);
    --color-indigo-400: oklch(67.3% .182 276.935);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-indigo-600: oklch(51.1% .262 276.966);
    --color-violet-400: oklch(70.2% .183 293.541);
    --color-purple-50: oklch(97.7% .014 308.299);
    --color-purple-100: oklch(94.6% .033 307.174);
    --color-purple-200: oklch(90.2% .063 306.703);
    --color-purple-400: oklch(71.4% .203 305.504);
    --color-purple-500: oklch(62.7% .265 303.9);
    --color-purple-600: oklch(55.8% .288 302.321);
    --color-purple-700: oklch(49.6% .265 301.924);
    --color-fuchsia-400: oklch(74% .238 322.16);
    --color-pink-400: oklch(71.8% .202 349.761);
    --color-rose-400: oklch(71.2% .194 13.428);
    --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-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --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-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --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);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --tracking-tight: -.025em;
    --tracking-normal: 0em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-primary: #6c27e6;
    --color-light-text: #a1a5b7;
    --color-dark-text: #5e5d66;
    --layout-gradient: linear-gradient(152.21deg, #6c27e6 21.12%, #503c74eb 62.87%);
    --auth-layout-gradient: linear-gradient(257.27deg, #503c74bc 26.61%, #6c27e6cc 60.65%);
  }
}
@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, ui-sans-serif, system-ui, 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 {
    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;
  }

  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: .5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --layout-gradient: linear-gradient(152.21deg, #6c27e6 21.12%, #503c74eb 62.87%);
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  body {
    font-family: Lexend, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: Inter, sans-serif;
  }
}
@layer components;
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

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

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-2\.5 {
    top: calc(var(--spacing) * 2.5);
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-5 {
    top: calc(var(--spacing) * 5);
  }

  .top-6 {
    top: calc(var(--spacing) * 6);
  }

  .top-16 {
    top: calc(var(--spacing) * 16);
  }

  .top-\[5\%\] {
    top: 5%;
  }

  .top-\[80\%\] {
    top: 80%;
  }

  .top-full {
    top: 100%;
  }

  .-right-5\.5 {
    right: calc(var(--spacing) * -5.5);
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-10 {
    right: calc(var(--spacing) * 10);
  }

  .right-full {
    right: 100%;
  }

  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }

  .bottom-\[55\%\] {
    bottom: 55%;
  }

  .bottom-\[80\%\] {
    bottom: 80%;
  }

  .bottom-\[calc\(100\%\+6px\)\] {
    bottom: calc(100% + 6px);
  }

  .bottom-full {
    bottom: 100%;
  }

  .-left-3 {
    left: calc(var(--spacing) * -3);
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .left-4 {
    left: calc(var(--spacing) * 4);
  }

  .left-full {
    left: 100%;
  }

  .isolate {
    isolation: isolate;
  }

  .z-0 {
    z-index: 0;
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-30 {
    z-index: 30;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  .z-100 {
    z-index: 100;
  }

  .z-\[60\] {
    z-index: 60;
  }

  .z-\[999\] {
    z-index: 999;
  }

  .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;
    }
  }

  .-m-3 {
    margin: calc(var(--spacing) * -3);
  }

  .m-2 {
    margin: calc(var(--spacing) * 2);
  }

  .m-auto {
    margin: auto;
  }

  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-5 {
    margin-inline: calc(var(--spacing) * 5);
  }

  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }

  .mx-8 {
    margin-inline: calc(var(--spacing) * 8);
  }

  .mx-\[2\%\] {
    margin-inline: 2%;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }

  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }

  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }

  .my-10 {
    margin-block: calc(var(--spacing) * 10);
  }

  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-\[1\%\] {
    margin-top: 1%;
  }

  .mt-\[3\%\] {
    margin-top: 3%;
  }

  .mt-\[4\%\] {
    margin-top: 4%;
  }

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }

  .mr-8 {
    margin-right: calc(var(--spacing) * 8);
  }

  .mr-10 {
    margin-right: calc(var(--spacing) * 10);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .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-0 {
    margin-left: calc(var(--spacing) * 0);
  }

  .ml-0\.5 {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-5 {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-6 {
    margin-left: calc(var(--spacing) * 6);
  }

  .ml-8 {
    margin-left: calc(var(--spacing) * 8);
  }

  .ml-16 {
    margin-left: calc(var(--spacing) * 16);
  }

  .ml-24 {
    margin-left: calc(var(--spacing) * 24);
  }

  .ml-\[10\%\] {
    margin-left: 10%;
  }

  .ml-auto {
    margin-left: auto;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .inline-grid {
    display: inline-grid;
  }

  .table {
    display: table;
  }

  .table-cell {
    display: table-cell;
  }

  .h-0\.5 {
    height: calc(var(--spacing) * .5);
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-28 {
    height: calc(var(--spacing) * 28);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-46 {
    height: calc(var(--spacing) * 46);
  }

  .h-48 {
    height: calc(var(--spacing) * 48);
  }

  .h-52 {
    height: calc(var(--spacing) * 52);
  }

  .h-56 {
    height: calc(var(--spacing) * 56);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-80 {
    height: calc(var(--spacing) * 80);
  }

  .h-96 {
    height: calc(var(--spacing) * 96);
  }

  .h-98 {
    height: calc(var(--spacing) * 98);
  }

  .h-\[34px\] {
    height: 34px;
  }

  .h-\[54px\] {
    height: 54px;
  }

  .h-\[80\%\] {
    height: 80%;
  }

  .h-\[85\%\] {
    height: 85%;
  }

  .h-\[90\%\] {
    height: 90%;
  }

  .h-\[100\%\] {
    height: 100%;
  }

  .h-\[500px\] {
    height: 500px;
  }

  .h-\[520px\] {
    height: 520px;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .max-h-0 {
    max-height: calc(var(--spacing) * 0);
  }

  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }

  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }

  .max-h-56 {
    max-height: calc(var(--spacing) * 56);
  }

  .max-h-60 {
    max-height: calc(var(--spacing) * 60);
  }

  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }

  .max-h-72 {
    max-height: calc(var(--spacing) * 72);
  }

  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }

  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }

  .max-h-\[70vh\] {
    max-height: 70vh;
  }

  .max-h-\[80vh\] {
    max-height: 80vh;
  }

  .max-h-\[85vh\] {
    max-height: 85vh;
  }

  .max-h-\[90vh\] {
    max-height: 90vh;
  }

  .max-h-\[160px\] {
    max-height: 160px;
  }

  .max-h-\[240px\] {
    max-height: 240px;
  }

  .max-h-\[420px\] {
    max-height: 420px;
  }

  .max-h-full {
    max-height: 100%;
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }

  .min-h-\[40px\] {
    min-height: 40px;
  }

  .min-h-\[120px\] {
    min-height: 120px;
  }

  .min-h-\[180px\] {
    min-height: 180px;
  }

  .min-h-\[300px\] {
    min-height: 300px;
  }

  .min-h-\[320px\] {
    min-height: 320px;
  }

  .min-h-\[400px\] {
    min-height: 400px;
  }

  .min-h-full {
    min-height: 100%;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-36 {
    width: calc(var(--spacing) * 36);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-44 {
    width: calc(var(--spacing) * 44);
  }

  .w-52 {
    width: calc(var(--spacing) * 52);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-\[34px\] {
    width: 34px;
  }

  .w-\[54px\] {
    width: 54px;
  }

  .w-\[90\%\] {
    width: 90%;
  }

  .w-\[100px\] {
    width: 100px;
  }

  .w-\[200px\] {
    width: 200px;
  }

  .w-\[220px\] {
    width: 220px;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-max {
    width: max-content;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-20 {
    max-width: calc(var(--spacing) * 20);
  }

  .max-w-32 {
    max-width: calc(var(--spacing) * 32);
  }

  .max-w-\[10ch\] {
    max-width: 10ch;
  }

  .max-w-\[20ch\] {
    max-width: 20ch;
  }

  .max-w-\[40px\] {
    max-width: 40px;
  }

  .max-w-\[60px\] {
    max-width: 60px;
  }

  .max-w-\[200px\] {
    max-width: 200px;
  }

  .max-w-\[250px\] {
    max-width: 250px;
  }

  .max-w-\[260px\] {
    max-width: 260px;
  }

  .max-w-\[450px\] {
    max-width: 450px;
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-\[2rem\] {
    min-width: 2rem;
  }

  .min-w-\[4rem\] {
    min-width: 4rem;
  }

  .min-w-\[10rem\] {
    min-width: 10rem;
  }

  .min-w-\[40px\] {
    min-width: 40px;
  }

  .min-w-\[60px\] {
    min-width: 60px;
  }

  .min-w-\[90px\] {
    min-width: 90px;
  }

  .min-w-\[130px\] {
    min-width: 130px;
  }

  .min-w-\[180px\] {
    min-width: 180px;
  }

  .min-w-\[200px\] {
    min-width: 200px;
  }

  .min-w-\[900px\] {
    min-width: 900px;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .flex-grow, .grow {
    flex-grow: 1;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0\.5 {
    --tw-translate-x: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-1 {
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-5 {
    --tw-translate-x: calc(var(--spacing) * 5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-6 {
    --tw-translate-x: calc(var(--spacing) * 6);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-4 {
    --tw-translate-y: calc(var(--spacing) * -4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-50 {
    --tw-scale-x: 50%;
    --tw-scale-y: 50%;
    --tw-scale-z: 50%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-105 {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .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-default {
    cursor: default;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-help {
    cursor: help;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .resize-y {
    resize: vertical;
  }

  .scroll-mt-4 {
    scroll-margin-top: calc(var(--spacing) * 4);
  }

  .list-inside {
    list-style-position: inside;
  }

  .list-decimal {
    list-style-type: decimal;
  }

  .list-disc {
    list-style-type: disc;
  }

  .\[appearance\:textfield\] {
    appearance: textfield;
  }

  .appearance-none {
    appearance: none;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  :where(.space-y-0\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * 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-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * 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-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * 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-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }

  :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-3 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 3) * 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-6 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 6) * 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)));
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-gray-50 > :not(:last-child)) {
    border-color: var(--color-gray-50);
  }

  .self-end {
    align-self: flex-end;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .overflow-y-scroll {
    overflow-y: scroll;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-\[var\(--radius\)\] {
    border-radius: var(--radius);
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-b-2xl {
    border-bottom-right-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
  }

  .rounded-b-xl {
    border-bottom-right-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }

  .border-\[10px\] {
    border-style: var(--tw-border-style);
    border-width: 10px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-t-2 {
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-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-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-dotted {
    --tw-border-style: dotted;
    border-style: dotted;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-\[\#1C1B23\] {
    border-color: #1c1b23;
  }

  .border-\[\#3f3f5a\] {
    border-color: #3f3f5a;
  }

  .border-\[\#6C27E6\] {
    border-color: #6c27e6;
  }

  .border-\[\#FF2D55\] {
    border-color: #ff2d55;
  }

  .border-\[\#FF383C\] {
    border-color: #ff383c;
  }

  .border-\[\#FF9500\] {
    border-color: #ff9500;
  }

  .border-\[var\(--accent\)\] {
    border-color: var(--accent);
  }

  .border-\[var\(--border\)\] {
    border-color: var(--border);
  }

  .border-\[var\(--border-strong\)\] {
    border-color: var(--border-strong);
  }

  .border-\[var\(--danger\)\] {
    border-color: var(--danger);
  }

  .border-\[var\(--success\)\] {
    border-color: var(--success);
  }

  .border-amber-200 {
    border-color: var(--color-amber-200);
  }

  .border-blue-100 {
    border-color: var(--color-blue-100);
  }

  .border-blue-200 {
    border-color: var(--color-blue-200);
  }

  .border-blue-600 {
    border-color: var(--color-blue-600);
  }

  .border-current\/10 {
    border-color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-current\/10 {
      border-color: color-mix(in oklab, currentcolor 10%, transparent);
    }
  }

  .border-emerald-200 {
    border-color: var(--color-emerald-200);
  }

  .border-gray-50 {
    border-color: var(--color-gray-50);
  }

  .border-gray-100 {
    border-color: var(--color-gray-100);
  }

  .border-gray-200 {
    border-color: var(--color-gray-200);
  }

  .border-gray-200\/40 {
    border-color: #e5e7eb66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-gray-200\/40 {
      border-color: color-mix(in oklab, var(--color-gray-200) 40%, transparent);
    }
  }

  .border-gray-200\/70 {
    border-color: #e5e7ebb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-gray-200\/70 {
      border-color: color-mix(in oklab, var(--color-gray-200) 70%, transparent);
    }
  }

  .border-gray-300 {
    border-color: var(--color-gray-300);
  }

  .border-gray-700 {
    border-color: var(--color-gray-700);
  }

  .border-green-100 {
    border-color: var(--color-green-100);
  }

  .border-green-200 {
    border-color: var(--color-green-200);
  }

  .border-primary {
    border-color: var(--color-primary);
  }

  .border-primary\/20 {
    border-color: #6c27e633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/20 {
      border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }

  .border-primary\/30 {
    border-color: #6c27e64d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/30 {
      border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
    }
  }

  .border-purple-200 {
    border-color: var(--color-purple-200);
  }

  .border-red-200 {
    border-color: var(--color-red-200);
  }

  .border-red-300 {
    border-color: var(--color-red-300);
  }

  .border-red-400 {
    border-color: var(--color-red-400);
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-white {
    border-color: var(--color-white);
  }

  .border-white\/30 {
    border-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/30 {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .border-yellow-100 {
    border-color: var(--color-yellow-100);
  }

  .border-yellow-200 {
    border-color: var(--color-yellow-200);
  }

  .border-t-gray-900 {
    border-top-color: var(--color-gray-900);
  }

  .border-t-white {
    border-top-color: var(--color-white);
  }

  .bg-\[\#1C1B23\] {
    background-color: #1c1b23;
  }

  .bg-\[\#2F2D3A\] {
    background-color: #2f2d3a;
  }

  .bg-\[\#6C27E61A\] {
    background-color: #6c27e61a;
  }

  .bg-\[\#34C7591A\] {
    background-color: #34c7591a;
  }

  .bg-\[\#201F28\] {
    background-color: #201f28;
  }

  .bg-\[\#FF2D551A\] {
    background-color: #ff2d551a;
  }

  .bg-\[\#FF5A5F\] {
    background-color: #ff5a5f;
  }

  .bg-\[\#FF383C\] {
    background-color: #ff383c;
  }

  .bg-\[\#FF9500\] {
    background-color: #ff9500;
  }

  .bg-\[\#FFB020\] {
    background-color: #ffb020;
  }

  .bg-\[var\(--accent\)\] {
    background-color: var(--accent);
  }

  .bg-\[var\(--border-strong\)\] {
    background-color: var(--border-strong);
  }

  .bg-\[var\(--danger-bg\)\] {
    background-color: var(--danger-bg);
  }

  .bg-\[var\(--success\)\] {
    background-color: var(--success);
  }

  .bg-\[var\(--success-bg\)\] {
    background-color: var(--success-bg);
  }

  .bg-\[var\(--surface-1\)\] {
    background-color: var(--surface-1);
  }

  .bg-\[var\(--surface-2\)\] {
    background-color: var(--surface-2);
  }

  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }

  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }

  .bg-amber-300 {
    background-color: var(--color-amber-300);
  }

  .bg-amber-400 {
    background-color: var(--color-amber-400);
  }

  .bg-amber-500 {
    background-color: var(--color-amber-500);
  }

  .bg-black {
    background-color: var(--color-black);
  }

  .bg-black\/20 {
    background-color: #0003;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/20 {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }

  .bg-black\/30 {
    background-color: #0000004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/30 {
      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
  }

  .bg-black\/40 {
    background-color: #0006;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/40 {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }

  .bg-black\/50 {
    background-color: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }

  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }

  .bg-blue-400 {
    background-color: var(--color-blue-400);
  }

  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }

  .bg-cyan-400 {
    background-color: var(--color-cyan-400);
  }

  .bg-cyan-500 {
    background-color: var(--color-cyan-500);
  }

  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }

  .bg-emerald-400 {
    background-color: var(--color-emerald-400);
  }

  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }

  .bg-fuchsia-400 {
    background-color: var(--color-fuchsia-400);
  }

  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }

  .bg-gray-50\/20 {
    background-color: #f9fafb33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-50\/20 {
      background-color: color-mix(in oklab, var(--color-gray-50) 20%, transparent);
    }
  }

  .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-600 {
    background-color: var(--color-gray-600);
  }

  .bg-gray-800 {
    background-color: var(--color-gray-800);
  }

  .bg-gray-900 {
    background-color: var(--color-gray-900);
  }

  .bg-green-50 {
    background-color: var(--color-green-50);
  }

  .bg-green-100 {
    background-color: var(--color-green-100);
  }

  .bg-green-500 {
    background-color: var(--color-green-500);
  }

  .bg-indigo-400 {
    background-color: var(--color-indigo-400);
  }

  .bg-lime-400 {
    background-color: var(--color-lime-400);
  }

  .bg-lime-500 {
    background-color: var(--color-lime-500);
  }

  .bg-orange-100 {
    background-color: var(--color-orange-100);
  }

  .bg-orange-400 {
    background-color: var(--color-orange-400);
  }

  .bg-pink-400 {
    background-color: var(--color-pink-400);
  }

  .bg-primary {
    background-color: var(--color-primary);
  }

  .bg-primary\/5 {
    background-color: #6c27e60d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/5 {
      background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
    }
  }

  .bg-primary\/10 {
    background-color: #6c27e61a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
    }
  }

  .bg-primary\/70 {
    background-color: #6c27e6b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/70 {
      background-color: color-mix(in oklab, var(--color-primary) 70%, transparent);
    }
  }

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

  .bg-purple-100 {
    background-color: var(--color-purple-100);
  }

  .bg-purple-400 {
    background-color: var(--color-purple-400);
  }

  .bg-purple-600 {
    background-color: var(--color-purple-600);
  }

  .bg-red-50 {
    background-color: var(--color-red-50);
  }

  .bg-red-50\/40 {
    background-color: #fef2f266;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-50\/40 {
      background-color: color-mix(in oklab, var(--color-red-50) 40%, transparent);
    }
  }

  .bg-red-100 {
    background-color: var(--color-red-100);
  }

  .bg-red-400 {
    background-color: var(--color-red-400);
  }

  .bg-red-500 {
    background-color: var(--color-red-500);
  }

  .bg-rose-400 {
    background-color: var(--color-rose-400);
  }

  .bg-sky-400 {
    background-color: var(--color-sky-400);
  }

  .bg-teal-400 {
    background-color: var(--color-teal-400);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-violet-400 {
    background-color: var(--color-violet-400);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/15 {
    background-color: #ffffff26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/15 {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }

  .bg-white\/60 {
    background-color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/60 {
      background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .bg-white\/70 {
    background-color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/70 {
      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .bg-yellow-50 {
    background-color: var(--color-yellow-50);
  }

  .bg-yellow-300 {
    background-color: var(--color-yellow-300);
  }

  .bg-yellow-400 {
    background-color: var(--color-yellow-400);
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .from-\[\#6C27E6\] {
    --tw-gradient-from: #6c27e6;
    --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));
  }

  .from-blue-50 {
    --tw-gradient-from: var(--color-blue-50);
    --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));
  }

  .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));
  }

  .from-green-500 {
    --tw-gradient-from: var(--color-green-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));
  }

  .from-purple-500 {
    --tw-gradient-from: var(--color-purple-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-\[\#503C74\] {
    --tw-gradient-to: #503c74;
    --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-blue-600 {
    --tw-gradient-to: var(--color-blue-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));
  }

  .to-green-600 {
    --tw-gradient-to: var(--color-green-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));
  }

  .to-indigo-50 {
    --tw-gradient-to: var(--color-indigo-50);
    --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));
  }

  .fill-current {
    fill: currentColor;
  }

  .object-contain {
    object-fit: contain;
  }

  .\!p-4 {
    padding: calc(var(--spacing) * 4) !important;
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-12 {
    padding: calc(var(--spacing) * 12);
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-\[2\%\] {
    padding-inline: 2%;
  }

  .px-\[4\%\] {
    padding-inline: 4%;
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-\[10\%\] {
    padding-block: 10%;
  }

  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pl-1\.5 {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-2\.5 {
    padding-left: calc(var(--spacing) * 2.5);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-\[3\%\] {
    padding-left: 3%;
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .align-middle {
    vertical-align: middle;
  }

  .align-top {
    vertical-align: top;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .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-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--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-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[8px\] {
    font-size: 8px;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[14px\] {
    font-size: 14px;
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .break-words {
    overflow-wrap: break-word;
  }

  .break-all {
    word-break: break-all;
  }

  .whitespace-normal {
    white-space: normal;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .text-\[\#6C27E6\] {
    color: #6c27e6;
  }

  .text-\[\#7E8299\] {
    color: #7e8299;
  }

  .text-\[\#66CB9F\] {
    color: #66cb9f;
  }

  .text-\[\#BFBFBF\] {
    color: #bfbfbf;
  }

  .text-\[\#F4F0EB\] {
    color: #f4f0eb;
  }

  .text-\[\#FF2D55\] {
    color: #ff2d55;
  }

  .text-\[var\(--accent-text\)\] {
    color: var(--accent-text);
  }

  .text-\[var\(--danger\)\] {
    color: var(--danger);
  }

  .text-\[var\(--success\)\] {
    color: var(--success);
  }

  .text-\[var\(--text-1\)\] {
    color: var(--text-1);
  }

  .text-\[var\(--text-2\)\] {
    color: var(--text-2);
  }

  .text-\[var\(--text-3\)\] {
    color: var(--text-3);
  }

  .text-\[var\(--warning-text\)\] {
    color: var(--warning-text);
  }

  .text-amber-500 {
    color: var(--color-amber-500);
  }

  .text-amber-600 {
    color: var(--color-amber-600);
  }

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-amber-800 {
    color: var(--color-amber-800);
  }

  .text-black {
    color: var(--color-black);
  }

  .text-blue-500 {
    color: var(--color-blue-500);
  }

  .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-blue-900 {
    color: var(--color-blue-900);
  }

  .text-dark-text {
    color: var(--color-dark-text);
  }

  .text-emerald-600 {
    color: var(--color-emerald-600);
  }

  .text-emerald-700 {
    color: var(--color-emerald-700);
  }

  .text-gray-300 {
    color: var(--color-gray-300);
  }

  .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-400 {
    color: var(--color-green-400);
  }

  .text-green-500 {
    color: var(--color-green-500);
  }

  .text-green-600 {
    color: var(--color-green-600);
  }

  .text-green-700 {
    color: var(--color-green-700);
  }

  .text-indigo-600 {
    color: var(--color-indigo-600);
  }

  .text-light-text {
    color: var(--color-light-text);
  }

  .text-orange-500 {
    color: var(--color-orange-500);
  }

  .text-orange-700 {
    color: var(--color-orange-700);
  }

  .text-primary {
    color: var(--color-primary);
  }

  .text-purple-100 {
    color: var(--color-purple-100);
  }

  .text-purple-200 {
    color: var(--color-purple-200);
  }

  .text-purple-500 {
    color: var(--color-purple-500);
  }

  .text-purple-600 {
    color: var(--color-purple-600);
  }

  .text-purple-700 {
    color: var(--color-purple-700);
  }

  .text-red-500 {
    color: var(--color-red-500);
  }

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-red-700 {
    color: var(--color-red-700);
  }

  .text-red-800 {
    color: var(--color-red-800);
  }

  .text-white {
    color: var(--color-white);
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .text-yellow-600 {
    color: var(--color-yellow-600);
  }

  .text-yellow-700 {
    color: var(--color-yellow-700);
  }

  .text-yellow-900 {
    color: var(--color-yellow-900);
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .normal-case {
    text-transform: none;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .line-through {
    text-decoration-line: line-through;
  }

  .underline {
    text-decoration-line: underline;
  }

  .accent-primary {
    accent-color: var(--color-primary);
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-25 {
    opacity: .25;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-75 {
    opacity: .75;
  }

  .opacity-90 {
    opacity: .9;
  }

  .opacity-100 {
    opacity: 1;
  }

  .shadow {
    --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);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_20px_50px_rgba\(0\,0\,0\,0\.3\)\] {
    --tw-shadow: 0 20px 50px var(--tw-shadow-color, #0000004d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .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-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px 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);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px 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);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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);
  }

  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + 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);
  }

  .ring-2 {
    --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);
  }

  .shadow-primary\/20 {
    --tw-shadow-color: #6c27e633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-primary\/20 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .ring-primary {
    --tw-ring-color: var(--color-primary);
  }

  .ring-primary\/20 {
    --tw-ring-color: #6c27e633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-primary\/20 {
      --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }

  .ring-offset-1 {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-\[1px\] {
    --tw-backdrop-blur: blur(1px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, 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-all {
    transition-property: all;
    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));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .duration-1000 {
    --tw-duration: 1s;
    transition-duration: 1s;
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .will-change-transform {
    will-change: transform;
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  @media (hover: hover) {
    .group-hover\:block:is(:where(.group):hover *) {
      display: block;
    }

    .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * .5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:text-white:is(:where(.group):hover *) {
      color: var(--color-white);
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }
  }

  .peer-checked\:bg-\[var\(--accent\)\]:is(:where(.peer):checked ~ *) {
    background-color: var(--accent);
  }

  .peer-focus\:ring-4:is(:where(.peer):focus ~ *) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + 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);
  }

  .peer-focus\:ring-\[var\(--accent-bg\)\]:is(:where(.peer):focus ~ *) {
    --tw-ring-color: var(--accent-bg);
  }

  .peer-focus\:outline-none:is(:where(.peer):focus ~ *) {
    --tw-outline-style: none;
    outline-style: none;
  }

  .placeholder\:text-\[var\(--text-3\)\]::placeholder {
    color: var(--text-3);
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .after\:top-\[2px\]:after {
    content: var(--tw-content);
    top: 2px;
  }

  .after\:left-\[2px\]:after {
    content: var(--tw-content);
    left: 2px;
  }

  .after\:h-5:after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 5);
  }

  .after\:w-5:after {
    content: var(--tw-content);
    width: calc(var(--spacing) * 5);
  }

  .after\:rounded-full:after {
    content: var(--tw-content);
    border-radius: 3.40282e38px;
  }

  .after\:border:after {
    content: var(--tw-content);
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .after\:border-\[var\(--border\)\]:after {
    content: var(--tw-content);
    border-color: var(--border);
  }

  .after\:bg-\[var\(--surface-1\)\]:after {
    content: var(--tw-content);
    background-color: var(--surface-1);
  }

  .after\:transition-all:after {
    content: var(--tw-content);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .after\:content-\[\'\'\]:after {
    --tw-content: "";
    content: var(--tw-content);
  }

  .peer-checked\:after\:translate-x-full:is(:where(.peer):checked ~ *):after {
    content: var(--tw-content);
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .peer-checked\:after\:border-white:is(:where(.peer):checked ~ *):after {
    content: var(--tw-content);
    border-color: var(--color-white);
  }

  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .last\:border-r-0:last-child {
    border-right-style: var(--tw-border-style);
    border-right-width: 0;
  }

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  @media (hover: hover) {
    .hover\:scale-105:hover {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:scale-110:hover {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:scale-150:hover {
      --tw-scale-x: 150%;
      --tw-scale-y: 150%;
      --tw-scale-z: 150%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:border-gray-200:hover {
      border-color: var(--color-gray-200);
    }

    .hover\:border-gray-300:hover {
      border-color: var(--color-gray-300);
    }

    .hover\:border-gray-400:hover {
      border-color: var(--color-gray-400);
    }

    .hover\:border-white\/50:hover {
      border-color: #ffffff80;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-white\/50:hover {
        border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
      }
    }

    .hover\:bg-\[var\(--border-strong\)\]:hover {
      background-color: var(--border-strong);
    }

    .hover\:bg-\[var\(--surface-2\)\]:hover {
      background-color: var(--surface-2);
    }

    .hover\:bg-amber-100:hover {
      background-color: var(--color-amber-100);
    }

    .hover\:bg-blue-600:hover {
      background-color: var(--color-blue-600);
    }

    .hover\:bg-emerald-100:hover {
      background-color: var(--color-emerald-100);
    }

    .hover\:bg-gray-50:hover {
      background-color: var(--color-gray-50);
    }

    .hover\:bg-gray-100:hover {
      background-color: var(--color-gray-100);
    }

    .hover\:bg-gray-100\/10:hover {
      background-color: #f3f4f61a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-gray-100\/10:hover {
        background-color: color-mix(in oklab, var(--color-gray-100) 10%, transparent);
      }
    }

    .hover\:bg-gray-200:hover {
      background-color: var(--color-gray-200);
    }

    .hover\:bg-gray-700:hover {
      background-color: var(--color-gray-700);
    }

    .hover\:bg-gray-800:hover {
      background-color: var(--color-gray-800);
    }

    .hover\:bg-primary\/5:hover {
      background-color: #6c27e60d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/5:hover {
        background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
      }
    }

    .hover\:bg-primary\/10:hover {
      background-color: #6c27e61a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/10:hover {
        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
      }
    }

    .hover\:bg-primary\/70:hover {
      background-color: #6c27e6b3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/70:hover {
        background-color: color-mix(in oklab, var(--color-primary) 70%, transparent);
      }
    }

    .hover\:bg-primary\/80:hover {
      background-color: #6c27e6cc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/80:hover {
        background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
      }
    }

    .hover\:bg-primary\/90:hover {
      background-color: #6c27e6e6;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
      }
    }

    .hover\:bg-red-50:hover {
      background-color: var(--color-red-50);
    }

    .hover\:bg-white:hover {
      background-color: var(--color-white);
    }

    .hover\:bg-white\/10:hover {
      background-color: #ffffff1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/10:hover {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }

    .hover\:text-\[var\(--accent-text\)\]:hover {
      color: var(--accent-text);
    }

    .hover\:text-\[var\(--text-1\)\]:hover {
      color: var(--text-1);
    }

    .hover\:text-\[var\(--text-2\)\]:hover {
      color: var(--text-2);
    }

    .hover\:text-\[var\(--warning\)\]:hover {
      color: var(--warning);
    }

    .hover\:text-amber-800:hover {
      color: var(--color-amber-800);
    }

    .hover\:text-emerald-700:hover {
      color: var(--color-emerald-700);
    }

    .hover\:text-emerald-800:hover {
      color: var(--color-emerald-800);
    }

    .hover\:text-gray-200:hover {
      color: var(--color-gray-200);
    }

    .hover\:text-gray-500:hover {
      color: var(--color-gray-500);
    }

    .hover\:text-gray-600:hover {
      color: var(--color-gray-600);
    }

    .hover\:text-gray-700:hover {
      color: var(--color-gray-700);
    }

    .hover\:text-gray-800:hover {
      color: var(--color-gray-800);
    }

    .hover\:text-gray-900:hover {
      color: var(--color-gray-900);
    }

    .hover\:text-primary:hover {
      color: var(--color-primary);
    }

    .hover\:text-primary\/80:hover {
      color: #6c27e6cc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-primary\/80:hover {
        color: color-mix(in oklab, var(--color-primary) 80%, transparent);
      }
    }

    .hover\:text-primary\/90:hover {
      color: #6c27e6e6;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-primary\/90:hover {
        color: color-mix(in oklab, var(--color-primary) 90%, transparent);
      }
    }

    .hover\:text-red-500:hover {
      color: var(--color-red-500);
    }

    .hover\:text-red-700:hover {
      color: var(--color-red-700);
    }

    .hover\:text-red-800:hover {
      color: var(--color-red-800);
    }

    .hover\:text-white:hover {
      color: var(--color-white);
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:opacity-90:hover {
      opacity: .9;
    }

    .hover\:shadow-lg:hover {
      --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);
    }

    .hover\:shadow-sm:hover {
      --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);
    }

    .hover\:brightness-110:hover {
      --tw-brightness: brightness(110%);
      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, );
    }
  }

  .focus\:border-\[var\(--accent\)\]:focus {
    border-color: var(--accent);
  }

  .focus\:text-\[var\(--text-1\)\]:focus {
    color: var(--text-1);
  }

  .focus\:text-\[var\(--warning\)\]:focus {
    color: var(--warning);
  }

  .focus\:ring-1:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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-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-indigo-500:focus {
    --tw-ring-color: var(--color-indigo-500);
  }

  .focus\:ring-primary:focus {
    --tw-ring-color: var(--color-primary);
  }

  .focus\:ring-primary\/20:focus {
    --tw-ring-color: #6c27e633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-primary\/20:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }

  .focus\:ring-primary\/90:focus {
    --tw-ring-color: #6c27e6e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-primary\/90:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
    }
  }

  .focus\:outline-\[var\(--accent\)\]:focus {
    outline-color: var(--accent);
  }

  .focus\:outline-primary:focus {
    outline-color: var(--color-primary);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:opacity-30:disabled {
    opacity: .3;
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  @media (min-width: 40rem) {
    .sm\:mx-auto {
      margin-inline: auto;
    }

    .sm\:mt-1 {
      margin-top: calc(var(--spacing) * 1);
    }

    .sm\:mr-3 {
      margin-right: calc(var(--spacing) * 3);
    }

    .sm\:mb-0 {
      margin-bottom: calc(var(--spacing) * 0);
    }

    .sm\:inline {
      display: inline;
    }

    .sm\:w-1\/2 {
      width: 50%;
    }

    .sm\:w-\[500px\] {
      width: 500px;
    }

    .sm\:w-auto {
      width: auto;
    }

    .sm\:w-full {
      width: 100%;
    }

    .sm\:max-w-md {
      max-width: var(--container-md);
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:items-center {
      align-items: center;
    }

    .sm\:justify-between {
      justify-content: space-between;
    }

    .sm\:justify-end {
      justify-content: flex-end;
    }

    .sm\:justify-start {
      justify-content: flex-start;
    }

    .sm\:rounded-lg {
      border-radius: var(--radius-lg);
    }

    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .sm\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }

    .sm\:text-start {
      text-align: start;
    }

    .sm\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  @media (min-width: 48rem) {
    .md\:right-0 {
      right: calc(var(--spacing) * 0);
    }

    .md\:right-20 {
      right: calc(var(--spacing) * 20);
    }

    .md\:left-0 {
      left: calc(var(--spacing) * 0);
    }

    .md\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }

    .md\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .md\:mt-2 {
      margin-top: calc(var(--spacing) * 2);
    }

    .md\:mt-3 {
      margin-top: calc(var(--spacing) * 3);
    }

    .md\:mt-4 {
      margin-top: calc(var(--spacing) * 4);
    }

    .md\:mt-5 {
      margin-top: calc(var(--spacing) * 5);
    }

    .md\:mt-8 {
      margin-top: calc(var(--spacing) * 8);
    }

    .md\:mr-3 {
      margin-right: calc(var(--spacing) * 3);
    }

    .md\:mb-0 {
      margin-bottom: calc(var(--spacing) * 0);
    }

    .md\:mb-1 {
      margin-bottom: calc(var(--spacing) * 1);
    }

    .md\:mb-2 {
      margin-bottom: calc(var(--spacing) * 2);
    }

    .md\:mb-3 {
      margin-bottom: calc(var(--spacing) * 3);
    }

    .md\:mb-4 {
      margin-bottom: calc(var(--spacing) * 4);
    }

    .md\:mb-6 {
      margin-bottom: calc(var(--spacing) * 6);
    }

    .md\:mb-8 {
      margin-bottom: calc(var(--spacing) * 8);
    }

    .md\:mb-12 {
      margin-bottom: calc(var(--spacing) * 12);
    }

    .md\:ml-7 {
      margin-left: calc(var(--spacing) * 7);
    }

    .md\:ml-8 {
      margin-left: calc(var(--spacing) * 8);
    }

    .md\:flex {
      display: flex;
    }

    .md\:hidden {
      display: none;
    }

    .md\:inline {
      display: inline;
    }

    .md\:inline-flex {
      display: inline-flex;
    }

    .md\:h-5 {
      height: calc(var(--spacing) * 5);
    }

    .md\:h-8 {
      height: calc(var(--spacing) * 8);
    }

    .md\:h-14 {
      height: calc(var(--spacing) * 14);
    }

    .md\:h-16 {
      height: calc(var(--spacing) * 16);
    }

    .md\:h-20 {
      height: calc(var(--spacing) * 20);
    }

    .md\:h-\[450px\] {
      height: 450px;
    }

    .md\:w-5 {
      width: calc(var(--spacing) * 5);
    }

    .md\:w-8 {
      width: calc(var(--spacing) * 8);
    }

    .md\:w-14 {
      width: calc(var(--spacing) * 14);
    }

    .md\:w-16 {
      width: calc(var(--spacing) * 16);
    }

    .md\:w-20 {
      width: calc(var(--spacing) * 20);
    }

    .md\:w-24 {
      width: calc(var(--spacing) * 24);
    }

    .md\:w-28 {
      width: calc(var(--spacing) * 28);
    }

    .md\:w-36 {
      width: calc(var(--spacing) * 36);
    }

    .md\:w-56 {
      width: calc(var(--spacing) * 56);
    }

    .md\:w-\[70\%\] {
      width: 70%;
    }

    .md\:w-\[150px\] {
      width: 150px;
    }

    .md\:w-\[300px\] {
      width: 300px;
    }

    .md\:w-\[400px\] {
      width: 400px;
    }

    .md\:w-\[700px\] {
      width: 700px;
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:items-center {
      align-items: center;
    }

    .md\:items-start {
      align-items: flex-start;
    }

    .md\:justify-end {
      justify-content: flex-end;
    }

    .md\:justify-start {
      justify-content: flex-start;
    }

    .md\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }

    .md\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .md\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .md\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }

    :where(.md\:space-y-3 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.md\: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(.md\:space-y-5 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.md\: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(.md\: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(.md\: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)));
    }

    .md\:rounded-full {
      border-radius: 3.40282e38px;
    }

    .md\:\!p-4 {
      padding: calc(var(--spacing) * 4) !important;
    }

    .md\:\!p-8 {
      padding: calc(var(--spacing) * 8) !important;
    }

    .md\:p-3 {
      padding: calc(var(--spacing) * 3);
    }

    .md\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .md\:p-5 {
      padding: calc(var(--spacing) * 5);
    }

    .md\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .md\:p-7 {
      padding: calc(var(--spacing) * 7);
    }

    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .md\:p-10 {
      padding: calc(var(--spacing) * 10);
    }

    .md\:px-2 {
      padding-inline: calc(var(--spacing) * 2);
    }

    .md\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }

    .md\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .md\:py-1 {
      padding-block: calc(var(--spacing) * 1);
    }

    .md\:py-2 {
      padding-block: calc(var(--spacing) * 2);
    }

    .md\:py-3 {
      padding-block: calc(var(--spacing) * 3);
    }

    .md\:py-4 {
      padding-block: calc(var(--spacing) * 4);
    }

    .md\:py-6 {
      padding-block: calc(var(--spacing) * 6);
    }

    .md\:py-12 {
      padding-block: calc(var(--spacing) * 12);
    }

    .md\:pt-4 {
      padding-top: calc(var(--spacing) * 4);
    }

    .md\:pt-6 {
      padding-top: calc(var(--spacing) * 6);
    }

    .md\:pt-8 {
      padding-top: calc(var(--spacing) * 8);
    }

    .md\:pr-4 {
      padding-right: calc(var(--spacing) * 4);
    }

    .md\:pb-16 {
      padding-bottom: calc(var(--spacing) * 16);
    }

    .md\:pl-7 {
      padding-left: calc(var(--spacing) * 7);
    }

    .md\:\!text-2xl {
      font-size: var(--text-2xl) !important;
      line-height: var(--tw-leading, var(--text-2xl--line-height)) !important;
    }

    .md\:\!text-4xl {
      font-size: var(--text-4xl) !important;
      line-height: var(--tw-leading, var(--text-4xl--line-height)) !important;
    }

    .md\:\!text-lg {
      font-size: var(--text-lg) !important;
      line-height: var(--tw-leading, var(--text-lg--line-height)) !important;
    }

    .md\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .md\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .md\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .md\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }

    .md\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }

    .md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }

    .md\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }

    .md\:text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }

    .md\:text-\[22px\] {
      font-size: 22px;
    }
  }

  @media (min-width: 64rem) {
    .lg\:w-1\/2 {
      width: 50%;
    }

    .lg\:w-52 {
      width: calc(var(--spacing) * 52);
    }

    .lg\:w-\[50\%\] {
      width: 50%;
    }

    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[40\%_60\%\] {
      grid-template-columns: 40% 60%;
    }

    .lg\:flex-row {
      flex-direction: row;
    }

    .lg\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
  }

  .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
    appearance: none;
  }

  .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
    appearance: none;
  }

  .text-balance {
    text-wrap: balance;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #6c27e6 #f1f1f2;
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f2;
    border-radius: 9999px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #6c27e6;
    border-radius: 9999px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #5a1fc4;
  }
}
:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --surface-0: #fafaf9;
  --surface-1: #fff;
  --surface-2: #f5f5f3;
  --surface-rail: #f7f7f5;
  --text-1: #171716;
  --text-2: #57574f;
  --text-3: #6e6e66;
  --border: #e4e4df;
  --border-strong: #c9c9c1;
  --accent: #5b4de0;
  --accent-bg: #efedfd;
  --accent-text: #3f35a8;
  --success: #00a86b;
  --success-bg: #dcfaec;
  --success-text: #046b48;
  --warning: #f59f00;
  --warning-bg: #fff3d6;
  --warning-text: #7a4e00;
  --danger: #e5484d;
  --danger-bg: #ffe9e9;
  --danger-text: #a81f24;
  --neutral-bg: #f0f0ed;
  --radius: 6px;
  --radius-lg: 10px;
  --row-h: 58px;
  --cell-y: 11px;
}
:root[data-theme="dark"] {
  --surface-0: #131313;
  --surface-1: #1a1a19;
  --surface-2: #212120;
  --surface-rail: #161615;
  --text-1: #f1f1ee;
  --text-2: #adada5;
  --text-3: #8b8b83;
  --border: #34342f;
  --border-strong: #4b4b45;
  --accent: #8e84f0;
  --accent-bg: #241f4d;
  --accent-text: #b4acf7;
  --success: #3ddc97;
  --success-bg: #0b3d2c;
  --success-text: #6be9b0;
  --warning: #fc3;
  --warning-bg: #40300a;
  --warning-text: #ffd966;
  --danger: #ff6b6b;
  --danger-bg: #43201f;
  --danger-text: #ff9494;
  --neutral-bg: #252523;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-0: #131313;
    --surface-1: #1a1a19;
    --surface-2: #212120;
    --surface-rail: #161615;
    --text-1: #f1f1ee;
    --text-2: #adada5;
    --text-3: #8b8b83;
    --border: #34342f;
    --border-strong: #4b4b45;
    --accent: #8e84f0;
    --accent-bg: #241f4d;
    --accent-text: #b4acf7;
    --success: #3ddc97;
    --success-bg: #0b3d2c;
    --success-text: #6be9b0;
    --warning: #fc3;
    --warning-bg: #40300a;
    --warning-text: #ffd966;
    --danger: #ff6b6b;
    --danger-bg: #43201f;
    --danger-text: #ff9494;
    --neutral-bg: #252523;
  }
}
:root[data-density="compact"] {
  --row-h: 40px;
  --cell-y: 6px;
}
body {
  font-family: Lexend, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Inter, sans-serif;
}
.bg-auth-layout-gradient {
  background-image: var(--auth-layout-gradient);
}
.bg-layout-gradient {
  background-image: var(--layout-gradient);
}
.bg-layout-image {
  background-image: url("/asset/Bg.webp");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@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-divide-y-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-leading {
  syntax: "*";
  inherits: false
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false
}
@property --tw-tracking {
  syntax: "*";
  inherits: false
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}
@property --tw-numeric-fraction {
  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-backdrop-blur {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}
@property --tw-duration {
  syntax: "*";
  inherits: false
}
@property --tw-ease {
  syntax: "*";
  inherits: false
}
@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* =====================================================================
   Palette bridge — makes the legacy Tailwind colour utilities theme-aware.

   WHY THIS FILE EXISTS
   The redesigned screens use the design tokens (--surface-1, --text-1, …) and
   respond to `data-theme`. A large amount of older markup does not: it carries
   literal Tailwind palette classes — around 1,200 uses of `bg-white`,
   `text-gray-500`, `border-gray-200`, `bg-amber-50` and friends. Those are fixed
   light-mode colours, so in dark mode they produce exactly the failures reported:
   near-black text on a dark grey card, and white panels with white text.

   Rewriting 1,200 call sites would be a very large diff across files that are
   otherwise working, and every new one would reintroduce the bug. Instead this
   redefines the utilities themselves in terms of the tokens, once. Nothing else
   changes, and any markup written in either vocabulary now themes correctly.

   HOW IT WINS THE CASCADE
   Tailwind 4 emits its utilities inside `@layer utilities`. Unlayered rules beat
   layered ones regardless of specificity, so this file — imported after
   `@import "tailwindcss"` and deliberately NOT wrapped in a layer — takes
   precedence without a single `!important`.

   WHAT IS DELIBERATELY LEFT ALONE
   - `text-white` / `border-white`: correct on a filled accent or danger button,
     where white is the contrast colour and not a theme colour. Remapping it
     would turn button labels dark on a dark fill.
   - `bg-black` and every `/opacity` variant (`bg-black/40`): modal scrims, which
     should stay black in both themes. Tailwind compiles an opacity variant to a
     different class, so those are untouched by the rules below anyway.
   - Chart and identity colours set inline in JS: those are data colours, chosen
     to stay distinguishable in both themes, not surface colours.

   Mapping follows the token set's own three-part semantic structure: a signal
   colour, a tint background, and a readable text colour.
   ===================================================================== */

/* ---------------------------------------------------------- surfaces */

.bg-white { background-color: var(--surface-1); }

.bg-gray-50,
.bg-slate-50,
.bg-neutral-50,
.bg-zinc-50 { background-color: var(--surface-2); }

.bg-gray-100,
.bg-slate-100,
.bg-neutral-100,
.bg-zinc-100 { background-color: var(--surface-2); }

/* 200/300 read as a divider or a pressed state rather than a surface. */

.bg-gray-200,
.bg-slate-200,
.bg-neutral-200 { background-color: var(--border); }

.bg-gray-300,
.bg-slate-300,
.bg-neutral-300 { background-color: var(--border-strong); }

/* ------------------------------------------------------------- text */

/* 900/800/700 are body/heading text; 600/500 secondary; 400 tertiary. This
   matches how the token set splits --text-1 / --text-2 / --text-3. */

.text-black,
.text-gray-900, .text-gray-800, .text-gray-700,
.text-slate-900, .text-slate-800, .text-slate-700,
.text-neutral-900, .text-neutral-800, .text-neutral-700,
.text-zinc-900, .text-zinc-800, .text-zinc-700 { color: var(--text-1); }

.text-gray-600, .text-gray-500,
.text-slate-600, .text-slate-500,
.text-neutral-600, .text-neutral-500,
.text-zinc-600, .text-zinc-500 { color: var(--text-2); }

.text-gray-400, .text-gray-300,
.text-slate-400, .text-neutral-400, .text-zinc-400 { color: var(--text-3); }

/* ----------------------------------------------------------- borders */

.border-gray-100, .border-gray-200,
.border-slate-100, .border-slate-200,
.border-neutral-100, .border-neutral-200,
.border-zinc-100, .border-zinc-200 { border-color: var(--border); }

.border-gray-300, .border-gray-400,
.border-slate-300, .border-neutral-300, .border-zinc-300 { border-color: var(--border-strong); }

.divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }

/* --------------------------------------------------------- semantics */

/* danger */

.text-red-500, .text-red-600, .text-red-700, .text-red-800, .text-red-900,
.text-rose-500, .text-rose-600, .text-rose-700 { color: var(--danger-text); }

.bg-red-50, .bg-red-100, .bg-rose-50 { background-color: var(--danger-bg); }

.border-red-100, .border-red-200, .border-red-300 { border-color: var(--danger); }

/* warning */

.text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900,
.text-yellow-600, .text-yellow-700, .text-yellow-800, .text-yellow-900,
.text-orange-600, .text-orange-700, .text-orange-800 { color: var(--warning-text); }

.bg-amber-50, .bg-amber-100, .bg-yellow-50, .bg-yellow-100,
.bg-orange-50, .bg-orange-100 { background-color: var(--warning-bg); }

.border-amber-100, .border-amber-200, .border-amber-300,
.border-yellow-200, .border-orange-200 { border-color: var(--warning); }

/* success */

.text-green-600, .text-green-700, .text-green-800, .text-green-900,
.text-emerald-600, .text-emerald-700, .text-emerald-800 { color: var(--success-text); }

.bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100 { background-color: var(--success-bg); }

.border-green-100, .border-green-200, .border-emerald-200 { border-color: var(--success); }

/* accent — the product's primary is violet, so blue/indigo/violet tints all land here */

.text-blue-600, .text-blue-700, .text-blue-800,
.text-indigo-600, .text-indigo-700,
.text-violet-600, .text-violet-700,
.text-purple-600, .text-purple-700 { color: var(--accent-text); }

.bg-blue-50, .bg-blue-100, .bg-indigo-50, .bg-indigo-100,
.bg-violet-50, .bg-violet-100, .bg-purple-50, .bg-purple-100 { background-color: var(--accent-bg); }

.border-blue-100, .border-blue-200, .border-indigo-200,
.border-violet-200, .border-purple-200 { border-color: var(--accent); }

/* ------------------------------------------------------- placeholders */

.placeholder-gray-400::placeholder,
.placeholder-gray-500::placeholder { color: var(--text-3); }

/* =====================================================================
   Scrollbars — one look everywhere.

   `.k-card--scroll`, `.k-pop` and `.k-drawer` already had the design's thin
   token-coloured scrollbar. Everything else fell back to the browser default,
   which on a dark card renders a light grey trough — the Logs table being the
   obvious one. These rules apply the same treatment to every scroll container in
   the app, so a scrollbar looks the same wherever it appears and follows the
   theme.

   `scrollbar-color` covers Firefox; the `::-webkit-scrollbar` block covers
   Chromium and Safari. The thumb is `border-box`-clipped with a transparent
   border so it reads as a slim pill with breathing room rather than a solid bar.
   ===================================================================== */

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

::-webkit-scrollbar { width: 10px; height: 10px; }

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

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

/* Chromium draws a small square where the two bars meet; make it disappear. */

::-webkit-scrollbar-corner { background: transparent; }

/* =====================================================================
   Recharts tooltips.

   Recharts writes its tooltip's surface and label colours as INLINE styles —
   a white panel and a black label — so a chart that does not pass its own
   `contentStyle` / `labelStyle` renders a white box with black text on a dark
   card. A dark-mode contrast sweep found the label as the last black-on-dark
   text left in the app ("31 Aug", "0%" — the hovered x-axis value).

   Inline styles beat stylesheet rules, so these need `!important`. It is the
   narrow exception the rest of this file avoids: there is no other way to reach
   a style recharts sets on the element itself, short of passing three style
   props to every chart and remembering to do it on the next one.

   ITEM COLOURS ARE FORCED TOO. This block used to say they were deliberately
   left alone, because "recharts colours each item by its series, which is
   meaningful and readable in both themes". Both halves of that were wrong:

     - There is not always a series colour. A `<Bar>` whose colours come from
       per-point `<Cell>` children has no `fill` of its own, so recharts finds
       nothing for the tooltip item and falls back to its built-in BLACK. That
       is the Carbon emissions / Power consumption tooltip: a readable label
       over an unreadable "gemini-2.5-pro : 16.48%".
     - Even when there IS a series colour, nothing guarantees it contrasts with
       the tooltip's own surface — a dark series on a dark panel is illegible
       however meaningful the hue.

   So the item TEXT is tokenised. The cost is that the item no longer repeats
   its series colour; the tooltip's label already names what is hovered, and
   most charts here are single-series. Legibility is not a trade worth making
   for a colour cue that is redundant when it works and invisible when it does
   not.

   Legend text is the same bug in the same library: recharts writes
   `color: <series colour>` inline on each legend entry, so a legend on a chart
   with Cell-driven colours renders black. Tokenised for the same reason.
   ===================================================================== */

.recharts-default-tooltip {
  background: var(--surface-1) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
}

.recharts-tooltip-label { color: var(--text-1) !important; }

/* The `li` carries the inline colour; the spans inside inherit it, but they are
   listed explicitly because recharts has moved which element gets the style
   between versions and an inherited-only rule would silently stop working. */

.recharts-tooltip-item,
.recharts-tooltip-item-name,
.recharts-tooltip-item-separator,
.recharts-tooltip-item-unit { color: var(--text-2) !important; }

.recharts-tooltip-item-value { color: var(--text-1) !important; }

.recharts-legend-item-text { color: var(--text-2) !important; }

.recharts-tooltip-cursor { fill: var(--surface-2); fill-opacity: .5; }

/* =====================================================================
   Inherited text colour — the root cause of "dark text on dark".

   `body` had no `color`, so it computed to the UA default of pure black while
   `--text-1` was `#f1f1ee`. Every element that sets a token BACKGROUND but no
   token COLOR therefore inherited black: fine on a white card, invisible on a
   dark one. The estate node modal was the clearest case — panel on
   `var(--surface-1)`, its heading, figures and "Open in full" link all at
   rgb(0,0,0) for a contrast ratio of 1.21.

   Setting it once here fixes every such element at the root instead of hunting
   them one component at a time, and means a component that forgets an explicit
   colour now inherits a correct one rather than a broken one.

   Light mode is effectively unchanged: `--text-1` is `#171716` there, which is
   what the design specifies and is imperceptibly different from the `#000` these
   elements were falling back to.
   ===================================================================== */

html, body { color: var(--text-1); }